@ttoss/fsl-ui 0.2.4

package/dist/composites/Form/Form.cjs

@@ -0,0 +1,161 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+const require_Button = require('../../components/Button/Button.cjs');
+const require_scope = require('../scope.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/composites/Form/Form.tsx
+var formScope = require_scope.createPresenceScope("Form");
+/**
+* Formal semantic identity — Form root (Structure entity, root part).
+*/
+var formMeta = {
+  displayName: "Form",
+  entity: "Structure",
+  structure: "root"
+};
+/**
+* A semantic form scope built on React Aria's native `Form`.
+*
+* Coordinates nested Input / Selection / Action parts around a single
+* submission and validation contract. Field-level `State.invalid` is driven
+* by React Aria's `validationErrors` propagation — this component adds no
+* state machinery of its own.
+*
+* Entity = Structure. The root is visually transparent — only
+* `vars.spacing.gap.stack.md` between children. No color tokens are read
+* here; chrome lives on the nested input / action parts.
+*
+* @example
+* ```tsx
+* <Form onSubmit={(e) => { e.preventDefault(); … }}>
+*   <TextField name="email" isRequired>
+*     <TextFieldLabel>Email</TextFieldLabel>
+*     <TextFieldControl type="email" />
+*     <TextFieldError />
+*   </TextField>
+*   <FormActions>
+*     <Button type="reset" evaluation="muted">Reset</Button>
+*     <FormSubmit>Save</FormSubmit>
+*   </FormActions>
+* </Form>
+* ```
+*/
+var Form = ({
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(formScope.Provider, {
+    children: /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.Form, {
+      ...props,
+      "data-scope": "form",
+      "data-part": "root",
+      style: {
+        boxSizing: "border-box",
+        display: "flex",
+        flexDirection: "column",
+        gap: _ttoss_fsl_theme_vars.vars.spacing.gap.stack.md,
+        ..._ttoss_fsl_theme_vars.vars.text.label.md
+      },
+      children
+    })
+  });
+};
+Form.displayName = formMeta.displayName;
+/**
+* Formal semantic identity — supporting action row slot within a Form.
+*/
+var formActionsMeta = {
+  displayName: "FormActions",
+  entity: "Structure",
+  structure: "actions",
+  composition: "supporting"
+};
+var justifyMap = {
+  start: "flex-start",
+  end: "flex-end",
+  between: "space-between"
+};
+/**
+* A horizontal row for a Form's action buttons (submit, cancel, reset).
+*
+* The `composition: 'supporting'` slot tags this row as supplementary to
+* the Form's primary input content — host CSS or future composites may
+* target `[data-composition="supporting"]` for layout variants.
+*/
+var FormActions = ({
+  align = "end",
+  children,
+  ...props
+}) => {
+  formScope.use(formActionsMeta.displayName);
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)("div", {
+    ...props,
+    "data-scope": "form",
+    "data-part": "actions",
+    "data-composition": "supporting",
+    style: {
+      boxSizing: "border-box",
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: justifyMap[align],
+      gap: _ttoss_fsl_theme_vars.vars.spacing.gap.inline.md,
+      marginBlockStart: _ttoss_fsl_theme_vars.vars.spacing.gap.stack.sm
+    },
+    children
+  });
+};
+FormActions.displayName = formActionsMeta.displayName;
+/**
+* Formal semantic identity — the primary commit action inside a Form.
+*/
+var formSubmitMeta = {
+  displayName: "FormSubmit",
+  entity: "Action",
+  structure: "root",
+  composition: "primaryAction"
+};
+/**
+* The primary commit button inside a {@link Form}.
+*
+* A thin wrapper around {@link Button} that fixes `type="submit"` and
+* reassigns defaults so the commit-happy path is free of boilerplate:
+* `consequence="committing"` (second real Consequence callsite with a
+* value distinct from `MenuItem`'s typical `destructive` / `neutral`) and
+* `composition="primaryAction"` (advertises the slot to host layout CSS).
+*
+* Visual styling is inherited from `Button`; FormSubmit adds no chrome.
+* The only extra DOM signal it layers on is `data-composition` and
+* `data-pending` when `isPending` is true.
+*
+* Entity = Action → same token row as `Button` (`vars.colors.action.*`).
+*/
+var FormSubmit = ({
+  consequence = "committing",
+  composition = "primaryAction",
+  isPending = false,
+  isDisabled,
+  ...props
+}) => {
+  formScope.use(formSubmitMeta.displayName);
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(require_Button.Button, {
+    ...props,
+    type: "submit",
+    "data-scope": "form-submit",
+    consequence,
+    isDisabled: isDisabled ?? isPending,
+    "data-composition": composition,
+    "data-pending": isPending || void 0
+  });
+};
+FormSubmit.displayName = formSubmitMeta.displayName;
+
+//#endregion
+exports.Form = Form;
+exports.FormActions = FormActions;
+exports.FormSubmit = FormSubmit;
+exports.formActionsMeta = formActionsMeta;
+exports.formMeta = formMeta;
+exports.formSubmitMeta = formSubmitMeta;

