@ttoss/fsl-ui 0.2.4

package/dist/components/CheckboxGroup/CheckboxGroup.d.cts

@@ -0,0 +1,56 @@
+
+import * as React from "react";
+import { CheckboxGroupProps } from "react-aria-components";
+
+//#region src/components/CheckboxGroup/CheckboxGroup.d.ts
+/** Formal semantic identity — CheckboxGroup root (Selection entity, multi-choice). */
+declare const checkboxGroupMeta: {
+  readonly displayName: "CheckboxGroup";
+  readonly entity: "Selection";
+  readonly structure: "root";
+};
+/** Props for the CheckboxGroup component. */
+interface CheckboxGroupProps$1 extends Omit<CheckboxGroupProps, 'style' | 'children' | 'className'> {
+  /** Group label displayed above the checkboxes. */
+  label?: React.ReactNode;
+  /** Supplementary helper text linked to the group via `aria-describedby`. */
+  description?: React.ReactNode;
+  /**
+   * Validation message shown when the group is invalid (`isInvalid` /
+   * `validate`). Supply caller-localized copy (i18n rule / §6).
+   */
+  errorMessage?: React.ReactNode;
+  /** `Checkbox` option children. */
+  children?: React.ReactNode;
+}
+/**
+ * A semantic checkbox group built on React Aria's `CheckboxGroup`.
+ *
+ * Orchestrates a set of independently-selectable `Checkbox` options (multi
+ * select — the counterpart of the single-select `RadioGroup`). Group-level
+ * validation set via `isInvalid` (or React Aria's `validate`) propagates to
+ * every child Checkbox, which surfaces the `invalid` State.
+ *
+ * Entity = Selection → reads `vars.colors.input.primary.*`. Validation is the
+ * `invalid` State, never an `evaluation` variant.
+ *
+ * @example
+ * ```tsx
+ * <CheckboxGroup label="Notifications" description="Pick at least one">
+ *   <Checkbox value="email">Email</Checkbox>
+ *   <Checkbox value="sms">SMS</Checkbox>
+ * </CheckboxGroup>
+ * ```
+ */
+declare const CheckboxGroup: {
+  ({
+    label,
+    description,
+    errorMessage,
+    children,
+    ...props
+  }: CheckboxGroupProps$1): import("react/jsx-runtime").JSX.Element;
+  displayName: "CheckboxGroup";
+};
+//#endregion
+export { CheckboxGroup, CheckboxGroupProps$1 as CheckboxGroupProps, checkboxGroupMeta };

package/dist/components/CheckboxGroup/CheckboxGroup.d.mts

@@ -0,0 +1,56 @@
+
+import { CheckboxGroupProps } from "react-aria-components";
+import * as React from "react";
+
+//#region src/components/CheckboxGroup/CheckboxGroup.d.ts
+/** Formal semantic identity — CheckboxGroup root (Selection entity, multi-choice). */
+declare const checkboxGroupMeta: {
+  readonly displayName: "CheckboxGroup";
+  readonly entity: "Selection";
+  readonly structure: "root";
+};
+/** Props for the CheckboxGroup component. */
+interface CheckboxGroupProps$1 extends Omit<CheckboxGroupProps, 'style' | 'children' | 'className'> {
+  /** Group label displayed above the checkboxes. */
+  label?: React.ReactNode;
+  /** Supplementary helper text linked to the group via `aria-describedby`. */
+  description?: React.ReactNode;
+  /**
+   * Validation message shown when the group is invalid (`isInvalid` /
+   * `validate`). Supply caller-localized copy (i18n rule / §6).
+   */
+  errorMessage?: React.ReactNode;
+  /** `Checkbox` option children. */
+  children?: React.ReactNode;
+}
+/**
+ * A semantic checkbox group built on React Aria's `CheckboxGroup`.
+ *
+ * Orchestrates a set of independently-selectable `Checkbox` options (multi
+ * select — the counterpart of the single-select `RadioGroup`). Group-level
+ * validation set via `isInvalid` (or React Aria's `validate`) propagates to
+ * every child Checkbox, which surfaces the `invalid` State.
+ *
+ * Entity = Selection → reads `vars.colors.input.primary.*`. Validation is the
+ * `invalid` State, never an `evaluation` variant.
+ *
+ * @example
+ * ```tsx
+ * <CheckboxGroup label="Notifications" description="Pick at least one">
+ *   <Checkbox value="email">Email</Checkbox>
+ *   <Checkbox value="sms">SMS</Checkbox>
+ * </CheckboxGroup>
+ * ```
+ */
+declare const CheckboxGroup$1: {
+  ({
+    label,
+    description,
+    errorMessage,
+    children,
+    ...props
+  }: CheckboxGroupProps$1): import("react/jsx-runtime").JSX.Element;
+  displayName: "CheckboxGroup";
+};
+//#endregion
+export { CheckboxGroup$1 as CheckboxGroup, CheckboxGroupProps$1 as CheckboxGroupProps, checkboxGroupMeta };

