@bubble-design-system/ui 1.0.0 → 1.1.0

package/dist/index.js

@@ -1,6 +1,6 @@
 "use client";
 import { clsx } from 'clsx';
-import { forwardRef, createContext, useMemo, useContext } from 'react';
+import { forwardRef, createContext, useMemo, useContext, useState, useEffect, useRef } from 'react';
 import { Button as Button$1 } from '@base-ui/react/button';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Input as Input$1 } from '@base-ui/react/input';
@@ -18,6 +18,7 @@ import { Tabs as Tabs$1 } from '@base-ui/react/tabs';
 import { Menu } from '@base-ui/react/menu';
 import { Toggle } from '@base-ui/react/toggle';
 import { ToggleGroup } from '@base-ui/react/toggle-group';
+import { Popover as Popover$1 } from '@base-ui/react/popover';
 
 // src/utils/cn.ts
 function cn(...inputs) {
@@ -194,15 +195,22 @@ var SelectValue = forwardRef(
 SelectValue.displayName = "Select.Value";
 var SelectContent = forwardRef(
   ({ className, sideOffset = 6, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(Select$1.Positioner, { sideOffset, className: "pds-select-positioner", children: /* @__PURE__ */ jsx(
-      Select$1.Popup,
+    return /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(
+      Select$1.Positioner,
       {
-        ref,
-        className: cn("pds-select-popup", className),
-        ...props,
-        children
+        sideOffset,
+        className: "pds-select-positioner",
+        children: /* @__PURE__ */ jsx(
+          Select$1.Popup,
+          {
+            ref,
+            className: cn("pds-select-popup", className),
+            ...props,
+            children
+          }
+        )
       }
-    ) }) });
+    ) });
   }
 );
 SelectContent.displayName = "Select.Content";
