@ttoss/fsl-ui 0.2.4 → 0.2.6

package/dist/components/Code/Code.d.cts

@@ -0,0 +1,53 @@
+
+import * as React from "react";
+
+//#region src/components/Code/Code.d.ts
+/** Formal semantic identity — Code root (Structure entity, monospace text). */
+declare const codeMeta: {
+  readonly displayName: "Code";
+  readonly entity: "Structure";
+  readonly structure: "root";
+};
+/** Monospace type step. */
+type CodeSize = 'sm' | 'md';
+/** Props for the Code component. */
+interface CodeProps extends Omit<React.HTMLAttributes<HTMLElement>, 'style' | 'className'> {
+  /**
+   * Render as a scrollable `<pre>` block (`true`) or an inline `<code>` run
+   * (`false`). A block gets a bordered surface and its own scroll; inline sits
+   * within the surrounding text.
+   * @default false
+   */
+  block?: boolean;
+  /**
+   * Monospace type step.
+   * @default 'sm'
+   */
+  size?: CodeSize;
+  /** The code content. */
+  children?: React.ReactNode;
+}
+/**
+ * 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>
+ * ```
+ */
+declare const Code: {
+  ({
+    block,
+    size,
+    children,
+    ...props
+  }: CodeProps): import("react/jsx-runtime").JSX.Element;
+  displayName: "Code";
+};
+//#endregion
+export { Code, CodeProps, CodeSize, codeMeta };

package/dist/components/Code/Code.d.mts

@@ -0,0 +1,53 @@
+
+import * as React from "react";
+
+//#region src/components/Code/Code.d.ts
+/** Formal semantic identity — Code root (Structure entity, monospace text). */
+declare const codeMeta: {
+  readonly displayName: "Code";
+  readonly entity: "Structure";
+  readonly structure: "root";
+};
+/** Monospace type step. */
+type CodeSize = 'sm' | 'md';
+/** Props for the Code component. */
+interface CodeProps extends Omit<React.HTMLAttributes<HTMLElement>, 'style' | 'className'> {
+  /**
+   * Render as a scrollable `<pre>` block (`true`) or an inline `<code>` run
+   * (`false`). A block gets a bordered surface and its own scroll; inline sits
+   * within the surrounding text.
+   * @default false
+   */
+  block?: boolean;
+  /**
+   * Monospace type step.
+   * @default 'sm'
+   */
+  size?: CodeSize;
+  /** The code content. */
+  children?: React.ReactNode;
+}
+/**
+ * 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>
+ * ```
+ */
+declare const Code: {
+  ({
+    block,
+    size,
+    children,
+    ...props
+  }: CodeProps): import("react/jsx-runtime").JSX.Element;
+  displayName: "Code";
+};
+//#endregion
+export { Code, CodeProps, CodeSize, codeMeta };

package/dist/components/Code/Code.mjs

@@ -0,0 +1,68 @@
+/** 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/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: vars.text.code.sm,
+  md: 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__ */jsx("code", {
+    ...props,
+    "data-scope": "code",
+    "data-part": "root",
+    style: type,
+    children
+  });
+  return /* @__PURE__ */jsx("pre", {
+    ...props,
+    "data-scope": "code",
+    "data-part": "root",
+    "data-block": "true",
+    style: {
+      margin: 0,
+      overflow: "auto",
+      padding: vars.spacing.inset.surface.sm,
+      borderRadius: vars.radii.surface,
+      borderWidth: vars.border.outline.surface.width,
+      borderStyle: vars.border.outline.surface.style,
+      borderColor: vars.colors.informational.muted.border?.default,
+      color: vars.colors.informational.primary.text?.default,
+      backgroundColor: vars.colors.informational.primary.background?.default,
+      ...type
+    },
+    children: /* @__PURE__ */jsx("code", {
+      children
+    })
+  });
+};
+Code.displayName = codeMeta.displayName;
+
+//#endregion
+export { Code, codeMeta };

package/dist/components/Container/Container.cjs