package/dist/components/CheckboxGroup/CheckboxGroup.mjs

@@ -0,0 +1,96 @@
+/** 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";
+
+//#region src/components/CheckboxGroup/CheckboxGroup.tsx
+/** Formal semantic identity — CheckboxGroup root (Selection entity, multi-choice). */
+var checkboxGroupMeta = {
+  displayName: "CheckboxGroup",
+  entity: "Selection",
+  structure: "root"
+};
+/**
+* Resolve the group's text colors once (default for label/description, invalid
+* for the validation message). Hoisted out of the render so the optional-chain
+* reads live here and keep the component's cyclomatic complexity low.
+*/
+var resolveGroupTextColors = c => {
+  const text = c?.text;
+  return {
+    base: text?.default,
+    invalid: text?.invalid ?? text?.default
+  };
+};
+/**
+* A semantic checkbox group built on React Aria's `CheckboxGroup`.
+*
+* Orchestrates a set of independently-selectable `Checkbox` options (multi
+* select — the counterpart of the single-select `RadioGroup`). Group-level
+* validation set via `isInvalid` (or React Aria's `validate`) propagates to
+* every child Checkbox, which surfaces the `invalid` State.
+*
+* Entity = Selection → reads `vars.colors.input.primary.*`. Validation is the
+* `invalid` State, never an `evaluation` variant.
+*
+* @example
+* ```tsx
+* <CheckboxGroup label="Notifications" description="Pick at least one">
+*   <Checkbox value="email">Email</Checkbox>
+*   <Checkbox value="sms">SMS</Checkbox>
+* </CheckboxGroup>
+* ```
+*/
+var CheckboxGroup$1 = ({
+  label,
+  description,
+  errorMessage,
+  children,
+  ...props
+}) => {
+  const {
+    base,
+    invalid
+  } = resolveGroupTextColors(vars.colors.input.primary);
+  return /* @__PURE__ */jsxs(CheckboxGroup, {
+    ...props,
+    "data-scope": "checkbox-group",
+    "data-part": "root",
+    style: {
+      boxSizing: "border-box",
+      display: "flex",
+      flexDirection: "column",
+      gap: vars.spacing.gap.stack.sm
+    },
+    children: [label != null && /* @__PURE__ */jsx(Label, {
+      "data-scope": "checkbox-group",
+      "data-part": "label",
+      style: {
+        ...vars.text.label.md,
+        color: base
+      },
+      children: label
+    }), children, description != null && /* @__PURE__ */jsx(Text, {
+      slot: "description",
+      "data-scope": "checkbox-group",
+      "data-part": "description",
+      style: {
+        ...vars.text.label.sm,
+        color: base
+      },
+      children: description
+    }), /* @__PURE__ */jsx(FieldError, {
+      "data-scope": "checkbox-group",
+      "data-part": "validationMessage",
+      style: {
+        ...vars.text.label.sm,
+        color: invalid
+      },
+      children: errorMessage
+    })]
+  });
+};
+CheckboxGroup$1.displayName = checkboxGroupMeta.displayName;
+
+//#endregion
+export { CheckboxGroup$1 as CheckboxGroup, checkboxGroupMeta };

package/dist/components/FileTrigger/FileTrigger.cjs

@@ -0,0 +1,51 @@
+/** 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");
+
+//#region src/components/FileTrigger/FileTrigger.tsx
+/** Formal semantic identity — FileTrigger root (Action entity). */
+var fileTriggerMeta = {
+  displayName: "FileTrigger",
+  entity: "Action",
+  structure: "root"
+};
+/**
+* A semantic file-picker trigger built on React Aria's `FileTrigger`.
+*
+* Entity = Action. Renders a `Button` that opens the OS file dialog on press
+* and reports the chosen files via `onSelect`. Configure `acceptedFileTypes`,
+* `allowsMultiple`, and `acceptDirectory` as needed.
+*
+* For drag-and-drop upload, pair with a `DropZone` (deferred to Phase 4) — the
+* `droptarget` State lives there, not on this click trigger.
+*
+* @example
+* ```tsx
+* <FileTrigger
+*   acceptedFileTypes={['image/*']}
+*   onSelect={(files) => upload(files)}
+* >
+*   Upload avatar
+* </FileTrigger>
+* ```
+*/
+var FileTrigger = ({
+  evaluation = "primary",
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.FileTrigger, {
+    ...props,
+    children: /* @__PURE__ */(0, react_jsx_runtime.jsx)(require_Button.Button, {
+      "data-scope": "file-trigger",
+      evaluation,
+      children
+    })
+  });
+};
+FileTrigger.displayName = fileTriggerMeta.displayName;
+
+//#endregion
+exports.FileTrigger = FileTrigger;
+exports.fileTriggerMeta = fileTriggerMeta;