@@ -321,7 +329,12 @@ Divider.displayName = "Divider";
 var ModalContent = forwardRef(
   ({ className, backdropClassName, children, ...props }, ref) => {
     return /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
-      /* @__PURE__ */ jsx(Dialog.Backdrop, { className: cn("pds-modal-backdrop", backdropClassName) }),
+      /* @__PURE__ */ jsx(
+        Dialog.Backdrop,
+        {
+          className: cn("pds-modal-backdrop", backdropClassName)
+        }
+      ),
       /* @__PURE__ */ jsx(
         Dialog.Popup,
         {
@@ -348,18 +361,16 @@ var ModalTitle = forwardRef(
   }
 );
 ModalTitle.displayName = "Modal.Title";
-var ModalDescription = forwardRef(
-  ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      Dialog.Description,
-      {
-        ref,
-        className: cn("pds-modal-description", className),
-        ...props
-      }
-    );
-  }
-);
+var ModalDescription = forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    Dialog.Description,
+    {
+      ref,
+      className: cn("pds-modal-description", className),
+      ...props
+    }
+  );
+});
 ModalDescription.displayName = "Modal.Description";
 var Modal = {
   Root: Dialog.Root,
@@ -374,50 +385,33 @@ var ToastProvider = ({ children, ...props }) => {
   return /* @__PURE__ */ jsx(Toast$1.Provider, { ...props, children });
 };
 ToastProvider.displayName = "Toast.Provider";
-var ToastViewport = forwardRef(
-  ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      Toast$1.Viewport,
-      {
-        ref,
-        className: cn("pds-toast-viewport", className),
-        style: { ["--gap"]: "12px" },
-        ...props
-      }
-    );
-  }
-);
+var ToastViewport = forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    Toast$1.Viewport,
+    {
+      ref,
+      className: cn("pds-toast-viewport", className),
+      style: { ["--gap"]: "12px" },
+      ...props
+    }
+  );
+});
 ToastViewport.displayName = "Toast.Viewport";
 var Toaster = () => {
   const { toasts } = useToastManager();
-  return /* @__PURE__ */ jsx(ToastViewport, { children: toasts.map((toast) => /* @__PURE__ */ jsxs(
-    Toast$1.Root,
-    {
-      toast,
-      className: "pds-toast-item",
-      children: [
-        toast.title ? /* @__PURE__ */ jsx(Toast$1.Title, { className: "pds-toast-title" }) : null,
-        toast.description ? /* @__PURE__ */ jsx(Toast$1.Description, { className: "pds-toast-description" }) : null,
-        /* @__PURE__ */ jsx(
-          Toast$1.Close,
-          {
-            "aria-label": "Close",
-            className: "pds-toast-close",
-            children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
-              "path",
-              {
-                d: "M4 4l8 8M12 4l-8 8",
-                stroke: "currentColor",
-                strokeWidth: "1.5",
-                strokeLinecap: "round"
-              }
-            ) })
-          }
-        )
-      ]
-    },
-    toast.id
-  )) });
+  return /* @__PURE__ */ jsx(ToastViewport, { children: toasts.map((toast) => /* @__PURE__ */ jsxs(Toast$1.Root, { toast, className: "pds-toast-item", children: [
+    toast.title ? /* @__PURE__ */ jsx(Toast$1.Title, { className: "pds-toast-title" }) : null,
+    toast.description ? /* @__PURE__ */ jsx(Toast$1.Description, { className: "pds-toast-description" }) : null,
+    /* @__PURE__ */ jsx(Toast$1.Close, { "aria-label": "Close", className: "pds-toast-close", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M4 4l8 8M12 4l-8 8",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round"
+      }
+    ) }) })
+  ] }, toast.id)) });
 };
 Toaster.displayName = "Toaster";
 var Toast = {
@@ -426,7 +420,14 @@ var Toast = {
   Toaster
 };
 var TooltipContent = forwardRef(
-  ({ className, sideOffset = 6, side = "top", align = "center", children, ...props }, ref) => {
+  ({
+    className,
+    sideOffset = 6,
+    side = "top",
+    align = "center",
+    children,
+    ...props
+  }, ref) => {
     return /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsx(
       Tooltip$1.Positioner,
       {
@@ -518,21 +519,62 @@ var Tabs = Object.assign(TabsRoot, {
 var icons = {
   info: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
     /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "1.5" }),
-    /* @__PURE__ */ jsx("path", { d: "M8 7.5v4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M8 7.5v4",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round"
+      }
+    ),
     /* @__PURE__ */ jsx("circle", { cx: "8", cy: "5", r: "0.75", fill: "currentColor" })
   ] }),
   success: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
     /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "1.5" }),
-    /* @__PURE__ */ jsx("path", { d: "M5 8.5l2 2 4-4.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M5 8.5l2 2 4-4.5",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
   ] }),
   warning: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsx("path", { d: "M8 1.75L14.5 13.5h-13L8 1.75z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }),
-    /* @__PURE__ */ jsx("path", { d: "M8 6.5v3.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M8 1.75L14.5 13.5h-13L8 1.75z",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M8 6.5v3.5",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round"
+      }
+    ),
     /* @__PURE__ */ jsx("circle", { cx: "8", cy: "11.75", r: "0.75", fill: "currentColor" })
   ] }),
   danger: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
     /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "1.5" }),
-    /* @__PURE__ */ jsx("path", { d: "M5.5 5.5l5 5M10.5 5.5l-5 5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M5.5 5.5l5 5M10.5 5.5l-5 5",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round"
+      }
+    )
   ] })
 };
 var Alert = forwardRef(
@@ -557,27 +599,25 @@ var Alert = forwardRef(
   }
 );
 Alert.displayName = "Alert";
