@pos-360/horizon 0.13.0 → 0.15.0

package/dist/{chunk-E7Q6YGBZ.mjs → chunk-6YUIM6WB.mjs}

@@ -1,10 +1,11 @@
 import { cn, Label } from './chunk-E3UN74IA.mjs';
 import * as React9 from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { Check, X, ChevronRight, Circle, ChevronDown, ChevronUp, Search } from 'lucide-react';
+import { Check, X, ChevronRight, Circle, ChevronDown, ChevronUp, Search, SlidersHorizontal } from 'lucide-react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
@@ -652,7 +653,8 @@ var Select = ({
   ) });
 };
 var SelectGroup = SelectPrimitive.Group;
-var SelectValue = SelectPrimitive.Value;
+var SelectValue = React9.forwardRef(({ children, placeholder, ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Value, { ref, placeholder, ...props, children }));
+SelectValue.displayName = SelectPrimitive.Value.displayName;
 var SelectTrigger = React9.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Trigger,
   {
@@ -723,8 +725,10 @@ var SelectContent = React9.forwardRef(({ className, children, position = "popper
     sticky,
     hideWhenDetached
   } = props;
-  return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx(
-    SelectPrimitive.Content,
+  const ForceMountPortal = SelectPrimitive.Portal;
+  const ForceMountContent = SelectPrimitive.Content;
+  return /* @__PURE__ */ jsx(ForceMountPortal, { forceMount: true, children: /* @__PURE__ */ jsx(
+    ForceMountContent,
     {
       ref,
       position,
@@ -742,12 +746,12 @@ var SelectContent = React9.forwardRef(({ className, children, position = "popper
       onEscapeKeyDown,
       onPointerDownOutside,
       asChild: true,
+      ...{ forceMount: true },
       children: /* @__PURE__ */ jsxs(
         motion.div,
         {
-          initial: { opacity: 0, scale: 0.96, y: -8 },
-          animate: { opacity: 1, scale: 1, y: 0 },
-          exit: { opacity: 0, scale: 0.96, y: -8 },
+          initial: false,
+          animate: open ? { opacity: 1, scale: 1, y: 0, pointerEvents: "auto" } : { opacity: 0, scale: 0.96, y: -8, pointerEvents: "none" },
           transition: {
             type: "spring",
             stiffness: 400,
@@ -792,7 +796,7 @@ var SelectContent = React9.forwardRef(({ className, children, position = "popper
         }
       )
     }
-  ) }) });
+  ) });
 });
 SelectContent.displayName = SelectPrimitive.Content.displayName;
 var SelectLabel = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
@@ -936,7 +940,7 @@ var useTableContext = () => {
   const context = React9.useContext(TableContext);
   return context;
 };
-var Table = React9.forwardRef(
+var TableInner = React9.forwardRef(
   ({
     className,
     selectable = false,
@@ -945,10 +949,18 @@ var Table = React9.forwardRef(
     onSelectionChange,
     getRowId,
     rows,
+    columns,
+    data,
+    visibleColumns,
+    showDividers = false,
+    highlightMode = "row",
+    children,
     ...props
   }, ref) => {
     const [internalSelectedRows, setInternalSelectedRows] = React9.useState(/* @__PURE__ */ new Set());
     const [registeredRowIds, setRegisteredRowIds] = React9.useState(/* @__PURE__ */ new Set());
+    const [hoveredCol, setHoveredCol] = React9.useState(null);
+    const [hoveredRowIndex, setHoveredRowIndex] = React9.useState(null);
     const isControlled = controlledSelectedRows !== void 0;
     const selectedRowsSet = isControlled ? new Set(controlledSelectedRows) : internalSelectedRows;
     const defaultGetRowId = React9.useCallback((row) => {
@@ -1065,17 +1077,82 @@ var Table = React9.forwardRef(
       registerRowId,
       unregisterRowId
     ]);
-    return /* @__PURE__ */ jsx(TableContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx(
-      "table",
+    return /* @__PURE__ */ jsx(TableContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+      "div",
       {
-        ref,
-        className: cn("w-full caption-bottom text-sm", className),
-        ...props
+        className: "relative w-full overflow-auto",
+        onMouseLeave: () => {
+          setHoveredCol(null);
+          setHoveredRowIndex(null);
+        },
+        children: /* @__PURE__ */ jsx(
+          "table",
+          {
+            ref,
+            className: cn("w-full caption-bottom text-sm", className),
+            ...props,
+            children: columns && data ? /* @__PURE__ */ jsx(Fragment, { children: (() => {
+              const visibleCols = columns.filter(
+                (col) => col.sticky || !visibleColumns || visibleColumns.includes(col.key)
+              );
+              return /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("thead", { className: "[&_tr]:border-b [&_tr]:border-gray-200 dark:[&_tr]:border-gray-700", children: /* @__PURE__ */ jsx("tr", { className: "border-b border-gray-200 transition-colors dark:border-neutral-700", children: visibleCols.map((col) => {
+                  const isColHovered = (highlightMode === "column" || highlightMode === "cross") && hoveredCol === col.key;
+                  return /* @__PURE__ */ jsx(
+                    "th",
+                    {
+                      style: col.minWidth ? { minWidth: col.minWidth } : void 0,
+                      onMouseEnter: () => {
+                        if (highlightMode === "column" || highlightMode === "cross") setHoveredCol(col.key);
+                      },
+                      className: cn(
+                        "h-12 px-4 text-left align-middle font-medium text-gray-500 dark:text-gray-400 transition-colors",
+                        col.sticky ? cn("sticky left-0 z-20", isColHovered ? "bg-gray-50 dark:bg-neutral-800/50" : "bg-white dark:bg-neutral-900") : isColHovered ? "bg-gray-50 dark:bg-neutral-800/50" : void 0,
+                        showDividers && "border-r border-gray-200 dark:border-neutral-700"
+                      ),
+                      children: col.label
+                    },
+                    col.key
+                  );
+                }) }) }),
+                /* @__PURE__ */ jsx("tbody", { className: "[&_tr:last-child]:border-0", children: data.map((row, rowIndex) => /* @__PURE__ */ jsx(
+                  "tr",
+                  {
+                    className: "border-b border-gray-200 transition-colors dark:border-neutral-700",
+                    children: visibleCols.map((col) => {
+                      const isRowHovered = (highlightMode === "row" || highlightMode === "cross") && rowIndex === hoveredRowIndex;
+                      const isColHovered = (highlightMode === "column" || highlightMode === "cross") && hoveredCol === col.key;
+                      const isHighlighted = isRowHovered || isColHovered;
+                      return /* @__PURE__ */ jsx(
+                        "td",
+                        {
+                          onMouseEnter: () => {
+                            if (highlightMode === "column" || highlightMode === "cross") setHoveredCol(col.key);
+                            if (highlightMode === "row" || highlightMode === "cross") setHoveredRowIndex(rowIndex);
+                          },
+                          className: cn(
+                            "p-4 align-middle transition-colors",
+                            col.sticky ? cn("sticky left-0 z-20", isHighlighted ? "bg-gray-50 dark:bg-neutral-800/50" : "bg-white dark:bg-neutral-900") : isHighlighted ? "bg-gray-50 dark:bg-neutral-800/50" : void 0,
+                            showDividers && "border-r border-gray-200 dark:border-neutral-700"
+                          ),
+                          children: col.cell(row)
+                        },
+                        col.key
+                      );
+                    })
+                  },
+                  finalGetRowId ? finalGetRowId(row) : rowIndex
+                )) })
+              ] });
+            })() }) : children
+          }
+        )
       }
-    ) }) });
+    ) });
   }
 );
