@mastra/playground-ui 63.1.0-alpha.4 → 64.0.0-alpha.6

package/dist/Button-EGoajBQY.js

@@ -0,0 +1,251 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Button as Button$1 } from '@base-ui/react/button';
+import { c as cva } from './index-CHS9F_Eo.js';
+import React__default from 'react';
+import { T as Tooltip, c as TooltipTrigger, a as TooltipContent } from './tooltip-DrsXZDAj.js';
+import { Icon } from './icons/Icon.es.js';
+import { iconSizeClasses } from './icons/icon-size-classes.es.js';
+import { controlHeight, controlSizeClasses } from './primitives/control-size.es.js';
+import { raisedControlSurfaceStyle, controlFocusBorderVisible, sharedFormElementDisabledStyle } from './primitives/form-element.es.js';
+import { focusRingOffset, controlStateColorTransition } from './primitives/transitions.es.js';
+import { c as cn } from './cn-CQUhN5Jx.js';
+
+const TEXT_MODE_ADORNMENTS = cn(
+  "gap-[.75em] rounded-full",
+  "[&>[data-slot=button-icon]]:-ml-[.3em]",
+  "[&>[data-slot=button-icon-end]]:-mr-1",
+  "[&>svg]:mx-[-.3em]"
+);
+const LINK_LAYOUT = cn(
+  "relative size-auto gap-1 rounded-xs px-0 text-label",
+  "before:absolute before:-inset-x-2",
+  "[&>[data-slot=button-icon-end]]:mr-0 [&>[data-slot=button-icon]]:ml-0 [&>svg]:mx-0"
+);
+const LINK_LABEL = cn(
+  "relative inline-flex items-center gap-1",
+  iconSizeClasses.sm,
+  "[&>svg]:shrink-0",
+  "after:absolute after:inset-x-0 after:bottom-0 after:h-px after:origin-left after:scale-x-0 after:bg-current",
+  "after:transition-transform after:duration-fast after:ease-out-custom motion-reduce:after:transition-none"
+);
+const NEUTRAL_ICON_STATE = cn(
+  "[&_svg]:text-muted-foreground not-disabled:hover:[&_svg]:text-foreground aria-disabled:[&_svg]:text-muted-foreground"
+);
+const buttonVariants = cva(
+  cn(
+    "inline-flex cursor-pointer items-center justify-center",
+    controlStateColorTransition,
+    sharedFormElementDisabledStyle,
+    "aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:text-muted-foreground",
+    controlFocusBorderVisible
+  ),
+  {
+    variants: {
+      variant: {
+        // The raised card material, the same one a field wears: a neutral filled control is
+        // one material system-wide. No border of its own — the material's rim is its edge,
+        // and focus repaints that rim. Inside a ButtonsGroup the group flattens the rim and
+        // hands every segment the same 1px border instead (see `buttons-group.css`).
+        default: cn(
+          "border-0",
+          raisedControlSurfaceStyle,
+          NEUTRAL_ICON_STATE,
+          "disabled:bg-fill-subtle aria-disabled:bg-fill-subtle"
+        ),
+        // Filled variants take the opaque ladder: their rest fill is a colour, not a rung
+        // layered on the surface, so a state that thinned it would let whatever the button
+        // covers read through the hover it is meant to answer.
+        primary: cn(
+          "border border-transparent bg-fill-inverse text-background not-disabled:hover:bg-fill-inverse-hover not-disabled:active:bg-fill-inverse-active",
+          focusRingOffset,
+          "focus-visible:border-transparent",
+          "disabled:bg-fill-inverse-disabled disabled:text-background/75 aria-disabled:bg-fill-inverse-disabled aria-disabled:text-background/75"
+        ),
+        destructive: cn(
+          "border border-transparent bg-fill-destructive text-fill-destructive-foreground not-disabled:hover:bg-fill-destructive-hover not-disabled:active:bg-fill-destructive-active",
+          focusRingOffset,
+          "focus-visible:border-transparent",
+          "disabled:bg-fill-destructive-disabled disabled:text-fill-destructive-disabled-foreground aria-disabled:bg-fill-destructive-disabled aria-disabled:text-fill-destructive-disabled-foreground"
+        ),
+        "destructive-ghost": cn(
+          "border border-transparent bg-transparent text-destructive-foreground not-disabled:hover:bg-destructive-subtle not-disabled:hover:text-destructive-foreground not-disabled:active:bg-destructive-subtle-active",
+          "disabled:bg-transparent disabled:text-placeholder aria-disabled:bg-transparent aria-disabled:text-placeholder"
+        ),
+        ghost: cn(
+          "border border-transparent bg-transparent text-muted-foreground not-disabled:hover:bg-fill-subtle not-disabled:hover:text-foreground not-disabled:active:bg-fill",
+          "disabled:bg-transparent aria-disabled:bg-transparent"
+        ),
+        link: cn(
+          "border-0 bg-transparent text-muted-foreground not-disabled:hover:text-foreground",
+          "not-disabled:hover:[&>[data-slot=button-label]]:after:scale-x-100 not-disabled:hover:[&>[data-slot=button-label]]:after:duration-normal",
+          focusRingOffset,
+          "disabled:text-placeholder aria-disabled:text-placeholder"
+        )
+      },
+      size: {
+        sm: cn(controlSizeClasses.sm, iconSizeClasses.sm, "px-[.9em]", TEXT_MODE_ADORNMENTS),
+        md: cn(controlSizeClasses.md, iconSizeClasses.md, "px-[.9em]", TEXT_MODE_ADORNMENTS),
+        lg: cn(controlSizeClasses.lg, iconSizeClasses.lg, "px-[1em]", TEXT_MODE_ADORNMENTS),
+        // Icon sizes: square dimensions, fully rounded → circle. Active state inherits from variant
+        // so icon-mode and text-mode use the same press feedback. The glyph is sized by the `Icon`
+        // wrapper the component puts around an icon-mode child, keyed off the same scale.
+        "icon-sm": cn(controlHeight.sm, "w-control-sm rounded-full"),
+        "icon-md": cn(controlHeight.md, "w-control-md rounded-full"),
+        "icon-lg": cn(controlHeight.lg, "w-control-lg rounded-full")
+      }
+    },
+    compoundVariants: [
+      { variant: "link", className: LINK_LAYOUT },
+      { variant: "link", size: ["sm", "md", "icon-sm", "icon-md"], className: "before:-inset-y-1" },
+      { variant: "link", size: ["lg", "icon-lg"], className: "before:-inset-y-1.5" }
+    ],
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+);
+function isLinkElement(element) {
+  if (element.type === "a") return true;
+  const { href, to } = element.props;
+  return href !== void 0 || to !== void 0;
+}
+function preventLinkActivation(event) {
+  event.preventDefault();
+  event.stopPropagation();
+}
+const iconSizeMap = {
+  sm: "sm",
+  md: "md",
+  lg: "lg",
+  "icon-sm": "sm",
+  "icon-md": "md",
+  "icon-lg": "lg"
+};
+function adornmentIconSize(variant, size) {
+  if (variant === "link") return "sm";
+  return iconSizeMap[size];
+}
+function ButtonAdornment({ slot, size, children }) {
+  if (!children) return void 0;
+  return /* @__PURE__ */ jsx(Icon, { "data-slot": slot, size, children });
+}
+function ButtonLabel({ variant, children }) {
+  if (variant !== "link") return children;
+  return /* @__PURE__ */ jsx("span", { "data-slot": "button-label", className: LINK_LABEL, children });
+}
+function flattenChildren(children) {
+  const result = [];
+  React__default.Children.forEach(children, (child) => {
+    if (React__default.isValidElement(child) && child.type === React__default.Fragment) {
+      result.push(...flattenChildren(child.props.children));
+    } else {
+      result.push(child);
+    }
+  });
+  return result;
+}
+function isIconOnly(children) {
+  const flat = flattenChildren(children);
+  return flat.length > 0 && flat.every((child) => React__default.isValidElement(child));
+}
+function isIconButtonSize(size) {
+  return size?.startsWith("icon-") ?? false;
+}
+const Button = React__default.forwardRef(
+  ({
+    className,
+    render,
+    as: asProp,
+    href,
+    to,
+    target,
+    prefetch,
+    size,
+    variant = "default",
+    disabled,
+    children,
+    icon,
+    iconEnd,
+    tooltip,
+    tooltipPosition,
+    "aria-label": ariaLabelProp,
+    type,
+    ...props
+  }, ref) => {
+    const iconMode = variant !== "link" && isIconButtonSize(size);
+    const resolvedSize = size ?? "md";
+    const resolvedVariant = variant ?? "default";
+    const isLabelless = !iconMode && isIconOnly(children);
+    const adornmentSize = adornmentIconSize(resolvedVariant, resolvedSize);
+    const ariaLabel = ariaLabelProp ?? ((iconMode || isLabelless) && typeof tooltip === "string" ? tooltip : void 0);
+    const content = iconMode ? /* @__PURE__ */ jsx(Icon, { size: iconSizeMap[resolvedSize], children }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(ButtonAdornment, { slot: "button-icon", size: adornmentSize, children: icon }),
+      /* @__PURE__ */ jsx(ButtonLabel, { variant: resolvedVariant, children }),
+      /* @__PURE__ */ jsx(ButtonAdornment, { slot: "button-icon-end", size: adornmentSize, children: iconEnd })
+    ] });
+    const sharedProps = {
+      disabled,
+      // Base UI renders `type="button"` when the prop is absent, which would quietly stop
+      // a form button that relied on the native `submit` default from submitting. Passing
+      // it through, `undefined` included, keeps native semantics: absent stays absent.
+      type,
+      "aria-label": ariaLabel,
+      // Expose the variant so a parent ButtonsGroup can detect FILLED segments in CSS
+      // (filled buttons have an opaque background that hides a border seam, so the group
+      // paints their divider as an inset box-shadow instead — see buttons-group.css).
+      "data-variant": variant,
+      // Icon-mode is a square: a group that overrides the rung has to move the width with
+      // the height or the circle turns into a pill (see buttons-group.css).
+      "data-shape": iconMode ? "icon" : void 0,
+      className: cn(buttonVariants({ variant, size: resolvedSize }), className),
+      ...props
+    };
+    const LegacyComponent = render ? void 0 : asProp;
+    const legacyLinkProps = {
+      ...href === void 0 ? null : { href },
+      ...to === void 0 ? null : { to },
+      ...target === void 0 ? null : { target },
+      ...prefetch === void 0 ? null : { prefetch }
+    };
+    const isLinkVariant = resolvedVariant === "link";
+    const linkHref = href ?? to;
+    const linkRenderProps = {
+      ...linkHref === void 0 ? null : { href: linkHref },
+      ...target === void 0 ? null : { target }
+    };
+    const renderedLink = React__default.isValidElement(render) && isLinkElement(render) ? render : isLinkVariant ? React__default.createElement("a", linkRenderProps) : void 0;
+    const renderedLinkProps = renderedLink?.props;
+    const disabledHref = renderedLink?.type !== "a" && renderedLinkProps?.href !== void 0 ? "" : void 0;
+    const disabledTo = renderedLinkProps?.to !== void 0 ? "" : void 0;
+    const disabledLinkProps = disabled ? {
+      ...isLinkVariant ? null : { href: disabledHref },
+      ...isLinkVariant ? null : { to: disabledTo },
+      "aria-disabled": true,
+      onClick: preventLinkActivation,
+      onAuxClick: preventLinkActivation,
+      onKeyDown: (event) => {
+        if (event.key === "Enter" || event.key === " ") preventLinkActivation(event);
+      }
+    } : void 0;
+    const button = LegacyComponent ? /* @__PURE__ */ jsx(LegacyComponent, { ref, ...legacyLinkProps, ...sharedProps, children: content }) : renderedLink ? React__default.cloneElement(renderedLink, {
+      ref,
+      ...sharedProps,
+      disabled: void 0,
+      ...disabledLinkProps,
+      className: cn(sharedProps.className, renderedLink.props.className),
+      children: content
+    }) : /* @__PURE__ */ jsx(Button$1, { ref, render, ...sharedProps, children: content });
+    if (tooltip) {
+      return /* @__PURE__ */ jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: button }),
+        /* @__PURE__ */ jsx(TooltipContent, { side: tooltipPosition, children: tooltip })
+      ] });
+    }
+    return button;
+  }
+);
+Button.displayName = "Button";
+
+export { Button as B, buttonVariants as b, isIconButtonSize as i };
+//# sourceMappingURL=Button-EGoajBQY.js.map

