@pos-360/horizon 0.11.0 → 0.12.1

package/dist/{chunk-FIYD5CSW.mjs → chunk-3B2NQT6J.mjs}

@@ -11,6 +11,9 @@ import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { AnimatePresence, motion } from 'framer-motion';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
 
 var buttonVariants = cva(
   "group inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-hz-md text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
@@ -1243,8 +1246,6 @@ var useTabsContext = () => {
   }
   return context;
 };
-var TabsListContext = React9.createContext({ color: "default" });
-var useTabsListContext = () => React9.useContext(TabsListContext);
 var Tabs = React9.forwardRef(({ defaultValue, value, onValueChange, children, ...props }, ref) => {
   const [activeTab, setActiveTabState] = React9.useState(value ?? defaultValue);
   const tabRefs = React9.useRef(/* @__PURE__ */ new Map()).current;
@@ -1286,39 +1287,7 @@ var Tabs = React9.forwardRef(({ defaultValue, value, onValueChange, children, ..
   );
 });
 Tabs.displayName = "Tabs";
-var listColorStyles = {
-  default: "bg-gray-100 text-gray-500 dark:bg-neutral-700 dark:text-gray-400",
-  primary: "bg-blue-100 text-blue-600 dark:bg-blue-900/40 dark:text-blue-300",
-  success: "bg-green-100 text-green-600 dark:bg-green-900/40 dark:text-green-300",
-  danger: "bg-red-100 text-red-600 dark:bg-red-900/40 dark:text-red-300",
-  warning: "bg-amber-100 text-amber-600 dark:bg-amber-900/40 dark:text-amber-300",
-  secondary: "bg-purple-100 text-purple-600 dark:bg-purple-900/40 dark:text-purple-300"
-};
-var indicatorColorStyles = {
-  default: "bg-white dark:bg-neutral-900 shadow-sm",
-  primary: "bg-blue-500 dark:bg-blue-600",
-  success: "bg-green-500 dark:bg-green-600",
-  danger: "bg-red-500 dark:bg-red-600",
-  warning: "bg-amber-500 dark:bg-amber-600",
-  secondary: "bg-purple-500 dark:bg-purple-600"
-};
-var activeTextColorStyles = {
-  default: "text-gray-900 dark:text-gray-100",
-  primary: "text-white dark:text-white",
-  success: "text-white dark:text-white",
-  danger: "text-white dark:text-white",
-  warning: "text-white dark:text-white",
-  secondary: "text-white dark:text-white"
-};
-var inactiveTextColorStyles = {
-  default: "text-gray-500 dark:text-gray-400",
-  primary: "text-blue-600 dark:text-blue-300",
-  success: "text-green-600 dark:text-green-300",
-  danger: "text-red-600 dark:text-red-300",
-  warning: "text-amber-600 dark:text-amber-300",
-  secondary: "text-purple-600 dark:text-purple-300"
-};
-var TabsList = React9.forwardRef(({ className, children, color = "default", ...props }, ref) => {
+var TabsList = React9.forwardRef(({ className, children, ...props }, ref) => {
   const { activeTab, tabRefs, listRef } = useTabsContext();
   const [indicatorStyle, setIndicatorStyle] = React9.useState(null);
   React9.useEffect(() => {
@@ -1337,7 +1306,7 @@ var TabsList = React9.forwardRef(({ className, children, color = "default", ...p
     window.addEventListener("resize", updateIndicator);
     return () => window.removeEventListener("resize", updateIndicator);
   }, [activeTab, tabRefs, listRef]);
-  return /* @__PURE__ */ jsx(TabsListContext.Provider, { value: { color }, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs(
     TabsPrimitive.List,
     {
       ref: (node) => {
@@ -1347,7 +1316,7 @@ var TabsList = React9.forwardRef(({ className, children, color = "default", ...p
       },
       className: cn(
         "relative inline-flex h-10 items-center justify-center rounded-hz-lg p-1",
-        listColorStyles[color],
+        "bg-gray-100 text-gray-500 dark:bg-neutral-700 dark:text-gray-400",
         className
       ),
       ...props,
@@ -1355,7 +1324,7 @@ var TabsList = React9.forwardRef(({ className, children, color = "default", ...p
         indicatorStyle && /* @__PURE__ */ jsx(
           motion.div,
           {
-            className: cn("absolute h-8 rounded-hz-md", indicatorColorStyles[color]),
+            className: cn("absolute h-8 rounded-hz-md", "bg-white dark:bg-neutral-900 shadow-sm"),
             initial: false,
             animate: {
               left: indicatorStyle.left,
@@ -1371,12 +1340,11 @@ var TabsList = React9.forwardRef(({ className, children, color = "default", ...p
         children
       ]
     }
-  ) });
+  );
 });
 TabsList.displayName = TabsPrimitive.List.displayName;
 var TabsTrigger = React9.forwardRef(({ className, value, ...props }, ref) => {
   const { registerTab, activeTab } = useTabsContext();
-  const { color } = useTabsListContext();
   const triggerRef = React9.useRef(null);
   React9.useEffect(() => {
     registerTab(value, triggerRef.current);
@@ -1394,7 +1362,7 @@ var TabsTrigger = React9.forwardRef(({ className, value, ...props }, ref) => {
       value,
       className: cn(
         "relative z-10 inline-flex items-center justify-center whitespace-nowrap rounded-hz-md px-3 py-1.5 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-        isActive ? activeTextColorStyles[color] : inactiveTextColorStyles[color],
+        isActive ? "text-gray-900 dark:text-gray-100" : "text-gray-500 dark:text-gray-400",
         className
       ),
       ...props
@@ -1431,7 +1399,7 @@ var Textarea = React9.forwardRef(
 );
 Textarea.displayName = "Textarea";
 var toggleGroupVariants = cva(
-  "inline-flex w-fit items-stretch rounded-hz-lg border border-gray-200 bg-white dark:border-neutral-700 dark:bg-neutral-900",
+  "inline-flex w-fit items-stretch border border-gray-200 bg-white dark:border-neutral-700 dark:bg-neutral-900",
   {
     variants: {
       size: {
@@ -1446,61 +1414,267 @@ var toggleGroupVariants = cva(
   }
 );
 var toggleItemVariants = cva(
-  "inline-flex flex-1 items-center justify-center whitespace-nowrap px-6 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 first:rounded-l-hz-lg last:rounded-r-hz-lg",
+  "inline-flex flex-1 items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed",
   {
     variants: {
       size: {
-        default: "h-full min-w-[120px]",
-        sm: "h-full min-w-[90px] text-xs",
-        lg: "h-full min-w-[140px] text-base"
+        default: "h-full px-6",
+        sm: "h-full px-4 text-xs",
+        lg: "h-full px-8 text-base"
       },
-      active: {
-        true: "!bg-blue-50 border border-blue-500 text-blue-600 dark:!bg-blue-950/40 dark:border-blue-400 dark:text-blue-400",
-        false: "!bg-transparent border border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+      iconOnly: {
+        true: "aspect-square px-0 min-w-0",
+        false: "min-w-[120px]"
       }
     },
+    compoundVariants: [
+      { size: "sm", iconOnly: false, class: "min-w-[90px]" },
+      { size: "lg", iconOnly: false, class: "min-w-[140px]" }
+    ],
     defaultVariants: {
       size: "default",
-      active: false
+      iconOnly: false
     }
   }
 );
+var containerRadiusClass = {
+  none: "rounded-hz-lg",
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  full: "rounded-full"
+};
+var itemRadiusClass = {
+  none: "first:rounded-l-hz-lg last:rounded-r-hz-lg",
+  sm: "first:rounded-l-sm last:rounded-r-sm",
+  md: "first:rounded-l-md last:rounded-r-md",
+  lg: "first:rounded-l-lg last:rounded-r-lg",
+  full: "rounded-full"
+};
 function Toggle({
   className,
   options,
   value,
   onChange,
   size,
+  radius = "none",
   ...props
 }) {
   return /* @__PURE__ */ jsx(
-    "div",
+    ToggleGroupPrimitive.Root,
+    {
+      ...props,
+      type: "multiple",
+      ...value !== void 0 ? { value, onValueChange: onChange } : {},
+      className: cn(
+        toggleGroupVariants({ size }),
+        containerRadiusClass[radius],
+        className
+      ),
+      children: options.map((option) => {
+        const iconOnly = !!option.icon && !option.label;
+        return /* @__PURE__ */ jsxs(
+          ToggleGroupPrimitive.Item,
+          {
+            value: option.value,
+            disabled: option.disabled,
+            "aria-label": iconOnly ? option.ariaLabel ?? option.value : void 0,
+            className: cn(
+              toggleItemVariants({ size, iconOnly }),
+              itemRadiusClass[radius],
+              "border border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200",
+              "data-[state=on]:!bg-blue-50 data-[state=on]:border-blue-500 data-[state=on]:text-blue-600",
+              "dark:data-[state=on]:!bg-blue-950/40 dark:data-[state=on]:border-blue-400 dark:data-[state=on]:text-blue-400"
+            ),
+            children: [
+              option.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0 inline-flex", children: option.icon }),
+              option.label
+            ]
+          },
+          option.value
+        );
+      })
+    }
+  );
+}
+var segmentedControlVariants = cva(
+  "inline-flex w-fit items-stretch border border-gray-200 bg-white dark:border-neutral-700 dark:bg-neutral-900",
+  {
+    variants: {
+      size: {
+        default: "h-[52px]",
+        sm: "h-10",
+        lg: "h-[60px]"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var segmentedControlItemVariants = cva(
+  "inline-flex flex-1 cursor-pointer items-center justify-center whitespace-nowrap px-6 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed",
+  {
+    variants: {
+      size: {
+        default: "h-full min-w-[120px]",
+        sm: "h-full min-w-[90px] text-xs",
+        lg: "h-full min-w-[140px] text-base"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var containerRadiusClass2 = {
+  none: "rounded-hz-lg",
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  full: "rounded-full"
+};
+var itemRadiusClass2 = {
+  none: "first:rounded-l-hz-lg last:rounded-r-hz-lg",
+  sm: "first:rounded-l-sm last:rounded-r-sm",
+  md: "first:rounded-l-md last:rounded-r-md",
+  lg: "first:rounded-l-lg last:rounded-r-lg",
+  full: "rounded-full"
+};
+function SegmentedControl({
+  className,
+  options,
+  value,
+  onChange,
+  size,
+  radius = "none",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    RadioGroupPrimitive.Root,
     {
-      role: "radiogroup",
-      className: cn(toggleGroupVariants({ size }), className),
       ...props,
-      children: options.map((option) => /* @__PURE__ */ jsx(
-        "button",
+      ...value !== void 0 ? { value, onValueChange: onChange } : {},
+      className: cn(
+        segmentedControlVariants({ size }),
+        containerRadiusClass2[radius],
+        className
+      ),
+      children: options.map((option) => /* @__PURE__ */ jsxs(
+        RadioGroupPrimitive.Item,
         {
-          role: "radio",
-          type: "button",
-          "aria-checked": value === option.value,
+          value: option.value,
           disabled: option.disabled,
           className: cn(
-            toggleItemVariants({
-              size,
-              active: value === option.value
-            })
+            segmentedControlItemVariants({ size }),
+            itemRadiusClass2[radius],
+            "border border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200",
+            "data-[state=checked]:!bg-blue-50 data-[state=checked]:border-blue-500 data-[state=checked]:text-blue-600",
+            "dark:data-[state=checked]:!bg-blue-950/40 dark:data-[state=checked]:border-blue-400 dark:data-[state=checked]:text-blue-400"
           ),
-          onClick: () => onChange(option.value),
-          children: option.label
+          children: [
+            /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "hidden" }),
+            option.label
+          ]
         },
         option.value
       ))
     }
   );
 }
+var switchTrackVariants = cva(
+  "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-blue-600 data-[state=unchecked]:bg-gray-200 dark:data-[state=checked]:bg-blue-500 dark:data-[state=unchecked]:bg-neutral-700",
+  {
+    variants: {
+      size: {
+        sm: "h-5 w-9",
+        default: "h-6 w-11",
+        lg: "h-7 w-[52px]"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var switchThumbVariants = cva(
+  "pointer-events-none block rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=unchecked]:translate-x-0",
+  {
+    variants: {
+      size: {
+        sm: "h-4 w-4 data-[state=checked]:translate-x-4",
+        default: "h-5 w-5 data-[state=checked]:translate-x-5",
+        lg: "h-6 w-6 data-[state=checked]:translate-x-6"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var switchLabelVariants = cva("select-none", {
+  variants: {
+    size: {
+      sm: "text-xs",
+      default: "text-sm",
+      lg: "text-base"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+var Switch = React9.forwardRef(({ className, size, label, labelPosition = "right", ...props }, ref) => {
+  const generatedId = React9.useId();
+  const switchId = props.id ?? generatedId;
+  const switchEl = /* @__PURE__ */ jsx(
+    SwitchPrimitive.Root,
+    {
+      ...props,
+      id: switchId,
+      ref,
+      className: cn(switchTrackVariants({ size }), className),
+      children: /* @__PURE__ */ jsx(SwitchPrimitive.Thumb, { className: switchThumbVariants({ size }) })
+    }
+  );
+  if (!label) return switchEl;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "inline-flex items-center gap-2",
+        props.disabled ? "cursor-not-allowed" : "cursor-pointer"
+      ),
+      children: [
+        labelPosition === "left" && /* @__PURE__ */ jsx(
+          "label",
+          {
+            htmlFor: switchId,
+            className: cn(
+              switchLabelVariants({ size }),
+              props.disabled ? "cursor-not-allowed" : "cursor-pointer"
+            ),
+            children: label
+          }
+        ),
+        switchEl,
+        labelPosition === "right" && /* @__PURE__ */ jsx(
+          "label",
+          {
+            htmlFor: switchId,
+            className: cn(
+              switchLabelVariants({ size }),
+              props.disabled ? "cursor-not-allowed" : "cursor-pointer"
+            ),
+            children: label
+          }
+        )
+      ]
+    }
+  );
+});
+Switch.displayName = "Switch";
 
-export { Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Form, FormControl, FormDescription, FormField, FormLabel, FormMessage, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator3 as Separator, Skeleton, SkeletonAvatar, SkeletonBadge, SkeletonButton, SkeletonCard, SkeletonIcon, SkeletonInput, SkeletonSubtitle, SkeletonTableRow, SkeletonTableRows, SkeletonText, SkeletonTitle, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TableRowCheckbox, TableSelectAll, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toggle, buttonVariants, separatorVariants, toggleGroupVariants, toggleItemVariants, useFormContext, useFormFieldContext, useTableSelection };
-//# sourceMappingURL=chunk-FIYD5CSW.mjs.map
-//# sourceMappingURL=chunk-FIYD5CSW.mjs.map
+export { Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Form, FormControl, FormDescription, FormField, FormLabel, FormMessage, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator3 as Separator, Skeleton, SkeletonAvatar, SkeletonBadge, SkeletonButton, SkeletonCard, SkeletonIcon, SkeletonInput, SkeletonSubtitle, SkeletonTableRow, SkeletonTableRows, SkeletonText, SkeletonTitle, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TableRowCheckbox, TableSelectAll, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toggle, buttonVariants, segmentedControlItemVariants, segmentedControlVariants, separatorVariants, switchLabelVariants, switchThumbVariants, switchTrackVariants, toggleGroupVariants, toggleItemVariants, useFormContext, useFormFieldContext, useTableSelection };
+//# sourceMappingURL=chunk-3B2NQT6J.mjs.map
+//# sourceMappingURL=chunk-3B2NQT6J.mjs.map