@ttoss/fsl-ui 0.2.4 → 0.2.6

package/dist/components/Box/Box.cjs

@@ -0,0 +1,114 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+let _ttoss_fsl_theme_vars = require("@ttoss/fsl-theme/vars");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/Box/Box.tsx
+/** Formal semantic identity — Box root (Structure entity, generic container). */
+var boxMeta = {
+  displayName: "Box",
+  entity: "Structure",
+  structure: "root"
+};
+var PADDING = {
+  none: "0",
+  sm: _ttoss_fsl_theme_vars.vars.spacing.inset.surface.sm,
+  md: _ttoss_fsl_theme_vars.vars.spacing.inset.surface.md,
+  lg: _ttoss_fsl_theme_vars.vars.spacing.inset.surface.lg
+};
+var BACKGROUND = {
+  none: "transparent",
+  primary: _ttoss_fsl_theme_vars.vars.colors.informational.primary.background?.default,
+  muted: _ttoss_fsl_theme_vars.vars.colors.informational.muted.background?.default
+};
+var RADIUS = {
+  none: "0",
+  control: _ttoss_fsl_theme_vars.vars.radii.control,
+  surface: _ttoss_fsl_theme_vars.vars.radii.surface,
+  round: _ttoss_fsl_theme_vars.vars.radii.round
+};
+var BORDER_COLOR = {
+  muted: _ttoss_fsl_theme_vars.vars.colors.informational.muted.border?.default,
+  strong: _ttoss_fsl_theme_vars.vars.colors.informational.primary.border?.default
+};
+var WIDTH = {
+  auto: "auto",
+  full: "100%",
+  fit: "fit-content"
+};
+var MAX_WIDTH = {
+  none: void 0,
+  surface: _ttoss_fsl_theme_vars.vars.sizing.surface.maxWidth,
+  reading: _ttoss_fsl_theme_vars.vars.sizing.measure.reading
+};
+/** Border longhands for the chosen emphasis; all-`undefined` when `none`. */
+var borderStyleFor = border => {
+  if (border === "none") return {};
+  return {
+    borderWidth: _ttoss_fsl_theme_vars.vars.border.outline.surface.width,
+    borderStyle: _ttoss_fsl_theme_vars.vars.border.outline.surface.style,
+    borderColor: BORDER_COLOR[border]
+  };
+};
+/** Flex-item growth: fill the main axis and allow shrinking past content. */
+var growStyle = grow => {
+  return grow ? {
+    flexGrow: 1,
+    minWidth: 0
+  } : {};
+};
+/**
+* The token-constrained escape hatch — a generic block container (D1 / ADR-009).
+*
+* Entity = Structure. Reach for Box when you need a one-off padded, sized, or
+* lightly-grouped region that is not a flex/grid layout (`Stack`/`Grid`) and
+* not a depth-bearing card (`Surface`). Every prop accepts only a **token key**
+* — `padding="md"`, `background="muted"`, `radius="surface"`, `maxWidth="reading"`
+* — so a layout can be composed expressively while no arbitrary hex/px value can
+* enter the consumer. There is no `style` or `className`.
+*
+* @example
+* ```tsx
+* // A centered, width-constrained reading column
+* <Stack align="center">
+*   <Box maxWidth="reading" padding="lg">
+*     <Text>Long-form content…</Text>
+*   </Box>
+* </Stack>
+* ```
+*/
+var Box = ({
+  padding = "none",
+  paddingBlock,
+  paddingInline,
+  background = "none",
+  radius = "none",
+  border = "none",
+  width = "auto",
+  maxWidth = "none",
+  grow = false,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)("div", {
+    ...props,
+    "data-scope": "box",
+    "data-part": "root",
+    style: {
+      boxSizing: "border-box",
+      paddingBlock: PADDING[paddingBlock ?? padding],
+      paddingInline: PADDING[paddingInline ?? padding],
+      background: BACKGROUND[background],
+      borderRadius: RADIUS[radius],
+      ...borderStyleFor(border),
+      width: WIDTH[width],
+      maxWidth: MAX_WIDTH[maxWidth],
+      ...growStyle(grow)
+    },
+    children
+  });
+};
+Box.displayName = boxMeta.displayName;
+
+//#endregion
+exports.Box = Box;
+exports.boxMeta = boxMeta;