-var DropdownMenuContent = forwardRef(
-  ({ className, sideOffset = 6, align = "start", children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(
-      Menu.Positioner,
-      {
-        sideOffset,
-        align,
-        className: "pds-menu-positioner",
-        children: /* @__PURE__ */ jsx(
-          Menu.Popup,
-          {
-            ref,
-            className: cn("pds-menu-popup", className),
-            ...props,
-            children
-          }
-        )
-      }
-    ) });
-  }
-);
+var DropdownMenuContent = forwardRef(({ className, sideOffset = 6, align = "start", children, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(
+    Menu.Positioner,
+    {
+      sideOffset,
+      align,
+      className: "pds-menu-positioner",
+      children: /* @__PURE__ */ jsx(
+        Menu.Popup,
+        {
+          ref,
+          className: cn("pds-menu-popup", className),
+          ...props,
+          children
+        }
+      )
+    }
+  ) });
+});
 DropdownMenuContent.displayName = "DropdownMenu.Content";
 var DropdownMenuItem = forwardRef(
   ({ className, ...props }, ref) => {
@@ -592,48 +632,44 @@ var DropdownMenuItem = forwardRef(
   }
 );
 DropdownMenuItem.displayName = "DropdownMenu.Item";
-var DropdownMenuCheckboxItem = forwardRef(
-  ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs(
-      Menu.CheckboxItem,
-      {
-        ref,
-        className: cn("pds-menu-item", "pds-menu-item--indented", className),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, { className: "pds-menu-item__indicator", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
-            "path",
-            {
-              d: "M3.5 8.5l3 3 6-6.5",
-              stroke: "currentColor",
-              strokeWidth: "2",
-              strokeLinecap: "round",
-              strokeLinejoin: "round"
-            }
-          ) }) }),
-          children
-        ]
-      }
-    );
-  }
-);
+var DropdownMenuCheckboxItem = forwardRef(({ className, children, ...props }, ref) => {
+  return /* @__PURE__ */ jsxs(
+    Menu.CheckboxItem,
+    {
+      ref,
+      className: cn("pds-menu-item", "pds-menu-item--indented", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, { className: "pds-menu-item__indicator", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M3.5 8.5l3 3 6-6.5",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ) }) }),
+        children
+      ]
+    }
+  );
+});
 DropdownMenuCheckboxItem.displayName = "DropdownMenu.CheckboxItem";
-var DropdownMenuRadioItem = forwardRef(
-  ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs(
-      Menu.RadioItem,
-      {
-        ref,
-        className: cn("pds-menu-item", "pds-menu-item--indented", className),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx(Menu.RadioItemIndicator, { className: "pds-menu-item__indicator pds-menu-item__indicator--radio", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "8" }) }) }),
-          children
-        ]
-      }
-    );
-  }
-);
+var DropdownMenuRadioItem = forwardRef(({ className, children, ...props }, ref) => {
+  return /* @__PURE__ */ jsxs(
+    Menu.RadioItem,
+    {
+      ref,
+      className: cn("pds-menu-item", "pds-menu-item--indented", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Menu.RadioItemIndicator, { className: "pds-menu-item__indicator pds-menu-item__indicator--radio", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "8" }) }) }),
+        children
+      ]
+    }
+  );
+});
 DropdownMenuRadioItem.displayName = "DropdownMenu.RadioItem";
 var DropdownMenuLabel = forwardRef(
   ({ className, ...props }, ref) => {
@@ -648,18 +684,16 @@ var DropdownMenuLabel = forwardRef(
   }
 );
 DropdownMenuLabel.displayName = "DropdownMenu.Label";
-var DropdownMenuSeparator = forwardRef(
-  ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      Menu.Separator,
-      {
-        ref,
-        className: cn("pds-menu-separator", className),
-        ...props
-      }
-    );
-  }
-);
+var DropdownMenuSeparator = forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    Menu.Separator,
+    {
+      ref,
+      className: cn("pds-menu-separator", className),
+      ...props
+    }
+  );
+});
 DropdownMenuSeparator.displayName = "DropdownMenu.Separator";
 var DropdownMenu = {
   Root: Menu.Root,
@@ -701,25 +735,11 @@ var CardRoot = forwardRef(
 );
 CardRoot.displayName = "Card";
 var CardHeader = forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      className: cn("pds-card__header", className),
-      ...props
-    }
-  )
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("pds-card__header", className), ...props })
 );
 CardHeader.displayName = "Card.Header";
 var CardTitle = forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-    "h3",
