@pos-360/horizon 0.13.0 → 0.15.0

package/dist/{chunk-7LWVFFKM.js → chunk-AJP6WOSY.js}

@@ -683,7 +683,8 @@ var Select = ({
   ) });
 };
 var SelectGroup = SelectPrimitive__namespace.Group;
-var SelectValue = SelectPrimitive__namespace.Value;
+var SelectValue = React9__namespace.forwardRef(({ children, placeholder, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Value, { ref, placeholder, ...props, children }));
+SelectValue.displayName = SelectPrimitive__namespace.Value.displayName;
 var SelectTrigger = React9__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   SelectPrimitive__namespace.Trigger,
   {
@@ -754,8 +755,10 @@ var SelectContent = React9__namespace.forwardRef(({ className, children, positio
     sticky,
     hideWhenDetached
   } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: open && /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    SelectPrimitive__namespace.Content,
+  const ForceMountPortal = SelectPrimitive__namespace.Portal;
+  const ForceMountContent = SelectPrimitive__namespace.Content;
+  return /* @__PURE__ */ jsxRuntime.jsx(ForceMountPortal, { forceMount: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+    ForceMountContent,
     {
       ref,
       position,
@@ -773,12 +776,12 @@ var SelectContent = React9__namespace.forwardRef(({ className, children, positio
       onEscapeKeyDown,
       onPointerDownOutside,
       asChild: true,
+      ...{ forceMount: true },
       children: /* @__PURE__ */ jsxRuntime.jsxs(
         framerMotion.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,
@@ -823,7 +826,7 @@ var SelectContent = React9__namespace.forwardRef(({ className, children, positio
         }
       )
     }
-  ) }) });
+  ) });
 });
 SelectContent.displayName = SelectPrimitive__namespace.Content.displayName;
 var SelectLabel = React9__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -967,7 +970,7 @@ var useTableContext = () => {
   const context = React9__namespace.useContext(TableContext);
   return context;
 };
-var Table = React9__namespace.forwardRef(
+var TableInner = React9__namespace.forwardRef(
   ({
     className,
     selectable = false,
@@ -976,10 +979,18 @@ var Table = React9__namespace.forwardRef(
     onSelectionChange,
     getRowId,
     rows,
+    columns,
+    data,
+    visibleColumns,
+    showDividers = false,
+    highlightMode = "row",
+    children,
     ...props
   }, ref) => {
     const [internalSelectedRows, setInternalSelectedRows] = React9__namespace.useState(/* @__PURE__ */ new Set());
     const [registeredRowIds, setRegisteredRowIds] = React9__namespace.useState(/* @__PURE__ */ new Set());
+    const [hoveredCol, setHoveredCol] = React9__namespace.useState(null);
+    const [hoveredRowIndex, setHoveredRowIndex] = React9__namespace.useState(null);
     const isControlled = controlledSelectedRows !== void 0;
     const selectedRowsSet = isControlled ? new Set(controlledSelectedRows) : internalSelectedRows;
     const defaultGetRowId = React9__namespace.useCallback((row) => {
@@ -1096,17 +1107,82 @@ var Table = React9__namespace.forwardRef(
       registerRowId,
       unregisterRowId
     ]);
-    return /* @__PURE__ */ jsxRuntime.jsx(TableContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
-      "table",
+    return /* @__PURE__ */ jsxRuntime.jsx(TableContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
       {
-        ref,
-        className: chunkYO72COII_js.cn("w-full caption-bottom text-sm", className),
-        ...props
+        className: "relative w-full overflow-auto",
+        onMouseLeave: () => {
+          setHoveredCol(null);
+          setHoveredRowIndex(null);
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "table",
+          {
+            ref,
+            className: chunkYO72COII_js.cn("w-full caption-bottom text-sm", className),
+            ...props,
+            children: columns && data ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: (() => {
+              const visibleCols = columns.filter(
+                (col) => col.sticky || !visibleColumns || visibleColumns.includes(col.key)
+              );
+              return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "[&_tr]:border-b [&_tr]:border-gray-200 dark:[&_tr]:border-gray-700", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                    "th",
+                    {
+                      style: col.minWidth ? { minWidth: col.minWidth } : void 0,
+                      onMouseEnter: () => {
+                        if (highlightMode === "column" || highlightMode === "cross") setHoveredCol(col.key);
+                      },
+                      className: chunkYO72COII_js.cn(
+                        "h-12 px-4 text-left align-middle font-medium text-gray-500 dark:text-gray-400 transition-colors",
+                        col.sticky ? chunkYO72COII_js.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__ */ jsxRuntime.jsx("tbody", { className: "[&_tr:last-child]:border-0", children: data.map((row, rowIndex) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                        "td",
+                        {
+                          onMouseEnter: () => {
+                            if (highlightMode === "column" || highlightMode === "cross") setHoveredCol(col.key);
+                            if (highlightMode === "row" || highlightMode === "cross") setHoveredRowIndex(rowIndex);
+                          },
+                          className: chunkYO72COII_js.cn(
+                            "p-4 align-middle transition-colors",
+                            col.sticky ? chunkYO72COII_js.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__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "thead",
   {
@@ -1193,14 +1269,20 @@ var TableHead = React9__namespace.forwardRef(({ className, ...props }, ref) => /
   }
 ));
 TableHead.displayName = "TableHead";
-var TableCell = React9__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  "td",
-  {
-    ref,
-    className: chunkYO72COII_js.cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className),
-    ...props
-  }
-));
+var TableCell = React9__namespace.forwardRef(
+  ({ className, variant = "default", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "td",
+    {
+      ref,
+      className: chunkYO72COII_js.cn(
+        "align-middle [&:has([role=checkbox])]:pr-0",
+        variant === "embed" ? "p-1.5" : "p-4",
+        className
+      ),
+      ...props
+    }
+  )
+);
 TableCell.displayName = "TableCell";
 var TableCaption = React9__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "caption",
@@ -1269,6 +1351,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] = React9.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);
+  });
+  React9.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 = React9.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__namespace.useCallback((key, checked) => {
+    if (checked) {
+      if (!visibleColumns.includes(key)) {
+        onVisibleColumnsChange([...visibleColumns, key]);
+      }
+    } else {
+      onVisibleColumnsChange(visibleColumns.filter((k) => k !== key));
+    }
+  }, [visibleColumns, onVisibleColumnsChange]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "outline", size: "sm", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SlidersHorizontal, { className: "h-4 w-4", "aria-hidden": "true" }),
+      triggerLabel
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(PopoverContent, { align: "end", className: "w-56 p-2", children: [
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+          "label",
+          {
+            className: chunkYO72COII_js.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__ */ jsxRuntime.jsx(
+                Checkbox,
+                {
+                  "aria-label": col.label,
+                  checked: isChecked,
+                  disabled: isSticky,
+                  onCheckedChange: (checked) => {
+                    if (!isSticky) handleToggle(col.key, !!checked);
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-700 dark:text-gray-300", children: col.label })
+            ]
+          },
+          col.key
+        );
+      }) })
+    ] })
+  ] });
+}
 var TabsContext = React9__namespace.createContext(null);
 var useTabsContext = () => {
   const context = React9__namespace.useContext(TabsContext);
@@ -1727,6 +1911,7 @@ exports.CardFooter = CardFooter;
 exports.CardHeader = CardHeader;
 exports.CardTitle = CardTitle;
 exports.Checkbox = Checkbox;
+exports.ColumnPicker = ColumnPicker;
 exports.Dialog = Dialog;
 exports.DialogClose = DialogClose;
 exports.DialogContent = DialogContent;
@@ -1812,8 +1997,9 @@ exports.switchThumbVariants = switchThumbVariants;
 exports.switchTrackVariants = switchTrackVariants;
 exports.toggleGroupVariants = toggleGroupVariants;
 exports.toggleItemVariants = toggleItemVariants;
+exports.useColumnVisibility = useColumnVisibility;
 exports.useFormContext = useFormContext;
 exports.useFormFieldContext = useFormFieldContext;
 exports.useTableSelection = useTableSelection;
-//# sourceMappingURL=chunk-7LWVFFKM.js.map
-//# sourceMappingURL=chunk-7LWVFFKM.js.map
+//# sourceMappingURL=chunk-AJP6WOSY.js.map
+//# sourceMappingURL=chunk-AJP6WOSY.js.map