silver-ui 0.1.1 → 0.3.0

package/README.md

@@ -47,9 +47,40 @@ import {SideNav, SideNavItem} from 'silver-ui/SideNav';
 
 ## Theming
 
-silver-ui uses CSS variables for theming. Override any `--silver-*` variable to
-customize colors, typography, spacing, radii, and more. All library styles use
-CSS `@layer`, so your overrides always win without specificity battles.
+The easiest way to theme silver-ui is the `<Theme>` component. It maps friendly
+token names to the underlying CSS variables and applies them app-wide or to a
+scoped subtree. Wrap your app (or any branded area) and override the tokens you
+care about:
+
+```tsx
+import {Button, Theme} from 'silver-ui';
+
+export function App() {
+  return (
+    <Theme
+      mode="light"
+      tokens={{
+        colors: {
+          primary: 'teal-500',
+          primaryHover: 'teal-600',
+          primaryActive: 'teal-700',
+        },
+        radii: {componentMd: '0.5rem'},
+        fonts: {body: 'Inter, system-ui, sans-serif'},
+      }}>
+      <Button label="Save" />
+    </Theme>
+  );
+}
+```
+
+Palette references (`teal-500`) and custom CSS values (`#e11d48`, `oklch(...)`,
+`var(...)`) are both supported, and multiple `<Theme>` regions can coexist on
+one page.
+
+Prefer plain CSS? Every component is driven by `--silver-*` variables, so you
+can override them directly. All library styles use CSS `@layer`, so your
+overrides always win without specificity battles.
 
 ```css
 :root {
@@ -64,8 +95,8 @@ CSS `@layer`, so your overrides always win without specificity battles.
 Variables can be scoped to containers, dark mode (`[data-theme="dark"]`), or
 individual instances via `className`/`style` props.
 
-See [THEME.md](THEME.md) for the full variable reference, dark mode details,
-scoped theming examples, and per-instance overrides.
+See [THEME.md](THEME.md) for the full `<Theme>` API, variable reference, dark
+mode details, scoped theming examples, and per-instance overrides.
 
 ## Components
 
@@ -84,7 +115,7 @@ scoped theming examples, and per-instance overrides.
 
 - **Breadcrumbs** — hierarchical page location trail
 - **Link** — polymorphic link with external link handling and router integration
-- **MobileNav** — slide-out drawer for mobile navigation
+- **NavIcon** — circular accent-colored icon container for navigation headers
 - **Pagination** — page navigation controls
 - **SideNav** — vertical side navigation panel with collapsing support
 - **Tabs** — tabbed content switching
@@ -97,6 +128,7 @@ scoped theming examples, and per-instance overrides.
 - **ContextMenu** — right-click context menu
 - **DropdownMenu** — button-triggered dropdown menu
 - **SegmentedControl** — mutually exclusive option selector
+- **SplitButton** — primary action paired with a dropdown menu of related actions
 - **ToggleButton** — button with pressed/unpressed state
 
 ### Data Display
@@ -105,6 +137,7 @@ scoped theming examples, and per-instance overrides.
 - **AvatarGroup** — stacked avatar collection with overflow count
 - **Badge** — small status label with icon support
 - **Blockquote** — styled quotation block
+- **CodeBlock** — read-only code display with line numbers, line highlighting, and copy button
 - **Icon** — renders Lucide icons with size and color tokens
 - **Item** — generic list item with icon, label, and description
 - **Kbd** — keyboard shortcut display with accessible labels

package/dist/chunk-24J3BUKL.js

@@ -0,0 +1,40 @@
+import { cx } from './chunk-PPNETWIP.js';
+import { css } from './chunk-OD4DHHZH.js';
+import { jsx } from 'react/jsx-runtime';
+
+var styles = {
+  base: css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "full",
+    bg: "primary",
+    color: "fg.onPrimary",
+    flexShrink: 0,
+    w: "component.sm",
+    h: "component.sm"
+  })
+};
+function NavIcon({
+  className,
+  "data-testid": dataTestId,
+  icon,
+  ref,
+  style
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cx(styles.base, className),
+      "data-testid": dataTestId,
+      ref,
+      style,
+      children: icon
+    }
+  );
+}
+NavIcon.displayName = "NavIcon";
+
+export { NavIcon };
+//# sourceMappingURL=chunk-24J3BUKL.js.map
+//# sourceMappingURL=chunk-24J3BUKL.js.map

package/dist/chunk-24J3BUKL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavIcon/NavIcon.tsx"],"names":[],"mappings":";;;;AA2BA,IAAM,MAAA,GAAS;AAAA,EACb,MAAM,GAAA,CAAI;AAAA,IACR,OAAA,EAAS,MAAA;AAAA,IACT,UAAA,EAAY,QAAA;AAAA,IACZ,cAAA,EAAgB,QAAA;AAAA,IAChB,YAAA,EAAc,MAAA;AAAA,IACd,EAAA,EAAI,SAAA;AAAA,IACJ,KAAA,EAAO,cAAA;AAAA,IACP,UAAA,EAAY,CAAA;AAAA,IACZ,CAAA,EAAG,cAAA;AAAA,IACH,CAAA,EAAG;AAAA,GACJ;AACH,CAAA;AAMO,SAAS,OAAA,CAAQ;AAAA,EACtB,SAAA;AAAA,EACA,aAAA,EAAe,UAAA;AAAA,EACf,IAAA;AAAA,EACA,GAAA;AAAA,EACA;AACF,CAAA,EAAoC;AAClC,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA,CAAG,MAAA,CAAO,IAAA,EAAM,SAAS,CAAA;AAAA,MACpC,aAAA,EAAa,UAAA;AAAA,MACb,GAAA;AAAA,MACA,KAAA;AAAA,MACC,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA","file":"chunk-24J3BUKL.js","sourcesContent":["import type {CSSProperties, ReactNode, Ref} from 'react';\nimport {css} from 'styled-system/css';\nimport {cx} from '../../internal/cx';\n\nexport interface NavIconProps {\n  /**\n   * Additional CSS class names applied to the root element.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the root element.\n   */\n  'data-testid'?: string;\n  /**\n   * The icon element to render inside the circular background.\n   */\n  icon: ReactNode;\n  /**\n   * Ref forwarded to the root element.\n   */\n  ref?: Ref<HTMLSpanElement>;\n  /**\n   * Inline styles applied to the root element.\n   */\n  style?: CSSProperties;\n}\n\nconst styles = {\n  base: css({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    borderRadius: 'full',\n    bg: 'primary',\n    color: 'fg.onPrimary',\n    flexShrink: 0,\n    w: 'component.sm',\n    h: 'component.sm',\n  }),\n};\n\n/**\n * Circular icon container for navigation headers.\n * Wraps an icon with a circular accent-colored background.\n */\nexport function NavIcon({\n  className,\n  'data-testid': dataTestId,\n  icon,\n  ref,\n  style,\n}: NavIconProps): React.JSX.Element {\n  return (\n    <span\n      className={cx(styles.base, className)}\n      data-testid={dataTestId}\n      ref={ref}\n      style={style}>\n      {icon}\n    </span>\n  );\n}\n\nNavIcon.displayName = 'NavIcon';\n"]}

package/dist/chunk-25FU5AVR.cjs

@@ -0,0 +1,282 @@
+'use strict';
+
+var chunkYBPG5RPR_cjs = require('./chunk-YBPG5RPR.cjs');
+var chunkJMNH45Q3_cjs = require('./chunk-JMNH45Q3.cjs');
+var chunk5QPM5LUS_cjs = require('./chunk-5QPM5LUS.cjs');
+var chunk4TIAKZ4Q_cjs = require('./chunk-4TIAKZ4Q.cjs');
+var chunkSPDVNY2Z_cjs = require('./chunk-SPDVNY2Z.cjs');
+var lucideReact = require('lucide-react');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/Alert/Alert.recipe.ts
+var paddingVariants = {
+  0: { bodyContent: { px: "0", py: "0" } },
+  0.5: { bodyContent: { px: "0.5", py: "0.5" } },
+  1: { bodyContent: { px: "1", py: "1" } },
+  1.5: { bodyContent: { px: "1.5", py: "1.5" } },
+  2: { bodyContent: { px: "2", py: "2" } },
+  3: { bodyContent: { px: "3", py: "3" } },
+  4: { bodyContent: { px: "4", py: "4" } },
+  5: { bodyContent: { px: "5", py: "5" } },
+  6: { bodyContent: { px: "6", py: "6" } },
+  8: { bodyContent: { px: "8", py: "8" } },
+  10: { bodyContent: { px: "10", py: "10" } }
+};
+var alertRecipe = chunk5QPM5LUS_cjs.sva({
+  slots: [
+    "root",
+    "header",
+    "icon",
+    "content",
+    "endArea",
+    "chevron",
+    "body",
+    "bodyContent"
+  ],
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      fontFamily: "body"
+    },
+    header: {
+      display: "flex",
+      alignItems: "flex-start",
+      gap: "2",
+      px: "4",
+      py: "3"
+    },
+    icon: {
+      display: "inline-flex",
+      alignItems: "center",
+      flexShrink: 0
+    },
+    content: {
+      display: "flex",
+      flex: 1,
+      flexDirection: "column",
+      minW: 0
+    },
+    endArea: {
+      display: "flex",
+      alignItems: "center",
+      flexShrink: 0,
+      gap: "2",
+      ms: "auto"
+    },
+    // The body stays mounted so child state and the `aria-controls` target are
+    // preserved; it is collapsed with a `grid-template-rows` 1fr -> 0fr
+    // transition (mirroring `AccordionItem`). `overflow: hidden` lives on this
+    // grid so the body chrome on `bodyContent` is fully clipped when collapsed.
+    body: {
+      display: "grid",
+      gridTemplateRows: "1fr",
+      overflow: "hidden",
+      // `visibility` is transitioned alongside the rows so the content stays
+      // readable while collapsing, then becomes `hidden` (removing it from the
+      // a11y tree and tab order) once closed. The inline `visibility` style in
+      // the component drives the open/closed value.
+      transitionProperty: "grid-template-rows, visibility",
+      transitionDuration: "normal",
+      transitionTimingFunction: "default",
+      "@media (prefers-reduced-motion: reduce)": {
+        transitionDuration: "0.01s"
+      }
+    },
+    bodyContent: {
+      minH: 0,
+      bg: "bg",
+      borderBlockEndWidth: "default",
+      borderColor: "border",
+      borderInlineWidth: "default",
+      borderStyle: "solid",
+      px: "4",
+      py: "3"
+    }
+  },
+  variants: {
+    status: {
+      error: {
+        header: {
+          bg: "surface.red",
+          color: "surface.red.fg",
+          "--silver-text-color": "token(colors.surface.red.fg)",
+          "--silver-text-color-muted": "token(colors.surface.red.fg)"
+        }
+      },
+      info: {
+        header: {
+          bg: "surface.blue",
+          color: "surface.blue.fg",
+          "--silver-text-color": "token(colors.surface.blue.fg)",
+          "--silver-text-color-muted": "token(colors.surface.blue.fg)"
+        }
+      },
+      success: {
+        header: {
+          bg: "surface.green",
+          color: "surface.green.fg",
+          "--silver-text-color": "token(colors.surface.green.fg)",
+          "--silver-text-color-muted": "token(colors.surface.green.fg)"
+        }
+      },
+      warning: {
+        header: {
+          bg: "surface.yellow",
+          color: "surface.yellow.fg",
+          "--silver-text-color": "token(colors.surface.yellow.fg)",
+          "--silver-text-color-muted": "token(colors.surface.yellow.fg)"
+        }
+      }
+    },
+    container: {
+      card: {
+        header: { borderTopRadius: "lg" },
+        bodyContent: { borderBottomRadius: "lg" }
+      },
+      section: {}
+    },
+    // Squares off the header's bottom corners while the body is revealed; the
+    // compound variant rounds them back when there is no expanded content.
+    hasContent: {
+      true: {},
+      false: {}
+    },
+    isCentered: {
+      true: { header: { alignItems: "center" } },
+      false: {}
+    },
+    isExpanded: {
+      true: { chevron: { transform: "rotate(180deg)" } },
+      false: { body: { gridTemplateRows: "0fr" } }
+    },
+    padding: paddingVariants
+  },
+  compoundVariants: [
+    {
+      container: "card",
+      css: { header: { borderBottomRadius: "lg" } },
+      hasContent: false
+    }
+  ],
+  defaultVariants: {
+    container: "card",
+    hasContent: false,
+    isCentered: false,
+    isExpanded: false,
+    status: "info"
+  }
+});
+var statusRole = {
+  error: "alert",
+  info: "status",
+  success: "status",
+  warning: "alert"
+};
+var defaultIcons = {
+  error: /* @__PURE__ */ jsxRuntime.jsx(chunk4TIAKZ4Q_cjs.Icon, { color: "error", icon: lucideReact.XCircle }),
+  info: /* @__PURE__ */ jsxRuntime.jsx(chunk4TIAKZ4Q_cjs.Icon, { color: "info", icon: lucideReact.Info }),
+  success: /* @__PURE__ */ jsxRuntime.jsx(chunk4TIAKZ4Q_cjs.Icon, { color: "success", icon: lucideReact.CheckCircle2 }),
+  warning: /* @__PURE__ */ jsxRuntime.jsx(chunk4TIAKZ4Q_cjs.Icon, { color: "warning", icon: lucideReact.TriangleAlert })
+};
+function Alert({
+  children,
+  className,
+  container = "card",
+  "data-testid": dataTestId,
+  description,
+  endContent,
+  icon,
+  isDefaultExpanded = false,
+  isDismissable = false,
+  onDismiss,
+  padding,
+  ref,
+  status,
+  style,
+  title
+}) {
+  const bodyId = react.useId();
+  const [isDismissed, setIsDismissed] = react.useState(false);
+  const [isExpanded, setIsExpanded] = react.useState(isDefaultExpanded);
+  const hasChildren = children != null;
+  const showContent = hasChildren && isExpanded;
+  const showEndArea = endContent != null || isDismissable || hasChildren;
+  const isSingleLine = description == null && (endContent != null || isDismissable || hasChildren);
+  if (isDismissed) {
+    return null;
+  }
+  const classes = alertRecipe({
+    container,
+    hasContent: showContent,
+    isCentered: isSingleLine,
+    isExpanded,
+    padding,
+    status
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: chunkSPDVNY2Z_cjs.cx(classes.root, className),
+      "data-testid": dataTestId,
+      ref,
+      role: statusRole[status],
+      style,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.header, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: classes.icon, children: icon ?? defaultIcons[status] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.content, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(chunkJMNH45Q3_cjs.Text, { as: "p", type: "label", weight: "semibold", children: title }),
+            description != null ? /* @__PURE__ */ jsxRuntime.jsx(chunkJMNH45Q3_cjs.Text, { as: "p", color: "secondary", type: "supporting", children: description }) : null
+          ] }),
+          showEndArea ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.endArea, children: [
+            endContent,
+            hasChildren ? /* @__PURE__ */ jsxRuntime.jsx(
+              chunkYBPG5RPR_cjs.Button,
+              {
+                "aria-controls": bodyId,
+                "aria-expanded": isExpanded,
+                className: classes.chevron,
+                icon: lucideReact.ChevronDown,
+                isIconOnly: true,
+                label: isExpanded ? "Collapse" : "Expand",
+                onClick: () => setIsExpanded((value) => !value),
+                size: "sm",
+                variant: "ghost"
+              }
+            ) : null,
+            isDismissable ? /* @__PURE__ */ jsxRuntime.jsx(
+              chunkYBPG5RPR_cjs.Button,
+              {
+                icon: lucideReact.X,
+                isIconOnly: true,
+                label: "Dismiss",
+                onClick: () => {
+                  setIsDismissed(true);
+                  onDismiss?.();
+                },
+                size: "sm",
+                variant: "ghost"
+              }
+            ) : null
+          ] }) : null
+        ] }),
+        hasChildren ? /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: classes.body,
+            id: bodyId,
+            style: { visibility: isExpanded ? void 0 : "hidden" },
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.bodyContent, children })
+          }
+        ) : null
+      ]
+    }
+  );
+}
+Alert.displayName = "Alert";
+
+exports.Alert = Alert;
+//# sourceMappingURL=chunk-25FU5AVR.cjs.map
+//# sourceMappingURL=chunk-25FU5AVR.cjs.map

package/dist/chunk-25FU5AVR.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Alert/Alert.recipe.ts","../src/components/Alert/Alert.tsx"],"names":["sva","jsx","Icon","XCircle","Info","CheckCircle2","TriangleAlert","useId","useState","jsxs","cx","Text","Button","ChevronDown","X"],"mappings":"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","file":"chunk-25FU5AVR.cjs","sourcesContent":["import {sva, type RecipeVariantProps} from 'styled-system/css';\n\n/**\n * Symmetric padding overrides for the collapsible body. Keys mirror the\n * `SpacingToken` scale so the `padding` prop maps onto build-time-validated\n * spacing tokens instead of a runtime token lookup.\n */\nconst paddingVariants = {\n  0: {bodyContent: {px: '0', py: '0'}},\n  0.5: {bodyContent: {px: '0.5', py: '0.5'}},\n  1: {bodyContent: {px: '1', py: '1'}},\n  1.5: {bodyContent: {px: '1.5', py: '1.5'}},\n  2: {bodyContent: {px: '2', py: '2'}},\n  3: {bodyContent: {px: '3', py: '3'}},\n  4: {bodyContent: {px: '4', py: '4'}},\n  5: {bodyContent: {px: '5', py: '5'}},\n  6: {bodyContent: {px: '6', py: '6'}},\n  8: {bodyContent: {px: '8', py: '8'}},\n  10: {bodyContent: {px: '10', py: '10'}},\n};\n\nexport const alertRecipe = sva({\n  slots: [\n    'root',\n    'header',\n    'icon',\n    'content',\n    'endArea',\n    'chevron',\n    'body',\n    'bodyContent',\n  ],\n  base: {\n    root: {\n      display: 'flex',\n      flexDirection: 'column',\n      fontFamily: 'body',\n    },\n    header: {\n      display: 'flex',\n      alignItems: 'flex-start',\n      gap: '2',\n      px: '4',\n      py: '3',\n    },\n    icon: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      flexShrink: 0,\n    },\n    content: {\n      display: 'flex',\n      flex: 1,\n      flexDirection: 'column',\n      minW: 0,\n    },\n    endArea: {\n      display: 'flex',\n      alignItems: 'center',\n      flexShrink: 0,\n      gap: '2',\n      ms: 'auto',\n    },\n    // The body stays mounted so child state and the `aria-controls` target are\n    // preserved; it is collapsed with a `grid-template-rows` 1fr -> 0fr\n    // transition (mirroring `AccordionItem`). `overflow: hidden` lives on this\n    // grid so the body chrome on `bodyContent` is fully clipped when collapsed.\n    body: {\n      display: 'grid',\n      gridTemplateRows: '1fr',\n      overflow: 'hidden',\n      // `visibility` is transitioned alongside the rows so the content stays\n      // readable while collapsing, then becomes `hidden` (removing it from the\n      // a11y tree and tab order) once closed. The inline `visibility` style in\n      // the component drives the open/closed value.\n      transitionProperty: 'grid-template-rows, visibility',\n      transitionDuration: 'normal',\n      transitionTimingFunction: 'default',\n      '@media (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01s',\n      },\n    },\n    bodyContent: {\n      minH: 0,\n      bg: 'bg',\n      borderBlockEndWidth: 'default',\n      borderColor: 'border',\n      borderInlineWidth: 'default',\n      borderStyle: 'solid',\n      px: '4',\n      py: '3',\n    },\n  },\n  variants: {\n    status: {\n      error: {\n        header: {\n          bg: 'surface.red',\n          color: 'surface.red.fg',\n          '--silver-text-color': 'token(colors.surface.red.fg)',\n          '--silver-text-color-muted': 'token(colors.surface.red.fg)',\n        },\n      },\n      info: {\n        header: {\n          bg: 'surface.blue',\n          color: 'surface.blue.fg',\n          '--silver-text-color': 'token(colors.surface.blue.fg)',\n          '--silver-text-color-muted': 'token(colors.surface.blue.fg)',\n        },\n      },\n      success: {\n        header: {\n          bg: 'surface.green',\n          color: 'surface.green.fg',\n          '--silver-text-color': 'token(colors.surface.green.fg)',\n          '--silver-text-color-muted': 'token(colors.surface.green.fg)',\n        },\n      },\n      warning: {\n        header: {\n          bg: 'surface.yellow',\n          color: 'surface.yellow.fg',\n          '--silver-text-color': 'token(colors.surface.yellow.fg)',\n          '--silver-text-color-muted': 'token(colors.surface.yellow.fg)',\n        },\n      },\n    },\n    container: {\n      card: {\n        header: {borderTopRadius: 'lg'},\n        bodyContent: {borderBottomRadius: 'lg'},\n      },\n      section: {},\n    },\n    // Squares off the header's bottom corners while the body is revealed; the\n    // compound variant rounds them back when there is no expanded content.\n    hasContent: {\n      true: {},\n      false: {},\n    },\n    isCentered: {\n      true: {header: {alignItems: 'center'}},\n      false: {},\n    },\n    isExpanded: {\n      true: {chevron: {transform: 'rotate(180deg)'}},\n      false: {body: {gridTemplateRows: '0fr'}},\n    },\n    padding: paddingVariants,\n  },\n  compoundVariants: [\n    {\n      container: 'card',\n      css: {header: {borderBottomRadius: 'lg'}},\n      hasContent: false,\n    },\n  ],\n  defaultVariants: {\n    container: 'card',\n    hasContent: false,\n    isCentered: false,\n    isExpanded: false,\n    status: 'info',\n  },\n});\n\nexport type AlertVariants = RecipeVariantProps<typeof alertRecipe>;\n","import {\n  CheckCircle2,\n  ChevronDown,\n  Info,\n  TriangleAlert,\n  X,\n  XCircle,\n} from 'lucide-react';\nimport {\n  useId,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport {cx} from '../../internal/cx';\nimport type {SpacingToken} from '../../internal/spacingTokens';\nimport {Button} from '../Button';\nimport {Icon} from '../Icon';\nimport {Text} from '../Text';\nimport {alertRecipe, type AlertVariants} from './Alert.recipe';\n\n/**\n * Derived from the recipe's `container` variant so the prop stays in sync with\n * the styles.\n */\nexport type AlertContainer = NonNullable<\n  NonNullable<AlertVariants>['container']\n>;\n/**\n * Derived from the recipe's `status` variant so the prop stays in sync with the\n * styles.\n */\nexport type AlertStatus = NonNullable<NonNullable<AlertVariants>['status']>;\n\nexport interface AlertProps {\n  /**\n   * Extra content rendered below the alert header in a collapsible area.\n   */\n  children?: ReactNode;\n  /**\n   * Additional CSS class names applied to the root element.\n   */\n  className?: string;\n  /**\n   * Visual container style.\n   * @default 'card'\n   */\n  container?: AlertContainer;\n  /**\n   * Test ID applied to the root element.\n   */\n  'data-testid'?: string;\n  /**\n   * Supporting description displayed below the title.\n   */\n  description?: ReactNode;\n  /**\n   * Content rendered at the end of the header, before collapse and dismiss controls.\n   */\n  endContent?: ReactNode;\n  /**\n   * Custom status icon. A default icon is rendered when omitted.\n   */\n  icon?: ReactNode;\n  /**\n   * Whether collapsible children are expanded initially.\n   * @default false\n   */\n  isDefaultExpanded?: boolean;\n  /**\n   * Whether the alert can be dismissed.\n   * @default false\n   */\n  isDismissable?: boolean;\n  /**\n   * Called when the dismiss button is clicked.\n   */\n  onDismiss?: () => void;\n  /**\n   * Inner padding step.\n   * @default 4\n   */\n  padding?: SpacingToken;\n  /**\n   * Ref forwarded to the root element.\n   */\n  ref?: Ref<HTMLDivElement>;\n  /**\n   * Status controlling role, icon, and color.\n   */\n  status: AlertStatus;\n  /**\n   * Inline styles applied to the root element.\n   */\n  style?: CSSProperties;\n  /**\n   * Primary alert title.\n   */\n  title: ReactNode;\n}\n\nconst statusRole: Record<AlertStatus, 'alert' | 'status'> = {\n  error: 'alert',\n  info: 'status',\n  success: 'status',\n  warning: 'alert',\n};\n\nconst defaultIcons: Record<AlertStatus, ReactNode> = {\n  error: <Icon color=\"error\" icon={XCircle} />,\n  info: <Icon color=\"info\" icon={Info} />,\n  success: <Icon color=\"success\" icon={CheckCircle2} />,\n  warning: <Icon color=\"warning\" icon={TriangleAlert} />,\n};\n\n/**\n * Displays a contextual message with status-based styling, an optional\n * collapsible body, and dismiss functionality.\n */\nexport function Alert({\n  children,\n  className,\n  container = 'card',\n  'data-testid': dataTestId,\n  description,\n  endContent,\n  icon,\n  isDefaultExpanded = false,\n  isDismissable = false,\n  onDismiss,\n  padding,\n  ref,\n  status,\n  style,\n  title,\n}: AlertProps): React.JSX.Element | null {\n  const bodyId = useId();\n  const [isDismissed, setIsDismissed] = useState(false);\n  const [isExpanded, setIsExpanded] = useState(isDefaultExpanded);\n  const hasChildren = children != null;\n  // The body is kept mounted whenever there are children (so child state and\n  // the `aria-controls` target survive collapsing); `isExpanded` only drives\n  // the visual collapse. `showContent` reflects whether the body is currently\n  // revealed, which the header uses to square off its bottom corners.\n  const showContent = hasChildren && isExpanded;\n  const showEndArea = endContent != null || isDismissable || hasChildren;\n  const isSingleLine =\n    description == null && (endContent != null || isDismissable || hasChildren);\n\n  if (isDismissed) {\n    return null;\n  }\n\n  const classes = alertRecipe({\n    container,\n    hasContent: showContent,\n    isCentered: isSingleLine,\n    isExpanded,\n    padding,\n    status,\n  });\n\n  return (\n    <div\n      className={cx(classes.root, className)}\n      data-testid={dataTestId}\n      ref={ref}\n      role={statusRole[status]}\n      style={style}>\n      <div className={classes.header}>\n        <span aria-hidden=\"true\" className={classes.icon}>\n          {icon ?? defaultIcons[status]}\n        </span>\n        <div className={classes.content}>\n          <Text as=\"p\" type=\"label\" weight=\"semibold\">\n            {title}\n          </Text>\n          {description != null ? (\n            <Text as=\"p\" color=\"secondary\" type=\"supporting\">\n              {description}\n            </Text>\n          ) : null}\n        </div>\n        {showEndArea ? (\n          <div className={classes.endArea}>\n            {endContent}\n            {hasChildren ? (\n              <Button\n                aria-controls={bodyId}\n                aria-expanded={isExpanded}\n                className={classes.chevron}\n                icon={ChevronDown}\n                isIconOnly\n                label={isExpanded ? 'Collapse' : 'Expand'}\n                onClick={() => setIsExpanded(value => !value)}\n                size=\"sm\"\n                variant=\"ghost\"\n              />\n            ) : null}\n            {isDismissable ? (\n              <Button\n                icon={X}\n                isIconOnly\n                label=\"Dismiss\"\n                onClick={() => {\n                  setIsDismissed(true);\n                  onDismiss?.();\n                }}\n                size=\"sm\"\n                variant=\"ghost\"\n              />\n            ) : null}\n          </div>\n        ) : null}\n      </div>\n      {hasChildren ? (\n        <div\n          className={classes.body}\n          id={bodyId}\n          style={{visibility: isExpanded ? undefined : 'hidden'}}>\n          <div className={classes.bodyContent}>{children}</div>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\nAlert.displayName = 'Alert';\n"]}

package/dist/{chunk-BSBEPQLM.cjs → chunk-276LEL3G.cjs}

@@ -1,13 +1,13 @@
 'use strict';
 
 var chunk2OXKEUKG_cjs = require('./chunk-2OXKEUKG.cjs');
-var chunkJAX62FUE_cjs = require('./chunk-JAX62FUE.cjs');
+var chunkJRBQKFVO_cjs = require('./chunk-JRBQKFVO.cjs');
 var chunkSPDVNY2Z_cjs = require('./chunk-SPDVNY2Z.cjs');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
 // src/components/ButtonGroup/ButtonGroup.recipe.ts
-var buttonGroupRecipe = chunkJAX62FUE_cjs.cva({
+var buttonGroupRecipe = chunkJRBQKFVO_cjs.cva({
   base: {
     display: "inline-flex",
     alignItems: "stretch",
@@ -23,28 +23,37 @@ var buttonGroupRecipe = chunkJAX62FUE_cjs.cva({
     orientation: {
       horizontal: {
         flexDirection: "row",
-        "& > :not(:first-child):is(button, a), & > :not(:first-child) :where(button, a)": {
+        "& > :not(:first-child):is(button, a), & > :not(:first-child) :where(button, a):not([popover] *)": {
           borderTopLeftRadius: 0,
           borderBottomLeftRadius: 0,
           borderInlineStartWidth: "default",
           borderInlineStartStyle: "solid",
           borderInlineStartColor: "border"
         },
-        "& > :not(:last-child):is(button, a), & > :not(:last-child) :where(button, a)": {
+        // `:has(~ :not([popover]))` rather than `:not(:last-child)` so that a
+        // trailing `[popover]` sibling (e.g. DropdownMenu's floating content,
+        // which is display:none but still counts for :last-child) does not
+        // strip the end radius from the last visible button in the group. The
+        // `:not([popover] *)` on the descendant clause keeps these joins from
+        // leaking onto buttons rendered inside a child's popover (menu items).
+        "& > :has(~ :not([popover])):is(button, a), & > :has(~ :not([popover])) :where(button, a):not([popover] *)": {
           borderTopRightRadius: 0,
           borderBottomRightRadius: 0
         }
       },
       vertical: {
         flexDirection: "column",
-        "& > :not(:first-child):is(button, a), & > :not(:first-child) :where(button, a)": {
+        "& > :not(:first-child):is(button, a), & > :not(:first-child) :where(button, a):not([popover] *)": {
           borderTopLeftRadius: 0,
           borderTopRightRadius: 0,
           borderBlockStartWidth: "default",
           borderBlockStartStyle: "solid",
           borderBlockStartColor: "border"
         },
-        "& > :not(:last-child):is(button, a), & > :not(:last-child) :where(button, a)": {
+        // See the horizontal note above: skip trailing `[popover]` siblings so
+        // the last visible button keeps its bottom radius, and exclude popover
+        // descendants so menu items don't inherit the group joins.
+        "& > :has(~ :not([popover])):is(button, a), & > :has(~ :not([popover])) :where(button, a):not([popover] *)": {
           borderBottomLeftRadius: 0,
           borderBottomRightRadius: 0
         }
@@ -88,6 +97,5 @@ function ButtonGroup({
 ButtonGroup.displayName = "ButtonGroup";
 
 exports.ButtonGroup = ButtonGroup;
-exports.buttonGroupRecipe = buttonGroupRecipe;
-//# sourceMappingURL=chunk-BSBEPQLM.cjs.map
-//# sourceMappingURL=chunk-BSBEPQLM.cjs.map
+//# sourceMappingURL=chunk-276LEL3G.cjs.map
+//# sourceMappingURL=chunk-276LEL3G.cjs.map

package/dist/chunk-276LEL3G.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ButtonGroup/ButtonGroup.recipe.ts","../src/components/ButtonGroup/ButtonGroup.tsx"],"names":["cva","useMemo","jsx","ButtonGroupContext","cx"],"mappings":";;;;;;;;;AAEO,IAAM,oBAAoBA,qBAAA,CAAI;AAAA,EACnC,IAAA,EAAM;AAAA,IACJ,OAAA,EAAS,aAAA;AAAA,IACT,UAAA,EAAY,SAAA;AAAA,IACZ,SAAA,EAAW,SAAA;AAAA,IACX,qBAAA,EAAuB;AAAA,MACrB,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,mCAAA,EAAqC;AAAA,MACnC,MAAA,EAAQ;AAAA;AACV,GACF;AAAA,EACA,QAAA,EAAU;AAAA,IACR,WAAA,EAAa;AAAA,MACX,UAAA,EAAY;AAAA,QACV,aAAA,EAAe,KAAA;AAAA,QACf,iGAAA,EACE;AAAA,UACE,mBAAA,EAAqB,CAAA;AAAA,UACrB,sBAAA,EAAwB,CAAA;AAAA,UACxB,sBAAA,EAAwB,SAAA;AAAA,UACxB,sBAAA,EAAwB,OAAA;AAAA,UACxB,sBAAA,EAAwB;AAAA,SAC1B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAOF,2GAAA,EACE;AAAA,UACE,oBAAA,EAAsB,CAAA;AAAA,UACtB,uBAAA,EAAyB;AAAA;AAC3B,OACJ;AAAA,MACA,QAAA,EAAU;AAAA,QACR,aAAA,EAAe,QAAA;AAAA,QACf,iGAAA,EACE;AAAA,UACE,mBAAA,EAAqB,CAAA;AAAA,UACrB,oBAAA,EAAsB,CAAA;AAAA,UACtB,qBAAA,EAAuB,SAAA;AAAA,UACvB,qBAAA,EAAuB,OAAA;AAAA,UACvB,qBAAA,EAAuB;AAAA,SACzB;AAAA;AAAA;AAAA;AAAA,QAIF,2GAAA,EACE;AAAA,UACE,sBAAA,EAAwB,CAAA;AAAA,UACxB,uBAAA,EAAyB;AAAA;AAC3B;AACJ;AACF,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,WAAA,EAAa;AAAA;AAEjB,CAAC,CAAA;ACLM,SAAS,WAAA,CAAY;AAAA,EAC1B,QAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA,EAAe,UAAA;AAAA,EACf,UAAA,GAAa,KAAA;AAAA,EACb,KAAA;AAAA,EACA,WAAA,GAAc,YAAA;AAAA,EACd,GAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP;AACF,CAAA,EAAwC;AACtC,EAAA,MAAM,YAAA,GAAeC,aAAA;AAAA,IACnB,OAAO,EAAC,UAAA,EAAY,WAAA,EAAa,IAAA,EAAI,CAAA;AAAA,IACrC,CAAC,UAAA,EAAY,WAAA,EAAa,IAAI;AAAA,GAChC;AAEA,EAAA,uBACEC,cAAA,CAACC,oCAAA,EAAA,EAAmB,KAAA,EAAO,YAAA,EACzB,QAAA,kBAAAD,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,iBAAe,UAAA,IAAc,MAAA;AAAA,MAC7B,YAAA,EAAY,KAAA;AAAA,MACZ,WAAWE,oBAAA,CAAG,iBAAA,CAAkB,EAAC,WAAA,EAAY,GAAG,SAAS,CAAA;AAAA,MACzD,kBAAA,EAAkB,WAAA;AAAA,MAClB,aAAA,EAAa,UAAA;AAAA,MACb,GAAA;AAAA,MACA,IAAA,EAAK,OAAA;AAAA,MACL,KAAA;AAAA,MACC;AAAA;AAAA,GACH,EACF,CAAA;AAEJ;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA","file":"chunk-276LEL3G.cjs","sourcesContent":["import {cva, type RecipeVariantProps} from 'styled-system/css';\n\nexport const buttonGroupRecipe = cva({\n  base: {\n    display: 'inline-flex',\n    alignItems: 'stretch',\n    isolation: 'isolate',\n    '& :where(button, a)': {\n      position: 'relative',\n    },\n    '& :where(button, a):focus-visible': {\n      zIndex: 1,\n    },\n  },\n  variants: {\n    orientation: {\n      horizontal: {\n        flexDirection: 'row',\n        '& > :not(:first-child):is(button, a), & > :not(:first-child) :where(button, a):not([popover] *)':\n          {\n            borderTopLeftRadius: 0,\n            borderBottomLeftRadius: 0,\n            borderInlineStartWidth: 'default',\n            borderInlineStartStyle: 'solid',\n            borderInlineStartColor: 'border',\n          },\n        // `:has(~ :not([popover]))` rather than `:not(:last-child)` so that a\n        // trailing `[popover]` sibling (e.g. DropdownMenu's floating content,\n        // which is display:none but still counts for :last-child) does not\n        // strip the end radius from the last visible button in the group. The\n        // `:not([popover] *)` on the descendant clause keeps these joins from\n        // leaking onto buttons rendered inside a child's popover (menu items).\n        '& > :has(~ :not([popover])):is(button, a), & > :has(~ :not([popover])) :where(button, a):not([popover] *)':\n          {\n            borderTopRightRadius: 0,\n            borderBottomRightRadius: 0,\n          },\n      },\n      vertical: {\n        flexDirection: 'column',\n        '& > :not(:first-child):is(button, a), & > :not(:first-child) :where(button, a):not([popover] *)':\n          {\n            borderTopLeftRadius: 0,\n            borderTopRightRadius: 0,\n            borderBlockStartWidth: 'default',\n            borderBlockStartStyle: 'solid',\n            borderBlockStartColor: 'border',\n          },\n        // See the horizontal note above: skip trailing `[popover]` siblings so\n        // the last visible button keeps its bottom radius, and exclude popover\n        // descendants so menu items don't inherit the group joins.\n        '& > :has(~ :not([popover])):is(button, a), & > :has(~ :not([popover])) :where(button, a):not([popover] *)':\n          {\n            borderBottomLeftRadius: 0,\n            borderBottomRightRadius: 0,\n          },\n      },\n    },\n  },\n  defaultVariants: {\n    orientation: 'horizontal',\n  },\n});\n\nexport type ButtonGroupVariants = RecipeVariantProps<typeof buttonGroupRecipe>;\n","import type {CSSProperties, ReactNode, Ref} from 'react';\nimport {useMemo} from 'react';\nimport {cx} from '../../internal/cx';\nimport type {ButtonSize} from '../Button/Button';\nimport {buttonGroupRecipe} from './ButtonGroup.recipe';\nimport {\n  ButtonGroupContext,\n  type ButtonGroupOrientation,\n} from './ButtonGroupContext';\n\n/**\n * Groups related Buttons and propagates shared size, disabled state, and\n * orientation to child Buttons.\n */\nexport interface ButtonGroupProps {\n  /**\n   * Direct children should be `<Button>` elements.\n   */\n  children: ReactNode;\n  /**\n   * Additional CSS class names applied to the root element.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the root element.\n   */\n  'data-testid'?: string;\n  /**\n   * Whether all buttons in the group are disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * Accessible label for the group.\n   */\n  label: string;\n  /**\n   * Orientation for layout. Default is `horizontal`.\n   */\n  orientation?: ButtonGroupOrientation;\n  /**\n   * Ref forwarded to the root element.\n   */\n  ref?: Ref<HTMLDivElement>;\n  /**\n   * Default size for Buttons in the group. Individual Buttons can override it.\n   */\n  size?: ButtonSize;\n  /**\n   * Inline styles applied to the root element.\n   */\n  style?: CSSProperties;\n}\n\n/**\n * Groups related Buttons and propagates shared size, disabled state, and\n * orientation to child Buttons.\n */\nexport function ButtonGroup({\n  children,\n  className,\n  'data-testid': dataTestId,\n  isDisabled = false,\n  label,\n  orientation = 'horizontal',\n  ref,\n  size = 'md',\n  style,\n}: ButtonGroupProps): React.JSX.Element {\n  const contextValue = useMemo(\n    () => ({isDisabled, orientation, size}),\n    [isDisabled, orientation, size],\n  );\n\n  return (\n    <ButtonGroupContext value={contextValue}>\n      <div\n        aria-disabled={isDisabled || undefined}\n        aria-label={label}\n        className={cx(buttonGroupRecipe({orientation}), className)}\n        data-orientation={orientation}\n        data-testid={dataTestId}\n        ref={ref}\n        role=\"group\"\n        style={style}>\n        {children}\n      </div>\n    </ButtonGroupContext>\n  );\n}\n\nButtonGroup.displayName = 'ButtonGroup';\n"]}

package/dist/{chunk-EETTQWW5.cjs → chunk-2D6SGEPH.cjs}

@@ -1,18 +1,20 @@
 'use strict';
 
-var chunkI6IGTQLG_cjs = require('./chunk-I6IGTQLG.cjs');
-var chunk5G3BY75L_cjs = require('./chunk-5G3BY75L.cjs');
-var chunk2WP6NYYY_cjs = require('./chunk-2WP6NYYY.cjs');
-var chunkPHFEQG4E_cjs = require('./chunk-PHFEQG4E.cjs');
+var chunkVXBVSYPA_cjs = require('./chunk-VXBVSYPA.cjs');
+var chunkKFEXS6OK_cjs = require('./chunk-KFEXS6OK.cjs');
+var chunk2P6D43V2_cjs = require('./chunk-2P6D43V2.cjs');
+var chunkYBPG5RPR_cjs = require('./chunk-YBPG5RPR.cjs');
+var chunkYXYD5HKL_cjs = require('./chunk-YXYD5HKL.cjs');
+var chunk4TIAKZ4Q_cjs = require('./chunk-4TIAKZ4Q.cjs');
 var chunkSPDVNY2Z_cjs = require('./chunk-SPDVNY2Z.cjs');
-var chunkAZDWQGAX_cjs = require('./chunk-AZDWQGAX.cjs');
+var chunkRU6JG3FS_cjs = require('./chunk-RU6JG3FS.cjs');
 var polyfill = require('@js-temporal/polyfill');
 var lucideReact = require('lucide-react');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
 var styles = {
-  input: chunkAZDWQGAX_cjs.css({
+  input: chunkRU6JG3FS_cjs.css({
     "&::-webkit-calendar-picker-indicator": {
       display: "none"
     }
@@ -65,11 +67,11 @@ function TimeInput({
 }) {
   const inputId = react.useId();
   const descriptionID = description != null ? `${inputId}-description` : void 0;
-  const statusMessageID = chunk5G3BY75L_cjs.getStatusMessageID(inputId, status);
-  const describedBy = chunk5G3BY75L_cjs.getDescribedBy(descriptionID, statusMessageID);
-  const necessity = { isOptional, isRequired };
+  const statusMessageID = chunk2P6D43V2_cjs.getStatusMessageID(inputId, status);
+  const describedBy = chunk2P6D43V2_cjs.getDescribedBy(descriptionID, statusMessageID);
+  const necessity = chunkKFEXS6OK_cjs.getNecessity(isOptional, isRequired);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkI6IGTQLG_cjs.Field,
+    chunkKFEXS6OK_cjs.Field,
     {
       className,
       description,
@@ -86,13 +88,13 @@ function TimeInput({
       children: /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: chunkI6IGTQLG_cjs.inputRecipe({
+          className: chunkVXBVSYPA_cjs.inputRecipe({
             size,
             status: status?.type,
             isDisabled
           }),
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: chunkI6IGTQLG_cjs.inputStyles.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(chunkPHFEQG4E_cjs.Icon, { icon: lucideReact.Clock, size: "sm" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: chunkVXBVSYPA_cjs.inputStyles.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(chunk4TIAKZ4Q_cjs.Icon, { icon: lucideReact.Clock, size: "sm" }) }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "input",
               {
@@ -101,7 +103,7 @@ function TimeInput({
                 "aria-invalid": status?.type === "error" || void 0,
                 "aria-required": isRequired ?? void 0,
                 autoFocus: hasAutoFocus,
-                className: chunkSPDVNY2Z_cjs.cx(chunkI6IGTQLG_cjs.inputStyles.control, styles.input),
+                className: chunkSPDVNY2Z_cjs.cx(chunkVXBVSYPA_cjs.inputStyles.control, styles.input),
                 "data-autofocus": hasAutoFocus || void 0,
                 "data-testid": dataTestId,
                 disabled: isDisabled,
@@ -118,17 +120,18 @@ function TimeInput({
               }
             ),
             hasClear && value != null && !isDisabled ? /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
+              chunkYBPG5RPR_cjs.Button,
               {
-                "aria-label": `Clear ${label}`,
-                className: chunkI6IGTQLG_cjs.inputStyles.clearButton,
+                icon: lucideReact.X,
+                isIconOnly: true,
+                label: `Clear ${label}`,
                 onClick: () => onChange(void 0),
-                type: "button",
-                children: /* @__PURE__ */ jsxRuntime.jsx(chunkPHFEQG4E_cjs.Icon, { icon: lucideReact.X, size: "sm" })
+                size: "sm",
+                variant: "ghost"
               }
             ) : null,
-            isLoading ? /* @__PURE__ */ jsxRuntime.jsx(chunk2WP6NYYY_cjs.Spinner, { size: "sm" }) : null,
-            status != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: chunkI6IGTQLG_cjs.inputStyles.iconSlot, children: chunk5G3BY75L_cjs.getStatusIcon(status.type) }) : null
+            isLoading ? /* @__PURE__ */ jsxRuntime.jsx(chunkYXYD5HKL_cjs.Spinner, { size: "sm" }) : null,
+            status != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: chunkVXBVSYPA_cjs.inputStyles.iconSlot, children: chunk2P6D43V2_cjs.getStatusIcon(status.type) }) : null
           ]
         }
       )
@@ -138,5 +141,5 @@ function TimeInput({
 TimeInput.displayName = "TimeInput";
 
 exports.TimeInput = TimeInput;
-//# sourceMappingURL=chunk-EETTQWW5.cjs.map
-//# sourceMappingURL=chunk-EETTQWW5.cjs.map
+//# sourceMappingURL=chunk-2D6SGEPH.cjs.map
+//# sourceMappingURL=chunk-2D6SGEPH.cjs.map