@ttoss/fsl-ui 0.2.4

package/dist/composites/TextArea/TextArea.mjs

@@ -0,0 +1,181 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { focusRingOutline } from "../../tokens/focusRing.mjs";
+import { resolveInteractiveStyle } from "../../tokens/resolveInteractiveStyle.mjs";
+import { createPresenceScope } from "../scope.mjs";
+import { vars } from "@ttoss/fsl-theme/vars";
+import { FieldError, Label, Text, TextArea, TextField } from "react-aria-components";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/composites/TextArea/TextArea.tsx
+var textAreaScope = createPresenceScope("TextArea");
+/** Formal semantic identity — TextArea root (Input entity). */
+var textAreaMeta = {
+  displayName: "TextArea",
+  entity: "Input",
+  structure: "root"
+};
+/** Formal semantic identity — label slot. */
+var textAreaLabelMeta = {
+  displayName: "TextAreaLabel",
+  entity: "Input",
+  structure: "label",
+  composition: "label"
+};
+/** Formal semantic identity — control slot (the `<textarea>`). */
+var textAreaControlMeta = {
+  displayName: "TextAreaControl",
+  entity: "Input",
+  structure: "control",
+  composition: "control"
+};
+/** Formal semantic identity — description slot. */
+var textAreaDescriptionMeta = {
+  displayName: "TextAreaDescription",
+  entity: "Input",
+  structure: "description",
+  composition: "description"
+};
+/** Formal semantic identity — status slot (validation message). */
+var textAreaErrorMeta = {
+  displayName: "TextAreaError",
+  entity: "Input",
+  structure: "validationMessage",
+  composition: "status"
+};
+/**
+* A multiline text input composite (Input entity) — the multiline sibling of
+* `TextField`. Composes `TextAreaLabel`, `TextAreaControl`,
+* `TextAreaDescription`, and `TextAreaError`. Validation is driven by React
+* Aria's `isInvalid` / `validate`.
+*
+* @example
+* ```tsx
+* <TextArea isRequired>
+*   <TextAreaLabel>Notes</TextAreaLabel>
+*   <TextAreaControl rows={4} />
+*   <TextAreaError />
+* </TextArea>
+* ```
+*/
+var TextArea$1 = ({
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */jsx(TextField, {
+    ...props,
+    "data-scope": "text-area",
+    "data-part": "root",
+    style: {
+      boxSizing: "border-box",
+      display: "flex",
+      flexDirection: "column",
+      gap: vars.spacing.gap.stack.xs
+    },
+    children: values => {
+      return /* @__PURE__ */jsx(textAreaScope.Provider, {
+        children: typeof children === "function" ? children(values) : children
+      });
+    }
+  });
+};
+TextArea$1.displayName = textAreaMeta.displayName;
+/** The label slot of a TextArea. */
+var TextAreaLabel = props => {
+  textAreaScope.use(textAreaLabelMeta.displayName);
+  const colors = vars.colors.input.primary;
+  return /* @__PURE__ */jsx(Label, {
+    ...props,
+    "data-scope": "text-area",
+    "data-part": "label",
+    style: {
+      color: colors?.text?.default,
+      ...vars.text.label.md
+    }
+  });
+};
+TextAreaLabel.displayName = textAreaLabelMeta.displayName;
+/**
+* The control slot — the actual `<textarea>`. Surfaces the `invalid` State
+* via `vars.colors.input.primary.*`; vertical resize is enabled.
+*/
+var TextAreaControl = props => {
+  textAreaScope.use(textAreaControlMeta.displayName);
+  const colors = vars.colors.input.primary;
+  return /* @__PURE__ */jsx(TextArea, {
+    ...props,
+    "data-scope": "text-area",
+    "data-part": "control",
+    style: ({
+      isHovered,
+      isDisabled,
+      isFocusVisible,
+      isInvalid
+    }) => {
+      return {
+        boxSizing: "border-box",
+        resize: "vertical",
+        minBlockSize: vars.sizing.hit.base,
+        paddingBlock: vars.spacing.inset.control.sm,
+        paddingInline: vars.spacing.inset.control.md,
+        borderRadius: vars.radii.control,
+        borderWidth: vars.border.outline.control.width,
+        borderStyle: vars.border.outline.control.style,
+        transitionDuration: vars.motion.feedback.duration,
+        transitionTimingFunction: vars.motion.feedback.easing,
+        transitionProperty: "background-color, border-color, color",
+        backgroundColor: resolveInteractiveStyle(colors?.background, {
+          isHovered,
+          isDisabled,
+          isInvalid
+        }),
+        borderColor: resolveInteractiveStyle(colors?.border, {
+          isDisabled,
+          isInvalid,
+          isFocusVisible
+        }),
+        color: resolveInteractiveStyle(colors?.text, {
+          isHovered,
+          isDisabled,
+          isInvalid
+        }) ?? colors?.text?.default,
+        outline: focusRingOutline(isFocusVisible),
+        ...vars.text.label.md
+      };
+    }
+  });
+};
+TextAreaControl.displayName = textAreaControlMeta.displayName;
+/** Helper/description text linked to the control. */
+var TextAreaDescription = props => {
+  textAreaScope.use(textAreaDescriptionMeta.displayName);
+  const colors = vars.colors.input.primary;
+  return /* @__PURE__ */jsx(Text, {
+    slot: "description",
+    ...props,
+    "data-scope": "text-area",
+    "data-part": "description",
+    style: {
+      color: colors?.text?.default,
+      ...vars.text.label.sm
+    }
+  });
+};
+TextAreaDescription.displayName = textAreaDescriptionMeta.displayName;
+/** Validation message — rendered by React Aria only when the field is invalid. */
+var TextAreaError = props => {
+  textAreaScope.use(textAreaErrorMeta.displayName);
+  const colors = vars.colors.input.primary;
+  return /* @__PURE__ */jsx(FieldError, {
+    ...props,
+    "data-scope": "text-area",
+    "data-part": "validationMessage",
+    style: {
+      color: colors?.text?.invalid ?? colors?.text?.default,
+      ...vars.text.label.sm
+    }
+  });
+};
+TextAreaError.displayName = textAreaErrorMeta.displayName;
+
+//#endregion
+export { TextArea$1 as TextArea, TextAreaControl, TextAreaDescription, TextAreaError, TextAreaLabel, textAreaControlMeta, textAreaDescriptionMeta, textAreaErrorMeta, textAreaLabelMeta, textAreaMeta };

package/dist/composites/TextField/TextField.cjs

@@ -0,0 +1,200 @@
+/** 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_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/TextField/TextField.tsx
+var textFieldScope = require_scope.createPresenceScope("TextField");
+/** Formal semantic identity — TextField root (Input entity, root part). */
+var textFieldMeta = {
+  displayName: "TextField",
+  entity: "Input",
+  structure: "root"
+};
+/** Formal semantic identity — label slot. */
+var textFieldLabelMeta = {
+  displayName: "TextFieldLabel",
+  entity: "Input",
+  structure: "label",
+  composition: "label"
+};
+/** Formal semantic identity — control slot (the actual input element). */
+var textFieldControlMeta = {
+  displayName: "TextFieldControl",
+  entity: "Input",
+  structure: "control",
+  composition: "control"
+};
+/** Formal semantic identity — description slot (helper text). */
+var textFieldDescriptionMeta = {
+  displayName: "TextFieldDescription",
+  entity: "Input",
+  structure: "description",
+  composition: "description"
+};
+/** Formal semantic identity — status slot (validation message). */
+var textFieldErrorMeta = {
+  displayName: "TextFieldError",
+  entity: "Input",
+  structure: "validationMessage",
+  composition: "status"
+};
+/**
+* A semantic text input composite built on React Aria's `TextField`.
+*
+* Composes four slots: `TextFieldLabel`, `TextFieldControl`,
+* `TextFieldDescription`, and `TextFieldError`. Each sub-part carries its
+* own `ComponentMeta` with a `composition` role per FSL §4.
+*
+* Validation feedback is driven by React Aria's `isInvalid` prop or
+* `validate` callback and surfaces on the control, label, and validation
+* message via the `invalid` token State.
+*
+* @example
+* ```tsx
+* <TextField isRequired>
+*   <TextFieldLabel>Email</TextFieldLabel>
+*   <TextFieldControl type="email" />
+*   <TextFieldDescription>We never share your email.</TextFieldDescription>
+*   <TextFieldError />
+* </TextField>
+* ```
+*/
+var TextField = ({
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.TextField, {
+    ...props,
+    "data-scope": "text-field",
+    "data-part": "root",
+    style: {
+      boxSizing: "border-box",
+      display: "flex",
+      flexDirection: "column",
+      gap: _ttoss_fsl_theme_vars.vars.spacing.gap.stack.xs
+    },
+    children: values => {
+      return /* @__PURE__ */(0, react_jsx_runtime.jsx)(textFieldScope.Provider, {
+        children: typeof children === "function" ? children(values) : children
+      });
+    }
+  });
+};
+TextField.displayName = textFieldMeta.displayName;
+/** The label slot of a TextField. Wired to React Aria for a11y linkage. */
+var TextFieldLabel = props => {
+  textFieldScope.use(textFieldLabelMeta.displayName);
+  const colors = _ttoss_fsl_theme_vars.vars.colors.input.primary;
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.Label, {
+    ...props,
+    "data-scope": "text-field",
+    "data-part": "label",
+    style: {
+      color: colors?.text?.default,
+      ..._ttoss_fsl_theme_vars.vars.text.label.md
+    }
+  });
+};
+TextFieldLabel.displayName = textFieldLabelMeta.displayName;
+/**
+* The control slot of a TextField — the actual `<input>` element. Reads
+* `isInvalid` from React Aria's render-props and surfaces the `invalid`
+* State via `vars.colors.input.primary.*`.
+*/
+var TextFieldControl = props => {
+  textFieldScope.use(textFieldControlMeta.displayName);
+  const colors = _ttoss_fsl_theme_vars.vars.colors.input.primary;
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.Input, {
+    ...props,
+    "data-scope": "text-field",
+    "data-part": "control",
+    style: ({
+      isHovered,
+      isDisabled,
+      isFocusVisible,
+      isInvalid
+    }) => {
+      return {
+        boxSizing: "border-box",
+        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,
+        borderWidth: _ttoss_fsl_theme_vars.vars.border.outline.control.width,
+        borderStyle: _ttoss_fsl_theme_vars.vars.border.outline.control.style,
+        transitionDuration: _ttoss_fsl_theme_vars.vars.motion.feedback.duration,
+        transitionTimingFunction: _ttoss_fsl_theme_vars.vars.motion.feedback.easing,
+        transitionProperty: "background-color, border-color, color",
+        backgroundColor: require_resolveInteractiveStyle.resolveInteractiveStyle(colors?.background, {
+          isHovered,
+          isDisabled,
+          isInvalid
+        }),
+        borderColor: require_resolveInteractiveStyle.resolveInteractiveStyle(colors?.border, {
+          isDisabled,
+          isInvalid,
+          isFocusVisible
+        }),
+        color: require_resolveInteractiveStyle.resolveInteractiveStyle(colors?.text, {
+          isHovered,
+          isDisabled,
+          isInvalid
+        }) ?? colors?.text?.default,
+        outline: require_focusRing.focusRingOutline(isFocusVisible),
+        ..._ttoss_fsl_theme_vars.vars.text.label.md
+      };
+    }
+  });
+};
+TextFieldControl.displayName = textFieldControlMeta.displayName;
+/** Helper/description text linked to the control via React Aria's slot. */
+var TextFieldDescription = props => {
+  textFieldScope.use(textFieldDescriptionMeta.displayName);
+  const colors = _ttoss_fsl_theme_vars.vars.colors.input.primary;
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.Text, {
+    slot: "description",
+    ...props,
+    "data-scope": "text-field",
+    "data-part": "description",
+    style: {
+      color: colors?.text?.default,
+      ..._ttoss_fsl_theme_vars.vars.text.label.sm
+    }
+  });
+};
+TextFieldDescription.displayName = textFieldDescriptionMeta.displayName;
+/**
+* Validation message — rendered by React Aria only when the field is
+* invalid. Uses the `invalid` State of the canonical `input.primary`
+* subtree (mirroring the control's invalid coloring).
+*/
+var TextFieldError = props => {
+  textFieldScope.use(textFieldErrorMeta.displayName);
+  const colors = _ttoss_fsl_theme_vars.vars.colors.input.primary;
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.FieldError, {
+    ...props,
+    "data-scope": "text-field",
+    "data-part": "validationMessage",
+    style: {
+      color: colors?.text?.invalid ?? colors?.text?.default,
+      ..._ttoss_fsl_theme_vars.vars.text.label.sm
+    }
+  });
+};
+TextFieldError.displayName = textFieldErrorMeta.displayName;
+
+//#endregion
+exports.TextField = TextField;
+exports.TextFieldControl = TextFieldControl;
+exports.TextFieldDescription = TextFieldDescription;
+exports.TextFieldError = TextFieldError;
+exports.TextFieldLabel = TextFieldLabel;
+exports.textFieldControlMeta = textFieldControlMeta;
+exports.textFieldDescriptionMeta = textFieldDescriptionMeta;
+exports.textFieldErrorMeta = textFieldErrorMeta;
+exports.textFieldLabelMeta = textFieldLabelMeta;
+exports.textFieldMeta = textFieldMeta;

