@pos-360/horizon 0.17.0 → 0.18.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,4 +1,4 @@
1
- import { cn, Label, Tooltip } from './chunk-ZI4BTIPU.mjs';
1
+ import { cn, Label, Tooltip } from './chunk-UQ66UPWH.mjs';
2
2
  import * as React10 from 'react';
3
3
  import { useState, useEffect, useCallback } from 'react';
4
4
  import { Slot } from '@radix-ui/react-slot';
@@ -11,9 +11,9 @@ import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
11
11
  import * as PopoverPrimitive from '@radix-ui/react-popover';
12
12
  import { AnimatePresence, motion } from 'framer-motion';
13
13
  import * as SelectPrimitive from '@radix-ui/react-select';
14
+ import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
14
15
  import * as TabsPrimitive from '@radix-ui/react-tabs';
15
16
  import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
16
- import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
17
17
  import * as SwitchPrimitive from '@radix-ui/react-switch';
18
18
 
19
19
  var buttonVariants = cva(
@@ -615,7 +615,7 @@ var PopoverContent = React10.forwardRef(({ className, align = "center", sideOffs
615
615
  mass: 0.8
616
616
  },
617
617
  className: cn(
618
- "z-50 w-72 rounded-hz-lg border border-white/20 bg-white/80 backdrop-blur-xl p-4 text-gray-900 shadow-lg outline-none dark:border-neutral-700/50 dark:bg-neutral-900/80 dark:text-neutral-100 origin-[--radix-popover-content-transform-origin]",
618
+ "z-50 w-72 rounded-md border border-white/20 bg-white/80 backdrop-blur-xl p-4 text-gray-900 shadow-lg outline-none dark:border-neutral-700/50 dark:bg-neutral-900/80 dark:text-neutral-100 origin-[--radix-popover-content-transform-origin]",
619
619
  className
620
620
  ),
621
621
  children
@@ -936,6 +936,91 @@ function SkeletonCard({ className }) {
936
936
  }
937
937
  );
938
938
  }
939
+ var segmentedControlVariants = cva(
940
+ "inline-flex w-fit items-stretch border border-gray-200 bg-white dark:border-neutral-700 dark:bg-neutral-900",
941
+ {
942
+ variants: {
943
+ size: {
944
+ default: "h-[52px]",
945
+ sm: "h-10",
946
+ lg: "h-[60px]"
947
+ }
948
+ },
949
+ defaultVariants: {
950
+ size: "default"
951
+ }
952
+ }
953
+ );
954
+ var segmentedControlItemVariants = cva(
955
+ "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",
956
+ {
957
+ variants: {
958
+ size: {
959
+ default: "h-full min-w-[120px]",
960
+ sm: "h-full min-w-[90px] text-xs",
961
+ lg: "h-full min-w-[140px] text-base"
962
+ }
963
+ },
964
+ defaultVariants: {
965
+ size: "default"
966
+ }
967
+ }
968
+ );
969
+ var containerRadiusClass = {
970
+ none: "rounded-hz-lg",
971
+ sm: "rounded-sm",
972
+ md: "rounded-md",
973
+ lg: "rounded-lg",
974
+ full: "rounded-full"
975
+ };
976
+ var itemRadiusClass = {
977
+ none: "first:rounded-l-hz-lg last:rounded-r-hz-lg",
978
+ sm: "first:rounded-l-sm last:rounded-r-sm",
979
+ md: "first:rounded-l-md last:rounded-r-md",
980
+ lg: "first:rounded-l-lg last:rounded-r-lg",
981
+ full: "rounded-full"
982
+ };
983
+ function SegmentedControl({
984
+ className,
985
+ options,
986
+ value,
987
+ onChange,
988
+ size,
989
+ radius = "none",
990
+ ...props
991
+ }) {
992
+ return /* @__PURE__ */ jsx(
993
+ RadioGroupPrimitive.Root,
994
+ {
995
+ ...props,
996
+ ...value !== void 0 ? { value, onValueChange: onChange } : {},
997
+ className: cn(
998
+ segmentedControlVariants({ size }),
999
+ containerRadiusClass[radius],
1000
+ className
1001
+ ),
1002
+ children: options.map((option) => /* @__PURE__ */ jsxs(
1003
+ RadioGroupPrimitive.Item,
1004
+ {
1005
+ value: option.value,
1006
+ disabled: option.disabled,
1007
+ className: cn(
1008
+ segmentedControlItemVariants({ size }),
1009
+ itemRadiusClass[radius],
1010
+ "border border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200",
1011
+ "data-[state=checked]:!bg-blue-50 data-[state=checked]:border-blue-500 data-[state=checked]:text-blue-600",
1012
+ "dark:data-[state=checked]:!bg-blue-950/40 dark:data-[state=checked]:border-blue-400 dark:data-[state=checked]:text-blue-400"
1013
+ ),
1014
+ children: [
1015
+ /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "hidden" }),
1016
+ option.label
1017
+ ]
1018
+ },
1019
+ option.value
1020
+ ))
1021
+ }
1022
+ );
1023
+ }
939
1024
  function BulkEditPopover({ column, onApply }) {
940
1025
  const [value, setValue] = React10.useState("");
941
1026
  const [open, setOpen] = React10.useState(false);
@@ -951,6 +1036,9 @@ function BulkEditPopover({ column, onApply }) {
951
1036
  };
952
1037
  const handleOpenChange = (next) => {
953
1038
  setOpen(next);
1039
+ if (next && bulkEdit.kind === "segmented-control") {
1040
+ setValue(bulkEdit.options[0]?.value ?? "");
1041
+ }
954
1042
  if (!next) setValue("");
955
1043
  };
956
1044
  return /* @__PURE__ */ jsx(Tooltip, { content: `Apply to all ${headingLabel}`, side: "top", disabled: open, children: /* @__PURE__ */ jsx("span", { className: "inline-flex", children: /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
@@ -964,7 +1052,7 @@ function BulkEditPopover({ column, onApply }) {
964
1052
  children: /* @__PURE__ */ jsx(PenLine, { className: "h-3.5 w-3.5" })
965
1053
  }
966
1054
  ) }),
967
- /* @__PURE__ */ jsxs(PopoverContent, { align: "start", className: "w-64 p-3 space-y-3", children: [
1055
+ /* @__PURE__ */ jsxs(PopoverContent, { align: "start", className: cn("p-3 space-y-3", bulkEdit.kind === "segmented-control" ? "w-auto" : "w-64"), children: [
968
1056
  /* @__PURE__ */ jsxs("p", { className: "text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide", children: [
969
1057
  "Apply to all \u2014 ",
970
1058
  headingLabel
@@ -991,11 +1079,21 @@ function BulkEditPopover({ column, onApply }) {
991
1079
  )
992
1080
  }
993
1081
  )
994
- ] }) : /* @__PURE__ */ jsxs(Select, { value, onValueChange: setValue, children: [
995
- /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: bulkEdit.placeholder ?? "Select a value" }) }),
1082
+ ] }) : bulkEdit.kind === "select" ? /* @__PURE__ */ jsxs(Select, { value, onValueChange: setValue, children: [
1083
+ /* @__PURE__ */ jsx(SelectTrigger, { className: "rounded-md", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: bulkEdit.placeholder ?? "Select a value" }) }),
996
1084
  /* @__PURE__ */ jsx(SelectContent, { children: bulkEdit.options.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value)) })
997
- ] }),
998
- /* @__PURE__ */ jsx(Button, { size: "sm", className: "w-full", onClick: handleApply, disabled: !isValid, children: "Apply All" })
1085
+ ] }) : /* @__PURE__ */ jsx(
1086
+ SegmentedControl,
1087
+ {
1088
+ className: "w-full",
1089
+ size: "sm",
1090
+ value,
1091
+ onChange: setValue,
1092
+ options: bulkEdit.options
1093
+ }
1094
+ ),
1095
+ bulkEdit.kind === "input" && bulkEdit.renderPreview && value && bulkEdit.renderPreview(value),
1096
+ /* @__PURE__ */ jsx(Button, { size: "sm", className: "w-full rounded-md", onClick: handleApply, disabled: !isValid, children: "Apply All" })
999
1097
  ] })
