@ttoss/fsl-ui 0.2.4

package/dist/components/NumberField/NumberField.cjs

@@ -0,0 +1,221 @@
+/** 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/NumberField/NumberField.tsx
+/** Formal semantic identity — NumberField root (Input entity). */
+var numberFieldMeta = {
+  displayName: "NumberField",
+  entity: "Input",
+  structure: "root"
+};
+/** Control box (the `Group`) chrome — the framed field around input + steppers. */
+var buildControlBoxStyle = ({
+  c,
+  isDisabled,
+  isInvalid,
+  isFocusVisible
+}) => {
+  return {
+    boxSizing: "border-box",
+    display: "inline-flex",
+    alignItems: "center",
+    minHeight: _ttoss_fsl_theme_vars.vars.sizing.hit.base,
+    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,
+    transitionProperty: "background-color, border-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,
+      isInvalid
+    }),
+    borderColor: require_resolveInteractiveStyle.resolveInteractiveStyle(c?.border, {
+      isDisabled,
+      isInvalid,
+      isFocusVisible
+    }),
+    outline: require_focusRing.focusRingOutline(isFocusVisible)
+  };
+};
+/** Stepper button chrome — borderless Action-pattern control in Input chrome. */
+var buildStepperStyle = ({
+  c,
+  isDisabled
+}) => {
+  return {
+    boxSizing: "border-box",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    border: 0,
+    background: "transparent",
+    cursor: isDisabled ? "not-allowed" : "pointer",
+    opacity: isDisabled ? _ttoss_fsl_theme_vars.vars.opacity.disabled : void 0,
+    paddingBlock: _ttoss_fsl_theme_vars.vars.spacing.inset.control.sm,
+    paddingInline: _ttoss_fsl_theme_vars.vars.spacing.inset.control.sm,
+    color: c?.text?.default
+  };
+};
+/**
+* Resolve the field's text colors once (default for label/description/input,
+* invalid for the validation message). Hoisted out of the render so the
+* optional-chain reads keep the component's cyclomatic complexity low.
+*/
+var resolveFieldTextColors = c => {
+  const text = c?.text;
+  return {
+    base: text?.default,
+    invalid: text?.invalid ?? text?.default
+  };
+};
+/** The `<input>` itself — borderless; the surrounding `Group` owns the frame. */
+var buildInputStyle = c => {
+  return {
+    boxSizing: "border-box",
+    flex: 1,
+    minWidth: 0,
+    border: 0,
+    background: "transparent",
+    outline: "none",
+    textAlign: "center",
+    paddingBlock: _ttoss_fsl_theme_vars.vars.spacing.inset.control.sm,
+    color: c?.text?.default,
+    ..._ttoss_fsl_theme_vars.vars.text.label.md
+  };
+};
+/**
+* A semantic numeric input built on React Aria's `NumberField`.
+*
+* Renders a labelled control box (`Group`) holding the `<input>` between a
+* decrement (−) and increment (+) stepper. Entity = Input → reads
+* `vars.colors.input.primary.*`. Supports `minValue`/`maxValue`/`step` and
+* locale-aware `formatOptions` (currency, percent, units). Validation is the
+* `invalid` State (via `isInvalid`/`validate`), never an `evaluation` variant.
+*
+* @example
+* ```tsx
+* <NumberField label="Quantity" minValue={0} defaultValue={1}>
+* </NumberField>
+* <NumberField
+*   label="Price"
+*   formatOptions={{ style: 'currency', currency: 'USD' }}
+* />
+* ```
+*/
+var NumberField = ({
+  label,
+  description,
+  errorMessage,
+  decrementLabel = "Decrease",
+  incrementLabel = "Increase",
+  ...props
+}) => {
+  const c = _ttoss_fsl_theme_vars.vars.colors.input.primary;
+  const {
+    base,
+    invalid
+  } = resolveFieldTextColors(c);
+  return /* @__PURE__ */(0, react_jsx_runtime.jsxs)(react_aria_components.NumberField, {
+    ...props,
+    "data-scope": "number-field",
+    "data-part": "root",
+    style: {
+      boxSizing: "border-box",
+      display: "flex",
+      flexDirection: "column",
+      gap: _ttoss_fsl_theme_vars.vars.spacing.gap.stack.xs
+    },
+    children: [label != null && /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.Label, {
+      "data-scope": "number-field",
+      "data-part": "label",
+      style: {
+        ..._ttoss_fsl_theme_vars.vars.text.label.md,
+        color: base
+      },
+      children: label
+    }), /* @__PURE__ */(0, react_jsx_runtime.jsxs)(react_aria_components.Group, {
+      "data-scope": "number-field",
+      "data-part": "control",
+      style: ({
+        isDisabled,
+        isInvalid,
+        isFocusVisible
+      }) => {
+        return buildControlBoxStyle({
+          c,
+          isDisabled,
+          isInvalid,
+          isFocusVisible
+        });
+      },
+      children: [/* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.Button, {
+        slot: "decrement",
+        "data-scope": "number-field",
+        "data-part": "trigger",
+        style: ({
+          isDisabled
+        }) => {
+          return buildStepperStyle({
+            c,
+            isDisabled
+          });
+        },
+        children: /* @__PURE__ */(0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+          intent: "action.decrement",
+          size: "sm",
+          label: decrementLabel
+        })
+      }), /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.Input, {
+        "data-scope": "number-field",
+        "data-part": "control",
+        style: buildInputStyle(c)
+      }), /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.Button, {
+        slot: "increment",
+        "data-scope": "number-field",
+        "data-part": "trigger",
+        style: ({
+          isDisabled
+        }) => {
+          return buildStepperStyle({
+            c,
+            isDisabled
+          });
+        },
+        children: /* @__PURE__ */(0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+          intent: "action.increment",
+          size: "sm",
+          label: incrementLabel
+        })
+      })]
+    }), description != null && /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.Text, {
+      slot: "description",
+      "data-scope": "number-field",
+      "data-part": "description",
+      style: {
+        ..._ttoss_fsl_theme_vars.vars.text.label.sm,
+        color: base
+      },
+      children: description
+    }), /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.FieldError, {
+      "data-scope": "number-field",
+      "data-part": "validationMessage",
+      style: {
+        ..._ttoss_fsl_theme_vars.vars.text.label.sm,
+        color: invalid
+      },
+      children: errorMessage
+    })]
+  });
+};
+NumberField.displayName = numberFieldMeta.displayName;
+
+//#endregion
+exports.NumberField = NumberField;
+exports.numberFieldMeta = numberFieldMeta;

