{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select",
  "type": "registry:ui",
  "title": "Select",
  "description": "A customizable select component",
  "dependencies": [
    "@base-ui/react",
    "clsx",
    "tailwind-merge",
    "lucide-react"
  ],
  "registryDependencies": [
    "classes"
  ],
  "files": [
    {
      "path": "src/registry/pure-ui/ui/select/index.tsx",
      "content": "\"use client\";\r\n\r\nimport { createContext, useContext, useMemo } from \"react\";\r\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\";\r\nimport { ChevronDownIcon, ChevronUpIcon } from \"lucide-react\";\r\n\r\nimport { cn } from \"@/lib/classes\";\r\n\r\nconst cssAnimationPresets = {\r\n  none: \"transition-none\",\r\n  scale: [\r\n    `[transition-property:scale,opacity] [will-change:scale,opacity]`,\r\n    `data-starting-style:scale-80 data-starting-style:opacity-0 data-ending-style:opacity-0 data-ending-style:scale-80`,\r\n  ],\r\n  fade: [\r\n    `[transition-property:opacity] [will-change:opacity]`,\r\n    `data-starting-style:opacity-0 data-ending-style:opacity-0`,\r\n  ],\r\n  slideOutside: [\r\n    `[transition-property:translate,opacity] [will-change:translate,opacity]`,\r\n    // side=bottom\r\n    `data-[side=bottom]:data-starting-style:opacity-0 data-[side=bottom]:data-starting-style:translate-y-[10px] data-[side=bottom]:data-ending-style:translate-y-[10px] data-[side=bottom]:data-ending-style:opacity-0`,\r\n    // side=top\r\n    `data-[side=top]:data-starting-style:opacity-0 data-[side=top]:data-starting-style:translate-y-[-10px] data-[side=top]:data-ending-style:translate-y-[-10px] data-[side=top]:data-ending-style:opacity-0`,\r\n    // side=left\r\n    `data-[side=left]:data-starting-style:opacity-0 data-[side=left]:data-starting-style:translate-x-[-10px] data-[side=left]:data-ending-style:translate-x-[-10px] data-[side=left]:data-ending-style:opacity-0`,\r\n    // side=right\r\n    `data-[side=right]:data-starting-style:opacity-0 data-[side=right]:data-starting-style:translate-x-[10px] data-[side=right]:data-ending-style:translate-x-[10px] data-[side=right]:data-ending-style:opacity-0`,\r\n    // side=inline-start\r\n    `data-[side=inline-start]:data-starting-style:opacity-0 data-[side=inline-start]:data-starting-style:translate-x-[-10px] data-[side=inline-start]:data-ending-style:translate-x-[-10px] data-[side=inline-start]:data-ending-style:opacity-0`,\r\n    // side=inline-end\r\n    `data-[side=inline-end]:data-starting-style:opacity-0 data-[side=inline-end]:data-starting-style:translate-x-[10px] data-[side=inline-end]:data-ending-style:translate-x-[10px] data-[side=inline-end]:data-ending-style:opacity-0`,\r\n  ],\r\n  slideInside: [\r\n    `[transition-property:translate,opacity] [will-change:translate,opacity]`,\r\n    // side=bottom\r\n    `data-[side=bottom]:data-starting-style:opacity-0 data-[side=bottom]:data-starting-style:translate-y-[-10px] data-[side=bottom]:data-ending-style:translate-y-[-10px] data-[side=bottom]:data-ending-style:opacity-0`,\r\n    // side=top\r\n    `data-[side=top]:data-starting-style:opacity-0 data-[side=top]:data-starting-style:translate-y-[10px] data-[side=top]:data-ending-style:translate-y-[10px] data-[side=top]:data-ending-style:opacity-0`,\r\n    // side=left\r\n    `data-[side=left]:data-starting-style:opacity-0 data-[side=left]:data-starting-style:translate-x-[10px] data-[side=left]:data-ending-style:translate-x-[10px] data-[side=left]:data-ending-style:opacity-0`,\r\n    // side=right\r\n    `data-[side=right]:data-starting-style:opacity-0 data-[side=right]:data-starting-style:translate-x-[-10px] data-[side=right]:data-ending-style:translate-x-[-10px] data-[side=right]:data-ending-style:opacity-0`,\r\n    // side=inline-start\r\n    `data-[side=inline-start]:data-starting-style:opacity-0 data-[side=inline-start]:data-starting-style:translate-x-[10px] data-[side=inline-start]:data-ending-style:translate-x-[10px] data-[side=inline-start]:data-ending-style:opacity-0`,\r\n    // side=inline-end\r\n    `data-[side=inline-end]:data-starting-style:opacity-0 data-[side=inline-end]:data-starting-style:translate-x-[-10px] data-[side=inline-end]:data-ending-style:translate-x-[-10px] data-[side=inline-end]:data-ending-style:opacity-0`,\r\n  ],\r\n  wipe: [\r\n    `[transition-property:clip-path] [will-change:clip-path]`,\r\n    `[clip-path:inset(0_0_0_0_round_12px)] [-webkit-clip-path:inset(0_0_0_0_round_12px)]`,\r\n    // side=bottom\r\n    `data-[side=bottom]:data-starting-style:[clip-path:inset(0_0_100%_0_round_12px)] data-[side=bottom]:data-ending-style:[clip-path:inset(0_0_100%_0_round_12px)]`,\r\n    // side=top\r\n    `data-[side=top]:data-starting-style:[clip-path:inset(100%_0_0_0_round_12px)] data-[side=top]:data-ending-style:[clip-path:inset(100%_0_0_0_round_12px)]`,\r\n    // side=left\r\n    `data-[side=left]:data-starting-style:[clip-path:inset(0_0_0_100%_round_12px)] data-[side=left]:data-ending-style:[clip-path:inset(0_0_0_100%_round_12px)]`,\r\n    // side=right\r\n    `data-[side=right]:data-starting-style:[clip-path:inset(0_100%_0_0_round_12px)] data-[side=right]:data-ending-style:[clip-path:inset(0_100%_0_0_round_12px)]`,\r\n    // side=inline-start\r\n    `data-[side=inline-start]:data-starting-style:[clip-path:inset(0_0_0_100%_round_12px)] data-[side=inline-start]:data-ending-style:[clip-path:inset(0_0_0_100%_round_12px)]`,\r\n    // side=inline-end\r\n    `data-[side=inline-end]:data-starting-style:[clip-path:inset(0_100%_0_0_round_12px)] data-[side=inline-end]:data-ending-style:[clip-path:inset(0_100%_0_0_round_12px)]`,\r\n  ],\r\n  wipeScale: [\r\n    `[transition-property:clip-path,scale] [will-change:clip-path,scale]`,\r\n    `[clip-path:inset(0_0_0_0_round_12px)] [-webkit-clip-path:inset(0_0_0_0_round_12px)]`,\r\n    `data-starting-style:scale-80 data-ending-style:scale-80`,\r\n    // side=bottom\r\n    `data-[side=bottom]:data-starting-style:[clip-path:inset(0_0_100%_0_round_12px)] data-[side=bottom]:data-ending-style:[clip-path:inset(0_0_100%_0_round_12px)]`,\r\n    // side=top\r\n    `data-[side=top]:data-starting-style:[clip-path:inset(100%_0_0_0_round_12px)] data-[side=top]:data-ending-style:[clip-path:inset(100%_0_0_0_round_12px)]`,\r\n    // side=left\r\n    `data-[side=left]:data-starting-style:[clip-path:inset(0_0_0_100%_round_12px)] data-[side=left]:data-ending-style:[clip-path:inset(0_0_0_100%_round_12px)]`,\r\n    // side=right\r\n    `data-[side=right]:data-starting-style:[clip-path:inset(0_100%_0_0_round_12px)] data-[side=right]:data-ending-style:[clip-path:inset(0_100%_0_0_round_12px)]`,\r\n    // side=inline-start\r\n    `data-[side=inline-start]:data-starting-style:[clip-path:inset(0_0_0_100%_round_12px)] data-[side=inline-start]:data-ending-style:[clip-path:inset(0_0_0_100%_round_12px)]`,\r\n    // side=inline-end\r\n    `data-[side=inline-end]:data-starting-style:[clip-path:inset(0_100%_0_0_round_12px)] data-[side=inline-end]:data-ending-style:[clip-path:inset(0_100%_0_0_round_12px)]`,\r\n  ],\r\n  motion: [\r\n    `[transition-property:translate,scale,opacity,rotateX,rotateY,transform] [will-change:translate,scale,opacity,rotateX,rotateY,transform]`,\r\n    `[transform:perspective(1000px)]`,\r\n    // side=bottom\r\n    `data-[side=bottom]:data-starting-style:translate-y-[7px] data-[side=bottom]:data-starting-style:opacity-0 data-[side=bottom]:data-starting-style:scale-[0.26] data-[side=bottom]:data-starting-style:rotate-x-[70deg] data-[side=bottom]:data-ending-style:translate-y-[7px] data-[side=bottom]:data-ending-style:opacity-0 data-[side=bottom]:data-ending-style:scale-[0.26] data-[side=bottom]:data-ending-style:rotate-x-[70deg]`,\r\n    // side=top\r\n    `data-[side=top]:data-starting-style:translate-y-[7px] data-[side=top]:data-starting-style:opacity-0 data-[side=top]:data-starting-style:scale-[0.26] data-[side=top]:data-starting-style:rotate-x-[70deg] data-[side=top]:data-ending-style:translate-y-[7px] data-[side=top]:data-ending-style:opacity-0 data-[side=top]:data-ending-style:scale-[0.26] data-[side=top]:data-ending-style:rotate-x-[70deg]`,\r\n    // side=left\r\n    `data-[side=left]:data-starting-style:translate-x-[-7px] data-[side=left]:data-starting-style:opacity-0 data-[side=left]:data-starting-style:scale-[0.26] data-[side=left]:data-starting-style:rotate-y-[-40deg] data-[side=left]:data-ending-style:translate-x-[-7px] data-[side=left]:data-ending-style:opacity-0 data-[side=left]:data-ending-style:scale-[0.26] data-[side=left]:data-ending-style:rotate-y-[-40deg]`,\r\n    // side=right\r\n    `data-[side=right]:data-starting-style:translate-x-[7px] data-[side=right]:data-starting-style:opacity-0 data-[side=right]:data-starting-style:scale-[0.26] data-[side=right]:data-starting-style:rotate-y-[40deg] data-[side=right]:data-ending-style:translate-x-[7px] data-[side=right]:data-ending-style:opacity-0 data-[side=right]:data-ending-style:scale-[0.26] data-[side=right]:data-ending-style:rotate-y-[40deg]`,\r\n    // side=inline-start\r\n    `data-[side=inline-start]:data-starting-style:translate-x-[-7px] data-[side=inline-start]:data-starting-style:opacity-0 data-[side=inline-start]:data-starting-style:scale-[0.26] data-[side=inline-start]:data-starting-style:rotate-y-[-40deg] data-[side=inline-start]:data-ending-style:translate-x-[-7px] data-[side=inline-start]:data-ending-style:opacity-0 data-[side=inline-start]:data-ending-style:scale-[0.26] data-[side=inline-start]:data-ending-style:rotate-y-[-40deg]`,\r\n    // side=inline-end\r\n    `data-[side=inline-end]:data-starting-style:translate-x-[7px] data-[side=inline-end]:data-starting-style:opacity-0 data-[side=inline-end]:data-starting-style:scale-[0.26] data-[side=inline-end]:data-starting-style:rotate-y-[40deg] data-[side=inline-end]:data-ending-style:translate-x-[7px] data-[side=inline-end]:data-ending-style:opacity-0 data-[side=inline-end]:data-ending-style:scale-[0.26] data-[side=inline-end]:data-ending-style:rotate-y-[40deg]`,\r\n  ],\r\n  motionBlur: [\r\n    `[transition-property:translate,scale,opacity,rotateX,rotateY,transform,filter] [will-change:translate,scale,opacity,rotateX,rotateY,transform,filter]`,\r\n    `[transform:perspective(1000px)]`,\r\n    `data-starting-style:blur-[9px] data-ending-style:blur-[9px]`,\r\n    // side=bottom\r\n    `data-[side=bottom]:data-starting-style:translate-y-[7px] data-[side=bottom]:data-starting-style:opacity-0 data-[side=bottom]:data-starting-style:scale-[0.26] data-[side=bottom]:data-starting-style:rotate-x-[70deg] data-[side=bottom]:data-ending-style:translate-y-[7px] data-[side=bottom]:data-ending-style:opacity-0 data-[side=bottom]:data-ending-style:scale-[0.26] data-[side=bottom]:data-ending-style:rotate-x-[70deg]`,\r\n    // side=top\r\n    `data-[side=top]:data-starting-style:translate-y-[7px] data-[side=top]:data-starting-style:opacity-0 data-[side=top]:data-starting-style:scale-[0.26] data-[side=top]:data-starting-style:rotate-x-[70deg] data-[side=top]:data-ending-style:translate-y-[7px] data-[side=top]:data-ending-style:opacity-0 data-[side=top]:data-ending-style:scale-[0.26] data-[side=top]:data-ending-style:rotate-x-[70deg]`,\r\n    // side=left\r\n    `data-[side=left]:data-starting-style:translate-x-[-7px] data-[side=left]:data-starting-style:opacity-0 data-[side=left]:data-starting-style:scale-[0.26] data-[side=left]:data-starting-style:rotate-y-[-40deg] data-[side=left]:data-ending-style:translate-x-[-7px] data-[side=left]:data-ending-style:opacity-0 data-[side=left]:data-ending-style:scale-[0.26] data-[side=left]:data-ending-style:rotate-y-[-40deg]`,\r\n    // side=right\r\n    `data-[side=right]:data-starting-style:translate-x-[7px] data-[side=right]:data-starting-style:opacity-0 data-[side=right]:data-starting-style:scale-[0.26] data-[side=right]:data-starting-style:rotate-y-[40deg] data-[side=right]:data-ending-style:translate-x-[7px] data-[side=right]:data-ending-style:opacity-0 data-[side=right]:data-ending-style:scale-[0.26] data-[side=right]:data-ending-style:rotate-y-[40deg]`,\r\n    // side=inline-start\r\n    `data-[side=inline-start]:data-starting-style:translate-x-[-7px] data-[side=inline-start]:data-starting-style:opacity-0 data-[side=inline-start]:data-starting-style:scale-[0.26] data-[side=inline-start]:data-starting-style:rotate-y-[-40deg] data-[side=inline-start]:data-ending-style:translate-x-[-7px] data-[side=inline-start]:data-ending-style:opacity-0 data-[side=inline-start]:data-ending-style:scale-[0.26] data-[side=inline-start]:data-ending-style:rotate-y-[-40deg]`,\r\n    // side=inline-end\r\n    `data-[side=inline-end]:data-starting-style:translate-x-[7px] data-[side=inline-end]:data-starting-style:opacity-0 data-[side=inline-end]:data-starting-style:scale-[0.26] data-[side=inline-end]:data-starting-style:rotate-y-[40deg] data-[side=inline-end]:data-ending-style:translate-x-[7px] data-[side=inline-end]:data-ending-style:opacity-0 data-[side=inline-end]:data-ending-style:scale-[0.26] data-[side=inline-end]:data-ending-style:rotate-y-[40deg]`,\r\n  ],\r\n};\r\n\r\nconst cssTransitionPresets = {\r\n  inExpo: `duration-[0.35s] ease-[cubic-bezier(0.95,0.05,0.795,0.035)]`,\r\n  outExpo: `duration-[0.35s] ease-[cubic-bezier(0.19,1,0.22,1)]`,\r\n  inOutExpo: `duration-[0.35s] ease-[cubic-bezier(1,0,0,1)]`,\r\n  anticipate: `duration-[0.35s] ease-[cubic-bezier(1,-0.4,0.35,0.95)]`,\r\n  quickOut: `duration-[0.35s] ease-out`,\r\n  overshootOut: `duration-[0.35s] ease-[cubic-bezier(0.175,0.885,0.32,1.275)]`,\r\n  swiftOut: `duration-[0.35s] ease-[cubic-bezier(0.175,0.885,0.32,1.1)]`,\r\n  snappyOut: `duration-[0.35s] ease-[cubic-bezier(0.19,1,0.22,1)]`,\r\n  in: `duration-[0.35s] ease-[cubic-bezier(0.42,0,1,1)]`,\r\n  out: `duration-[0.35s] ease-[cubic-bezier(0,0,0.58,1)]`,\r\n  inOut: `duration-[0.25s] ease-[cubic-bezier(0.42,0,0.58,1)]`,\r\n  outIn: `duration-[0.35s] ease-[cubic-bezier(0.1,0.7,0.9,0.5)]`,\r\n  inQuad: `duration-[0.35s] ease-[cubic-bezier(0.55,0.085,0.68,0.53)]`,\r\n  outQuad: `duration-[0.25s] ease-[cubic-bezier(0.25,0.46,0.45,0.94)]`,\r\n  inOutQuad: `duration-[0.32s] ease-[cubic-bezier(0.455,0.03,0.515,0.955)]`,\r\n  inCubic: `duration-[0.35s] ease-[cubic-bezier(0.55,0.055,0.675,0.19)]`,\r\n  outCubic: `duration-[0.35s] ease-[cubic-bezier(0.215,0.61,0.355,1)]`,\r\n  inOutCubic: `duration-[0.35s] ease-[cubic-bezier(0.645,0.045,0.355,1)]`,\r\n  inQuart: `duration-[0.35s] ease-[cubic-bezier(0.895,0.03,0.685,0.22)]`,\r\n  outQuart: `duration-[0.35s] ease-[cubic-bezier(0.165,0.84,0.44,1)]`,\r\n  inOutQuart: `duration-[0.35s] ease-[cubic-bezier(0.77,0,0.175,1)]`,\r\n  inQuint: `duration-[0.35s] ease-[cubic-bezier(0.755,0.05,0.855,0.06)]`,\r\n  outQuint: `duration-[0.35s] ease-[cubic-bezier(0.23,1,0.32,1)]`,\r\n  inOutQuint: `duration-[0.35s] ease-[cubic-bezier(0.86,0,0.07,1)]`,\r\n  inCirc: `duration-[0.35s] ease-[cubic-bezier(0.6,0.04,0.98,0.335)]`,\r\n  outCirc: `duration-[0.35s] ease-[cubic-bezier(0.075,0.82,0.165,1)]`,\r\n  inOutCirc: `duration-[0.35s] ease-[cubic-bezier(0.785,0.135,0.15,0.86)]`,\r\n  inOutBase: `duration-[0.35s] ease-[cubic-bezier(0.25,0.1,0.25,1)]`,\r\n};\r\n\r\ntype CSSAnimationPresets = keyof typeof cssAnimationPresets;\r\ntype CSSTransitionPresets = keyof typeof cssTransitionPresets;\r\n\r\ntype Backdrop = \"opaque\" | \"blur\" | \"transparent\";\r\n\r\ninterface SelectContextType {\r\n  backdrop?: Backdrop;\r\n}\r\n\r\nconst SelectContext = createContext<SelectContextType | undefined>(undefined);\r\n\r\nfunction useSelect() {\r\n  const context = useContext(SelectContext);\r\n  if (!context) {\r\n    throw new Error(\"useSelect must be used within a SelectProvider\");\r\n  }\r\n  return context;\r\n}\r\n\r\ninterface SelectRootProps\r\n  extends React.ComponentProps<typeof SelectPrimitive.Root> {\r\n  backdrop?: Backdrop;\r\n}\r\n\r\nfunction Select({ backdrop = \"transparent\", ...props }: SelectRootProps) {\r\n  return (\r\n    <SelectContext.Provider value={{ backdrop }}>\r\n      <SelectPrimitive.Root data-slot=\"select\" {...props} />\r\n    </SelectContext.Provider>\r\n  );\r\n}\r\n\r\ninterface SelectTriggerProps\r\n  extends React.ComponentProps<typeof SelectPrimitive.Trigger> {}\r\n\r\nfunction SelectTrigger({ className, ...props }: SelectTriggerProps) {\r\n  return (\r\n    <SelectPrimitive.Trigger\r\n      data-slot=\"select-trigger\"\r\n      className={cn(\r\n        \"group/select-trigger inline-flex h-fit items-center justify-between gap-3 rounded-lg border border-input select-none touch-none text-foreground shadow-xs focus-visible:outline-none focus-visible:border-primary text-sm px-[calc(--spacing(2.5)-1px)] py-[calc(--spacing(2)-1px)] bg-background dark:bg-input/40 hover:bg-input/20 dark:hover:bg-input/50 transition-colors ease-out min-w-36\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\ninterface SelectValueProps\r\n  extends React.ComponentProps<typeof SelectPrimitive.Value> {\r\n  placeholder?: string;\r\n}\r\n\r\nfunction SelectValue({\r\n  className,\r\n  placeholder = \"Select...\",\r\n  ...props\r\n}: SelectValueProps) {\r\n  return (\r\n    <SelectPrimitive.Value\r\n      data-slot=\"select-value\"\r\n      {...props}\r\n      render={(renderProps, state) => {\r\n        const newValue = state.value;\r\n        const isNull = !newValue && !renderProps.children;\r\n\r\n        if (isNull) {\r\n          return (\r\n            <span\r\n              {...renderProps}\r\n              className={cn(\"w-full text-left text-foreground/60\", className)}\r\n            >\r\n              {placeholder}\r\n            </span>\r\n          );\r\n        }\r\n\r\n        return (\r\n          <span\r\n            key={newValue}\r\n            {...renderProps}\r\n            className={cn(\"w-full text-left fadeIn truncate\", className)}\r\n          />\r\n        );\r\n      }}\r\n    />\r\n  );\r\n}\r\n\r\ninterface SelectIconProps\r\n  extends React.ComponentProps<typeof SelectPrimitive.Icon> {}\r\n\r\nfunction SelectIcon({ className, ...props }: SelectIconProps) {\r\n  return (\r\n    <SelectPrimitive.Icon\r\n      data-slot=\"select-icon\"\r\n      className={cn(\"size-3.5 text-foreground/72 shrink-0\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\ninterface SelectPortalProps\r\n  extends React.ComponentProps<typeof SelectPrimitive.Portal> {}\r\n\r\nfunction SelectPortal(props: SelectPortalProps) {\r\n  return <SelectPrimitive.Portal data-slot=\"select-portal\" {...props} />;\r\n}\r\n\r\ninterface SelectBackdropProps\r\n  extends React.ComponentProps<typeof SelectPrimitive.Backdrop> {}\r\n\r\nfunction SelectBackdrop({ className, ...props }: SelectBackdropProps) {\r\n  const { backdrop = \"transparent\" } = useSelect();\r\n\r\n  return (\r\n    <SelectPrimitive.Backdrop\r\n      data-slot=\"select-backdrop\"\r\n      className={cn(\r\n        backdrop === \"opaque\" &&\r\n          \"fixed inset-0 bg-black z-100 opacity-40 transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-60\",\r\n        backdrop === \"blur\" &&\r\n          \"fixed inset-0 z-100 backdrop-blur-sm transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0\",\r\n        backdrop === \"transparent\" && \"hidden\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\ninterface SelectPositionerProps\r\n  extends React.ComponentProps<typeof SelectPrimitive.Positioner> {}\r\n\r\nfunction SelectPositioner({\r\n  sideOffset = 4,\r\n  side = \"bottom\",\r\n  className,\r\n  alignItemWithTrigger = true,\r\n  ...props\r\n}: SelectPositionerProps) {\r\n  return (\r\n    <SelectPortal>\r\n      <SelectBackdrop />\r\n      <SelectPrimitive.Positioner\r\n        sideOffset={sideOffset}\r\n        side={side}\r\n        alignItemWithTrigger={alignItemWithTrigger}\r\n        data-slot=\"select-positioner\"\r\n        className={cn(\"z-100 select-none outline-none\", className)}\r\n        {...props}\r\n      />\r\n    </SelectPortal>\r\n  );\r\n}\r\n\r\ninterface SelectArrowProps\r\n  extends React.ComponentProps<typeof SelectPrimitive.Arrow> {}\r\n\r\nfunction SelectArrow({ className, ...rest }: SelectArrowProps) {\r\n  return (\r\n    <SelectPrimitive.Arrow\r\n      data-slot=\"select-arrow\"\r\n      className={cn(\r\n        \"data-[side=bottom]:top-[-9px] data-[side=left]:right-[-14px] data-[side=left]:rotate-90 data-[side=right]:left-[-14px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-9px] data-[side=top]:rotate-180\",\r\n        className\r\n      )}\r\n      {...rest}\r\n    />\r\n  );\r\n}\r\n\r\nfunction ArrowSvg(props: React.ComponentProps<\"svg\">) {\r\n  return (\r\n    <svg width=\"20\" height=\"10\" viewBox=\"0 0 20 10\" fill=\"none\" {...props}>\r\n      <path\r\n        d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\r\n        className=\"fill-popover\"\r\n      />\r\n      <path\r\n        d=\"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z\"\r\n        className=\"fill-border/60\"\r\n      />\r\n    </svg>\r\n  );\r\n}\r\n\r\ninterface SelectPopupProps\r\n  extends React.ComponentProps<typeof SelectPrimitive.Popup>,\r\n    Pick<\r\n      SelectPositionerProps,\r\n      \"side\" | \"sideOffset\" | \"align\" | \"alignOffset\" | \"alignItemWithTrigger\"\r\n    > {\r\n  animationPreset?: CSSAnimationPresets;\r\n  transitionPreset?: CSSTransitionPresets;\r\n  reduceMotion?: boolean;\r\n  showArrow?: boolean;\r\n}\r\n\r\nfunction SelectPopup({\r\n  className,\r\n  animationPreset = \"scale\",\r\n  transitionPreset = \"outQuint\",\r\n  reduceMotion = false,\r\n  showArrow = false,\r\n  side = \"bottom\",\r\n  sideOffset = 4,\r\n  align = \"center\",\r\n  alignOffset = 0,\r\n  alignItemWithTrigger = false,\r\n  children,\r\n  ...rest\r\n}: SelectPopupProps) {\r\n  const cssAnimationConfig = useMemo(() => {\r\n    if (reduceMotion) return \"\";\r\n\r\n    if (animationPreset) {\r\n      return cssAnimationPresets[animationPreset];\r\n    }\r\n\r\n    return cssAnimationPresets.scale;\r\n  }, [animationPreset, reduceMotion, side]);\r\n\r\n  const cssTransitionConfig = useMemo(() => {\r\n    if (reduceMotion) return \"\";\r\n\r\n    if (transitionPreset) {\r\n      return cssTransitionPresets[transitionPreset];\r\n    }\r\n\r\n    return cssTransitionPresets.snappyOut;\r\n  }, [transitionPreset, reduceMotion, side]);\r\n\r\n  return (\r\n    <SelectPositioner\r\n      side={side}\r\n      sideOffset={sideOffset}\r\n      align={align}\r\n      alignOffset={alignOffset}\r\n      alignItemWithTrigger={alignItemWithTrigger}\r\n    >\r\n      <SelectPrimitive.Popup\r\n        data-slot=\"select-popup\"\r\n        render={(renderProps) => {\r\n          if (alignItemWithTrigger) {\r\n            return (\r\n              <div\r\n                key=\"select-popup\"\r\n                {...renderProps}\r\n                className={cn(\r\n                  \"pointer-events-auto origin-(--transform-origin)\",\r\n                  className\r\n                )}\r\n                style={{\r\n                  ...renderProps.style,\r\n                }}\r\n              >\r\n                {showArrow && (\r\n                  <SelectArrow>\r\n                    <ArrowSvg />\r\n                  </SelectArrow>\r\n                )}\r\n                <SelectPrimitive.ScrollUpArrow\r\n                  className={cn(\r\n                    \"top-0 z-50 flex h-6 w-full cursor-default items-center justify-center\",\r\n                    \"before:pointer-events-none before:absolute before:inset-x-px before:top-px before:h-[140%] before:rounded-t-[calc(var(--radius-lg)-1px)] before:bg-linear-to-b before:from-popover before:from-50%\"\r\n                  )}\r\n                  data-slot=\"select-scroll-up-arrow\"\r\n                >\r\n                  <ChevronUpIcon className=\"relative size-4\" />\r\n                </SelectPrimitive.ScrollUpArrow>\r\n                {children}\r\n                <SelectPrimitive.ScrollDownArrow\r\n                  className={cn(\r\n                    \"bottom-0 z-50 flex h-6 w-full cursor-default items-center justify-center\",\r\n                    \"before:pointer-events-none before:absolute before:inset-x-px before:bottom-px before:h-[140%] before:rounded-b-[calc(var(--radius-lg)-1px)] before:bg-linear-to-t before:from-popover before:from-50%\"\r\n                  )}\r\n                  data-slot=\"select-scroll-down-arrow\"\r\n                >\r\n                  <ChevronDownIcon className=\"relative size-4\" />\r\n                </SelectPrimitive.ScrollDownArrow>\r\n              </div>\r\n            );\r\n          }\r\n\r\n          return (\r\n            <div\r\n              key=\"select-popup\"\r\n              {...renderProps}\r\n              className={cn(\r\n                \"pointer-events-auto origin-(--transform-origin)\",\r\n                className,\r\n                renderProps.className,\r\n                cssTransitionConfig,\r\n                cssAnimationConfig\r\n              )}\r\n            >\r\n              {showArrow && (\r\n                <SelectArrow>\r\n                  <ArrowSvg />\r\n                </SelectArrow>\r\n              )}\r\n              <SelectPrimitive.ScrollUpArrow\r\n                className={cn(\r\n                  \"top-0 z-50 flex h-6 w-full cursor-default items-center justify-center\",\r\n                  \"before:pointer-events-none before:absolute before:inset-x-px before:top-px before:h-[140%] before:rounded-t-[calc(var(--radius-lg)-1px)] before:bg-linear-to-b before:from-popover before:from-50%\"\r\n                )}\r\n                data-slot=\"select-scroll-up-arrow\"\r\n              >\r\n                <ChevronUpIcon className=\"relative size-4\" />\r\n              </SelectPrimitive.ScrollUpArrow>\r\n              {children}\r\n              <SelectPrimitive.ScrollDownArrow\r\n                className={cn(\r\n                  \"bottom-0 z-50 flex h-6 w-full cursor-default items-center justify-center\",\r\n                  \"before:pointer-events-none before:absolute before:inset-x-px before:bottom-px before:h-[140%] before:rounded-b-[calc(var(--radius-lg)-1px)] before:bg-linear-to-t before:from-popover before:from-50%\"\r\n                )}\r\n                data-slot=\"select-scroll-down-arrow\"\r\n              >\r\n                <ChevronDownIcon className=\"relative size-4\" />\r\n              </SelectPrimitive.ScrollDownArrow>\r\n            </div>\r\n          );\r\n        }}\r\n        {...rest}\r\n      />\r\n    </SelectPositioner>\r\n  );\r\n}\r\n\r\ninterface SelectListProps\r\n  extends React.ComponentProps<typeof SelectPrimitive.List> {}\r\n\r\nfunction SelectList({ className, ...props }: SelectListProps) {\r\n  return (\r\n    <SelectPrimitive.List\r\n      data-slot=\"select-list\"\r\n      className={cn(\r\n        \"relative overflow-y-auto p-1 block h-full rounded-lg border bg-popover max-h-[min(var(--available-height),260px)] min-w-(--anchor-width) [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\ninterface SelectItemProps\r\n  extends React.ComponentProps<typeof SelectPrimitive.Item> {}\r\n\r\nfunction SelectItem({ className, ...props }: SelectItemProps) {\r\n  return (\r\n    <SelectPrimitive.Item\r\n      data-slot=\"select-item\"\r\n      className={cn(\r\n        \"flex relative min-w-(--anchor-width) cursor-default items-center gap-2 py-1.5 px-4 text-sm outline-none select-none group-data-[side=none]:min-w-[calc(var(--anchor-width))]\",\r\n        `data-highlighted:z-0 data-highlighted:before:absolute data-highlighted:before:inset-x-0 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:rounded-md data-highlighted:before:bg-accent/70 dark:data-highlighted:before:bg-accent data-highlighted:text-accent-foreground data-highlighted:before:border-border/30 data-highlighted:before:border`,\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\ninterface SelectItemTextProps\r\n  extends React.ComponentProps<typeof SelectPrimitive.ItemText> {}\r\n\r\nfunction SelectItemText({ className, ...props }: SelectItemTextProps) {\r\n  return (\r\n    <SelectPrimitive.ItemText\r\n      data-slot=\"select-item-text\"\r\n      className={cn(\"flex-1\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\ninterface SelectItemIndicatorProps\r\n  extends React.ComponentProps<typeof SelectPrimitive.ItemIndicator> {}\r\n\r\nfunction SelectItemIndicator({\r\n  className,\r\n  ...props\r\n}: SelectItemIndicatorProps) {\r\n  return (\r\n    <SelectPrimitive.ItemIndicator\r\n      data-slot=\"select-item-indicator\"\r\n      className={cn(\"min-w-fit ml-auto\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\ninterface SelectGroupProps\r\n  extends React.ComponentProps<typeof SelectPrimitive.Group> {}\r\n\r\nfunction SelectGroup({ ...props }: SelectGroupProps) {\r\n  return <SelectPrimitive.Group data-slot=\"select-group\" {...props} />;\r\n}\r\n\r\ninterface SelectGroupLabelProps\r\n  extends React.ComponentProps<typeof SelectPrimitive.GroupLabel> {}\r\n\r\nfunction SelectGroupLabel({ ...props }: SelectGroupLabelProps) {\r\n  return (\r\n    <SelectPrimitive.GroupLabel data-slot=\"select-group-label\" {...props} />\r\n  );\r\n}\r\n\r\nfunction SelectScrollUpArrow(\r\n  props: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>\r\n) {\r\n  return (\r\n    <SelectPrimitive.ScrollUpArrow\r\n      data-slot=\"select-scroll-up-arrow\"\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction SelectScrollDownArrow(\r\n  props: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>\r\n) {\r\n  return (\r\n    <SelectPrimitive.ScrollDownArrow\r\n      data-slot=\"select-scroll-down-arrow\"\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\ninterface SelectSeparatorProps\r\n  extends React.ComponentProps<typeof SelectPrimitive.Separator> {}\r\n\r\nfunction SelectSeparator({ ...props }: SelectSeparatorProps) {\r\n  return <SelectPrimitive.Separator data-slot=\"select-separator\" {...props} />;\r\n}\r\n\r\nexport {\r\n  Select,\r\n  SelectTrigger,\r\n  SelectValue,\r\n  SelectIcon,\r\n  SelectPopup,\r\n  SelectList,\r\n  SelectItem,\r\n  SelectItemText,\r\n  SelectItemIndicator,\r\n  SelectGroup,\r\n  SelectGroupLabel,\r\n  SelectScrollUpArrow,\r\n  SelectScrollDownArrow,\r\n  SelectSeparator,\r\n};\r\n",
      "type": "registry:ui",
      "target": "components/ui/select.tsx"
    }
  ]
}