@@ -0,0 +1,65 @@
+/** 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/Container/Container.tsx
+/** Formal semantic identity — Container root (Structure entity, page shell). */
+var containerMeta = {
+  displayName: "Container",
+  entity: "Structure",
+  structure: "root"
+};
+var MAX_WIDTH = {
+  surface: _ttoss_fsl_theme_vars.vars.sizing.surface.maxWidth,
+  reading: _ttoss_fsl_theme_vars.vars.sizing.measure.reading
+};
+var GUTTER = {
+  none: "0",
+  section: _ttoss_fsl_theme_vars.vars.spacing.gutter.section,
+  page: _ttoss_fsl_theme_vars.vars.spacing.gutter.page
+};
+/**
+* The page-shell primitive — a centered, width-capped, gutter-padded column.
+*
+* Entity = Structure. Wrap a page (or a major region) in a Container to give
+* it the product's standard content width and edge padding without hand-rolling
+* `max-width` + `margin: auto`. Pick `size="reading"` for long-form article
+* columns and `size="surface"` for app/page shells. Place `Stack`, `Grid`, and
+* `Surface` inside it.
+*
+* @example
+* ```tsx
+* <Container size="surface">
+*   <Stack gap="xl">
+*     <Heading level={1}>Dashboard</Heading>
+*     <Grid columns={3} gap="lg">…</Grid>
+*   </Stack>
+* </Container>
+* ```
+*/
+var Container = ({
+  size = "surface",
+  gutter = "page",
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)("div", {
+    ...props,
+    "data-scope": "container",
+    "data-part": "root",
+    "data-size": size,
+    style: {
+      boxSizing: "border-box",
+      marginInline: "auto",
+      width: "100%",
+      maxWidth: MAX_WIDTH[size],
+      paddingInline: GUTTER[gutter]
+    },
+    children
+  });
+};
+Container.displayName = containerMeta.displayName;
+
+//#endregion
+exports.Container = Container;
+exports.containerMeta = containerMeta;

package/dist/components/Container/Container.d.cts

@@ -0,0 +1,61 @@
+
+import * as React from "react";
+
+//#region src/components/Container/Container.d.ts
+/** Formal semantic identity — Container root (Structure entity, page shell). */
+declare const containerMeta: {
+  readonly displayName: "Container";
+  readonly entity: "Structure";
+  readonly structure: "root";
+};
+/** The inline-size cap: a structural surface width or the readability measure. */
+type ContainerSize = 'surface' | 'reading';
+/** Edge padding drawn from the gutter scale (`none` removes it). */
+type ContainerGutter = 'none' | 'section' | 'page';
+/** Props for the Container component. */
+interface ContainerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style' | 'className'> {
+  /**
+   * Inline-size cap. `surface` is the structural page/content width; `reading`
+   * is the narrower long-form readability measure. There is no raw max-width.
+   * @default 'surface'
+   */
+  size?: ContainerSize;
+  /**
+   * Edge padding from the gutter scale. `page` is the full page gutter;
+   * `section` a tighter one; `none` removes it for full-bleed children.
+   * @default 'page'
+   */
+  gutter?: ContainerGutter;
+  /** The shell's content. */
+  children?: React.ReactNode;
+}
+/**
+ * The page-shell primitive — a centered, width-capped, gutter-padded column.
+ *
+ * Entity = Structure. Wrap a page (or a major region) in a Container to give
+ * it the product's standard content width and edge padding without hand-rolling
+ * `max-width` + `margin: auto`. Pick `size="reading"` for long-form article
+ * columns and `size="surface"` for app/page shells. Place `Stack`, `Grid`, and
+ * `Surface` inside it.
+ *
+ * @example
+ * ```tsx
+ * <Container size="surface">
+ *   <Stack gap="xl">
+ *     <Heading level={1}>Dashboard</Heading>
+ *     <Grid columns={3} gap="lg">…</Grid>
+ *   </Stack>
+ * </Container>
+ * ```
+ */
+declare const Container: {
+  ({
+    size,
+    gutter,
+    children,
+    ...props
+  }: ContainerProps): import("react/jsx-runtime").JSX.Element;
+  displayName: "Container";
+};
+//#endregion
+export { Container, ContainerGutter, ContainerProps, ContainerSize, containerMeta };

