@ttoss/fsl-ui 0.2.4

package/dist/components/Select/Select.d.mts

@@ -0,0 +1,86 @@
+
+import { ListBoxItemProps, SelectProps } from "react-aria-components";
+import * as React from "react";
+
+//#region src/components/Select/Select.d.ts
+declare const selectMeta: {
+  readonly displayName: "Select";
+  readonly entity: "Selection";
+  readonly structure: "root";
+};
+declare const selectItemMeta: {
+  readonly displayName: "SelectItem";
+  readonly entity: "Selection";
+  readonly structure: "item";
+  readonly composition: "selection";
+};
+/**
+ * Props for the Select component.
+ */
+interface SelectProps$1<T extends object = object> extends Omit<SelectProps<T>, 'style' | 'children'> {
+  /** Label displayed above the trigger button. */
+  label?: React.ReactNode;
+  /**
+   * Placeholder shown in the trigger when no value is selected.
+   *
+   * Ships a documented English fallback (`'Select…'`) — the placeholder is
+   * supplementary hint text, not a flow-critical label (CONTRIBUTING §6 /
+   * ADR-001). Localized hosts should still supply their own copy.
+   * @default 'Select…'
+   */
+  placeholder?: string;
+  /** `SelectItem` children rendered inside the dropdown ListBox. */
+  children?: React.ReactNode;
+}
+/**
+ * A semantic dropdown selection built on React Aria.
+ *
+ * Composes a trigger `Button`, a floating `Popover`, and a `ListBox`.
+ * Use `SelectItem` for each option.
+ *
+ * Entity = Selection, interaction = `select.single`. Validation feedback is
+ * driven by React Aria's `isInvalid` and surfaces on the trigger via the
+ * `invalid` token State.
+ *
+ * @example
+ * ```tsx
+ * <Select label="Framework" placeholder="Choose a framework">
+ *   <SelectItem id="react">React</SelectItem>
+ *   <SelectItem id="vue">Vue</SelectItem>
+ *   <SelectItem id="angular">Angular</SelectItem>
+ * </Select>
+ * ```
+ */
+declare const Select$1: {
+  <T extends object = object>({
+    label,
+    placeholder,
+    children,
+    ...props
+  }: SelectProps$1<T>): import("react/jsx-runtime").JSX.Element;
+  displayName: "Select";
+};
+/**
+ * Props for the SelectItem component.
+ */
+type SelectItemProps = Omit<ListBoxItemProps, 'style'>;
+/**
+ * A single option inside a `Select` dropdown.
+ *
+ * Renders interactive hover/focus/selected states via
+ * `vars.colors.input.primary.*`.
+ *
+ * @example
+ * ```tsx
+ * <SelectItem id="react">React</SelectItem>
+ * ```
+ */
+declare const SelectItem: {
+  ({
+    children,
+    ...props
+  }: SelectItemProps): import("react/jsx-runtime").JSX.Element;
+  displayName: "SelectItem";
+};
+//#endregion
+export { Select$1 as Select, SelectItem, SelectItemProps, SelectProps$1 as SelectProps, selectItemMeta, selectMeta };

package/dist/components/Select/Select.mjs

