@usefragments/ui 1.7.0 → 2.0.0

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

@@ -1,19 +1,19 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const avatar = "_avatar_3118z_1";
-const xs = "_xs_3118z_14";
-const sm = "_sm_3118z_26";
-const md = "_md_3118z_38";
-const lg = "_lg_3118z_50";
-const xl = "_xl_3118z_62";
-const square = "_square_3118z_74";
-const image = "_image_3118z_78";
-const initials = "_initials_3118z_84";
-const fallback = "_fallback_3118z_91";
-const fallbackIcon = "_fallbackIcon_3118z_99";
-const group = "_group_3118z_105";
-const groupItem = "_groupItem_3118z_111";
-const overflow = "_overflow_3118z_140";
+const avatar = "_avatar_1ps8e_1";
+const xs = "_xs_1ps8e_14";
+const sm = "_sm_1ps8e_26";
+const md = "_md_1ps8e_38";
+const lg = "_lg_1ps8e_50";
+const xl = "_xl_1ps8e_62";
+const square = "_square_1ps8e_75";
+const image = "_image_1ps8e_79";
+const initials = "_initials_1ps8e_85";
+const fallback = "_fallback_1ps8e_91";
+const fallbackIcon = "_fallbackIcon_1ps8e_99";
+const group = "_group_1ps8e_105";
+const groupItem = "_groupItem_1ps8e_111";
+const overflow = "_overflow_1ps8e_140";
 const styles = {
   avatar,
   xs,

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

@@ -1,17 +1,17 @@
-const avatar = "_avatar_3118z_1";
-const xs = "_xs_3118z_14";
-const sm = "_sm_3118z_26";
-const md = "_md_3118z_38";
-const lg = "_lg_3118z_50";
-const xl = "_xl_3118z_62";
-const square = "_square_3118z_74";
-const image = "_image_3118z_78";
-const initials = "_initials_3118z_84";
-const fallback = "_fallback_3118z_91";
-const fallbackIcon = "_fallbackIcon_3118z_99";
-const group = "_group_3118z_105";
-const groupItem = "_groupItem_3118z_111";
-const overflow = "_overflow_3118z_140";
+const avatar = "_avatar_1ps8e_1";
+const xs = "_xs_1ps8e_14";
+const sm = "_sm_1ps8e_26";
+const md = "_md_1ps8e_38";
+const lg = "_lg_1ps8e_50";
+const xl = "_xl_1ps8e_62";
+const square = "_square_1ps8e_75";
+const image = "_image_1ps8e_79";
+const initials = "_initials_1ps8e_85";
+const fallback = "_fallback_1ps8e_91";
+const fallbackIcon = "_fallbackIcon_1ps8e_99";
+const group = "_group_1ps8e_105";
+const groupItem = "_groupItem_1ps8e_111";
+const overflow = "_overflow_1ps8e_140";
 const styles = {
   avatar,
   xs,

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

@@ -1,39 +1,40 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const badge = "_badge_vcvlk_1";
-const sm = "_sm_vcvlk_13";
-const md = "_md_vcvlk_23";
-const lg = "_lg_vcvlk_33";
-const success = "_success_vcvlk_48";
-const warning = "_warning_vcvlk_53";
-const error = "_error_vcvlk_58";
-const info = "_info_vcvlk_63";
-const outline = "_outline_vcvlk_68";
-const label = "_label_vcvlk_74";
-const dim = "_dim_vcvlk_81";
-const active = "_active_vcvlk_88";
-const dot = "_dot_vcvlk_94";
-const dotPulse = "_dotPulse_vcvlk_106";
-const fuiBadgeDotPulse = "_fui-badge-dot-pulse_vcvlk_1";
-const icon = "_icon_vcvlk_120";
-const remove = "_remove_vcvlk_144";
+const badge = "_badge_q65bk_1";
+const sm = "_sm_q65bk_16";
+const md = "_md_q65bk_26";
+const lg = "_lg_q65bk_36";
+const toneAccent = "_toneAccent_q65bk_46";
+const toneInfo = "_toneInfo_q65bk_55";
+const toneSuccess = "_toneSuccess_q65bk_64";
+const toneWarning = "_toneWarning_q65bk_73";
+const toneDanger = "_toneDanger_q65bk_82";
+const soft = "_soft_q65bk_91";
+const outline = "_outline_q65bk_96";
+const ghost = "_ghost_q65bk_102";
+const active = "_active_q65bk_108";
+const dot = "_dot_q65bk_114";
+const dotPulse = "_dotPulse_q65bk_126";
+const fuiBadgeDotPulse = "_fui-badge-dot-pulse_q65bk_1";
+const icon = "_icon_q65bk_140";
+const remove = "_remove_q65bk_164";
 const styles = {
   badge,
   sm,
   md,
   lg,
-  "default": "_default_vcvlk_43",
-  success,
-  warning,
-  error,
-  info,
+  toneAccent,
+  toneInfo,
+  toneSuccess,
+  toneWarning,
+  toneDanger,
+  soft,
   outline,
-  label,
-  dim,
+  ghost,
   active,
   dot,
   dotPulse,
-  "fui-badge-dot-pulse": "_fui-badge-dot-pulse_vcvlk_1",
+  "fui-badge-dot-pulse": "_fui-badge-dot-pulse_q65bk_1",
   fuiBadgeDotPulse,
   icon,
   remove
@@ -41,18 +42,19 @@ const styles = {
 exports.active = active;
 exports.badge = badge;
 exports.default = styles;
-exports.dim = dim;
 exports.dot = dot;
 exports.dotPulse = dotPulse;
-exports.error = error;
 exports.fuiBadgeDotPulse = fuiBadgeDotPulse;
+exports.ghost = ghost;
 exports.icon = icon;
-exports.info = info;
-exports.label = label;
 exports.lg = lg;
 exports.md = md;
 exports.outline = outline;
 exports.remove = remove;
 exports.sm = sm;
-exports.success = success;
-exports.warning = warning;
+exports.soft = soft;
+exports.toneAccent = toneAccent;
+exports.toneDanger = toneDanger;
+exports.toneInfo = toneInfo;
+exports.toneSuccess = toneSuccess;
+exports.toneWarning = toneWarning;

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

@@ -1,37 +1,38 @@
-const badge = "_badge_vcvlk_1";
-const sm = "_sm_vcvlk_13";
-const md = "_md_vcvlk_23";
-const lg = "_lg_vcvlk_33";
-const success = "_success_vcvlk_48";
-const warning = "_warning_vcvlk_53";
-const error = "_error_vcvlk_58";
-const info = "_info_vcvlk_63";
-const outline = "_outline_vcvlk_68";
-const label = "_label_vcvlk_74";
-const dim = "_dim_vcvlk_81";
-const active = "_active_vcvlk_88";
-const dot = "_dot_vcvlk_94";
-const dotPulse = "_dotPulse_vcvlk_106";
-const fuiBadgeDotPulse = "_fui-badge-dot-pulse_vcvlk_1";
-const icon = "_icon_vcvlk_120";
-const remove = "_remove_vcvlk_144";
+const badge = "_badge_q65bk_1";
+const sm = "_sm_q65bk_16";
+const md = "_md_q65bk_26";
+const lg = "_lg_q65bk_36";
+const toneAccent = "_toneAccent_q65bk_46";
+const toneInfo = "_toneInfo_q65bk_55";
+const toneSuccess = "_toneSuccess_q65bk_64";
+const toneWarning = "_toneWarning_q65bk_73";
+const toneDanger = "_toneDanger_q65bk_82";
+const soft = "_soft_q65bk_91";
+const outline = "_outline_q65bk_96";
+const ghost = "_ghost_q65bk_102";
+const active = "_active_q65bk_108";
+const dot = "_dot_q65bk_114";
+const dotPulse = "_dotPulse_q65bk_126";
+const fuiBadgeDotPulse = "_fui-badge-dot-pulse_q65bk_1";
+const icon = "_icon_q65bk_140";
+const remove = "_remove_q65bk_164";
 const styles = {
   badge,
   sm,
   md,
   lg,
-  "default": "_default_vcvlk_43",
-  success,
-  warning,
-  error,
-  info,
+  toneAccent,
+  toneInfo,
+  toneSuccess,
+  toneWarning,
+  toneDanger,
+  soft,
   outline,
-  label,
-  dim,
+  ghost,
   active,
   dot,
   dotPulse,
-  "fui-badge-dot-pulse": "_fui-badge-dot-pulse_vcvlk_1",
+  "fui-badge-dot-pulse": "_fui-badge-dot-pulse_q65bk_1",
   fuiBadgeDotPulse,
   icon,
   remove
@@ -40,19 +41,20 @@ export {
   active,
   badge,
   styles as default,
-  dim,
   dot,
   dotPulse,
-  error,
   fuiBadgeDotPulse,
+  ghost,
   icon,
-  info,
-  label,
   lg,
   md,
   outline,
   remove,
   sm,
-  success,
-  warning
+  soft,
+  toneAccent,
+  toneDanger,
+  toneInfo,
+  toneSuccess,
+  toneWarning
 };

package/dist/components/Badge/index.cjs

@@ -22,9 +22,18 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const TONE_CLASS = {
+  neutral: void 0,
+  accent: Badge_module.default.toneAccent,
+  info: Badge_module.default.toneInfo,
+  success: Badge_module.default.toneSuccess,
+  warning: Badge_module.default.toneWarning,
+  danger: Badge_module.default.toneDanger
+};
 const BadgeRoot = React__namespace.forwardRef(function Badge2({
   children,
-  variant = "default",
+  variant = "soft",
+  tone = "neutral",
   size = "md",
   dot = false,
   dotPulse = false,
@@ -43,11 +52,12 @@ const BadgeRoot = React__namespace.forwardRef(function Badge2({
     Badge_module.default.badge,
     Badge_module.default[size],
     Badge_module.default[variant],
-    active && variant === "dim" && Badge_module.default.active,
+    TONE_CLASS[tone],
+    active && variant === "ghost" && Badge_module.default.active,
     className
   ].filter(Boolean).join(" ");
   const resolvedStyle = dotColor ? { ...style, "--fui-badge-dot-color": dotColor } : style;
-  const effectiveAriaLabel = ariaLabel || (announce && variant !== "default" && variant !== "outline" ? `${variant}: ${typeof children === "string" ? children : ""}` : void 0);
+  const effectiveAriaLabel = ariaLabel || (announce && tone !== "neutral" ? `${tone}: ${typeof children === "string" ? children : ""}` : void 0);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "span",
     {

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

@@ -3,19 +3,24 @@ import * as React from "react";
  * Badge for status indicators, labels, and counts.
  * @see https://usefragments.com/components/badge
  */
+export type BadgeVariant = "soft" | "outline" | "ghost";
+export type BadgeTone = "neutral" | "accent" | "info" | "success" | "warning" | "danger";
 export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
     children: React.ReactNode;
-    /** Visual style variant.
+    /** Chrome family.
      *
-     * - `default` / semantic / `outline`: pill-shaped status badges for
-     *   tags, counts, or state.
-     * - `label`: hairline-bordered label on the shared control floor for
-     *   metadata pills inside dense dashboard rows. Pair with `dotColor`.
-     * - `dim`: transparent 32px filter-pill chrome used
-     *   for toolbar filter chips. Pair with `active` to mark the selected one.
-     * @default "default"
+     * - `soft` (default): tinted pill for tags, counts, or state.
+     * - `outline`: hairline-bordered, transparent — metadata pills inside
+     *   dense rows. Pair with `dotColor`.
+     * - `ghost`: transparent filter-pill chrome for toolbar filters. Pair with
+     *   `active` to mark the selected one.
+     * @default "soft"
      * @see https://usefragments.com/components/badge#variants */
-    variant?: "default" | "success" | "warning" | "error" | "info" | "outline" | "label" | "dim";
+    variant?: BadgeVariant;
+    /** Colour. `neutral` is the plain badge; the semantic tones paint the
+     * shared status ramp.
+     * @default "neutral" */
+    tone?: BadgeTone;
     /** Badge size.
      * @default "md" */
     size?: "sm" | "md" | "lg";
@@ -24,13 +29,13 @@ export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
     /** Breathe the status dot, for a state that is still happening rather than
      * one that has settled. Respects `prefers-reduced-motion`. */
     dotPulse?: boolean;
-    /** Color for the leading status dot. Applies to `variant="label"` (and the
-     * generic `dot` prop). Accepts any CSS color including CSS custom properties. */
+    /** Color for the leading status dot. Accepts any CSS color including CSS
+     * custom properties. */
     dotColor?: string;
     /** Icon element rendered before the label */
     icon?: React.ReactNode;
-    /** Marks `variant="dim"` as the currently selected filter. Has no effect on
-     * other variants. */
+    /** Marks `variant="ghost"` as the currently selected filter. Has no effect
+     * on other variants. */
     active?: boolean;
     /** Makes the badge removable. Called when dismiss button is clicked. */
     onRemove?: () => void;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;GAGG;AACH,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IACvE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;;;;;iEAS6D;IAC7D,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,KAAK,CAAC;IAC7F;uBACmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,yCAAyC;IACzC,GAAG,CAAC,EAAE,OAAO,CAAC;IACd;kEAC8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;qFACiF;IACjF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;yBACqB;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;wBACoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA6ED,eAAO,MAAM,KAAK;;CAEhB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;AACxD,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEzF,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IACvE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;;;;iEAQ6D;IAC7D,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;4BAEwB;IACxB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;uBACmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,yCAAyC;IACzC,GAAG,CAAC,EAAE,OAAO,CAAC;IACd;kEAC8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;4BACwB;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;4BACwB;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;wBACoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAwFD,eAAO,MAAM,KAAK;;CAEhB,CAAC"}

package/dist/components/Badge/index.js

@@ -3,9 +3,18 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { Button } from "@base-ui/react/button";
 import styles from "./Badge.module.scss.js";
+const TONE_CLASS = {
+  neutral: void 0,
+  accent: styles.toneAccent,
+  info: styles.toneInfo,
+  success: styles.toneSuccess,
+  warning: styles.toneWarning,
+  danger: styles.toneDanger
+};
 const BadgeRoot = React.forwardRef(function Badge2({
   children,
-  variant = "default",
+  variant = "soft",
+  tone = "neutral",
   size = "md",
   dot = false,
   dotPulse = false,
@@ -24,11 +33,12 @@ const BadgeRoot = React.forwardRef(function Badge2({
     styles.badge,
     styles[size],
     styles[variant],
-    active && variant === "dim" && styles.active,
+    TONE_CLASS[tone],
+    active && variant === "ghost" && styles.active,
     className
   ].filter(Boolean).join(" ");
   const resolvedStyle = dotColor ? { ...style, "--fui-badge-dot-color": dotColor } : style;
-  const effectiveAriaLabel = ariaLabel || (announce && variant !== "default" && variant !== "outline" ? `${variant}: ${typeof children === "string" ? children : ""}` : void 0);
+  const effectiveAriaLabel = ariaLabel || (announce && tone !== "neutral" ? `${tone}: ${typeof children === "string" ? children : ""}` : void 0);
   return /* @__PURE__ */ jsxs(
     "span",
     {

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

@@ -1,19 +1,19 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const grid = "_grid_3sqfo_1";
-const columns2 = "_columns2_3sqfo_7";
-const columns3 = "_columns3_3sqfo_11";
-const columns4 = "_columns4_3sqfo_15";
-const gapNone = "_gapNone_3sqfo_32";
-const gapXs = "_gapXs_3sqfo_36";
-const gapSm = "_gapSm_3sqfo_40";
-const gapMd = "_gapMd_3sqfo_44";
-const gapLg = "_gapLg_3sqfo_48";
-const gapXl = "_gapXl_3sqfo_52";
-const item = "_item_3sqfo_56";
-const subgridRows = "_subgridRows_3sqfo_117";
-const subgridColumns = "_subgridColumns_3sqfo_122";
-const subgridBoth = "_subgridBoth_3sqfo_127";
+const grid = "_grid_1e8gq_1";
+const columns2 = "_columns2_1e8gq_7";
+const columns3 = "_columns3_1e8gq_11";
+const columns4 = "_columns4_1e8gq_15";
+const gapNone = "_gapNone_1e8gq_32";
+const gapXs = "_gapXs_1e8gq_36";
+const gapSm = "_gapSm_1e8gq_40";
+const gapMd = "_gapMd_1e8gq_44";
+const gapLg = "_gapLg_1e8gq_48";
+const gapXl = "_gapXl_1e8gq_52";
+const item = "_item_1e8gq_56";
+const subgridRows = "_subgridRows_1e8gq_117";
+const subgridColumns = "_subgridColumns_1e8gq_122";
+const subgridBoth = "_subgridBoth_1e8gq_127";
 const styles = {
   grid,
   columns2,

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

@@ -1,17 +1,17 @@
-const grid = "_grid_3sqfo_1";
-const columns2 = "_columns2_3sqfo_7";
-const columns3 = "_columns3_3sqfo_11";
-const columns4 = "_columns4_3sqfo_15";
-const gapNone = "_gapNone_3sqfo_32";
-const gapXs = "_gapXs_3sqfo_36";
-const gapSm = "_gapSm_3sqfo_40";
-const gapMd = "_gapMd_3sqfo_44";
-const gapLg = "_gapLg_3sqfo_48";
-const gapXl = "_gapXl_3sqfo_52";
-const item = "_item_3sqfo_56";
-const subgridRows = "_subgridRows_3sqfo_117";
-const subgridColumns = "_subgridColumns_3sqfo_122";
-const subgridBoth = "_subgridBoth_3sqfo_127";
+const grid = "_grid_1e8gq_1";
+const columns2 = "_columns2_1e8gq_7";
+const columns3 = "_columns3_1e8gq_11";
+const columns4 = "_columns4_1e8gq_15";
+const gapNone = "_gapNone_1e8gq_32";
+const gapXs = "_gapXs_1e8gq_36";
+const gapSm = "_gapSm_1e8gq_40";
+const gapMd = "_gapMd_1e8gq_44";
+const gapLg = "_gapLg_1e8gq_48";
+const gapXl = "_gapXl_1e8gq_52";
+const item = "_item_1e8gq_56";
+const subgridRows = "_subgridRows_1e8gq_117";
+const subgridColumns = "_subgridColumns_1e8gq_122";
+const subgridBoth = "_subgridBoth_1e8gq_127";
 const styles = {
   grid,
   columns2,