@ttoss/fsl-ui 0.2.4

package/dist/composites/TagGroup/TagGroup.mjs

@@ -0,0 +1,209 @@
+/** 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 "../../components/Icon/Icon.mjs";
+import { createCompositeScope } from "../scope.mjs";
+import { vars } from "@ttoss/fsl-theme/vars";
+import { Button, Label, Tag, TagGroup, TagList } from "react-aria-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/composites/TagGroup/TagGroup.tsx
+var tagGroupScope = createCompositeScope("TagGroup");
+/** Formal semantic identity — TagGroup root (Selection entity). */
+var tagGroupMeta = {
+  displayName: "TagGroup",
+  entity: "Selection",
+  structure: "root"
+};
+/** Formal semantic identity — Tag item (Selection entity, one of a set). */
+var tagMeta = {
+  displayName: "Tag",
+  entity: "Selection",
+  structure: "item",
+  composition: "selection"
+};
+/** Tag (item) chrome — pill that reflects the `selected` set-membership State. */
+var buildTagStyle = ({
+  c,
+  isSelected,
+  isHovered,
+  isFocusVisible,
+  isDisabled
+}) => {
+  return {
+    boxSizing: "border-box",
+    display: "inline-flex",
+    alignItems: "center",
+    gap: vars.spacing.gap.inline.xs,
+    minHeight: vars.sizing.hit.base,
+    paddingBlock: vars.spacing.inset.control.sm,
+    paddingInline: vars.spacing.inset.control.md,
+    borderRadius: vars.radii.control,
+    borderWidth: isSelected ? vars.border.outline.selected.width : vars.border.outline.control.width,
+    borderStyle: vars.border.outline.control.style,
+    cursor: isDisabled ? "not-allowed" : "pointer",
+    opacity: isDisabled ? vars.opacity.disabled : void 0,
+    ...vars.text.label.md,
+    transitionProperty: "background-color, border-color, color",
+    transitionDuration: vars.motion.feedback.duration,
+    transitionTimingFunction: vars.motion.feedback.easing,
+    backgroundColor: resolveInteractiveStyle(c?.background, {
+      isDisabled,
+      isSelected,
+      isHovered
+    }),
+    borderColor: resolveInteractiveStyle(c?.border, {
+      isDisabled,
+      isSelected,
+      isFocusVisible
+    }),
+    color: resolveInteractiveStyle(c?.text, {
+      isDisabled,
+      isSelected,
+      isHovered
+    }) ?? c?.text?.default,
+    outline: focusRingOutline(isFocusVisible)
+  };
+};
+/**
+* A semantic tag group built on React Aria's `TagGroup` — a focusable list of
+* labels, keywords, filters, or chips with keyboard navigation, optional
+* selection, and optional removal.
+*
+* Entity = Selection → reads `vars.colors.input.primary.*`. A chosen tag uses
+* the `selected` State (set membership), never `pressed`. Pass
+* `selectionMode="single|multiple"` to make tags selectable and `onRemove` to
+* make them removable.
+*
+* @example
+* ```tsx
+* <TagGroup label="Filters" selectionMode="multiple" onRemove={remove}>
+*   <Tag id="react">React</Tag>
+*   <Tag id="vue">Vue</Tag>
+* </TagGroup>
+* ```
+*/
+var TagGroup$1 = ({
+  label,
+  removeLabel = "Remove",
+  children,
+  ...props
+}) => {
+  const c = vars.colors.input.primary;
+  return /* @__PURE__ */jsx(TagGroup, {
+    ...props,
+    "data-scope": "tag-group",
+    "data-part": "root",
+    style: {
+      boxSizing: "border-box",
+      display: "flex",
+      flexDirection: "column",
+      gap: vars.spacing.gap.stack.xs
+    },
+    children: /* @__PURE__ */jsxs(tagGroupScope.Provider, {
+      value: {
+        removeLabel
+      },
+      children: [label != null && /* @__PURE__ */jsx(Label, {
+        "data-scope": "tag-group",
+        "data-part": "label",
+        style: {
+          ...vars.text.label.md,
+          color: c?.text?.default
+        },
+        children: label
+      }), /* @__PURE__ */jsx(TagList, {
+        "data-scope": "tag-group",
+        "data-part": "list",
+        style: {
+          boxSizing: "border-box",
+          display: "flex",
+          flexWrap: "wrap",
+          gap: vars.spacing.gap.inline.sm,
+          listStyle: "none",
+          margin: 0,
+          padding: 0
+        },
+        children
+      })]
+    })
+  });
+};
+TagGroup$1.displayName = tagGroupMeta.displayName;
+/**
+* A single tag inside a `TagGroup`. Reflects the `selected` State when picked
+* and renders a remove (close) affordance when the group is removable
+* (`onRemove`). Must be used inside a `TagGroup`.
+*
+* @example
+* ```tsx
+* <Tag id="react">React</Tag>
+* ```
+*/
+var Tag$1 = ({
+  children,
+  textValue,
+  ...props
+}) => {
+  const {
+    removeLabel
+  } = tagGroupScope.use(tagMeta.displayName);
+  const c = vars.colors.input.primary;
+  const resolvedTextValue = textValue ?? (typeof children === "string" ? children : void 0);
+  return /* @__PURE__ */jsx(Tag, {
+    ...props,
+    textValue: resolvedTextValue,
+    "data-scope": "tag-group",
+    "data-part": "item",
+    style: ({
+      isSelected,
+      isHovered,
+      isFocusVisible,
+      isDisabled
+    }) => {
+      return buildTagStyle({
+        c,
+        isSelected,
+        isHovered,
+        isFocusVisible,
+        isDisabled
+      });
+    },
+    children: ({
+      allowsRemoving
+    }) => {
+      return /* @__PURE__ */jsxs(Fragment, {
+        children: [/* @__PURE__ */jsx("span", {
+          "data-scope": "tag-group",
+          "data-part": "label",
+          children
+        }), allowsRemoving && /* @__PURE__ */jsx(Button, {
+          slot: "remove",
+          "data-scope": "tag-group",
+          "data-part": "closeTrigger",
+          style: {
+            boxSizing: "border-box",
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            flexShrink: 0,
+            border: 0,
+            background: "transparent",
+            cursor: "pointer",
+            padding: 0,
+            color: "inherit"
+          },
+          children: /* @__PURE__ */jsx(Icon, {
+            intent: "action.close",
+            size: "sm",
+            label: removeLabel
+          })
+        })]
+      });
+    }
+  });
+};
+Tag$1.displayName = tagMeta.displayName;
+
+//#endregion
+export { Tag$1 as Tag, TagGroup$1 as TagGroup, tagGroupMeta, tagMeta };

