@onesaz/ui 0.2.1 → 0.2.2

package/dist/index.js

@@ -418,8 +418,186 @@ Separator.displayName = "Separator";
 
 // src/components/select/index.tsx
 import * as React11 from "react";
-import { jsx as jsx11 } from "react/jsx-runtime";
-var Select = React11.forwardRef(
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { jsx as jsx11, jsxs as jsxs2 } from "react/jsx-runtime";
+var ChevronDownIcon = () => /* @__PURE__ */ jsx11(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: /* @__PURE__ */ jsx11("path", { d: "m6 9 6 6 6-6" })
+  }
+);
+var ChevronUpIcon = () => /* @__PURE__ */ jsx11(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: /* @__PURE__ */ jsx11("path", { d: "m18 15-6-6-6 6" })
+  }
+);
+var CheckIcon = () => /* @__PURE__ */ jsx11(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: /* @__PURE__ */ jsx11("path", { d: "M20 6 9 17l-5-5" })
+  }
+);
+var Select = SelectPrimitive.Root;
+var SelectGroup = SelectPrimitive.Group;
+var SelectValue = SelectPrimitive.Value;
+var SelectTrigger = React11.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs2(
+  SelectPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-sm",
+      "border-input bg-background text-foreground",
+      "ring-offset-background",
+      "placeholder:text-muted-foreground",
+      "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      "[&>span]:line-clamp-1",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx11(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx11(ChevronDownIcon, {}) })
+    ]
+  }
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var SelectScrollUpButton = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(
+  SelectPrimitive.ScrollUpButton,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx11(ChevronUpIcon, {})
+  }
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+var SelectScrollDownButton = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(
+  SelectPrimitive.ScrollDownButton,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx11(ChevronDownIcon, {})
+  }
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+var SelectContent = React11.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx11(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs2(
+  SelectPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md",
+      "border-border bg-popover text-popover-foreground",
+      "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",
+      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+      className
+    ),
+    position,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx11(SelectScrollUpButton, {}),
+      /* @__PURE__ */ jsx11(
+        SelectPrimitive.Viewport,
+        {
+          className: cn(
+            "p-1",
+            position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+          ),
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx11(SelectScrollDownButton, {})
+    ]
+  }
+) }));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+var SelectLabel = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(
+  SelectPrimitive.Label,
+  {
+    ref,
+    className: cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className),
+    ...props
+  }
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+var SelectItem = React11.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs2(
+  SelectPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
+      "focus:bg-accent focus:text-accent-foreground",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx11("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx11(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx11(CheckIcon, {}) }) }),
+      /* @__PURE__ */ jsx11(SelectPrimitive.ItemText, { children })
+    ]
+  }
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+var SelectSeparator = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(
+  SelectPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    ...props
+  }
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+var SelectNamespace = Object.assign(Select, {
+  Group: SelectGroup,
+  Value: SelectValue,
+  Trigger: SelectTrigger,
+  Content: SelectContent,
+  Label: SelectLabel,
+  Item: SelectItem,
+  Separator: SelectSeparator,
+  ScrollUpButton: SelectScrollUpButton,
+  ScrollDownButton: SelectScrollDownButton
+});
+var NativeSelect = React11.forwardRef(
   ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx11(
     "select",
     {
@@ -436,23 +614,15 @@ var Select = React11.forwardRef(
     }
   )
 );
-Select.displayName = "Select";
-var SelectOption = React11.forwardRef(
+NativeSelect.displayName = "NativeSelect";
+var NativeSelectOption = React11.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx11("option", { ref, className: cn("py-1.5", className), ...props })
 );
-SelectOption.displayName = "SelectOption";
-var SelectGroup = React11.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx11("optgroup", { ref, className: cn("font-semibold", className), ...props })
-);
-SelectGroup.displayName = "SelectGroup";
-var SelectNamespace = Object.assign(Select, {
-  Option: SelectOption,
-  Group: SelectGroup
-});
+NativeSelectOption.displayName = "NativeSelectOption";
 
 // src/components/dialog/index.tsx
 import * as React12 from "react";