package/dist/composites/Form/Form.d.cts

@@ -0,0 +1,176 @@
+
+import { CompositionsFor, ConsequencesFor } from "../../semantics/taxonomy.cjs";
+import { ButtonProps as ButtonProps$1 } from "../../components/Button/Button.cjs";
+import * as React from "react";
+import { FormProps } from "react-aria-components";
+
+//#region src/composites/Form/Form.d.ts
+/**
+ * Formal semantic identity — Form root (Structure entity, root part).
+ */
+declare const formMeta: {
+  readonly displayName: "Form";
+  readonly entity: "Structure";
+  readonly structure: "root";
+};
+/**
+ * Props for the Form component.
+ *
+ * The Form root carries no `evaluation` prop: under the evidence rule
+ * (CONTRIBUTING §2.3) a dimension only appears on a component if a runtime
+ * dispatches on it. The Form root is visually transparent — colors,
+ * spacing of authorial emphasis live on the nested Input / Action parts —
+ * so adding `evaluation` here would be reserving API surface for a
+ * speculative future consumer. Re-introduce it the day a real consumer
+ * (e.g. background card chrome) needs it.
+ *
+ * The composite owns its layout; pass `style`/`className` on a wrapping
+ * element rather than on the composite root. See CONTRIBUTING §4.
+ */
+interface FormProps$1 extends Omit<FormProps, 'style' | 'className'> {
+  /**
+   * Form content — typically TextField / Select / Checkbox / RadioGroup
+   * composites plus a {@link FormActions} row at the end.
+   */
+  children?: React.ReactNode;
+}
+/**
+ * A semantic form scope built on React Aria's native `Form`.
+ *
+ * Coordinates nested Input / Selection / Action parts around a single
+ * submission and validation contract. Field-level `State.invalid` is driven
+ * by React Aria's `validationErrors` propagation — this component adds no
+ * state machinery of its own.
+ *
+ * Entity = Structure. The root is visually transparent — only
+ * `vars.spacing.gap.stack.md` between children. No color tokens are read
+ * here; chrome lives on the nested input / action parts.
+ *
+ * @example
+ * ```tsx
+ * <Form onSubmit={(e) => { e.preventDefault(); … }}>
+ *   <TextField name="email" isRequired>
+ *     <TextFieldLabel>Email</TextFieldLabel>
+ *     <TextFieldControl type="email" />
+ *     <TextFieldError />
+ *   </TextField>
+ *   <FormActions>
+ *     <Button type="reset" evaluation="muted">Reset</Button>
+ *     <FormSubmit>Save</FormSubmit>
+ *   </FormActions>
+ * </Form>
+ * ```
+ */
+declare const Form: {
+  ({
+    children,
+    ...props
+  }: FormProps$1): import("react/jsx-runtime").JSX.Element;
+  displayName: "Form";
+};
+/**
+ * Formal semantic identity — supporting action row slot within a Form.
+ */
+declare const formActionsMeta: {
+  readonly displayName: "FormActions";
+  readonly entity: "Structure";
+  readonly structure: "actions";
+  readonly composition: "supporting";
+};
+/**
+ * Props for the FormActions component.
+ */
+interface FormActionsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style' | 'className'> {
+  /**
+   * Alignment of the action row. Defaults to end-alignment which matches
+   * the platform convention for submit-on-the-right layouts.
+   * @default 'end'
+   */
+  align?: 'start' | 'end' | 'between';
+  /**
+   * Action buttons — typically a {@link FormSubmit} plus optional reset /
+   * cancel Buttons.
+   */
+  children?: React.ReactNode;
+}
+/**
+ * A horizontal row for a Form's action buttons (submit, cancel, reset).
+ *
+ * The `composition: 'supporting'` slot tags this row as supplementary to
+ * the Form's primary input content — host CSS or future composites may
+ * target `[data-composition="supporting"]` for layout variants.
+ */
+declare const FormActions: {
+  ({
+    align,
+    children,
+    ...props
+  }: FormActionsProps): import("react/jsx-runtime").JSX.Element;
+  displayName: "FormActions";
+};
+/**
+ * Formal semantic identity — the primary commit action inside a Form.
+ */
+declare const formSubmitMeta: {
+  readonly displayName: "FormSubmit";
+  readonly entity: "Action";
+  readonly structure: "root";
+  readonly composition: "primaryAction";
+};
+/**
+ * Props for the FormSubmit component.
+ *
+ * Wraps {@link Button} — inherits every Button prop except `type` (always
+ * `"submit"`) and reassigns semantic defaults. `consequence`, `composition`,
+ * and `isPending` are surfaced explicitly because their defaults differ
+ * from Button's.
+ */
+interface FormSubmitProps extends Omit<ButtonProps$1, 'type'> {
+  /**
+   * Effect on state. Emitted as `data-consequence`; not used for coloring
+   * (visual distinction, if any, is a theme / host-CSS concern — same
+   * contract as `MenuItem`).
+   * @default 'committing'
+   */
+  consequence?: ConsequencesFor<(typeof formSubmitMeta)['entity']>;
+  /**
+   * Composition slot within the Form. Emitted as `data-composition` for
+   * host CSS / tests / future composites.
+   * @default 'primaryAction'
+   */
+  composition?: CompositionsFor<(typeof formSubmitMeta)['entity']>;
+  /**
+   * Whether the form is currently submitting. When true, the button is
+   * disabled to prevent double-submit and emits `data-pending` for host
+   * CSS (spinner, skeleton). Host-controlled — fsl-ui does not own the
+   * submission lifecycle.
+   */
+  isPending?: boolean;
+}
+/**
+ * The primary commit button inside a {@link Form}.
+ *
+ * A thin wrapper around {@link Button} that fixes `type="submit"` and
+ * reassigns defaults so the commit-happy path is free of boilerplate:
+ * `consequence="committing"` (second real Consequence callsite with a
+ * value distinct from `MenuItem`'s typical `destructive` / `neutral`) and
+ * `composition="primaryAction"` (advertises the slot to host layout CSS).
+ *
+ * Visual styling is inherited from `Button`; FormSubmit adds no chrome.
+ * The only extra DOM signal it layers on is `data-composition` and
+ * `data-pending` when `isPending` is true.
+ *
+ * Entity = Action → same token row as `Button` (`vars.colors.action.*`).
+ */
+declare const FormSubmit: {
+  ({
+    consequence,
+    composition,
+    isPending,
+    isDisabled,
+    ...props
+  }: FormSubmitProps): import("react/jsx-runtime").JSX.Element;
+  displayName: "FormSubmit";
+};
+//#endregion
+export { Form, FormActions, FormActionsProps, FormProps$1 as FormProps, FormSubmit, FormSubmitProps, formActionsMeta, formMeta, formSubmitMeta };