package/dist/Button-EGoajBQY.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button-EGoajBQY.js","sources":["../src/ds/components/Button/Button.tsx"],"sourcesContent":["import { Button as BaseButton } from '@base-ui/react/button';\nimport { cva } from 'class-variance-authority';\nimport type { VariantProps } from 'class-variance-authority';\nimport React from 'react';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { Icon } from '@/ds/icons/Icon';\nimport { iconSizeClasses, type IconSize } from '@/ds/icons/icon-size-classes';\nimport { controlHeight, controlSizeClasses } from '@/ds/primitives/control-size';\nimport {\n  controlFocusBorderVisible,\n  raisedControlSurfaceStyle,\n  sharedFormElementDisabledStyle,\n} from '@/ds/primitives/form-element';\nimport { controlStateColorTransition, focusRingOffset } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\n// Adornments for text-mode buttons: gap between icon+label and larger radius.\n// - `[data-slot=button-icon]` styles the `<Icon>` wrapper rendered by the `icon` prop — the only\n//   supported way to pair an icon with a label (always on the left, fixed gap).\n// - `[&>svg]` only remains for label-less text-mode buttons (e.g. CopyButton) that pass a bare\n//   SVG as children.\n// Excluded from icon-mode because icon-mode wraps children in `<Icon>` and uses its own\n// `rounded-full` (circle).\nconst TEXT_MODE_ADORNMENTS = cn(\n  'gap-[.75em] rounded-full',\n  '[&>[data-slot=button-icon]]:-ml-[.3em]',\n  '[&>[data-slot=button-icon-end]]:-mr-1',\n  '[&>svg]:mx-[-.3em]',\n);\n\nconst LINK_LAYOUT = cn(\n  'relative size-auto gap-1 rounded-xs px-0 text-label',\n  'before:absolute before:-inset-x-2',\n  '[&>[data-slot=button-icon-end]]:mr-0 [&>[data-slot=button-icon]]:ml-0 [&>svg]:mx-0',\n);\n\nconst LINK_LABEL = cn(\n  'relative inline-flex items-center gap-1',\n  iconSizeClasses.sm,\n  '[&>svg]:shrink-0',\n  'after:absolute after:inset-x-0 after:bottom-0 after:h-px after:origin-left after:scale-x-0 after:bg-current',\n  'after:transition-transform after:duration-fast after:ease-out-custom motion-reduce:after:transition-none',\n);\n\n// An icon is secondary to the label beside it, and on a neutral surface it says so with\n// a colour token rather than opacity. Opacity dims against whatever sits behind the\n// control, so the same glyph clears contrast on one surface and fails on another, and it\n// left icon-only buttons with no hover response at all: only their background moved.\n// Filled variants opt out because there the glyph colour carries the meaning.\nconst NEUTRAL_ICON_STATE = cn(\n  '[&_svg]:text-muted-foreground not-disabled:hover:[&_svg]:text-foreground aria-disabled:[&_svg]:text-muted-foreground',\n);\n\n// eslint-disable-next-line react-refresh/only-export-components -- exported variant helper is part of Button's public API\nexport const buttonVariants = cva(\n  cn(\n    'inline-flex cursor-pointer items-center justify-center',\n    controlStateColorTransition,\n    sharedFormElementDisabledStyle,\n    'aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:text-muted-foreground',\n    controlFocusBorderVisible,\n  ),\n  {\n    variants: {\n      variant: {\n        // The raised card material, the same one a field wears: a neutral filled control is\n        // one material system-wide. No border of its own — the material's rim is its edge,\n        // and focus repaints that rim. Inside a ButtonsGroup the group flattens the rim and\n        // hands every segment the same 1px border instead (see `buttons-group.css`).\n        default: cn(\n          'border-0',\n          raisedControlSurfaceStyle,\n          NEUTRAL_ICON_STATE,\n          'disabled:bg-fill-subtle aria-disabled:bg-fill-subtle',\n        ),\n        // Filled variants take the opaque ladder: their rest fill is a colour, not a rung\n        // layered on the surface, so a state that thinned it would let whatever the button\n        // covers read through the hover it is meant to answer.\n        primary: cn(\n          'border border-transparent bg-fill-inverse text-background not-disabled:hover:bg-fill-inverse-hover not-disabled:active:bg-fill-inverse-active',\n          focusRingOffset,\n          'focus-visible:border-transparent',\n          'disabled:bg-fill-inverse-disabled disabled:text-background/75 aria-disabled:bg-fill-inverse-disabled aria-disabled:text-background/75',\n        ),\n        destructive: cn(\n          'border border-transparent bg-fill-destructive text-fill-destructive-foreground not-disabled:hover:bg-fill-destructive-hover not-disabled:active:bg-fill-destructive-active',\n          focusRingOffset,\n          'focus-visible:border-transparent',\n          'disabled:bg-fill-destructive-disabled disabled:text-fill-destructive-disabled-foreground aria-disabled:bg-fill-destructive-disabled aria-disabled:text-fill-destructive-disabled-foreground',\n        ),\n        'destructive-ghost': cn(\n          'border border-transparent bg-transparent text-destructive-foreground not-disabled:hover:bg-destructive-subtle not-disabled:hover:text-destructive-foreground not-disabled:active:bg-destructive-subtle-active',\n          'disabled:bg-transparent disabled:text-placeholder aria-disabled:bg-transparent aria-disabled:text-placeholder',\n        ),\n        ghost: cn(\n          'border border-transparent bg-transparent text-muted-foreground not-disabled:hover:bg-fill-subtle not-disabled:hover:text-foreground not-disabled:active:bg-fill',\n          'disabled:bg-transparent aria-disabled:bg-transparent',\n        ),\n        link: cn(\n          'border-0 bg-transparent text-muted-foreground not-disabled:hover:text-foreground',\n          'not-disabled:hover:[&>[data-slot=button-label]]:after:scale-x-100 not-disabled:hover:[&>[data-slot=button-label]]:after:duration-normal',\n          focusRingOffset,\n          'disabled:text-placeholder aria-disabled:text-placeholder',\n        ),\n      },\n      size: {\n        sm: cn(controlSizeClasses.sm, iconSizeClasses.sm, 'px-[.9em]', TEXT_MODE_ADORNMENTS),\n        md: cn(controlSizeClasses.md, iconSizeClasses.md, 'px-[.9em]', TEXT_MODE_ADORNMENTS),\n        lg: cn(controlSizeClasses.lg, iconSizeClasses.lg, 'px-[1em]', TEXT_MODE_ADORNMENTS),\n        // Icon sizes: square dimensions, fully rounded → circle. Active state inherits from variant\n        // so icon-mode and text-mode use the same press feedback. The glyph is sized by the `Icon`\n        // wrapper the component puts around an icon-mode child, keyed off the same scale.\n        'icon-sm': cn(controlHeight.sm, 'w-control-sm rounded-full'),\n        'icon-md': cn(controlHeight.md, 'w-control-md rounded-full'),\n        'icon-lg': cn(controlHeight.lg, 'w-control-lg rounded-full'),\n      },\n    },\n    compoundVariants: [\n      { variant: 'link', className: LINK_LAYOUT },\n      { variant: 'link', size: ['sm', 'md', 'icon-sm', 'icon-md'], className: 'before:-inset-y-1' },\n      { variant: 'link', size: ['lg', 'icon-lg'], className: 'before:-inset-y-1.5' },\n    ],\n    defaultVariants: {\n      variant: 'default',\n      size: 'md',\n    },\n  },\n);\n\n// Public types derived from cva — single source of truth. Adding a variant or size to\n// `buttonVariants` automatically updates these unions.\ntype ButtonVariantsProps = VariantProps<typeof buttonVariants>;\nexport type ButtonVariant = NonNullable<ButtonVariantsProps['variant']>;\nexport type ButtonSize = NonNullable<ButtonVariantsProps['size']>;\nexport type IconButtonSize = Extract<ButtonSize, `icon-${string}`>;\nexport type TextButtonSize = Exclude<ButtonSize, IconButtonSize>;\n\nexport interface ButtonProps\n  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'>, ButtonVariantsProps {\n  render?: BaseButton.Props['render'];\n  className?: string;\n  children: React.ReactNode;\n  /** Leading icon, always rendered on the left of the label inside `<Icon>`. Ignored in icon-mode sizes. */\n  icon?: React.ReactNode;\n  iconEnd?: React.ReactNode;\n  tooltip?: React.ReactNode;\n  /** Side of the trigger the tooltip opens on. Defaults to `top`. */\n  tooltipPosition?: 'top' | 'right' | 'bottom' | 'left';\n  /** @deprecated Pass the element through `render` instead: `render={<Link href=\"/x\" />}`. */\n  as?: React.ElementType;\n  /** @deprecated Set it on the element passed to `render`. */\n  href?: string;\n  /** @deprecated Set it on the element passed to `render`. */\n  to?: string;\n  /** @deprecated Set it on the element passed to `render`. */\n  target?: string;\n  /** @deprecated Set it on the element passed to `render`. */\n  prefetch?: boolean | null;\n}\n\n// A link is not a button. `render` always entered `BaseButton`, which warns in\n// development when the resolved element is not a native button. `nativeButton={false}`\n// is the worse fix: Base UI then adds `role=\"button\"` and Enter/Space handling, so a\n// screen reader announces a link as a button. Render links directly instead and keep\n// `BaseButton` for real buttons.\nfunction isLinkElement(\n  element: React.ReactElement,\n): element is React.ReactElement<{ href?: unknown; to?: unknown; className?: string }> {\n  if (element.type === 'a') return true;\n  const { href, to } = element.props as { href?: unknown; to?: unknown };\n  return href !== undefined || to !== undefined;\n}\n\nfunction preventLinkActivation(event: React.SyntheticEvent): void {\n  event.preventDefault();\n  event.stopPropagation();\n}\n\ntype LinkRenderProps = { href?: string; to?: string; target?: string; className?: string };\n\n// One icon step per control step: a glyph is sized by the rung it sits in, so the\n// same nominal size renders the same icon whether it arrives as an icon-mode child,\n// the `icon` prop, or a bare SVG.\nconst iconSizeMap: Record<ButtonSize, IconSize> = {\n  sm: 'sm',\n  md: 'md',\n  lg: 'lg',\n  'icon-sm': 'sm',\n  'icon-md': 'md',\n  'icon-lg': 'lg',\n};\n\nfunction adornmentIconSize(variant: ButtonVariant, size: ButtonSize): IconSize {\n  if (variant === 'link') return 'sm';\n  return iconSizeMap[size];\n}\n\nfunction ButtonAdornment({ slot, size, children }: { slot: string; size: IconSize; children: React.ReactNode }) {\n  if (!children) return undefined;\n  return (\n    <Icon data-slot={slot} size={size}>\n      {children}\n    </Icon>\n  );\n}\n\nfunction ButtonLabel({ variant, children }: { variant: ButtonVariant; children: React.ReactNode }) {\n  if (variant !== 'link') return children;\n  return (\n    <span data-slot=\"button-label\" className={LINK_LABEL}>\n      {children}\n    </span>\n  );\n}\n\n// Walks React children, expanding `<></>` fragments so `isIconOnly` can inspect the real\n// elements inside. `<Button><><Icon/></></Button>` should still count as icon-only.\nfunction flattenChildren(children: React.ReactNode): React.ReactNode[] {\n  const result: React.ReactNode[] = [];\n  React.Children.forEach(children, child => {\n    if (React.isValidElement<{ children?: React.ReactNode }>(child) && child.type === React.Fragment) {\n      result.push(...flattenChildren(child.props.children));\n    } else {\n      result.push(child);\n    }\n  });\n  return result;\n}\n\n// True when every child is a React element (no text/label). Used in text-mode to brighten the\n// SVG of label-less buttons so the glyph reads stronger.\nfunction isIconOnly(children: React.ReactNode): boolean {\n  const flat = flattenChildren(children);\n  return flat.length > 0 && flat.every(child => React.isValidElement(child));\n}\n\n// Type guard: narrows `ButtonSize` to `IconButtonSize`, so an icon-mode button can be\n// told from a text-mode one without a cast.\n// eslint-disable-next-line react-refresh/only-export-components -- shared with Combobox's icon-only trigger\nexport function isIconButtonSize(size: ButtonSize | null | undefined): size is IconButtonSize {\n  return size?.startsWith('icon-') ?? false;\n}\n\nexport const Button = React.forwardRef<HTMLElement, ButtonProps>(\n  (\n    {\n      className,\n      render,\n      as: asProp,\n      href,\n      to,\n      target,\n      prefetch,\n      size,\n      variant = 'default',\n      disabled,\n      children,\n      icon,\n      iconEnd,\n      tooltip,\n      tooltipPosition,\n      'aria-label': ariaLabelProp,\n      type,\n      ...props\n    },\n    ref,\n  ) => {\n    const iconMode = variant !== 'link' && isIconButtonSize(size);\n    const resolvedSize: ButtonSize = size ?? 'md';\n    const resolvedVariant: ButtonVariant = variant ?? 'default';\n    const isLabelless = !iconMode && isIconOnly(children);\n    const adornmentSize = adornmentIconSize(resolvedVariant, resolvedSize);\n\n    // Icon-only buttons need an a11y label. If a string tooltip is provided, reuse it.\n    const ariaLabel = ariaLabelProp ?? ((iconMode || isLabelless) && typeof tooltip === 'string' ? tooltip : undefined);\n\n    const content = iconMode ? (\n      <Icon size={iconSizeMap[resolvedSize]}>{children}</Icon>\n    ) : (\n      <>\n        <ButtonAdornment slot=\"button-icon\" size={adornmentSize}>\n          {icon}\n        </ButtonAdornment>\n        <ButtonLabel variant={resolvedVariant}>{children}</ButtonLabel>\n        <ButtonAdornment slot=\"button-icon-end\" size={adornmentSize}>\n          {iconEnd}\n        </ButtonAdornment>\n      </>\n    );\n\n    const sharedProps = {\n      disabled,\n      // Base UI renders `type=\"button\"` when the prop is absent, which would quietly stop\n      // a form button that relied on the native `submit` default from submitting. Passing\n      // it through, `undefined` included, keeps native semantics: absent stays absent.\n      type,\n      'aria-label': ariaLabel,\n      // Expose the variant so a parent ButtonsGroup can detect FILLED segments in CSS\n      // (filled buttons have an opaque background that hides a border seam, so the group\n      // paints their divider as an inset box-shadow instead — see buttons-group.css).\n      'data-variant': variant,\n      // Icon-mode is a square: a group that overrides the rung has to move the width with\n      // the height or the circle turns into a pill (see buttons-group.css).\n      'data-shape': iconMode ? 'icon' : undefined,\n      className: cn(buttonVariants({ variant, size: resolvedSize }), className),\n      ...props,\n    };\n\n    // The deprecated `as` API keeps its original element path rather than going through\n    // Base UI. Routing it through `render` drops props Base UI does not know about — a\n    // router link loses its `to` and stops navigating — and Base UI warns that a\n    // non-<button> contradicts `nativeButton`.\n    const LegacyComponent = render ? undefined : asProp;\n\n    // Only forward what the caller actually set. Passing `href={undefined}` through to a\n    // router link overwrites the href that link derives from `to`, leaving an anchor that\n    // renders correctly and navigates nowhere.\n    const legacyLinkProps = {\n      ...(href === undefined ? null : { href }),\n      ...(to === undefined ? null : { to }),\n      ...(target === undefined ? null : { target }),\n      ...(prefetch === undefined ? null : { prefetch }),\n    };\n\n    const isLinkVariant = resolvedVariant === 'link';\n    const linkHref = href ?? to;\n    const linkRenderProps: LinkRenderProps = {\n      ...(linkHref === undefined ? null : { href: linkHref }),\n      ...(target === undefined ? null : { target }),\n    };\n    const renderedLink =\n      React.isValidElement(render) && isLinkElement(render)\n        ? render\n        : isLinkVariant\n          ? React.createElement('a', linkRenderProps)\n          : undefined;\n    const renderedLinkProps = renderedLink?.props;\n    const disabledHref = renderedLink?.type !== 'a' && renderedLinkProps?.href !== undefined ? '' : undefined;\n    const disabledTo = renderedLinkProps?.to !== undefined ? '' : undefined;\n    const disabledLinkProps = disabled\n      ? {\n          ...(isLinkVariant ? null : { href: disabledHref }),\n          ...(isLinkVariant ? null : { to: disabledTo }),\n          'aria-disabled': true,\n          onClick: preventLinkActivation,\n          onAuxClick: preventLinkActivation,\n          onKeyDown: (event: React.KeyboardEvent) => {\n            if (event.key === 'Enter' || event.key === ' ') preventLinkActivation(event);\n          },\n        }\n      : undefined;\n\n    const button = LegacyComponent ? (\n      <LegacyComponent ref={ref} {...legacyLinkProps} {...sharedProps}>\n        {content}\n      </LegacyComponent>\n    ) : renderedLink ? (\n      React.cloneElement(renderedLink as React.ReactElement<Record<string, unknown>>, {\n        ref,\n        ...sharedProps,\n        disabled: undefined,\n        ...disabledLinkProps,\n        className: cn(sharedProps.className, renderedLink.props.className),\n        children: content,\n      })\n    ) : (\n      <BaseButton ref={ref} render={render} {...sharedProps}>\n        {content}\n      </BaseButton>\n    );\n\n    if (tooltip) {\n      return (\n        <Tooltip>\n          <TooltipTrigger asChild>{button}</TooltipTrigger>\n          <TooltipContent side={tooltipPosition}>{tooltip}</TooltipContent>\n        </Tooltip>\n      );\n    }\n\n    return button;\n  },\n);\n\nButton.displayName = 'Button';\n"],"names":["React","BaseButton"],"mappings":"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"}