-import { Fragment, jsx as jsx12, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx12, jsxs as jsxs3 } from "react/jsx-runtime";
 var Dialog = ({ open, onOpenChange, children }) => {
   React12.useEffect(() => {
     const handleEscape = (e) => {
@@ -468,7 +638,7 @@ var Dialog = ({ open, onOpenChange, children }) => {
 };
 Dialog.displayName = "Dialog";
 var DialogContent = React12.forwardRef(
-  ({ className, children, onClose, ...props }, ref) => /* @__PURE__ */ jsxs2(Fragment, { children: [
+  ({ className, children, onClose, ...props }, ref) => /* @__PURE__ */ jsxs3(Fragment, { children: [
     /* @__PURE__ */ jsx12(
       "div",
       {
@@ -476,7 +646,7 @@ var DialogContent = React12.forwardRef(
         onClick: onClose
       }
     ),
-    /* @__PURE__ */ jsxs2(
+    /* @__PURE__ */ jsxs3(
       "div",
       {
         ref,
@@ -489,14 +659,14 @@ var DialogContent = React12.forwardRef(
         ...props,
         children: [
           children,
-          onClose && /* @__PURE__ */ jsxs2(
+          onClose && /* @__PURE__ */ jsxs3(
             "button",
             {
               type: "button",
               onClick: onClose,
               className: "absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
               children: [
-                /* @__PURE__ */ jsxs2(
+                /* @__PURE__ */ jsxs3(
                   "svg",
                   {
                     xmlns: "http://www.w3.org/2000/svg",
@@ -701,7 +871,7 @@ var TableNamespace = Object.assign(Table, {
 
 // src/components/pagination.tsx
 import * as React15 from "react";
-import { jsx as jsx15, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs4 } from "react/jsx-runtime";
 var Pagination = React15.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx15(
     "nav",
@@ -739,7 +909,7 @@ var PaginationLink = React15.forwardRef(
   )
 );
 PaginationLink.displayName = "PaginationLink";
-var PaginationPrevious = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs3(
+var PaginationPrevious = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs4(
   Button,
   {
     ref,
@@ -769,7 +939,7 @@ var PaginationPrevious = React15.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 PaginationPrevious.displayName = "PaginationPrevious";
-var PaginationNext = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs3(
+var PaginationNext = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs4(
   Button,
   {
     ref,
@@ -799,7 +969,7 @@ var PaginationNext = React15.forwardRef(({ className, ...props }, ref) => /* @__
   }
 ));
 PaginationNext.displayName = "PaginationNext";
-var PaginationEllipsis = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs3(
+var PaginationEllipsis = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs4(
   "span",
   {
     ref,
@@ -807,7 +977,7 @@ var PaginationEllipsis = React15.forwardRef(({ className, ...props }, ref) => /*
     className: cn("flex h-9 w-9 items-center justify-center", className),
     ...props,
     children: [
-      /* @__PURE__ */ jsxs3(
+      /* @__PURE__ */ jsxs4(
         "svg",
         {
           xmlns: "http://www.w3.org/2000/svg",
@@ -843,7 +1013,7 @@ var PaginationNamespace = Object.assign(Pagination, {
 
 // src/components/combobox/index.tsx
 import * as React16 from "react";
-import { jsx as jsx16, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs5 } from "react/jsx-runtime";
 var Combobox = React16.forwardRef(
   ({
     options,
@@ -885,8 +1055,8 @@ var Combobox = React16.forwardRef(
       document.addEventListener("mousedown", handleClickOutside);
       return () => document.removeEventListener("mousedown", handleClickOutside);
     }, []);
-    return /* @__PURE__ */ jsxs4("div", { ref: containerRef, className: "relative", children: [
-      /* @__PURE__ */ jsxs4(
+    return /* @__PURE__ */ jsxs5("div", { ref: containerRef, className: "relative", children: [
+      /* @__PURE__ */ jsxs5(
         "button",
         {
           type: "button",
@@ -925,9 +1095,9 @@ var Combobox = React16.forwardRef(
           ]
         }
       ),
-      open && /* @__PURE__ */ jsxs4("div", { className: "absolute z-50 mt-1 w-full overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md", children: [
-        /* @__PURE__ */ jsxs4("div", { className: "flex items-center border-b border-border px-3", children: [
-          /* @__PURE__ */ jsxs4(
+      open && /* @__PURE__ */ jsxs5("div", { className: "absolute z-50 mt-1 w-full overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md", children: [
+        /* @__PURE__ */ jsxs5("div", { className: "flex items-center border-b border-border px-3", children: [
+          /* @__PURE__ */ jsxs5(
             "svg",
             {
               xmlns: "http://www.w3.org/2000/svg",
@@ -957,7 +1127,7 @@ var Combobox = React16.forwardRef(
             }
           )
         ] }),
-        /* @__PURE__ */ jsx16("div", { className: "max-h-[300px] overflow-y-auto p-1", children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx16("div", { className: "py-6 text-center text-sm text-muted-foreground", children: emptyMessage }) : filteredOptions.map((option) => /* @__PURE__ */ jsxs4(
+        /* @__PURE__ */ jsx16("div", { className: "max-h-[300px] overflow-y-auto p-1", children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx16("div", { className: "py-6 text-center text-sm text-muted-foreground", children: emptyMessage }) : filteredOptions.map((option) => /* @__PURE__ */ jsxs5(
           "button",
           {
             type: "button",
@@ -1000,19 +1170,22 @@ Combobox.displayName = "Combobox";
 
 // src/playground.tsx
 import * as React17 from "react";
-import { jsx as jsx17, jsxs as jsxs5 } from "react/jsx-runtime";
-var Section = ({ title, children }) => /* @__PURE__ */ jsxs5("div", { className: "mb-8", children: [
+import { jsx as jsx17, jsxs as jsxs6 } from "react/jsx-runtime";
+var Section = ({ title, children }) => /* @__PURE__ */ jsxs6("div", { className: "mb-8", children: [
   /* @__PURE__ */ jsx17("h2", { className: "text-xl font-semibold mb-4 text-foreground", children: title }),
   /* @__PURE__ */ jsx17("div", { className: "p-4 border border-border rounded-lg bg-background", children })
 ] });
 var ThemeToggle = () => {
   const { theme, setTheme } = useTheme();
-  return /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2", children: [
+  return /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
     /* @__PURE__ */ jsx17(Label, { children: "Theme:" }),
-    /* @__PURE__ */ jsxs5(SelectNamespace, { value: theme, onChange: (e) => setTheme(e.target.value), children: [
-      /* @__PURE__ */ jsx17(SelectOption, { value: "light", children: "Light" }),
-      /* @__PURE__ */ jsx17(SelectOption, { value: "dark", children: "Dark" }),
-      /* @__PURE__ */ jsx17(SelectOption, { value: "system", children: "System" })
+    /* @__PURE__ */ jsxs6(SelectNamespace, { value: theme, onValueChange: (value) => setTheme(value), children: [
+      /* @__PURE__ */ jsx17(SelectTrigger, { className: "w-32", children: /* @__PURE__ */ jsx17(SelectValue, { placeholder: "Select theme" }) }),
+      /* @__PURE__ */ jsxs6(SelectContent, { children: [
+        /* @__PURE__ */ jsx17(SelectItem, { value: "light", children: "Light" }),
+        /* @__PURE__ */ jsx17(SelectItem, { value: "dark", children: "Dark" }),
+        /* @__PURE__ */ jsx17(SelectItem, { value: "system", children: "System" })
+      ] })
     ] })
   ] });
 };
@@ -1031,13 +1204,13 @@ var PlaygroundContent = () => {
     { value: "svelte", label: "Svelte" },
     { value: "solid", label: "SolidJS" }
   ];
-  return /* @__PURE__ */ jsx17("div", { className: "min-h-screen bg-background p-8", children: /* @__PURE__ */ jsxs5("div", { className: "max-w-4xl mx-auto", children: [
-    /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between mb-8", children: [
+  return /* @__PURE__ */ jsx17("div", { className: "min-h-screen bg-background p-8", children: /* @__PURE__ */ jsxs6("div", { className: "max-w-4xl mx-auto", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between mb-8", children: [
       /* @__PURE__ */ jsx17("h1", { className: "text-3xl font-bold text-foreground", children: "@onesaz/ui Playground" }),
       /* @__PURE__ */ jsx17(ThemeToggle, {})
     ] }),
-    /* @__PURE__ */ jsxs5(Section, { title: "Button", children: [
-      /* @__PURE__ */ jsxs5("div", { className: "flex flex-wrap gap-4", children: [
+    /* @__PURE__ */ jsxs6(Section, { title: "Button", children: [
+      /* @__PURE__ */ jsxs6("div", { className: "flex flex-wrap gap-4", children: [
         /* @__PURE__ */ jsx17(Button, { variant: "default", children: "Default" }),
         /* @__PURE__ */ jsx17(Button, { variant: "destructive", children: "Destructive" }),
         /* @__PURE__ */ jsx17(Button, { variant: "outline", children: "Outline" }),
@@ -1045,19 +1218,19 @@ var PlaygroundContent = () => {
         /* @__PURE__ */ jsx17(Button, { variant: "ghost", children: "Ghost" }),
         /* @__PURE__ */ jsx17(Button, { variant: "link", children: "Link" })
       ] }),
-      /* @__PURE__ */ jsxs5("div", { className: "flex flex-wrap gap-4 mt-4", children: [
+      /* @__PURE__ */ jsxs6("div", { className: "flex flex-wrap gap-4 mt-4", children: [
         /* @__PURE__ */ jsx17(Button, { size: "sm", children: "Small" }),
         /* @__PURE__ */ jsx17(Button, { size: "default", children: "Default" }),
         /* @__PURE__ */ jsx17(Button, { size: "lg", children: "Large" }),
         /* @__PURE__ */ jsx17(Button, { size: "icon", children: "\u{1F514}" })
       ] }),
-      /* @__PURE__ */ jsxs5("div", { className: "flex flex-wrap gap-4 mt-4", children: [
+      /* @__PURE__ */ jsxs6("div", { className: "flex flex-wrap gap-4 mt-4", children: [
         /* @__PURE__ */ jsx17(Button, { disabled: true, children: "Disabled" }),
         /* @__PURE__ */ jsx17(Button, { variant: "outline", disabled: true, children: "Disabled Outline" })
       ] })
     ] }),
-    /* @__PURE__ */ jsx17(Section, { title: "Input", children: /* @__PURE__ */ jsxs5("div", { className: "space-y-4 max-w-md", children: [
-      /* @__PURE__ */ jsxs5("div", { children: [
+    /* @__PURE__ */ jsx17(Section, { title: "Input", children: /* @__PURE__ */ jsxs6("div", { className: "space-y-4 max-w-md", children: [
+      /* @__PURE__ */ jsxs6("div", { children: [
         /* @__PURE__ */ jsx17(Label, { htmlFor: "input-default", children: "Default Input" }),
         /* @__PURE__ */ jsx17(
           Input,
@@ -1069,17 +1242,17 @@ var PlaygroundContent = () => {
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs5("div", { children: [
+      /* @__PURE__ */ jsxs6("div", { children: [
         /* @__PURE__ */ jsx17(Label, { htmlFor: "input-disabled", children: "Disabled Input" }),
         /* @__PURE__ */ jsx17(Input, { id: "input-disabled", placeholder: "Disabled...", disabled: true })
       ] }),
-      /* @__PURE__ */ jsxs5("div", { children: [
+      /* @__PURE__ */ jsxs6("div", { children: [
         /* @__PURE__ */ jsx17(Label, { htmlFor: "input-type", children: "Email Input" }),
         /* @__PURE__ */ jsx17(Input, { id: "input-type", type: "email", placeholder: "email@example.com" })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx17(Section, { title: "Textarea", children: /* @__PURE__ */ jsxs5("div", { className: "space-y-4 max-w-md", children: [
-      /* @__PURE__ */ jsxs5("div", { children: [
+    /* @__PURE__ */ jsx17(Section, { title: "Textarea", children: /* @__PURE__ */ jsxs6("div", { className: "space-y-4 max-w-md", children: [
+      /* @__PURE__ */ jsxs6("div", { children: [
         /* @__PURE__ */ jsx17(Label, { htmlFor: "textarea-default", children: "Default Textarea" }),
         /* @__PURE__ */ jsx17(
           Textarea,
@@ -1091,48 +1264,50 @@ var PlaygroundContent = () => {
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs5("div", { children: [
+      /* @__PURE__ */ jsxs6("div", { children: [
         /* @__PURE__ */ jsx17(Label, { htmlFor: "textarea-disabled", children: "Disabled Textarea" }),
         /* @__PURE__ */ jsx17(Textarea, { id: "textarea-disabled", placeholder: "Disabled...", disabled: true })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx17(Section, { title: "Select", children: /* @__PURE__ */ jsxs5("div", { className: "space-y-4 max-w-md", children: [
-      /* @__PURE__ */ jsxs5("div", { children: [
-        /* @__PURE__ */ jsx17(Label, { htmlFor: "select-default", children: "Default Select" }),
-        /* @__PURE__ */ jsxs5(
-          SelectNamespace,
-          {
-            id: "select-default",
-            value: selectValue,
-            onChange: (e) => setSelectValue(e.target.value),
-            children: [
-              /* @__PURE__ */ jsx17(SelectOption, { value: "", children: "Select an option..." }),
-              /* @__PURE__ */ jsx17(SelectOption, { value: "option1", children: "Option 1" }),
-              /* @__PURE__ */ jsx17(SelectOption, { value: "option2", children: "Option 2" }),
-              /* @__PURE__ */ jsx17(SelectOption, { value: "option3", children: "Option 3" })
-            ]
-          }
-        )
+    /* @__PURE__ */ jsx17(Section, { title: "Select", children: /* @__PURE__ */ jsxs6("div", { className: "space-y-4 max-w-md", children: [
+      /* @__PURE__ */ jsxs6("div", { children: [
+        /* @__PURE__ */ jsx17(Label, { children: "Default Select" }),
+        /* @__PURE__ */ jsxs6(SelectNamespace, { value: selectValue, onValueChange: setSelectValue, children: [
+          /* @__PURE__ */ jsx17(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx17(SelectValue, { placeholder: "Select an option..." }) }),
+          /* @__PURE__ */ jsxs6(SelectContent, { children: [
+            /* @__PURE__ */ jsx17(SelectItem, { value: "option1", children: "Option 1" }),
+            /* @__PURE__ */ jsx17(SelectItem, { value: "option2", children: "Option 2" }),
+            /* @__PURE__ */ jsx17(SelectItem, { value: "option3", children: "Option 3" })
+          ] })
+        ] })
       ] }),
-      /* @__PURE__ */ jsxs5("div", { children: [
-        /* @__PURE__ */ jsx17(Label, { htmlFor: "select-grouped", children: "Grouped Select" }),
-        /* @__PURE__ */ jsxs5(SelectNamespace, { id: "select-grouped", children: [
-          /* @__PURE__ */ jsxs5(SelectGroup, { label: "Fruits", children: [
-            /* @__PURE__ */ jsx17(SelectOption, { value: "apple", children: "Apple" }),
-            /* @__PURE__ */ jsx17(SelectOption, { value: "banana", children: "Banana" })
-          ] }),
-          /* @__PURE__ */ jsxs5(SelectGroup, { label: "Vegetables", children: [
-            /* @__PURE__ */ jsx17(SelectOption, { value: "carrot", children: "Carrot" }),
-            /* @__PURE__ */ jsx17(SelectOption, { value: "potato", children: "Potato" })
+      /* @__PURE__ */ jsxs6("div", { children: [
+        /* @__PURE__ */ jsx17(Label, { children: "Grouped Select" }),
+        /* @__PURE__ */ jsxs6(SelectNamespace, { children: [
+          /* @__PURE__ */ jsx17(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx17(SelectValue, { placeholder: "Select a food..." }) }),
+          /* @__PURE__ */ jsxs6(SelectContent, { children: [
+            /* @__PURE__ */ jsxs6(SelectGroup, { children: [
+              /* @__PURE__ */ jsx17(SelectLabel, { children: "Fruits" }),
+              /* @__PURE__ */ jsx17(SelectItem, { value: "apple", children: "Apple" }),
+              /* @__PURE__ */ jsx17(SelectItem, { value: "banana", children: "Banana" })
+            ] }),
+            /* @__PURE__ */ jsxs6(SelectGroup, { children: [
+              /* @__PURE__ */ jsx17(SelectLabel, { children: "Vegetables" }),
+              /* @__PURE__ */ jsx17(SelectItem, { value: "carrot", children: "Carrot" }),
+              /* @__PURE__ */ jsx17(SelectItem, { value: "potato", children: "Potato" })
+            ] })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs5("div", { children: [
-        /* @__PURE__ */ jsx17(Label, { htmlFor: "select-disabled", children: "Disabled Select" }),
-        /* @__PURE__ */ jsx17(SelectNamespace, { id: "select-disabled", disabled: true, children: /* @__PURE__ */ jsx17(SelectOption, { value: "", children: "Disabled..." }) })
+      /* @__PURE__ */ jsxs6("div", { children: [
+        /* @__PURE__ */ jsx17(Label, { children: "Disabled Select" }),
+        /* @__PURE__ */ jsxs6(SelectNamespace, { disabled: true, children: [
+          /* @__PURE__ */ jsx17(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx17(SelectValue, { placeholder: "Disabled..." }) }),
+          /* @__PURE__ */ jsx17(SelectContent, { children: /* @__PURE__ */ jsx17(SelectItem, { value: "none", children: "None" }) })
+        ] })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx17(Section, { title: "Combobox (Searchable Select)", children: /* @__PURE__ */ jsx17("div", { className: "space-y-4 max-w-md", children: /* @__PURE__ */ jsxs5("div", { children: [
+    /* @__PURE__ */ jsx17(Section, { title: "Combobox (Searchable Select)", children: /* @__PURE__ */ jsx17("div", { className: "space-y-4 max-w-md", children: /* @__PURE__ */ jsxs6("div", { children: [
       /* @__PURE__ */ jsx17(Label, { children: "Framework" }),
       /* @__PURE__ */ jsx17(
         Combobox,
@@ -1144,8 +1319,8 @@ var PlaygroundContent = () => {
         }
       )
     ] }) }) }),
-    /* @__PURE__ */ jsx17(Section, { title: "Checkbox & Switch", children: /* @__PURE__ */ jsxs5("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx17(Section, { title: "Checkbox & Switch", children: /* @__PURE__ */ jsxs6("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx17(
           Checkbox,
           {
@@ -1156,12 +1331,12 @@ var PlaygroundContent = () => {
         ),
         /* @__PURE__ */ jsx17(Label, { htmlFor: "checkbox", children: "Accept terms and conditions" })
       ] }),
-      /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx17(Checkbox, { id: "checkbox-disabled", disabled: true }),
         /* @__PURE__ */ jsx17(Label, { htmlFor: "checkbox-disabled", children: "Disabled checkbox" })
       ] }),
       /* @__PURE__ */ jsx17(Separator, {}),
-      /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx17(
           Switch,
           {
@@ -1172,106 +1347,110 @@ var PlaygroundContent = () => {
         ),
         /* @__PURE__ */ jsx17(Label, { htmlFor: "switch", children: "Enable notifications" })
       ] }),
-      /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx17(Switch, { id: "switch-disabled", disabled: true }),
         /* @__PURE__ */ jsx17(Label, { htmlFor: "switch-disabled", children: "Disabled switch" })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx17(Section, { title: "Badge", children: /* @__PURE__ */ jsxs5("div", { className: "flex flex-wrap gap-4", children: [
+    /* @__PURE__ */ jsx17(Section, { title: "Badge", children: /* @__PURE__ */ jsxs6("div", { className: "flex flex-wrap gap-4", children: [
       /* @__PURE__ */ jsx17(Badge, { children: "Default" }),
       /* @__PURE__ */ jsx17(Badge, { variant: "secondary", children: "Secondary" }),
       /* @__PURE__ */ jsx17(Badge, { variant: "destructive", children: "Destructive" }),
       /* @__PURE__ */ jsx17(Badge, { variant: "outline", children: "Outline" })
     ] }) }),
-    /* @__PURE__ */ jsx17(Section, { title: "Card", children: /* @__PURE__ */ jsxs5("div", { className: "grid gap-4 md:grid-cols-2", children: [
-      /* @__PURE__ */ jsxs5(Card, { children: [
-        /* @__PURE__ */ jsxs5(CardHeader, { children: [
+    /* @__PURE__ */ jsx17(Section, { title: "Card", children: /* @__PURE__ */ jsxs6("div", { className: "grid gap-4 md:grid-cols-2", children: [
+      /* @__PURE__ */ jsxs6(Card, { children: [
+        /* @__PURE__ */ jsxs6(CardHeader, { children: [
           /* @__PURE__ */ jsx17(CardTitle, { children: "Card Title" }),
           /* @__PURE__ */ jsx17(CardDescription, { children: "Card description goes here" })
         ] }),
         /* @__PURE__ */ jsx17(CardContent, { children: /* @__PURE__ */ jsx17("p", { className: "text-foreground", children: "This is the card content area." }) }),
-        /* @__PURE__ */ jsxs5(CardFooter, { children: [
+        /* @__PURE__ */ jsxs6(CardFooter, { children: [
           /* @__PURE__ */ jsx17(Button, { variant: "outline", className: "mr-2", children: "Cancel" }),
           /* @__PURE__ */ jsx17(Button, { children: "Submit" })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs5(Card, { children: [
-        /* @__PURE__ */ jsxs5(CardHeader, { children: [
+      /* @__PURE__ */ jsxs6(Card, { children: [
+        /* @__PURE__ */ jsxs6(CardHeader, { children: [
           /* @__PURE__ */ jsx17(CardTitle, { children: "Another Card" }),
           /* @__PURE__ */ jsx17(CardDescription, { children: "With different content" })
         ] }),
-        /* @__PURE__ */ jsx17(CardContent, { children: /* @__PURE__ */ jsxs5("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx17(CardContent, { children: /* @__PURE__ */ jsxs6("div", { className: "space-y-2", children: [
           /* @__PURE__ */ jsx17(Label, { htmlFor: "card-input", children: "Name" }),
           /* @__PURE__ */ jsx17(Input, { id: "card-input", placeholder: "Enter name..." })
         ] }) }),
         /* @__PURE__ */ jsx17(CardFooter, { children: /* @__PURE__ */ jsx17(Button, { className: "w-full", children: "Save" }) })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsxs5(Section, { title: "Dialog", children: [
+    /* @__PURE__ */ jsxs6(Section, { title: "Dialog", children: [
       /* @__PURE__ */ jsx17(Button, { onClick: () => setDialogOpen(true), children: "Open Dialog" }),
-      /* @__PURE__ */ jsx17(DialogNamespace, { open: dialogOpen, onOpenChange: setDialogOpen, children: /* @__PURE__ */ jsxs5(DialogContent, { onClose: () => setDialogOpen(false), children: [
-        /* @__PURE__ */ jsxs5(DialogHeader, { children: [
+      /* @__PURE__ */ jsx17(DialogNamespace, { open: dialogOpen, onOpenChange: setDialogOpen, children: /* @__PURE__ */ jsxs6(DialogContent, { onClose: () => setDialogOpen(false), children: [
+        /* @__PURE__ */ jsxs6(DialogHeader, { children: [
           /* @__PURE__ */ jsx17(DialogTitle, { children: "Create New Zone" }),
           /* @__PURE__ */ jsx17(DialogDescription, { children: "Fill in the details below to create a new zone." })
         ] }),
-        /* @__PURE__ */ jsxs5("div", { className: "space-y-4 py-4", children: [
-          /* @__PURE__ */ jsxs5("div", { className: "grid grid-cols-2 gap-4", children: [
-            /* @__PURE__ */ jsxs5("div", { children: [
+        /* @__PURE__ */ jsxs6("div", { className: "space-y-4 py-4", children: [
+          /* @__PURE__ */ jsxs6("div", { className: "grid grid-cols-2 gap-4", children: [
+            /* @__PURE__ */ jsxs6("div", { children: [
               /* @__PURE__ */ jsx17(Label, { htmlFor: "zone-name", children: "Zone Name *" }),
               /* @__PURE__ */ jsx17(Input, { id: "zone-name", placeholder: "eg:hyderabad" })
             ] }),
-            /* @__PURE__ */ jsxs5("div", { children: [
+            /* @__PURE__ */ jsxs6("div", { children: [
               /* @__PURE__ */ jsx17(Label, { htmlFor: "zone-code", children: "Zone Code *" }),
               /* @__PURE__ */ jsx17(Input, { id: "zone-code", placeholder: "eg :hyd022" })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs5("div", { className: "grid grid-cols-2 gap-4", children: [
-            /* @__PURE__ */ jsxs5("div", { children: [
-              /* @__PURE__ */ jsx17(Label, { htmlFor: "state", children: "State *" }),
-              /* @__PURE__ */ jsxs5(SelectNamespace, { id: "state", children: [
-                /* @__PURE__ */ jsx17(SelectOption, { value: "", children: "Select state" }),
-                /* @__PURE__ */ jsx17(SelectOption, { value: "telangana", children: "TELANGANA" }),
-                /* @__PURE__ */ jsx17(SelectOption, { value: "andhra", children: "ANDHRA PRADESH" })
+          /* @__PURE__ */ jsxs6("div", { className: "grid grid-cols-2 gap-4", children: [
+            /* @__PURE__ */ jsxs6("div", { children: [
+              /* @__PURE__ */ jsx17(Label, { children: "State *" }),
+              /* @__PURE__ */ jsxs6(SelectNamespace, { children: [
+                /* @__PURE__ */ jsx17(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx17(SelectValue, { placeholder: "Select state" }) }),
+                /* @__PURE__ */ jsxs6(SelectContent, { children: [
+                  /* @__PURE__ */ jsx17(SelectItem, { value: "telangana", children: "TELANGANA" }),
+                  /* @__PURE__ */ jsx17(SelectItem, { value: "andhra", children: "ANDHRA PRADESH" })
+                ] })
               ] })
             ] }),
-            /* @__PURE__ */ jsxs5("div", { children: [
-              /* @__PURE__ */ jsx17(Label, { htmlFor: "district", children: "District *" }),
-              /* @__PURE__ */ jsxs5(SelectNamespace, { id: "district", children: [
-                /* @__PURE__ */ jsx17(SelectOption, { value: "", children: "Select District" }),
-                /* @__PURE__ */ jsx17(SelectOption, { value: "hyderabad", children: "HYDERABAD" }),
-                /* @__PURE__ */ jsx17(SelectOption, { value: "rangareddy", children: "RANGAREDDY" })
+            /* @__PURE__ */ jsxs6("div", { children: [
+              /* @__PURE__ */ jsx17(Label, { children: "District *" }),
+              /* @__PURE__ */ jsxs6(SelectNamespace, { children: [
+                /* @__PURE__ */ jsx17(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx17(SelectValue, { placeholder: "Select District" }) }),
+                /* @__PURE__ */ jsxs6(SelectContent, { children: [
+                  /* @__PURE__ */ jsx17(SelectItem, { value: "hyderabad", children: "HYDERABAD" }),
+                  /* @__PURE__ */ jsx17(SelectItem, { value: "rangareddy", children: "RANGAREDDY" })
+                ] })
               ] })
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs5(DialogFooter, { children: [
+        /* @__PURE__ */ jsxs6(DialogFooter, { children: [
           /* @__PURE__ */ jsx17(Button, { variant: "outline", onClick: () => setDialogOpen(false), children: "CANCEL" }),
           /* @__PURE__ */ jsx17(Button, { onClick: () => setDialogOpen(false), children: "Create" })
         ] })
       ] }) })
     ] }),
-    /* @__PURE__ */ jsx17(Section, { title: "Table", children: /* @__PURE__ */ jsxs5(TableNamespace, { children: [
+    /* @__PURE__ */ jsx17(Section, { title: "Table", children: /* @__PURE__ */ jsxs6(TableNamespace, { children: [
       /* @__PURE__ */ jsx17(TableCaption, { children: "A list of recent invoices" }),
-      /* @__PURE__ */ jsx17(TableHeader, { children: /* @__PURE__ */ jsxs5(TableRow, { children: [
+      /* @__PURE__ */ jsx17(TableHeader, { children: /* @__PURE__ */ jsxs6(TableRow, { children: [
         /* @__PURE__ */ jsx17(TableHead, { children: "Invoice" }),
         /* @__PURE__ */ jsx17(TableHead, { children: "Status" }),
         /* @__PURE__ */ jsx17(TableHead, { children: "Method" }),
         /* @__PURE__ */ jsx17(TableHead, { className: "text-right", children: "Amount" })
       ] }) }),
-      /* @__PURE__ */ jsxs5(TableBody, { children: [
-        /* @__PURE__ */ jsxs5(TableRow, { children: [
+      /* @__PURE__ */ jsxs6(TableBody, { children: [
+        /* @__PURE__ */ jsxs6(TableRow, { children: [
           /* @__PURE__ */ jsx17(TableCell, { children: "INV001" }),
           /* @__PURE__ */ jsx17(TableCell, { children: /* @__PURE__ */ jsx17(Badge, { children: "Paid" }) }),
           /* @__PURE__ */ jsx17(TableCell, { children: "Credit Card" }),
           /* @__PURE__ */ jsx17(TableCell, { className: "text-right", children: "$250.00" })
         ] }),
-        /* @__PURE__ */ jsxs5(TableRow, { children: [
+        /* @__PURE__ */ jsxs6(TableRow, { children: [
           /* @__PURE__ */ jsx17(TableCell, { children: "INV002" }),
           /* @__PURE__ */ jsx17(TableCell, { children: /* @__PURE__ */ jsx17(Badge, { variant: "secondary", children: "Pending" }) }),
           /* @__PURE__ */ jsx17(TableCell, { children: "PayPal" }),
           /* @__PURE__ */ jsx17(TableCell, { className: "text-right", children: "$150.00" })
         ] }),
-        /* @__PURE__ */ jsxs5(TableRow, { children: [
+        /* @__PURE__ */ jsxs6(TableRow, { children: [
           /* @__PURE__ */ jsx17(TableCell, { children: "INV003" }),
           /* @__PURE__ */ jsx17(TableCell, { children: /* @__PURE__ */ jsx17(Badge, { variant: "destructive", children: "Failed" }) }),
           /* @__PURE__ */ jsx17(TableCell, { children: "Bank Transfer" }),
@@ -1279,7 +1458,7 @@ var PlaygroundContent = () => {
         ] })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx17(Section, { title: "Pagination", children: /* @__PURE__ */ jsx17(PaginationNamespace, { children: /* @__PURE__ */ jsxs5(PaginationContent, { children: [
+    /* @__PURE__ */ jsx17(Section, { title: "Pagination", children: /* @__PURE__ */ jsx17(PaginationNamespace, { children: /* @__PURE__ */ jsxs6(PaginationContent, { children: [
       /* @__PURE__ */ jsx17(PaginationItem, { children: /* @__PURE__ */ jsx17(PaginationPrevious, { onClick: () => console.log("Previous") }) }),
       /* @__PURE__ */ jsx17(PaginationItem, { children: /* @__PURE__ */ jsx17(PaginationLink, { isActive: true, children: "1" }) }),
       /* @__PURE__ */ jsx17(PaginationItem, { children: /* @__PURE__ */ jsx17(PaginationLink, { children: "2" }) }),
@@ -1287,31 +1466,31 @@ var PlaygroundContent = () => {
       /* @__PURE__ */ jsx17(PaginationItem, { children: /* @__PURE__ */ jsx17(PaginationEllipsis, {}) }),
       /* @__PURE__ */ jsx17(PaginationItem, { children: /* @__PURE__ */ jsx17(PaginationNext, { onClick: () => console.log("Next") }) })
     ] }) }) }),
-    /* @__PURE__ */ jsx17(Section, { title: "Spinner", children: /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-8", children: [
-      /* @__PURE__ */ jsxs5("div", { className: "text-center", children: [
+    /* @__PURE__ */ jsx17(Section, { title: "Spinner", children: /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-8", children: [
+      /* @__PURE__ */ jsxs6("div", { className: "text-center", children: [
         /* @__PURE__ */ jsx17(Spinner, { size: "sm" }),
         /* @__PURE__ */ jsx17("p", { className: "text-sm text-muted-foreground mt-2", children: "Small" })
       ] }),
-      /* @__PURE__ */ jsxs5("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsxs6("div", { className: "text-center", children: [
         /* @__PURE__ */ jsx17(Spinner, { size: "default" }),
         /* @__PURE__ */ jsx17("p", { className: "text-sm text-muted-foreground mt-2", children: "Default" })
       ] }),
-      /* @__PURE__ */ jsxs5("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsxs6("div", { className: "text-center", children: [
         /* @__PURE__ */ jsx17(Spinner, { size: "lg" }),
         /* @__PURE__ */ jsx17("p", { className: "text-sm text-muted-foreground mt-2", children: "Large" })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx17(Section, { title: "Separator", children: /* @__PURE__ */ jsxs5("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx17(Section, { title: "Separator", children: /* @__PURE__ */ jsxs6("div", { className: "space-y-4", children: [
       /* @__PURE__ */ jsx17("p", { className: "text-foreground", children: "Content above separator" }),
       /* @__PURE__ */ jsx17(Separator, {}),
       /* @__PURE__ */ jsx17("p", { className: "text-foreground", children: "Content below separator" }),
-      /* @__PURE__ */ jsxs5("div", { className: "flex items-center h-10", children: [
+      /* @__PURE__ */ jsxs6("div", { className: "flex items-center h-10", children: [
         /* @__PURE__ */ jsx17("span", { className: "text-foreground", children: "Left" }),
         /* @__PURE__ */ jsx17(Separator, { orientation: "vertical", className: "mx-4" }),
         /* @__PURE__ */ jsx17("span", { className: "text-foreground", children: "Right" })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx17(Section, { title: "Typography & Colors", children: /* @__PURE__ */ jsxs5("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsx17(Section, { title: "Typography & Colors", children: /* @__PURE__ */ jsxs6("div", { className: "space-y-2", children: [
       /* @__PURE__ */ jsx17("p", { className: "text-foreground", children: "text-foreground - Primary text color" }),
       /* @__PURE__ */ jsx17("p", { className: "text-muted-foreground", children: "text-muted-foreground - Muted text color" }),
       /* @__PURE__ */ jsx17("p", { className: "text-accent", children: "text-accent - Accent color" }),
@@ -1339,6 +1518,8 @@ export {
   DialogTitle,
   Input,
   Label,
+  NativeSelect,
+  NativeSelectOption,
   PaginationNamespace as Pagination,
   PaginationContent,
   PaginationEllipsis,
@@ -1348,8 +1529,15 @@ export {
   PaginationPrevious,
   Playground,
   SelectNamespace as Select,
+  SelectContent,
   SelectGroup,
-  SelectOption,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
   Separator,
   Spinner,
   Switch,