package/dist/components/FileTrigger/FileTrigger.d.cts

@@ -0,0 +1,52 @@
+
+import { EvaluationsFor } from "../../semantics/taxonomy.cjs";
+import * as React from "react";
+import { FileTriggerProps } from "react-aria-components";
+
+//#region src/components/FileTrigger/FileTrigger.d.ts
+/** Formal semantic identity — FileTrigger root (Action entity). */
+declare const fileTriggerMeta: {
+  readonly displayName: "FileTrigger";
+  readonly entity: "Action";
+  readonly structure: "root";
+};
+/** Props for the FileTrigger component. */
+interface FileTriggerProps$1 extends Omit<FileTriggerProps, 'children'> {
+  /**
+   * Authorial emphasis of the trigger button.
+   * @default 'primary'
+   */
+  evaluation?: EvaluationsFor<(typeof fileTriggerMeta)['entity']>;
+  /** Label content of the trigger button (e.g. "Upload avatar"). */
+  children?: React.ReactNode;
+}
+/**
+ * A semantic file-picker trigger built on React Aria's `FileTrigger`.
+ *
+ * Entity = Action. Renders a `Button` that opens the OS file dialog on press
+ * and reports the chosen files via `onSelect`. Configure `acceptedFileTypes`,
+ * `allowsMultiple`, and `acceptDirectory` as needed.
+ *
+ * For drag-and-drop upload, pair with a `DropZone` (deferred to Phase 4) — the
+ * `droptarget` State lives there, not on this click trigger.
+ *
+ * @example
+ * ```tsx
+ * <FileTrigger
+ *   acceptedFileTypes={['image/*']}
+ *   onSelect={(files) => upload(files)}
+ * >
+ *   Upload avatar
+ * </FileTrigger>
+ * ```
+ */
+declare const FileTrigger: {
+  ({
+    evaluation,
+    children,
+    ...props
+  }: FileTriggerProps$1): import("react/jsx-runtime").JSX.Element;
+  displayName: "FileTrigger";
+};
+//#endregion
+export { FileTrigger, FileTriggerProps$1 as FileTriggerProps, fileTriggerMeta };

package/dist/components/FileTrigger/FileTrigger.d.mts

@@ -0,0 +1,52 @@
+
+import { EvaluationsFor } from "../../semantics/taxonomy.mjs";
+import { FileTriggerProps } from "react-aria-components";
+import * as React from "react";
+
+//#region src/components/FileTrigger/FileTrigger.d.ts
+/** Formal semantic identity — FileTrigger root (Action entity). */
+declare const fileTriggerMeta: {
+  readonly displayName: "FileTrigger";
+  readonly entity: "Action";
+  readonly structure: "root";
+};
+/** Props for the FileTrigger component. */
+interface FileTriggerProps$1 extends Omit<FileTriggerProps, 'children'> {
+  /**
+   * Authorial emphasis of the trigger button.
+   * @default 'primary'
+   */
+  evaluation?: EvaluationsFor<(typeof fileTriggerMeta)['entity']>;
+  /** Label content of the trigger button (e.g. "Upload avatar"). */
+  children?: React.ReactNode;
+}
+/**
+ * A semantic file-picker trigger built on React Aria's `FileTrigger`.
+ *
+ * Entity = Action. Renders a `Button` that opens the OS file dialog on press
+ * and reports the chosen files via `onSelect`. Configure `acceptedFileTypes`,
+ * `allowsMultiple`, and `acceptDirectory` as needed.
+ *
+ * For drag-and-drop upload, pair with a `DropZone` (deferred to Phase 4) — the
+ * `droptarget` State lives there, not on this click trigger.
+ *
+ * @example
+ * ```tsx
+ * <FileTrigger
+ *   acceptedFileTypes={['image/*']}
+ *   onSelect={(files) => upload(files)}
+ * >
+ *   Upload avatar
+ * </FileTrigger>
+ * ```
+ */
+declare const FileTrigger$1: {
+  ({
+    evaluation,
+    children,
+    ...props
+  }: FileTriggerProps$1): import("react/jsx-runtime").JSX.Element;
+  displayName: "FileTrigger";
+};
+//#endregion
+export { FileTrigger$1 as FileTrigger, FileTriggerProps$1 as FileTriggerProps, fileTriggerMeta };

