@usefragments/ui 1.5.3 → 1.6.0

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

@@ -1,18 +1,18 @@
-const root = "_root_1bf9l_1";
-const title = "_title_1bf9l_13";
-const list = "_list_1bf9l_18";
-const item = "_item_1bf9l_28";
-const groupHeaderRow = "_groupHeaderRow_1bf9l_29";
-const link = "_link_1bf9l_122";
-const linkLabel = "_linkLabel_1bf9l_149";
-const leading = "_leading_1bf9l_157";
-const trailing = "_trailing_1bf9l_158";
-const active = "_active_1bf9l_170";
-const groupHeader = "_groupHeader_1bf9l_29";
-const groupHeaderInteractive = "_groupHeaderInteractive_1bf9l_195";
-const groupHeaderActive = "_groupHeaderActive_1bf9l_208";
-const groupChevron = "_groupChevron_1bf9l_212";
-const groupLabel = "_groupLabel_1bf9l_230";
+const root = "_root_16mr3_1";
+const title = "_title_16mr3_25";
+const list = "_list_16mr3_30";
+const item = "_item_16mr3_40";
+const groupHeaderRow = "_groupHeaderRow_16mr3_41";
+const link = "_link_16mr3_46";
+const linkLabel = "_linkLabel_16mr3_92";
+const leading = "_leading_16mr3_100";
+const trailing = "_trailing_16mr3_101";
+const active = "_active_16mr3_143";
+const groupHeader = "_groupHeader_16mr3_41";
+const groupHeaderInteractive = "_groupHeaderInteractive_16mr3_186";
+const groupHeaderActive = "_groupHeaderActive_16mr3_199";
+const groupChevron = "_groupChevron_16mr3_203";
+const groupLabel = "_groupLabel_16mr3_221";
 const styles = {
   root,
   title,

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

@@ -1,17 +1,17 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const root = "_root_hmb9h_1";
-const list = "_list_hmb9h_10";
-const listPills = "_listPills_hmb9h_26";
-const tab = "_tab_hmb9h_37";
-const tabSm = "_tabSm_hmb9h_84";
-const tabMd = "_tabMd_hmb9h_89";
-const tabLg = "_tabLg_hmb9h_94";
-const tabUnderline = "_tabUnderline_hmb9h_100";
-const tabPills = "_tabPills_hmb9h_108";
-const indicator = "_indicator_hmb9h_122";
-const panel = "_panel_hmb9h_143";
-const panelFlush = "_panelFlush_hmb9h_156";
+const root = "_root_1vdrf_1";
+const list = "_list_1vdrf_10";
+const listPills = "_listPills_1vdrf_27";
+const tab = "_tab_1vdrf_38";
+const tabSm = "_tabSm_1vdrf_79";
+const tabMd = "_tabMd_1vdrf_108";
+const tabLg = "_tabLg_1vdrf_137";
+const tabUnderline = "_tabUnderline_1vdrf_166";
+const tabPills = "_tabPills_1vdrf_173";
+const indicator = "_indicator_1vdrf_187";
+const panel = "_panel_1vdrf_208";
+const panelFlush = "_panelFlush_1vdrf_222";
 const styles = {
   root,
   list,

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

@@ -1,15 +1,15 @@
-const root = "_root_hmb9h_1";
-const list = "_list_hmb9h_10";
-const listPills = "_listPills_hmb9h_26";
-const tab = "_tab_hmb9h_37";
-const tabSm = "_tabSm_hmb9h_84";
-const tabMd = "_tabMd_hmb9h_89";
-const tabLg = "_tabLg_hmb9h_94";
-const tabUnderline = "_tabUnderline_hmb9h_100";
-const tabPills = "_tabPills_hmb9h_108";
-const indicator = "_indicator_hmb9h_122";
-const panel = "_panel_hmb9h_143";
-const panelFlush = "_panelFlush_hmb9h_156";
+const root = "_root_1vdrf_1";
+const list = "_list_1vdrf_10";
+const listPills = "_listPills_1vdrf_27";
+const tab = "_tab_1vdrf_38";
+const tabSm = "_tabSm_1vdrf_79";
+const tabMd = "_tabMd_1vdrf_108";
+const tabLg = "_tabLg_1vdrf_137";
+const tabUnderline = "_tabUnderline_1vdrf_166";
+const tabPills = "_tabPills_1vdrf_173";
+const indicator = "_indicator_1vdrf_187";
+const panel = "_panel_1vdrf_208";
+const panelFlush = "_panelFlush_1vdrf_222";
 const styles = {
   root,
   list,

package/dist/components/Tabs/index.cjs

@@ -24,7 +24,7 @@ function _interopNamespaceDefault(e) {
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
 const TabsVariantContext = React__namespace.createContext("underline");
-const TabsSizeContext = React__namespace.createContext("sm");
+const TabsSizeContext = React__namespace.createContext("md");
 function TabsRoot({
   children,
   defaultValue,
@@ -36,7 +36,7 @@ function TabsRoot({
   className,
   ...htmlProps
 }) {
-  const size = index.useResolvedControlSize(sizeProp, "sm");
+  const size = index.useResolvedControlSize(sizeProp);
   const classes = [Tabs_module.default.root, className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxRuntime.jsx(TabsVariantContext.Provider, { value: variant, children: /* @__PURE__ */ jsxRuntime.jsx(TabsSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsxRuntime.jsx(
     tabs.Tabs.Root,

package/dist/components/Tabs/index.js

@@ -5,7 +5,7 @@ import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
 import { useResolvedControlSize } from "../ComponentDefaults/index.js";
 import styles from "./Tabs.module.scss.js";
 const TabsVariantContext = React.createContext("underline");
-const TabsSizeContext = React.createContext("sm");
+const TabsSizeContext = React.createContext("md");
 function TabsRoot({
   children,
   defaultValue,
@@ -17,7 +17,7 @@ function TabsRoot({
   className,
   ...htmlProps
 }) {
-  const size = useResolvedControlSize(sizeProp, "sm");
+  const size = useResolvedControlSize(sizeProp);
   const classes = [styles.root, className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsx(TabsVariantContext.Provider, { value: variant, children: /* @__PURE__ */ jsx(TabsSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx(
     Tabs$1.Root,

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

@@ -1,92 +1,119 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const text = "_text_1159j_1";
-const variantSectionLabel = "_variant-section-label_1159j_7";
-const size2Xs = "_size-2xs_1159j_17";
-const sizeXs = "_size-xs_1159j_21";
-const sizeSm = "_size-sm_1159j_25";
-const sizeBase = "_size-base_1159j_29";
-const sizeMd = "_size-md_1159j_33";
-const sizeLg = "_size-lg_1159j_37";
-const sizeXl = "_size-xl_1159j_41";
-const size2Xl = "_size-2xl_1159j_45";
-const size3Xl = "_size-3xl_1159j_49";
-const size4Xl = "_size-4xl_1159j_55";
-const weightNormal = "_weight-normal_1159j_61";
-const weightMedium = "_weight-medium_1159j_65";
-const weightSemibold = "_weight-semibold_1159j_69";
-const weightBold = "_weight-bold_1159j_73";
-const colorPrimary = "_color-primary_1159j_77";
-const colorSecondary = "_color-secondary_1159j_81";
-const colorTertiary = "_color-tertiary_1159j_85";
-const colorMuted = "_color-muted_1159j_86";
-const colorSuccess = "_color-success_1159j_90";
-const colorWarning = "_color-warning_1159j_94";
-const colorDanger = "_color-danger_1159j_98";
-const mono = "_mono_1159j_102";
-const truncate = "_truncate_1159j_106";
-const lineClamp = "_lineClamp_1159j_112";
-const trackingNormal = "_tracking-normal_1159j_120";
-const trackingTight = "_tracking-tight_1159j_124";
-const trackingTighter = "_tracking-tighter_1159j_128";
-const trackingTightest = "_tracking-tightest_1159j_132";
-const tabularNums = "_tabularNums_1159j_136";
+const text = "_text_sa0f4_1";
+const variantSectionLabel = "_variant-section-label_sa0f4_7";
+const roleCaption = "_role-caption_sa0f4_15";
+const roleUiCompact = "_role-ui-compact_sa0f4_23";
+const roleUiStandard = "_role-ui-standard_sa0f4_31";
+const roleBodyCompact = "_role-body-compact_sa0f4_39";
+const roleBodyRelaxed = "_role-body-relaxed_sa0f4_47";
+const roleTitleSm = "_role-title-sm_sa0f4_55";
+const roleTitleMd = "_role-title-md_sa0f4_63";
+const roleTitleLg = "_role-title-lg_sa0f4_71";
+const roleCode = "_role-code_sa0f4_79";
+const size2Xs = "_size-2xs_sa0f4_87";
+const sizeXs = "_size-xs_sa0f4_91";
+const sizeSm = "_size-sm_sa0f4_95";
+const sizeBase = "_size-base_sa0f4_99";
+const sizeMd = "_size-md_sa0f4_103";
+const sizeLg = "_size-lg_sa0f4_107";
+const sizeXl = "_size-xl_sa0f4_111";
+const size2Xl = "_size-2xl_sa0f4_115";
+const size3Xl = "_size-3xl_sa0f4_119";
+const size4Xl = "_size-4xl_sa0f4_125";
+const weightNormal = "_weight-normal_sa0f4_131";
+const weightMedium = "_weight-medium_sa0f4_135";
+const weightSemibold = "_weight-semibold_sa0f4_139";
+const weightBold = "_weight-bold_sa0f4_143";
+const colorPrimary = "_color-primary_sa0f4_147";
+const colorSecondary = "_color-secondary_sa0f4_151";
+const colorTertiary = "_color-tertiary_sa0f4_155";
+const colorMuted = "_color-muted_sa0f4_156";
+const colorSuccess = "_color-success_sa0f4_160";
+const colorWarning = "_color-warning_sa0f4_164";
+const colorDanger = "_color-danger_sa0f4_168";
+const mono = "_mono_sa0f4_172";
+const truncate = "_truncate_sa0f4_176";
+const lineClamp = "_lineClamp_sa0f4_182";
+const trackingNormal = "_tracking-normal_sa0f4_190";
+const trackingTight = "_tracking-tight_sa0f4_194";
+const trackingTighter = "_tracking-tighter_sa0f4_198";
+const trackingTightest = "_tracking-tightest_sa0f4_202";
+const tabularNums = "_tabularNums_sa0f4_206";
 const styles = {
   text,
-  "variant-section-label": "_variant-section-label_1159j_7",
+  "variant-section-label": "_variant-section-label_sa0f4_7",
   variantSectionLabel,
-  "size-2xs": "_size-2xs_1159j_17",
+  "role-caption": "_role-caption_sa0f4_15",
+  roleCaption,
+  "role-ui-compact": "_role-ui-compact_sa0f4_23",
+  roleUiCompact,
+  "role-ui-standard": "_role-ui-standard_sa0f4_31",
+  roleUiStandard,
+  "role-body-compact": "_role-body-compact_sa0f4_39",
+  roleBodyCompact,
+  "role-body-relaxed": "_role-body-relaxed_sa0f4_47",
+  roleBodyRelaxed,
+  "role-title-sm": "_role-title-sm_sa0f4_55",
+  roleTitleSm,
+  "role-title-md": "_role-title-md_sa0f4_63",
+  roleTitleMd,
+  "role-title-lg": "_role-title-lg_sa0f4_71",
+  roleTitleLg,
+  "role-code": "_role-code_sa0f4_79",
+  roleCode,
+  "size-2xs": "_size-2xs_sa0f4_87",
   size2Xs,
-  "size-xs": "_size-xs_1159j_21",
+  "size-xs": "_size-xs_sa0f4_91",
   sizeXs,
-  "size-sm": "_size-sm_1159j_25",
+  "size-sm": "_size-sm_sa0f4_95",
   sizeSm,
-  "size-base": "_size-base_1159j_29",
+  "size-base": "_size-base_sa0f4_99",
   sizeBase,
-  "size-md": "_size-md_1159j_33",
+  "size-md": "_size-md_sa0f4_103",
   sizeMd,
-  "size-lg": "_size-lg_1159j_37",
+  "size-lg": "_size-lg_sa0f4_107",
   sizeLg,
-  "size-xl": "_size-xl_1159j_41",
+  "size-xl": "_size-xl_sa0f4_111",
   sizeXl,
-  "size-2xl": "_size-2xl_1159j_45",
+  "size-2xl": "_size-2xl_sa0f4_115",
   size2Xl,
-  "size-3xl": "_size-3xl_1159j_49",
+  "size-3xl": "_size-3xl_sa0f4_119",
   size3Xl,
-  "size-4xl": "_size-4xl_1159j_55",
+  "size-4xl": "_size-4xl_sa0f4_125",
   size4Xl,
-  "weight-normal": "_weight-normal_1159j_61",
+  "weight-normal": "_weight-normal_sa0f4_131",
   weightNormal,
-  "weight-medium": "_weight-medium_1159j_65",
+  "weight-medium": "_weight-medium_sa0f4_135",
   weightMedium,
-  "weight-semibold": "_weight-semibold_1159j_69",
+  "weight-semibold": "_weight-semibold_sa0f4_139",
   weightSemibold,
-  "weight-bold": "_weight-bold_1159j_73",
+  "weight-bold": "_weight-bold_sa0f4_143",
   weightBold,
-  "color-primary": "_color-primary_1159j_77",
+  "color-primary": "_color-primary_sa0f4_147",
   colorPrimary,
-  "color-secondary": "_color-secondary_1159j_81",
+  "color-secondary": "_color-secondary_sa0f4_151",
   colorSecondary,
-  "color-tertiary": "_color-tertiary_1159j_85",
+  "color-tertiary": "_color-tertiary_sa0f4_155",
   colorTertiary,
-  "color-muted": "_color-muted_1159j_86",
+  "color-muted": "_color-muted_sa0f4_156",
   colorMuted,
-  "color-success": "_color-success_1159j_90",
+  "color-success": "_color-success_sa0f4_160",
   colorSuccess,
-  "color-warning": "_color-warning_1159j_94",
+  "color-warning": "_color-warning_sa0f4_164",
   colorWarning,
-  "color-danger": "_color-danger_1159j_98",
+  "color-danger": "_color-danger_sa0f4_168",
   colorDanger,
   mono,
   truncate,
   lineClamp,
-  "tracking-normal": "_tracking-normal_1159j_120",
+  "tracking-normal": "_tracking-normal_sa0f4_190",
   trackingNormal,
-  "tracking-tight": "_tracking-tight_1159j_124",
+  "tracking-tight": "_tracking-tight_sa0f4_194",
   trackingTight,
-  "tracking-tighter": "_tracking-tighter_1159j_128",
+  "tracking-tighter": "_tracking-tighter_sa0f4_198",
   trackingTighter,
-  "tracking-tightest": "_tracking-tightest_1159j_132",
+  "tracking-tightest": "_tracking-tightest_sa0f4_202",
   trackingTightest,
   tabularNums
 };
@@ -100,6 +127,15 @@ exports.colorWarning = colorWarning;
 exports.default = styles;
 exports.lineClamp = lineClamp;
 exports.mono = mono;
+exports.roleBodyCompact = roleBodyCompact;
+exports.roleBodyRelaxed = roleBodyRelaxed;
+exports.roleCaption = roleCaption;
+exports.roleCode = roleCode;
+exports.roleTitleLg = roleTitleLg;
+exports.roleTitleMd = roleTitleMd;
+exports.roleTitleSm = roleTitleSm;
+exports.roleUiCompact = roleUiCompact;
+exports.roleUiStandard = roleUiStandard;
 exports.size2Xl = size2Xl;
 exports.size2Xs = size2Xs;
 exports.size3Xl = size3Xl;

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

@@ -1,90 +1,117 @@
-const text = "_text_1159j_1";
-const variantSectionLabel = "_variant-section-label_1159j_7";
-const size2Xs = "_size-2xs_1159j_17";
-const sizeXs = "_size-xs_1159j_21";
-const sizeSm = "_size-sm_1159j_25";
-const sizeBase = "_size-base_1159j_29";
-const sizeMd = "_size-md_1159j_33";
-const sizeLg = "_size-lg_1159j_37";
-const sizeXl = "_size-xl_1159j_41";
-const size2Xl = "_size-2xl_1159j_45";
-const size3Xl = "_size-3xl_1159j_49";
-const size4Xl = "_size-4xl_1159j_55";
-const weightNormal = "_weight-normal_1159j_61";
-const weightMedium = "_weight-medium_1159j_65";
-const weightSemibold = "_weight-semibold_1159j_69";
-const weightBold = "_weight-bold_1159j_73";
-const colorPrimary = "_color-primary_1159j_77";
-const colorSecondary = "_color-secondary_1159j_81";
-const colorTertiary = "_color-tertiary_1159j_85";
-const colorMuted = "_color-muted_1159j_86";
-const colorSuccess = "_color-success_1159j_90";
-const colorWarning = "_color-warning_1159j_94";
-const colorDanger = "_color-danger_1159j_98";
-const mono = "_mono_1159j_102";
-const truncate = "_truncate_1159j_106";
-const lineClamp = "_lineClamp_1159j_112";
-const trackingNormal = "_tracking-normal_1159j_120";
-const trackingTight = "_tracking-tight_1159j_124";
-const trackingTighter = "_tracking-tighter_1159j_128";
-const trackingTightest = "_tracking-tightest_1159j_132";
-const tabularNums = "_tabularNums_1159j_136";
+const text = "_text_sa0f4_1";
+const variantSectionLabel = "_variant-section-label_sa0f4_7";
+const roleCaption = "_role-caption_sa0f4_15";
+const roleUiCompact = "_role-ui-compact_sa0f4_23";
+const roleUiStandard = "_role-ui-standard_sa0f4_31";
+const roleBodyCompact = "_role-body-compact_sa0f4_39";
+const roleBodyRelaxed = "_role-body-relaxed_sa0f4_47";
+const roleTitleSm = "_role-title-sm_sa0f4_55";
+const roleTitleMd = "_role-title-md_sa0f4_63";
+const roleTitleLg = "_role-title-lg_sa0f4_71";
+const roleCode = "_role-code_sa0f4_79";
+const size2Xs = "_size-2xs_sa0f4_87";
+const sizeXs = "_size-xs_sa0f4_91";
+const sizeSm = "_size-sm_sa0f4_95";
+const sizeBase = "_size-base_sa0f4_99";
+const sizeMd = "_size-md_sa0f4_103";
+const sizeLg = "_size-lg_sa0f4_107";
+const sizeXl = "_size-xl_sa0f4_111";
+const size2Xl = "_size-2xl_sa0f4_115";
+const size3Xl = "_size-3xl_sa0f4_119";
+const size4Xl = "_size-4xl_sa0f4_125";
+const weightNormal = "_weight-normal_sa0f4_131";
+const weightMedium = "_weight-medium_sa0f4_135";
+const weightSemibold = "_weight-semibold_sa0f4_139";
+const weightBold = "_weight-bold_sa0f4_143";
+const colorPrimary = "_color-primary_sa0f4_147";
+const colorSecondary = "_color-secondary_sa0f4_151";
+const colorTertiary = "_color-tertiary_sa0f4_155";
+const colorMuted = "_color-muted_sa0f4_156";
+const colorSuccess = "_color-success_sa0f4_160";
+const colorWarning = "_color-warning_sa0f4_164";
+const colorDanger = "_color-danger_sa0f4_168";
+const mono = "_mono_sa0f4_172";
+const truncate = "_truncate_sa0f4_176";
+const lineClamp = "_lineClamp_sa0f4_182";
+const trackingNormal = "_tracking-normal_sa0f4_190";
+const trackingTight = "_tracking-tight_sa0f4_194";
+const trackingTighter = "_tracking-tighter_sa0f4_198";
+const trackingTightest = "_tracking-tightest_sa0f4_202";
+const tabularNums = "_tabularNums_sa0f4_206";
 const styles = {
   text,
-  "variant-section-label": "_variant-section-label_1159j_7",
+  "variant-section-label": "_variant-section-label_sa0f4_7",
   variantSectionLabel,
-  "size-2xs": "_size-2xs_1159j_17",
+  "role-caption": "_role-caption_sa0f4_15",
+  roleCaption,
+  "role-ui-compact": "_role-ui-compact_sa0f4_23",
+  roleUiCompact,
+  "role-ui-standard": "_role-ui-standard_sa0f4_31",
+  roleUiStandard,
+  "role-body-compact": "_role-body-compact_sa0f4_39",
+  roleBodyCompact,
+  "role-body-relaxed": "_role-body-relaxed_sa0f4_47",
+  roleBodyRelaxed,
+  "role-title-sm": "_role-title-sm_sa0f4_55",
+  roleTitleSm,
+  "role-title-md": "_role-title-md_sa0f4_63",
+  roleTitleMd,
+  "role-title-lg": "_role-title-lg_sa0f4_71",
+  roleTitleLg,
+  "role-code": "_role-code_sa0f4_79",
+  roleCode,
+  "size-2xs": "_size-2xs_sa0f4_87",
   size2Xs,
-  "size-xs": "_size-xs_1159j_21",
+  "size-xs": "_size-xs_sa0f4_91",
   sizeXs,
-  "size-sm": "_size-sm_1159j_25",
+  "size-sm": "_size-sm_sa0f4_95",
   sizeSm,
-  "size-base": "_size-base_1159j_29",
+  "size-base": "_size-base_sa0f4_99",
   sizeBase,
-  "size-md": "_size-md_1159j_33",
+  "size-md": "_size-md_sa0f4_103",
   sizeMd,
-  "size-lg": "_size-lg_1159j_37",
+  "size-lg": "_size-lg_sa0f4_107",
   sizeLg,
-  "size-xl": "_size-xl_1159j_41",
+  "size-xl": "_size-xl_sa0f4_111",
   sizeXl,
-  "size-2xl": "_size-2xl_1159j_45",
+  "size-2xl": "_size-2xl_sa0f4_115",
   size2Xl,
-  "size-3xl": "_size-3xl_1159j_49",
+  "size-3xl": "_size-3xl_sa0f4_119",
   size3Xl,
-  "size-4xl": "_size-4xl_1159j_55",
+  "size-4xl": "_size-4xl_sa0f4_125",
   size4Xl,
-  "weight-normal": "_weight-normal_1159j_61",
+  "weight-normal": "_weight-normal_sa0f4_131",
   weightNormal,
-  "weight-medium": "_weight-medium_1159j_65",
+  "weight-medium": "_weight-medium_sa0f4_135",
   weightMedium,
-  "weight-semibold": "_weight-semibold_1159j_69",
+  "weight-semibold": "_weight-semibold_sa0f4_139",
   weightSemibold,
-  "weight-bold": "_weight-bold_1159j_73",
+  "weight-bold": "_weight-bold_sa0f4_143",
   weightBold,
-  "color-primary": "_color-primary_1159j_77",
+  "color-primary": "_color-primary_sa0f4_147",
   colorPrimary,
-  "color-secondary": "_color-secondary_1159j_81",
+  "color-secondary": "_color-secondary_sa0f4_151",
   colorSecondary,
-  "color-tertiary": "_color-tertiary_1159j_85",
+  "color-tertiary": "_color-tertiary_sa0f4_155",
   colorTertiary,
-  "color-muted": "_color-muted_1159j_86",
+  "color-muted": "_color-muted_sa0f4_156",
   colorMuted,
-  "color-success": "_color-success_1159j_90",
+  "color-success": "_color-success_sa0f4_160",
   colorSuccess,
-  "color-warning": "_color-warning_1159j_94",
+  "color-warning": "_color-warning_sa0f4_164",
   colorWarning,
-  "color-danger": "_color-danger_1159j_98",
+  "color-danger": "_color-danger_sa0f4_168",
   colorDanger,
   mono,
   truncate,
   lineClamp,
-  "tracking-normal": "_tracking-normal_1159j_120",
+  "tracking-normal": "_tracking-normal_sa0f4_190",
   trackingNormal,
-  "tracking-tight": "_tracking-tight_1159j_124",
+  "tracking-tight": "_tracking-tight_sa0f4_194",
   trackingTight,
-  "tracking-tighter": "_tracking-tighter_1159j_128",
+  "tracking-tighter": "_tracking-tighter_sa0f4_198",
   trackingTighter,
-  "tracking-tightest": "_tracking-tightest_1159j_132",
+  "tracking-tightest": "_tracking-tightest_sa0f4_202",
   trackingTightest,
   tabularNums
 };
@@ -99,6 +126,15 @@ export {
   styles as default,
   lineClamp,
   mono,
+  roleBodyCompact,
+  roleBodyRelaxed,
+  roleCaption,
+  roleCode,
+  roleTitleLg,
+  roleTitleMd,
+  roleTitleSm,
+  roleUiCompact,
+  roleUiStandard,
   size2Xl,
   size2Xs,
   size3Xl,

package/dist/components/Text/index.cjs

@@ -24,11 +24,12 @@ const TextRoot = React__namespace.forwardRef(
   function Text2({
     children,
     as: Component = "span",
+    role,
     variant,
     size,
     weight,
     color,
-    font = "sans",
+    font,
     truncate,
     lineClamp,
     letterSpacing,
@@ -37,16 +38,23 @@ const TextRoot = React__namespace.forwardRef(
     style,
     ...htmlProps
   }, ref) {
+    const ignoredLegacyProps = role ? [size, variant, weight, font, letterSpacing].some((value) => value !== void 0) : false;
+    if (process.env.NODE_ENV !== "production" && ignoredLegacyProps) {
+      console.warn(
+        "[Text] Semantic role takes precedence over size, variant, weight, font, and letterSpacing."
+      );
+    }
     const classes = [
       Text_module.default.text,
-      variant && Text_module.default[`variant-${variant}`],
-      size && Text_module.default[`size-${size}`],
-      weight && Text_module.default[`weight-${weight}`],
+      role && Text_module.default[`role-${role}`],
+      !role && variant && Text_module.default[`variant-${variant}`],
+      !role && size && Text_module.default[`size-${size}`],
+      !role && weight && Text_module.default[`weight-${weight}`],
       color && Text_module.default[`color-${color}`],
-      font === "mono" && Text_module.default.mono,
+      !role && font === "mono" && Text_module.default.mono,
       truncate && Text_module.default.truncate,
       lineClamp && Text_module.default.lineClamp,
-      letterSpacing && Text_module.default[`tracking-${letterSpacing}`],
+      !role && letterSpacing && Text_module.default[`tracking-${letterSpacing}`],
       tabularNums && Text_module.default.tabularNums,
       className
     ].filter(Boolean).join(" ");

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

@@ -3,28 +3,21 @@ import * as React from 'react';
  * Typography component for rendering text with consistent styling.
  * @see https://usefragments.com/components/text
  */
-export interface TextProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'> {
+export type TextRole = 'caption' | 'ui-compact' | 'ui-standard' | 'body-compact' | 'body-relaxed' | 'title-sm' | 'title-md' | 'title-lg' | 'code';
+export type TextSize = '2xs' | 'xs' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+export type TextWeight = 'normal' | 'medium' | 'semibold' | 'bold';
+export type TextFont = 'sans' | 'mono';
+export type TextTracking = 'normal' | 'tight' | 'tighter' | 'tightest';
+type TextSharedProps = Omit<React.HTMLAttributes<HTMLElement>, 'color' | 'role'> & {
     children: React.ReactNode;
     /** HTML element to render.
      * @default "span" */
     as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'label' | 'div' | 'strong' | 'em' | 'small' | 'mark' | 'del' | 'ins' | 'sub' | 'sup' | 'time' | 'address' | 'blockquote' | 'cite' | 'code' | 'abbr';
-    /** Preset text variant */
-    variant?: 'section-label';
-    /** Font size. Steps up the scale: 2xs (10), xs (12), sm/base (14), md (15 prose body),
-     * lg (20), xl (24), 2xl (30), 3xl (36 page title), 4xl (48 hero).
-     * @see https://usefragments.com/components/text#sizes */
-    size?: '2xs' | 'xs' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
-    /** Font weight.
-     * @default "normal" */
-    weight?: 'normal' | 'medium' | 'semibold' | 'bold';
     /** Text color. `"muted"` is an alias for `"tertiary"`. `"success" | "warning" | "danger"`
      * are for a run of text that carries a state on its own; prefer Badge or Alert when the
      * state deserves a container.
      * @default "primary" */
     color?: 'primary' | 'secondary' | 'tertiary' | 'muted' | 'success' | 'warning' | 'danger';
-    /** Font family.
-     * @default "sans" */
-    font?: 'sans' | 'mono';
     /** Truncate text with ellipsis when it overflows */
     truncate?: boolean;
     /** Number of lines before truncating (requires truncate=true) */
@@ -32,12 +25,29 @@ export interface TextProps extends Omit<React.HTMLAttributes<HTMLElement>, 'colo
     /** Letter-spacing preset. `"tight"` suits dense UI chrome labels (-0.01em);
      * `"tighter"` suits headings and stat values (-0.02em); `"tightest"` suits
      * display numerics (-0.025em). Omit for the font's default tracking. */
-    letterSpacing?: 'normal' | 'tight' | 'tighter' | 'tightest';
     /** Use tabular (fixed-width) numerals so digits align in columns. Ideal for
      * stat values, tables, timestamps, and any updating number. */
     tabularNums?: boolean;
-}
+};
+type TextRoleProps = {
+    role: TextRole;
+    size?: never;
+    variant?: never;
+    weight?: never;
+    font?: never;
+    letterSpacing?: never;
+};
+type TextLegacyScaleProps = {
+    role?: never;
+    size?: TextSize;
+    variant?: 'section-label';
+    weight?: TextWeight;
+    font?: TextFont;
+    letterSpacing?: TextTracking;
+};
+export type TextProps = TextSharedProps & (TextRoleProps | TextLegacyScaleProps);
 export declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLElement>> & {
     Root: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLElement>>;
 };
+export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Text/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;GAGG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IACjF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;yBACqB;IACrB,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,IAAI,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,SAAS,GAAG,YAAY,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAClN,0BAA0B;IAC1B,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B;;6DAEyD;IACzD,IAAI,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;IACjF;2BACuB;IACvB,MAAM,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;IACnD;;;4BAGwB;IACxB,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;IAC1F;yBACqB;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;4EAEwE;IACxE,aAAa,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,CAAC;IAC5D;mEAC+D;IAC/D,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAkDD,eAAO,MAAM,IAAI;;CAEf,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Text/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAChB,SAAS,GACT,YAAY,GACZ,aAAa,GACb,cAAc,GACd,cAAc,GACd,UAAU,GACV,UAAU,GACV,UAAU,GACV,MAAM,CAAC;AAEX,MAAM,MAAM,QAAQ,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AACjG,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;AACnE,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;AACvC,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,CAAC;AAEvE,KAAK,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG;IACjF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;yBACqB;IACrB,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,IAAI,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,SAAS,GAAG,YAAY,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAClN;;;4BAGwB;IACxB,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;IAC1F,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;4EAEwE;IACxE;mEAC+D;IAC/D,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,KAAK,aAAa,GAAG;IACnB,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,aAAa,CAAC,EAAE,KAAK,CAAC;CACvB,CAAC;AAEF,KAAK,oBAAoB,GAAG;IAC1B,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,aAAa,CAAC,EAAE,YAAY,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,eAAe,GAAG,CAAC,aAAa,GAAG,oBAAoB,CAAC,CAAC;AA8DjF,eAAO,MAAM,IAAI;;CAEf,CAAC"}