package/dist/components/Box/Box.d.cts

@@ -0,0 +1,115 @@
+
+import * as React from "react";
+
+//#region src/components/Box/Box.d.ts
+/** Formal semantic identity — Box root (Structure entity, generic container). */
+declare const boxMeta: {
+  readonly displayName: "Box";
+  readonly entity: "Structure";
+  readonly structure: "root";
+};
+/** Padding step drawn from the surface inset scale (`none` collapses to zero). */
+type BoxPadding = 'none' | 'sm' | 'md' | 'lg';
+/** Background from the informational surface palette (`none` is transparent). */
+type BoxBackground = 'none' | 'primary' | 'muted';
+/** Corner radius from the semantic radii scale. */
+type BoxRadius = 'none' | 'control' | 'surface' | 'round';
+/** Hairline boundary emphasis (`none` draws no edge). */
+type BoxBorder = 'none' | 'muted' | 'strong';
+/** Inline size (`width`) from the sizing behavior keywords. */
+type BoxWidth = 'auto' | 'full' | 'fit';
+/** Maximum inline size — a structural surface cap or the readability measure. */
+type BoxMaxWidth = 'none' | 'surface' | 'reading';
+/** Props for the Box component. */
+interface BoxProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style' | 'className'> {
+  /**
+   * Padding on both axes, from the surface inset scale. Overridden per-axis by
+   * `paddingBlock` / `paddingInline` when those are set.
+   * @default 'none'
+   */
+  padding?: BoxPadding;
+  /** Block-axis (top/bottom) padding from the surface inset scale. */
+  paddingBlock?: BoxPadding;
+  /** Inline-axis (start/end) padding from the surface inset scale. */
+  paddingInline?: BoxPadding;
+  /**
+   * Background from the informational surface palette. `none` is transparent —
+   * Box adds no surface colour unless asked (that is `Surface`'s job).
+   * @default 'none'
+   */
+  background?: BoxBackground;
+  /**
+   * Corner radius from the semantic radii scale.
+   * @default 'none'
+   */
+  radius?: BoxRadius;
+  /**
+   * Hairline boundary emphasis, drawn with the surface outline width/style.
+   * `muted` is the quiet informational edge; `strong` a firmer one; `none`
+   * draws no border.
+   * @default 'none'
+   */
+  border?: BoxBorder;
+  /**
+   * Inline size (`width`) from the sizing behavior keywords.
+   * @default 'auto'
+   */
+  width?: BoxWidth;
+  /**
+   * Maximum inline size. `surface` caps at the structural surface width;
+   * `reading` caps at the readability measure (long-form text). Pair with
+   * `marginInline` centering via a parent `Stack`/`Grid` — Box does not center
+   * itself.
+   * @default 'none'
+   */
+  maxWidth?: BoxMaxWidth;
+  /**
+   * Let the Box grow to fill the free space along a flex parent's main axis
+   * (`flex-grow: 1`, with `min-width: 0` so it can also shrink past its
+   * content). Use it inside a horizontal `Stack` to make one child — a field,
+   * an input — take the remaining width. A structural flex behaviour, not a
+   * length.
+   * @default false
+   */
+  grow?: boolean;
+  /** The Box's content. */
+  children?: React.ReactNode;
+}
+/**
+ * The token-constrained escape hatch — a generic block container (D1 / ADR-009).
+ *
+ * Entity = Structure. Reach for Box when you need a one-off padded, sized, or
+ * lightly-grouped region that is not a flex/grid layout (`Stack`/`Grid`) and
+ * not a depth-bearing card (`Surface`). Every prop accepts only a **token key**
+ * — `padding="md"`, `background="muted"`, `radius="surface"`, `maxWidth="reading"`
+ * — so a layout can be composed expressively while no arbitrary hex/px value can
+ * enter the consumer. There is no `style` or `className`.
+ *
+ * @example
+ * ```tsx
+ * // A centered, width-constrained reading column
+ * <Stack align="center">
+ *   <Box maxWidth="reading" padding="lg">
+ *     <Text>Long-form content…</Text>
+ *   </Box>
+ * </Stack>
+ * ```
+ */
+declare const Box: {
+  ({
+    padding,
+    paddingBlock,
+    paddingInline,
+    background,
+    radius,
+    border,
+    width,
+    maxWidth,
+    grow,
+    children,
+    ...props
+  }: BoxProps): import("react/jsx-runtime").JSX.Element;
+  displayName: "Box";
+};
+//#endregion
+export { Box, BoxBackground, BoxBorder, BoxMaxWidth, BoxPadding, BoxProps, BoxRadius, BoxWidth, boxMeta };

