@ttoss/fsl-ui 0.2.4 → 0.2.6

package/dist/components/Switch/Switch.d.mts

@@ -24,7 +24,7 @@ interface SwitchProps$1 extends Omit<SwitchProps, 'style' | 'children'> {
  *
  * Entity = Selection → reads `vars.colors.input.primary.*`, radii: `round`
  * (pill track + circular thumb), border: `outline.control`,
- * sizing: `hit.base`, motion: `feedback`.
+ * sizing: `hit`, motion: `feedback`.
  *
  * @example
  * ```tsx

package/dist/components/Switch/Switch.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 { Switch } from "react-aria-components";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Switch } from "react-aria-components";
 
 //#region src/components/Switch/Switch.tsx
 /** Formal semantic identity — Switch root (Selection entity, toggle.binary). */
@@ -81,7 +81,7 @@ var resolveLabelColor = ({
 *
 * Entity = Selection → reads `vars.colors.input.primary.*`, radii: `round`
 * (pill track + circular thumb), border: `outline.control`,
-* sizing: `hit.base`, motion: `feedback`.
+* sizing: `hit`, motion: `feedback`.
 *
 * @example
 * ```tsx
@@ -106,7 +106,7 @@ var Switch$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/Table/Table.cjs

@@ -0,0 +1,248 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+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_jsx_runtime = require("react/jsx-runtime");
+let react_aria_components = require("react-aria-components");
+
+//#region src/components/Table/Table.tsx
+/** Formal semantic identity — Table root (Collection entity, surface). */
+var tableMeta = {
+  displayName: "Table",
+  entity: "Collection",
+  structure: "root"
+};
+/** Formal semantic identity — TableColumn header (Collection `title` role). */
+var tableColumnMeta = {
+  displayName: "TableColumn",
+  entity: "Collection",
+  structure: "title"
+};
+/** Formal semantic identity — TableRow (Selection entity, selectable row). */
+var tableRowMeta = {
+  displayName: "TableRow",
+  entity: "Selection",
+  structure: "item",
+  composition: "selection"
+};
+/** Formal semantic identity — TableCell (Collection `content` role). */
+var tableCellMeta = {
+  displayName: "TableCell",
+  entity: "Collection",
+  structure: "content"
+};
+/**
+* A semantic data table built on React Aria's `Table` — column headers,
+* keyboard grid navigation, sorting, and row selection.
+*
+* Per ADR-007 the CONTAINER is Entity = Collection (an `informational`
+* surface) and each `TableRow` is Entity = Selection (`input` chrome, the
+* `selected` State). Compose `TableHeader` + `TableColumn` for the header
+* and `TableBody` + `TableRow` + `TableCell` for the data. Sorting is
+* controlled via `sortDescriptor`/`onSortChange` with `allowsSorting` on the
+* sortable columns. Row selection uses React Aria's `selectionMode`;
+* clicking a row toggles it (there is no checkbox column yet — it ships
+* when a consumer demands bulk actions).
+*
+* @example
+* ```tsx
+* <Table aria-label="Team" sortDescriptor={sort} onSortChange={setSort}>
+*   <TableHeader>
+*     <TableColumn id="name" isRowHeader allowsSorting>Name</TableColumn>
+*     <TableColumn id="role">Role</TableColumn>
+*   </TableHeader>
+*   <TableBody>
+*     <TableRow id="ada">
+*       <TableCell>Ada Lovelace</TableCell>
+*       <TableCell>Admin</TableCell>
+*     </TableRow>
+*   </TableBody>
+* </Table>
+* ```
+*/
+var Table = props => {
+  const surface = _ttoss_fsl_theme_vars.vars.colors.informational.primary;
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.Table, {
+    ...props,
+    "data-scope": "table",
+    "data-part": "root",
+    style: {
+      boxSizing: "border-box",
+      inlineSize: "100%",
+      borderCollapse: "separate",
+      borderSpacing: 0,
+      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: surface?.border?.default ?? "transparent",
+      backgroundColor: surface?.background?.default,
+      color: surface?.text?.default
+    }
+  });
+};
+Table.displayName = tableMeta.displayName;
+/**
+* The header row group. An internal frame part — place `TableColumn`s
+* inside it.
+*/
+var TableHeader = props => {
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.TableHeader, {
+    ...props,
+    "data-scope": "table",
+    "data-part": "header"
+  });
+};
+TableHeader.displayName = "TableHeader";
+/**
+* A column header (Collection `title` role). With `allowsSorting`, React
+* Aria makes it a keyboard-operable sort control (`aria-sort` included) and
+* the current direction renders as an arrow Icon
+* (`action.sortAscending` / `action.sortDescending`).
+*
+* Set `isRowHeader` on the column whose cells name the row for assistive
+* technology.
+*/
+var TableColumn = ({
+  children,
+  ...props
+}) => {
+  const colors = _ttoss_fsl_theme_vars.vars.colors.informational.muted;
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.Column, {
+    ...props,
+    "data-scope": "table",
+    "data-part": "title",
+    style: ({
+      allowsSorting,
+      isHovered,
+      isFocusVisible
+    }) => {
+      return {
+        boxSizing: "border-box",
+        textAlign: "start",
+        paddingBlock: _ttoss_fsl_theme_vars.vars.spacing.inset.control.sm,
+        paddingInline: _ttoss_fsl_theme_vars.vars.spacing.inset.control.md,
+        ..._ttoss_fsl_theme_vars.vars.text.label.sm,
+        cursor: allowsSorting ? "pointer" : void 0,
+        transitionProperty: "color",
+        transitionDuration: _ttoss_fsl_theme_vars.vars.motion.feedback.duration,
+        transitionTimingFunction: _ttoss_fsl_theme_vars.vars.motion.feedback.easing,
+        color: allowsSorting ? require_resolveInteractiveStyle.resolveInteractiveStyle(colors?.text, {
+          isHovered
+        }) : colors?.text?.default,
+        borderBlockEndWidth: _ttoss_fsl_theme_vars.vars.border.divider.width,
+        borderBlockEndStyle: _ttoss_fsl_theme_vars.vars.border.divider.style,
+        borderBlockEndColor: colors?.border?.default ?? "transparent",
+        outline: require_focusRing.focusRingOutline(isFocusVisible),
+        outlineOffset: "-2px"
+      };
+    },
+    children: ({
+      allowsSorting,
+      sortDirection
+    }) => {
+      return /* @__PURE__ */(0, react_jsx_runtime.jsxs)("span", {
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          gap: _ttoss_fsl_theme_vars.vars.spacing.gap.inline.sm
+        },
+        children: [children, allowsSorting && sortDirection && /* @__PURE__ */(0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+          intent: sortDirection === "ascending" ? "action.sortAscending" : "action.sortDescending",
+          size: "sm"
+        })]
+      });
+    }
+  });
+};
+TableColumn.displayName = tableColumnMeta.displayName;
+/** The data row group. An internal frame part — place `TableRow`s inside. */
+var TableBody = props => {
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.TableBody, {
+    ...props,
+    "data-scope": "table",
+    "data-part": "body"
+  });
+};
+TableBody.displayName = "TableBody";
+/**
+* A single data row. Entity = Selection → reads `vars.colors.input.*` and
+* surfaces the `selected` State when the parent Table has a `selectionMode`.
+*/
+var TableRow = props => {
+  const c = _ttoss_fsl_theme_vars.vars.colors.input.primary;
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.Row, {
+    ...props,
+    "data-scope": "table",
+    "data-part": "item",
+    style: ({
+      isSelected,
+      isHovered,
+      isFocusVisible,
+      isDisabled,
+      selectionMode
+    }) => {
+      return {
+        boxSizing: "border-box",
+        blockSize: _ttoss_fsl_theme_vars.vars.sizing.hit,
+        cursor: selectionMode === "none" ? void 0 : isDisabled ? "not-allowed" : "pointer",
+        opacity: isDisabled ? _ttoss_fsl_theme_vars.vars.opacity.disabled : void 0,
+        transitionProperty: "background-color, color",
+        transitionDuration: _ttoss_fsl_theme_vars.vars.motion.feedback.duration,
+        transitionTimingFunction: _ttoss_fsl_theme_vars.vars.motion.feedback.easing,
+        backgroundColor: require_resolveInteractiveStyle.resolveInteractiveStyle(c?.background, {
+          isDisabled,
+          isSelected,
+          isHovered: isHovered && selectionMode !== "none"
+        }),
+        color: require_resolveInteractiveStyle.resolveInteractiveStyle(c?.text, {
+          isDisabled,
+          isSelected
+        }),
+        outline: require_focusRing.focusRingOutline(isFocusVisible),
+        outlineOffset: "-2px"
+      };
+    }
+  });
+};
+TableRow.displayName = tableRowMeta.displayName;
+/**
+* A data cell (Collection `content` role). Focusable during keyboard grid
+* navigation; typography and color inherit from the row.
+*/
+var TableCell = props => {
+  const colors = _ttoss_fsl_theme_vars.vars.colors.informational.muted;
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.Cell, {
+    ...props,
+    "data-scope": "table",
+    "data-part": "content",
+    style: ({
+      isFocusVisible
+    }) => {
+      return {
+        boxSizing: "border-box",
+        paddingBlock: _ttoss_fsl_theme_vars.vars.spacing.inset.control.sm,
+        paddingInline: _ttoss_fsl_theme_vars.vars.spacing.inset.control.md,
+        ..._ttoss_fsl_theme_vars.vars.text.body.sm,
+        borderBlockEndWidth: _ttoss_fsl_theme_vars.vars.border.divider.width,
+        borderBlockEndStyle: _ttoss_fsl_theme_vars.vars.border.divider.style,
+        borderBlockEndColor: colors?.border?.default ?? "transparent",
+        outline: require_focusRing.focusRingOutline(isFocusVisible),
+        outlineOffset: "-2px"
+      };
+    }
+  });
+};
+TableCell.displayName = tableCellMeta.displayName;
+
+//#endregion
+exports.Table = Table;
+exports.TableBody = TableBody;
+exports.TableCell = TableCell;
+exports.TableColumn = TableColumn;
+exports.TableHeader = TableHeader;
+exports.TableRow = TableRow;
+exports.tableCellMeta = tableCellMeta;
+exports.tableColumnMeta = tableColumnMeta;
+exports.tableMeta = tableMeta;
+exports.tableRowMeta = tableRowMeta;