package/dist/components/NumberField/NumberField.d.cts

@@ -0,0 +1,68 @@
+
+import * as React from "react";
+import { NumberFieldProps } from "react-aria-components";
+
+//#region src/components/NumberField/NumberField.d.ts
+/** Formal semantic identity — NumberField root (Input entity). */
+declare const numberFieldMeta: {
+  readonly displayName: "NumberField";
+  readonly entity: "Input";
+  readonly structure: "root";
+};
+/** Props for the NumberField component. */
+interface NumberFieldProps$1 extends Omit<NumberFieldProps, 'style' | 'children' | 'className'> {
+  /** Visible label displayed above the field. */
+  label?: React.ReactNode;
+  /** Supplementary helper text linked to the field via `aria-describedby`. */
+  description?: React.ReactNode;
+  /**
+   * Validation message shown when the field is invalid. Supply
+   * caller-localized copy (i18n rule / §6).
+   */
+  errorMessage?: React.ReactNode;
+  /**
+   * Accessible name for the decrement stepper (the icon is the sole carrier of
+   * meaning). Ships a documented English fallback (supplementary AT text, not
+   * a flow-critical label — i18n rule §6.2); localized hosts override it.
+   * @default 'Decrease'
+   */
+  decrementLabel?: string;
+  /**
+   * Accessible name for the increment stepper. Documented English fallback,
+   * overridable (i18n rule §6.2).
+   * @default 'Increase'
+   */
+  incrementLabel?: string;
+}
+/**
+ * A semantic numeric input built on React Aria's `NumberField`.
+ *
+ * Renders a labelled control box (`Group`) holding the `<input>` between a
+ * decrement (−) and increment (+) stepper. Entity = Input → reads
+ * `vars.colors.input.primary.*`. Supports `minValue`/`maxValue`/`step` and
+ * locale-aware `formatOptions` (currency, percent, units). Validation is the
+ * `invalid` State (via `isInvalid`/`validate`), never an `evaluation` variant.
+ *
+ * @example
+ * ```tsx
+ * <NumberField label="Quantity" minValue={0} defaultValue={1}>
+ * </NumberField>
+ * <NumberField
+ *   label="Price"
+ *   formatOptions={{ style: 'currency', currency: 'USD' }}
+ * />
+ * ```
+ */
+declare const NumberField: {
+  ({
+    label,
+    description,
+    errorMessage,
+    decrementLabel,
+    incrementLabel,
+    ...props
+  }: NumberFieldProps$1): import("react/jsx-runtime").JSX.Element;
+  displayName: "NumberField";
+};
+//#endregion
+export { NumberField, NumberFieldProps$1 as NumberFieldProps, numberFieldMeta };

package/dist/components/NumberField/NumberField.d.mts