package/dist/components/Box/Box.d.mts

@@ -0,0 +1,115 @@
+
+import * as React from "react";
+
+//#region src/components/Box/Box.d.ts
+/** Formal semantic identity — Box root (Structure entity, generic container). */
+declare const boxMeta: {
+  readonly displayName: "Box";
+  readonly entity: "Structure";
+  readonly structure: "root";
+};
+/** Padding step drawn from the surface inset scale (`none` collapses to zero). */
+type BoxPadding = 'none' | 'sm' | 'md' | 'lg';
+/** Background from the informational surface palette (`none` is transparent). */
+type BoxBackground = 'none' | 'primary' | 'muted';
+/** Corner radius from the semantic radii scale. */
+type BoxRadius = 'none' | 'control' | 'surface' | 'round';
+/** Hairline boundary emphasis (`none` draws no edge). */
+type BoxBorder = 'none' | 'muted' | 'strong';
+/** Inline size (`width`) from the sizing behavior keywords. */
+type BoxWidth = 'auto' | 'full' | 'fit';
+/** Maximum inline size — a structural surface cap or the readability measure. */
+type BoxMaxWidth = 'none' | 'surface' | 'reading';
+/** Props for the Box component. */
+interface BoxProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style' | 'className'> {
+  /**
+   * Padding on both axes, from the surface inset scale. Overridden per-axis by
+   * `paddingBlock` / `paddingInline` when those are set.
+   * @default 'none'
+   */
+  padding?: BoxPadding;
+  /** Block-axis (top/bottom) padding from the surface inset scale. */
+  paddingBlock?: BoxPadding;
+  /** Inline-axis (start/end) padding from the surface inset scale. */
+  paddingInline?: BoxPadding;
+  /**
+   * Background from the informational surface palette. `none` is transparent —
+   * Box adds no surface colour unless asked (that is `Surface`'s job).
+   * @default 'none'
+   */
+  background?: BoxBackground;
+  /**
+   * Corner radius from the semantic radii scale.
+   * @default 'none'
+   */
+  radius?: BoxRadius;
+  /**
+   * Hairline boundary emphasis, drawn with the surface outline width/style.
+   * `muted` is the quiet informational edge; `strong` a firmer one; `none`
+   * draws no border.
+   * @default 'none'
+   */
+  border?: BoxBorder;
+  /**
+   * Inline size (`width`) from the sizing behavior keywords.
+   * @default 'auto'
+   */
+  width?: BoxWidth;
+  /**
+   * Maximum inline size. `surface` caps at the structural surface width;
+   * `reading` caps at the readability measure (long-form text). Pair with
+   * `marginInline` centering via a parent `Stack`/`Grid` — Box does not center
+   * itself.
+   * @default 'none'
+   */
+  maxWidth?: BoxMaxWidth;
+  /**
+   * Let the Box grow to fill the free space along a flex parent's main axis
+   * (`flex-grow: 1`, with `min-width: 0` so it can also shrink past its
+   * content). Use it inside a horizontal `Stack` to make one child — a field,
+   * an input — take the remaining width. A structural flex behaviour, not a
+   * length.
+   * @default false
+   */
+  grow?: boolean;
+  /** The Box's content. */
+  children?: React.ReactNode;
+}
+/**
+ * The token-constrained escape hatch — a generic block container (D1 / ADR-009).
+ *
+ * Entity = Structure. Reach for Box when you need a one-off padded, sized, or
+ * lightly-grouped region that is not a flex/grid layout (`Stack`/`Grid`) and
+ * not a depth-bearing card (`Surface`). Every prop accepts only a **token key**
+ * — `padding="md"`, `background="muted"`, `radius="surface"`, `maxWidth="reading"`
+ * — so a layout can be composed expressively while no arbitrary hex/px value can
+ * enter the consumer. There is no `style` or `className`.
+ *
+ * @example
+ * ```tsx
+ * // A centered, width-constrained reading column
+ * <Stack align="center">
+ *   <Box maxWidth="reading" padding="lg">
+ *     <Text>Long-form content…</Text>
+ *   </Box>
+ * </Stack>
+ * ```
+ */
+declare const Box: {
+  ({
+    padding,
+    paddingBlock,
+    paddingInline,
+    background,
+    radius,
+    border,
+    width,
+    maxWidth,
+    grow,
+    children,
+    ...props
+  }: BoxProps): import("react/jsx-runtime").JSX.Element;
+  displayName: "Box";
+};
+//#endregion
+export { Box, BoxBackground, BoxBorder, BoxMaxWidth, BoxPadding, BoxProps, BoxRadius, BoxWidth, boxMeta };

