@usefragments/ui 1.5.4 → 1.7.0

package/dist/components/Stack/index.js

@@ -1,5 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
+import { resolveLayoutGap } from "../../utils/layout-spacing.js";
 import styles from "./Stack.module.scss.js";
 function isResponsiveDirection(direction) {
   return typeof direction === "object" && direction !== null;
@@ -10,109 +11,113 @@ function isResponsiveGap(gap) {
 function isNumericGap(gap) {
   return typeof gap === "number";
 }
-const StackRoot = React.forwardRef(
-  function Stack2({
-    children,
-    direction = "column",
-    gap = "md",
-    align,
-    justify,
-    wrap = false,
-    separator,
-    as: Component = "div",
-    className,
-    style,
-    ...htmlProps
-  }, ref) {
-    let directionClass;
-    let gapClass;
-    let inlineStyle;
-    if (isResponsiveDirection(direction)) {
-      directionClass = styles.directionResponsive;
-      const vars = {};
-      if (direction.base) vars["--fui-stack-direction"] = direction.base;
-      if (direction.sm) vars["--fui-stack-direction-sm"] = direction.sm;
-      if (direction.md) vars["--fui-stack-direction-md"] = direction.md;
-      if (direction.lg) vars["--fui-stack-direction-lg"] = direction.lg;
-      if (direction.xl) vars["--fui-stack-direction-xl"] = direction.xl;
-      inlineStyle = vars;
-    } else {
-      directionClass = styles[direction];
-    }
-    if (isResponsiveGap(gap)) {
-      gapClass = styles.gapResponsive;
-      const gapVars = {};
-      if (gap.base && gap.base !== "none") gapVars["--fui-stack-gap"] = `var(--fui-space-${gapToSpace(gap.base)})`;
-      if (gap.sm && gap.sm !== "none") gapVars["--fui-stack-gap-sm"] = `var(--fui-space-${gapToSpace(gap.sm)})`;
-      if (gap.md && gap.md !== "none") gapVars["--fui-stack-gap-md"] = `var(--fui-space-${gapToSpace(gap.md)})`;
-      if (gap.lg && gap.lg !== "none") gapVars["--fui-stack-gap-lg"] = `var(--fui-space-${gapToSpace(gap.lg)})`;
-      if (gap.xl && gap.xl !== "none") gapVars["--fui-stack-gap-xl"] = `var(--fui-space-${gapToSpace(gap.xl)})`;
-      inlineStyle = { ...inlineStyle, ...gapVars };
-    } else if (isNumericGap(gap)) {
-      gapClass = false;
-      inlineStyle = { ...inlineStyle, gap: `var(--fui-space-${gap})` };
-    } else {
-      gapClass = gap !== "none" && styles[`gap-${gap}`];
-    }
-    const classes = [
-      styles.stack,
-      directionClass,
-      gapClass,
-      align && styles[`align-${align}`],
-      justify && styles[`justify-${justify}`],
-      wrap && styles.wrap,
-      className
-    ].filter(Boolean).join(" ");
-    const mergedStyle = inlineStyle ? { ...inlineStyle, ...style } : style;
-    let content = children;
-    if (separator) {
-      const validChildren = React.Children.toArray(children).filter(Boolean);
-      if (validChildren.length > 1) {
-        const resolvedDir = isResponsiveDirection(direction) ? direction.base ?? "column" : direction;
-        const separatorEl = separator === true ? /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: styles.separator,
-            "data-orientation": resolvedDir === "row" ? "vertical" : "horizontal",
-            role: "separator"
-          }
-        ) : separator;
-        const items = [];
-        validChildren.forEach((child, idx) => {
-          items.push(child);
-          if (idx < validChildren.length - 1) {
-            const childKey = React.isValidElement(child) && child.key != null ? child.key : `idx-${idx}`;
-            items.push(
-              /* @__PURE__ */ jsx(React.Fragment, { children: separatorEl }, `sep-${childKey}`)
-            );
-          }
-        });
-        content = items;
-      }
+const StackRoot = React.forwardRef(function Stack2({
+  children,
+  direction = "column",
+  gap = "md",
+  align,
+  justify,
+  wrap = false,
+  separator,
+  as: Component = "div",
+  className,
+  style,
+  ...htmlProps
+}, ref) {
+  let directionClass;
+  let gapClass;
+  let inlineStyle;
+  if (isResponsiveDirection(direction)) {
+    directionClass = styles.directionResponsive;
+    const vars = {};
+    const baseDirection = direction.base ?? "column";
+    const smDirection = direction.sm ?? baseDirection;
+    const mdDirection = direction.md ?? smDirection;
+    const lgDirection = direction.lg ?? mdDirection;
+    const xlDirection = direction.xl ?? lgDirection;
+    vars["--fui-stack-direction"] = baseDirection;
+    vars["--fui-stack-direction-sm"] = smDirection;
+    vars["--fui-stack-direction-md"] = mdDirection;
+    vars["--fui-stack-direction-lg"] = lgDirection;
+    vars["--fui-stack-direction-xl"] = xlDirection;
+    inlineStyle = vars;
+  } else {
+    directionClass = styles[direction] ?? "";
+  }
+  if (isResponsiveGap(gap)) {
+    gapClass = styles.gapResponsive;
+    const gapVars = {};
+    if (gap.base) gapVars["--fui-stack-gap"] = resolveLayoutGap(gap.base);
+    if (gap.sm) gapVars["--fui-stack-gap-sm"] = resolveLayoutGap(gap.sm);
+    if (gap.md) gapVars["--fui-stack-gap-md"] = resolveLayoutGap(gap.md);
+    if (gap.lg) gapVars["--fui-stack-gap-lg"] = resolveLayoutGap(gap.lg);
+    if (gap.xl) gapVars["--fui-stack-gap-xl"] = resolveLayoutGap(gap.xl);
+    inlineStyle = { ...inlineStyle, ...gapVars };
+  } else if (isNumericGap(gap)) {
+    gapClass = false;
+    inlineStyle = {
+      ...inlineStyle,
+      "--fui-stack-gap": resolveLayoutGap(gap)
+    };
+  } else {
+    gapClass = false;
+    inlineStyle = {
+      ...inlineStyle,
+      "--fui-stack-gap": resolveLayoutGap(gap)
+    };
+  }
+  const classes = [
+    styles.stack,
+    directionClass,
+    gapClass,
+    align && styles[`align-${align}`],
+    justify && styles[`justify-${justify}`],
+    wrap && styles.wrap,
+    className
+  ].filter(Boolean).join(" ");
+  const mergedStyle = inlineStyle ? { ...inlineStyle, ...style } : style;
+  let content = children;
+  if (separator) {
+    const validChildren = React.Children.toArray(children).filter(Boolean);
+    if (validChildren.length > 1) {
+      const responsiveDirection = isResponsiveDirection(direction);
+      const resolvedDir = responsiveDirection ? direction.base ?? "column" : direction;
+      const separatorEl = separator === true ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: styles.separator,
+          "data-orientation": resolvedDir === "row" ? "vertical" : "horizontal",
+          role: responsiveDirection ? void 0 : "separator",
+          "aria-hidden": responsiveDirection ? true : void 0
+        }
+      ) : separator;
+      const items = [];
+      validChildren.forEach((child, idx) => {
+        items.push(child);
+        if (idx < validChildren.length - 1) {
+          const childKey = React.isValidElement(child) && child.key != null ? child.key : `idx-${idx}`;
+          items.push(/* @__PURE__ */ jsx(React.Fragment, { children: separatorEl }, `sep-${childKey}`));
+        }
+      });
+      content = items;
     }
-    return /* @__PURE__ */ jsx(
-      Component,
-      {
-        ...htmlProps,
-        ref,
-        className: classes,
-        style: mergedStyle,
-        children: content
-      }
-    );
   }
-);
-function gapToSpace(gap) {
-  const map = {
-    none: "0",
-    xs: "1",
-    sm: "2",
-    md: "3",
-    lg: "4",
-    xl: "6"
-  };
-  return map[gap];
-}
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ...htmlProps,
+      ref,
+      className: classes,
+      style: mergedStyle,
+      "data-direction-base": isResponsiveDirection(direction) ? direction.base ?? "column" : direction,
+      "data-direction-sm": isResponsiveDirection(direction) ? direction.sm ?? direction.base ?? "column" : direction,
+      "data-direction-md": isResponsiveDirection(direction) ? direction.md ?? direction.sm ?? direction.base ?? "column" : direction,
+      "data-direction-lg": isResponsiveDirection(direction) ? direction.lg ?? direction.md ?? direction.sm ?? direction.base ?? "column" : direction,
+      "data-direction-xl": isResponsiveDirection(direction) ? direction.xl ?? direction.lg ?? direction.md ?? direction.sm ?? direction.base ?? "column" : direction,
+      children: content
+    }
+  );
+});
 const Stack = Object.assign(StackRoot, {
   Root: StackRoot
 });

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

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const root = "_root_1g54z_1";
+const track = "_track_1g54z_127";
+const trackSm = "_trackSm_1g54z_158";
+const trackLg = "_trackLg_1g54z_169";
+const trackMd = "_trackMd_1g54z_180";
+const thumb = "_thumb_1g54z_191";
+const content = "_content_1g54z_218";
+const label = "_label_1g54z_222";
+const helper = "_helper_1g54z_227";
+const styles = {
+  root,
+  track,
+  trackSm,
+  trackLg,
+  trackMd,
+  thumb,
+  content,
+  label,
+  helper
+};
+exports.content = content;
+exports.default = styles;
+exports.helper = helper;
+exports.label = label;
+exports.root = root;
+exports.thumb = thumb;
+exports.track = track;
+exports.trackLg = trackLg;
+exports.trackMd = trackMd;
+exports.trackSm = trackSm;

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