-    {
-      ref,
-      className: cn("pds-card__title", className),
-      ...props
-    }
-  )
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("h3", { ref, className: cn("pds-card__title", className), ...props })
 );
 CardTitle.displayName = "Card.Title";
 var CardDescription = forwardRef(
@@ -734,36 +754,15 @@ var CardDescription = forwardRef(
 );
 CardDescription.displayName = "Card.Description";
 var CardAction = forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      className: cn("pds-card__action", className),
-      ...props
-    }
-  )
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("pds-card__action", className), ...props })
 );
 CardAction.displayName = "Card.Action";
 var CardBody = forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      className: cn("pds-card__body", className),
-      ...props
-    }
-  )
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("pds-card__body", className), ...props })
 );
 CardBody.displayName = "Card.Body";
 var CardFooter = forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      className: cn("pds-card__footer", className),
-      ...props
-    }
-  )
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("pds-card__footer", className), ...props })
 );
 CardFooter.displayName = "Card.Footer";
 var Card = Object.assign(CardRoot, {
@@ -942,7 +941,733 @@ GridCol.displayName = "Grid.Col";
 var Grid = Object.assign(GridRoot, {
   Col: GridCol
 });
+var PopoverContent = forwardRef(
+  ({
+    className,
+    side = "bottom",
+    align = "center",
+    sideOffset = 10,
+    showArrow = true,
+    children,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(
+      Popover$1.Positioner,
+      {
+        side,
+        align,
+        sideOffset,
+        className: "pds-popover-positioner",
+        children: /* @__PURE__ */ jsxs(
+          Popover$1.Popup,
+          {
+            ref,
+            className: cn("pds-popover-popup", className),
+            ...props,
+            children: [
+              showArrow && /* @__PURE__ */ jsx(Popover$1.Arrow, { className: "pds-popover-arrow" }),
+              children
+            ]
+          }
+        )
+      }
+    ) });
+  }
+);
+PopoverContent.displayName = "Popover.Content";
+var PopoverTitle = forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Popover$1.Title,
+      {
+        ref,
+        className: cn("pds-popover-title", className),
+        ...props
+      }
+    );
+  }
+);
+PopoverTitle.displayName = "Popover.Title";
+var PopoverDescription = forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    Popover$1.Description,
+    {
+      ref,
+      className: cn("pds-popover-description", className),
+      ...props
+    }
+  );
+});
+PopoverDescription.displayName = "Popover.Description";
+var PopoverHeader = forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("pds-popover__header", className),
+        ...props
+      }
+    );
+  }
+);
+PopoverHeader.displayName = "Popover.Header";
+var PopoverBody = forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("pds-popover__body", className),
+        ...props
+      }
+    );
+  }
+);
+PopoverBody.displayName = "Popover.Body";
+var PopoverFooter = forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("pds-popover__footer", className),
+        ...props
+      }
+    );
+  }
+);
+PopoverFooter.displayName = "Popover.Footer";
+var Popover = {
+  Root: Popover$1.Root,
+  Trigger: Popover$1.Trigger,
+  Content: PopoverContent,
+  Title: PopoverTitle,
+  Description: PopoverDescription,
+  Close: Popover$1.Close,
+  Header: PopoverHeader,
+  Body: PopoverBody,
+  Footer: PopoverFooter
+};
+function SearchIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 14 14",
+      fill: "none",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: "6.2",
+            cy: "6.2",
+            r: "4.3",
+            stroke: "currentColor",
+            strokeWidth: "1.4"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M9.5 9.5L13 13",
+            stroke: "currentColor",
+            strokeWidth: "1.4",
+            strokeLinecap: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+function ChevronLeftIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "12",
+      height: "12",
+      viewBox: "0 0 12 12",
+      fill: "none",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M7.5 2L4 6l3.5 4",
+          stroke: "currentColor",
+          strokeWidth: "1.6",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+function ChevronRightIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "12",
+      height: "12",
+      viewBox: "0 0 12 12",
+      fill: "none",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M4.5 2L8 6l-3.5 4",
+          stroke: "currentColor",
+          strokeWidth: "1.6",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+function SortIcon({ direction }) {
+  return /* @__PURE__ */ jsxs("span", { className: "pds-datatable__sort-icon", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("svg", { width: "7", height: "4", viewBox: "0 0 7 4", fill: "none", children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M0 4L3.5 0L7 4H0Z",
+        fill: direction === "asc" ? "var(--color-text-brand)" : "currentColor"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      "svg",
+      {
+        width: "7",
+        height: "4",
+        viewBox: "0 0 7 4",
+        fill: "none",
+        style: { opacity: direction === "desc" ? 1 : 0.3 },
+        children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M0 0L3.5 4L7 0H0Z",
+            fill: direction === "desc" ? "var(--color-text-brand)" : "currentColor"
+          }
+        )
+      }
+    )
+  ] });
+}
+function renderCell(value) {
+  if (value === null || value === void 0) return "\u2014";
+  if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+    return value;
+  }
+  return String(value);
+}
+function DataTable({
+  columns,
+  data,
+  selectable = true,
+  searchable = true,
+  pageSize = 10,
+  actions,
+  className
+}) {
+  const [query, setQuery] = useState("");
+  const [selected, setSelected] = useState(/* @__PURE__ */ new Set());
+  const [sort, setSort] = useState(
+    { key: null, dir: "asc" }
+  );
+  const [page, setPage] = useState(1);
+  const filtered = useMemo(() => {
+    let rows = data;
+    if (query.trim()) {
+      const q = query.toLowerCase();
+      rows = rows.filter(
+        (row) => columns.some((col) => {
+          const v = row[col.key];
+          return v != null && String(v).toLowerCase().includes(q);
+        })
+      );
+    }
+    if (sort.key) {
+      const key = sort.key;
+      rows = [...rows].sort((a, b) => {
+        const av = a[key] ?? "";
+        const bv = b[key] ?? "";
+        const cmp = String(av).localeCompare(String(bv), void 0, {
+          numeric: true
+        });
+        return sort.dir === "asc" ? cmp : -cmp;
+      });
+    }
+    return rows;
+  }, [data, query, sort, columns]);
+  const totalPages = Math.max(1, Math.ceil(filtered.length / pageSize));
+  const pageData = filtered.slice((page - 1) * pageSize, page * pageSize);
+  const allSelected = pageData.length > 0 && pageData.every((r) => selected.has(r.id));
+  const someSelected = pageData.some((r) => selected.has(r.id));
+  const toggleAll = () => {
+    const next = new Set(selected);
+    if (allSelected) {
+      pageData.forEach((r) => next.delete(r.id));
+    } else {
+      pageData.forEach((r) => next.add(r.id));
+    }
+    setSelected(next);
+  };
+  const toggleRow = (id) => {
+    const next = new Set(selected);
+    if (next.has(id)) next.delete(id);
+    else next.add(id);
+    setSelected(next);
+  };
+  const toggleSort = (key) => {
+    setSort(
+      (s) => s.key === key ? { key, dir: s.dir === "asc" ? "desc" : "asc" } : { key, dir: "asc" }
+    );
+    setPage(1);
+  };
+  const onSearch = (e) => {
+    setQuery(e.target.value);
+    setPage(1);
+  };
+  const startItem = filtered.length === 0 ? 0 : (page - 1) * pageSize + 1;
+  const endItem = Math.min(page * pageSize, filtered.length);
+  const pageNums = (() => {
+    if (totalPages <= 5) {
+      return Array.from({ length: totalPages }, (_, i) => i + 1);
+    }
+    if (page <= 3) return [1, 2, 3, 4, 5];
+    if (page >= totalPages - 2) {
+      return [
+        totalPages - 4,
+        totalPages - 3,
+        totalPages - 2,
+        totalPages - 1,
+        totalPages
+      ];
+    }
+    return [page - 2, page - 1, page, page + 1, page + 2];
+  })();
+  return /* @__PURE__ */ jsxs("div", { className: cn("pds-datatable", className), children: [
+    (searchable || actions) && /* @__PURE__ */ jsxs("div", { className: "pds-datatable__toolbar", children: [
+      searchable && /* @__PURE__ */ jsxs("div", { className: "pds-datatable__search", children: [
+        /* @__PURE__ */ jsx("span", { className: "pds-datatable__search-icon", children: /* @__PURE__ */ jsx(SearchIcon, {}) }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            className: "pds-datatable__search-input",
+            type: "search",
+            placeholder: "Search\u2026",
+            value: query,
+            onChange: onSearch,
+            "aria-label": "Search table"
+          }
+        )
+      ] }),
+      selected.size > 0 && /* @__PURE__ */ jsxs("span", { className: "pds-datatable__bulk-label", children: [
+        selected.size,
+        " selected"
+      ] }),
+      actions && /* @__PURE__ */ jsx("div", { className: "pds-datatable__toolbar-right", children: actions })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "pds-datatable__wrap", children: /* @__PURE__ */ jsxs(
+      "table",
+      {
+        className: cn(
+          "pds-datatable__table",
+          selectable && "pds-datatable__table--selectable"
+        ),
+        "aria-label": "Data table",
+        children: [
+          /* @__PURE__ */ jsx("thead", { className: "pds-datatable__thead", children: /* @__PURE__ */ jsxs("tr", { className: "pds-datatable__row", children: [
+            selectable && /* @__PURE__ */ jsx(
+              "th",
+              {
+                className: "pds-datatable__th pds-datatable__check-col",
+                "aria-label": "Select all",
+                children: /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    size: "sm",
+                    checked: allSelected,
+                    indeterminate: someSelected && !allSelected,
+                    onCheckedChange: toggleAll
+                  }
+                )
+              }
+            ),
+            columns.map((col) => {
+              const sortable = col.sortable !== false;
+              const isSorted = sort.key === col.key;
+              return /* @__PURE__ */ jsxs(
+                "th",
+                {
+                  className: cn(
+                    "pds-datatable__th",
+                    sortable && "pds-datatable__th--sort",
+                    isSorted && "pds-datatable__th--sorted"
+                  ),
+                  onClick: sortable ? () => toggleSort(col.key) : void 0,
+                  style: col.width ? { width: col.width } : void 0,
+                  "aria-sort": isSorted ? sort.dir === "asc" ? "ascending" : "descending" : void 0,
+                  children: [
+                    col.label,
+                    sortable && /* @__PURE__ */ jsx(SortIcon, { direction: isSorted ? sort.dir : null })
+                  ]
+                },
+                col.key
+              );
+            })
+          ] }) }),
+          /* @__PURE__ */ jsx("tbody", { className: "pds-datatable__tbody", children: pageData.length === 0 ? /* @__PURE__ */ jsx("tr", { className: "pds-datatable__row", children: /* @__PURE__ */ jsx(
+            "td",
+            {
+              className: "pds-datatable__td pds-datatable__empty",
+              colSpan: columns.length + (selectable ? 1 : 0),
+              children: "No results found"
+            }
+          ) }) : pageData.map((row) => {
+            const isSel = selected.has(row.id);
+            return /* @__PURE__ */ jsxs(
+              "tr",
+              {
+                className: cn(
+                  "pds-datatable__row",
+                  isSel && "pds-datatable__row--selected"
+                ),
+                "aria-selected": isSel,
+                onClick: selectable ? () => toggleRow(row.id) : void 0,
+                children: [
+                  selectable && /* @__PURE__ */ jsx(
+                    "td",
+                    {
+                      className: "pds-datatable__td pds-datatable__check-col",
+                      onClick: (e) => e.stopPropagation(),
+                      children: /* @__PURE__ */ jsx(
+                        Checkbox,
+                        {
+                          size: "sm",
+                          checked: isSel,
+                          onCheckedChange: () => toggleRow(row.id)
+                        }
+                      )
+                    }
+                  ),
+                  columns.map((col) => /* @__PURE__ */ jsx(
+                    "td",
+                    {
+                      className: cn(
+                        "pds-datatable__td",
+                        col.muted && "pds-datatable__td--muted",
+                        col.mono && "pds-datatable__td--mono"
+                      ),
+                      children: col.render ? col.render(
+                        row[col.key],
+                        row
+                      ) : renderCell(
+                        row[col.key]
+                      )
+                    },
+                    col.key
+                  ))
+                ]
+              },
+              row.id
+            );
+          }) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "pds-datatable__footer", children: [
+      /* @__PURE__ */ jsx("span", { className: "pds-datatable__page-info", children: filtered.length === 0 ? "No results" : `${startItem}\u2013${endItem} of ${filtered.length}` }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "pds-datatable__pagination",
+          role: "navigation",
+          "aria-label": "Pagination",
+          children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "pds-datatable__page-btn",
+                onClick: () => setPage((p) => Math.max(1, p - 1)),
+                disabled: page <= 1,
+                "aria-label": "Previous page",
+                children: /* @__PURE__ */ jsx(ChevronLeftIcon, {})
+              }
+            ),
+            pageNums.map((p) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: cn(
+                  "pds-datatable__page-btn",
+                  p === page && "pds-datatable__page-btn--active"
+                ),
+                onClick: () => setPage(p),
+                "aria-current": p === page ? "page" : void 0,
+                children: p
+              },
+              p
+            )),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "pds-datatable__page-btn",
+                onClick: () => setPage((p) => Math.min(totalPages, p + 1)),
+                disabled: page >= totalPages,
+                "aria-label": "Next page",
+                children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+              }
+            )
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+function SearchIcon2({ size = 16 }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 16 16",
+      fill: "none",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "7", cy: "7", r: "4.5", stroke: "currentColor", strokeWidth: "1.5" }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M10.5 10.5L14 14",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+function XSmallIcon({ size = 10 }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 10 10",
+      fill: "none",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M2 2l6 6M8 2L2 8",
+          stroke: "currentColor",
+          strokeWidth: "1.6",
+          strokeLinecap: "round"
+        }
+      )
+    }
+  );
+}
+function useCommandPalette() {
+  const [open, setOpen] = useState(false);
+  useEffect(() => {
+    const handler = (e) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+        e.preventDefault();
+        setOpen((o) => !o);
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, []);
+  return { open, setOpen };
+}
+function CommandPalette({
+  open,
+  onOpenChange,
+  groups = [],
+  placeholder = "Search commands\u2026",
+  onSelect,
+  className
+}) {
+  const [query, setQuery] = useState("");
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [prevOpen, setPrevOpen] = useState(open);
+  const [prevQuery, setPrevQuery] = useState(query);
+  const inputRef = useRef(null);
+  if (open !== prevOpen) {
+    setPrevOpen(open);
+    if (open) {
+      setQuery("");
+      setActiveIndex(0);
+      setPrevQuery("");
+    }
+  }
+  if (query !== prevQuery) {
+    setPrevQuery(query);
+    setActiveIndex(0);
+  }
+  const filteredGroups = useMemo(() => {
+    if (!query.trim()) return groups;
+    const q = query.toLowerCase();
+    return groups.map((group) => ({
+      ...group,
+      items: group.items.filter(
+        (item) => item.label.toLowerCase().includes(q) || item.description && item.description.toLowerCase().includes(q) || item.keywords && item.keywords.some((k) => k.toLowerCase().includes(q))
+      )
+    })).filter((group) => group.items.length > 0);
+  }, [groups, query]);
+  const allItems = useMemo(
+    () => filteredGroups.flatMap((group) => group.items),
+    [filteredGroups]
+  );
+  const selectItem = (item) => {
+    item.onSelect?.();
+    onSelect?.(item);
+    onOpenChange(false);
+  };
+  const onKeyDown = (e) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setActiveIndex((i) => Math.min(allItems.length - 1, i + 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActiveIndex((i) => Math.max(0, i - 1));
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      const item = allItems[activeIndex];
+      if (item) selectItem(item);
+    }
+  };
+  let flatIndex = 0;
+  return /* @__PURE__ */ jsx(Dialog.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
+    /* @__PURE__ */ jsx(Dialog.Backdrop, { className: "pds-command-palette-backdrop" }),
+    /* @__PURE__ */ jsxs(
+      Dialog.Popup,
+      {
+        className: cn("pds-command-palette", className),
+        "aria-label": "Command palette",
+        initialFocus: inputRef,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "pds-command-palette__search", children: [
+            /* @__PURE__ */ jsx("span", { className: "pds-command-palette__search-icon", children: /* @__PURE__ */ jsx(SearchIcon2, { size: 16 }) }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: inputRef,
+                className: "pds-command-palette__input",
+                type: "text",
+                placeholder,
+                value: query,
+                onChange: (e) => setQuery(e.target.value),
+                onKeyDown,
+                role: "combobox",
+                "aria-autocomplete": "list",
+                "aria-expanded": "true"
+              }
+            ),
+            query && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "pds-command-palette__clear",
+                onClick: () => setQuery(""),
+                "aria-label": "Clear",
+                children: /* @__PURE__ */ jsx(XSmallIcon, {})
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "pds-command-palette__list", role: "listbox", children: allItems.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "pds-command-palette__empty", children: [
+            /* @__PURE__ */ jsx(SearchIcon2, { size: 20 }),
+            'No results for "',
+            query,
+            '"'
+          ] }) : filteredGroups.map((group, gi) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "pds-command-palette__group",
+              role: "group",
+              "aria-label": group.label,
+              children: [
+                group.label && /* @__PURE__ */ jsx("div", { className: "pds-command-palette__group-label", children: group.label }),
+                group.items.map((item) => {
+                  const thisIndex = flatIndex++;
+                  const isActive = thisIndex === activeIndex;
+                  return /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      role: "option",
+                      "aria-selected": isActive,
+                      className: cn(
+                        "pds-command-palette__item",
+                        isActive && "pds-command-palette__item--active"
+                      ),
+                      onMouseEnter: () => setActiveIndex(thisIndex),
+                      onClick: () => selectItem(item),
+                      children: [
+                        item.icon && /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: "pds-command-palette__item-icon",
+                            "aria-hidden": "true",
+                            children: item.icon
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs("span", { className: "pds-command-palette__item-body", children: [
+                          /* @__PURE__ */ jsx("span", { className: "pds-command-palette__item-label", children: item.label }),
+                          item.description && /* @__PURE__ */ jsx("span", { className: "pds-command-palette__item-desc", children: item.description })
+                        ] }),
+                        item.shortcut && /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: "pds-command-palette__shortcut",
+                            "aria-label": `Shortcut: ${item.shortcut}`,
+                            children: item.shortcut.split("+").map((key, ki) => /* @__PURE__ */ jsx(
+                              "kbd",
+                              {
+                                className: "pds-command-palette__kbd",
+                                children: key
+                              },
+                              ki
+                            ))
+                          }
+                        )
+                      ]
+                    },
+                    item.id
+                  );
+                })
+              ]
+            },
+            group.label ?? gi
+          )) }),
+          /* @__PURE__ */ jsxs("div", { className: "pds-command-palette__footer", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsxs("span", { className: "pds-command-palette__hint", children: [
+              /* @__PURE__ */ jsx("kbd", { className: "pds-command-palette__kbd", children: "\u2191" }),
+              /* @__PURE__ */ jsx("kbd", { className: "pds-command-palette__kbd", children: "\u2193" }),
+              " navigate"
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "pds-command-palette__hint", children: [
+              /* @__PURE__ */ jsx("kbd", { className: "pds-command-palette__kbd", children: "\u21B5" }),
+              " select"
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "pds-command-palette__hint", children: [
+              /* @__PURE__ */ jsx("kbd", { className: "pds-command-palette__kbd", children: "Esc" }),
+              " close"
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] }) });
+}
 
-export { Alert, Avatar, Badge, Button, Card, Checkbox, Container, Divider, DropdownMenu, Grid, Input, Modal, Radio, RadioGroup, Segmented, Select, Skeleton, StatusPill, Switch, Tabs, Textarea, Toast, Tooltip, cn, useToastManager as useToast };
+export { Alert, Avatar, Badge, Button, Card, Checkbox, CommandPalette, Container, DataTable, Divider, DropdownMenu, Grid, Input, Modal, Popover, Radio, RadioGroup, Segmented, Select, Skeleton, StatusPill, Switch, Tabs, Textarea, Toast, Tooltip, cn, useCommandPalette, useToastManager as useToast };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map