@usefragments/ui 1.6.0 → 2.0.0

package/dist/components/Box/index.js

@@ -4,81 +4,70 @@ import styles from "./Box.module.scss.js";
 function toCss(value) {
   return typeof value === "number" ? `${value}px` : value;
 }
-const BoxRoot = React.forwardRef(
-  function Box2({
-    children,
-    as: Component = "div",
-    padding,
-    paddingX,
-    paddingY,
-    margin,
-    marginX,
-    marginY,
-    background,
-    rounded,
-    border,
-    borderTop,
-    borderBottom,
-    borderLeft,
-    borderRight,
-    borderColor,
-    shadow,
-    overflow,
-    color,
-    display,
-    width,
-    minWidth,
-    maxWidth,
-    height,
-    minHeight,
-    maxHeight,
-    className,
-    style,
-    ...htmlProps
-  }, ref) {
-    const classes = [
-      styles.box,
-      padding && styles[`p-${padding}`],
-      paddingX && styles[`px-${paddingX}`],
-      paddingY && styles[`py-${paddingY}`],
-      margin && styles[`m-${margin}`],
-      marginX && styles[`mx-${marginX}`],
-      marginY && styles[`my-${marginY}`],
-      background && styles[`bg-${background}`],
-      rounded && styles[`rounded-${rounded}`],
-      border && styles.border,
-      borderTop && styles.borderTop,
-      borderBottom && styles.borderBottom,
-      borderLeft && styles.borderLeft,
-      borderRight && styles.borderRight,
-      borderColor && styles[`borderColor-${borderColor}`],
-      shadow && styles[`shadow-${shadow}`],
-      overflow && styles[`overflow-${overflow}`],
-      color && styles[`color-${color}`],
-      display && styles[`display-${display}`],
-      className
-    ].filter(Boolean).join(" ");
-    const sizingStyle = {};
-    if (width != null) sizingStyle.width = toCss(width);
-    if (minWidth != null) sizingStyle.minWidth = toCss(minWidth);
-    if (maxWidth != null) sizingStyle.maxWidth = toCss(maxWidth);
-    if (height != null) sizingStyle.height = toCss(height);
-    if (minHeight != null) sizingStyle.minHeight = toCss(minHeight);
-    if (maxHeight != null) sizingStyle.maxHeight = toCss(maxHeight);
-    const hasSizing = Object.keys(sizingStyle).length > 0;
-    const mergedStyle = hasSizing ? { ...sizingStyle, ...style } : style;
-    return /* @__PURE__ */ jsx(
-      Component,
-      {
-        ref,
-        ...htmlProps,
-        className: classes,
-        style: mergedStyle,
-        children
-      }
-    );
-  }
-);
+const BoxRoot = React.forwardRef(function Box2({
+  children,
+  as: Component = "div",
+  padding,
+  paddingX,
+  paddingY,
+  margin,
+  marginX,
+  marginY,
+  background,
+  rounded,
+  border,
+  borderTop,
+  borderBottom,
+  borderLeft,
+  borderRight,
+  borderColor,
+  shadow,
+  overflow,
+  color,
+  display,
+  width,
+  minWidth,
+  maxWidth,
+  height,
+  minHeight,
+  maxHeight,
+  className,
+  style,
+  ...htmlProps
+}, ref) {
+  const classes = [
+    styles.box,
+    padding && styles[`p-${padding}`],
+    paddingX && styles[`px-${paddingX}`],
+    paddingY && styles[`py-${paddingY}`],
+    margin && styles[`m-${margin}`],
+    marginX && styles[`mx-${marginX}`],
+    marginY && styles[`my-${marginY}`],
+    background && styles[`bg-${background}`],
+    rounded && styles[`rounded-${rounded}`],
+    border && styles.border,
+    borderTop && styles.borderTop,
+    borderBottom && styles.borderBottom,
+    borderLeft && styles.borderLeft,
+    borderRight && styles.borderRight,
+    borderColor && styles[`borderColor-${borderColor}`],
+    shadow && styles[`shadow-${shadow}`],
+    overflow && styles[`overflow-${overflow}`],
+    color && styles[`color-${color}`],
+    display && styles[`display-${display}`],
+    className
+  ].filter(Boolean).join(" ");
+  const sizingStyle = {};
+  if (width != null) sizingStyle.width = toCss(width);
+  if (minWidth != null) sizingStyle.minWidth = toCss(minWidth);
+  if (maxWidth != null) sizingStyle.maxWidth = toCss(maxWidth);
+  if (height != null) sizingStyle.height = toCss(height);
+  if (minHeight != null) sizingStyle.minHeight = toCss(minHeight);
+  if (maxHeight != null) sizingStyle.maxHeight = toCss(maxHeight);
+  const hasSizing = Object.keys(sizingStyle).length > 0;
+  const mergedStyle = hasSizing ? { ...sizingStyle, ...style } : style;
+  return /* @__PURE__ */ jsx(Component, { ref, ...htmlProps, className: classes, style: mergedStyle, children });
+});
 const Box = Object.assign(BoxRoot, {
   Root: BoxRoot
 });

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