@@ -0,0 +1,32 @@
+const root = "_root_1g54z_1";
+const track = "_track_1g54z_127";
+const trackSm = "_trackSm_1g54z_158";
+const trackLg = "_trackLg_1g54z_169";
+const trackMd = "_trackMd_1g54z_180";
+const thumb = "_thumb_1g54z_191";
+const content = "_content_1g54z_218";
+const label = "_label_1g54z_222";
+const helper = "_helper_1g54z_227";
+const styles = {
+  root,
+  track,
+  trackSm,
+  trackLg,
+  trackMd,
+  thumb,
+  content,
+  label,
+  helper
+};
+export {
+  content,
+  styles as default,
+  helper,
+  label,
+  root,
+  thumb,
+  track,
+  trackLg,
+  trackMd,
+  trackSm
+};

package/dist/components/{Toggle → Switch}/index.cjs

@@ -6,7 +6,7 @@ const React = require("react");
 const _switch = require("@base-ui/react/switch");
 const index = require("../ComponentDefaults/index.cjs");
 const aria = require("../../utils/aria.cjs");
-const Toggle_module = require("./Toggle.module.scss.cjs");
+const Switch_module = require("./Switch.module.scss.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -53,17 +53,11 @@ const SwitchRoot = React__namespace.forwardRef(function Switch2({
   const resolvedId = id ?? `switch-${generatedId}`;
   const helperId = resolvedHelperText ? `${resolvedId}-helper` : void 0;
   const trackClasses = [
-    Toggle_module.default.track,
-    size === "sm" ? Toggle_module.default.trackSm : size === "lg" ? Toggle_module.default.trackLg : Toggle_module.default.trackMd
+    Switch_module.default.track,
+    size === "sm" ? Switch_module.default.trackSm : size === "lg" ? Switch_module.default.trackLg : Switch_module.default.trackMd
   ].join(" ");
-  const thumbClasses = Toggle_module.default.thumb;
-  const labelClasses = [
-    Toggle_module.default.label,
-    size === "sm" && Toggle_module.default.labelSm,
-    size === "lg" && Toggle_module.default.labelLg
-  ].filter(Boolean).join(" ");
-  const helperClasses = [Toggle_module.default.helper, size === "sm" && Toggle_module.default.helperSm].filter(Boolean).join(" ");
-  const rootClasses = [Toggle_module.default.root, resolvedHelperText && Toggle_module.default.rootWithHelper, className].filter(Boolean).join(" ");
+  const thumbClasses = Switch_module.default.thumb;
+  const rootClasses = [Switch_module.default.root, className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxRuntime.jsxs(
     _switch.Switch.Root,
     {
@@ -81,14 +75,15 @@ const SwitchRoot = React__namespace.forwardRef(function Switch2({
       uncheckedValue,
       inputRef,
       className: rootClasses,
+      "data-size": size,
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledBy,
       "aria-describedby": aria.mergeAriaIds(ariaDescribedBy, helperId),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: trackClasses, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(_switch.Switch.Thumb, { className: thumbClasses }) }),
-        (label || resolvedHelperText) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Toggle_module.default.content, children: [
-          label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: labelClasses, children: label }),
-          resolvedHelperText && /* @__PURE__ */ jsxRuntime.jsx("span", { id: helperId, className: helperClasses, children: resolvedHelperText })
+        (label || resolvedHelperText) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Switch_module.default.content, children: [
+          label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: Switch_module.default.label, children: label }),
+          resolvedHelperText && /* @__PURE__ */ jsxRuntime.jsx("span", { id: helperId, className: Switch_module.default.helper, children: resolvedHelperText })
         ] })
       ]
     }

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