package/dist/components/Table/Table.d.cts

@@ -0,0 +1,128 @@
+
+import * as React from "react";
+import { CellProps, ColumnProps, RowProps, SortDescriptor, SortDirection, TableBodyProps, TableHeaderProps, TableProps } from "react-aria-components";
+
+//#region src/components/Table/Table.d.ts
+/** Formal semantic identity — Table root (Collection entity, surface). */
+declare const tableMeta: {
+  readonly displayName: "Table";
+  readonly entity: "Collection";
+  readonly structure: "root";
+};
+/** Formal semantic identity — TableColumn header (Collection `title` role). */
+declare const tableColumnMeta: {
+  readonly displayName: "TableColumn";
+  readonly entity: "Collection";
+  readonly structure: "title";
+};
+/** Formal semantic identity — TableRow (Selection entity, selectable row). */
+declare const tableRowMeta: {
+  readonly displayName: "TableRow";
+  readonly entity: "Selection";
+  readonly structure: "item";
+  readonly composition: "selection";
+};
+/** Formal semantic identity — TableCell (Collection `content` role). */
+declare const tableCellMeta: {
+  readonly displayName: "TableCell";
+  readonly entity: "Collection";
+  readonly structure: "content";
+};
+/** Props for the Table component. */
+type TableProps$1 = Omit<TableProps, 'style' | 'className'>;
+/**
+ * A semantic data table built on React Aria's `Table` — column headers,
+ * keyboard grid navigation, sorting, and row selection.
+ *
+ * Per ADR-007 the CONTAINER is Entity = Collection (an `informational`
+ * surface) and each `TableRow` is Entity = Selection (`input` chrome, the
+ * `selected` State). Compose `TableHeader` + `TableColumn` for the header
+ * and `TableBody` + `TableRow` + `TableCell` for the data. Sorting is
+ * controlled via `sortDescriptor`/`onSortChange` with `allowsSorting` on the
+ * sortable columns. Row selection uses React Aria's `selectionMode`;
+ * clicking a row toggles it (there is no checkbox column yet — it ships
+ * when a consumer demands bulk actions).
+ *
+ * @example
+ * ```tsx
+ * <Table aria-label="Team" sortDescriptor={sort} onSortChange={setSort}>
+ *   <TableHeader>
+ *     <TableColumn id="name" isRowHeader allowsSorting>Name</TableColumn>
+ *     <TableColumn id="role">Role</TableColumn>
+ *   </TableHeader>
+ *   <TableBody>
+ *     <TableRow id="ada">
+ *       <TableCell>Ada Lovelace</TableCell>
+ *       <TableCell>Admin</TableCell>
+ *     </TableRow>
+ *   </TableBody>
+ * </Table>
+ * ```
+ */
+declare const Table: {
+  (props: TableProps$1): import("react/jsx-runtime").JSX.Element;
+  displayName: "Table";
+};
+/** Props for the TableHeader frame. */
+type TableHeaderProps$1<T extends object = object> = Omit<TableHeaderProps<T>, 'style' | 'className'>;
+/**
+ * The header row group. An internal frame part — place `TableColumn`s
+ * inside it.
+ */
+declare const TableHeader: {
+  <T extends object = object>(props: TableHeaderProps$1<T>): import("react/jsx-runtime").JSX.Element;
+  displayName: string;
+};
+/** Props for a TableColumn header cell. */
+type TableColumnProps = Omit<ColumnProps, 'style' | 'className' | 'children'> & {
+  /**
+   * Column header content. Plain nodes only — the column owns its render
+   * prop internally (label + sort-direction indicator).
+   */
+  children?: React.ReactNode;
+};
+/**
+ * A column header (Collection `title` role). With `allowsSorting`, React
+ * Aria makes it a keyboard-operable sort control (`aria-sort` included) and
+ * the current direction renders as an arrow Icon
+ * (`action.sortAscending` / `action.sortDescending`).
+ *
+ * Set `isRowHeader` on the column whose cells name the row for assistive
+ * technology.
+ */
+declare const TableColumn: {
+  ({
+    children,
+    ...props
+  }: TableColumnProps): import("react/jsx-runtime").JSX.Element;
+  displayName: "TableColumn";
+};
+/** Props for the TableBody frame. */
+type TableBodyProps$1<T extends object = object> = Omit<TableBodyProps<T>, 'style' | 'className'>;
+/** The data row group. An internal frame part — place `TableRow`s inside. */
+declare const TableBody: {
+  <T extends object = object>(props: TableBodyProps$1<T>): import("react/jsx-runtime").JSX.Element;
+  displayName: string;
+};
+/** Props for a TableRow. */
+type TableRowProps<T extends object = object> = Omit<RowProps<T>, 'style' | 'className'>;
+/**
+ * A single data row. Entity = Selection → reads `vars.colors.input.*` and
+ * surfaces the `selected` State when the parent Table has a `selectionMode`.
+ */
+declare const TableRow: {
+  <T extends object = object>(props: TableRowProps<T>): import("react/jsx-runtime").JSX.Element;
+  displayName: "TableRow";
+};
+/** Props for a TableCell. */
+type TableCellProps = Omit<CellProps, 'style' | 'className'>;
+/**
+ * A data cell (Collection `content` role). Focusable during keyboard grid
+ * navigation; typography and color inherit from the row.
+ */
+declare const TableCell: {
+  (props: TableCellProps): import("react/jsx-runtime").JSX.Element;
+  displayName: "TableCell";
+};
+//#endregion
+export { type SortDescriptor, type SortDirection, Table, TableBody, TableBodyProps$1 as TableBodyProps, TableCell, TableCellProps, TableColumn, TableColumnProps, TableHeader, TableHeaderProps$1 as TableHeaderProps, TableProps$1 as TableProps, TableRow, TableRowProps, tableCellMeta, tableColumnMeta, tableMeta, tableRowMeta };