package/dist/Card-BIXkMUyT.cjs

@@ -0,0 +1,101 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const index = require('./index-BM43yKX5.cjs');
+const React = require('react');
+const primitives_formElement = require('./primitives/form-element.cjs.js');
+const primitives_raisedSurface = require('./primitives/raised-surface.cjs.js');
+const primitives_transitions = require('./primitives/transitions.cjs.js');
+const utils_cn = require('./cn-DlOJCxrS.cjs');
+
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const cardVariants = index.cva(
+  utils_cn.cn(primitives_raisedSurface.raisedSurfaceStyle, "rounded-xl transition-all duration-normal ease-out-custom motion-reduce:transition-none"),
+  {
+    variants: {
+      elevation: {
+        flat: "shadow-none",
+        raised: ""
+      },
+      interactive: {
+        true: utils_cn.cn(primitives_raisedSurface.surfaceStateLayerStyle, primitives_formElement.surfaceRimFocus, "cursor-pointer active:scale-99"),
+        false: ""
+      }
+    },
+    compoundVariants: [{ elevation: "flat", interactive: true, class: primitives_transitions.focusRingInset }],
+    defaultVariants: {
+      elevation: "raised",
+      interactive: false
+    }
+  }
+);
+const Card = React__namespace.forwardRef(
+  ({ className, elevation, interactive, as, ...props }, ref) => {
+    const Component = as || (interactive ? "button" : "div");
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Component,
+      {
+        ref,
+        type: Component === "button" ? "button" : void 0,
+        className: utils_cn.cn(cardVariants({ elevation, interactive }), className),
+        ...props
+      }
+    );
+  }
+);
+Card.displayName = "Card";
+function CardLink({ className, elevation, LinkComponent: Link = "a", ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Link, { className: utils_cn.cn(cardVariants({ elevation, interactive: true }), className), ...props });
+}
+const CardHeader = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: utils_cn.cn("flex flex-col space-y-1.5 px-3 py-1", className), ...props }));
+CardHeader.displayName = "CardHeader";
+const CardTitle = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("h3", { ref, className: utils_cn.cn("text-subheading text-foreground", className), ...props }));
+CardTitle.displayName = "CardTitle";
+const CardDescription = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("p", { ref, className: utils_cn.cn("text-caption text-muted-foreground", className), ...props })
+);
+CardDescription.displayName = "CardDescription";
+const cardContentVariants = index.cva("", {
+  variants: {
+    density: {
+      default: "p-3",
+      compact: "p-2"
+    }
+  },
+  defaultVariants: {
+    density: "default"
+  }
+});
+const CardContent = React__namespace.forwardRef(
+  ({ className, density, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: utils_cn.cn(cardContentVariants({ density }), className), ...props })
+);
+CardContent.displayName = "CardContent";
+const CardFooter = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: utils_cn.cn("flex items-center p-3 pt-0", className), ...props }));
+CardFooter.displayName = "CardFooter";
+
+exports.Card = Card;
+exports.CardContent = CardContent;
+exports.CardDescription = CardDescription;
+exports.CardFooter = CardFooter;
+exports.CardHeader = CardHeader;
+exports.CardLink = CardLink;
+exports.CardTitle = CardTitle;
+//# sourceMappingURL=Card-BIXkMUyT.cjs.map