package/dist/composites/TextField/TextField.d.cts

@@ -0,0 +1,111 @@
+
+import { FieldErrorProps, InputProps, LabelProps, TextFieldProps, TextProps } from "react-aria-components";
+
+//#region src/composites/TextField/TextField.d.ts
+/** Formal semantic identity — TextField root (Input entity, root part). */
+declare const textFieldMeta: {
+  readonly displayName: "TextField";
+  readonly entity: "Input";
+  readonly structure: "root";
+};
+/** Formal semantic identity — label slot. */
+declare const textFieldLabelMeta: {
+  readonly displayName: "TextFieldLabel";
+  readonly entity: "Input";
+  readonly structure: "label";
+  readonly composition: "label";
+};
+/** Formal semantic identity — control slot (the actual input element). */
+declare const textFieldControlMeta: {
+  readonly displayName: "TextFieldControl";
+  readonly entity: "Input";
+  readonly structure: "control";
+  readonly composition: "control";
+};
+/** Formal semantic identity — description slot (helper text). */
+declare const textFieldDescriptionMeta: {
+  readonly displayName: "TextFieldDescription";
+  readonly entity: "Input";
+  readonly structure: "description";
+  readonly composition: "description";
+};
+/** Formal semantic identity — status slot (validation message). */
+declare const textFieldErrorMeta: {
+  readonly displayName: "TextFieldError";
+  readonly entity: "Input";
+  readonly structure: "validationMessage";
+  readonly composition: "status";
+};
+/**
+ * Props for the TextField root.
+ *
+ * The composite owns its layout; pass `style`/`className` on a wrapping
+ * element rather than on the composite root. See CONTRIBUTING §4.
+ */
+type TextFieldProps$1 = Omit<TextFieldProps, 'style' | 'className'>;
+/**
+ * A semantic text input composite built on React Aria's `TextField`.
+ *
+ * Composes four slots: `TextFieldLabel`, `TextFieldControl`,
+ * `TextFieldDescription`, and `TextFieldError`. Each sub-part carries its
+ * own `ComponentMeta` with a `composition` role per FSL §4.
+ *
+ * Validation feedback is driven by React Aria's `isInvalid` prop or
+ * `validate` callback and surfaces on the control, label, and validation
+ * message via the `invalid` token State.
+ *
+ * @example
+ * ```tsx
+ * <TextField isRequired>
+ *   <TextFieldLabel>Email</TextFieldLabel>
+ *   <TextFieldControl type="email" />
+ *   <TextFieldDescription>We never share your email.</TextFieldDescription>
+ *   <TextFieldError />
+ * </TextField>
+ * ```
+ */
+declare const TextField: {
+  ({
+    children,
+    ...props
+  }: TextFieldProps$1): import("react/jsx-runtime").JSX.Element;
+  displayName: "TextField";
+};
+/** Props for the TextField label. */
+type TextFieldLabelProps = Omit<LabelProps, 'style' | 'className'>;
+/** The label slot of a TextField. Wired to React Aria for a11y linkage. */
+declare const TextFieldLabel: {
+  (props: TextFieldLabelProps): import("react/jsx-runtime").JSX.Element;
+  displayName: "TextFieldLabel";
+};
+/** Props for the TextField control. */
+type TextFieldControlProps = Omit<InputProps, 'style' | 'className'>;
+/**
+ * The control slot of a TextField — the actual `<input>` element. Reads
+ * `isInvalid` from React Aria's render-props and surfaces the `invalid`
+ * State via `vars.colors.input.primary.*`.
+ */
+declare const TextFieldControl: {
+  (props: TextFieldControlProps): import("react/jsx-runtime").JSX.Element;
+  displayName: "TextFieldControl";
+};
+/** Props for the TextField description. */
+type TextFieldDescriptionProps = Omit<TextProps, 'style' | 'className' | 'slot'>;
+/** Helper/description text linked to the control via React Aria's slot. */
+declare const TextFieldDescription: {
+  (props: TextFieldDescriptionProps): import("react/jsx-runtime").JSX.Element;
+  displayName: "TextFieldDescription";
+};
+/** Props for the TextField error. */
+type TextFieldErrorProps = Omit<FieldErrorProps, 'style' | 'className'>;
+/**
+ * Validation message — rendered by React Aria only when the field is
+ * invalid. Uses the `invalid` State of the canonical `input.primary`
+ * subtree (mirroring the control's invalid coloring).
+ */
+declare const TextFieldError: {
+  (props: TextFieldErrorProps): import("react/jsx-runtime").JSX.Element;
+  displayName: "TextFieldError";
+};
+//#endregion
+export { TextField, TextFieldControl, TextFieldControlProps, TextFieldDescription, TextFieldDescriptionProps, TextFieldError, TextFieldErrorProps, TextFieldLabel, TextFieldLabelProps, TextFieldProps$1 as TextFieldProps, textFieldControlMeta, textFieldDescriptionMeta, textFieldErrorMeta, textFieldLabelMeta, textFieldMeta };