package/dist/composites/Form/Form.d.mts

@@ -0,0 +1,176 @@
+
+import { CompositionsFor, ConsequencesFor } from "../../semantics/taxonomy.mjs";
+import { ButtonProps as ButtonProps$1 } from "../../components/Button/Button.mjs";
+import { FormProps } from "react-aria-components";
+import * as React from "react";
+
+//#region src/composites/Form/Form.d.ts
+/**
+ * Formal semantic identity — Form root (Structure entity, root part).
+ */
+declare const formMeta: {
+  readonly displayName: "Form";
+  readonly entity: "Structure";
+  readonly structure: "root";
+};
+/**
+ * Props for the Form component.
+ *
+ * The Form root carries no `evaluation` prop: under the evidence rule
+ * (CONTRIBUTING §2.3) a dimension only appears on a component if a runtime
+ * dispatches on it. The Form root is visually transparent — colors,
+ * spacing of authorial emphasis live on the nested Input / Action parts —
+ * so adding `evaluation` here would be reserving API surface for a
+ * speculative future consumer. Re-introduce it the day a real consumer
+ * (e.g. background card chrome) needs it.
+ *
+ * The composite owns its layout; pass `style`/`className` on a wrapping
+ * element rather than on the composite root. See CONTRIBUTING §4.
+ */
+interface FormProps$1 extends Omit<FormProps, 'style' | 'className'> {
+  /**
+   * Form content — typically TextField / Select / Checkbox / RadioGroup
+   * composites plus a {@link FormActions} row at the end.
+   */
+  children?: React.ReactNode;
+}
+/**
+ * A semantic form scope built on React Aria's native `Form`.
+ *
+ * Coordinates nested Input / Selection / Action parts around a single
+ * submission and validation contract. Field-level `State.invalid` is driven
+ * by React Aria's `validationErrors` propagation — this component adds no
+ * state machinery of its own.
+ *
+ * Entity = Structure. The root is visually transparent — only
+ * `vars.spacing.gap.stack.md` between children. No color tokens are read
+ * here; chrome lives on the nested input / action parts.
+ *
+ * @example
+ * ```tsx
+ * <Form onSubmit={(e) => { e.preventDefault(); … }}>
+ *   <TextField name="email" isRequired>
+ *     <TextFieldLabel>Email</TextFieldLabel>
+ *     <TextFieldControl type="email" />
+ *     <TextFieldError />
+ *   </TextField>
+ *   <FormActions>
+ *     <Button type="reset" evaluation="muted">Reset</Button>
+ *     <FormSubmit>Save</FormSubmit>
+ *   </FormActions>
+ * </Form>
+ * ```
+ */
+declare const Form$1: {
+  ({
+    children,
+    ...props
+  }: FormProps$1): import("react/jsx-runtime").JSX.Element;
+  displayName: "Form";
+};
+/**
+ * Formal semantic identity — supporting action row slot within a Form.
+ */
+declare const formActionsMeta: {
+  readonly displayName: "FormActions";
+  readonly entity: "Structure";
+  readonly structure: "actions";
+  readonly composition: "supporting";
+};
+/**
+ * Props for the FormActions component.
+ */
+interface FormActionsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style' | 'className'> {
+  /**
+   * Alignment of the action row. Defaults to end-alignment which matches
+   * the platform convention for submit-on-the-right layouts.
+   * @default 'end'
+   */
+  align?: 'start' | 'end' | 'between';
+  /**
+   * Action buttons — typically a {@link FormSubmit} plus optional reset /
+   * cancel Buttons.
+   */
+  children?: React.ReactNode;
+}
+/**
+ * A horizontal row for a Form's action buttons (submit, cancel, reset).
+ *
+ * The `composition: 'supporting'` slot tags this row as supplementary to
+ * the Form's primary input content — host CSS or future composites may
+ * target `[data-composition="supporting"]` for layout variants.
+ */
+declare const FormActions: {
+  ({
+    align,
+    children,
+    ...props
+  }: FormActionsProps): import("react/jsx-runtime").JSX.Element;
+  displayName: "FormActions";
+};
+/**
+ * Formal semantic identity — the primary commit action inside a Form.
+ */
+declare const formSubmitMeta: {
+  readonly displayName: "FormSubmit";
+  readonly entity: "Action";
+  readonly structure: "root";
+  readonly composition: "primaryAction";
+};
+/**
+ * Props for the FormSubmit component.
+ *
+ * Wraps {@link Button} — inherits every Button prop except `type` (always
+ * `"submit"`) and reassigns semantic defaults. `consequence`, `composition`,
+ * and `isPending` are surfaced explicitly because their defaults differ
+ * from Button's.
+ */
+interface FormSubmitProps extends Omit<ButtonProps$1, 'type'> {
+  /**
+   * Effect on state. Emitted as `data-consequence`; not used for coloring
+   * (visual distinction, if any, is a theme / host-CSS concern — same
+   * contract as `MenuItem`).
+   * @default 'committing'
+   */
+  consequence?: ConsequencesFor<(typeof formSubmitMeta)['entity']>;
+  /**
+   * Composition slot within the Form. Emitted as `data-composition` for
+   * host CSS / tests / future composites.
+   * @default 'primaryAction'
+   */
+  composition?: CompositionsFor<(typeof formSubmitMeta)['entity']>;
+  /**
+   * Whether the form is currently submitting. When true, the button is
+   * disabled to prevent double-submit and emits `data-pending` for host
+   * CSS (spinner, skeleton). Host-controlled — fsl-ui does not own the
+   * submission lifecycle.
+   */
+  isPending?: boolean;
+}
+/**
+ * The primary commit button inside a {@link Form}.
+ *
+ * A thin wrapper around {@link Button} that fixes `type="submit"` and
+ * reassigns defaults so the commit-happy path is free of boilerplate:
+ * `consequence="committing"` (second real Consequence callsite with a
+ * value distinct from `MenuItem`'s typical `destructive` / `neutral`) and
+ * `composition="primaryAction"` (advertises the slot to host layout CSS).
+ *
+ * Visual styling is inherited from `Button`; FormSubmit adds no chrome.
+ * The only extra DOM signal it layers on is `data-composition` and
+ * `data-pending` when `isPending` is true.
+ *
+ * Entity = Action → same token row as `Button` (`vars.colors.action.*`).
+ */
+declare const FormSubmit: {
+  ({
+    consequence,
+    composition,
+    isPending,
+    isDisabled,
+    ...props
+  }: FormSubmitProps): import("react/jsx-runtime").JSX.Element;
+  displayName: "FormSubmit";
+};
+//#endregion
+export { Form$1 as Form, FormActions, FormActionsProps, FormProps$1 as FormProps, FormSubmit, FormSubmitProps, formActionsMeta, formMeta, formSubmitMeta };