-Table.displayName = "Table";
+TableInner.displayName = "Table";
+var Table = TableInner;
 var TableHeader = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "thead",
   {
@@ -1162,14 +1239,20 @@ var TableHead = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TableHead.displayName = "TableHead";
-var TableCell = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  "td",
-  {
-    ref,
-    className: cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className),
-    ...props
-  }
-));
+var TableCell = React9.forwardRef(
+  ({ className, variant = "default", ...props }, ref) => /* @__PURE__ */ jsx(
+    "td",
+    {
+      ref,
+      className: cn(
+        "align-middle [&:has([role=checkbox])]:pr-0",
+        variant === "embed" ? "p-1.5" : "p-4",
+        className
+      ),
+      ...props
+    }
+  )
+);
 TableCell.displayName = "TableCell";
 var TableCaption = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "caption",
@@ -1238,6 +1321,108 @@ var useTableSelection = () => {
   }
   return context;
 };
+function getDefaultColumns(columns, isMobile) {
+  return columns.filter((col) => {
+    if (col.sticky) return true;
+    if (isMobile) return col.mobileVisible === true;
+    return col.defaultVisible !== false;
+  }).map((col) => col.key);
+}
+function useColumnVisibility(columns, options = {}) {
+  const { storageKey } = options;
+  const [visibleColumns, setVisibleColumnsState] = useState(() => {
+    if (storageKey && typeof window !== "undefined") {
+      try {
+        const saved = localStorage.getItem(storageKey);
+        if (saved) {
+          const parsed = JSON.parse(saved);
+          const stickyKeys = columns.filter((c) => c.sticky).map((c) => c.key);
+          return Array.from(/* @__PURE__ */ new Set([...stickyKeys, ...parsed]));
+        }
+      } catch {
+      }
+    }
+    return getDefaultColumns(columns, false);
+  });
+  useEffect(() => {
+    if (storageKey) {
+      try {
+        const saved = localStorage.getItem(storageKey);
+        if (saved) return;
+      } catch {
+      }
+    }
+    const isMobile = window.innerWidth < 768;
+    if (isMobile) {
+      setVisibleColumnsState(getDefaultColumns(columns, true));
+    }
+  }, []);
+  const setVisibleColumns = useCallback((cols) => {
+    const stickyKeys = columns.filter((c) => c.sticky).map((c) => c.key);
+    const merged = Array.from(/* @__PURE__ */ new Set([...stickyKeys, ...cols]));
+    setVisibleColumnsState(merged);
+    if (storageKey) {
+      try {
+        localStorage.setItem(storageKey, JSON.stringify(merged));
+      } catch {
+      }
+    }
+  }, [columns, storageKey]);
+  return { visibleColumns, setVisibleColumns };
+}
+function ColumnPicker({
+  columns,
+  visibleColumns,
+  onVisibleColumnsChange,
+  triggerLabel = "Edit Fields"
+}) {
+  const handleToggle = React9.useCallback((key, checked) => {
+    if (checked) {
+      if (!visibleColumns.includes(key)) {
+        onVisibleColumnsChange([...visibleColumns, key]);
+      }
+    } else {
+      onVisibleColumnsChange(visibleColumns.filter((k) => k !== key));
+    }
+  }, [visibleColumns, onVisibleColumnsChange]);
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", children: [
+      /* @__PURE__ */ jsx(SlidersHorizontal, { className: "h-4 w-4", "aria-hidden": "true" }),
+      triggerLabel
+    ] }) }),
+    /* @__PURE__ */ jsxs(PopoverContent, { align: "end", className: "w-56 p-2", children: [
+      /* @__PURE__ */ jsx("p", { className: "px-2 py-1.5 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide", children: "Columns" }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-1 mt-1", children: columns.map((col) => {
+        const isSticky = !!col.sticky;
+        const isChecked = isSticky || visibleColumns.includes(col.key);
+        return /* @__PURE__ */ jsxs(
+          "label",
+          {
+            className: cn(
+              "flex items-center gap-2.5 rounded-hz-md px-2 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-neutral-800",
+              isSticky && "opacity-50 cursor-not-allowed"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  "aria-label": col.label,
+                  checked: isChecked,
+                  disabled: isSticky,
+                  onCheckedChange: (checked) => {
+                    if (!isSticky) handleToggle(col.key, !!checked);
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "text-gray-700 dark:text-gray-300", children: col.label })
+            ]
+          },
+          col.key
+        );
+      }) })
+    ] })
+  ] });
+}
 var TabsContext = React9.createContext(null);
 var useTabsContext = () => {
   const context = React9.useContext(TabsContext);
@@ -1688,6 +1873,6 @@ var Switch = React9.forwardRef(({ className, size, label, labelPosition = "right
 });
 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, 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-E7Q6YGBZ.mjs.map
-//# sourceMappingURL=chunk-E7Q6YGBZ.mjs.map
+export { Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, ColumnPicker, 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 };
+//# sourceMappingURL=chunk-6YUIM6WB.mjs.map
+//# sourceMappingURL=chunk-6YUIM6WB.mjs.map