package/dist/composites/TextField/TextField.d.mts

@@ -0,0 +1,111 @@
+
+import { FieldErrorProps, InputProps, LabelProps, TextFieldProps, TextProps } from "react-aria-components";
+
+//#region src/composites/TextField/TextField.d.ts
+/** Formal semantic identity — TextField root (Input entity, root part). */
+declare const textFieldMeta: {
+  readonly displayName: "TextField";
+  readonly entity: "Input";
+  readonly structure: "root";
+};
+/** Formal semantic identity — label slot. */
+declare const textFieldLabelMeta: {
+  readonly displayName: "TextFieldLabel";
+  readonly entity: "Input";
+  readonly structure: "label";
+  readonly composition: "label";
+};
+/** Formal semantic identity — control slot (the actual input element). */
+declare const textFieldControlMeta: {
+  readonly displayName: "TextFieldControl";
+  readonly entity: "Input";
+  readonly structure: "control";
+  readonly composition: "control";
+};
+/** Formal semantic identity — description slot (helper text). */
+declare const textFieldDescriptionMeta: {
+  readonly displayName: "TextFieldDescription";
+  readonly entity: "Input";
+  readonly structure: "description";
+  readonly composition: "description";
+};
+/** Formal semantic identity — status slot (validation message). */
+declare const textFieldErrorMeta: {
+  readonly displayName: "TextFieldError";
+  readonly entity: "Input";
+  readonly structure: "validationMessage";
+  readonly composition: "status";
+};
+/**
+ * Props for the TextField root.
+ *
+ * The composite owns its layout; pass `style`/`className` on a wrapping
+ * element rather than on the composite root. See CONTRIBUTING §4.
+ */
+type TextFieldProps$1 = Omit<TextFieldProps, 'style' | 'className'>;
+/**
+ * A semantic text input composite built on React Aria's `TextField`.
+ *
+ * Composes four slots: `TextFieldLabel`, `TextFieldControl`,
+ * `TextFieldDescription`, and `TextFieldError`. Each sub-part carries its
+ * own `ComponentMeta` with a `composition` role per FSL §4.
+ *
+ * Validation feedback is driven by React Aria's `isInvalid` prop or
+ * `validate` callback and surfaces on the control, label, and validation
+ * message via the `invalid` token State.
+ *
+ * @example
+ * ```tsx
+ * <TextField isRequired>
+ *   <TextFieldLabel>Email</TextFieldLabel>
+ *   <TextFieldControl type="email" />
+ *   <TextFieldDescription>We never share your email.</TextFieldDescription>
+ *   <TextFieldError />
+ * </TextField>
+ * ```
+ */
+declare const TextField$1: {
+  ({
+    children,
+    ...props
+  }: TextFieldProps$1): import("react/jsx-runtime").JSX.Element;
+  displayName: "TextField";
+};
+/** Props for the TextField label. */
+type TextFieldLabelProps = Omit<LabelProps, 'style' | 'className'>;
+/** The label slot of a TextField. Wired to React Aria for a11y linkage. */
+declare const TextFieldLabel: {
+  (props: TextFieldLabelProps): import("react/jsx-runtime").JSX.Element;
+  displayName: "TextFieldLabel";
+};
+/** Props for the TextField control. */
+type TextFieldControlProps = Omit<InputProps, 'style' | 'className'>;
+/**
+ * The control slot of a TextField — the actual `<input>` element. Reads
+ * `isInvalid` from React Aria's render-props and surfaces the `invalid`
+ * State via `vars.colors.input.primary.*`.
+ */
+declare const TextFieldControl: {
+  (props: TextFieldControlProps): import("react/jsx-runtime").JSX.Element;
+  displayName: "TextFieldControl";
+};
+/** Props for the TextField description. */
+type TextFieldDescriptionProps = Omit<TextProps, 'style' | 'className' | 'slot'>;
+/** Helper/description text linked to the control via React Aria's slot. */
+declare const TextFieldDescription: {
+  (props: TextFieldDescriptionProps): import("react/jsx-runtime").JSX.Element;
+  displayName: "TextFieldDescription";
+};
+/** Props for the TextField error. */
+type TextFieldErrorProps = Omit<FieldErrorProps, 'style' | 'className'>;
+/**
+ * Validation message — rendered by React Aria only when the field is
+ * invalid. Uses the `invalid` State of the canonical `input.primary`
+ * subtree (mirroring the control's invalid coloring).
+ */
+declare const TextFieldError: {
+  (props: TextFieldErrorProps): import("react/jsx-runtime").JSX.Element;
+  displayName: "TextFieldError";
+};
+//#endregion
+export { TextField$1 as TextField, TextFieldControl, TextFieldControlProps, TextFieldDescription, TextFieldDescriptionProps, TextFieldError, TextFieldErrorProps, TextFieldLabel, TextFieldLabelProps, TextFieldProps$1 as TextFieldProps, textFieldControlMeta, textFieldDescriptionMeta, textFieldErrorMeta, textFieldLabelMeta, textFieldMeta };