@usefragments/ui 1.7.0 → 2.0.0

package/dist/components/Button/index.cjs

@@ -32,11 +32,27 @@ function composeEventHandlers(childHandler, parentHandler) {
     parentHandler(...args);
   });
 }
+const DEFAULT_TONE = {
+  solid: "accent",
+  link: "accent",
+  soft: "neutral",
+  outline: "neutral",
+  ghost: "neutral"
+};
+const TONE_CLASS = {
+  neutral: Button_module.default.toneNeutral,
+  accent: Button_module.default.toneAccent,
+  info: Button_module.default.toneInfo,
+  success: Button_module.default.toneSuccess,
+  warning: Button_module.default.toneWarning,
+  danger: Button_module.default.toneDanger
+};
 const ButtonRoot = React__namespace.forwardRef(
   function Button2(props, ref) {
     const {
       children,
-      variant: variantProp = "primary",
+      variant = "solid",
+      tone: toneProp,
       size: sizeProp,
       icon = false,
       fullWidth = false,
@@ -45,14 +61,14 @@ const ButtonRoot = React__namespace.forwardRef(
       ...rest
     } = props;
     const size = index.useResolvedControlSize(sizeProp);
-    const iconOnly = icon || variantProp === "icon";
-    const variant = variantProp === "outline" ? "outlined" : variantProp === "icon" ? "outlined" : variantProp;
+    const tone = toneProp ?? DEFAULT_TONE[variant];
     const canonicalStamp$1 = canonicalStamp.fragmentsCanonicalStampProps("Button");
     const classNames = [
       Button_module.default.button,
       Button_module.default[size],
       Button_module.default[variant],
-      iconOnly && Button_module.default.icon,
+      TONE_CLASS[tone],
+      icon && Button_module.default.icon,
       fullWidth && Button_module.default.fullWidth,
       className
     ].filter(Boolean).join(" ");

package/dist/components/Button/index.d.ts

@@ -3,22 +3,30 @@ import * as React from "react";
  * Button props.
  * @see https://usefragments.com/components/button
  */
+export type ButtonVariant = "solid" | "soft" | "outline" | "ghost" | "link";
+export type ButtonTone = "neutral" | "accent" | "info" | "success" | "warning" | "danger";
+export type ButtonSize = "sm" | "md" | "lg";
 type ButtonBaseProps = {
     children: React.ReactNode;
-    /** Visual style variant.
-     * @default "primary"
+    /** Chrome family.
+     * @default "solid"
      * @see https://usefragments.com/components/button#variants
      * @remarks
-     * - `"link"` — accent-coloured, transparent; for tertiary CTAs like "View all →"
-     * - `"quiet"` — neutral text button with no box and no height floor; for meta lines and footnotes
-     * - `"icon"` — convenience alias for outlined + icon-only layout
-     * - `"outline"` — alias for `"outlined"` */
-    variant?: "primary" | "secondary" | "ghost" | "link" | "quiet" | "danger" | "outlined" | "outline" | "icon";
-    /** Button size. `"xs"` is for inline row-action controls (accept/dismiss, table-row icons) where `"sm"` is too tall.
+     * - `"solid"` — filled; the one action you want taken here
+     * - `"soft"` — tinted fill, no border; supporting actions
+     * - `"outline"` — hairline border on a transparent surface
+     * - `"ghost"` — no fill, no border; dense toolbars and repeated rows
+     * - `"link"` — reads like a link, behaves like an action; tertiary CTAs */
+    variant?: ButtonVariant;
+    /** Colour. Defaults to `"accent"` on `solid` and `link`, `"neutral"` on
+     * `soft`, `outline` and `ghost`.
+     * @see https://usefragments.com/components/button#tones */
+    tone?: ButtonTone;
+    /** Control height.
      * @default "md"
      * @see https://usefragments.com/components/button#sizes */
-    size?: "xs" | "sm" | "md" | "lg";
-    /** Render as icon-only button (square aspect ratio). Prefer `variant="icon"` for the default outlined icon button. */
+    size?: ButtonSize;
+    /** Render as icon-only button (square aspect ratio). Always pass `aria-label`. */
     icon?: boolean;
     /** Make button full width of container */
     fullWidth?: boolean;

package/dist/components/Button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAkB/B;;;GAGG;AACH,KAAK,eAAe,GAAG;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;;;gDAO4C;IAC5C,OAAO,CAAC,EACJ,SAAS,GACT,WAAW,GACX,OAAO,GACP,MAAM,GACN,OAAO,GACP,QAAQ,GACR,UAAU,GACV,SAAS,GACT,MAAM,CAAC;IACX;;+DAE2D;IAC3D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,sHAAsH;IACtH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;iEAC6D;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAGF,MAAM,WAAW,mBACf,SAAQ,eAAe,EAAE,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACxF,EAAE,CAAC,EAAE,QAAQ,CAAC;CACf;AAGD,MAAM,WAAW,mBACf,SAAQ,eAAe,EAAE,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACxF,EAAE,EAAE,GAAG,CAAC;CACT;AAED,MAAM,MAAM,WAAW,GAAG,mBAAmB,GAAG,mBAAmB,CAAC;AAgIpE,eAAO,MAAM,MAAM;;CAEjB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAkB/B;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAC5E,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC1F,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C,KAAK,eAAe,GAAG;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;;;;+EAQ2E;IAC3E,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;+DAE2D;IAC3D,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;+DAE2D;IAC3D,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,kFAAkF;IAClF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;iEAC6D;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAoBF,MAAM,WAAW,mBACf,SAAQ,eAAe,EAAE,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACxF,EAAE,CAAC,EAAE,QAAQ,CAAC;CACf;AAGD,MAAM,WAAW,mBACf,SAAQ,eAAe,EAAE,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACxF,EAAE,EAAE,GAAG,CAAC;CACT;AAED,MAAM,MAAM,WAAW,GAAG,mBAAmB,GAAG,mBAAmB,CAAC;AA4HpE,eAAO,MAAM,MAAM;;CAEjB,CAAC"}

package/dist/components/Button/index.js

@@ -13,11 +13,27 @@ function composeEventHandlers(childHandler, parentHandler) {
     parentHandler(...args);
   });
 }
+const DEFAULT_TONE = {
+  solid: "accent",
+  link: "accent",
+  soft: "neutral",
+  outline: "neutral",
+  ghost: "neutral"
+};
+const TONE_CLASS = {
+  neutral: styles.toneNeutral,
+  accent: styles.toneAccent,
+  info: styles.toneInfo,
+  success: styles.toneSuccess,
+  warning: styles.toneWarning,
+  danger: styles.toneDanger
+};
 const ButtonRoot = React.forwardRef(
   function Button2(props, ref) {
     const {
       children,
-      variant: variantProp = "primary",
+      variant = "solid",
+      tone: toneProp,
       size: sizeProp,
       icon = false,
       fullWidth = false,
@@ -26,14 +42,14 @@ const ButtonRoot = React.forwardRef(
       ...rest
     } = props;
     const size = useResolvedControlSize(sizeProp);
-    const iconOnly = icon || variantProp === "icon";
-    const variant = variantProp === "outline" ? "outlined" : variantProp === "icon" ? "outlined" : variantProp;
+    const tone = toneProp ?? DEFAULT_TONE[variant];
     const canonicalStamp = fragmentsCanonicalStampProps("Button");
     const classNames = [
       styles.button,
       styles[size],
       styles[variant],
-      iconOnly && styles.icon,
+      TONE_CLASS[tone],
+      icon && styles.icon,
       fullWidth && styles.fullWidth,
       className
     ].filter(Boolean).join(" ");

package/dist/components/ButtonGroup/ButtonGroup.module.scss.cjs

@@ -1,29 +1,29 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const group = "_group_1xl7m_1";
-const gapNone = "_gapNone_1xl7m_6";
-const gapXs = "_gap-xs_1xl7m_26";
-const gapSm = "_gap-sm_1xl7m_30";
-const gapMd = "_gap-md_1xl7m_34";
-const wrap = "_wrap_1xl7m_38";
-const alignStart = "_align-start_1xl7m_42";
-const alignCenter = "_align-center_1xl7m_46";
-const alignEnd = "_align-end_1xl7m_50";
+const group = "_group_1lat3_1";
+const gapNone = "_gapNone_1lat3_6";
+const gapXs = "_gap-xs_1lat3_26";
+const gapSm = "_gap-sm_1lat3_30";
+const gapMd = "_gap-md_1lat3_34";
+const wrap = "_wrap_1lat3_38";
+const alignStart = "_align-start_1lat3_42";
+const alignCenter = "_align-center_1lat3_46";
+const alignEnd = "_align-end_1lat3_50";
 const styles = {
   group,
   gapNone,
-  "gap-xs": "_gap-xs_1xl7m_26",
+  "gap-xs": "_gap-xs_1lat3_26",
   gapXs,
-  "gap-sm": "_gap-sm_1xl7m_30",
+  "gap-sm": "_gap-sm_1lat3_30",
   gapSm,
-  "gap-md": "_gap-md_1xl7m_34",
+  "gap-md": "_gap-md_1lat3_34",
   gapMd,
   wrap,
-  "align-start": "_align-start_1xl7m_42",
+  "align-start": "_align-start_1lat3_42",
   alignStart,
-  "align-center": "_align-center_1xl7m_46",
+  "align-center": "_align-center_1lat3_46",
   alignCenter,
-  "align-end": "_align-end_1xl7m_50",
+  "align-end": "_align-end_1lat3_50",
   alignEnd
 };
 exports.alignCenter = alignCenter;

package/dist/components/ButtonGroup/ButtonGroup.module.scss.js

@@ -1,27 +1,27 @@
-const group = "_group_1xl7m_1";
-const gapNone = "_gapNone_1xl7m_6";
-const gapXs = "_gap-xs_1xl7m_26";
-const gapSm = "_gap-sm_1xl7m_30";
-const gapMd = "_gap-md_1xl7m_34";
-const wrap = "_wrap_1xl7m_38";
-const alignStart = "_align-start_1xl7m_42";
-const alignCenter = "_align-center_1xl7m_46";
-const alignEnd = "_align-end_1xl7m_50";
+const group = "_group_1lat3_1";
+const gapNone = "_gapNone_1lat3_6";
+const gapXs = "_gap-xs_1lat3_26";
+const gapSm = "_gap-sm_1lat3_30";
+const gapMd = "_gap-md_1lat3_34";
+const wrap = "_wrap_1lat3_38";
+const alignStart = "_align-start_1lat3_42";
+const alignCenter = "_align-center_1lat3_46";
+const alignEnd = "_align-end_1lat3_50";
 const styles = {
   group,
   gapNone,
-  "gap-xs": "_gap-xs_1xl7m_26",
+  "gap-xs": "_gap-xs_1lat3_26",
   gapXs,
-  "gap-sm": "_gap-sm_1xl7m_30",
+  "gap-sm": "_gap-sm_1lat3_30",
   gapSm,
-  "gap-md": "_gap-md_1xl7m_34",
+  "gap-md": "_gap-md_1lat3_34",
   gapMd,
   wrap,
-  "align-start": "_align-start_1xl7m_42",
+  "align-start": "_align-start_1lat3_42",
   alignStart,
-  "align-center": "_align-center_1xl7m_46",
+  "align-center": "_align-center_1lat3_46",
   alignCenter,
-  "align-end": "_align-end_1xl7m_50",
+  "align-end": "_align-end_1lat3_50",
   alignEnd
 };
 export {

package/dist/components/Card/Card.module.scss.cjs

@@ -1,66 +1,59 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const card = "_card_vzj3k_14";
-const outlined = "_outlined_vzj3k_36";
-const elevated = "_elevated_vzj3k_41";
-const stat = "_stat_vzj3k_46";
-const panel = "_panel_vzj3k_51";
-const accent = "_accent_vzj3k_58";
-const toneDanger = "_toneDanger_vzj3k_73";
-const toneWarning = "_toneWarning_vzj3k_79";
-const toneNeutral = "_toneNeutral_vzj3k_85";
-const paddingNone = "_paddingNone_vzj3k_91";
-const paddingSm = "_paddingSm_vzj3k_94";
-const paddingMd = "_paddingMd_vzj3k_97";
-const paddingLg = "_paddingLg_vzj3k_100";
-const interactive = "_interactive_vzj3k_103";
-const header = "_header_vzj3k_131";
-const headerDivided = "_headerDivided_vzj3k_136";
-const description = "_description_vzj3k_147";
-const title = "_title_vzj3k_150";
-const body = "_body_vzj3k_168";
-const footer = "_footer_vzj3k_189";
+const card = "_card_v8u9x_10";
+const headerDivided = "_headerDivided_v8u9x_36";
+const solid = "_solid_v8u9x_39";
+const soft = "_soft_v8u9x_44";
+const outline = "_outline_v8u9x_49";
+const toneAccent = "_toneAccent_v8u9x_54";
+const toneDanger = "_toneDanger_v8u9x_68";
+const toneWarning = "_toneWarning_v8u9x_82";
+const paddingNone = "_paddingNone_v8u9x_96";
+const paddingSm = "_paddingSm_v8u9x_99";
+const paddingMd = "_paddingMd_v8u9x_102";
+const paddingLg = "_paddingLg_v8u9x_105";
+const interactive = "_interactive_v8u9x_108";
+const header = "_header_v8u9x_36";
+const description = "_description_v8u9x_153";
+const title = "_title_v8u9x_156";
+const body = "_body_v8u9x_176";
+const footer = "_footer_v8u9x_198";
 const styles = {
   card,
-  "default": "_default_vzj3k_31",
-  outlined,
-  elevated,
-  stat,
-  panel,
-  accent,
+  headerDivided,
+  solid,
+  soft,
+  outline,
+  toneAccent,
   toneDanger,
   toneWarning,
-  toneNeutral,
   paddingNone,
   paddingSm,
   paddingMd,
   paddingLg,
   interactive,
   header,
-  headerDivided,
   description,
   title,
   body,
   footer
 };
-exports.accent = accent;
 exports.body = body;
 exports.card = card;
 exports.default = styles;
 exports.description = description;
-exports.elevated = elevated;
 exports.footer = footer;
 exports.header = header;
 exports.headerDivided = headerDivided;
 exports.interactive = interactive;
-exports.outlined = outlined;
+exports.outline = outline;
 exports.paddingLg = paddingLg;
 exports.paddingMd = paddingMd;
 exports.paddingNone = paddingNone;
 exports.paddingSm = paddingSm;
-exports.panel = panel;
-exports.stat = stat;
+exports.soft = soft;
+exports.solid = solid;
 exports.title = title;
+exports.toneAccent = toneAccent;
 exports.toneDanger = toneDanger;
-exports.toneNeutral = toneNeutral;
 exports.toneWarning = toneWarning;

package/dist/components/Card/Card.module.scss.js

@@ -1,66 +1,59 @@
-const card = "_card_vzj3k_14";
-const outlined = "_outlined_vzj3k_36";
-const elevated = "_elevated_vzj3k_41";
-const stat = "_stat_vzj3k_46";
-const panel = "_panel_vzj3k_51";
-const accent = "_accent_vzj3k_58";
-const toneDanger = "_toneDanger_vzj3k_73";
-const toneWarning = "_toneWarning_vzj3k_79";
-const toneNeutral = "_toneNeutral_vzj3k_85";
-const paddingNone = "_paddingNone_vzj3k_91";
-const paddingSm = "_paddingSm_vzj3k_94";
-const paddingMd = "_paddingMd_vzj3k_97";
-const paddingLg = "_paddingLg_vzj3k_100";
-const interactive = "_interactive_vzj3k_103";
-const header = "_header_vzj3k_131";
-const headerDivided = "_headerDivided_vzj3k_136";
-const description = "_description_vzj3k_147";
-const title = "_title_vzj3k_150";
-const body = "_body_vzj3k_168";
-const footer = "_footer_vzj3k_189";
+const card = "_card_v8u9x_10";
+const headerDivided = "_headerDivided_v8u9x_36";
+const solid = "_solid_v8u9x_39";
+const soft = "_soft_v8u9x_44";
+const outline = "_outline_v8u9x_49";
+const toneAccent = "_toneAccent_v8u9x_54";
+const toneDanger = "_toneDanger_v8u9x_68";
+const toneWarning = "_toneWarning_v8u9x_82";
+const paddingNone = "_paddingNone_v8u9x_96";
+const paddingSm = "_paddingSm_v8u9x_99";
+const paddingMd = "_paddingMd_v8u9x_102";
+const paddingLg = "_paddingLg_v8u9x_105";
+const interactive = "_interactive_v8u9x_108";
+const header = "_header_v8u9x_36";
+const description = "_description_v8u9x_153";
+const title = "_title_v8u9x_156";
+const body = "_body_v8u9x_176";
+const footer = "_footer_v8u9x_198";
 const styles = {
   card,
-  "default": "_default_vzj3k_31",
-  outlined,
-  elevated,
-  stat,
-  panel,
-  accent,
+  headerDivided,
+  solid,
+  soft,
+  outline,
+  toneAccent,
   toneDanger,
   toneWarning,
-  toneNeutral,
   paddingNone,
   paddingSm,
   paddingMd,
   paddingLg,
   interactive,
   header,
-  headerDivided,
   description,
   title,
   body,
   footer
 };
 export {
-  accent,
   body,
   card,
   styles as default,
   description,
-  elevated,
   footer,
   header,
   headerDivided,
   interactive,
-  outlined,
+  outline,
   paddingLg,
   paddingMd,
   paddingNone,
   paddingSm,
-  panel,
-  stat,
+  soft,
+  solid,
   title,
+  toneAccent,
   toneDanger,
-  toneNeutral,
   toneWarning
 };

package/dist/components/Card/index.cjs

@@ -35,37 +35,42 @@ function composeEventHandlers(userHandler, internalHandler) {
     internalHandler(event);
   };
 }
+const variantMap = {
+  solid: Card_module.default.solid,
+  soft: Card_module.default.soft,
+  outline: Card_module.default.outline
+};
 const toneMap = {
-  accent: void 0,
+  neutral: void 0,
+  accent: Card_module.default.toneAccent,
   danger: Card_module.default.toneDanger,
-  warning: Card_module.default.toneWarning,
-  neutral: Card_module.default.toneNeutral
+  warning: Card_module.default.toneWarning
 };
 function CardRoot({
   children,
-  variant: variantProp = "default",
-  tone = "accent",
+  variant = "solid",
+  tone = "neutral",
   padding = "md",
   as: Component = "article",
   className,
   style,
   ...htmlProps
 }) {
-  const variant = variantProp === "outline" ? "outlined" : variantProp;
   const { onKeyDown, onKeyUp, role, tabIndex, ...elementProps } = htmlProps;
   const isInteractive = typeof elementProps.onClick === "function";
   const resolvedRole = isInteractive ? role ?? "button" : role;
   const resolvedTabIndex = isInteractive ? tabIndex ?? 0 : tabIndex;
   const classes = [
     Card_module.default.card,
-    Card_module.default[variant],
-    variant === "accent" && tone !== "accent" && toneMap[tone],
+    variantMap[variant],
+    toneMap[tone],
     paddingMap[padding],
     isInteractive && Card_module.default.interactive,
     className
   ].filter(Boolean).join(" ");
   const contextValue = {
     variant,
+    tone,
     padding,
     isInteractive
   };

package/dist/components/Card/index.d.ts

@@ -1,34 +1,32 @@
 import * as React from "react";
+export type CardVariant = "solid" | "soft" | "outline";
+export type CardTone = "neutral" | "accent" | "warning" | "danger";
+export type CardPadding = "none" | "sm" | "md" | "lg";
 /**
  * Card container for grouping related content.
  * @see https://usefragments.com/components/card
  */
 export interface CardProps extends Omit<React.HTMLAttributes<HTMLElement>, "children"> {
     children: React.ReactNode;
-    /** Visual style variant. `"outline"` is an alias for `"outlined"`.
+    /** Surface chrome.
      *
-     * - `default` / `outlined` / `elevated`: general-purpose cards.
-     * - `stat`: compact metric tile for dashboard grids — hairline border,
-     *   panel-subtle surface, tight radius, zero shadow.
-     * - `panel`: hairline-bordered panel with zero own padding, designed for
-     *   compound use with `Card.Header divided` + `Card.Body` so each region
-     *   manages its own spacing.
-     * - `accent`: the earned-moment capsule — accent-tinted hairline, radial
-     *   accent wash, soft fixed radius. Reserve for the few surfaces that earn
-     *   emphasis (demo banner, upgrade panel, onboarding resume), never for
-     *   routine content.
-     * @default "default"
+     * - `solid`: the filled, elevated surface for general-purpose cards.
+     * - `soft`: quiet tint fill for metric tiles and dashboard panels. Add
+     *   `padding="none"` and let `Card.Header divided` + `Card.Body padding`
+     *   own their inset for a panel.
+     * - `outline`: transparent with a hairline border, for dense layouts.
+     * @default "solid"
      * @see https://usefragments.com/components/card#variants */
-    variant?: "default" | "outlined" | "outline" | "elevated" | "stat" | "panel" | "accent";
-    /** Semantic tone of the `accent` capsule. The wash and hairline follow the
-     * tone so the same earned-moment idiom can carry state: `danger` (a merge is
-     * held), `warning` (enforcement lapsed), `neutral` (waiting — ink hairline,
-     * no wash). Ignored for other variants.
-     * @default "accent" */
-    tone?: "accent" | "danger" | "warning" | "neutral";
+    variant?: CardVariant;
+    /** Earned-moment capsule. Any tone other than `neutral` paints a
+     * tone-tinted hairline, a radial wash and the capsule radius on top of the
+     * variant: `accent` (the moment), `danger` (a merge is held), `warning`
+     * (enforcement lapsed). Reserve it for the few surfaces that earn emphasis.
+     * @default "neutral" */
+    tone?: CardTone;
     /** Inner padding.
      * @default "md" */
-    padding?: "none" | "sm" | "md" | "lg";
+    padding?: CardPadding;
     /** Root element tag.
      * @default "article" */
     as?: "article" | "div" | "section";
@@ -37,7 +35,7 @@ export interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     /** Renders the header as a divided region with a minimum height, canonical
      * inset, hairline bottom border, and no trailing margin. Used with
-     * `variant="panel"` for dashboard-style panel headers. */
+     * `padding="none"` for dashboard-style panel headers. */
     divided?: boolean;
 }
 export interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
@@ -51,14 +49,14 @@ export interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraph
 }
 export interface CardBodyProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
-    /** Inner padding for body-only spacing, useful with `variant="panel"`.
-     * Omit when the card root already owns padding. */
-    padding?: "none" | "sm" | "md" | "lg";
+    /** Inner padding for body-only spacing, useful with `padding="none"` on the
+     * root. Omit when the card root already owns padding. */
+    padding?: CardPadding;
 }
 export interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
 }
-declare function CardRoot({ children, variant: variantProp, tone, padding, as: Component, className, style, ...htmlProps }: CardProps): import("react/jsx-runtime").JSX.Element;
+declare function CardRoot({ children, variant, tone, padding, as: Component, className, style, ...htmlProps }: CardProps): import("react/jsx-runtime").JSX.Element;
 declare function CardHeader({ children, divided, className, ...htmlProps }: CardHeaderProps): import("react/jsx-runtime").JSX.Element;
 declare function CardTitle({ children, as: Component, className, ...htmlProps }: CardTitleProps): import("react/jsx-runtime").JSX.Element;
 declare function CardDescription({ children, className, ...htmlProps }: CardDescriptionProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Card/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Card/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B;;;GAGG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC;IACpF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;;;;;;;;;gEAa4D;IAC5D,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IACxF;;;;2BAIuB;IACvB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;IACnD;uBACmB;IACnB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACtC;4BACwB;IACxB,EAAE,CAAC,EAAE,SAAS,GAAG,KAAK,GAAG,SAAS,CAAC;CACpC;AAED,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;8DAE0D;IAC1D,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC;IAC9E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;uBACmB;IACnB,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CACvC;AAED,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC;IACtF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;uDACmD;IACnD,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CACvC;AAED,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AA+CD,iBAAS,QAAQ,CAAC,EAChB,QAAQ,EACR,OAAO,EAAE,WAAuB,EAChC,IAAe,EACf,OAAc,EACd,EAAE,EAAE,SAAqB,EACzB,SAAS,EACT,KAAK,EACL,GAAG,SAAS,EACb,EAAE,SAAS,2CA8DX;AAED,iBAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,eAAe,2CASlF;AAED,iBAAS,SAAS,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,SAAgB,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,cAAc,2CAO7F;AAED,iBAAS,eAAe,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,oBAAoB,2CAOnF;AAED,iBAAS,QAAQ,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,aAAa,2CAS9E;AAED,iBAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,eAAe,2CAOzE;AAMD,eAAO,MAAM,IAAI;;;;;;CAMf,CAAC;AAGH,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,eAAe,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Card/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AACvD,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAC;AACnE,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEtD;;;GAGG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC;IACpF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;;;;gEAQ4D;IAC5D,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;;;4BAIwB;IACxB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;uBACmB;IACnB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;4BACwB;IACxB,EAAE,CAAC,EAAE,SAAS,GAAG,KAAK,GAAG,SAAS,CAAC;CACpC;AAED,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;6DAEyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC;IAC9E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;uBACmB;IACnB,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CACvC;AAED,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC;IACtF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;6DACyD;IACzD,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAED,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAsDD,iBAAS,QAAQ,CAAC,EAChB,QAAQ,EACR,OAAiB,EACjB,IAAgB,EAChB,OAAc,EACd,EAAE,EAAE,SAAqB,EACzB,SAAS,EACT,KAAK,EACL,GAAG,SAAS,EACb,EAAE,SAAS,2CA6DX;AAED,iBAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,eAAe,2CASlF;AAED,iBAAS,SAAS,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,SAAgB,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,cAAc,2CAO7F;AAED,iBAAS,eAAe,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,oBAAoB,2CAOnF;AAED,iBAAS,QAAQ,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,aAAa,2CAS9E;AAED,iBAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,eAAe,2CAOzE;AAMD,eAAO,MAAM,IAAI;;;;;;CAMf,CAAC;AAGH,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,eAAe,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/Card/index.js

@@ -16,37 +16,42 @@ function composeEventHandlers(userHandler, internalHandler) {
     internalHandler(event);
   };
 }
+const variantMap = {
+  solid: styles.solid,
+  soft: styles.soft,
+  outline: styles.outline
+};
 const toneMap = {
-  accent: void 0,
+  neutral: void 0,
+  accent: styles.toneAccent,
   danger: styles.toneDanger,
-  warning: styles.toneWarning,
-  neutral: styles.toneNeutral
+  warning: styles.toneWarning
 };
 function CardRoot({
   children,
-  variant: variantProp = "default",
-  tone = "accent",
+  variant = "solid",
+  tone = "neutral",
   padding = "md",
   as: Component = "article",
   className,
   style,
   ...htmlProps
 }) {
-  const variant = variantProp === "outline" ? "outlined" : variantProp;
   const { onKeyDown, onKeyUp, role, tabIndex, ...elementProps } = htmlProps;
   const isInteractive = typeof elementProps.onClick === "function";
   const resolvedRole = isInteractive ? role ?? "button" : role;
   const resolvedTabIndex = isInteractive ? tabIndex ?? 0 : tabIndex;
   const classes = [
     styles.card,
-    styles[variant],
-    variant === "accent" && tone !== "accent" && toneMap[tone],
+    variantMap[variant],
+    toneMap[tone],
     paddingMap[padding],
     isInteractive && styles.interactive,
     className
   ].filter(Boolean).join(" ");
   const contextValue = {
     variant,
+    tone,
     padding,
     isInteractive
   };