@pos-360/horizon 0.11.0 → 0.12.0

package/dist/{chunk-FIYD5CSW.mjs → chunk-RPR6I35V.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",
@@ -1431,7 +1434,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 +1449,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-RPR6I35V.mjs.map
+//# sourceMappingURL=chunk-RPR6I35V.mjs.map