@cytario/design 10.0.0 → 10.1.0

package/dist/index.js

@@ -184,6 +184,7 @@ import {
   FolderPlus,
   FolderTree,
   Fullscreen,
+  Funnel,
   Grid2x2,
   Grid3x3,
   Hand,
@@ -345,6 +346,7 @@ var iconRegistry = {
   FolderPlus,
   FolderTree,
   Fullscreen,
+  Funnel,
   Github: GithubIcon,
   Grid2x2,
   Grid3x3,
@@ -1624,6 +1626,8 @@ function TableBodyRow({
   rowIndex,
   columns,
   enableRowSelection,
+  showIndex,
+  anchorDataColumnId,
   className
 }) {
   const handleKeyDown = useCallback3((event) => {
@@ -1656,10 +1660,11 @@ function TableBodyRow({
       children: row.getVisibleCells().map((cell) => {
         const isIndexColumn = cell.column.id === "index";
         const columnConfig = columns.find((col) => col.id === cell.column.id);
+        const isFirstDataCell = cell.column.id === anchorDataColumnId;
         const isRight = columnConfig?.align === "right";
         const alignClass = isRight ? "text-right" : columnConfig?.align === "center" ? "text-center" : "text-left";
         const cxCell = twMerge11(
-          "px-4 py-2",
+          "relative px-4 py-2",
           isIndexColumn ? "text-right" : alignClass,
           columnConfig?.monospace && "font-mono font-light",
           (isRight || isIndexColumn) && "tabular-nums",
@@ -1674,10 +1679,19 @@ function TableBodyRow({
         const useRawString = columnConfig?.ellipsis === "middle" && typeof rawValue === "string";
         const content = isIndexColumn ? rowIndex + 1 : useRawString ? rawValue : flexRender(cell.column.columnDef.cell, cell.getContext());
         const copyValue = columnConfig?.copyable && typeof rawValue === "string" ? rawValue : void 0;
-        return isIndexColumn ? /* @__PURE__ */ jsx20("th", { className: "p-2", style, children: /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-1 text-sm text-muted-foreground tabular-nums justify-between", children: [
+        return isIndexColumn ? /* @__PURE__ */ jsx20("th", { className: "relative p-2", style, children: /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-1 text-sm text-muted-foreground tabular-nums justify-between", children: [
           enableRowSelection && /* @__PURE__ */ jsx20(Checkbox, { isSelected: row.getIsSelected(), onChange: () => row.toggleSelected() }),
           /* @__PURE__ */ jsx20("span", { children: rowIndex + 1 })
-        ] }) }, cell.id) : /* @__PURE__ */ jsx20("td", { className: cxCell, style, children: /* @__PURE__ */ jsx20(TruncatedText, { ellipsis: columnConfig?.ellipsis, copyValue, children: content }) }, cell.id);
+        ] }) }, cell.id) : /* @__PURE__ */ jsxs11("td", { className: cxCell, style, children: [
+          !isFirstDataCell && /* @__PURE__ */ jsx20(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "pointer-events-none absolute inset-y-[20%] left-0 w-px bg-border"
+            }
+          ),
+          /* @__PURE__ */ jsx20(TruncatedText, { ellipsis: columnConfig?.ellipsis, copyValue, children: content })
+        ] }, cell.id);
       })
     }
   );
@@ -1685,7 +1699,7 @@ function TableBodyRow({
 
 // src/components/Table/TableHeaderRow.tsx
 import { flexRender as flexRender2 } from "@tanstack/react-table";
-import { twMerge as twMerge16 } from "tailwind-merge";
+import { twMerge as twMerge15 } from "tailwind-merge";
 
 // src/components/Badge/Badge.tsx
 import { twMerge as twMerge13 } from "tailwind-merge";
@@ -1743,12 +1757,65 @@ function Badge({
   );
 }
 
+// src/components/Popover/Popover.tsx
+import {
+  DialogTrigger,
+  Popover as AriaPopover,
+  Button as AriaButton3
+} from "react-aria-components";
+import { twMerge as twMerge14 } from "tailwind-merge";
+import { jsx as jsx23 } from "react/jsx-runtime";
+function Popover2({ children, isOpen, onOpenChange }) {
+  return /* @__PURE__ */ jsx23(DialogTrigger, { isOpen, onOpenChange, children });
+}
+function PopoverTrigger({
+  children,
+  className,
+  "aria-label": ariaLabel
+}) {
+  const cx = `
+    inline-flex items-center bg-transparent border-none p-0 outline-none cursor-pointer
+    focus-visible:ring-2 focus-visible:ring-ring focus-visible:rounded-sm
+  `;
+  return /* @__PURE__ */ jsx23(AriaButton3, { "aria-label": ariaLabel, className: twMerge14(cx, className), children });
+}
+function PopoverContent({
+  placement = "bottom",
+  offset: offsetPx = 8,
+  className,
+  children,
+  ...rest
+}) {
+  const cx = `
+    z-50
+    bg-background
+    border border-border
+    rounded-md shadow-lg
+    entering:animate-in entering:fade-in entering:duration-300
+    exiting:animate-out exiting:fade-out exiting:duration-300
+    entering:placement-top:slide-in-from-bottom-1
+    entering:placement-bottom:slide-in-from-top-1
+    entering:placement-left:slide-in-from-right-1
+    entering:placement-right:slide-in-from-left-1
+  `;
+  return /* @__PURE__ */ jsx23(
+    AriaPopover,
+    {
+      ...rest,
+      placement,
+      offset: offsetPx,
+      className: twMerge14(cx, className),
+      children
+    }
+  );
+}
+
 // src/components/Table/ColumnFilterInput.tsx
-import { useMemo } from "react";
-import { jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
+import { useMemo, useState as useState6 } from "react";
+import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
 var ALL_KEY = "__all__";
 var ALL_OPTION = { id: ALL_KEY, name: "All" };
-var AllPill = () => /* @__PURE__ */ jsx23(Badge, { color: "slate", children: "All" });
+var AllPill = () => /* @__PURE__ */ jsx24(Badge, { color: "slate", children: "All" });
 function ColumnFilterInput({
   column,
   filterType,
@@ -1757,6 +1824,7 @@ function ColumnFilterInput({
   filterRender
 }) {
   const filterValue = column.getFilterValue() ?? "";
+  const [isOpen, setIsOpen] = useState6(false);
   const selectItems = useMemo(() => {
     if (filterType !== "select") return [];
     if (filterOptions) {
@@ -1778,40 +1846,62 @@ function ColumnFilterInput({
     if (!filterRender) return void 0;
     const render = filterRender;
     function FilterOption(item) {
-      return item.id === ALL_KEY ? /* @__PURE__ */ jsx23(AllPill, {}) : render({ label: item.name, value: item.id });
+      return item.id === ALL_KEY ? /* @__PURE__ */ jsx24(AllPill, {}) : render({ label: item.name, value: item.id });
     }
     return FilterOption;
   }, [filterRender]);
-  return /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-1 font-normal", children: [
-    filterType === "select" ? /* @__PURE__ */ jsx23(
-      Select,
-      {
-        size: "sm",
-        className: "w-full",
-        items: selectItems,
-        value: selectedKey,
-        onChange: (key) => setFilter(String(key)),
-        "aria-label": `Filter by ${column.columnDef.header}`,
-        renderItem
-      }
-    ) : /* @__PURE__ */ jsx23(
-      Input,
+  return /* @__PURE__ */ jsxs13(Popover2, { isOpen, onOpenChange: setIsOpen, children: [
+    /* @__PURE__ */ jsx24(PopoverTrigger, { className: "group", "aria-label": `Filter by ${column.columnDef.header}`, children: /* @__PURE__ */ jsxs13(
+      "span",
       {
-        value: filterValue,
-        onChange: setFilter,
-        placeholder: filterPlaceholder ?? `Filter ${column.columnDef.header}...`,
-        "aria-label": `Filter by ${column.columnDef.header}`,
-        size: "sm"
+        "aria-hidden": "true",
+        className: "relative inline-flex size-7 items-center justify-center rounded-md text-muted-foreground transition-colors group-hover:text-foreground group-focus-visible:text-foreground",
+        children: [
+          /* @__PURE__ */ jsx24(Icon, { icon: "Funnel", size: "sm" }),
+          filterValue && /* @__PURE__ */ jsx24("span", { className: "pointer-events-none absolute right-1 top-1 size-1.5 rounded-full bg-primary" })
+        ]
       }
-    ),
-    filterValue && /* @__PURE__ */ jsx23(IconButton, { icon: "X", size: "sm", variant: "ghost", onPress: clearFilter, label: "Clear filter" })
+    ) }),
+    /* @__PURE__ */ jsx24(PopoverContent, { placement: "bottom start", offset: 4, className: "w-56 p-3", children: /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-2 font-normal", children: [
+      filterType === "select" ? /* @__PURE__ */ jsx24(
+        Select,
+        {
+          size: "sm",
+          className: "w-full",
+          items: selectItems,
+          value: selectedKey,
+          onChange: (key) => setFilter(String(key)),
+          "aria-label": `Filter by ${column.columnDef.header}`,
+          renderItem
+        }
+      ) : /* @__PURE__ */ jsx24(
+        Input,
+        {
+          value: filterValue,
+          onChange: setFilter,
+          placeholder: filterPlaceholder ?? `Filter ${column.columnDef.header}...`,
+          "aria-label": `Filter by ${column.columnDef.header}`,
+          size: "sm"
+        }
+      ),
+      filterValue && /* @__PURE__ */ jsx24(
+        IconButton,
+        {
+          icon: "X",
+          size: "sm",
+          variant: "ghost",
+          onPress: clearFilter,
+          label: "Clear filter"
+        }
+      )
+    ] }) })
   ] });
 }
 
 // src/components/Table/ColumnResizeHandle.tsx
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var ColumnResizeHandle = ({ header }) => {
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     "button",
     {
       type: "button",
@@ -1825,13 +1915,13 @@ var ColumnResizeHandle = ({ header }) => {
         transition-colors duration-200
         bg-transparent hover:bg-accent active:bg-secondary
       `,
-      children: /* @__PURE__ */ jsx24("div", { className: "w-px h-full bg-border" })
+      children: /* @__PURE__ */ jsx25("div", { className: "w-px h-full bg-border" })
     }
   );
 };
 
 // src/components/Table/ColumnSortButton.tsx
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 function getStyle(sortDirection) {
   switch (sortDirection) {
     case "desc":
@@ -1844,17 +1934,114 @@ function getStyle(sortDirection) {
 var ColumnSortButton = ({ header }) => {
   const sortDirection = header.column.getIsSorted();
   const cx = getStyle(sortDirection);
-  return sortDirection === "desc" ? /* @__PURE__ */ jsx25(Icon, { icon: "ChevronUp", size: "xs", className: cx }) : /* @__PURE__ */ jsx25(Icon, { icon: "ChevronDown", size: "xs", className: cx });
+  return sortDirection === "desc" ? /* @__PURE__ */ jsx26(Icon, { icon: "ArrowDown", size: "xs", className: cx }) : /* @__PURE__ */ jsx26(Icon, { icon: "ArrowUp", size: "xs", className: cx });
 };
 
+// src/components/Table/TableHeaderRow.tsx
+import { jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
+function TableHeaderRow({
+  headerGroup,
+  columns,
+  enableRowSelection,
+  showFilters
+}) {
+  return /* @__PURE__ */ jsx27("tr", { className: "w-full block", children: headerGroup.headers.map((header) => {
+    const columnConfig = columns.find((col) => col.id === header.id);
+    const isIndexColumn = header.id === "index";
+    const isSorted = header.column.getIsSorted();
+    const baseClass = "relative pl-4 pr-4 group/header text-sm align-top";
+    const indexClass = "text-right tabular-nums text-center p-1 px-2";
+    const alignClasses2 = {
+      left: "text-left",
+      right: "text-right",
+      center: "text-center"
+    };
+    const alignClass = alignClasses2[columnConfig?.align ?? "left"];
+    const cxTh = twMerge15(baseClass, isIndexColumn ? indexClass : alignClass);
+    const style = {
+      width: header.getSize(),
+      minWidth: header.getSize(),
+      maxWidth: header.getSize()
+    };
+    const isRight = columnConfig?.align === "right";
+    const tableHeadCx = `
+          flex items-center justify-between gap-1 h-8 text-left
+          text-sm font-medium text-foreground
+        `;
+    const tableHeadToggleCx = `
+          cursor-pointer
+          hover:text-muted-foreground
+          focus-visible:outline-none
+          focus-visible:ring-2
+          focus-visible:ring-ring
+          focus-visible:ring-offset-1
+          rounded-sm
+        `;
+    return /* @__PURE__ */ jsxs14(
+      "th",
+      {
+        className: cxTh,
+        style,
+        "aria-sort": isSorted === "asc" ? "ascending" : isSorted === "desc" ? "descending" : void 0,
+        children: [
+          isIndexColumn ? enableRowSelection && /* @__PURE__ */ jsx27(
+            Checkbox,
+            {
+              isSelected: header.getContext().table.getIsAllRowsSelected(),
+              isIndeterminate: header.getContext().table.getIsSomeRowsSelected() && !header.getContext().table.getIsAllRowsSelected(),
+              onChange: () => header.getContext().table.toggleAllRowsSelected()
+            }
+          ) : /* @__PURE__ */ jsx27("div", { className: "flex flex-col gap-1 pb-2", children: /* @__PURE__ */ jsxs14("div", { className: "flex items-center justify-between gap-1", children: [
+            header.column.getCanSort() ? (
+              // Sortable Header
+              /* @__PURE__ */ jsxs14(
+                "button",
+                {
+                  type: "button",
+                  className: twMerge15(
+                    tableHeadCx,
+                    tableHeadToggleCx,
+                    isRight && "flex-row-reverse",
+                    isSorted && "text-foreground"
+                  ),
+                  onClick: header.column.getToggleSortingHandler() ?? void 0,
+                  children: [
+                    /* @__PURE__ */ jsx27("div", { className: "min-w-0", children: /* @__PURE__ */ jsx27(TruncatedText, { children: flexRender2(header.column.columnDef.header, header.getContext()) }) }),
+                    /* @__PURE__ */ jsx27(ColumnSortButton, { header })
+                  ]
+                }
+              )
+            ) : (
+              // Non-Sortable Header
+              /* @__PURE__ */ jsx27("div", { className: tableHeadCx, children: /* @__PURE__ */ jsx27("div", { className: "min-w-0", children: /* @__PURE__ */ jsx27(TruncatedText, { children: flexRender2(header.column.columnDef.header, header.getContext()) }) }) })
+            ),
+            showFilters && header.column.getCanFilter() && columnConfig?.enableColumnFilter && /* @__PURE__ */ jsx27(
+              ColumnFilterInput,
+              {
+                column: header.column,
+                filterType: columnConfig.filterType ?? "text",
+                filterPlaceholder: columnConfig.filterPlaceholder,
+                filterOptions: columnConfig.filterOptions,
+                filterRender: columnConfig.filterRender
+              }
+            )
+          ] }) }),
+          !isIndexColumn && header.column.getCanResize() && /* @__PURE__ */ jsx27(ColumnResizeHandle, { header })
+        ]
+      },
+      header.id
+    );
+  }) }, headerGroup.id);
+}
+
 // src/components/Menu/Menu.tsx
 import {
   MenuTrigger,
   Menu as AriaMenu,
   MenuItem as AriaMenuItem,
-  Popover as Popover2
+  Popover as Popover3
 } from "react-aria-components";
-import { twMerge as twMerge14 } from "tailwind-merge";
+import { twMerge as twMerge16 } from "tailwind-merge";
 
 // src/components/Menu/menuStyles.ts
 var popoverStyles = `
@@ -1866,7 +2053,7 @@ var popoverStyles = `
 `;
 
 // src/components/Menu/Menu.tsx
-import { jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
 function Menu2({
   items,
   content,
@@ -1879,9 +2066,9 @@ function Menu2({
   className
 }) {
   const selectionProps = selectionMode && selectionMode !== "none" ? { selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange } : {};
-  return /* @__PURE__ */ jsxs14(MenuTrigger, { children: [
+  return /* @__PURE__ */ jsxs15(MenuTrigger, { children: [
     children,
-    /* @__PURE__ */ jsx26(Popover2, { className: twMerge14(popoverStyles, className), children: items ? /* @__PURE__ */ jsx26(
+    /* @__PURE__ */ jsx28(Popover3, { className: twMerge16(popoverStyles, className), children: items ? /* @__PURE__ */ jsx28(
       AriaMenu,
       {
         items,
@@ -1892,7 +2079,7 @@ function Menu2({
         },
         ...selectionProps,
         className: "outline-none",
-        children: (item) => /* @__PURE__ */ jsxs14(
+        children: (item) => /* @__PURE__ */ jsxs15(
           AriaMenuItem,
           {
             id: item.id,
@@ -1908,14 +2095,14 @@ function Menu2({
               item.isDanger ? "text-destructive" : "text-foreground"
             ].filter(Boolean).join(" "),
             children: [
-              item.icon && /* @__PURE__ */ jsx26(Icon, { icon: item.icon, size: "sm" }),
-              /* @__PURE__ */ jsx26("span", { className: "flex-1", children: item.label }),
-              item.endContent && /* @__PURE__ */ jsx26("span", { className: "ml-auto flex items-center", children: item.endContent })
+              item.icon && /* @__PURE__ */ jsx28(Icon, { icon: item.icon, size: "sm" }),
+              /* @__PURE__ */ jsx28("span", { className: "flex-1", children: item.label }),
+              item.endContent && /* @__PURE__ */ jsx28("span", { className: "ml-auto flex items-center", children: item.endContent })
             ]
           }
         )
       }
-    ) : /* @__PURE__ */ jsx26(
+    ) : /* @__PURE__ */ jsx28(
       AriaMenu,
       {
         onAction: (key) => onAction?.(key),
@@ -1933,15 +2120,15 @@ import {
   useEffect as useEffect2,
   useId as useId2,
   useRef as useRef4,
-  useState as useState6
+  useState as useState7
 } from "react";
 import {
   Menu as AriaMenu2,
   MenuTrigger as MenuTrigger2,
-  Popover as Popover3
+  Popover as Popover4
 } from "react-aria-components";
-import { twMerge as twMerge15 } from "tailwind-merge";
-import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
+import { twMerge as twMerge17 } from "tailwind-merge";
+import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
 function useContextMenu({
   content,
   label,
@@ -1949,7 +2136,7 @@ function useContextMenu({
   className
 }) {
   const popoverId = useId2();
-  const [anchor, setAnchor] = useState6(null);
+  const [anchor, setAnchor] = useState7(null);
   const anchorRef = useRef4(null);
   const popoverRef = useRef4(null);
   const isOpen = anchor !== null;
@@ -1985,7 +2172,7 @@ function useContextMenu({
       document.removeEventListener("keydown", onKeyDown, true);
     };
   }, [isOpen, close]);
-  const menu = /* @__PURE__ */ jsxs15(
+  const menu = /* @__PURE__ */ jsxs16(
     MenuTrigger2,
     {
       isOpen,
@@ -1993,7 +2180,7 @@ function useContextMenu({
         if (!open) close();
       },
       children: [
-        /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsx29(
           "span",
           {
             ref: anchorRef,
@@ -2003,15 +2190,15 @@ function useContextMenu({
             style: { left: anchor?.x ?? 0, top: anchor?.y ?? 0 }
           }
         ),
-        /* @__PURE__ */ jsx27(
-          Popover3,
+        /* @__PURE__ */ jsx29(
+          Popover4,
           {
             isNonModal: true,
             triggerRef: anchorRef,
             placement: "bottom start",
             ref: popoverRef,
-            className: twMerge15(popoverStyles, className),
-            children: /* @__PURE__ */ jsx27(
+            className: twMerge17(popoverStyles, className),
+            children: /* @__PURE__ */ jsx29(
               AriaMenu2,
               {
                 id: popoverId,
@@ -2049,7 +2236,7 @@ function useContextMenu({
 
 // src/components/Menu/MenuItem.tsx
 import { MenuItem as AriaMenuItem2 } from "react-aria-components";
-import { jsx as jsx28, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs17 } from "react/jsx-runtime";
 function MenuItem({
   id,
   children,
@@ -2063,7 +2250,7 @@ function MenuItem({
   textValue,
   className
 }) {
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs17(
     AriaMenuItem2,
     {
       id,
@@ -2082,9 +2269,9 @@ function MenuItem({
         className
       ].filter(Boolean).join(" "),
       children: [
-        icon && /* @__PURE__ */ jsx28(Icon, { icon, size: "sm" }),
-        /* @__PURE__ */ jsx28("span", { className: "flex-1", children }),
-        endContent && /* @__PURE__ */ jsx28("span", { className: "ml-auto flex items-center", children: endContent })
+        icon && /* @__PURE__ */ jsx30(Icon, { icon, size: "sm" }),
+        /* @__PURE__ */ jsx30("span", { className: "flex-1", children }),
+        endContent && /* @__PURE__ */ jsx30("span", { className: "ml-auto flex items-center", children: endContent })
       ]
     }
   );
@@ -2093,7 +2280,7 @@ function MenuItem({
 // src/components/Menu/MenuCheckboxItem.tsx
 import { MenuItem as AriaMenuItem3 } from "react-aria-components";
 import { Check as Check4 } from "lucide-react";
-import { Fragment as Fragment3, jsx as jsx29, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx31, jsxs as jsxs18 } from "react/jsx-runtime";
 function MenuCheckboxItem({
   id,
   children,
@@ -2101,7 +2288,7 @@ function MenuCheckboxItem({
   isDisabled,
   className
 }) {
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx31(
     AriaMenuItem3,
     {
       id,
@@ -2117,9 +2304,9 @@ function MenuCheckboxItem({
         isSelected ? "font-medium" : "",
         className
       ].filter(Boolean).join(" "),
-      children: ({ isSelected }) => /* @__PURE__ */ jsxs17(Fragment3, { children: [
-        /* @__PURE__ */ jsx29("span", { className: "flex items-center justify-center w-4 h-4 shrink-0", children: isSelected && /* @__PURE__ */ jsx29(Check4, { size: 14, className: "text-primary", "aria-hidden": "true" }) }),
-        /* @__PURE__ */ jsx29("span", { className: "flex-1", children })
+      children: ({ isSelected }) => /* @__PURE__ */ jsxs18(Fragment3, { children: [
+        /* @__PURE__ */ jsx31("span", { className: "flex items-center justify-center w-4 h-4 shrink-0", children: isSelected && /* @__PURE__ */ jsx31(Check4, { size: 14, className: "text-primary", "aria-hidden": "true" }) }),
+        /* @__PURE__ */ jsx31("span", { className: "flex-1", children })
       ] })
     }
   );
@@ -2130,15 +2317,15 @@ import {
   MenuSection as AriaMenuSection,
   Header
 } from "react-aria-components";
-import { jsx as jsx30, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs19 } from "react/jsx-runtime";
 function MenuSection({
   header,
   children,
   "aria-label": ariaLabel,
   className
 }) {
-  return /* @__PURE__ */ jsxs18(AriaMenuSection, { className, "aria-label": ariaLabel, children: [
-    header && /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsxs19(AriaMenuSection, { className, "aria-label": ariaLabel, children: [
+    header && /* @__PURE__ */ jsx32(
       Header,
       {
         className: [
@@ -2157,16 +2344,16 @@ function MenuSection({
 
 // src/components/Menu/MenuHeader.tsx
 import { Header as Header2 } from "react-aria-components";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 function MenuHeader({ children, className }) {
-  return /* @__PURE__ */ jsx31(Header2, { className, children });
+  return /* @__PURE__ */ jsx33(Header2, { className, children });
 }
 
 // src/components/Menu/MenuSeparator.tsx
 import { Separator } from "react-aria-components";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 function MenuSeparator({ className }) {
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx34(
     Separator,
     {
       className: [
@@ -2178,7 +2365,7 @@ function MenuSeparator({ className }) {
 }
 
 // src/components/Table/TableMenu.tsx
-import { Fragment as Fragment4, jsx as jsx33, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx35, jsxs as jsxs20 } from "react/jsx-runtime";
 function TableMenu({
   toggleableColumns,
   columnVisibility,
@@ -2199,148 +2386,22 @@ function TableMenu({
       }
     }
   }
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx35(
     Menu2,
     {
       selectionMode: "multiple",
       selectedKeys,
       onSelectionChange: handleSelectionChange,
-      content: /* @__PURE__ */ jsxs19(Fragment4, { children: [
-        toggleableColumns.map((col) => /* @__PURE__ */ jsx33(MenuCheckboxItem, { id: col.id, children: col.header }, col.id)),
-        /* @__PURE__ */ jsx33(MenuSeparator, {}),
-        /* @__PURE__ */ jsx33(MenuItem, { id: "reset-all", onAction: () => store.getState().reset(), children: "Reset all" })
+      content: /* @__PURE__ */ jsxs20(Fragment4, { children: [
+        toggleableColumns.map((col) => /* @__PURE__ */ jsx35(MenuCheckboxItem, { id: col.id, children: col.header }, col.id)),
+        /* @__PURE__ */ jsx35(MenuSeparator, {}),
+        /* @__PURE__ */ jsx35(MenuItem, { id: "reset-all", onAction: () => store.getState().reset(), children: "Reset all" })
       ] }),
-      children: /* @__PURE__ */ jsx33(IconButton, { icon: "Columns3", variant: "ghost", size: "sm", label: "Column settings" })
+      children: /* @__PURE__ */ jsx35(IconButton, { icon: "Columns3", variant: "ghost", size: "sm", label: "Column settings" })
     }
   );
 }
 
-// src/components/Table/TableHeaderRow.tsx
-import { jsx as jsx34, jsxs as jsxs20 } from "react/jsx-runtime";
-function TableHeaderRow({
-  headerGroup,
-  columns,
-  tableId,
-  toggleableColumns,
-  columnVisibility,
-  toggleColumn,
-  enableRowSelection,
-  hasFilters,
-  onClearAllFilters,
-  showFilters
-}) {
-  return /* @__PURE__ */ jsx34("tr", { className: "w-full block", children: headerGroup.headers.map((header) => {
-    const columnConfig = columns.find((col) => col.id === header.id);
-    const isIndexColumn = header.id === "index";
-    const isSorted = header.column.getIsSorted();
-    const baseClass = "relative pl-4 pr-4 group/header text-sm align-top";
-    const indexClass = "text-right tabular-nums text-center p-1 px-2";
-    const alignClasses2 = {
-      left: "text-left",
-      right: "text-right",
-      center: "text-center"
-    };
-    const alignClass = alignClasses2[columnConfig?.align ?? "left"];
-    const cxTh = twMerge16(baseClass, isIndexColumn ? indexClass : alignClass);
-    const style = {
-      width: header.getSize(),
-      minWidth: header.getSize(),
-      maxWidth: header.getSize()
-    };
-    const isRight = columnConfig?.align === "right";
-    const tableHeadCx = `
-          flex items-center justify-between gap-1 h-8 text-left
-          text-sm font-medium text-foreground
-        `;
-    const tableHeadToggleCx = `
-          cursor-pointer
-          hover:text-muted-foreground
-          focus-visible:outline-none
-          focus-visible:ring-2
-          focus-visible:ring-ring
-          focus-visible:ring-offset-1
-          rounded-sm
-        `;
-    return /* @__PURE__ */ jsxs20(
-      "th",
-      {
-        className: cxTh,
-        style,
-        "aria-sort": isSorted === "asc" ? "ascending" : isSorted === "desc" ? "descending" : void 0,
-        children: [
-          isIndexColumn ? /* @__PURE__ */ jsxs20("div", { className: "flex flex-col gap-2", children: [
-            /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-1", children: [
-              enableRowSelection && /* @__PURE__ */ jsx34(
-                Checkbox,
-                {
-                  isSelected: header.getContext().table.getIsAllRowsSelected(),
-                  isIndeterminate: header.getContext().table.getIsSomeRowsSelected() && !header.getContext().table.getIsAllRowsSelected(),
-                  onChange: () => header.getContext().table.toggleAllRowsSelected()
-                }
-              ),
-              /* @__PURE__ */ jsx34(
-                TableMenu,
-                {
-                  toggleableColumns,
-                  columnVisibility,
-                  toggleColumn,
-                  tableId
-                }
-              )
-            ] }),
-            hasFilters && /* @__PURE__ */ jsx34(
-              IconButton,
-              {
-                icon: "FilterX",
-                size: "sm",
-                variant: "secondary",
-                onPress: onClearAllFilters,
-                label: "Clear all filters"
-              }
-            )
-          ] }) : /* @__PURE__ */ jsxs20("div", { className: "flex flex-col gap-2 pb-2", children: [
-            header.column.getCanSort() ? (
-              // Sortable Header
-              /* @__PURE__ */ jsxs20(
-                "button",
-                {
-                  type: "button",
-                  className: twMerge16(
-                    tableHeadCx,
-                    tableHeadToggleCx,
-                    isRight && "flex-row-reverse",
-                    isSorted && "text-foreground"
-                  ),
-                  onClick: header.column.getToggleSortingHandler() ?? void 0,
-                  children: [
-                    /* @__PURE__ */ jsx34("div", { className: "min-w-0", children: /* @__PURE__ */ jsx34(TruncatedText, { children: flexRender2(header.column.columnDef.header, header.getContext()) }) }),
-                    /* @__PURE__ */ jsx34(ColumnSortButton, { header })
-                  ]
-                }
-              )
-            ) : (
-              // Non-Sortable Header
-              /* @__PURE__ */ jsx34("div", { className: tableHeadCx, children: /* @__PURE__ */ jsx34("div", { className: "min-w-0", children: /* @__PURE__ */ jsx34(TruncatedText, { children: flexRender2(header.column.columnDef.header, header.getContext()) }) }) })
-            ),
-            showFilters && header.column.getCanFilter() && columnConfig?.enableColumnFilter && /* @__PURE__ */ jsx34(
-              ColumnFilterInput,
-              {
-                column: header.column,
-                filterType: columnConfig.filterType ?? "text",
-                filterPlaceholder: columnConfig.filterPlaceholder,
-                filterOptions: columnConfig.filterOptions,
-                filterRender: columnConfig.filterRender
-              }
-            )
-          ] }),
-          !isIndexColumn && header.column.getCanResize() && /* @__PURE__ */ jsx34(ColumnResizeHandle, { header })
-        ]
-      },
-      header.id
-    );
-  }) }, headerGroup.id);
-}
-
 // src/components/Table/useColumnVisibility.ts
 import { useCallback as useCallback5, useMemo as useMemo2 } from "react";
 import { useStore as useStore2 } from "zustand";
@@ -2450,7 +2511,7 @@ function useTableSorting(tableId, defaultSorting = []) {
 }
 
 // src/components/Table/Table.tsx
-import { Fragment as Fragment5, jsx as jsx35, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx36, jsxs as jsxs21 } from "react/jsx-runtime";
 function booleanSortingFn(rowA, rowB, columnId) {
   const a = rowA.getValue(columnId) ? 1 : 0;
   const b = rowB.getValue(columnId) ? 1 : 0;
@@ -2467,7 +2528,8 @@ function Table2({
   onRowSelectionChange,
   getRowId,
   showFilters = true,
-  defaultSorting
+  defaultSorting,
+  showIndex = true
 }) {
   const { columnSizing, setColumnSizing } = useColumnWidths(columns, tableId);
   const anchorColumnId = columns.find((c) => c.anchor)?.id ?? columns[0]?.id;
@@ -2510,8 +2572,8 @@ function Table2({
         maxSize: colConfig.maxSize ?? Number.MAX_SAFE_INTEGER
       };
     });
-    return [indexColumn, ...dataColumns];
-  }, [columns, cellRenderers, indexColumnSize]);
+    return showIndex ? [indexColumn, ...dataColumns] : dataColumns;
+  }, [columns, cellRenderers, indexColumnSize, showIndex]);
   const table = useReactTable({
     data,
     columns: columnDefs,
@@ -2565,40 +2627,58 @@ function Table2({
   const filteredCount = table.getRowModel().rows.length;
   const totalCount = data.length;
   const isFiltered = filteredCount !== totalCount;
+  const firstVisibleColumnId = table.getVisibleLeafColumns().find((c) => c.id !== "index")?.id;
   return /* @__PURE__ */ jsxs21(Fragment5, { children: [
-    /* @__PURE__ */ jsx35("div", { className: "sr-only", "aria-live": "polite", "aria-atomic": "true", children: isFiltered ? `Showing ${filteredCount} of ${totalCount} rows` : "" }),
-    /* @__PURE__ */ jsx35(
+    /* @__PURE__ */ jsx36("div", { className: "sr-only", "aria-live": "polite", "aria-atomic": "true", children: isFiltered ? `Showing ${filteredCount} of ${totalCount} rows` : "" }),
+    (toggleableColumns.length > 0 || columnFilters.length > 0) && /* @__PURE__ */ jsxs21("div", { className: "flex items-center justify-end gap-1 pb-1", children: [
+      columnFilters.length > 0 && /* @__PURE__ */ jsx36(
+        IconButton,
+        {
+          icon: "FilterX",
+          size: "sm",
+          variant: "ghost",
+          onPress: resetFilters,
+          label: "Clear all filters"
+        }
+      ),
+      toggleableColumns.length > 0 && /* @__PURE__ */ jsx36(
+        TableMenu,
+        {
+          toggleableColumns,
+          columnVisibility,
+          toggleColumn,
+          tableId
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx36(
       "div",
       {
         ref: headerRef,
-        className: "sticky top-0 z-10 bg-white border-b border-border overflow-x-auto",
+        className: "sticky top-0 z-10 bg-white border-b border-border pb-1.5 overflow-x-auto",
         style: { scrollbarWidth: "none" },
         onScroll: handleHeaderScroll,
-        children: /* @__PURE__ */ jsx35("table", { className: "min-w-full", "aria-label": ariaLabel, children: /* @__PURE__ */ jsx35("thead", { className: "w-full", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx35(
+        children: /* @__PURE__ */ jsx36("table", { className: "min-w-full", "aria-label": ariaLabel, children: /* @__PURE__ */ jsx36("thead", { className: "w-full", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx36(
           TableHeaderRow,
           {
             headerGroup,
             columns,
-            tableId,
-            toggleableColumns,
-            columnVisibility,
-            toggleColumn,
             enableRowSelection: !!enableRowSelection,
-            hasFilters: columnFilters.length > 0,
-            onClearAllFilters: resetFilters,
             showFilters
           },
           headerGroup.id
         )) }) })
       }
     ),
-    /* @__PURE__ */ jsx35("div", { ref: bodyRef, className: "overflow-x-auto", onScroll: handleBodyScroll, children: /* @__PURE__ */ jsx35("table", { className: "min-w-full", "aria-hidden": "true", children: /* @__PURE__ */ jsx35("tbody", { children: data.length === 0 ? /* @__PURE__ */ jsx35("tr", { children: /* @__PURE__ */ jsx35("td", { colSpan: columns.length + 1, children: /* @__PURE__ */ jsx35(EmptyState, { icon: "Inbox", title: "No results" }) }) }) : table.getRowModel().rows.length === 0 ? /* @__PURE__ */ jsx35("tr", { children: /* @__PURE__ */ jsx35("td", { colSpan: columns.length + 1, children: /* @__PURE__ */ jsx35(NoFilterResults, { tableId }) }) }) : table.getRowModel().rows.map((row, index) => /* @__PURE__ */ jsx35(
+    /* @__PURE__ */ jsx36("div", { ref: bodyRef, className: "overflow-x-auto", onScroll: handleBodyScroll, children: /* @__PURE__ */ jsx36("table", { className: "min-w-full", "aria-hidden": "true", children: /* @__PURE__ */ jsx36("tbody", { children: data.length === 0 ? /* @__PURE__ */ jsx36("tr", { children: /* @__PURE__ */ jsx36("td", { colSpan: columns.length + (showIndex ? 1 : 0), children: /* @__PURE__ */ jsx36(EmptyState, { icon: "Inbox", title: "No results" }) }) }) : table.getRowModel().rows.length === 0 ? /* @__PURE__ */ jsx36("tr", { children: /* @__PURE__ */ jsx36("td", { colSpan: columns.length + (showIndex ? 1 : 0), children: /* @__PURE__ */ jsx36(NoFilterResults, { tableId }) }) }) : table.getRowModel().rows.map((row, index) => /* @__PURE__ */ jsx36(
       TableBodyRow,
       {
         row,
         rowIndex: index,
         columns,
-        enableRowSelection: !!enableRowSelection
+        enableRowSelection: !!enableRowSelection,
+        showIndex,
+        anchorDataColumnId: firstVisibleColumnId
       },
       row.id
     )) }) }) })
@@ -2606,14 +2686,14 @@ function Table2({
 }
 
 // src/components/Table/SelectionFooter.tsx
-import { jsx as jsx36, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs22 } from "react/jsx-runtime";
 function SelectionFooter({
   selectedCount,
   totalCount,
   onReset,
   children
 }) {
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     "div",
     {
       role: "toolbar",
@@ -2622,15 +2702,15 @@ function SelectionFooter({
       children: /* @__PURE__ */ jsxs22("div", { className: "container mx-auto flex items-center justify-between", children: [
         /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-3", children: [
           /* @__PURE__ */ jsxs22("span", { className: "text-sm text-muted-foreground", children: [
-            /* @__PURE__ */ jsx36("span", { className: "font-medium text-foreground", children: selectedCount }),
+            /* @__PURE__ */ jsx37("span", { className: "font-medium text-foreground", children: selectedCount }),
             " of ",
             totalCount,
             " ",
             "selected"
           ] }),
-          /* @__PURE__ */ jsx36(Button, { variant: "secondary", size: "sm", onPress: onReset, children: "Clear selection" })
+          /* @__PURE__ */ jsx37(Button, { variant: "secondary", size: "sm", onPress: onReset, children: "Clear selection" })
         ] }),
-        children && /* @__PURE__ */ jsx36("div", { className: "flex items-center gap-2", children })
+        children && /* @__PURE__ */ jsx37("div", { className: "flex items-center gap-2", children })
       ] })
     }
   );
@@ -2644,7 +2724,7 @@ import {
   Heading as Heading3
 } from "react-aria-components";
 import { X as X2 } from "lucide-react";
-import { Fragment as Fragment6, jsx as jsx37, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx38, jsxs as jsxs23 } from "react/jsx-runtime";
 var sizeStyles4 = {
   sm: "max-w-md",
   md: "max-w-lg",
@@ -2660,7 +2740,7 @@ function Dialog({
   children,
   className
 }) {
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     ModalOverlay,
     {
       isOpen,
@@ -2672,7 +2752,7 @@ function Dialog({
         "entering:animate-in entering:fade-in",
         "exiting:animate-out exiting:fade-out"
       ].join(" "),
-      children: /* @__PURE__ */ jsx37(
+      children: /* @__PURE__ */ jsx38(
         Modal,
         {
           className: [
@@ -2683,9 +2763,9 @@ function Dialog({
             "exiting:animate-out exiting:zoom-out-95 exiting:fade-out",
             className
           ].filter(Boolean).join(" "),
-          children: /* @__PURE__ */ jsx37(AriaDialog, { className: "outline-none flex flex-col max-h-[85vh]", children: ({ close }) => /* @__PURE__ */ jsxs23(Fragment6, { children: [
+          children: /* @__PURE__ */ jsx38(AriaDialog, { className: "outline-none flex flex-col max-h-[85vh]", children: ({ close }) => /* @__PURE__ */ jsxs23(Fragment6, { children: [
             /* @__PURE__ */ jsxs23("div", { className: "flex items-center justify-between px-6 py-4 border-b border-border", children: [
-              /* @__PURE__ */ jsx37(
+              /* @__PURE__ */ jsx38(
                 Heading3,
                 {
                   slot: "title",
@@ -2693,7 +2773,7 @@ function Dialog({
                   children: title
                 }
               ),
-              /* @__PURE__ */ jsx37(
+              /* @__PURE__ */ jsx38(
                 "button",
                 {
                   type: "button",
@@ -2705,11 +2785,11 @@ function Dialog({
                     "transition-colors"
                   ].join(" "),
                   "aria-label": "Close",
-                  children: /* @__PURE__ */ jsx37(X2, { size: 20, "aria-hidden": "true" })
+                  children: /* @__PURE__ */ jsx38(X2, { size: 20, "aria-hidden": "true" })
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx37("div", { className: "px-6 py-4 overflow-y-auto", children })
+            /* @__PURE__ */ jsx38("div", { className: "px-6 py-4 overflow-y-auto", children })
           ] }) })
         }
       )
@@ -2718,7 +2798,7 @@ function Dialog({
 }
 
 // src/components/Dialog/DialogFooter.tsx
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 
 // src/components/Toast/Toast.tsx
 import {
@@ -2727,11 +2807,11 @@ import {
   useContext,
   useEffect as useEffect3,
   useRef as useRef6,
-  useState as useState7
+  useState as useState8
 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 import { CheckCircle as CheckCircle3, XCircle as XCircle2, Info as Info2, X as X3 } from "lucide-react";
-import { jsx as jsx39, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs24 } from "react/jsx-runtime";
 var ToastContext = createContext(null);
 var toastCounter = 0;
 var defaultDuration = {
@@ -2773,7 +2853,7 @@ function ToastItem({
   toast,
   onRemove
 }) {
-  const [isExiting, setIsExiting] = useState7(false);
+  const [isExiting, setIsExiting] = useState8(false);
   const timerRef = useRef6(null);
   const placement = useContext(PlacementContext);
   const config = variantConfig[toast.variant];
@@ -2802,16 +2882,16 @@ function ToastItem({
         config.containerClass
       ].join(" "),
       children: [
-        /* @__PURE__ */ jsx39(IconComponent, { size: 20, className: ["shrink-0 mt-0.5", config.iconClass].join(" "), "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx39("p", { className: "flex-1 text-sm font-medium", children: toast.message }),
-        /* @__PURE__ */ jsx39(
+        /* @__PURE__ */ jsx40(IconComponent, { size: 20, className: ["shrink-0 mt-0.5", config.iconClass].join(" "), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx40("p", { className: "flex-1 text-sm font-medium", children: toast.message }),
+        /* @__PURE__ */ jsx40(
           "button",
           {
             type: "button",
             onClick: dismiss,
             className: "shrink-0 rounded-sm p-0.5 opacity-70 hover:opacity-100 transition-opacity outline-none focus-visible:ring-2 focus-visible:ring-current",
             "aria-label": "Dismiss",
-            children: /* @__PURE__ */ jsx39(X3, { size: 16, "aria-hidden": "true" })
+            children: /* @__PURE__ */ jsx40(X3, { size: 16, "aria-hidden": "true" })
           }
         )
       ]
@@ -2831,7 +2911,7 @@ function ToastContainer({
 }) {
   if (toasts.length === 0) return null;
   return createPortal2(
-    /* @__PURE__ */ jsx39(PlacementContext.Provider, { value: placement, children: /* @__PURE__ */ jsx39("div", { className: containerPositionStyles[placement], children: toasts.map((toast) => /* @__PURE__ */ jsx39(ToastItem, { toast, onRemove: removeToast }, toast.id)) }) }),
+    /* @__PURE__ */ jsx40(PlacementContext.Provider, { value: placement, children: /* @__PURE__ */ jsx40("div", { className: containerPositionStyles[placement], children: toasts.map((toast) => /* @__PURE__ */ jsx40(ToastItem, { toast, onRemove: removeToast }, toast.id)) }) }),
     document.body
   );
 }
@@ -2850,7 +2930,7 @@ function createToastBridge() {
   };
 }
 function ToastProvider({ children, bridge, placement = "bottom-right" }) {
-  const [toasts, setToasts] = useState7([]);
+  const [toasts, setToasts] = useState8([]);
   const addToast = useCallback9((toast) => {
     const id = `toast-${++toastCounter}`;
     setToasts((prev) => [...prev, { ...toast, id }]);
@@ -2864,7 +2944,7 @@ function ToastProvider({ children, bridge, placement = "bottom-right" }) {
   }, [bridge, addToast]);
   return /* @__PURE__ */ jsxs24(ToastContext.Provider, { value: { toasts, addToast, removeToast }, children: [
     children,
-    /* @__PURE__ */ jsx39(ToastContainer, { toasts, removeToast, placement })
+    /* @__PURE__ */ jsx40(ToastContainer, { toasts, removeToast, placement })
   ] });
 }
 function useToast() {
@@ -2884,19 +2964,19 @@ import {
   SwitchField,
   SwitchButton
 } from "react-aria-components";
-import { twMerge as twMerge17 } from "tailwind-merge";
-import { Fragment as Fragment7, jsx as jsx40, jsxs as jsxs25 } from "react/jsx-runtime";
+import { twMerge as twMerge18 } from "tailwind-merge";
+import { Fragment as Fragment7, jsx as jsx41, jsxs as jsxs25 } from "react/jsx-runtime";
 function Switch({
   children,
   color = "var(--color-primary)",
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx40(SwitchField, { ...props, children: /* @__PURE__ */ jsx40(SwitchButton, { className: "relative cursor-pointer", children: ({ isSelected, isFocusVisible }) => /* @__PURE__ */ jsxs25(Fragment7, { children: [
-    /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx41(SwitchField, { ...props, children: /* @__PURE__ */ jsx41(SwitchButton, { className: "relative cursor-pointer flex items-center gap-2", children: ({ isSelected, isFocusVisible }) => /* @__PURE__ */ jsxs25(Fragment7, { children: [
+    /* @__PURE__ */ jsx41(
       "div",
       {
-        className: twMerge17(
+        className: twMerge18(
           `
                   flex items-center
                   border-2 border-border
@@ -2906,10 +2986,10 @@ function Switch({
           !isSelected && "bg-border"
         ),
         style: isSelected ? { backgroundColor: color } : void 0,
-        children: /* @__PURE__ */ jsx40(
+        children: /* @__PURE__ */ jsx41(
           "div",
           {
-            className: twMerge17(
+            className: twMerge18(
               `
                     absolute top-0 left-0 w-5 h-5
                     rounded-full
@@ -2923,7 +3003,7 @@ function Switch({
         )
       }
     ),
-    children && /* @__PURE__ */ jsx40("span", { children })
+    children && /* @__PURE__ */ jsx41("span", { className: "flex items-center", children })
   ] }) }) });
 }
 
@@ -2932,20 +3012,20 @@ import {
   RadioGroup as AriaRadioGroup,
   Radio as AriaRadio
 } from "react-aria-components";
-import { twMerge as twMerge18 } from "tailwind-merge";
-import { Fragment as Fragment8, jsx as jsx41, jsxs as jsxs26 } from "react/jsx-runtime";
+import { twMerge as twMerge19 } from "tailwind-merge";
+import { Fragment as Fragment8, jsx as jsx42, jsxs as jsxs26 } from "react/jsx-runtime";
 function RadioGroup({
   children,
   className,
   orientation = "vertical",
   ...props
 }) {
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     AriaRadioGroup,
     {
       ...props,
       orientation,
-      className: twMerge18(
+      className: twMerge19(
         "flex gap-2 disabled:opacity-50",
         orientation === "horizontal" ? "flex-row" : "flex-col",
         className
@@ -2955,7 +3035,7 @@ function RadioGroup({
   );
 }
 function Radio({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     AriaRadio,
     {
       ...props,
@@ -2965,7 +3045,7 @@ function Radio({ children, className, ...props }) {
         className
       ].filter(Boolean).join(" "),
       children: ({ isSelected }) => /* @__PURE__ */ jsxs26(Fragment8, { children: [
-        /* @__PURE__ */ jsx41(
+        /* @__PURE__ */ jsx42(
           "div",
           {
             className: [
@@ -2974,16 +3054,16 @@ function Radio({ children, className, ...props }) {
               "group-focus-visible:ring-2 group-focus-visible:ring-ring group-focus-visible:ring-offset-2",
               isSelected ? "border-primary" : "border-border group-hover:border-border"
             ].join(" "),
-            children: isSelected && /* @__PURE__ */ jsx41("div", { className: "w-2.5 h-2.5 rounded-full bg-primary" })
+            children: isSelected && /* @__PURE__ */ jsx42("div", { className: "w-2.5 h-2.5 rounded-full bg-primary" })
           }
         ),
-        children && /* @__PURE__ */ jsx41("span", { children })
+        children && /* @__PURE__ */ jsx42("span", { children })
       ] })
     }
   );
 }
 function RadioButton({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     AriaRadio,
     {
       ...props,
@@ -2992,7 +3072,7 @@ function RadioButton({ children, className, ...props }) {
         "disabled:opacity-50 disabled:cursor-default",
         className
       ].filter(Boolean).join(" "),
-      children: ({ isSelected }) => /* @__PURE__ */ jsx41(
+      children: ({ isSelected }) => /* @__PURE__ */ jsx42(
         "div",
         {
           className: [
@@ -3015,8 +3095,8 @@ import {
   SliderFill,
   SliderThumb
 } from "react-aria-components";
-import { twMerge as twMerge19 } from "tailwind-merge";
-import { Fragment as Fragment9, jsx as jsx42, jsxs as jsxs27 } from "react/jsx-runtime";
+import { twMerge as twMerge20 } from "tailwind-merge";
+import { Fragment as Fragment9, jsx as jsx43, jsxs as jsxs27 } from "react/jsx-runtime";
 function Slider({
   label,
   output,
@@ -3027,12 +3107,12 @@ function Slider({
   isDisabled,
   ...props
 }) {
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     AriaSlider,
     {
       ...props,
       isDisabled,
-      className: twMerge19(
+      className: twMerge20(
         // data-disabled lands on the root (tailwindcss-react-aria-components
         // maps the disabled: variant onto it).
         "w-full flex flex-col gap-2 disabled:opacity-50 disabled:cursor-default",
@@ -3040,15 +3120,15 @@ function Slider({
       ),
       children: ({ state }) => /* @__PURE__ */ jsxs27(Fragment9, { children: [
         /* @__PURE__ */ jsxs27("div", { className: "flex items-center justify-between", children: [
-          label && /* @__PURE__ */ jsx42(Label, { children: label }),
-          output && /* @__PURE__ */ jsx42("span", { className: "text-sm font-medium text-foreground tabular-nums", children: output(state.values[0]) })
+          label && /* @__PURE__ */ jsx43(Label, { children: label }),
+          output && /* @__PURE__ */ jsx43("span", { className: "text-sm font-medium text-foreground tabular-nums", children: output(state.values[0]) })
         ] }),
         /* @__PURE__ */ jsxs27(SliderTrack, { className: "flex h-6 w-full cursor-pointer items-center", children: [
-          /* @__PURE__ */ jsx42("div", { className: "relative h-1.5 w-full overflow-hidden rounded-full bg-border", children: /* @__PURE__ */ jsx42(SliderFill, { className: "h-full rounded-full bg-primary" }) }),
-          /* @__PURE__ */ jsx42(
+          /* @__PURE__ */ jsx43("div", { className: "relative h-1.5 w-full overflow-hidden rounded-full bg-border", children: /* @__PURE__ */ jsx43(SliderFill, { className: "h-full rounded-full bg-primary" }) }),
+          /* @__PURE__ */ jsx43(
             SliderThumb,
             {
-              className: twMerge19(
+              className: twMerge20(
                 "top-1/2 h-4 w-4 rounded-full bg-background",
                 "border-2 border-primary",
                 "shadow-sm",
@@ -3060,10 +3140,10 @@ function Slider({
             }
           )
         ] }),
-        (description || errorMessage) && /* @__PURE__ */ jsx42(
+        (description || errorMessage) && /* @__PURE__ */ jsx43(
           "p",
           {
-            className: twMerge19(
+            className: twMerge20(
               "text-xs text-muted-foreground",
               errorMessage && "text-destructive"
             ),
@@ -3077,7 +3157,7 @@ function Slider({
 }
 
 // src/components/Form/Fieldset/Fieldset.tsx
-import { jsx as jsx43, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs28 } from "react/jsx-runtime";
 function Fieldset({ legend, children, className }) {
   return /* @__PURE__ */ jsxs28(
     "fieldset",
@@ -3088,7 +3168,7 @@ function Fieldset({ legend, children, className }) {
         className
       ].filter(Boolean).join(" "),
       children: [
-        legend && /* @__PURE__ */ jsx43(
+        legend && /* @__PURE__ */ jsx44(
           "legend",
           {
             className: [
@@ -3110,7 +3190,7 @@ function Fieldset({ legend, children, className }) {
 import {
   Link as AriaLink3
 } from "react-aria-components";
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { jsx as jsx45 } from "react/jsx-runtime";
 var variantStyles2 = {
   default: [
     "text-teal-700 underline",
@@ -3126,7 +3206,7 @@ function Link({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx45(
     AriaLink3,
     {
       ...props,
@@ -3147,20 +3227,20 @@ import {
   Link as Link2
 } from "react-aria-components";
 import { ChevronRight as ChevronRight2 } from "lucide-react";
-import { Fragment as Fragment10, jsx as jsx45, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx46, jsxs as jsxs29 } from "react/jsx-runtime";
 function Breadcrumbs({ items, className }) {
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx46(
     "nav",
     {
       "aria-label": "Breadcrumb",
       className,
-      children: /* @__PURE__ */ jsx45(
+      children: /* @__PURE__ */ jsx46(
         AriaBreadcrumbs,
         {
           className: "flex items-center gap-1 text-sm min-w-0",
           children: items.map((item, index) => {
             const isLast = index === items.length - 1;
-            return /* @__PURE__ */ jsx45(
+            return /* @__PURE__ */ jsx46(
               AriaBreadcrumb,
               {
                 id: item.id,
@@ -3168,8 +3248,8 @@ function Breadcrumbs({ items, className }) {
                   "flex items-center gap-1",
                   isLast ? "min-w-0" : "shrink-0"
                 ].join(" "),
-                children: isLast ? /* @__PURE__ */ jsx45("span", { className: "font-medium text-foreground truncate", children: item.label }) : /* @__PURE__ */ jsxs29(Fragment10, { children: [
-                  /* @__PURE__ */ jsx45(
+                children: isLast ? /* @__PURE__ */ jsx46("span", { className: "font-medium text-foreground truncate", children: item.label }) : /* @__PURE__ */ jsxs29(Fragment10, { children: [
+                  /* @__PURE__ */ jsx46(
                     Link2,
                     {
                       href: item.href,
@@ -3177,7 +3257,7 @@ function Breadcrumbs({ items, className }) {
                       children: item.label
                     }
                   ),
-                  /* @__PURE__ */ jsx45(
+                  /* @__PURE__ */ jsx46(
                     ChevronRight2,
                     {
                       className: "shrink-0 text-slate-400",
@@ -3200,8 +3280,8 @@ function Breadcrumbs({ items, className }) {
 import {
   ToggleButton as AriaToggleButton2
 } from "react-aria-components";
-import { twMerge as twMerge20 } from "tailwind-merge";
-import { jsx as jsx46 } from "react/jsx-runtime";
+import { twMerge as twMerge21 } from "tailwind-merge";
+import { jsx as jsx47 } from "react/jsx-runtime";
 var squareSizeStyles2 = {
   xs: "h-6 w-6 text-xs",
   sm: "h-7 w-7 text-sm",
@@ -3246,11 +3326,11 @@ function ToggleButton({
   ...props
 }) {
   const styles = variantStyles3[variant];
-  return /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx47(
     AriaToggleButton2,
     {
       ...props,
-      className: ({ isSelected }) => twMerge20(
+      className: ({ isSelected }) => twMerge21(
         "inline-flex items-center justify-center gap-2 cursor-pointer",
         isSquare ? "rounded-none" : "rounded-md",
         "font-medium",
@@ -3266,55 +3346,6 @@ function ToggleButton({
   );
 }
 
-// src/components/Popover/Popover.tsx
-import {
-  DialogTrigger,
-  Popover as AriaPopover,
-  Button as AriaButton3
-} from "react-aria-components";
-import { twMerge as twMerge21 } from "tailwind-merge";
-import { jsx as jsx47 } from "react/jsx-runtime";
-function Popover4({ children, isOpen, onOpenChange }) {
-  return /* @__PURE__ */ jsx47(DialogTrigger, { isOpen, onOpenChange, children });
-}
-function PopoverTrigger({ children, className }) {
-  const cx = `
-    inline-flex items-center bg-transparent border-none p-0 outline-none cursor-pointer
-    focus-visible:ring-2 focus-visible:ring-ring focus-visible:rounded-sm
-  `;
-  return /* @__PURE__ */ jsx47(AriaButton3, { className: twMerge21(cx, className), children });
-}
-function PopoverContent({
-  placement = "bottom",
-  offset: offsetPx = 8,
-  className,
-  children,
-  ...rest
-}) {
-  const cx = `
-    z-50
-    bg-background
-    border border-border
-    rounded-md shadow-lg
-    entering:animate-in entering:fade-in entering:duration-300
-    exiting:animate-out exiting:fade-out exiting:duration-300
-    entering:placement-top:slide-in-from-bottom-1
-    entering:placement-bottom:slide-in-from-top-1
-    entering:placement-left:slide-in-from-right-1
-    entering:placement-right:slide-in-from-left-1
-  `;
-  return /* @__PURE__ */ jsx47(
-    AriaPopover,
-    {
-      ...rest,
-      placement,
-      offset: offsetPx,
-      className: twMerge21(cx, className),
-      children
-    }
-  );
-}
-
 // src/components/Tabs/Tabs.tsx
 import { createContext as createContext2, useContext as useContext2 } from "react";
 import { twMerge as twMerge22 } from "tailwind-merge";
@@ -3720,7 +3751,7 @@ function ProgressBar({
 }
 
 // src/components/Banner/Banner.tsx
-import { useState as useState8 } from "react";
+import { useState as useState9 } from "react";
 import {
   Info as Info3,
   AlertTriangle as AlertTriangle2,
@@ -3764,7 +3795,7 @@ function Banner({
   onDismiss,
   className
 }) {
-  const [dismissed, setDismissed] = useState8(false);
+  const [dismissed, setDismissed] = useState9(false);
   if (dismissed) return null;
   const config = variantConfig2[variant];
   const resolvedIcon = icon ?? config.icon;
@@ -4186,7 +4217,7 @@ export {
   MetricText,
   NoFilterResults,
   PathPill,
-  Popover4 as Popover,
+  Popover2 as Popover,
   PopoverContent,
   PopoverTrigger,
   ProgressBar,