package/dist/composites/Form/Form.mjs

@@ -0,0 +1,156 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { Button as Button$1 } from "../../components/Button/Button.mjs";
+import { createPresenceScope } from "../scope.mjs";
+import { vars } from "@ttoss/fsl-theme/vars";
+import { Form } from "react-aria-components";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/composites/Form/Form.tsx
+var formScope = createPresenceScope("Form");
+/**
+* Formal semantic identity — Form root (Structure entity, root part).
+*/
+var formMeta = {
+  displayName: "Form",
+  entity: "Structure",
+  structure: "root"
+};
+/**
+* A semantic form scope built on React Aria's native `Form`.
+*
+* Coordinates nested Input / Selection / Action parts around a single
+* submission and validation contract. Field-level `State.invalid` is driven
+* by React Aria's `validationErrors` propagation — this component adds no
+* state machinery of its own.
+*
+* Entity = Structure. The root is visually transparent — only
+* `vars.spacing.gap.stack.md` between children. No color tokens are read
+* here; chrome lives on the nested input / action parts.
+*
+* @example
+* ```tsx
+* <Form onSubmit={(e) => { e.preventDefault(); … }}>
+*   <TextField name="email" isRequired>
+*     <TextFieldLabel>Email</TextFieldLabel>
+*     <TextFieldControl type="email" />
+*     <TextFieldError />
+*   </TextField>
+*   <FormActions>
+*     <Button type="reset" evaluation="muted">Reset</Button>
+*     <FormSubmit>Save</FormSubmit>
+*   </FormActions>
+* </Form>
+* ```
+*/
+var Form$1 = ({
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */jsx(formScope.Provider, {
+    children: /* @__PURE__ */jsx(Form, {
+      ...props,
+      "data-scope": "form",
+      "data-part": "root",
+      style: {
+        boxSizing: "border-box",
+        display: "flex",
+        flexDirection: "column",
+        gap: vars.spacing.gap.stack.md,
+        ...vars.text.label.md
+      },
+      children
+    })
+  });
+};
+Form$1.displayName = formMeta.displayName;
+/**
+* Formal semantic identity — supporting action row slot within a Form.
+*/
+var formActionsMeta = {
+  displayName: "FormActions",
+  entity: "Structure",
+  structure: "actions",
+  composition: "supporting"
+};
+var justifyMap = {
+  start: "flex-start",
+  end: "flex-end",
+  between: "space-between"
+};
+/**
+* A horizontal row for a Form's action buttons (submit, cancel, reset).
+*
+* The `composition: 'supporting'` slot tags this row as supplementary to
+* the Form's primary input content — host CSS or future composites may
+* target `[data-composition="supporting"]` for layout variants.
+*/
+var FormActions = ({
+  align = "end",
+  children,
+  ...props
+}) => {
+  formScope.use(formActionsMeta.displayName);
+  return /* @__PURE__ */jsx("div", {
+    ...props,
+    "data-scope": "form",
+    "data-part": "actions",
+    "data-composition": "supporting",
+    style: {
+      boxSizing: "border-box",
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: justifyMap[align],
+      gap: vars.spacing.gap.inline.md,
+      marginBlockStart: vars.spacing.gap.stack.sm
+    },
+    children
+  });
+};
+FormActions.displayName = formActionsMeta.displayName;
+/**
+* Formal semantic identity — the primary commit action inside a Form.
+*/
+var formSubmitMeta = {
+  displayName: "FormSubmit",
+  entity: "Action",
+  structure: "root",
+  composition: "primaryAction"
+};
+/**
+* The primary commit button inside a {@link Form}.
+*
+* A thin wrapper around {@link Button} that fixes `type="submit"` and
+* reassigns defaults so the commit-happy path is free of boilerplate:
+* `consequence="committing"` (second real Consequence callsite with a
+* value distinct from `MenuItem`'s typical `destructive` / `neutral`) and
+* `composition="primaryAction"` (advertises the slot to host layout CSS).
+*
+* Visual styling is inherited from `Button`; FormSubmit adds no chrome.
+* The only extra DOM signal it layers on is `data-composition` and
+* `data-pending` when `isPending` is true.
+*
+* Entity = Action → same token row as `Button` (`vars.colors.action.*`).
+*/
+var FormSubmit = ({
+  consequence = "committing",
+  composition = "primaryAction",
+  isPending = false,
+  isDisabled,
+  ...props
+}) => {
+  formScope.use(formSubmitMeta.displayName);
+  return /* @__PURE__ */jsx(Button$1, {
+    ...props,
+    type: "submit",
+    "data-scope": "form-submit",
+    consequence,
+    isDisabled: isDisabled ?? isPending,
+    "data-composition": composition,
+    "data-pending": isPending || void 0
+  });
+};
+FormSubmit.displayName = formSubmitMeta.displayName;
+
+//#endregion
+export { Form$1 as Form, FormActions, FormSubmit, formActionsMeta, formMeta, formSubmitMeta };