@@ -0,0 +1,250 @@
+/** 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, Label, ListBox, ListBoxItem, Popover, Select, SelectValue } from "react-aria-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Select/Select.tsx
+var selectMeta = {
+  displayName: "Select",
+  entity: "Selection",
+  structure: "root"
+};
+var selectItemMeta = {
+  displayName: "SelectItem",
+  entity: "Selection",
+  structure: "item",
+  composition: "selection"
+};
+/** Trigger label color — invalid dominates default (Selection has no evaluation). */
+var resolveSelectLabelColor = ({
+  c,
+  isInvalid
+}) => {
+  const text = c?.text;
+  return isInvalid ? text?.invalid : text?.default;
+};
+/** Dropdown popover surface style — Selection-entity chrome. */
+var buildPopoverStyle = c => {
+  return {
+    boxSizing: "border-box",
+    borderRadius: vars.radii.control,
+    borderWidth: vars.border.outline.control.width,
+    borderStyle: vars.border.outline.control.style,
+    borderColor: c?.border?.default,
+    backgroundColor: c?.background?.default,
+    overflow: "hidden"
+  };
+};
+/**
+* A semantic dropdown selection built on React Aria.
+*
+* Composes a trigger `Button`, a floating `Popover`, and a `ListBox`.
+* Use `SelectItem` for each option.
+*
+* Entity = Selection, interaction = `select.single`. Validation feedback is
+* driven by React Aria's `isInvalid` and surfaces on the trigger via the
+* `invalid` token State.
+*
+* @example
+* ```tsx
+* <Select label="Framework" placeholder="Choose a framework">
+*   <SelectItem id="react">React</SelectItem>
+*   <SelectItem id="vue">Vue</SelectItem>
+*   <SelectItem id="angular">Angular</SelectItem>
+* </Select>
+* ```
+*/
+var Select$1 = ({
+  label,
+  placeholder = "Select…",
+  children,
+  ...props
+}) => {
+  const c = vars.colors.input.primary;
+  return /* @__PURE__ */jsx(Select, {
+    ...props,
+    "data-scope": "select",
+    "data-part": "root",
+    style: {
+      boxSizing: "border-box",
+      display: "inline-flex",
+      flexDirection: "column",
+      gap: vars.spacing.gap.stack.xs
+    },
+    children: ({
+      isInvalid
+    }) => {
+      return /* @__PURE__ */jsxs(Fragment, {
+        children: [label && /* @__PURE__ */jsx(Label, {
+          "data-scope": "select",
+          "data-part": "label",
+          style: {
+            ...vars.text.label.md,
+            color: resolveSelectLabelColor({
+              c,
+              isInvalid
+            })
+          },
+          children: label
+        }), /* @__PURE__ */jsxs(Button, {
+          "data-scope": "select",
+          "data-part": "trigger",
+          style: ({
+            isHovered,
+            isPressed,
+            isDisabled,
+            isFocusVisible
+          }) => {
+            return {
+              boxSizing: "border-box",
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              gap: vars.spacing.gap.inline.sm,
+              minHeight: vars.sizing.hit.base,
+              paddingBlock: vars.spacing.inset.control.md,
+              paddingInline: vars.spacing.inset.control.md,
+              borderRadius: vars.radii.control,
+              borderWidth: vars.border.outline.control.width,
+              borderStyle: vars.border.outline.control.style,
+              ...vars.text.label.md,
+              cursor: isDisabled ? "not-allowed" : "pointer",
+              opacity: isDisabled ? vars.opacity.disabled : void 0,
+              backgroundColor: resolveInteractiveStyle(c?.background, {
+                isDisabled,
+                isInvalid,
+                isHovered,
+                isPressed
+              }),
+              borderColor: resolveInteractiveStyle(c?.border, {
+                isDisabled,
+                isInvalid,
+                isFocusVisible
+              }),
+              color: resolveInteractiveStyle(c?.text, {
+                isDisabled,
+                isInvalid,
+                isHovered,
+                isPressed
+              }) ?? c?.text?.default,
+              transitionProperty: "background-color, border-color, color",
+              transitionDuration: vars.motion.feedback.duration,
+              transitionTimingFunction: vars.motion.feedback.easing,
+              outline: focusRingOutline(isFocusVisible)
+            };
+          },
+          children: [/* @__PURE__ */jsx(SelectValue, {
+            "data-scope": "select",
+            "data-part": "content",
+            style: {
+              flex: 1
+            },
+            children: ({
+              selectedText,
+              isPlaceholder
+            }) => {
+              return /* @__PURE__ */jsx("span", {
+                style: {
+                  color: isPlaceholder ? c?.text?.disabled : void 0
+                },
+                children: isPlaceholder ? placeholder : selectedText
+              });
+            }
+          }), /* @__PURE__ */jsx("span", {
+            "data-scope": "select",
+            "data-part": "icon",
+            "aria-hidden": true,
+            style: {
+              flexShrink: 0
+            },
+            children: /* @__PURE__ */jsx(Icon, {
+              intent: "disclosure.expand"
+            })
+          })]
+        }), /* @__PURE__ */jsx(Popover, {
+          "data-scope": "select",
+          "data-part": "positioner",
+          style: buildPopoverStyle(c),
+          children: /* @__PURE__ */jsx(ListBox, {
+            "data-scope": "select",
+            "data-part": "surface",
+            style: {
+              outline: "none",
+              display: "flex",
+              flexDirection: "column",
+              padding: vars.spacing.inset.control.md,
+              gap: vars.spacing.gap.stack.xs
+            },
+            children
+          })
+        })]
+      });
+    }
+  });
+};
+Select$1.displayName = selectMeta.displayName;
+/**
+* A single option inside a `Select` dropdown.
+*
+* Renders interactive hover/focus/selected states via
+* `vars.colors.input.primary.*`.
+*
+* @example
+* ```tsx
+* <SelectItem id="react">React</SelectItem>
+* ```
+*/
+var SelectItem = ({
+  children,
+  ...props
+}) => {
+  const c = vars.colors.input.primary;
+  return /* @__PURE__ */jsx(ListBoxItem, {
+    ...props,
+    "data-scope": "select",
+    "data-part": "item",
+    style: ({
+      isHovered,
+      isPressed,
+      isDisabled,
+      isFocusVisible,
+      isSelected
+    }) => {
+      return {
+        boxSizing: "border-box",
+        display: "flex",
+        alignItems: "center",
+        paddingBlock: vars.spacing.inset.control.md,
+        paddingInline: vars.spacing.inset.control.md,
+        borderRadius: vars.radii.control,
+        cursor: isDisabled ? "not-allowed" : "pointer",
+        opacity: isDisabled ? vars.opacity.disabled : void 0,
+        ...vars.text.label.md,
+        backgroundColor: resolveInteractiveStyle(c?.background, {
+          isDisabled,
+          isSelected,
+          isHovered,
+          isPressed
+        }),
+        color: resolveInteractiveStyle(c?.text, {
+          isDisabled,
+          isSelected,
+          isHovered
+        }) ?? c?.text?.default,
+        outline: focusRingOutline(isFocusVisible),
+        outlineOffset: "2px",
+        transitionProperty: "background-color, color",
+        transitionDuration: vars.motion.feedback.duration,
+        transitionTimingFunction: vars.motion.feedback.easing
+      };
+    },
+    children
+  });
+};
+SelectItem.displayName = selectItemMeta.displayName;
+
+//#endregion
+export { Select$1 as Select, SelectItem, selectItemMeta, selectMeta };

