@bubble-design-system/ui 0.2.0

package/dist/index.js

@@ -0,0 +1,951 @@
+import { clsx } from 'clsx';
+import { forwardRef, createContext, useContext, useMemo } 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';
+import { Checkbox as Checkbox$1 } from '@base-ui/react/checkbox';
+import { Radio as Radio$1 } from '@base-ui/react/radio';
+import { RadioGroup as RadioGroup$1 } from '@base-ui/react/radio-group';
+import { Switch as Switch$1 } from '@base-ui/react/switch';
+import { Select as Select$1 } from '@base-ui/react/select';
+import { Avatar as Avatar$1 } from '@base-ui/react/avatar';
+import { Separator } from '@base-ui/react/separator';
+import { Dialog } from '@base-ui/react/dialog';
+import { Toast as Toast$1 } from '@base-ui/react/toast';
+import { Tooltip as Tooltip$1 } from '@base-ui/react/tooltip';
+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';
+
+// src/utils/cn.ts
+function cn(...inputs) {
+  return clsx(inputs);
+}
+var Button = forwardRef(
+  ({ variant = "primary", size = "md", className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Button$1,
+      {
+        ref,
+        className: cn(
+          "pds-btn",
+          `pds-btn--${variant}`,
+          `pds-btn--${size}`,
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var Input = forwardRef(
+  ({ size = "md", invalid, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Input$1,
+      {
+        ref,
+        "aria-invalid": invalid || void 0,
+        className: cn("pds-input", `pds-input--${size}`, className),
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+var Checkbox = forwardRef(
+  ({ size = "md", className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Checkbox$1.Root,
+      {
+        ref,
+        className: cn("pds-checkbox", `pds-checkbox--${size}`, className),
+        ...props,
+        children: /* @__PURE__ */ jsxs(Checkbox$1.Indicator, { className: "pds-checkbox__indicator", children: [
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              viewBox: "0 0 16 16",
+              fill: "none",
+              className: "pds-checkbox__icon pds-checkbox__icon--check",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M3.5 8.5l3 3 6-6.5",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              viewBox: "0 0 16 16",
+              fill: "none",
+              className: "pds-checkbox__icon pds-checkbox__icon--indeterminate",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M3.5 8h9",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round"
+                }
+              )
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+Checkbox.displayName = "Checkbox";
+var Radio = forwardRef(
+  ({ size = "md", className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Radio$1.Root,
+      {
+        ref,
+        className: cn("pds-radio", `pds-radio--${size}`, className),
+        ...props,
+        children: /* @__PURE__ */ jsx(Radio$1.Indicator, { className: "pds-radio__indicator" })
+      }
+    );
+  }
+);
+Radio.displayName = "Radio";
+var RadioGroup = forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      RadioGroup$1,
+      {
+        ref,
+        className: cn("pds-radio-group", className),
+        ...props
+      }
+    );
+  }
+);
+RadioGroup.displayName = "RadioGroup";
+var Switch = forwardRef(
+  ({ size = "md", className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Switch$1.Root,
+      {
+        ref,
+        className: cn("pds-switch", `pds-switch--${size}`, className),
+        ...props,
+        children: /* @__PURE__ */ jsx(Switch$1.Thumb, { className: "pds-switch__thumb" })
+      }
+    );
+  }
+);
+Switch.displayName = "Switch";
+var SelectTrigger = forwardRef(
+  ({ size = "md", className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      Select$1.Trigger,
+      {
+        ref,
+        className: cn(
+          "pds-select-trigger",
+          `pds-select-trigger--${size}`,
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          /* @__PURE__ */ jsx(Select$1.Icon, { className: "pds-select-icon", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M4 6l4 4 4-4",
+              stroke: "currentColor",
+              strokeWidth: "1.5",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          ) }) })
+        ]
+      }
+    );
+  }
+);
+SelectTrigger.displayName = "Select.Trigger";
+var SelectValue = forwardRef(
+  ({ placeholder, className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Select$1.Value,
+      {
+        ref,
+        className: cn("pds-select-value", className),
+        ...props,
+        children: children ?? ((value) => value === null || value === void 0 || value === "" ? /* @__PURE__ */ jsx("span", { className: "pds-select-value-placeholder", children: placeholder }) : String(value))
+      }
+    );
+  }
+);
+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,
+      {
+        ref,
+        className: cn("pds-select-popup", className),
+        ...props,
+        children
+      }
+    ) }) });
+  }
+);
+SelectContent.displayName = "Select.Content";
+var SelectItem = forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      Select$1.Item,
+      {
+        ref,
+        className: cn("pds-select-item", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(Select$1.ItemIndicator, { className: "pds-select-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"
+            }
+          ) }) }),
+          /* @__PURE__ */ jsx(Select$1.ItemText, { children })
+        ]
+      }
+    );
+  }
+);
+SelectItem.displayName = "Select.Item";
+var Select = {
+  Root: Select$1.Root,
+  Trigger: SelectTrigger,
+  Value: SelectValue,
+  Content: SelectContent,
+  Item: SelectItem
+};
+var Badge = forwardRef(
+  ({ variant = "neutral", size = "md", className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        className: cn(
+          "pds-badge",
+          `pds-badge--${variant}`,
+          `pds-badge--${size}`,
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Badge.displayName = "Badge";
+var AvatarRoot = forwardRef(
+  ({ size = "md", className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Avatar$1.Root,
+      {
+        ref,
+        className: cn("pds-avatar", `pds-avatar--${size}`, className),
+        ...props
+      }
+    );
+  }
+);
+AvatarRoot.displayName = "Avatar";
+var AvatarImage = forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Avatar$1.Image,
+      {
+        ref,
+        className: cn("pds-avatar__image", className),
+        ...props
+      }
+    );
+  }
+);
+AvatarImage.displayName = "Avatar.Image";
+var AvatarFallback = forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Avatar$1.Fallback,
+      {
+        ref,
+        className: cn("pds-avatar__fallback", className),
+        ...props
+      }
+    );
+  }
+);
+AvatarFallback.displayName = "Avatar.Fallback";
+var Avatar = Object.assign(AvatarRoot, {
+  Image: AvatarImage,
+  Fallback: AvatarFallback
+});
+var Divider = forwardRef(
+  ({ orientation = "horizontal", className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Separator,
+      {
+        ref,
+        orientation,
+        className: cn(
+          "pds-divider",
+          orientation === "horizontal" ? "pds-divider--horizontal" : "pds-divider--vertical",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+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.Popup,
+        {
+          ref,
+          className: cn("pds-modal-popup", className),
+          ...props,
+          children
+        }
+      )
+    ] });
+  }
+);
+ModalContent.displayName = "Modal.Content";
+var ModalTitle = forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Dialog.Title,
+      {
+        ref,
+        className: cn("pds-modal-title", className),
+        ...props
+      }
+    );
+  }
+);
+ModalTitle.displayName = "Modal.Title";
+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,
+  Trigger: Dialog.Trigger,
+  Close: Dialog.Close,
+  Content: ModalContent,
+  Title: ModalTitle,
+  Description: ModalDescription
+};
+var { useToastManager } = Toast$1;
+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
+      }
+    );
+  }
+);
+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
+  )) });
+};
+Toaster.displayName = "Toaster";
+var Toast = {
+  Provider: ToastProvider,
+  Viewport: ToastViewport,
+  Toaster
+};
+var TooltipContent = forwardRef(
+  ({ className, sideOffset = 6, side = "top", align = "center", children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsx(
+      Tooltip$1.Positioner,
+      {
+        sideOffset,
+        side,
+        align,
+        className: "pds-tooltip-positioner",
+        children: /* @__PURE__ */ jsx(
+          Tooltip$1.Popup,
+          {
+            ref,
+            className: cn("pds-tooltip-popup", className),
+            ...props,
+            children
+          }
+        )
+      }
+    ) });
+  }
+);
+TooltipContent.displayName = "Tooltip.Content";
+var Tooltip = {
+  Provider: Tooltip$1.Provider,
+  Root: Tooltip$1.Root,
+  Trigger: Tooltip$1.Trigger,
+  Content: TooltipContent
+};
+var TabsRoot = forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Tabs$1.Root,
+      {
+        ref,
+        className: cn("pds-tabs", className),
+        ...props
+      }
+    );
+  }
+);
+TabsRoot.displayName = "Tabs";
+var TabsList = forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      Tabs$1.List,
+      {
+        ref,
+        className: cn("pds-tabs__list", className),
+        ...props,
+        children: [
+          children,
+          /* @__PURE__ */ jsx(Tabs$1.Indicator, { className: "pds-tabs__indicator" })
+        ]
+      }
+    );
+  }
+);
+TabsList.displayName = "Tabs.List";
+var TabsTab = forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Tabs$1.Tab,
+      {
+        ref,
+        className: cn("pds-tabs__tab", className),
+        ...props
+      }
+    );
+  }
+);
+TabsTab.displayName = "Tabs.Tab";
+var TabsPanel = forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Tabs$1.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__ */ 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("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" })
+  ] }),
+  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("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" })
+  ] })
+};
+var Alert = forwardRef(
+  ({ variant = "info", icon, title, className, children, ...props }, ref) => {
+    const renderedIcon = icon === false ? null : icon ?? icons[variant];
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "alert",
+        className: cn("pds-alert", `pds-alert--${variant}`, className),
+        ...props,
+        children: [
+          renderedIcon ? /* @__PURE__ */ jsx("span", { className: "pds-alert__icon", children: renderedIcon }) : null,
+          /* @__PURE__ */ jsxs("div", { className: "pds-alert__body", children: [
+            title ? /* @__PURE__ */ jsx("div", { className: "pds-alert__title", children: title }) : null,
+            children ? /* @__PURE__ */ jsx("div", { className: "pds-alert__description", children }) : null
+          ] })
+        ]
+      }
+    );
+  }
+);
+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
+          }
+        )
+      }
+    ) });
+  }
+);
+DropdownMenuContent.displayName = "DropdownMenu.Content";
+var DropdownMenuItem = forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Menu.Item,
+      {
+        ref,
+        className: cn("pds-menu-item", className),
+        ...props
+      }
+    );
+  }
+);
+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
+        ]
+      }
+    );
+  }
+);
+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
+        ]
+      }
+    );
+  }
+);
+DropdownMenuRadioItem.displayName = "DropdownMenu.RadioItem";
+var DropdownMenuLabel = forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Menu.GroupLabel,
+      {
+        ref,
+        className: cn("pds-menu-label", className),
+        ...props
+      }
+    );
+  }
+);
+DropdownMenuLabel.displayName = "DropdownMenu.Label";
+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,
+  Trigger: Menu.Trigger,
+  Content: DropdownMenuContent,
+  Item: DropdownMenuItem,
+  CheckboxItem: DropdownMenuCheckboxItem,
+  RadioGroup: Menu.RadioGroup,
+  RadioItem: DropdownMenuRadioItem,
+  Group: Menu.Group,
+  Label: DropdownMenuLabel,
+  Separator: DropdownMenuSeparator
+};
+var Skeleton = forwardRef(
+  ({ shape = "line", className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "aria-hidden": "true",
+        className: cn("pds-skeleton", `pds-skeleton--${shape}`, className),
+        ...props
+      }
+    );
+  }
+);
+Skeleton.displayName = "Skeleton";
+var CardRoot = forwardRef(
+  ({ variant = "elevated", className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("pds-card", `pds-card--${variant}`, className),
+        ...props
+      }
+    );
+  }
+);
+CardRoot.displayName = "Card";
+var CardHeader = forwardRef(
+  ({ 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
+    }
+  )
+);
+CardTitle.displayName = "Card.Title";
+var CardDescription = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "p",
+    {
+      ref,
+      className: cn("pds-card__description", className),
+      ...props
+    }
+  )
+);
+CardDescription.displayName = "Card.Description";
+var CardAction = forwardRef(
+  ({ 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
+    }
+  )
+);
+CardBody.displayName = "Card.Body";
+var CardFooter = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ 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 = forwardRef(
+  ({ size = "md", invalid, className, ...props }, ref) => {
+    return /* @__PURE__ */ 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 = createContext("neutral");
+var StatusPillRoot = forwardRef(
+  ({ intent = "neutral", className, style, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(StatusPillContext.Provider, { value: intent, children: /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        className: cn("pds-status-pill", className),
+        style: { ...intentVars[intent], ...style },
+        ...props
+      }
+    ) });
+  }
+);
+StatusPillRoot.displayName = "StatusPill";
+var StatusPillIndicator = forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        "aria-hidden": "true",
+        className: cn("pds-status-pill__indicator", className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+StatusPillIndicator.displayName = "StatusPill.Indicator";
+var StatusPillLabel = forwardRef(
+  ({ className, ...props }, ref) => {
+    useContext(StatusPillContext);
+    return /* @__PURE__ */ 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 = createContext("md");
+var SegmentedRoot = forwardRef(
+  ({ value, defaultValue, onValueChange, size = "md", className, ...props }, ref) => {
+    const handleChange = useMemo(
+      () => onValueChange ? (groupValue) => {
+        const next = groupValue[0];
+        if (next !== void 0) onValueChange(next);
+      } : void 0,
+      [onValueChange]
+    );
+    return /* @__PURE__ */ jsx(SegmentedSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx(
+      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 = forwardRef(
+  ({ className, value, ...props }, ref) => {
+    const size = useContext(SegmentedSizeContext);
+    return /* @__PURE__ */ jsx(
+      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 = forwardRef(
+  ({ size = "xl", className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("pds-container", `pds-container--${size}`, className),
+      ...props
+    }
+  )
+);
+Container.displayName = "Container";
+var GridRoot = forwardRef(
+  ({ gutter = "default", className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("pds-grid", `pds-grid--${gutter}`, className),
+      ...props
+    }
+  )
+);
+GridRoot.displayName = "Grid";
+var GridCol = forwardRef(
+  ({ span = 12, smSpan, mdSpan, lgSpan, className, ...props }, ref) => /* @__PURE__ */ 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
+});
+
+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 };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map