package/dist/components/Container/Container.d.mts

@@ -0,0 +1,61 @@
+
+import * as React from "react";
+
+//#region src/components/Container/Container.d.ts
+/** Formal semantic identity — Container root (Structure entity, page shell). */
+declare const containerMeta: {
+  readonly displayName: "Container";
+  readonly entity: "Structure";
+  readonly structure: "root";
+};
+/** The inline-size cap: a structural surface width or the readability measure. */
+type ContainerSize = 'surface' | 'reading';
+/** Edge padding drawn from the gutter scale (`none` removes it). */
+type ContainerGutter = 'none' | 'section' | 'page';
+/** Props for the Container component. */
+interface ContainerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style' | 'className'> {
+  /**
+   * Inline-size cap. `surface` is the structural page/content width; `reading`
+   * is the narrower long-form readability measure. There is no raw max-width.
+   * @default 'surface'
+   */
+  size?: ContainerSize;
+  /**
+   * Edge padding from the gutter scale. `page` is the full page gutter;
+   * `section` a tighter one; `none` removes it for full-bleed children.
+   * @default 'page'
+   */
+  gutter?: ContainerGutter;
+  /** The shell's content. */
+  children?: React.ReactNode;
+}
+/**
+ * The page-shell primitive — a centered, width-capped, gutter-padded column.
+ *
+ * Entity = Structure. Wrap a page (or a major region) in a Container to give
+ * it the product's standard content width and edge padding without hand-rolling
+ * `max-width` + `margin: auto`. Pick `size="reading"` for long-form article
+ * columns and `size="surface"` for app/page shells. Place `Stack`, `Grid`, and
+ * `Surface` inside it.
+ *
+ * @example
+ * ```tsx
+ * <Container size="surface">
+ *   <Stack gap="xl">
+ *     <Heading level={1}>Dashboard</Heading>
+ *     <Grid columns={3} gap="lg">…</Grid>
+ *   </Stack>
+ * </Container>
+ * ```
+ */
+declare const Container: {
+  ({
+    size,
+    gutter,
+    children,
+    ...props
+  }: ContainerProps): import("react/jsx-runtime").JSX.Element;
+  displayName: "Container";
+};
+//#endregion
+export { Container, ContainerGutter, ContainerProps, ContainerSize, containerMeta };

package/dist/components/Container/Container.mjs