package/dist/Card-BIXkMUyT.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card-BIXkMUyT.cjs","sources":["../src/ds/components/Card/Card.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\nimport { surfaceRimFocus } from '@/ds/primitives/form-element';\nimport { raisedSurfaceStyle, surfaceStateLayerStyle } from '@/ds/primitives/raised-surface';\nimport { focusRingInset } from '@/ds/primitives/transitions';\nimport type { LinkComponent } from '@/ds/types/link-component';\nimport { cn } from '@/lib/utils';\n\nconst cardVariants = cva(\n  cn(raisedSurfaceStyle, 'rounded-xl transition-all duration-normal ease-out-custom motion-reduce:transition-none'),\n  {\n    variants: {\n      elevation: {\n        flat: 'shadow-none',\n        raised: '',\n      },\n      interactive: {\n        true: cn(surfaceStateLayerStyle, surfaceRimFocus, 'cursor-pointer active:scale-99'),\n        false: '',\n      },\n    },\n    compoundVariants: [{ elevation: 'flat', interactive: true, class: focusRingInset }],\n    defaultVariants: {\n      elevation: 'raised',\n      interactive: false,\n    },\n  },\n);\n\nexport type CardProps = React.HTMLAttributes<HTMLDivElement> &\n  VariantProps<typeof cardVariants> & {\n    as?: React.ElementType;\n  };\n\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(\n  ({ className, elevation, interactive, as, ...props }, ref) => {\n    const Component = as || (interactive ? 'button' : 'div');\n\n    return (\n      <Component\n        ref={ref}\n        type={Component === 'button' ? 'button' : undefined}\n        className={cn(cardVariants({ elevation, interactive }), className)}\n        {...props}\n      />\n    );\n  },\n);\nCard.displayName = 'Card';\n\nexport type CardLinkProps = Omit<React.ComponentPropsWithoutRef<'a'>, 'href'> &\n  Omit<VariantProps<typeof cardVariants>, 'interactive'> & {\n    href: string;\n    LinkComponent?: LinkComponent;\n  };\n\nexport function CardLink({ className, elevation, LinkComponent: Link = 'a', ...props }: CardLinkProps) {\n  return <Link className={cn(cardVariants({ elevation, interactive: true }), className)} {...props} />;\n}\n\n// Card Header component\nexport type CardHeaderProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn('flex flex-col space-y-1.5 px-3 py-1', className)} {...props} />\n));\nCardHeader.displayName = 'CardHeader';\n\n// Card Title component\nexport type CardTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\n\nexport const CardTitle = React.forwardRef<HTMLHeadingElement, CardTitleProps>(({ className, ...props }, ref) => (\n  <h3 ref={ref} className={cn('text-subheading text-foreground', className)} {...props} />\n));\nCardTitle.displayName = 'CardTitle';\n\n// Card Description component\nexport type CardDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;\n\nexport const CardDescription = React.forwardRef<HTMLParagraphElement, CardDescriptionProps>(\n  ({ className, ...props }, ref) => (\n    <p ref={ref} className={cn('text-caption text-muted-foreground', className)} {...props} />\n  ),\n);\nCardDescription.displayName = 'CardDescription';\n\n// Card Content component\nconst cardContentVariants = cva('', {\n  variants: {\n    density: {\n      default: 'p-3',\n      compact: 'p-2',\n    },\n  },\n  defaultVariants: {\n    density: 'default',\n  },\n});\n\nexport type CardContentProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof cardContentVariants>;\n\nexport const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(\n  ({ className, density, ...props }, ref) => (\n    <div ref={ref} className={cn(cardContentVariants({ density }), className)} {...props} />\n  ),\n);\nCardContent.displayName = 'CardContent';\n\n// Card Footer component\nexport type CardFooterProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn('flex items-center p-3 pt-0', className)} {...props} />\n));\nCardFooter.displayName = 'CardFooter';\n"],"names":["cva","cn","raisedSurfaceStyle","surfaceStateLayerStyle","surfaceRimFocus","focusRingInset","React","jsx"],"mappings":"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"}