1000
1098
  ] }) }) });
1001
1099
  }
@@ -1234,7 +1332,8 @@ var TableInner = React10.forwardRef(
1234
1332
  className: cn(
1235
1333
  "p-4 align-middle",
1236
1334
  col.sticky && "sticky left-0 z-20 bg-white dark:bg-neutral-900",
1237
- showDividers && "border-r border-gray-200 dark:border-neutral-700"
1335
+ showDividers && "border-r border-gray-200 dark:border-neutral-700",
1336
+ typeof col.cellClassName === "function" ? col.cellClassName(row) : col.cellClassName
1238
1337
  ),
1239
1338
  children: col.cell(row)
1240
1339
  },
@@ -1736,14 +1835,14 @@ var toggleItemVariants = cva(
1736
1835
  }
1737
1836
  }
1738
1837
  );
1739
- var containerRadiusClass = {
1838
+ var containerRadiusClass2 = {
1740
1839
  none: "rounded-hz-lg",
1741
1840
  sm: "rounded-sm",
1742
1841
  md: "rounded-md",
1743
1842
  lg: "rounded-lg",
1744
1843
  full: "rounded-full"
1745
1844
  };
1746
- var itemRadiusClass = {
1845
+ var itemRadiusClass2 = {
1747
1846
  none: "first:rounded-l-hz-lg last:rounded-r-hz-lg",
1748
1847
  sm: "first:rounded-l-sm last:rounded-r-sm",
1749
1848
  md: "first:rounded-l-md last:rounded-r-md",
@@ -1767,7 +1866,7 @@ function Toggle({
1767
1866
  ...value !== void 0 ? { value, onValueChange: onChange } : {},
1768
1867
  className: cn(
1769
1868
  toggleGroupVariants({ size }),
1770
- containerRadiusClass[radius],
1869
+ containerRadiusClass2[radius],
1771
1870
  className
1772
1871
  ),
1773
1872
  children: options.map((option) => {
@@ -1780,7 +1879,7 @@ function Toggle({
1780
1879
  "aria-label": iconOnly ? option.ariaLabel ?? option.value : void 0,
1781
1880
  className: cn(
1782
1881
  toggleItemVariants({ size, iconOnly }),
1783
- itemRadiusClass[radius],
1882
+ itemRadiusClass2[radius],
1784
1883
  "border border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200",
1785
1884
  "data-[state=on]:!bg-blue-50 data-[state=on]:border-blue-500 data-[state=on]:text-blue-600",
1786
1885
  "dark:data-[state=on]:!bg-blue-950/40 dark:data-[state=on]:border-blue-400 dark:data-[state=on]:text-blue-400"
@@ -1796,91 +1895,6 @@ function Toggle({
1796
1895
  }
1797
1896
  );
1798
1897
  }
1799
- var segmentedControlVariants = cva(
1800
- "inline-flex w-fit items-stretch border border-gray-200 bg-white dark:border-neutral-700 dark:bg-neutral-900",
1801
- {
1802
- variants: {
1803
- size: {
1804
- default: "h-[52px]",
1805
- sm: "h-10",
1806
- lg: "h-[60px]"
1807
- }
1808
- },
1809
- defaultVariants: {
1810
- size: "default"
1811
- }
1812
- }
1813
- );
1814
- var segmentedControlItemVariants = cva(
1815
- "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",
1816
- {
1817
- variants: {
1818
- size: {
1819
- default: "h-full min-w-[120px]",
1820
- sm: "h-full min-w-[90px] text-xs",
1821
- lg: "h-full min-w-[140px] text-base"
1822
- }
1823
- },
1824
- defaultVariants: {
1825
- size: "default"
1826
- }
1827
- }
1828
- );
1829
- var containerRadiusClass2 = {
1830
- none: "rounded-hz-lg",
1831
- sm: "rounded-sm",
1832
- md: "rounded-md",
1833
- lg: "rounded-lg",
1834
- full: "rounded-full"
1835
- };
1836
- var itemRadiusClass2 = {
1837
- none: "first:rounded-l-hz-lg last:rounded-r-hz-lg",
1838
- sm: "first:rounded-l-sm last:rounded-r-sm",
1839
- md: "first:rounded-l-md last:rounded-r-md",
1840
- lg: "first:rounded-l-lg last:rounded-r-lg",
1841
- full: "rounded-full"
1842
- };
1843
- function SegmentedControl({
1844
- className,
1845
- options,
1846
- value,
1847
- onChange,
1848
- size,
1849
- radius = "none",
1850
- ...props
1851
- }) {
1852
- return /* @__PURE__ */ jsx(
1853
- RadioGroupPrimitive.Root,
1854
- {
1855
- ...props,
1856
- ...value !== void 0 ? { value, onValueChange: onChange } : {},
1857
- className: cn(
1858
- segmentedControlVariants({ size }),
1859
- containerRadiusClass2[radius],
1860
- className
1861
- ),
1862
- children: options.map((option) => /* @__PURE__ */ jsxs(
1863
- RadioGroupPrimitive.Item,
1864
- {
1865
- value: option.value,
1866
- disabled: option.disabled,
1867
- className: cn(
1868
- segmentedControlItemVariants({ size }),
1869
- itemRadiusClass2[radius],
1870
- "border border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200",
1871
- "data-[state=checked]:!bg-blue-50 data-[state=checked]:border-blue-500 data-[state=checked]:text-blue-600",
1872
- "dark:data-[state=checked]:!bg-blue-950/40 dark:data-[state=checked]:border-blue-400 dark:data-[state=checked]:text-blue-400"
1873
- ),
1874
- children: [
1875
- /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "hidden" }),
1876
- option.label
1877
- ]
1878
- },
1879
- option.value
1880
- ))
1881
- }
1882
- );
1883
- }
1884
1898
  var switchTrackVariants = cva(
1885
1899
  "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",
1886
1900
  {
@@ -1975,5 +1989,5 @@ var Switch = React10.forwardRef(({ className, size, label, labelPosition = "righ
1975
1989
  Switch.displayName = "Switch";
1976
1990
 
1977
1991
  export { Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, ColumnSelection, 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, useColumnVisibility, useFormContext, useFormFieldContext, useTableSelection };
1978
- //# sourceMappingURL=chunk-2PPZNXOQ.mjs.map
1979
- //# sourceMappingURL=chunk-2PPZNXOQ.mjs.map
1992
+ //# sourceMappingURL=chunk-DNRDNWUF.mjs.map
1993
+ //# sourceMappingURL=chunk-DNRDNWUF.mjs.map