diff --git a/apps/www/app/(home)/page.tsx b/apps/www/app/(home)/page.tsx
index 703042d..2e670b3 100644
--- a/apps/www/app/(home)/page.tsx
+++ b/apps/www/app/(home)/page.tsx
@@ -27,7 +27,7 @@ const CodeBlockServer = dynamic(
         <Spinner className="mr-4" /> Loading...
       </div>
     ),
-  }
+  },
 );
 
 export default function HomePage() {
@@ -391,7 +391,7 @@ export default function App() {
                   className={cn(
                     "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
                     "bg-primary text-primary-foreground shadow hover:bg-primary/85 hover:shadow-md",
-                    "h-9 px-4 py-2"
+                    "h-9 px-4 py-2",
                   )}
                   href={"/docs"}
                 >
@@ -401,7 +401,7 @@ export default function App() {
                   className={cn(
                     "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
                     "border-input border-[1.5px] bg-primary-foreground hover:bg-[#f3f3f3] dark:hover:bg-[#202020]",
-                    "h-9 px-4 py-2"
+                    "h-9 px-4 py-2",
                   )}
                   href={"https://github.com/ruru-m07/ruru-ui"}
                   target="_blank"
@@ -434,7 +434,7 @@ const StepCounter = ({
     <div
       className={cn(
         "bg-primary rounded-full w-7 h-7 flex items-center justify-center mb-3",
-        className
+        className,
       )}
     >
       <label className="text-primary-foreground">{count}</label>
diff --git a/apps/www/components/header/index.tsx b/apps/www/components/header/index.tsx
index 344eb14..53be5fc 100644
--- a/apps/www/components/header/index.tsx
+++ b/apps/www/components/header/index.tsx
@@ -31,7 +31,7 @@ export default function Header() {
               </TooltipContent>
             </Tooltip>
 
-            <Tooltip>
+            {/* <Tooltip>
               <TooltipTrigger asChild>
                 <ThemeFeatures />
               </TooltipTrigger>
@@ -43,7 +43,7 @@ export default function Header() {
                 <ThemeImport />
               </TooltipTrigger>
               <TooltipContent>Import a theme from a JSON file</TooltipContent>
-            </Tooltip>
+            </Tooltip> */}
           </TooltipProvider>
         </div>
       </div>
diff --git a/apps/www/public/registry/components/select.json b/apps/www/public/registry/components/select.json
index 0c52f42..3b902cb 100644
--- a/apps/www/public/registry/components/select.json
+++ b/apps/www/public/registry/components/select.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "name": "select.tsx",
-      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport {\n  CaretSortIcon,\n  CheckIcon,\n  ChevronDownIcon,\n  ChevronUpIcon,\n} from \"@radix-ui/react-icons\";\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport { cn } from \"@/utils/cn\";\nimport { motion } from \"framer-motion\";\nimport { useRuru } from \"@/provider\";\n\nconst Select = SelectPrimitive.Root;\nconst SelectGroup = SelectPrimitive.Group;\nconst SelectValue = SelectPrimitive.Value;\n\nexport const selectAnimationVariants = {\n  zoom: {\n    initial: { opacity: 0, scale: 0.9 },\n    animate: { opacity: 1, scale: 1 },\n    exit: { opacity: 0, scale: 0.9 },\n    transition: { type: \"spring\", stiffness: 600, damping: 25 },\n  },\n  scaleBounce: {\n    initial: { opacity: 0, scale: 0.5 },\n    animate: { opacity: 1, scale: [1.2, 0.9, 1] },\n    exit: { opacity: 0, scale: 0.5 },\n    transition: { type: \"spring\", stiffness: 600, damping: 20 },\n  },\n  fade: {\n    initial: { opacity: 0 },\n    animate: { opacity: 1 },\n    exit: { opacity: 0 },\n    transition: { duration: 0.3 },\n  },\n  slideUp: {\n    initial: { opacity: 0, y: 20 },\n    animate: { opacity: 1, y: 0 },\n    exit: { opacity: 0, y: 20 },\n    transition: { type: \"spring\", stiffness: 500, damping: 20 },\n  },\n  slideDown: {\n    initial: { opacity: 0, y: -20 },\n    animate: { opacity: 1, y: 0 },\n    exit: { opacity: 0, y: -20 },\n    transition: { type: \"spring\", stiffness: 500, damping: 20 },\n  },\n  slideRight: {\n    initial: { opacity: 0, x: -30 },\n    animate: { opacity: 1, x: 0 },\n    exit: { opacity: 0, x: -30 },\n    transition: { type: \"spring\", stiffness: 400, damping: 20 },\n  },\n  slideLeft: {\n    initial: { opacity: 0, x: 30 },\n    animate: { opacity: 1, x: 0 },\n    exit: { opacity: 0, x: 30 },\n    transition: { type: \"spring\", stiffness: 400, damping: 20 },\n  },\n  flip: {\n    initial: { opacity: 0, rotateY: 90 },\n    animate: { opacity: 1, rotateY: 0 },\n    exit: { opacity: 0, rotateY: 90 },\n    transition: { type: \"spring\", stiffness: 500, damping: 30 },\n  },\n  rotate: {\n    initial: { opacity: 0, rotate: -180 },\n    animate: { opacity: 1, rotate: 0 },\n    exit: { opacity: 0, rotate: -180 },\n    transition: { type: \"spring\", stiffness: 500, damping: 25 },\n  },\n};\n\nconst SelectTrigger = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {\n    enableAnimation?: boolean;\n  }\n>(({ className, children, enableAnimation = false, ...props }, ref) => {\n  const { animation } = useRuru();\n  return animation && enableAnimation ? (\n    <motion.div whileTap={{ scale: 0.93 }}>\n      <SelectPrimitive.Trigger\n        ref={ref}\n        className={cn(\n          \"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:border-primary/75 focus:dark:ring-primary/35 focus:ring-primary/35 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <SelectPrimitive.Icon asChild>\n          <CaretSortIcon className=\"h-4 w-4 opacity-50\" />\n        </SelectPrimitive.Icon>\n      </SelectPrimitive.Trigger>\n    </motion.div>\n  ) : (\n    <SelectPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        \"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:border-primary/75 focus:dark:ring-primary/35 focus:ring-primary/35 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <CaretSortIcon className=\"h-4 w-4 opacity-50\" />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  );\n});\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName;\n\nconst SelectScrollUpButton = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollUpButton\n    ref={ref}\n    className={cn(\n      \"flex cursor-default items-center justify-center py-1\",\n      className,\n    )}\n    {...props}\n  >\n    <ChevronUpIcon />\n  </SelectPrimitive.ScrollUpButton>\n));\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;\n\nconst SelectScrollDownButton = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollDownButton\n    ref={ref}\n    className={cn(\n      \"flex cursor-default items-center justify-center py-1\",\n      className,\n    )}\n    {...props}\n  >\n    <ChevronDownIcon />\n  </SelectPrimitive.ScrollDownButton>\n));\nSelectScrollDownButton.displayName =\n  SelectPrimitive.ScrollDownButton.displayName;\n\n\nconst AnimatedSelectContent = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & {\n    selectedVariant: keyof typeof selectAnimationVariants;\n  }\n>(\n  (\n    { className, children, position = \"popper\", selectedVariant, ...props },\n    ref,\n  ) => (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        className={cn(\n          \"relative z-50 max-h-96 my-2 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md\",\n          position === \"popper\" &&\n            \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n          className,\n        )}\n        ref={ref}\n        asChild\n        position={position}\n        {...props}\n      >\n        <motion.div\n          className={cn(\n            \"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md\",\n            className,\n          )}\n          {...selectAnimationVariants[selectedVariant]}\n        >\n          <SelectScrollUpButton />\n          <SelectPrimitive.Viewport\n            className={cn(\n              \"p-1\",\n              position === \"popper\" &&\n                \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]\",\n            )}\n          >\n            {children}\n          </SelectPrimitive.Viewport>\n          <SelectScrollDownButton />\n        </motion.div>\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  ),\n);\nAnimatedSelectContent.displayName = SelectPrimitive.Content.displayName;\n\n\nconst StaticSelectContent = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = \"popper\", ...props }, ref) => (\n  <SelectPrimitive.Portal>\n    <SelectPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n        position === \"popper\" &&\n          \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n        className,\n      )}\n      position={position}\n      {...props}\n    >\n      <SelectScrollUpButton />\n      <SelectPrimitive.Viewport\n        className={cn(\n          \"p-1\",\n          position === \"popper\" &&\n            \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]\",\n        )}\n      >\n        {children}\n      </SelectPrimitive.Viewport>\n      <SelectScrollDownButton />\n    </SelectPrimitive.Content>\n  </SelectPrimitive.Portal>\n));\nStaticSelectContent.displayName = SelectPrimitive.Content.displayName;\n\nconst SelectContent = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & {\n    variants?: keyof typeof selectAnimationVariants;\n  }\n>((props, ref) => {\n  const { animation } = useRuru();\n  const selectedVariant = props.variants || \"zoom\";\n\n  return animation ? (\n    <AnimatedSelectContent\n      selectedVariant={selectedVariant}\n      ref={ref}\n      {...props}\n    />\n  ) : (\n    <StaticSelectContent ref={ref} {...props} />\n  );\n});\n\nSelectContent.displayName = \"SelectContent\";\n\nconst SelectLabel = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Label\n    ref={ref}\n    className={cn(\"px-2 py-1.5 text-sm font-semibold\", className)}\n    {...props}\n  />\n));\nSelectLabel.displayName = SelectPrimitive.Label.displayName;\n\nconst SelectItem = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className,\n    )}\n    {...props}\n  >\n    <span className=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectPrimitive.ItemIndicator>\n        <CheckIcon className=\"h-4 w-4\" />\n      </SelectPrimitive.ItemIndicator>\n    </span>\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n  </SelectPrimitive.Item>\n));\nSelectItem.displayName = SelectPrimitive.Item.displayName;\n\nconst SelectSeparator = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-muted\", className)}\n    {...props}\n  />\n));\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName;\n\nexport {\n  Select,\n  SelectGroup,\n  SelectValue,\n  SelectTrigger,\n  SelectContent,\n  SelectLabel,\n  SelectItem,\n  SelectSeparator,\n  SelectScrollUpButton,\n  SelectScrollDownButton,\n};\n"
+      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport {\n  CaretSortIcon,\n  CheckIcon,\n  ChevronDownIcon,\n  ChevronUpIcon,\n} from \"@radix-ui/react-icons\";\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport { cn } from \"@/utils/cn\";\nimport { motion } from \"framer-motion\";\nimport { useRuru } from \"@/provider\";\n\nconst Select = SelectPrimitive.Root;\nconst SelectGroup = SelectPrimitive.Group;\nconst SelectValue = SelectPrimitive.Value;\n\nexport const selectAnimationVariants = {\n  zoom: {\n    initial: { opacity: 0, scale: 0.9 },\n    animate: { opacity: 1, scale: 1 },\n    exit: { opacity: 0, scale: 0.9 },\n    transition: { type: \"spring\", stiffness: 600, damping: 25 },\n  },\n  scaleBounce: {\n    initial: { opacity: 0, scale: 0.5 },\n    animate: { opacity: 1, scale: [1.2, 0.9, 1] },\n    exit: { opacity: 0, scale: 0.5 },\n    transition: { type: \"spring\", stiffness: 600, damping: 20 },\n  },\n  fade: {\n    initial: { opacity: 0 },\n    animate: { opacity: 1 },\n    exit: { opacity: 0 },\n    transition: { duration: 0.3 },\n  },\n  slideUp: {\n    initial: { opacity: 0, y: 20 },\n    animate: { opacity: 1, y: 0 },\n    exit: { opacity: 0, y: 20 },\n    transition: { type: \"spring\", stiffness: 500, damping: 20 },\n  },\n  slideDown: {\n    initial: { opacity: 0, y: -20 },\n    animate: { opacity: 1, y: 0 },\n    exit: { opacity: 0, y: -20 },\n    transition: { type: \"spring\", stiffness: 500, damping: 20 },\n  },\n  slideRight: {\n    initial: { opacity: 0, x: -30 },\n    animate: { opacity: 1, x: 0 },\n    exit: { opacity: 0, x: -30 },\n    transition: { type: \"spring\", stiffness: 400, damping: 20 },\n  },\n  slideLeft: {\n    initial: { opacity: 0, x: 30 },\n    animate: { opacity: 1, x: 0 },\n    exit: { opacity: 0, x: 30 },\n    transition: { type: \"spring\", stiffness: 400, damping: 20 },\n  },\n  flip: {\n    initial: { opacity: 0, rotateY: 90 },\n    animate: { opacity: 1, rotateY: 0 },\n    exit: { opacity: 0, rotateY: 90 },\n    transition: { type: \"spring\", stiffness: 500, damping: 30 },\n  },\n  rotate: {\n    initial: { opacity: 0, rotate: -180 },\n    animate: { opacity: 1, rotate: 0 },\n    exit: { opacity: 0, rotate: -180 },\n    transition: { type: \"spring\", stiffness: 500, damping: 25 },\n  },\n};\n\nconst SelectTrigger = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {\n    enableAnimation?: boolean;\n  }\n>(({ className, children, enableAnimation = false, ...props }, ref) => {\n  const { animation } = useRuru();\n  return animation && enableAnimation ? (\n    <motion.div whileTap={{ scale: 0.93 }}>\n      <SelectPrimitive.Trigger\n        ref={ref}\n        className={cn(\n          \"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:border-primary/75 focus:dark:ring-primary/35 focus:ring-primary/35 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <SelectPrimitive.Icon asChild>\n          <CaretSortIcon className=\"h-4 w-4 opacity-50\" />\n        </SelectPrimitive.Icon>\n      </SelectPrimitive.Trigger>\n    </motion.div>\n  ) : (\n    <SelectPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        \"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:border-primary/75 focus:dark:ring-primary/35 focus:ring-primary/35 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <CaretSortIcon className=\"h-4 w-4 opacity-50\" />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  );\n});\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName;\n\nconst SelectScrollUpButton = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollUpButton\n    ref={ref}\n    className={cn(\n      \"flex cursor-default items-center justify-center py-1 w-full absolute top-0 bg-popover z-10\",\n      className,\n    )}\n    {...props}\n  >\n    <ChevronUpIcon />\n  </SelectPrimitive.ScrollUpButton>\n));\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;\n\nconst SelectScrollDownButton = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollDownButton\n    ref={ref}\n    className={cn(\n      \"flex cursor-default items-center justify-center py-1 w-full absolute bottom-0 bg-popover z-10\",\n      className,\n    )}\n    {...props}\n  >\n    <ChevronDownIcon />\n  </SelectPrimitive.ScrollDownButton>\n));\nSelectScrollDownButton.displayName =\n  SelectPrimitive.ScrollDownButton.displayName;\n\n\nconst AnimatedSelectContent = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & {\n    selectedVariant: keyof typeof selectAnimationVariants;\n  }\n>(\n  (\n    { className, children, position = \"popper\", selectedVariant, ...props },\n    ref,\n  ) => (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        className={cn(\n          \"relative z-50 max-h-96 my-2 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md\",\n          position === \"popper\" &&\n            \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n          className,\n        )}\n        ref={ref}\n        asChild\n        position={position}\n        {...props}\n      >\n        <motion.div\n          className={cn(\n            \"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md\",\n            className,\n          )}\n          {...selectAnimationVariants[selectedVariant]}\n        >\n          <SelectScrollUpButton />\n          <SelectPrimitive.Viewport\n            className={cn(\n              \"p-1\",\n              position === \"popper\" &&\n                \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]\",\n            )}\n          >\n            {children}\n          </SelectPrimitive.Viewport>\n          <SelectScrollDownButton />\n        </motion.div>\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  ),\n);\nAnimatedSelectContent.displayName = SelectPrimitive.Content.displayName;\n\n\nconst StaticSelectContent = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = \"popper\", ...props }, ref) => (\n  <SelectPrimitive.Portal>\n    <SelectPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n        position === \"popper\" &&\n          \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n        className,\n      )}\n      position={position}\n      {...props}\n    >\n      <SelectScrollUpButton />\n      <SelectPrimitive.Viewport\n        className={cn(\n          \"p-1\",\n          position === \"popper\" &&\n            \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]\",\n        )}\n      >\n        {children}\n      </SelectPrimitive.Viewport>\n      <SelectScrollDownButton />\n    </SelectPrimitive.Content>\n  </SelectPrimitive.Portal>\n));\nStaticSelectContent.displayName = SelectPrimitive.Content.displayName;\n\nconst SelectContent = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & {\n    variants?: keyof typeof selectAnimationVariants;\n  }\n>((props, ref) => {\n  const { animation } = useRuru();\n  const selectedVariant = props.variants || \"zoom\";\n\n  return animation ? (\n    <AnimatedSelectContent\n      selectedVariant={selectedVariant}\n      ref={ref}\n      {...props}\n    />\n  ) : (\n    <StaticSelectContent ref={ref} {...props} />\n  );\n});\n\nSelectContent.displayName = \"SelectContent\";\n\nconst SelectLabel = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Label\n    ref={ref}\n    className={cn(\"px-2 py-1.5 text-sm font-semibold\", className)}\n    {...props}\n  />\n));\nSelectLabel.displayName = SelectPrimitive.Label.displayName;\n\nconst SelectItem = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className,\n    )}\n    {...props}\n  >\n    <span className=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectPrimitive.ItemIndicator>\n        <CheckIcon className=\"h-4 w-4\" />\n      </SelectPrimitive.ItemIndicator>\n    </span>\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n  </SelectPrimitive.Item>\n));\nSelectItem.displayName = SelectPrimitive.Item.displayName;\n\nconst SelectSeparator = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-muted\", className)}\n    {...props}\n  />\n));\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName;\n\nexport {\n  Select,\n  SelectGroup,\n  SelectValue,\n  SelectTrigger,\n  SelectContent,\n  SelectLabel,\n  SelectItem,\n  SelectSeparator,\n  SelectScrollUpButton,\n  SelectScrollDownButton,\n};\n"
     }
   ],
   "type": "components:ui"