package/dist/components/Table/Table.d.mts

@@ -0,0 +1,128 @@
+
+import { CellProps, ColumnProps, RowProps, SortDescriptor, SortDirection, TableBodyProps, TableHeaderProps, TableProps } from "react-aria-components";
+import * as React from "react";
+
+//#region src/components/Table/Table.d.ts
+/** Formal semantic identity — Table root (Collection entity, surface). */
+declare const tableMeta: {
+  readonly displayName: "Table";
+  readonly entity: "Collection";
+  readonly structure: "root";
+};
+/** Formal semantic identity — TableColumn header (Collection `title` role). */
+declare const tableColumnMeta: {
+  readonly displayName: "TableColumn";
+  readonly entity: "Collection";
+  readonly structure: "title";
+};
+/** Formal semantic identity — TableRow (Selection entity, selectable row). */
+declare const tableRowMeta: {
+  readonly displayName: "TableRow";
+  readonly entity: "Selection";
+  readonly structure: "item";
+  readonly composition: "selection";
+};
+/** Formal semantic identity — TableCell (Collection `content` role). */
+declare const tableCellMeta: {
+  readonly displayName: "TableCell";
+  readonly entity: "Collection";
+  readonly structure: "content";
+};
+/** Props for the Table component. */
+type TableProps$1 = Omit<TableProps, 'style' | 'className'>;
+/**
+ * A semantic data table built on React Aria's `Table` — column headers,
+ * keyboard grid navigation, sorting, and row selection.
+ *
+ * Per ADR-007 the CONTAINER is Entity = Collection (an `informational`
+ * surface) and each `TableRow` is Entity = Selection (`input` chrome, the
+ * `selected` State). Compose `TableHeader` + `TableColumn` for the header
+ * and `TableBody` + `TableRow` + `TableCell` for the data. Sorting is
+ * controlled via `sortDescriptor`/`onSortChange` with `allowsSorting` on the
+ * sortable columns. Row selection uses React Aria's `selectionMode`;
+ * clicking a row toggles it (there is no checkbox column yet — it ships
+ * when a consumer demands bulk actions).
+ *
+ * @example
+ * ```tsx
+ * <Table aria-label="Team" sortDescriptor={sort} onSortChange={setSort}>
+ *   <TableHeader>
+ *     <TableColumn id="name" isRowHeader allowsSorting>Name</TableColumn>
+ *     <TableColumn id="role">Role</TableColumn>
+ *   </TableHeader>
+ *   <TableBody>
+ *     <TableRow id="ada">
+ *       <TableCell>Ada Lovelace</TableCell>
+ *       <TableCell>Admin</TableCell>
+ *     </TableRow>
+ *   </TableBody>
+ * </Table>
+ * ```
+ */
+declare const Table$1: {
+  (props: TableProps$1): import("react/jsx-runtime").JSX.Element;
+  displayName: "Table";
+};
+/** Props for the TableHeader frame. */
+type TableHeaderProps$1<T extends object = object> = Omit<TableHeaderProps<T>, 'style' | 'className'>;
+/**
+ * The header row group. An internal frame part — place `TableColumn`s
+ * inside it.
+ */
+declare const TableHeader$1: {
+  <T extends object = object>(props: TableHeaderProps$1<T>): import("react/jsx-runtime").JSX.Element;
+  displayName: string;
+};
+/** Props for a TableColumn header cell. */
+type TableColumnProps = Omit<ColumnProps, 'style' | 'className' | 'children'> & {
+  /**
+   * Column header content. Plain nodes only — the column owns its render
+   * prop internally (label + sort-direction indicator).
+   */
+  children?: React.ReactNode;
+};
+/**
+ * A column header (Collection `title` role). With `allowsSorting`, React
+ * Aria makes it a keyboard-operable sort control (`aria-sort` included) and
+ * the current direction renders as an arrow Icon
+ * (`action.sortAscending` / `action.sortDescending`).
+ *
+ * Set `isRowHeader` on the column whose cells name the row for assistive
+ * technology.
+ */
+declare const TableColumn: {
+  ({
+    children,
+    ...props
+  }: TableColumnProps): import("react/jsx-runtime").JSX.Element;
+  displayName: "TableColumn";
+};
+/** Props for the TableBody frame. */
+type TableBodyProps$1<T extends object = object> = Omit<TableBodyProps<T>, 'style' | 'className'>;
+/** The data row group. An internal frame part — place `TableRow`s inside. */
+declare const TableBody$1: {
+  <T extends object = object>(props: TableBodyProps$1<T>): import("react/jsx-runtime").JSX.Element;
+  displayName: string;
+};
+/** Props for a TableRow. */
+type TableRowProps<T extends object = object> = Omit<RowProps<T>, 'style' | 'className'>;
+/**
+ * A single data row. Entity = Selection → reads `vars.colors.input.*` and
+ * surfaces the `selected` State when the parent Table has a `selectionMode`.
+ */
+declare const TableRow: {
+  <T extends object = object>(props: TableRowProps<T>): import("react/jsx-runtime").JSX.Element;
+  displayName: "TableRow";
+};
+/** Props for a TableCell. */
+type TableCellProps = Omit<CellProps, 'style' | 'className'>;
+/**
+ * A data cell (Collection `content` role). Focusable during keyboard grid
+ * navigation; typography and color inherit from the row.
+ */
+declare const TableCell: {
+  (props: TableCellProps): import("react/jsx-runtime").JSX.Element;
+  displayName: "TableCell";
+};
+//#endregion
+export { type SortDescriptor, type SortDirection, Table$1 as Table, TableBody$1 as TableBody, TableBodyProps$1 as TableBodyProps, TableCell, TableCellProps, TableColumn, TableColumnProps, TableHeader$1 as TableHeader, TableHeaderProps$1 as TableHeaderProps, TableProps$1 as TableProps, TableRow, TableRowProps, tableCellMeta, tableColumnMeta, tableMeta, tableRowMeta };