package/dist/composites/TextArea/TextArea.cjs

@@ -0,0 +1,190 @@
+/** 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/TextArea/TextArea.tsx
+var textAreaScope = require_scope.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 = ({
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.TextField, {
+    ...props,
+    "data-scope": "text-area",
+    "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)(textAreaScope.Provider, {
+        children: typeof children === "function" ? children(values) : children
+      });
+    }
+  });
+};
+TextArea.displayName = textAreaMeta.displayName;
+/** The label slot of a TextArea. */
+var TextAreaLabel = props => {
+  textAreaScope.use(textAreaLabelMeta.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-area",
+    "data-part": "label",
+    style: {
+      color: colors?.text?.default,
+      ..._ttoss_fsl_theme_vars.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 = _ttoss_fsl_theme_vars.vars.colors.input.primary;
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.TextArea, {
+    ...props,
+    "data-scope": "text-area",
+    "data-part": "control",
+    style: ({
+      isHovered,
+      isDisabled,
+      isFocusVisible,
+      isInvalid
+    }) => {
+      return {
+        boxSizing: "border-box",
+        resize: "vertical",
+        minBlockSize: _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
+      };
+    }
+  });
+};
+TextAreaControl.displayName = textAreaControlMeta.displayName;
+/** Helper/description text linked to the control. */
+var TextAreaDescription = props => {
+  textAreaScope.use(textAreaDescriptionMeta.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-area",
+    "data-part": "description",
+    style: {
+      color: colors?.text?.default,
+      ..._ttoss_fsl_theme_vars.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 = _ttoss_fsl_theme_vars.vars.colors.input.primary;
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.FieldError, {
+    ...props,
+    "data-scope": "text-area",
+    "data-part": "validationMessage",
+    style: {
+      color: colors?.text?.invalid ?? colors?.text?.default,
+      ..._ttoss_fsl_theme_vars.vars.text.label.sm
+    }
+  });
+};
+TextAreaError.displayName = textAreaErrorMeta.displayName;
+
+//#endregion
+exports.TextArea = TextArea;
+exports.TextAreaControl = TextAreaControl;
+exports.TextAreaDescription = TextAreaDescription;
+exports.TextAreaError = TextAreaError;
+exports.TextAreaLabel = TextAreaLabel;
+exports.textAreaControlMeta = textAreaControlMeta;
+exports.textAreaDescriptionMeta = textAreaDescriptionMeta;
+exports.textAreaErrorMeta = textAreaErrorMeta;
+exports.textAreaLabelMeta = textAreaLabelMeta;
+exports.textAreaMeta = textAreaMeta;

package/dist/composites/TextArea/TextArea.d.cts

@@ -0,0 +1,95 @@
+
+import { FieldErrorProps, LabelProps, TextAreaProps, TextFieldProps, TextProps } from "react-aria-components";
+
+//#region src/composites/TextArea/TextArea.d.ts
+/** Formal semantic identity — TextArea root (Input entity). */
+declare const textAreaMeta: {
+  readonly displayName: "TextArea";
+  readonly entity: "Input";
+  readonly structure: "root";
+};
+/** Formal semantic identity — label slot. */
+declare const textAreaLabelMeta: {
+  readonly displayName: "TextAreaLabel";
+  readonly entity: "Input";
+  readonly structure: "label";
+  readonly composition: "label";
+};
+/** Formal semantic identity — control slot (the `<textarea>`). */
+declare const textAreaControlMeta: {
+  readonly displayName: "TextAreaControl";
+  readonly entity: "Input";
+  readonly structure: "control";
+  readonly composition: "control";
+};
+/** Formal semantic identity — description slot. */
+declare const textAreaDescriptionMeta: {
+  readonly displayName: "TextAreaDescription";
+  readonly entity: "Input";
+  readonly structure: "description";
+  readonly composition: "description";
+};
+/** Formal semantic identity — status slot (validation message). */
+declare const textAreaErrorMeta: {
+  readonly displayName: "TextAreaError";
+  readonly entity: "Input";
+  readonly structure: "validationMessage";
+  readonly composition: "status";
+};
+/** Props for the TextArea root. */
+type TextAreaProps$1 = Omit<TextFieldProps, 'style' | 'className'>;
+/**
+ * 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>
+ * ```
+ */
+declare const TextArea: {
+  ({
+    children,
+    ...props
+  }: TextAreaProps$1): import("react/jsx-runtime").JSX.Element;
+  displayName: "TextArea";
+};
+/** Props for the TextArea label. */
+type TextAreaLabelProps = Omit<LabelProps, 'style' | 'className'>;
+/** The label slot of a TextArea. */
+declare const TextAreaLabel: {
+  (props: TextAreaLabelProps): import("react/jsx-runtime").JSX.Element;
+  displayName: "TextAreaLabel";
+};
+/** Props for the TextArea control. */
+type TextAreaControlProps = Omit<TextAreaProps, 'style' | 'className'>;
+/**
+ * The control slot — the actual `<textarea>`. Surfaces the `invalid` State
+ * via `vars.colors.input.primary.*`; vertical resize is enabled.
+ */
+declare const TextAreaControl: {
+  (props: TextAreaControlProps): import("react/jsx-runtime").JSX.Element;
+  displayName: "TextAreaControl";
+};
+/** Props for the TextArea description. */
+type TextAreaDescriptionProps = Omit<TextProps, 'style' | 'className' | 'slot'>;
+/** Helper/description text linked to the control. */
+declare const TextAreaDescription: {
+  (props: TextAreaDescriptionProps): import("react/jsx-runtime").JSX.Element;
+  displayName: "TextAreaDescription";
+};
+/** Props for the TextArea error. */
+type TextAreaErrorProps = Omit<FieldErrorProps, 'style' | 'className'>;
+/** Validation message — rendered by React Aria only when the field is invalid. */
+declare const TextAreaError: {
+  (props: TextAreaErrorProps): import("react/jsx-runtime").JSX.Element;
+  displayName: "TextAreaError";
+};
+//#endregion
+export { TextArea, TextAreaControl, TextAreaControlProps, TextAreaDescription, TextAreaDescriptionProps, TextAreaError, TextAreaErrorProps, TextAreaLabel, TextAreaLabelProps, TextAreaProps$1 as TextAreaProps, textAreaControlMeta, textAreaDescriptionMeta, textAreaErrorMeta, textAreaLabelMeta, textAreaMeta };

package/dist/composites/TextArea/TextArea.d.mts

@@ -0,0 +1,95 @@
+
+import { FieldErrorProps, LabelProps, TextAreaProps, TextFieldProps, TextProps } from "react-aria-components";
+
+//#region src/composites/TextArea/TextArea.d.ts
+/** Formal semantic identity — TextArea root (Input entity). */
+declare const textAreaMeta: {
+  readonly displayName: "TextArea";
+  readonly entity: "Input";
+  readonly structure: "root";
+};
+/** Formal semantic identity — label slot. */
+declare const textAreaLabelMeta: {
+  readonly displayName: "TextAreaLabel";
+  readonly entity: "Input";
+  readonly structure: "label";
+  readonly composition: "label";
+};
+/** Formal semantic identity — control slot (the `<textarea>`). */
+declare const textAreaControlMeta: {
+  readonly displayName: "TextAreaControl";
+  readonly entity: "Input";
+  readonly structure: "control";
+  readonly composition: "control";
+};
+/** Formal semantic identity — description slot. */
+declare const textAreaDescriptionMeta: {
+  readonly displayName: "TextAreaDescription";
+  readonly entity: "Input";
+  readonly structure: "description";
+  readonly composition: "description";
+};
+/** Formal semantic identity — status slot (validation message). */
+declare const textAreaErrorMeta: {
+  readonly displayName: "TextAreaError";
+  readonly entity: "Input";
+  readonly structure: "validationMessage";
+  readonly composition: "status";
+};
+/** Props for the TextArea root. */
+type TextAreaProps$1 = Omit<TextFieldProps, 'style' | 'className'>;
+/**
+ * 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>
+ * ```
+ */
+declare const TextArea$1: {
+  ({
+    children,
+    ...props
+  }: TextAreaProps$1): import("react/jsx-runtime").JSX.Element;
+  displayName: "TextArea";
+};
+/** Props for the TextArea label. */
+type TextAreaLabelProps = Omit<LabelProps, 'style' | 'className'>;
+/** The label slot of a TextArea. */
+declare const TextAreaLabel: {
+  (props: TextAreaLabelProps): import("react/jsx-runtime").JSX.Element;
+  displayName: "TextAreaLabel";
+};
+/** Props for the TextArea control. */
+type TextAreaControlProps = Omit<TextAreaProps, 'style' | 'className'>;
+/**
+ * The control slot — the actual `<textarea>`. Surfaces the `invalid` State
+ * via `vars.colors.input.primary.*`; vertical resize is enabled.
+ */
+declare const TextAreaControl: {
+  (props: TextAreaControlProps): import("react/jsx-runtime").JSX.Element;
+  displayName: "TextAreaControl";
+};
+/** Props for the TextArea description. */
+type TextAreaDescriptionProps = Omit<TextProps, 'style' | 'className' | 'slot'>;
+/** Helper/description text linked to the control. */
+declare const TextAreaDescription: {
+  (props: TextAreaDescriptionProps): import("react/jsx-runtime").JSX.Element;
+  displayName: "TextAreaDescription";
+};
+/** Props for the TextArea error. */
+type TextAreaErrorProps = Omit<FieldErrorProps, 'style' | 'className'>;
+/** Validation message — rendered by React Aria only when the field is invalid. */
+declare const TextAreaError: {
+  (props: TextAreaErrorProps): import("react/jsx-runtime").JSX.Element;
+  displayName: "TextAreaError";
+};
+//#endregion
+export { TextArea$1 as TextArea, TextAreaControl, TextAreaControlProps, TextAreaDescription, TextAreaDescriptionProps, TextAreaError, TextAreaErrorProps, TextAreaLabel, TextAreaLabelProps, TextAreaProps$1 as TextAreaProps, textAreaControlMeta, textAreaDescriptionMeta, textAreaErrorMeta, textAreaLabelMeta, textAreaMeta };