@@ -0,0 +1,64 @@
+/** 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/Container/Container.tsx
+/** Formal semantic identity — Container root (Structure entity, page shell). */
+var containerMeta = {
+  displayName: "Container",
+  entity: "Structure",
+  structure: "root"
+};
+var MAX_WIDTH = {
+  surface: vars.sizing.surface.maxWidth,
+  reading: vars.sizing.measure.reading
+};
+var GUTTER = {
+  none: "0",
+  section: vars.spacing.gutter.section,
+  page: vars.spacing.gutter.page
+};
+/**
+* The page-shell primitive — a centered, width-capped, gutter-padded column.
+*
+* Entity = Structure. Wrap a page (or a major region) in a Container to give
+* it the product's standard content width and edge padding without hand-rolling
+* `max-width` + `margin: auto`. Pick `size="reading"` for long-form article
+* columns and `size="surface"` for app/page shells. Place `Stack`, `Grid`, and
+* `Surface` inside it.
+*
+* @example
+* ```tsx
+* <Container size="surface">
+*   <Stack gap="xl">
+*     <Heading level={1}>Dashboard</Heading>
+*     <Grid columns={3} gap="lg">…</Grid>
+*   </Stack>
+* </Container>
+* ```
+*/
+var Container = ({
+  size = "surface",
+  gutter = "page",
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */jsx("div", {
+    ...props,
+    "data-scope": "container",
+    "data-part": "root",
+    "data-size": size,
+    style: {
+      boxSizing: "border-box",
+      marginInline: "auto",
+      width: "100%",
+      maxWidth: MAX_WIDTH[size],
+      paddingInline: GUTTER[gutter]
+    },
+    children
+  });
+};
+Container.displayName = containerMeta.displayName;
+
+//#endregion
+export { Container, containerMeta };

package/dist/components/FileTrigger/FileTrigger.cjs

@@ -1,7 +1,7 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 const require_Button = require('../Button/Button.cjs');
-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/FileTrigger/FileTrigger.tsx
 /** Formal semantic identity — FileTrigger root (Action entity). */

package/dist/components/FileTrigger/FileTrigger.mjs

@@ -1,7 +1,7 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 import { Button as Button$1 } from "../Button/Button.mjs";
-import { FileTrigger } from "react-aria-components";
 import { jsx } from "react/jsx-runtime";
+import { FileTrigger } from "react-aria-components";
 
 //#region src/components/FileTrigger/FileTrigger.tsx
 /** Formal semantic identity — FileTrigger root (Action entity). */

package/dist/components/Grid/Grid.cjs

@@ -0,0 +1,88 @@
+/** 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/Grid/Grid.tsx
+/** Formal semantic identity — Grid root (Structure entity, 2D layout). */
+var gridMeta = {
+  displayName: "Grid",
+  entity: "Structure",
+  structure: "root"
+};
+var GAP = {
+  xs: _ttoss_fsl_theme_vars.vars.spacing.gap.stack.xs,
+  sm: _ttoss_fsl_theme_vars.vars.spacing.gap.stack.sm,
+  md: _ttoss_fsl_theme_vars.vars.spacing.gap.stack.md,
+  lg: _ttoss_fsl_theme_vars.vars.spacing.gap.stack.lg,
+  xl: _ttoss_fsl_theme_vars.vars.spacing.gap.stack.xl
+};
+var MIN_COLUMN_WIDTH = {
+  xs: "12rem",
+  sm: "16rem",
+  md: "20rem",
+  lg: "24rem"
+};
+var ALIGN = {
+  start: "start",
+  center: "center",
+  end: "end",
+  stretch: "stretch"
+};
+/** Equal-fraction track template with an overflow-safe minimum. */
+var tracks = count => {
+  return `repeat(${count}, minmax(0, 1fr))`;
+};
+/** Responsive auto-fit template — as many ≥`min`-wide columns as fit. */
+var autoTracks = min => {
+  return `repeat(auto-fit, minmax(min(100%, ${MIN_COLUMN_WIDTH[min]}), 1fr))`;
+};
+/**
+* The 2D layout primitive — a CSS grid spaced from the FSL gap scale.
+*
+* Entity = Structure. Use it for card grids, form field matrices, and any
+* two-dimensional arrangement. `columns`/`rows` are structural integers that
+* resolve to equal, overflow-safe fraction tracks; `gap` draws only from the
+* named scale, so grid rhythm stays consistent across a product. For a single
+* axis of flow, reach for `Stack` instead.
+*
+* @example
+* ```tsx
+* // Fixed columns
+* <Grid columns={3} gap="lg">…</Grid>
+* // Responsive: as many ≥16rem columns as fit, reflowing automatically
+* <Grid minColumnWidth="sm" gap="lg">…</Grid>
+* ```
+*/
+var Grid = ({
+  columns = 1,
+  minColumnWidth,
+  rows,
+  gap = "md",
+  align = "stretch",
+  justify = "stretch",
+  children,
+  ...props
+}) => {
+  const templateColumns = minColumnWidth === void 0 ? tracks(columns) : autoTracks(minColumnWidth);
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)("div", {
+    ...props,
+    "data-scope": "grid",
+    "data-part": "root",
+    "data-columns": minColumnWidth === void 0 ? columns : "auto",
+    "data-gap": gap,
+    style: {
+      display: "grid",
+      gridTemplateColumns: templateColumns,
+      gridTemplateRows: rows === void 0 ? void 0 : tracks(rows),
+      gap: GAP[gap],
+      alignItems: ALIGN[align],
+      justifyItems: ALIGN[justify]
+    },
+    children
+  });
+};
+Grid.displayName = gridMeta.displayName;
+
+//#endregion
+exports.Grid = Grid;
+exports.gridMeta = gridMeta;