@@ -1,2 +1,38 @@
-export { Switch, type SwitchProps, Toggle, type ToggleProps } from '../Toggle';
+import * as React from "react";
+/**
+ * Binary on/off switch for settings and preferences.
+ * @see https://usefragments.com/components/switch
+ */
+export interface SwitchProps {
+    /** Whether the switch is on */
+    checked?: boolean;
+    /** Default checked state (uncontrolled) */
+    defaultChecked?: boolean;
+    /** Called when the switch is toggled */
+    onCheckedChange?: (checked: boolean) => void;
+    /** Alias for onCheckedChange */
+    onChange?: (checked: boolean) => void;
+    label?: string;
+    /** Helper text shown below the label */
+    helperText?: string;
+    /** @deprecated Use helperText instead. */
+    description?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    size?: "sm" | "md" | "lg";
+    className?: string;
+    name?: string;
+    form?: string;
+    value?: string;
+    uncheckedValue?: string;
+    inputRef?: React.Ref<HTMLInputElement>;
+    id?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+}
+export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>> & {
+    Root: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
+};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B;;;GAGG;AACH,MAAM,WAAW,WAAW;IAC1B,+BAA+B;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2CAA2C;IAC3C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,wCAAwC;IACxC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0CAA0C;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IACvC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAiFD,eAAO,MAAM,MAAM;;CAEjB,CAAC"}