package/dist/Card-DXYPCPLh.js

@@ -0,0 +1,74 @@
+import { jsx } from 'react/jsx-runtime';
+import { c as cva } from './index-CHS9F_Eo.js';
+import * as React from 'react';
+import { surfaceRimFocus } from './primitives/form-element.es.js';
+import { surfaceStateLayerStyle, raisedSurfaceStyle } from './primitives/raised-surface.es.js';
+import { focusRingInset } from './primitives/transitions.es.js';
+import { c as cn } from './cn-CQUhN5Jx.js';
+
+const cardVariants = cva(
+  cn(raisedSurfaceStyle, "rounded-xl transition-all duration-normal ease-out-custom motion-reduce:transition-none"),
+  {
+    variants: {
+      elevation: {
+        flat: "shadow-none",
+        raised: ""
+      },
+      interactive: {
+        true: cn(surfaceStateLayerStyle, surfaceRimFocus, "cursor-pointer active:scale-99"),
+        false: ""
+      }
+    },
+    compoundVariants: [{ elevation: "flat", interactive: true, class: focusRingInset }],
+    defaultVariants: {
+      elevation: "raised",
+      interactive: false
+    }
+  }
+);
+const Card = React.forwardRef(
+  ({ className, elevation, interactive, as, ...props }, ref) => {
+    const Component = as || (interactive ? "button" : "div");
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        ref,
+        type: Component === "button" ? "button" : void 0,
+        className: cn(cardVariants({ elevation, interactive }), className),
+        ...props
+      }
+    );
+  }
+);
+Card.displayName = "Card";
+function CardLink({ className, elevation, LinkComponent: Link = "a", ...props }) {
+  return /* @__PURE__ */ jsx(Link, { className: cn(cardVariants({ elevation, interactive: true }), className), ...props });
+}
+const CardHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col space-y-1.5 px-3 py-1", className), ...props }));
+CardHeader.displayName = "CardHeader";
+const CardTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("h3", { ref, className: cn("text-subheading text-foreground", className), ...props }));
+CardTitle.displayName = "CardTitle";
+const CardDescription = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", { ref, className: cn("text-caption text-muted-foreground", className), ...props })
+);
+CardDescription.displayName = "CardDescription";
+const cardContentVariants = cva("", {
+  variants: {
+    density: {
+      default: "p-3",
+      compact: "p-2"
+    }
+  },
+  defaultVariants: {
+    density: "default"
+  }
+});
+const CardContent = React.forwardRef(
+  ({ className, density, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn(cardContentVariants({ density }), className), ...props })
+);
+CardContent.displayName = "CardContent";
+const CardFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center p-3 pt-0", className), ...props }));
+CardFooter.displayName = "CardFooter";
+
+export { Card as C, CardContent as a, CardDescription as b, CardFooter as c, CardHeader as d, CardLink as e, CardTitle as f };
+//# sourceMappingURL=Card-DXYPCPLh.js.map