package/dist/components/Separator/Separator.cjs

@@ -0,0 +1,64 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+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/Separator/Separator.tsx
+/** Formal semantic identity — Separator root (Structure entity, divider). */
+var separatorMeta = {
+  displayName: "Separator",
+  entity: "Structure",
+  structure: "root"
+};
+/**
+* A semantic divider that separates content groups.
+*
+* Entity = Structure → reads `vars.colors.informational.*` for the line color
+* and `vars.border.divider.*` for its width/style. Non-interactive: it has no
+* hover/focus state. Orientation follows React Aria (`horizontal` default);
+* the painted edge uses logical properties so it is correct under `dir="rtl"`.
+*
+* @example
+* ```tsx
+* <Separator />
+* <Separator orientation="vertical" />
+* <Separator evaluation="primary" />
+* ```
+*/
+var Separator = ({
+  evaluation = "muted",
+  orientation = "horizontal",
+  ...props
+}) => {
+  const color = _ttoss_fsl_theme_vars.vars.colors.informational[evaluation]?.border?.default ?? "transparent";
+  const isVertical = orientation === "vertical";
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.Separator, {
+    ...props,
+    orientation,
+    "data-scope": "separator",
+    "data-part": "root",
+    "data-evaluation": evaluation,
+    style: {
+      boxSizing: "border-box",
+      margin: 0,
+      border: 0,
+      flexShrink: 0,
+      ...(isVertical ? {
+        alignSelf: "stretch",
+        borderInlineStartWidth: _ttoss_fsl_theme_vars.vars.border.divider.width,
+        borderInlineStartStyle: _ttoss_fsl_theme_vars.vars.border.divider.style,
+        borderInlineStartColor: color
+      } : {
+        width: "100%",
+        borderBlockStartWidth: _ttoss_fsl_theme_vars.vars.border.divider.width,
+        borderBlockStartStyle: _ttoss_fsl_theme_vars.vars.border.divider.style,
+        borderBlockStartColor: color
+      })
+    }
+  });
+};
+Separator.displayName = separatorMeta.displayName;
+
+//#endregion
+exports.Separator = Separator;
+exports.separatorMeta = separatorMeta;

package/dist/components/Separator/Separator.d.cts

@@ -0,0 +1,44 @@
+
+import { EvaluationsFor } from "../../semantics/taxonomy.cjs";
+import { SeparatorProps } from "react-aria-components";
+
+//#region src/components/Separator/Separator.d.ts
+/** Formal semantic identity — Separator root (Structure entity, divider). */
+declare const separatorMeta: {
+  readonly displayName: "Separator";
+  readonly entity: "Structure";
+  readonly structure: "root";
+};
+/** Props for the Separator component. */
+interface SeparatorProps$1 extends Omit<SeparatorProps, 'style'> {
+  /**
+   * Semantic emphasis of the divider line.
+   * @default 'muted'
+   */
+  evaluation?: EvaluationsFor<(typeof separatorMeta)['entity']>;
+}
+/**
+ * A semantic divider that separates content groups.
+ *
+ * Entity = Structure → reads `vars.colors.informational.*` for the line color
+ * and `vars.border.divider.*` for its width/style. Non-interactive: it has no
+ * hover/focus state. Orientation follows React Aria (`horizontal` default);
+ * the painted edge uses logical properties so it is correct under `dir="rtl"`.
+ *
+ * @example
+ * ```tsx
+ * <Separator />
+ * <Separator orientation="vertical" />
+ * <Separator evaluation="primary" />
+ * ```
+ */
+declare const Separator: {
+  ({
+    evaluation,
+    orientation,
+    ...props
+  }: SeparatorProps$1): import("react/jsx-runtime").JSX.Element;
+  displayName: "Separator";
+};
+//#endregion
+export { Separator, SeparatorProps$1 as SeparatorProps, separatorMeta };