package/dist/components/{Toggle → Switch}/index.js

@@ -4,7 +4,7 @@ import * as React from "react";
 import { Switch as Switch$1 } from "@base-ui/react/switch";
 import { useResolvedControlSize } from "../ComponentDefaults/index.js";
 import { mergeAriaIds } from "../../utils/aria.js";
-import styles from "./Toggle.module.scss.js";
+import styles from "./Switch.module.scss.js";
 const SwitchRoot = React.forwardRef(function Switch2({
   checked,
   defaultChecked,
@@ -38,13 +38,7 @@ const SwitchRoot = React.forwardRef(function Switch2({
     size === "sm" ? styles.trackSm : size === "lg" ? styles.trackLg : styles.trackMd
   ].join(" ");
   const thumbClasses = styles.thumb;
-  const labelClasses = [
-    styles.label,
-    size === "sm" && styles.labelSm,
-    size === "lg" && styles.labelLg
-  ].filter(Boolean).join(" ");
-  const helperClasses = [styles.helper, size === "sm" && styles.helperSm].filter(Boolean).join(" ");
-  const rootClasses = [styles.root, resolvedHelperText && styles.rootWithHelper, className].filter(Boolean).join(" ");
+  const rootClasses = [styles.root, className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs(
     Switch$1.Root,
     {
@@ -62,14 +56,15 @@ const SwitchRoot = React.forwardRef(function Switch2({
       uncheckedValue,
       inputRef,
       className: rootClasses,
+      "data-size": size,
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledBy,
       "aria-describedby": mergeAriaIds(ariaDescribedBy, helperId),
       children: [
         /* @__PURE__ */ jsx("span", { className: trackClasses, "aria-hidden": "true", children: /* @__PURE__ */ jsx(Switch$1.Thumb, { className: thumbClasses }) }),
         (label || resolvedHelperText) && /* @__PURE__ */ jsxs("div", { className: styles.content, children: [
-          label && /* @__PURE__ */ jsx("span", { className: labelClasses, children: label }),
-          resolvedHelperText && /* @__PURE__ */ jsx("span", { id: helperId, className: helperClasses, children: resolvedHelperText })
+          label && /* @__PURE__ */ jsx("span", { className: styles.label, children: label }),
+          resolvedHelperText && /* @__PURE__ */ jsx("span", { id: helperId, className: styles.helper, children: resolvedHelperText })
         ] })
       ]
     }

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

@@ -1,53 +1,44 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const wrapper = "_wrapper_1talf_1";
-const table = "_table_1talf_6";
-const caption = "_caption_1talf_14";
-const captionHidden = "_captionHidden_1talf_23";
-const sm = "_sm_1talf_35";
-const th = "_th_1talf_35";
-const td = "_td_1talf_36";
-const md = "_md_1talf_41";
-const compact = "_compact_1talf_47";
-const tabular = "_tabular_1talf_62";
-const thead = "_thead_1talf_66";
-const headerContent = "_headerContent_1talf_89";
-const tbody = "_tbody_1talf_95";
-const row = "_row_1talf_100";
-const selected = "_selected_1talf_117";
-const tfoot = "_tfoot_1talf_137";
-const striped = "_striped_1talf_145";
-const bordered = "_bordered_1talf_153";
+const wrapper = "_wrapper_qfern_1";
+const table = "_table_qfern_8";
+const caption = "_caption_qfern_63";
+const captionHidden = "_captionHidden_qfern_76";
+const tabular = "_tabular_qfern_88";
+const thead = "_thead_qfern_92";
+const th = "_th_qfern_92";
+const headerContent = "_headerContent_qfern_116";
+const row = "_row_qfern_122";
+const td = "_td_qfern_140";
+const bordered = "_bordered_qfern_147";
+const tbody = "_tbody_qfern_148";
+const tfoot = "_tfoot_qfern_149";
+const selected = "_selected_qfern_153";
+const striped = "_striped_qfern_170";
 const styles = {
   wrapper,
   table,
   caption,
   captionHidden,
-  sm,
-  th,
-  td,
-  md,
-  compact,
   tabular,
   thead,
+  th,
   headerContent,
-  tbody,
   row,
-  selected,
+  td,
+  bordered,
+  tbody,
   tfoot,
-  striped,
-  bordered
+  selected,
+  striped
 };
 exports.bordered = bordered;
 exports.caption = caption;
 exports.captionHidden = captionHidden;
-exports.compact = compact;
 exports.default = styles;
 exports.headerContent = headerContent;
-exports.md = md;
 exports.row = row;
 exports.selected = selected;
-exports.sm = sm;
 exports.striped = striped;
 exports.table = table;
 exports.tabular = tabular;

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

@@ -1,52 +1,43 @@
-const wrapper = "_wrapper_1talf_1";
-const table = "_table_1talf_6";
-const caption = "_caption_1talf_14";
-const captionHidden = "_captionHidden_1talf_23";
-const sm = "_sm_1talf_35";
-const th = "_th_1talf_35";
-const td = "_td_1talf_36";
-const md = "_md_1talf_41";
-const compact = "_compact_1talf_47";
-const tabular = "_tabular_1talf_62";
-const thead = "_thead_1talf_66";
-const headerContent = "_headerContent_1talf_89";
-const tbody = "_tbody_1talf_95";
-const row = "_row_1talf_100";
-const selected = "_selected_1talf_117";
-const tfoot = "_tfoot_1talf_137";
-const striped = "_striped_1talf_145";
-const bordered = "_bordered_1talf_153";
+const wrapper = "_wrapper_qfern_1";
+const table = "_table_qfern_8";
+const caption = "_caption_qfern_63";
+const captionHidden = "_captionHidden_qfern_76";
+const tabular = "_tabular_qfern_88";
+const thead = "_thead_qfern_92";
+const th = "_th_qfern_92";
+const headerContent = "_headerContent_qfern_116";
+const row = "_row_qfern_122";
+const td = "_td_qfern_140";
+const bordered = "_bordered_qfern_147";
+const tbody = "_tbody_qfern_148";
+const tfoot = "_tfoot_qfern_149";
+const selected = "_selected_qfern_153";
+const striped = "_striped_qfern_170";
 const styles = {
   wrapper,
   table,
   caption,
   captionHidden,
-  sm,
-  th,
-  td,
-  md,
-  compact,
   tabular,
   thead,
+  th,
   headerContent,
-  tbody,
   row,
-  selected,
+  td,
+  bordered,
+  tbody,
   tfoot,
-  striped,
-  bordered
+  selected,
+  striped
 };
 export {
   bordered,
   caption,
   captionHidden,
-  compact,
   styles as default,
   headerContent,
-  md,
   row,
   selected,
-  sm,
   striped,
   table,
   tabular,

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

@@ -1,9 +1,10 @@
 import * as React from "react";
+import { type LegacyTableSize, type TableDensity } from "../../recipes/table-chrome";
 export interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
-    /** Size variant. `compact` gives dense 36px-row dashboard lists with 12px
-     * text and hairline dividers — use when the table is a status surface,
-     * not a reading experience. */
-    size?: "sm" | "md" | "compact";
+    /** Canonical row density. */
+    density?: TableDensity;
+    /** @deprecated Use density. Retained until the next major-version review. */
+    size?: LegacyTableSize;
     /** Show alternating row backgrounds */
     striped?: boolean;
     /** Wrap table in a bordered container */
@@ -46,7 +47,7 @@ declare function TableFooter({ className, children, ...props }: React.HTMLAttrib
 declare function TableCell({ className, tabularNums, children, ...props }: TableCellProps): import("react/jsx-runtime").JSX.Element;
 declare function TableHeaderCell({ className, scope, children, ...props }: TableHeaderCellProps): import("react/jsx-runtime").JSX.Element;
 declare function TableCaption({ className, visuallyHidden, hidden, children, ...props }: TableCaptionProps): import("react/jsx-runtime").JSX.Element;
-declare function TableRoot({ size, striped, bordered, wrapperClassName, wrapperProps, className, children, ...htmlProps }: TableProps): import("react/jsx-runtime").JSX.Element;
+declare function TableRoot({ size, density, striped, bordered, wrapperClassName, wrapperProps, className, children, ...htmlProps }: TableProps): import("react/jsx-runtime").JSX.Element;
 export declare const Table: typeof TableRoot & {
     Root: typeof TableRoot;
     Head: typeof TableHead;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Table/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IACxE;;mCAE+B;IAC/B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,SAAS,CAAC;IAC/B,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iDAAiD;IACjD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iDAAiD;IACjD,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;IACpD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,mBAAmB,CAAC;IAC9E,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;0EACsE;IACtE,IAAI,CAAC,EAAE,SAAS,GAAG,KAAK,CAAC;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,gBAAgB,CAAC,oBAAoB,CAAC;IAClF;yEACqE;IACrE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,gBAAgB,CAAC,0BAA0B,CAAC;IAC9F,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,KAAK,CAAC,cAAc,CAAC,uBAAuB,CAAC,EAC7C,QAAQ,CACT;IACC,sDAAsD;IACtD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,qCAAqC;IACrC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAMD,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,uBAAuB,CAAC,2CAM/C;AAED,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,uBAAuB,CAAC,2CAM/C;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,uBAAuB,CAAC,2CAM/C;AAmBD,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,2CAShF;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,KAAa,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,2CAM9F;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,cAAc,EACd,MAAM,EACN,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,iBAAiB,2CAYnB;AAMD,iBAAS,SAAS,CAAC,EACjB,IAAW,EACX,OAAe,EACf,QAAgB,EAChB,gBAAgB,EAChB,YAAY,EACZ,SAAS,EACT,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,UAAU,2CAsBZ;AAMD,eAAO,MAAM,KAAK;;;;;;;;;CAShB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Table/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAEL,KAAK,eAAe,EACpB,KAAK,YAAY,EAClB,MAAM,4BAA4B,CAAC;AAOpC,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IACxE,6BAA6B;IAC7B,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,6EAA6E;IAC7E,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iDAAiD;IACjD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iDAAiD;IACjD,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;IACpD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,mBAAmB,CAAC;IAC9E,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;0EACsE;IACtE,IAAI,CAAC,EAAE,SAAS,GAAG,KAAK,CAAC;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,gBAAgB,CAAC,oBAAoB,CAAC;IAClF;yEACqE;IACrE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,gBAAgB,CAAC,0BAA0B,CAAC;IAC9F,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,KAAK,CAAC,cAAc,CAAC,uBAAuB,CAAC,EAC7C,QAAQ,CACT;IACC,sDAAsD;IACtD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,qCAAqC;IACrC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAMD,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,uBAAuB,CAAC,2CAM/C;AAED,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,uBAAuB,CAAC,2CAM/C;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,uBAAuB,CAAC,2CAM/C;AAmBD,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,2CAShF;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,KAAa,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,2CAM9F;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,cAAc,EACd,MAAM,EACN,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,iBAAiB,2CAYnB;AAMD,iBAAS,SAAS,CAAC,EACjB,IAAW,EACX,OAAO,EACP,OAAe,EACf,QAAgB,EAChB,gBAAgB,EAChB,YAAY,EACZ,SAAS,EACT,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,UAAU,2CAuBZ;AAMD,eAAO,MAAM,KAAK;;;;;;;;;CAShB,CAAC"}