package/dist/components/Grid/Grid.d.cts

@@ -0,0 +1,87 @@
+
+import * as React from "react";
+
+//#region src/components/Grid/Grid.d.ts
+/** Formal semantic identity — Grid root (Structure entity, 2D layout). */
+declare const gridMeta: {
+  readonly displayName: "Grid";
+  readonly entity: "Structure";
+  readonly structure: "root";
+};
+/** A step of the gap scale. */
+type GridGap = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/** Track (item) alignment along an axis. */
+type GridAlign = 'start' | 'center' | 'end' | 'stretch';
+/**
+ * Minimum column width for a responsive auto-fit grid. A small named
+ * threshold scale (like a breakpoint), not a per-use length — the grid fits as
+ * many equal columns as the container allows, each at least this wide, and
+ * reflows the count automatically.
+ */
+type GridMinColumnWidth = 'xs' | 'sm' | 'md' | 'lg';
+/** Props for the Grid component. */
+interface GridProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style' | 'className'> {
+  /**
+   * Number of equal-fraction columns (`repeat(N, minmax(0, 1fr))`). A
+   * structural integer, not a length — there is no raw track template.
+   * Ignored when `minColumnWidth` is set (responsive auto-fit takes over).
+   * @default 1
+   */
+  columns?: number;
+  /**
+   * Make the grid **responsive**: fit as many equal columns as the container
+   * allows, each at least this wide, reflowing the count automatically
+   * (`repeat(auto-fit, minmax(…, 1fr))`). Takes a named threshold, not a
+   * length. When set, it overrides `columns`.
+   */
+  minColumnWidth?: GridMinColumnWidth;
+  /**
+   * Number of equal-fraction rows. Omit to let rows size to content (the
+   * common case); set it only for explicit row grids.
+   */
+  rows?: number;
+  /**
+   * Space between tracks (row and column), from the gap scale. There is no
+   * raw-length vocabulary — rhythm always comes from the scale.
+   * @default 'md'
+   */
+  gap?: GridGap;
+  /** Block-axis alignment of items within their tracks (`align-items`). @default 'stretch' */
+  align?: GridAlign;
+  /** Inline-axis alignment of items within their tracks (`justify-items`). @default 'stretch' */
+  justify?: GridAlign;
+  /** The grid items. */
+  children?: React.ReactNode;
+}
+/**
+ * The 2D layout primitive — a CSS grid spaced from the FSL gap scale.
+ *
+ * Entity = Structure. Use it for card grids, form field matrices, and any
+ * two-dimensional arrangement. `columns`/`rows` are structural integers that
+ * resolve to equal, overflow-safe fraction tracks; `gap` draws only from the
+ * named scale, so grid rhythm stays consistent across a product. For a single
+ * axis of flow, reach for `Stack` instead.
+ *
+ * @example
+ * ```tsx
+ * // Fixed columns
+ * <Grid columns={3} gap="lg">…</Grid>
+ * // Responsive: as many ≥16rem columns as fit, reflowing automatically
+ * <Grid minColumnWidth="sm" gap="lg">…</Grid>
+ * ```
+ */
+declare const Grid: {
+  ({
+    columns,
+    minColumnWidth,
+    rows,
+    gap,
+    align,
+    justify,
+    children,
+    ...props
+  }: GridProps): import("react/jsx-runtime").JSX.Element;
+  displayName: "Grid";
+};
+//#endregion
+export { Grid, GridAlign, GridGap, GridMinColumnWidth, GridProps, gridMeta };