package/dist/components/FileTrigger/FileTrigger.mjs

@@ -0,0 +1,50 @@
+/** 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";
+
+//#region src/components/FileTrigger/FileTrigger.tsx
+/** Formal semantic identity — FileTrigger root (Action entity). */
+var fileTriggerMeta = {
+  displayName: "FileTrigger",
+  entity: "Action",
+  structure: "root"
+};
+/**
+* A semantic file-picker trigger built on React Aria's `FileTrigger`.
+*
+* Entity = Action. Renders a `Button` that opens the OS file dialog on press
+* and reports the chosen files via `onSelect`. Configure `acceptedFileTypes`,
+* `allowsMultiple`, and `acceptDirectory` as needed.
+*
+* For drag-and-drop upload, pair with a `DropZone` (deferred to Phase 4) — the
+* `droptarget` State lives there, not on this click trigger.
+*
+* @example
+* ```tsx
+* <FileTrigger
+*   acceptedFileTypes={['image/*']}
+*   onSelect={(files) => upload(files)}
+* >
+*   Upload avatar
+* </FileTrigger>
+* ```
+*/
+var FileTrigger$1 = ({
+  evaluation = "primary",
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */jsx(FileTrigger, {
+    ...props,
+    children: /* @__PURE__ */jsx(Button$1, {
+      "data-scope": "file-trigger",
+      evaluation,
+      children
+    })
+  });
+};
+FileTrigger$1.displayName = fileTriggerMeta.displayName;
+
+//#endregion
+export { FileTrigger$1 as FileTrigger, fileTriggerMeta };

package/dist/components/GridList/GridList.cjs

@@ -0,0 +1,220 @@
+/** 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_aria_components = require("react-aria-components");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/GridList/GridList.tsx
+/** Formal semantic identity — GridList root (Collection entity, surface). */
+var gridListMeta = {
+  displayName: "GridList",
+  entity: "Collection",
+  structure: "root"
+};
+/** Formal semantic identity — GridListItem (Selection entity, selectable row). */
+var gridListItemMeta = {
+  displayName: "GridListItem",
+  entity: "Selection",
+  structure: "item",
+  composition: "selection"
+};
+/** Row (item) chrome — reflects the `selected` set-membership State. */
+var buildRowStyle = ({
+  c,
+  isSelected,
+  isHovered,
+  isFocusVisible,
+  isDisabled
+}) => {
+  return {
+    boxSizing: "border-box",
+    display: "flex",
+    alignItems: "center",
+    gap: _ttoss_fsl_theme_vars.vars.spacing.gap.inline.sm,
+    minHeight: _ttoss_fsl_theme_vars.vars.sizing.hit.base,
+    paddingBlock: _ttoss_fsl_theme_vars.vars.spacing.inset.control.sm,
+    paddingInline: _ttoss_fsl_theme_vars.vars.spacing.inset.control.md,
+    borderRadius: _ttoss_fsl_theme_vars.vars.radii.control,
+    cursor: isDisabled ? "not-allowed" : "pointer",
+    opacity: isDisabled ? _ttoss_fsl_theme_vars.vars.opacity.disabled : void 0,
+    ..._ttoss_fsl_theme_vars.vars.text.label.md,
+    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
+    }),
+    color: require_resolveInteractiveStyle.resolveInteractiveStyle(c?.text, {
+      isDisabled,
+      isSelected,
+      isHovered
+    }) ?? c?.text?.default,
+    outline: require_focusRing.focusRingOutline(isFocusVisible),
+    outlineOffset: "-2px"
+  };
+};
+var SELECTION_BOX_SIZE = "1.125rem";
+/** Static box chrome for the row's selection checkbox. */
+var SELECTION_BOX_STYLE = {
+  boxSizing: "border-box",
+  flexShrink: 0,
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: SELECTION_BOX_SIZE,
+  height: SELECTION_BOX_SIZE,
+  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
+};
+/**
+* Selection-box colors resolved once (checked vs default). Hoisted so the
+* render callback stays under the cyclomatic-complexity limit.
+*/
+var buildSelectionBoxStyle = ({
+  c,
+  on
+}) => {
+  const text = c?.text;
+  const key = on ? "checked" : "default";
+  return {
+    ...SELECTION_BOX_STYLE,
+    backgroundColor: c?.background?.[key],
+    borderColor: c?.border?.[key],
+    color: text?.checked ?? text?.default
+  };
+};
+/**
+* The per-row selection control (a checkbox). Internal — RAC wires it to the
+* row's selection via `slot="selection"`; reads `input.primary` chrome.
+*/
+var RowSelectionControl = () => {
+  const c = _ttoss_fsl_theme_vars.vars.colors.input.primary;
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.Checkbox, {
+    slot: "selection",
+    "data-scope": "grid-list",
+    "data-part": "selectionControl",
+    style: {
+      display: "inline-flex"
+    },
+    children: ({
+      isSelected,
+      isIndeterminate
+    }) => {
+      const on = isSelected || isIndeterminate;
+      return /* @__PURE__ */(0, react_jsx_runtime.jsx)("span", {
+        "aria-hidden": true,
+        style: buildSelectionBoxStyle({
+          c,
+          on
+        }),
+        children: on && /* @__PURE__ */(0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+          intent: isIndeterminate ? "selection.indeterminate" : "selection.checked",
+          size: "sm"
+        })
+      });
+    }
+  });
+};
+/**
+* A standalone semantic grid list built on React Aria's `GridList` — rows of
+* selectable content, each with a selection checkbox.
+*
+* Per ADR-007 the CONTAINER is Entity = Collection (an `informational`
+* surface) and each `GridListItem` is Entity = Selection (`input` chrome).
+* Set `selectionMode="single|multiple"`. Use `GridListItem` per row (pass
+* `textValue` when the row content is not plain text).
+*
+* @example
+* ```tsx
+* <GridList aria-label="Files" selectionMode="multiple">
+*   <GridListItem id="a" textValue="Report">Report.pdf</GridListItem>
+*   <GridListItem id="b" textValue="Notes">Notes.txt</GridListItem>
+* </GridList>
+* ```
+*/
+var GridList = ({
+  children,
+  ...props
+}) => {
+  const surface = _ttoss_fsl_theme_vars.vars.colors.informational.primary;
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.GridList, {
+    ...props,
+    "data-scope": "grid-list",
+    "data-part": "root",
+    style: {
+      boxSizing: "border-box",
+      display: "flex",
+      flexDirection: "column",
+      gap: _ttoss_fsl_theme_vars.vars.spacing.gap.stack.xs,
+      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: surface?.border?.default ?? "transparent",
+      backgroundColor: surface?.background?.default
+    },
+    children
+  });
+};
+GridList.displayName = gridListMeta.displayName;
+/**
+* A single selectable row inside a `GridList`. Entity = Selection → reads
+* `vars.colors.input.primary.*`, renders a `selectionControl` checkbox, and
+* surfaces the `selected` State.
+*
+* @example
+* ```tsx
+* <GridListItem id="a" textValue="Report">Report.pdf</GridListItem>
+* ```
+*/
+var GridListItem = ({
+  children,
+  ...props
+}) => {
+  const c = _ttoss_fsl_theme_vars.vars.colors.input.primary;
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.GridListItem, {
+    ...props,
+    "data-scope": "grid-list",
+    "data-part": "item",
+    style: ({
+      isSelected,
+      isHovered,
+      isFocusVisible,
+      isDisabled
+    }) => {
+      return buildRowStyle({
+        c,
+        isSelected,
+        isHovered,
+        isFocusVisible,
+        isDisabled
+      });
+    },
+    children: ({
+      selectionMode
+    }) => {
+      return /* @__PURE__ */(0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, {
+        children: [selectionMode !== "none" && /* @__PURE__ */(0, react_jsx_runtime.jsx)(RowSelectionControl, {}), /* @__PURE__ */(0, react_jsx_runtime.jsx)("span", {
+          "data-scope": "grid-list",
+          "data-part": "content",
+          style: {
+            flex: 1
+          },
+          children
+        })]
+      });
+    }
+  });
+};
+GridListItem.displayName = gridListItemMeta.displayName;
+
+//#endregion
+exports.GridList = GridList;
+exports.GridListItem = GridListItem;
+exports.gridListItemMeta = gridListItemMeta;
+exports.gridListMeta = gridListMeta;