package/dist/components/Box/Box.mjs

@@ -0,0 +1,113 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { vars } from "@ttoss/fsl-theme/vars";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Box/Box.tsx
+/** Formal semantic identity — Box root (Structure entity, generic container). */
+var boxMeta = {
+  displayName: "Box",
+  entity: "Structure",
+  structure: "root"
+};
+var PADDING = {
+  none: "0",
+  sm: vars.spacing.inset.surface.sm,
+  md: vars.spacing.inset.surface.md,
+  lg: vars.spacing.inset.surface.lg
+};
+var BACKGROUND = {
+  none: "transparent",
+  primary: vars.colors.informational.primary.background?.default,
+  muted: vars.colors.informational.muted.background?.default
+};
+var RADIUS = {
+  none: "0",
+  control: vars.radii.control,
+  surface: vars.radii.surface,
+  round: vars.radii.round
+};
+var BORDER_COLOR = {
+  muted: vars.colors.informational.muted.border?.default,
+  strong: vars.colors.informational.primary.border?.default
+};
+var WIDTH = {
+  auto: "auto",
+  full: "100%",
+  fit: "fit-content"
+};
+var MAX_WIDTH = {
+  none: void 0,
+  surface: vars.sizing.surface.maxWidth,
+  reading: vars.sizing.measure.reading
+};
+/** Border longhands for the chosen emphasis; all-`undefined` when `none`. */
+var borderStyleFor = border => {
+  if (border === "none") return {};
+  return {
+    borderWidth: vars.border.outline.surface.width,
+    borderStyle: vars.border.outline.surface.style,
+    borderColor: BORDER_COLOR[border]
+  };
+};
+/** Flex-item growth: fill the main axis and allow shrinking past content. */
+var growStyle = grow => {
+  return grow ? {
+    flexGrow: 1,
+    minWidth: 0
+  } : {};
+};
+/**
+* The token-constrained escape hatch — a generic block container (D1 / ADR-009).
+*
+* Entity = Structure. Reach for Box when you need a one-off padded, sized, or
+* lightly-grouped region that is not a flex/grid layout (`Stack`/`Grid`) and
+* not a depth-bearing card (`Surface`). Every prop accepts only a **token key**
+* — `padding="md"`, `background="muted"`, `radius="surface"`, `maxWidth="reading"`
+* — so a layout can be composed expressively while no arbitrary hex/px value can
+* enter the consumer. There is no `style` or `className`.
+*
+* @example
+* ```tsx
+* // A centered, width-constrained reading column
+* <Stack align="center">
+*   <Box maxWidth="reading" padding="lg">
+*     <Text>Long-form content…</Text>
+*   </Box>
+* </Stack>
+* ```
+*/
+var Box = ({
+  padding = "none",
+  paddingBlock,
+  paddingInline,
+  background = "none",
+  radius = "none",
+  border = "none",
+  width = "auto",
+  maxWidth = "none",
+  grow = false,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */jsx("div", {
+    ...props,
+    "data-scope": "box",
+    "data-part": "root",
+    style: {
+      boxSizing: "border-box",
+      paddingBlock: PADDING[paddingBlock ?? padding],
+      paddingInline: PADDING[paddingInline ?? padding],
+      background: BACKGROUND[background],
+      borderRadius: RADIUS[radius],
+      ...borderStyleFor(border),
+      width: WIDTH[width],
+      maxWidth: MAX_WIDTH[maxWidth],
+      ...growStyle(grow)
+    },
+    children
+  });
+};
+Box.displayName = boxMeta.displayName;
+
+//#endregion
+export { Box, boxMeta };

package/dist/components/Breadcrumbs/Breadcrumbs.cjs

@@ -2,8 +2,8 @@
 const require_focusRing = require('../../tokens/focusRing.cjs');
 const require_resolveInteractiveStyle = require('../../tokens/resolveInteractiveStyle.cjs');
 let _ttoss_fsl_theme_vars = require("@ttoss/fsl-theme/vars");
-let react_aria_components = require("react-aria-components");
 let react_jsx_runtime = require("react/jsx-runtime");
+let react_aria_components = require("react-aria-components");
 
 //#region src/components/Breadcrumbs/Breadcrumbs.tsx
 /** Formal semantic identity — Breadcrumbs root (Navigation entity, trail). */

package/dist/components/Breadcrumbs/Breadcrumbs.mjs

@@ -2,8 +2,8 @@
 import { focusRingOutline } from "../../tokens/focusRing.mjs";
 import { resolveInteractiveStyle } from "../../tokens/resolveInteractiveStyle.mjs";
 import { vars } from "@ttoss/fsl-theme/vars";
-import { Breadcrumb, Breadcrumbs, Link } from "react-aria-components";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Breadcrumb, Breadcrumbs, Link } from "react-aria-components";
 
 //#region src/components/Breadcrumbs/Breadcrumbs.tsx
 /** Formal semantic identity — Breadcrumbs root (Navigation entity, trail). */