package/dist/components/Separator/Separator.d.mts

@@ -0,0 +1,44 @@
+
+import { EvaluationsFor } from "../../semantics/taxonomy.mjs";
+import { SeparatorProps } from "react-aria-components";
+
+//#region src/components/Separator/Separator.d.ts
+/** Formal semantic identity — Separator root (Structure entity, divider). */
+declare const separatorMeta: {
+  readonly displayName: "Separator";
+  readonly entity: "Structure";
+  readonly structure: "root";
+};
+/** Props for the Separator component. */
+interface SeparatorProps$1 extends Omit<SeparatorProps, 'style'> {
+  /**
+   * Semantic emphasis of the divider line.
+   * @default 'muted'
+   */
+  evaluation?: EvaluationsFor<(typeof separatorMeta)['entity']>;
+}
+/**
+ * A semantic divider that separates content groups.
+ *
+ * Entity = Structure → reads `vars.colors.informational.*` for the line color
+ * and `vars.border.divider.*` for its width/style. Non-interactive: it has no
+ * hover/focus state. Orientation follows React Aria (`horizontal` default);
+ * the painted edge uses logical properties so it is correct under `dir="rtl"`.
+ *
+ * @example
+ * ```tsx
+ * <Separator />
+ * <Separator orientation="vertical" />
+ * <Separator evaluation="primary" />
+ * ```
+ */
+declare const Separator$1: {
+  ({
+    evaluation,
+    orientation,
+    ...props
+  }: SeparatorProps$1): import("react/jsx-runtime").JSX.Element;
+  displayName: "Separator";
+};
+//#endregion
+export { Separator$1 as Separator, SeparatorProps$1 as SeparatorProps, separatorMeta };

package/dist/components/Separator/Separator.mjs

@@ -0,0 +1,63 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { vars } from "@ttoss/fsl-theme/vars";
+import { Separator } from "react-aria-components";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Separator/Separator.tsx
+/** Formal semantic identity — Separator root (Structure entity, divider). */
+var separatorMeta = {
+  displayName: "Separator",
+  entity: "Structure",
+  structure: "root"
+};
+/**
+* A semantic divider that separates content groups.
+*
+* Entity = Structure → reads `vars.colors.informational.*` for the line color
+* and `vars.border.divider.*` for its width/style. Non-interactive: it has no
+* hover/focus state. Orientation follows React Aria (`horizontal` default);
+* the painted edge uses logical properties so it is correct under `dir="rtl"`.
+*
+* @example
+* ```tsx
+* <Separator />
+* <Separator orientation="vertical" />
+* <Separator evaluation="primary" />
+* ```
+*/
+var Separator$1 = ({
+  evaluation = "muted",
+  orientation = "horizontal",
+  ...props
+}) => {
+  const color = vars.colors.informational[evaluation]?.border?.default ?? "transparent";
+  const isVertical = orientation === "vertical";
+  return /* @__PURE__ */jsx(Separator, {
+    ...props,
+    orientation,
+    "data-scope": "separator",
+    "data-part": "root",
+    "data-evaluation": evaluation,
+    style: {
+      boxSizing: "border-box",
+      margin: 0,
+      border: 0,
+      flexShrink: 0,
+      ...(isVertical ? {
+        alignSelf: "stretch",
+        borderInlineStartWidth: vars.border.divider.width,
+        borderInlineStartStyle: vars.border.divider.style,
+        borderInlineStartColor: color
+      } : {
+        width: "100%",
+        borderBlockStartWidth: vars.border.divider.width,
+        borderBlockStartStyle: vars.border.divider.style,
+        borderBlockStartColor: color
+      })
+    }
+  });
+};
+Separator$1.displayName = separatorMeta.displayName;
+
+//#endregion
+export { Separator$1 as Separator, separatorMeta };