@pos-360/horizon 0.11.0 → 0.12.1

package/dist/{chunk-6B6UOXJJ.js → chunk-EWYLDJ4P.js}

@@ -13,6 +13,9 @@ var PopoverPrimitive = require('@radix-ui/react-popover');
 var framerMotion = require('framer-motion');
 var SelectPrimitive = require('@radix-ui/react-select');
 var TabsPrimitive = require('@radix-ui/react-tabs');
+var ToggleGroupPrimitive = require('@radix-ui/react-toggle-group');
+var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
+var SwitchPrimitive = require('@radix-ui/react-switch');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -39,6 +42,9 @@ var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(DropdownMe
 var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
 var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespace(SelectPrimitive);
 var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
+var ToggleGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(ToggleGroupPrimitive);
+var RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(RadioGroupPrimitive);
+var SwitchPrimitive__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitive);
 
 var buttonVariants = classVarianceAuthority.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",
@@ -1271,8 +1277,6 @@ var useTabsContext = () => {
   }
   return context;
 };
-var TabsListContext = React9__namespace.createContext({ color: "default" });
-var useTabsListContext = () => React9__namespace.useContext(TabsListContext);
 var Tabs = React9__namespace.forwardRef(({ defaultValue, value, onValueChange, children, ...props }, ref) => {
   const [activeTab, setActiveTabState] = React9__namespace.useState(value ?? defaultValue);
   const tabRefs = React9__namespace.useRef(/* @__PURE__ */ new Map()).current;
@@ -1314,39 +1318,7 @@ var Tabs = React9__namespace.forwardRef(({ defaultValue, value, onValueChange, c
   );
 });
 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__namespace.forwardRef(({ className, children, color = "default", ...props }, ref) => {
+var TabsList = React9__namespace.forwardRef(({ className, children, ...props }, ref) => {
   const { activeTab, tabRefs, listRef } = useTabsContext();
   const [indicatorStyle, setIndicatorStyle] = React9__namespace.useState(null);
   React9__namespace.useEffect(() => {
@@ -1365,7 +1337,7 @@ var TabsList = React9__namespace.forwardRef(({ className, children, color = "def
     window.addEventListener("resize", updateIndicator);
     return () => window.removeEventListener("resize", updateIndicator);
   }, [activeTab, tabRefs, listRef]);
-  return /* @__PURE__ */ jsxRuntime.jsx(TabsListContext.Provider, { value: { color }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     TabsPrimitive__namespace.List,
     {
       ref: (node) => {
@@ -1375,7 +1347,7 @@ var TabsList = React9__namespace.forwardRef(({ className, children, color = "def
       },
       className: chunkYO72COII_js.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,
@@ -1383,7 +1355,7 @@ var TabsList = React9__namespace.forwardRef(({ className, children, color = "def
         indicatorStyle && /* @__PURE__ */ jsxRuntime.jsx(
           framerMotion.motion.div,
           {
-            className: chunkYO72COII_js.cn("absolute h-8 rounded-hz-md", indicatorColorStyles[color]),
+            className: chunkYO72COII_js.cn("absolute h-8 rounded-hz-md", "bg-white dark:bg-neutral-900 shadow-sm"),
             initial: false,
             animate: {
               left: indicatorStyle.left,
@@ -1399,12 +1371,11 @@ var TabsList = React9__namespace.forwardRef(({ className, children, color = "def
         children
       ]
     }
-  ) });
+  );
 });
 TabsList.displayName = TabsPrimitive__namespace.List.displayName;
 var TabsTrigger = React9__namespace.forwardRef(({ className, value, ...props }, ref) => {
   const { registerTab, activeTab } = useTabsContext();
-  const { color } = useTabsListContext();
   const triggerRef = React9__namespace.useRef(null);
   React9__namespace.useEffect(() => {
     registerTab(value, triggerRef.current);
@@ -1422,7 +1393,7 @@ var TabsTrigger = React9__namespace.forwardRef(({ className, value, ...props },
       value,
       className: chunkYO72COII_js.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
@@ -1459,7 +1430,7 @@ var Textarea = React9__namespace.forwardRef(
 );
 Textarea.displayName = "Textarea";
 var toggleGroupVariants = classVarianceAuthority.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: {
@@ -1474,60 +1445,266 @@ var toggleGroupVariants = classVarianceAuthority.cva(
   }
 );
 var toggleItemVariants = classVarianceAuthority.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__ */ jsxRuntime.jsx(
-    "div",
+    ToggleGroupPrimitive__namespace.Root,
+    {
+      ...props,
+      type: "multiple",
+      ...value !== void 0 ? { value, onValueChange: onChange } : {},
+      className: chunkYO72COII_js.cn(
+        toggleGroupVariants({ size }),
+        containerRadiusClass[radius],
+        className
+      ),
+      children: options.map((option) => {
+        const iconOnly = !!option.icon && !option.label;
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          ToggleGroupPrimitive__namespace.Item,
+          {
+            value: option.value,
+            disabled: option.disabled,
+            "aria-label": iconOnly ? option.ariaLabel ?? option.value : void 0,
+            className: chunkYO72COII_js.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__ */ jsxRuntime.jsx("span", { className: "shrink-0 inline-flex", children: option.icon }),
+              option.label
+            ]
+          },
+          option.value
+        );
+      })
+    }
+  );
+}
+var segmentedControlVariants = classVarianceAuthority.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 = classVarianceAuthority.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__ */ jsxRuntime.jsx(
+    RadioGroupPrimitive__namespace.Root,
     {
-      role: "radiogroup",
-      className: chunkYO72COII_js.cn(toggleGroupVariants({ size }), className),
       ...props,
-      children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
+      ...value !== void 0 ? { value, onValueChange: onChange } : {},
+      className: chunkYO72COII_js.cn(
+        segmentedControlVariants({ size }),
+        containerRadiusClass2[radius],
+        className
+      ),
+      children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
+        RadioGroupPrimitive__namespace.Item,
         {
-          role: "radio",
-          type: "button",
-          "aria-checked": value === option.value,
+          value: option.value,
           disabled: option.disabled,
           className: chunkYO72COII_js.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__ */ jsxRuntime.jsx(RadioGroupPrimitive__namespace.Indicator, { className: "hidden" }),
+            option.label
+          ]
         },
         option.value
       ))
     }
   );
 }
+var switchTrackVariants = classVarianceAuthority.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 = classVarianceAuthority.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 = classVarianceAuthority.cva("select-none", {
+  variants: {
+    size: {
+      sm: "text-xs",
+      default: "text-sm",
+      lg: "text-base"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+var Switch = React9__namespace.forwardRef(({ className, size, label, labelPosition = "right", ...props }, ref) => {
+  const generatedId = React9__namespace.useId();
+  const switchId = props.id ?? generatedId;
+  const switchEl = /* @__PURE__ */ jsxRuntime.jsx(
+    SwitchPrimitive__namespace.Root,
+    {
+      ...props,
+      id: switchId,
+      ref,
+      className: chunkYO72COII_js.cn(switchTrackVariants({ size }), className),
+      children: /* @__PURE__ */ jsxRuntime.jsx(SwitchPrimitive__namespace.Thumb, { className: switchThumbVariants({ size }) })
+    }
+  );
+  if (!label) return switchEl;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: chunkYO72COII_js.cn(
+        "inline-flex items-center gap-2",
+        props.disabled ? "cursor-not-allowed" : "cursor-pointer"
+      ),
+      children: [
+        labelPosition === "left" && /* @__PURE__ */ jsxRuntime.jsx(
+          "label",
+          {
+            htmlFor: switchId,
+            className: chunkYO72COII_js.cn(
+              switchLabelVariants({ size }),
+              props.disabled ? "cursor-not-allowed" : "cursor-pointer"
+            ),
+            children: label
+          }
+        ),
+        switchEl,
+        labelPosition === "right" && /* @__PURE__ */ jsxRuntime.jsx(
+          "label",
+          {
+            htmlFor: switchId,
+            className: chunkYO72COII_js.cn(
+              switchLabelVariants({ size }),
+              props.disabled ? "cursor-not-allowed" : "cursor-pointer"
+            ),
+            children: label
+          }
+        )
+      ]
+    }
+  );
+});
+Switch.displayName = "Switch";
 
 exports.Button = Button;
 exports.Card = Card;
@@ -1572,6 +1749,7 @@ exports.Popover = Popover;
 exports.PopoverAnchor = PopoverAnchor;
 exports.PopoverContent = PopoverContent;
 exports.PopoverTrigger = PopoverTrigger;
+exports.SegmentedControl = SegmentedControl;
 exports.Select = Select;
 exports.SelectContent = SelectContent;
 exports.SelectGroup = SelectGroup;
@@ -1595,6 +1773,7 @@ exports.SkeletonTableRow = SkeletonTableRow;
 exports.SkeletonTableRows = SkeletonTableRows;
 exports.SkeletonText = SkeletonText;
 exports.SkeletonTitle = SkeletonTitle;
+exports.Switch = Switch;
 exports.Table = Table;
 exports.TableBody = TableBody;
 exports.TableCaption = TableCaption;
@@ -1612,11 +1791,16 @@ exports.TabsTrigger = TabsTrigger;
 exports.Textarea = Textarea;
 exports.Toggle = Toggle;
 exports.buttonVariants = buttonVariants;
+exports.segmentedControlItemVariants = segmentedControlItemVariants;
+exports.segmentedControlVariants = segmentedControlVariants;
 exports.separatorVariants = separatorVariants;
+exports.switchLabelVariants = switchLabelVariants;
+exports.switchThumbVariants = switchThumbVariants;
+exports.switchTrackVariants = switchTrackVariants;
 exports.toggleGroupVariants = toggleGroupVariants;
 exports.toggleItemVariants = toggleItemVariants;
 exports.useFormContext = useFormContext;
 exports.useFormFieldContext = useFormFieldContext;
 exports.useTableSelection = useTableSelection;
-//# sourceMappingURL=chunk-6B6UOXJJ.js.map
-//# sourceMappingURL=chunk-6B6UOXJJ.js.map
+//# sourceMappingURL=chunk-EWYLDJ4P.js.map
+//# sourceMappingURL=chunk-EWYLDJ4P.js.map