package/dist/components/Button/Button.cjs

@@ -2,8 +2,8 @@
 const require_focusRing = require('../../tokens/focusRing.cjs');
 const require_resolveInteractiveStyle = require('../../tokens/resolveInteractiveStyle.cjs');
 let _ttoss_fsl_theme_vars = require("@ttoss/fsl-theme/vars");
-let react_aria_components = require("react-aria-components");
 let react_jsx_runtime = require("react/jsx-runtime");
+let react_aria_components = require("react-aria-components");
 
 //#region src/components/Button/Button.tsx
 /**
@@ -47,7 +47,7 @@ var Button = ({
         borderRadius: _ttoss_fsl_theme_vars.vars.radii.control,
         borderWidth: _ttoss_fsl_theme_vars.vars.border.outline.control.width,
         borderStyle: _ttoss_fsl_theme_vars.vars.border.outline.control.style,
-        minHeight: _ttoss_fsl_theme_vars.vars.sizing.hit.base,
+        minHeight: _ttoss_fsl_theme_vars.vars.sizing.hit,
         paddingBlock: _ttoss_fsl_theme_vars.vars.spacing.inset.control.sm,
         paddingInline: _ttoss_fsl_theme_vars.vars.spacing.inset.control.lg,
         ..._ttoss_fsl_theme_vars.vars.text.label.md,

package/dist/components/Button/Button.d.cts

@@ -15,7 +15,8 @@ declare const buttonMeta: {
  * Displays a semantic action trigger (entity: Action).
  *
  * Entity = Action → colors: `action`, radii: `control`, border: `outline.control`,
- * sizing: `hit.base`, spacing: `inset.control.md`, typography: `label.md`, motion: `feedback`.
+ * sizing: `hit` (ergonomic floor, drives height), spacing: `inset.control`
+ * (`sm` block / `lg` inline), typography: `label.md`, motion: `feedback`.
  */
 interface ButtonProps$1 extends Omit<ButtonProps, 'style'> {
   /**

package/dist/components/Button/Button.d.mts

@@ -15,7 +15,8 @@ declare const buttonMeta: {
  * Displays a semantic action trigger (entity: Action).
  *
  * Entity = Action → colors: `action`, radii: `control`, border: `outline.control`,
- * sizing: `hit.base`, spacing: `inset.control.md`, typography: `label.md`, motion: `feedback`.
+ * sizing: `hit` (ergonomic floor, drives height), spacing: `inset.control`
+ * (`sm` block / `lg` inline), typography: `label.md`, motion: `feedback`.
  */
 interface ButtonProps$1 extends Omit<ButtonProps, 'style'> {
   /**

package/dist/components/Button/Button.mjs

@@ -2,8 +2,8 @@
 import { focusRingOutline } from "../../tokens/focusRing.mjs";
 import { resolveInteractiveStyle } from "../../tokens/resolveInteractiveStyle.mjs";
 import { vars } from "@ttoss/fsl-theme/vars";
-import { Button } from "react-aria-components";
 import { jsx } from "react/jsx-runtime";
+import { Button } from "react-aria-components";
 
 //#region src/components/Button/Button.tsx
 /**
@@ -47,7 +47,7 @@ var Button$1 = ({
         borderRadius: vars.radii.control,
         borderWidth: vars.border.outline.control.width,
         borderStyle: vars.border.outline.control.style,
-        minHeight: vars.sizing.hit.base,
+        minHeight: vars.sizing.hit,
         paddingBlock: vars.spacing.inset.control.sm,
         paddingInline: vars.spacing.inset.control.lg,
         ...vars.text.label.md,

package/dist/components/Checkbox/Checkbox.cjs

@@ -3,8 +3,8 @@ const require_focusRing = require('../../tokens/focusRing.cjs');
 const require_resolveInteractiveStyle = require('../../tokens/resolveInteractiveStyle.cjs');
 const require_Icon = require('../Icon/Icon.cjs');
 let _ttoss_fsl_theme_vars = require("@ttoss/fsl-theme/vars");
-let react_aria_components = require("react-aria-components");
 let react_jsx_runtime = require("react/jsx-runtime");
+let react_aria_components = require("react-aria-components");
 
 //#region src/components/Checkbox/Checkbox.tsx
 /** Formal semantic identity — Checkbox root (Selection entity, toggle.binary). */
@@ -110,7 +110,7 @@ var Checkbox = ({
         display: "inline-flex",
         alignItems: "center",
         gap: _ttoss_fsl_theme_vars.vars.spacing.gap.inline.sm,
-        minHeight: _ttoss_fsl_theme_vars.vars.sizing.hit.base,
+        minHeight: _ttoss_fsl_theme_vars.vars.sizing.hit,
         cursor: isDisabled ? "not-allowed" : "pointer",
         opacity: isDisabled ? _ttoss_fsl_theme_vars.vars.opacity.disabled : void 0,
         ..._ttoss_fsl_theme_vars.vars.text.label.md,

package/dist/components/Checkbox/Checkbox.mjs

@@ -3,8 +3,8 @@ import { focusRingOutline } from "../../tokens/focusRing.mjs";
 import { resolveInteractiveStyle } from "../../tokens/resolveInteractiveStyle.mjs";
 import { Icon } from "../Icon/Icon.mjs";
 import { vars } from "@ttoss/fsl-theme/vars";
-import { Checkbox } from "react-aria-components";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Checkbox } from "react-aria-components";
 
 //#region src/components/Checkbox/Checkbox.tsx
 /** Formal semantic identity — Checkbox root (Selection entity, toggle.binary). */
@@ -110,7 +110,7 @@ var Checkbox$1 = ({
         display: "inline-flex",
         alignItems: "center",
         gap: vars.spacing.gap.inline.sm,
-        minHeight: vars.sizing.hit.base,
+        minHeight: vars.sizing.hit,
         cursor: isDisabled ? "not-allowed" : "pointer",
         opacity: isDisabled ? vars.opacity.disabled : void 0,
         ...vars.text.label.md,

package/dist/components/CheckboxGroup/CheckboxGroup.cjs

@@ -1,7 +1,7 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 let _ttoss_fsl_theme_vars = require("@ttoss/fsl-theme/vars");
-let react_aria_components = require("react-aria-components");
 let react_jsx_runtime = require("react/jsx-runtime");
+let react_aria_components = require("react-aria-components");
 
 //#region src/components/CheckboxGroup/CheckboxGroup.tsx
 /** Formal semantic identity — CheckboxGroup root (Selection entity, multi-choice). */

package/dist/components/CheckboxGroup/CheckboxGroup.mjs

@@ -1,7 +1,7 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 import { vars } from "@ttoss/fsl-theme/vars";
-import { CheckboxGroup, FieldError, Label, Text } from "react-aria-components";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckboxGroup, FieldError, Label, Text } from "react-aria-components";
 
 //#region src/components/CheckboxGroup/CheckboxGroup.tsx
 /** Formal semantic identity — CheckboxGroup root (Selection entity, multi-choice). */

package/dist/components/Code/Code.cjs

@@ -0,0 +1,69 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+let _ttoss_fsl_theme_vars = require("@ttoss/fsl-theme/vars");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/Code/Code.tsx
+/** Formal semantic identity — Code root (Structure entity, monospace text). */
+var codeMeta = {
+  displayName: "Code",
+  entity: "Structure",
+  structure: "root"
+};
+var TYPE_BY_SIZE = {
+  sm: _ttoss_fsl_theme_vars.vars.text.code.sm,
+  md: _ttoss_fsl_theme_vars.vars.text.code.md
+};
+/**
+* Source text in the monospace type role.
+*
+* Entity = Structure. Use inline `Code` for a token or keyword inside prose,
+* and `block` for a multi-line snippet — the block is a bordered, scrollable
+* surface. Type comes from the `code` scale; there is no raw font vocabulary.
+*
+* @example
+* ```tsx
+* <Code>npx skills add ttoss/skills --skill fsl</Code>
+* <Code block>{generatedThemeSource}</Code>
+* ```
+*/
+var Code = ({
+  block = false,
+  size = "sm",
+  children,
+  ...props
+}) => {
+  const type = TYPE_BY_SIZE[size];
+  if (!block) return /* @__PURE__ */(0, react_jsx_runtime.jsx)("code", {
+    ...props,
+    "data-scope": "code",
+    "data-part": "root",
+    style: type,
+    children
+  });
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)("pre", {
+    ...props,
+    "data-scope": "code",
+    "data-part": "root",
+    "data-block": "true",
+    style: {
+      margin: 0,
+      overflow: "auto",
+      padding: _ttoss_fsl_theme_vars.vars.spacing.inset.surface.sm,
+      borderRadius: _ttoss_fsl_theme_vars.vars.radii.surface,
+      borderWidth: _ttoss_fsl_theme_vars.vars.border.outline.surface.width,
+      borderStyle: _ttoss_fsl_theme_vars.vars.border.outline.surface.style,
+      borderColor: _ttoss_fsl_theme_vars.vars.colors.informational.muted.border?.default,
+      color: _ttoss_fsl_theme_vars.vars.colors.informational.primary.text?.default,
+      backgroundColor: _ttoss_fsl_theme_vars.vars.colors.informational.primary.background?.default,
+      ...type
+    },
+    children: /* @__PURE__ */(0, react_jsx_runtime.jsx)("code", {
+      children
+    })
+  });
+};
+Code.displayName = codeMeta.displayName;
+
+//#endregion
+exports.Code = Code;
+exports.codeMeta = codeMeta;