package/dist/Card-DXYPCPLh.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card-DXYPCPLh.js","sources":["../src/ds/components/Card/Card.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\nimport { surfaceRimFocus } from '@/ds/primitives/form-element';\nimport { raisedSurfaceStyle, surfaceStateLayerStyle } from '@/ds/primitives/raised-surface';\nimport { focusRingInset } from '@/ds/primitives/transitions';\nimport type { LinkComponent } from '@/ds/types/link-component';\nimport { cn } from '@/lib/utils';\n\nconst cardVariants = cva(\n  cn(raisedSurfaceStyle, 'rounded-xl transition-all duration-normal ease-out-custom motion-reduce:transition-none'),\n  {\n    variants: {\n      elevation: {\n        flat: 'shadow-none',\n        raised: '',\n      },\n      interactive: {\n        true: cn(surfaceStateLayerStyle, surfaceRimFocus, 'cursor-pointer active:scale-99'),\n        false: '',\n      },\n    },\n    compoundVariants: [{ elevation: 'flat', interactive: true, class: focusRingInset }],\n    defaultVariants: {\n      elevation: 'raised',\n      interactive: false,\n    },\n  },\n);\n\nexport type CardProps = React.HTMLAttributes<HTMLDivElement> &\n  VariantProps<typeof cardVariants> & {\n    as?: React.ElementType;\n  };\n\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(\n  ({ className, elevation, interactive, as, ...props }, ref) => {\n    const Component = as || (interactive ? 'button' : 'div');\n\n    return (\n      <Component\n        ref={ref}\n        type={Component === 'button' ? 'button' : undefined}\n        className={cn(cardVariants({ elevation, interactive }), className)}\n        {...props}\n      />\n    );\n  },\n);\nCard.displayName = 'Card';\n\nexport type CardLinkProps = Omit<React.ComponentPropsWithoutRef<'a'>, 'href'> &\n  Omit<VariantProps<typeof cardVariants>, 'interactive'> & {\n    href: string;\n    LinkComponent?: LinkComponent;\n  };\n\nexport function CardLink({ className, elevation, LinkComponent: Link = 'a', ...props }: CardLinkProps) {\n  return <Link className={cn(cardVariants({ elevation, interactive: true }), className)} {...props} />;\n}\n\n// Card Header component\nexport type CardHeaderProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn('flex flex-col space-y-1.5 px-3 py-1', className)} {...props} />\n));\nCardHeader.displayName = 'CardHeader';\n\n// Card Title component\nexport type CardTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\n\nexport const CardTitle = React.forwardRef<HTMLHeadingElement, CardTitleProps>(({ className, ...props }, ref) => (\n  <h3 ref={ref} className={cn('text-subheading text-foreground', className)} {...props} />\n));\nCardTitle.displayName = 'CardTitle';\n\n// Card Description component\nexport type CardDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;\n\nexport const CardDescription = React.forwardRef<HTMLParagraphElement, CardDescriptionProps>(\n  ({ className, ...props }, ref) => (\n    <p ref={ref} className={cn('text-caption text-muted-foreground', className)} {...props} />\n  ),\n);\nCardDescription.displayName = 'CardDescription';\n\n// Card Content component\nconst cardContentVariants = cva('', {\n  variants: {\n    density: {\n      default: 'p-3',\n      compact: 'p-2',\n    },\n  },\n  defaultVariants: {\n    density: 'default',\n  },\n});\n\nexport type CardContentProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof cardContentVariants>;\n\nexport const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(\n  ({ className, density, ...props }, ref) => (\n    <div ref={ref} className={cn(cardContentVariants({ density }), className)} {...props} />\n  ),\n);\nCardContent.displayName = 'CardContent';\n\n// Card Footer component\nexport type CardFooterProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn('flex items-center p-3 pt-0', className)} {...props} />\n));\nCardFooter.displayName = 'CardFooter';\n"],"names":[],"mappings":"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"}

