@bubble-design-system/ui 0.2.0

package/dist/index.cjs

@@ -0,0 +1,977 @@
+'use strict';
+
+var clsx = require('clsx');
+var react = require('react');
+var button = require('@base-ui/react/button');
+var jsxRuntime = require('react/jsx-runtime');
+var input = require('@base-ui/react/input');
+var checkbox = require('@base-ui/react/checkbox');
+var radio = require('@base-ui/react/radio');
+var radioGroup = require('@base-ui/react/radio-group');
+var _switch = require('@base-ui/react/switch');
+var select = require('@base-ui/react/select');
+var avatar = require('@base-ui/react/avatar');
+var separator = require('@base-ui/react/separator');
+var dialog = require('@base-ui/react/dialog');
+var toast = require('@base-ui/react/toast');
+var tooltip = require('@base-ui/react/tooltip');
+var tabs = require('@base-ui/react/tabs');
+var menu = require('@base-ui/react/menu');
+var toggle = require('@base-ui/react/toggle');
+var toggleGroup = require('@base-ui/react/toggle-group');
+
+// src/utils/cn.ts
+function cn(...inputs) {
+  return clsx.clsx(inputs);
+}
+var Button = react.forwardRef(
+  ({ variant = "primary", size = "md", className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      button.Button,
+      {
+        ref,
+        className: cn(
+          "pds-btn",
+          `pds-btn--${variant}`,
+          `pds-btn--${size}`,
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var Input = react.forwardRef(
+  ({ size = "md", invalid, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      input.Input,
+      {
+        ref,
+        "aria-invalid": invalid || void 0,
+        className: cn("pds-input", `pds-input--${size}`, className),
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+var Checkbox = react.forwardRef(
+  ({ size = "md", className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      checkbox.Checkbox.Root,
+      {
+        ref,
+        className: cn("pds-checkbox", `pds-checkbox--${size}`, className),
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(checkbox.Checkbox.Indicator, { className: "pds-checkbox__indicator", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              viewBox: "0 0 16 16",
+              fill: "none",
+              className: "pds-checkbox__icon pds-checkbox__icon--check",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  d: "M3.5 8.5l3 3 6-6.5",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              viewBox: "0 0 16 16",
+              fill: "none",
+              className: "pds-checkbox__icon pds-checkbox__icon--indeterminate",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  d: "M3.5 8h9",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round"
+                }
+              )
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+Checkbox.displayName = "Checkbox";
+var Radio = react.forwardRef(
+  ({ size = "md", className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      radio.Radio.Root,
+      {
+        ref,
+        className: cn("pds-radio", `pds-radio--${size}`, className),
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx(radio.Radio.Indicator, { className: "pds-radio__indicator" })
+      }
+    );
+  }
+);
+Radio.displayName = "Radio";
+var RadioGroup = react.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      radioGroup.RadioGroup,
+      {
+        ref,
+        className: cn("pds-radio-group", className),
+        ...props
+      }
+    );
+  }
+);
+RadioGroup.displayName = "RadioGroup";
+var Switch = react.forwardRef(
+  ({ size = "md", className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      _switch.Switch.Root,
+      {
+        ref,
+        className: cn("pds-switch", `pds-switch--${size}`, className),
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx(_switch.Switch.Thumb, { className: "pds-switch__thumb" })
+      }
+    );
+  }
+);
+Switch.displayName = "Switch";
+var SelectTrigger = react.forwardRef(
+  ({ size = "md", className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      select.Select.Trigger,
+      {
+        ref,
+        className: cn(
+          "pds-select-trigger",
+          `pds-select-trigger--${size}`,
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          /* @__PURE__ */ jsxRuntime.jsx(select.Select.Icon, { className: "pds-select-icon", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              d: "M4 6l4 4 4-4",
+              stroke: "currentColor",
+              strokeWidth: "1.5",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          ) }) })
+        ]
+      }
+    );
+  }
+);
+SelectTrigger.displayName = "Select.Trigger";
+var SelectValue = react.forwardRef(
+  ({ placeholder, className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      select.Select.Value,
+      {
+        ref,
+        className: cn("pds-select-value", className),
+        ...props,
+        children: children ?? ((value) => value === null || value === void 0 || value === "" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pds-select-value-placeholder", children: placeholder }) : String(value))
+      }
+    );
+  }
+);
+SelectValue.displayName = "Select.Value";
+var SelectContent = react.forwardRef(
+  ({ className, sideOffset = 6, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(select.Select.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(select.Select.Positioner, { sideOffset, className: "pds-select-positioner", children: /* @__PURE__ */ jsxRuntime.jsx(
+      select.Select.Popup,
+      {
+        ref,
+        className: cn("pds-select-popup", className),
+        ...props,
+        children
+      }
+    ) }) });
+  }
+);
+SelectContent.displayName = "Select.Content";
+var SelectItem = react.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      select.Select.Item,
+      {
+        ref,
+        className: cn("pds-select-item", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(select.Select.ItemIndicator, { className: "pds-select-item__indicator", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              d: "M3.5 8.5l3 3 6-6.5",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          ) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(select.Select.ItemText, { children })
+        ]
+      }
+    );
+  }
+);
+SelectItem.displayName = "Select.Item";
+var Select = {
+  Root: select.Select.Root,
+  Trigger: SelectTrigger,
+  Value: SelectValue,
+  Content: SelectContent,
+  Item: SelectItem
+};
+var Badge = react.forwardRef(
+  ({ variant = "neutral", size = "md", className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        ref,
+        className: cn(
+          "pds-badge",
+          `pds-badge--${variant}`,
+          `pds-badge--${size}`,
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Badge.displayName = "Badge";
+var AvatarRoot = react.forwardRef(
+  ({ size = "md", className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      avatar.Avatar.Root,
+      {
+        ref,
+        className: cn("pds-avatar", `pds-avatar--${size}`, className),
+        ...props
+      }
+    );
+  }
+);
+AvatarRoot.displayName = "Avatar";
+var AvatarImage = react.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      avatar.Avatar.Image,
+      {
+        ref,
+        className: cn("pds-avatar__image", className),
+        ...props
+      }
+    );
+  }
+);
+AvatarImage.displayName = "Avatar.Image";
+var AvatarFallback = react.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      avatar.Avatar.Fallback,
+      {
+        ref,
+        className: cn("pds-avatar__fallback", className),
+        ...props
+      }
+    );
+  }
+);
+AvatarFallback.displayName = "Avatar.Fallback";
+var Avatar = Object.assign(AvatarRoot, {
+  Image: AvatarImage,
+  Fallback: AvatarFallback
+});
+var Divider = react.forwardRef(
+  ({ orientation = "horizontal", className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      separator.Separator,
+      {
+        ref,
+        orientation,
+        className: cn(
+          "pds-divider",
+          orientation === "horizontal" ? "pds-divider--horizontal" : "pds-divider--vertical",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Divider.displayName = "Divider";
+var ModalContent = react.forwardRef(
+  ({ className, backdropClassName, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(dialog.Dialog.Portal, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Backdrop, { className: cn("pds-modal-backdrop", backdropClassName) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        dialog.Dialog.Popup,
+        {
+          ref,
+          className: cn("pds-modal-popup", className),
+          ...props,
+          children
+        }
+      )
+    ] });
+  }
+);
+ModalContent.displayName = "Modal.Content";
+var ModalTitle = react.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      dialog.Dialog.Title,
+      {
+        ref,
+        className: cn("pds-modal-title", className),
+        ...props
+      }
+    );
+  }
+);
+ModalTitle.displayName = "Modal.Title";
+var ModalDescription = react.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      dialog.Dialog.Description,
+      {
+        ref,
+        className: cn("pds-modal-description", className),
+        ...props
+      }
+    );
+  }
+);
+ModalDescription.displayName = "Modal.Description";
+var Modal = {
+  Root: dialog.Dialog.Root,
+  Trigger: dialog.Dialog.Trigger,
+  Close: dialog.Dialog.Close,
+  Content: ModalContent,
+  Title: ModalTitle,
+  Description: ModalDescription
+};
+var { useToastManager } = toast.Toast;
+var ToastProvider = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(toast.Toast.Provider, { ...props, children });
+};
+ToastProvider.displayName = "Toast.Provider";
+var ToastViewport = react.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      toast.Toast.Viewport,
+      {
+        ref,
+        className: cn("pds-toast-viewport", className),
+        style: { ["--gap"]: "12px" },
+        ...props
+      }
+    );
+  }
+);
+ToastViewport.displayName = "Toast.Viewport";
+var Toaster = () => {
+  const { toasts } = useToastManager();
+  return /* @__PURE__ */ jsxRuntime.jsx(ToastViewport, { children: toasts.map((toast$1) => /* @__PURE__ */ jsxRuntime.jsxs(
+    toast.Toast.Root,
+    {
+      toast: toast$1,
+      className: "pds-toast-item",
+      children: [
+        toast$1.title ? /* @__PURE__ */ jsxRuntime.jsx(toast.Toast.Title, { className: "pds-toast-title" }) : null,
+        toast$1.description ? /* @__PURE__ */ jsxRuntime.jsx(toast.Toast.Description, { className: "pds-toast-description" }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          toast.Toast.Close,
+          {
+            "aria-label": "Close",
+            className: "pds-toast-close",
+            children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                d: "M4 4l8 8M12 4l-8 8",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round"
+              }
+            ) })
+          }
+        )
+      ]
+    },
+    toast$1.id
+  )) });
+};
+Toaster.displayName = "Toaster";
+var Toast = {
+  Provider: ToastProvider,
+  Viewport: ToastViewport,
+  Toaster
+};
+var TooltipContent = react.forwardRef(
+  ({ className, sideOffset = 6, side = "top", align = "center", children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      tooltip.Tooltip.Positioner,
+      {
+        sideOffset,
+        side,
+        align,
+        className: "pds-tooltip-positioner",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          tooltip.Tooltip.Popup,
+          {
+            ref,
+            className: cn("pds-tooltip-popup", className),
+            ...props,
+            children
+          }
+        )
+      }
+    ) });
+  }
+);
+TooltipContent.displayName = "Tooltip.Content";
+var Tooltip = {
+  Provider: tooltip.Tooltip.Provider,
+  Root: tooltip.Tooltip.Root,
+  Trigger: tooltip.Tooltip.Trigger,
+  Content: TooltipContent
+};
+var TabsRoot = react.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      tabs.Tabs.Root,
+      {
+        ref,
+        className: cn("pds-tabs", className),
+        ...props
+      }
+    );
+  }
+);
+TabsRoot.displayName = "Tabs";
+var TabsList = react.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      tabs.Tabs.List,
+      {
+        ref,
+        className: cn("pds-tabs__list", className),
+        ...props,
+        children: [
+          children,
+          /* @__PURE__ */ jsxRuntime.jsx(tabs.Tabs.Indicator, { className: "pds-tabs__indicator" })
+        ]
+      }
+    );
+  }
+);
+TabsList.displayName = "Tabs.List";
+var TabsTab = react.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      tabs.Tabs.Tab,
+      {
+        ref,
+        className: cn("pds-tabs__tab", className),
+        ...props
+      }
+    );
+  }
+);
+TabsTab.displayName = "Tabs.Tab";
+var TabsPanel = react.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      tabs.Tabs.Panel,
+      {
+        ref,
+        className: cn("pds-tabs__panel", className),
+        ...props
+      }
+    );
+  }
+);
+TabsPanel.displayName = "Tabs.Panel";
+var Tabs = Object.assign(TabsRoot, {
+  List: TabsList,
+  Tab: TabsTab,
+  Panel: TabsPanel
+});
+var icons = {
+  info: /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 7.5v4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "5", r: "0.75", fill: "currentColor" })
+  ] }),
+  success: /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 8.5l2 2 4-4.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+  ] }),
+  warning: /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 1.75L14.5 13.5h-13L8 1.75z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 6.5v3.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "11.75", r: "0.75", fill: "currentColor" })
+  ] }),
+  danger: /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5.5 5.5l5 5M10.5 5.5l-5 5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+  ] })
+};
+var Alert = react.forwardRef(
+  ({ variant = "info", icon, title, className, children, ...props }, ref) => {
+    const renderedIcon = icon === false ? null : icon ?? icons[variant];
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        role: "alert",
+        className: cn("pds-alert", `pds-alert--${variant}`, className),
+        ...props,
+        children: [
+          renderedIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pds-alert__icon", children: renderedIcon }) : null,
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pds-alert__body", children: [
+            title ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pds-alert__title", children: title }) : null,
+            children ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pds-alert__description", children }) : null
+          ] })
+        ]
+      }
+    );
+  }
+);
+Alert.displayName = "Alert";
+var DropdownMenuContent = react.forwardRef(
+  ({ className, sideOffset = 6, align = "start", children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      menu.Menu.Positioner,
+      {
+        sideOffset,
+        align,
+        className: "pds-menu-positioner",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          menu.Menu.Popup,
+          {
+            ref,
+            className: cn("pds-menu-popup", className),
+            ...props,
+            children
+          }
+        )
+      }
+    ) });
+  }
+);
+DropdownMenuContent.displayName = "DropdownMenu.Content";
+var DropdownMenuItem = react.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      menu.Menu.Item,
+      {
+        ref,
+        className: cn("pds-menu-item", className),
+        ...props
+      }
+    );
+  }
+);
+DropdownMenuItem.displayName = "DropdownMenu.Item";
+var DropdownMenuCheckboxItem = react.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      menu.Menu.CheckboxItem,
+      {
+        ref,
+        className: cn("pds-menu-item", "pds-menu-item--indented", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.CheckboxItemIndicator, { className: "pds-menu-item__indicator", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.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 = react.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      menu.Menu.RadioItem,
+      {
+        ref,
+        className: cn("pds-menu-item", "pds-menu-item--indented", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.RadioItemIndicator, { className: "pds-menu-item__indicator pds-menu-item__indicator--radio", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "8" }) }) }),
+          children
+        ]
+      }
+    );
+  }
+);
+DropdownMenuRadioItem.displayName = "DropdownMenu.RadioItem";
+var DropdownMenuLabel = react.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      menu.Menu.GroupLabel,
+      {
+        ref,
+        className: cn("pds-menu-label", className),
+        ...props
+      }
+    );
+  }
+);
+DropdownMenuLabel.displayName = "DropdownMenu.Label";
+var DropdownMenuSeparator = react.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      menu.Menu.Separator,
+      {
+        ref,
+        className: cn("pds-menu-separator", className),
+        ...props
+      }
+    );
+  }
+);
+DropdownMenuSeparator.displayName = "DropdownMenu.Separator";
+var DropdownMenu = {
+  Root: menu.Menu.Root,
+  Trigger: menu.Menu.Trigger,
+  Content: DropdownMenuContent,
+  Item: DropdownMenuItem,
+  CheckboxItem: DropdownMenuCheckboxItem,
+  RadioGroup: menu.Menu.RadioGroup,
+  RadioItem: DropdownMenuRadioItem,
+  Group: menu.Menu.Group,
+  Label: DropdownMenuLabel,
+  Separator: DropdownMenuSeparator
+};
+var Skeleton = react.forwardRef(
+  ({ shape = "line", className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        "aria-hidden": "true",
+        className: cn("pds-skeleton", `pds-skeleton--${shape}`, className),
+        ...props
+      }
+    );
+  }
+);
+Skeleton.displayName = "Skeleton";
+var CardRoot = react.forwardRef(
+  ({ variant = "elevated", className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn("pds-card", `pds-card--${variant}`, className),
+        ...props
+      }
+    );
+  }
+);
+CardRoot.displayName = "Card";
+var CardHeader = react.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: cn("pds-card__header", className),
+      ...props
+    }
+  )
+);
+CardHeader.displayName = "Card.Header";
+var CardTitle = react.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "h3",
+    {
+      ref,
+      className: cn("pds-card__title", className),
+      ...props
+    }
+  )
+);
+CardTitle.displayName = "Card.Title";
+var CardDescription = react.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "p",
+    {
+      ref,
+      className: cn("pds-card__description", className),
+      ...props
+    }
+  )
+);
+CardDescription.displayName = "Card.Description";
+var CardAction = react.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: cn("pds-card__action", className),
+      ...props
+    }
+  )
+);
+CardAction.displayName = "Card.Action";
+var CardBody = react.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: cn("pds-card__body", className),
+      ...props
+    }
+  )
+);
+CardBody.displayName = "Card.Body";
+var CardFooter = react.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: cn("pds-card__footer", className),
+      ...props
+    }
+  )
+);
+CardFooter.displayName = "Card.Footer";
+var Card = Object.assign(CardRoot, {
+  Header: CardHeader,
+  Title: CardTitle,
+  Description: CardDescription,
+  Action: CardAction,
+  Body: CardBody,
+  Footer: CardFooter
+});
+var Textarea = react.forwardRef(
+  ({ size = "md", invalid, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "textarea",
+      {
+        ref,
+        "aria-invalid": invalid || void 0,
+        className: cn("pds-textarea", `pds-textarea--${size}`, className),
+        ...props
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+var intentVars = {
+  neutral: {
+    ["--pill-chip"]: "var(--gray-400)",
+    ["--pill-text"]: "var(--color-text-tertiary)"
+  },
+  success: {
+    ["--pill-chip"]: "var(--green-500)",
+    ["--pill-text"]: "var(--color-text-success)"
+  },
+  warning: {
+    ["--pill-chip"]: "var(--amber-500)",
+    ["--pill-text"]: "var(--color-text-warning)"
+  },
+  danger: {
+    ["--pill-chip"]: "var(--red-500)",
+    ["--pill-text"]: "var(--color-text-danger)"
+  },
+  info: {
+    ["--pill-chip"]: "var(--brand-500)",
+    ["--pill-text"]: "var(--color-text-brand)"
+  }
+};
+var StatusPillContext = react.createContext("neutral");
+var StatusPillRoot = react.forwardRef(
+  ({ intent = "neutral", className, style, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(StatusPillContext.Provider, { value: intent, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        ref,
+        className: cn("pds-status-pill", className),
+        style: { ...intentVars[intent], ...style },
+        ...props
+      }
+    ) });
+  }
+);
+StatusPillRoot.displayName = "StatusPill";
+var StatusPillIndicator = react.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        ref,
+        "aria-hidden": "true",
+        className: cn("pds-status-pill__indicator", className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+StatusPillIndicator.displayName = "StatusPill.Indicator";
+var StatusPillLabel = react.forwardRef(
+  ({ className, ...props }, ref) => {
+    react.useContext(StatusPillContext);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        ref,
+        className: cn("pds-status-pill__label", className),
+        ...props
+      }
+    );
+  }
+);
+StatusPillLabel.displayName = "StatusPill.Label";
+var StatusPill = Object.assign(StatusPillRoot, {
+  Indicator: StatusPillIndicator,
+  Label: StatusPillLabel
+});
+var SegmentedSizeContext = react.createContext("md");
+var SegmentedRoot = react.forwardRef(
+  ({ value, defaultValue, onValueChange, size = "md", className, ...props }, ref) => {
+    const handleChange = react.useMemo(
+      () => onValueChange ? (groupValue) => {
+        const next = groupValue[0];
+        if (next !== void 0) onValueChange(next);
+      } : void 0,
+      [onValueChange]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(SegmentedSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsxRuntime.jsx(
+      toggleGroup.ToggleGroup,
+      {
+        ref,
+        value: value !== void 0 ? [value] : void 0,
+        defaultValue: defaultValue !== void 0 ? [defaultValue] : void 0,
+        onValueChange: handleChange,
+        className: cn("pds-segmented", `pds-segmented--${size}`, className),
+        ...props
+      }
+    ) });
+  }
+);
+SegmentedRoot.displayName = "Segmented";
+var SegmentedItem = react.forwardRef(
+  ({ className, value, ...props }, ref) => {
+    const size = react.useContext(SegmentedSizeContext);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      toggle.Toggle,
+      {
+        ref,
+        value,
+        className: cn(
+          "pds-segmented__item",
+          `pds-segmented__item--${size}`,
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+SegmentedItem.displayName = "Segmented.Item";
+var Segmented = Object.assign(SegmentedRoot, {
+  Item: SegmentedItem
+});
+var Container = react.forwardRef(
+  ({ size = "xl", className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: cn("pds-container", `pds-container--${size}`, className),
+      ...props
+    }
+  )
+);
+Container.displayName = "Container";
+var GridRoot = react.forwardRef(
+  ({ gutter = "default", className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: cn("pds-grid", `pds-grid--${gutter}`, className),
+      ...props
+    }
+  )
+);
+GridRoot.displayName = "Grid";
+var GridCol = react.forwardRef(
+  ({ span = 12, smSpan, mdSpan, lgSpan, className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        `pds-grid__col--span-${span}`,
+        smSpan !== void 0 && `pds-grid__col--sm-span-${smSpan}`,
+        mdSpan !== void 0 && `pds-grid__col--md-span-${mdSpan}`,
+        lgSpan !== void 0 && `pds-grid__col--lg-span-${lgSpan}`,
+        className
+      ),
+      ...props
+    }
+  )
+);
+GridCol.displayName = "Grid.Col";
+var Grid = Object.assign(GridRoot, {
+  Col: GridCol
+});
+
+exports.Alert = Alert;
+exports.Avatar = Avatar;
+exports.Badge = Badge;
+exports.Button = Button;
+exports.Card = Card;
+exports.Checkbox = Checkbox;
+exports.Container = Container;
+exports.Divider = Divider;
+exports.DropdownMenu = DropdownMenu;
+exports.Grid = Grid;
+exports.Input = Input;
+exports.Modal = Modal;
+exports.Radio = Radio;
+exports.RadioGroup = RadioGroup;
+exports.Segmented = Segmented;
+exports.Select = Select;
+exports.Skeleton = Skeleton;
+exports.StatusPill = StatusPill;
+exports.Switch = Switch;
+exports.Tabs = Tabs;
+exports.Textarea = Textarea;
+exports.Toast = Toast;
+exports.Tooltip = Tooltip;
+exports.cn = cn;
+exports.useToast = useToastManager;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map