@@ -0,0 +1,68 @@
+
+import { NumberFieldProps } from "react-aria-components";
+import * as React from "react";
+
+//#region src/components/NumberField/NumberField.d.ts
+/** Formal semantic identity — NumberField root (Input entity). */
+declare const numberFieldMeta: {
+  readonly displayName: "NumberField";
+  readonly entity: "Input";
+  readonly structure: "root";
+};
+/** Props for the NumberField component. */
+interface NumberFieldProps$1 extends Omit<NumberFieldProps, 'style' | 'children' | 'className'> {
+  /** Visible label displayed above the field. */
+  label?: React.ReactNode;
+  /** Supplementary helper text linked to the field via `aria-describedby`. */
+  description?: React.ReactNode;
+  /**
+   * Validation message shown when the field is invalid. Supply
+   * caller-localized copy (i18n rule / §6).
+   */
+  errorMessage?: React.ReactNode;
+  /**
+   * Accessible name for the decrement stepper (the icon is the sole carrier of
+   * meaning). Ships a documented English fallback (supplementary AT text, not
+   * a flow-critical label — i18n rule §6.2); localized hosts override it.
+   * @default 'Decrease'
+   */
+  decrementLabel?: string;
+  /**
+   * Accessible name for the increment stepper. Documented English fallback,
+   * overridable (i18n rule §6.2).
+   * @default 'Increase'
+   */
+  incrementLabel?: string;
+}
+/**
+ * A semantic numeric input built on React Aria's `NumberField`.
+ *
+ * Renders a labelled control box (`Group`) holding the `<input>` between a
+ * decrement (−) and increment (+) stepper. Entity = Input → reads
+ * `vars.colors.input.primary.*`. Supports `minValue`/`maxValue`/`step` and
+ * locale-aware `formatOptions` (currency, percent, units). Validation is the
+ * `invalid` State (via `isInvalid`/`validate`), never an `evaluation` variant.
+ *
+ * @example
+ * ```tsx
+ * <NumberField label="Quantity" minValue={0} defaultValue={1}>
+ * </NumberField>
+ * <NumberField
+ *   label="Price"
+ *   formatOptions={{ style: 'currency', currency: 'USD' }}
+ * />
+ * ```
+ */
+declare const NumberField$1: {
+  ({
+    label,
+    description,
+    errorMessage,
+    decrementLabel,
+    incrementLabel,
+    ...props
+  }: NumberFieldProps$1): import("react/jsx-runtime").JSX.Element;
+  displayName: "NumberField";
+};
+//#endregion
+export { NumberField$1 as NumberField, NumberFieldProps$1 as NumberFieldProps, numberFieldMeta };

package/dist/components/NumberField/NumberField.mjs