package/dist/EmptyState-FNJu74e8.cjs

@@ -0,0 +1,50 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
+const Txt = require('./Txt-CIS2G5Jx.cjs');
+const utils_cn = require('./cn-DlOJCxrS.cjs');
+
+const defaultIconByTone = {
+  default: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleSlashIcon, {}),
+  error: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleXIcon, {})
+};
+const iconColorByTone = {
+  default: "text-muted-foreground",
+  error: "text-destructive-foreground"
+};
+function EmptyState({
+  tone = "default",
+  iconSlot = defaultIconByTone[tone],
+  titleSlot,
+  descriptionSlot,
+  actionSlot,
+  className,
+  as: HeadingTag = "h3",
+  variant = "inline"
+}) {
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-tone": tone,
+      className: utils_cn.cn(
+        "group/empty-state flex max-w-full flex-col items-center justify-center px-4 py-6 text-center",
+        "transition-opacity duration-normal ease-out-custom",
+        className
+      ),
+      children: [
+        iconSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("mb-3 max-w-full [&>svg]:size-5", iconColorByTone[tone]), children: iconSlot }),
+        /* @__PURE__ */ jsxRuntime.jsx(HeadingTag, { className: "text-subheading text-foreground", children: titleSlot }),
+        descriptionSlot && /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { variant: "caption", tone: "muted", className: "mt-1.5 max-w-md wrap-anywhere", children: descriptionSlot }),
+        actionSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 max-w-full", children: actionSlot })
+      ]
+    }
+  );
+  if (variant === "fill") {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "empty-state-fill", className: "flex h-full items-center-safe justify-center-safe", children: content });
+  }
+  return content;
+}
+
+exports.EmptyState = EmptyState;
+//# sourceMappingURL=EmptyState-FNJu74e8.cjs.map

package/dist/EmptyState-FNJu74e8.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState-FNJu74e8.cjs","sources":["../src/ds/components/EmptyState/EmptyState.tsx"],"sourcesContent":["import { CircleSlashIcon, CircleXIcon } from 'lucide-react';\nimport * as React from 'react';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\ntype EmptyStateTone = 'default' | 'error';\n\nconst defaultIconByTone: Record<EmptyStateTone, React.ReactNode> = {\n  default: <CircleSlashIcon />,\n  error: <CircleXIcon />,\n};\n\nconst iconColorByTone: Record<EmptyStateTone, string> = {\n  default: 'text-muted-foreground',\n  error: 'text-destructive-foreground',\n};\n\nexport type EmptyStateProps = {\n  /** Defaults to the tone's icon. A bare icon renders at 20px; pass `<EmptyStateIllustration />` for artwork. Pass `null` to render no icon. */\n  iconSlot?: React.ReactNode;\n  titleSlot: React.ReactNode;\n  descriptionSlot?: React.ReactNode;\n  actionSlot?: React.ReactNode;\n  className?: string;\n  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  /** Colors the icon or illustration; an icon with its own text color keeps it. */\n  tone?: EmptyStateTone;\n  /**\n   * `inline` (default) renders the block in place.\n   * `fill` centers it in the full height of its parent — the parent must have a definite height.\n   */\n  variant?: 'inline' | 'fill';\n};\n\nexport function EmptyState({\n  tone = 'default',\n  iconSlot = defaultIconByTone[tone],\n  titleSlot,\n  descriptionSlot,\n  actionSlot,\n  className,\n  as: HeadingTag = 'h3',\n  variant = 'inline',\n}: EmptyStateProps) {\n  const content = (\n    <div\n      data-tone={tone}\n      className={cn(\n        'group/empty-state flex max-w-full flex-col items-center justify-center px-4 py-6 text-center',\n        'transition-opacity duration-normal ease-out-custom',\n        className,\n      )}\n    >\n      {iconSlot && <div className={cn('mb-3 max-w-full [&>svg]:size-5', iconColorByTone[tone])}>{iconSlot}</div>}\n      <HeadingTag className=\"text-subheading text-foreground\">{titleSlot}</HeadingTag>\n      {descriptionSlot && (\n        <Txt variant=\"caption\" tone=\"muted\" className=\"mt-1.5 max-w-md wrap-anywhere\">\n          {descriptionSlot}\n        </Txt>\n      )}\n      {actionSlot && <div className=\"mt-4 max-w-full\">{actionSlot}</div>}\n    </div>\n  );\n\n  if (variant === 'fill') {\n    return (\n      <div data-slot=\"empty-state-fill\" className=\"flex h-full items-center-safe justify-center-safe\">\n        {content}\n      </div>\n    );\n  }\n\n  return content;\n}\n"],"names":["CircleSlashIcon","CircleXIcon","jsxs","cn","jsx","Txt"],"mappings":";;;;;;;AAOA,MAAM,iBAAA,GAA6D;AAAA,EACjE,OAAA,iCAAUA,2BAAA,EAAA,EAAgB,CAAA;AAAA,EAC1B,KAAA,iCAAQC,uBAAA,EAAA,EAAY;AACtB,CAAA;AAEA,MAAM,eAAA,GAAkD;AAAA,EACtD,OAAA,EAAS,uBAAA;AAAA,EACT,KAAA,EAAO;AACT,CAAA;AAmBO,SAAS,UAAA,CAAW;AAAA,EACzB,IAAA,GAAO,SAAA;AAAA,EACP,QAAA,GAAW,kBAAkB,IAAI,CAAA;AAAA,EACjC,SAAA;AAAA,EACA,eAAA;AAAA,EACA,UAAA;AAAA,EACA,SAAA;AAAA,EACA,IAAI,UAAA,GAAa,IAAA;AAAA,EACjB,OAAA,GAAU;AACZ,CAAA,EAAoB;AAClB,EAAA,MAAM,OAAA,mBACJC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAW,IAAA;AAAA,MACX,SAAA,EAAWC,WAAA;AAAA,QACT,8FAAA;AAAA,QACA,oDAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,QAAA,oBAAYC,cAAA,CAAC,SAAI,SAAA,EAAWD,WAAA,CAAG,kCAAkC,eAAA,CAAgB,IAAI,CAAC,CAAA,EAAI,QAAA,EAAA,QAAA,EAAS,CAAA;AAAA,wBACpGC,cAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EAAU,iCAAA,EAAmC,QAAA,EAAA,SAAA,EAAU,CAAA;AAAA,QAClE,eAAA,mCACEC,OAAA,EAAA,EAAI,OAAA,EAAQ,WAAU,IAAA,EAAK,OAAA,EAAQ,SAAA,EAAU,+BAAA,EAC3C,QAAA,EAAA,eAAA,EACH,CAAA;AAAA,QAED,UAAA,oBAAcD,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mBAAmB,QAAA,EAAA,UAAA,EAAW;AAAA;AAAA;AAAA,GAC9D;AAGF,EAAA,IAAI,YAAY,MAAA,EAAQ;AACtB,IAAA,sCACG,KAAA,EAAA,EAAI,WAAA,EAAU,kBAAA,EAAmB,SAAA,EAAU,qDACzC,QAAA,EAAA,OAAA,EACH,CAAA;AAAA,EAEJ;AAEA,EAAA,OAAO,OAAA;AACT;;;;"}