@@ -1,23 +1,26 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const root = "_root_yi51s_1";
-const list = "_list_yi51s_9";
-const item = "_item_yi51s_19";
-const link = "_link_yi51s_26";
-const current = "_current_yi51s_63";
-const separator = "_separator_yi51s_75";
-const ellipsis = "_ellipsis_yi51s_84";
-const icon = "_icon_yi51s_144";
+const root = "_root_1j28p_1";
+const list = "_list_1j28p_10";
+const item = "_item_1j28p_20";
+const link = "_link_1j28p_27";
+const content = "_content_1j28p_63";
+const current = "_current_1j28p_70";
+const separator = "_separator_1j28p_82";
+const ellipsis = "_ellipsis_1j28p_91";
+const icon = "_icon_1j28p_150";
 const styles = {
   root,
   list,
   item,
   link,
+  content,
   current,
   separator,
   ellipsis,
   icon
 };
+exports.content = content;
 exports.current = current;
 exports.default = styles;
 exports.ellipsis = ellipsis;

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

@@ -1,22 +1,25 @@
-const root = "_root_yi51s_1";
-const list = "_list_yi51s_9";
-const item = "_item_yi51s_19";
-const link = "_link_yi51s_26";
-const current = "_current_yi51s_63";
-const separator = "_separator_yi51s_75";
-const ellipsis = "_ellipsis_yi51s_84";
-const icon = "_icon_yi51s_144";
+const root = "_root_1j28p_1";
+const list = "_list_1j28p_10";
+const item = "_item_1j28p_20";
+const link = "_link_1j28p_27";
+const content = "_content_1j28p_63";
+const current = "_current_1j28p_70";
+const separator = "_separator_1j28p_82";
+const ellipsis = "_ellipsis_1j28p_91";
+const icon = "_icon_1j28p_150";
 const styles = {
   root,
   list,
   item,
   link,
+  content,
   current,
   separator,
   ellipsis,
   icon
 };
 export {
+  content,
   current,
   styles as default,
   ellipsis,

package/dist/components/Breadcrumbs/index.cjs

@@ -99,7 +99,7 @@ function BreadcrumbsItem({
       children
     ] }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("li", { className: classes, ...htmlProps, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: Breadcrumbs_module.default.link, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("li", { className: classes, ...htmlProps, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: Breadcrumbs_module.default.content, children: [
     iconEl,
     children
   ] }) });

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumbs/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACzE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,oDAAoD;IACpD,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,yEAAyE;IACzE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC;IAC/E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,yBAAyB;IACxC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAYD,iBAAS,eAAe,CAAC,EACvB,QAAQ,EACR,SAAe,EACf,QAAQ,EACR,KAAoB,EACpB,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,GAAG,SAAS,EACb,EAAE,gBAAgB,2CA0ClB;AA6CD,iBAAS,eAAe,CAAC,EACvB,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,OAAe,EACf,SAAS,EACT,GAAG,SAAS,EACb,EAAE,oBAAoB,2CAmCtB;AAED,iBAAS,oBAAoB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,yBAAyB,2CAS/E;AAMD,eAAO,MAAM,WAAW;;;CAGtB,CAAC;AAGH,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,oBAAoB,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumbs/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACzE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,oDAAoD;IACpD,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,yEAAyE;IACzE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC;IAC/E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,yBAAyB;IACxC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAYD,iBAAS,eAAe,CAAC,EACvB,QAAQ,EACR,SAAe,EACf,QAAQ,EACR,KAAoB,EACpB,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,GAAG,SAAS,EACb,EAAE,gBAAgB,2CA0ClB;AA6CD,iBAAS,eAAe,CAAC,EACvB,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,OAAe,EACf,SAAS,EACT,GAAG,SAAS,EACb,EAAE,oBAAoB,2CAuCtB;AAED,iBAAS,oBAAoB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,yBAAyB,2CAS/E;AAMD,eAAO,MAAM,WAAW;;;CAGtB,CAAC;AAGH,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,oBAAoB,EAAE,CAAC"}

package/dist/components/Breadcrumbs/index.js

@@ -80,7 +80,7 @@ function BreadcrumbsItem({
       children
     ] }) });
   }