@@ -0,0 +1,220 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { focusRingOutline } from "../../tokens/focusRing.mjs";
+import { resolveInteractiveStyle } from "../../tokens/resolveInteractiveStyle.mjs";
+import { Icon } from "../Icon/Icon.mjs";
+import { vars } from "@ttoss/fsl-theme/vars";
+import { Button, FieldError, Group, Input, Label, NumberField, Text } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/NumberField/NumberField.tsx
+/** Formal semantic identity — NumberField root (Input entity). */
+var numberFieldMeta = {
+  displayName: "NumberField",
+  entity: "Input",
+  structure: "root"
+};
+/** Control box (the `Group`) chrome — the framed field around input + steppers. */
+var buildControlBoxStyle = ({
+  c,
+  isDisabled,
+  isInvalid,
+  isFocusVisible
+}) => {
+  return {
+    boxSizing: "border-box",
+    display: "inline-flex",
+    alignItems: "center",
+    minHeight: vars.sizing.hit.base,
+    borderRadius: vars.radii.control,
+    borderWidth: vars.border.outline.control.width,
+    borderStyle: vars.border.outline.control.style,
+    transitionProperty: "background-color, border-color",
+    transitionDuration: vars.motion.feedback.duration,
+    transitionTimingFunction: vars.motion.feedback.easing,
+    backgroundColor: resolveInteractiveStyle(c?.background, {
+      isDisabled,
+      isInvalid
+    }),
+    borderColor: resolveInteractiveStyle(c?.border, {
+      isDisabled,
+      isInvalid,
+      isFocusVisible
+    }),
+    outline: focusRingOutline(isFocusVisible)
+  };
+};
+/** Stepper button chrome — borderless Action-pattern control in Input chrome. */
+var buildStepperStyle = ({
+  c,
+  isDisabled
+}) => {
+  return {
+    boxSizing: "border-box",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    border: 0,
+    background: "transparent",
+    cursor: isDisabled ? "not-allowed" : "pointer",
+    opacity: isDisabled ? vars.opacity.disabled : void 0,
+    paddingBlock: vars.spacing.inset.control.sm,
+    paddingInline: vars.spacing.inset.control.sm,
+    color: c?.text?.default
+  };
+};
+/**
+* Resolve the field's text colors once (default for label/description/input,
+* invalid for the validation message). Hoisted out of the render so the
+* optional-chain reads keep the component's cyclomatic complexity low.
+*/
+var resolveFieldTextColors = c => {
+  const text = c?.text;
+  return {
+    base: text?.default,
+    invalid: text?.invalid ?? text?.default
+  };
+};
+/** The `<input>` itself — borderless; the surrounding `Group` owns the frame. */
+var buildInputStyle = c => {
+  return {
+    boxSizing: "border-box",
+    flex: 1,
+    minWidth: 0,
+    border: 0,
+    background: "transparent",
+    outline: "none",
+    textAlign: "center",
+    paddingBlock: vars.spacing.inset.control.sm,
+    color: c?.text?.default,
+    ...vars.text.label.md
+  };
+};
+/**
+* A semantic numeric input built on React Aria's `NumberField`.
+*
+* Renders a labelled control box (`Group`) holding the `<input>` between a
+* decrement (−) and increment (+) stepper. Entity = Input → reads
+* `vars.colors.input.primary.*`. Supports `minValue`/`maxValue`/`step` and
+* locale-aware `formatOptions` (currency, percent, units). Validation is the
+* `invalid` State (via `isInvalid`/`validate`), never an `evaluation` variant.
+*
+* @example
+* ```tsx
+* <NumberField label="Quantity" minValue={0} defaultValue={1}>
+* </NumberField>
+* <NumberField
+*   label="Price"
+*   formatOptions={{ style: 'currency', currency: 'USD' }}
+* />
+* ```
+*/
+var NumberField$1 = ({
+  label,
+  description,
+  errorMessage,
+  decrementLabel = "Decrease",
+  incrementLabel = "Increase",
+  ...props
+}) => {
+  const c = vars.colors.input.primary;
+  const {
+    base,
+    invalid
+  } = resolveFieldTextColors(c);
+  return /* @__PURE__ */jsxs(NumberField, {
+    ...props,
+    "data-scope": "number-field",
+    "data-part": "root",
+    style: {
+      boxSizing: "border-box",
+      display: "flex",
+      flexDirection: "column",
+      gap: vars.spacing.gap.stack.xs
+    },
+    children: [label != null && /* @__PURE__ */jsx(Label, {
+      "data-scope": "number-field",
+      "data-part": "label",
+      style: {
+        ...vars.text.label.md,
+        color: base
+      },
+      children: label
+    }), /* @__PURE__ */jsxs(Group, {
+      "data-scope": "number-field",
+      "data-part": "control",
+      style: ({
+        isDisabled,
+        isInvalid,
+        isFocusVisible
+      }) => {
+        return buildControlBoxStyle({
+          c,
+          isDisabled,
+          isInvalid,
+          isFocusVisible
+        });
+      },
+      children: [/* @__PURE__ */jsx(Button, {
+        slot: "decrement",
+        "data-scope": "number-field",
+        "data-part": "trigger",
+        style: ({
+          isDisabled
+        }) => {
+          return buildStepperStyle({
+            c,
+            isDisabled
+          });
+        },
+        children: /* @__PURE__ */jsx(Icon, {
+          intent: "action.decrement",
+          size: "sm",
+          label: decrementLabel
+        })
+      }), /* @__PURE__ */jsx(Input, {
+        "data-scope": "number-field",
+        "data-part": "control",
+        style: buildInputStyle(c)
+      }), /* @__PURE__ */jsx(Button, {
+        slot: "increment",
+        "data-scope": "number-field",
+        "data-part": "trigger",
+        style: ({
+          isDisabled
+        }) => {
+          return buildStepperStyle({
+            c,
+            isDisabled
+          });
+        },
+        children: /* @__PURE__ */jsx(Icon, {
+          intent: "action.increment",
+          size: "sm",
+          label: incrementLabel
+        })
+      })]
+    }), description != null && /* @__PURE__ */jsx(Text, {
+      slot: "description",
+      "data-scope": "number-field",
+      "data-part": "description",
+      style: {
+        ...vars.text.label.sm,
+        color: base
+      },
+      children: description
+    }), /* @__PURE__ */jsx(FieldError, {
+      "data-scope": "number-field",
+      "data-part": "validationMessage",
+      style: {
+        ...vars.text.label.sm,
+        color: invalid
+      },
+      children: errorMessage
+    })]
+  });
+};
+NumberField$1.displayName = numberFieldMeta.displayName;
+
+//#endregion
+export { NumberField$1 as NumberField, numberFieldMeta };