package/dist/EmptyState-qVoRkUMf.js

@@ -0,0 +1,48 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { CircleXIcon, CircleSlashIcon } from 'lucide-react';
+import { T as Txt } from './Txt-BtIGLRk1.js';
+import { c as cn } from './cn-CQUhN5Jx.js';
+
+const defaultIconByTone = {
+  default: /* @__PURE__ */ jsx(CircleSlashIcon, {}),
+  error: /* @__PURE__ */ jsx(CircleXIcon, {})
+};
+const iconColorByTone = {
+  default: "text-muted-foreground",
+  error: "text-destructive-foreground"
+};
+function EmptyState({
+  tone = "default",
+  iconSlot = defaultIconByTone[tone],
+  titleSlot,
+  descriptionSlot,
+  actionSlot,
+  className,
+  as: HeadingTag = "h3",
+  variant = "inline"
+}) {
+  const content = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-tone": tone,
+      className: cn(
+        "group/empty-state flex max-w-full flex-col items-center justify-center px-4 py-6 text-center",
+        "transition-opacity duration-normal ease-out-custom",
+        className
+      ),
+      children: [
+        iconSlot && /* @__PURE__ */ jsx("div", { className: cn("mb-3 max-w-full [&>svg]:size-5", iconColorByTone[tone]), children: iconSlot }),
+        /* @__PURE__ */ jsx(HeadingTag, { className: "text-subheading text-foreground", children: titleSlot }),
+        descriptionSlot && /* @__PURE__ */ jsx(Txt, { variant: "caption", tone: "muted", className: "mt-1.5 max-w-md wrap-anywhere", children: descriptionSlot }),
+        actionSlot && /* @__PURE__ */ jsx("div", { className: "mt-4 max-w-full", children: actionSlot })
+      ]
+    }
+  );
+  if (variant === "fill") {
+    return /* @__PURE__ */ jsx("div", { "data-slot": "empty-state-fill", className: "flex h-full items-center-safe justify-center-safe", children: content });
+  }
+  return content;
+}
+
+export { EmptyState as E };
+//# sourceMappingURL=EmptyState-qVoRkUMf.js.map

package/dist/EmptyState-qVoRkUMf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState-qVoRkUMf.js","sources":["../src/ds/components/EmptyState/EmptyState.tsx"],"sourcesContent":["import { CircleSlashIcon, CircleXIcon } from 'lucide-react';\nimport * as React from 'react';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\ntype EmptyStateTone = 'default' | 'error';\n\nconst defaultIconByTone: Record<EmptyStateTone, React.ReactNode> = {\n  default: <CircleSlashIcon />,\n  error: <CircleXIcon />,\n};\n\nconst iconColorByTone: Record<EmptyStateTone, string> = {\n  default: 'text-muted-foreground',\n  error: 'text-destructive-foreground',\n};\n\nexport type EmptyStateProps = {\n  /** Defaults to the tone's icon. A bare icon renders at 20px; pass `<EmptyStateIllustration />` for artwork. Pass `null` to render no icon. */\n  iconSlot?: React.ReactNode;\n  titleSlot: React.ReactNode;\n  descriptionSlot?: React.ReactNode;\n  actionSlot?: React.ReactNode;\n  className?: string;\n  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  /** Colors the icon or illustration; an icon with its own text color keeps it. */\n  tone?: EmptyStateTone;\n  /**\n   * `inline` (default) renders the block in place.\n   * `fill` centers it in the full height of its parent — the parent must have a definite height.\n   */\n  variant?: 'inline' | 'fill';\n};\n\nexport function EmptyState({\n  tone = 'default',\n  iconSlot = defaultIconByTone[tone],\n  titleSlot,\n  descriptionSlot,\n  actionSlot,\n  className,\n  as: HeadingTag = 'h3',\n  variant = 'inline',\n}: EmptyStateProps) {\n  const content = (\n    <div\n      data-tone={tone}\n      className={cn(\n        'group/empty-state flex max-w-full flex-col items-center justify-center px-4 py-6 text-center',\n        'transition-opacity duration-normal ease-out-custom',\n        className,\n      )}\n    >\n      {iconSlot && <div className={cn('mb-3 max-w-full [&>svg]:size-5', iconColorByTone[tone])}>{iconSlot}</div>}\n      <HeadingTag className=\"text-subheading text-foreground\">{titleSlot}</HeadingTag>\n      {descriptionSlot && (\n        <Txt variant=\"caption\" tone=\"muted\" className=\"mt-1.5 max-w-md wrap-anywhere\">\n          {descriptionSlot}\n        </Txt>\n      )}\n      {actionSlot && <div className=\"mt-4 max-w-full\">{actionSlot}</div>}\n    </div>\n  );\n\n  if (variant === 'fill') {\n    return (\n      <div data-slot=\"empty-state-fill\" className=\"flex h-full items-center-safe justify-center-safe\">\n        {content}\n      </div>\n    );\n  }\n\n  return content;\n}\n"],"names":[],"mappings":";;;;;AAOA,MAAM,iBAAA,GAA6D;AAAA,EACjE,OAAA,sBAAU,eAAA,EAAA,EAAgB,CAAA;AAAA,EAC1B,KAAA,sBAAQ,WAAA,EAAA,EAAY;AACtB,CAAA;AAEA,MAAM,eAAA,GAAkD;AAAA,EACtD,OAAA,EAAS,uBAAA;AAAA,EACT,KAAA,EAAO;AACT,CAAA;AAmBO,SAAS,UAAA,CAAW;AAAA,EACzB,IAAA,GAAO,SAAA;AAAA,EACP,QAAA,GAAW,kBAAkB,IAAI,CAAA;AAAA,EACjC,SAAA;AAAA,EACA,eAAA;AAAA,EACA,UAAA;AAAA,EACA,SAAA;AAAA,EACA,IAAI,UAAA,GAAa,IAAA;AAAA,EACjB,OAAA,GAAU;AACZ,CAAA,EAAoB;AAClB,EAAA,MAAM,OAAA,mBACJ,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAW,IAAA;AAAA,MACX,SAAA,EAAW,EAAA;AAAA,QACT,8FAAA;AAAA,QACA,oDAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,QAAA,oBAAY,GAAA,CAAC,SAAI,SAAA,EAAW,EAAA,CAAG,kCAAkC,eAAA,CAAgB,IAAI,CAAC,CAAA,EAAI,QAAA,EAAA,QAAA,EAAS,CAAA;AAAA,wBACpG,GAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EAAU,iCAAA,EAAmC,QAAA,EAAA,SAAA,EAAU,CAAA;AAAA,QAClE,eAAA,wBACE,GAAA,EAAA,EAAI,OAAA,EAAQ,WAAU,IAAA,EAAK,OAAA,EAAQ,SAAA,EAAU,+BAAA,EAC3C,QAAA,EAAA,eAAA,EACH,CAAA;AAAA,QAED,UAAA,oBAAc,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mBAAmB,QAAA,EAAA,UAAA,EAAW;AAAA;AAAA;AAAA,GAC9D;AAGF,EAAA,IAAI,YAAY,MAAA,EAAQ;AACtB,IAAA,2BACG,KAAA,EAAA,EAAI,WAAA,EAAU,kBAAA,EAAmB,SAAA,EAAU,qDACzC,QAAA,EAAA,OAAA,EACH,CAAA;AAAA,EAEJ;AAEA,EAAA,OAAO,OAAA;AACT;;;;"}