-  return /* @__PURE__ */ jsx("li", { className: classes, ...htmlProps, children: /* @__PURE__ */ jsxs("span", { className: styles.link, children: [
+  return /* @__PURE__ */ jsx("li", { className: classes, ...htmlProps, children: /* @__PURE__ */ jsxs("span", { className: styles.content, children: [
     iconEl,
     children
   ] }) });

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

@@ -1,37 +1,42 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const button = "_button_1f4mn_1";
-const xs = "_xs_1f4mn_77";
-const sm = "_sm_1f4mn_94";
-const md = "_md_1f4mn_111";
-const lg = "_lg_1f4mn_128";
-const icon = "_icon_1f4mn_145";
-const primary = "_primary_1f4mn_177";
-const secondary = "_secondary_1f4mn_192";
-const ghost = "_ghost_1f4mn_204";
-const link = "_link_1f4mn_216";
-const quiet = "_quiet_1f4mn_236";
-const danger = "_danger_1f4mn_259";
-const outlined = "_outlined_1f4mn_287";
-const fullWidth = "_fullWidth_1f4mn_306";
+const button = "_button_llur6_1";
+const link = "_link_llur6_81";
+const sm = "_sm_llur6_92";
+const md = "_md_llur6_109";
+const lg = "_lg_llur6_126";
+const icon = "_icon_llur6_143";
+const toneNeutral = "_toneNeutral_llur6_167";
+const toneAccent = "_toneAccent_llur6_195";
+const toneInfo = "_toneInfo_llur6_239";
+const toneSuccess = "_toneSuccess_llur6_284";
+const toneWarning = "_toneWarning_llur6_329";
+const toneDanger = "_toneDanger_llur6_374";
+const solid = "_solid_llur6_419";
+const soft = "_soft_llur6_431";
+const outline = "_outline_llur6_443";
+const ghost = "_ghost_llur6_455";
+const fullWidth = "_fullWidth_llur6_490";
 const styles = {
   button,
-  xs,
+  link,
   sm,
   md,
   lg,
   icon,
-  primary,
-  secondary,
+  toneNeutral,
+  toneAccent,
+  toneInfo,
+  toneSuccess,
+  toneWarning,
+  toneDanger,
+  solid,
+  soft,
+  outline,
   ghost,
-  link,
-  quiet,
-  danger,
-  outlined,
   fullWidth
 };
 exports.button = button;
-exports.danger = danger;
 exports.default = styles;
 exports.fullWidth = fullWidth;
 exports.ghost = ghost;
@@ -39,9 +44,13 @@ exports.icon = icon;
 exports.lg = lg;
 exports.link = link;
 exports.md = md;
-exports.outlined = outlined;
-exports.primary = primary;
-exports.quiet = quiet;
-exports.secondary = secondary;
+exports.outline = outline;
 exports.sm = sm;
-exports.xs = xs;
+exports.soft = soft;
+exports.solid = solid;
+exports.toneAccent = toneAccent;
+exports.toneDanger = toneDanger;
+exports.toneInfo = toneInfo;
+exports.toneNeutral = toneNeutral;
+exports.toneSuccess = toneSuccess;
+exports.toneWarning = toneWarning;

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

@@ -1,36 +1,41 @@
-const button = "_button_1f4mn_1";
-const xs = "_xs_1f4mn_77";
-const sm = "_sm_1f4mn_94";
-const md = "_md_1f4mn_111";
-const lg = "_lg_1f4mn_128";
-const icon = "_icon_1f4mn_145";
-const primary = "_primary_1f4mn_177";
-const secondary = "_secondary_1f4mn_192";
-const ghost = "_ghost_1f4mn_204";
-const link = "_link_1f4mn_216";
-const quiet = "_quiet_1f4mn_236";
-const danger = "_danger_1f4mn_259";
-const outlined = "_outlined_1f4mn_287";
-const fullWidth = "_fullWidth_1f4mn_306";
+const button = "_button_llur6_1";
+const link = "_link_llur6_81";
+const sm = "_sm_llur6_92";
+const md = "_md_llur6_109";
+const lg = "_lg_llur6_126";
+const icon = "_icon_llur6_143";
+const toneNeutral = "_toneNeutral_llur6_167";
+const toneAccent = "_toneAccent_llur6_195";
+const toneInfo = "_toneInfo_llur6_239";
+const toneSuccess = "_toneSuccess_llur6_284";
+const toneWarning = "_toneWarning_llur6_329";
+const toneDanger = "_toneDanger_llur6_374";
+const solid = "_solid_llur6_419";
+const soft = "_soft_llur6_431";
+const outline = "_outline_llur6_443";
+const ghost = "_ghost_llur6_455";
+const fullWidth = "_fullWidth_llur6_490";
 const styles = {
   button,
-  xs,
+  link,
   sm,
   md,
   lg,
   icon,
-  primary,
-  secondary,
+  toneNeutral,
+  toneAccent,
+  toneInfo,
+  toneSuccess,
+  toneWarning,
+  toneDanger,
+  solid,
+  soft,
+  outline,
   ghost,
-  link,
-  quiet,
-  danger,
-  outlined,
   fullWidth
 };
 export {
   button,
-  danger,
   styles as default,
   fullWidth,
   ghost,
@@ -38,10 +43,14 @@ export {
   lg,
   link,
   md,
-  outlined,
-  primary,
-  quiet,
-  secondary,
+  outline,
   sm,
-  xs
+  soft,
+  solid,
+  toneAccent,
+  toneDanger,
+  toneInfo,
+  toneNeutral,
+  toneSuccess,
+  toneWarning
 };

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 {