@ttoss/fsl-ui 0.2.4

package/dist/components/ListBox/ListBox.mjs

@@ -0,0 +1,123 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { focusRingOutline } from "../../tokens/focusRing.mjs";
+import { resolveInteractiveStyle } from "../../tokens/resolveInteractiveStyle.mjs";
+import { vars } from "@ttoss/fsl-theme/vars";
+import { ListBox, ListBoxItem } from "react-aria-components";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/ListBox/ListBox.tsx
+/** Formal semantic identity — ListBox root (Collection entity, surface). */
+var listBoxMeta = {
+  displayName: "ListBox",
+  entity: "Collection",
+  structure: "root"
+};
+/** Formal semantic identity — ListBoxItem (Selection entity, one of a set). */
+var listBoxItemMeta = {
+  displayName: "ListBoxItem",
+  entity: "Selection",
+  structure: "item",
+  composition: "selection"
+};
+/**
+* A standalone semantic list box built on React Aria's `ListBox` — a
+* selectable list of options.
+*
+* Per ADR-007 the CONTAINER is Entity = Collection (an `informational`
+* surface) and each `ListBoxItem` is Entity = Selection (`input` chrome). Set
+* `selectionMode="single|multiple"`. Use `ListBoxItem` for each option.
+*
+* @example
+* ```tsx
+* <ListBox aria-label="Frameworks" selectionMode="multiple">
+*   <ListBoxItem id="react">React</ListBoxItem>
+*   <ListBoxItem id="vue">Vue</ListBoxItem>
+* </ListBox>
+* ```
+*/
+var ListBox$1 = ({
+  children,
+  ...props
+}) => {
+  const surface = vars.colors.informational.primary;
+  return /* @__PURE__ */jsx(ListBox, {
+    ...props,
+    "data-scope": "list-box",
+    "data-part": "root",
+    style: {
+      boxSizing: "border-box",
+      display: "flex",
+      flexDirection: "column",
+      gap: vars.spacing.gap.stack.xs,
+      padding: vars.spacing.inset.surface.sm,
+      borderRadius: vars.radii.surface,
+      borderWidth: vars.border.outline.surface.width,
+      borderStyle: vars.border.outline.surface.style,
+      borderColor: surface?.border?.default ?? "transparent",
+      backgroundColor: surface?.background?.default
+    },
+    children
+  });
+};
+ListBox$1.displayName = listBoxMeta.displayName;
+/**
+* A single option inside a `ListBox`. Entity = Selection → reads
+* `vars.colors.input.primary.*` and surfaces the `selected` State (set
+* membership) — the same chrome as `SelectItem`.
+*
+* @example
+* ```tsx
+* <ListBoxItem id="react">React</ListBoxItem>
+* ```
+*/
+var ListBoxItem$1 = ({
+  children,
+  ...props
+}) => {
+  const c = vars.colors.input.primary;
+  return /* @__PURE__ */jsx(ListBoxItem, {
+    ...props,
+    "data-scope": "list-box",
+    "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
+  });
+};
+ListBoxItem$1.displayName = listBoxItemMeta.displayName;
+
+//#endregion
+export { ListBox$1 as ListBox, ListBoxItem$1 as ListBoxItem, listBoxItemMeta, listBoxMeta };

package/dist/components/Meter/Meter.cjs

@@ -0,0 +1,126 @@
+/** 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/Meter/Meter.tsx
+/** Formal semantic identity — Meter root (Feedback entity). */
+var meterMeta = {
+  displayName: "Meter",
+  entity: "Feedback",
+  structure: "root"
+};
+/** Track (body) style — the empty rail the fill sits in. */
+var buildTrackStyle = c => {
+  return {
+    position: "relative",
+    overflow: "hidden",
+    width: "100%",
+    height: _ttoss_fsl_theme_vars.vars.spacing.gap.stack.sm,
+    backgroundColor: c?.background?.default,
+    borderRadius: _ttoss_fsl_theme_vars.vars.radii.control,
+    borderWidth: _ttoss_fsl_theme_vars.vars.border.outline.surface.width,
+    borderStyle: _ttoss_fsl_theme_vars.vars.border.outline.surface.style,
+    borderColor: c?.border?.default
+  };
+};
+/** Fill (content) style — width tracks the value's percentage of the range. */
+var buildFillStyle = ({
+  c,
+  percentage
+}) => {
+  return {
+    height: "100%",
+    width: `${percentage}%`,
+    backgroundColor: c?.border?.default,
+    borderRadius: "inherit",
+    transitionProperty: "width",
+    transitionDuration: _ttoss_fsl_theme_vars.vars.motion.transition.enter.duration,
+    transitionTimingFunction: _ttoss_fsl_theme_vars.vars.motion.transition.enter.easing
+  };
+};
+/**
+* A semantic meter built on React Aria's `Meter` — a static quantity within a
+* known range (`role="meter"`).
+*
+* Reads from `vars.colors.feedback.{primary|positive|caution|negative}` and
+* uses `vars.radii.control` for the track. Unlike `ProgressBar` (which
+* communicates an operation *in progress* and supports an indeterminate
+* mode), `Meter` displays a **fixed measurement the user reads** — battery,
+* disk usage, rate limit remaining. Pick `Meter` when the number is a state,
+* `ProgressBar` when it is a task advancing.
+*
+* Provide an accessible name via `aria-label` (or `aria-labelledby`) — the
+* visible `label` is display text and does not itself name the meter.
+*
+* @example
+* ```tsx
+* <Meter aria-label="Storage" label="Storage used" value={82} evaluation="caution" />
+* <Meter aria-label="Battery" value={12} evaluation="negative" />
+* ```
+*/
+var Meter = ({
+  evaluation = "primary",
+  label,
+  showValueLabel = true,
+  ...props
+}) => {
+  const c = _ttoss_fsl_theme_vars.vars.colors.feedback[evaluation];
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.Meter, {
+    ...props,
+    "data-scope": "meter",
+    "data-part": "root",
+    "data-evaluation": evaluation,
+    style: {
+      boxSizing: "border-box",
+      display: "flex",
+      flexDirection: "column",
+      gap: _ttoss_fsl_theme_vars.vars.spacing.gap.stack.xs
+    },
+    children: ({
+      percentage,
+      valueText
+    }) => {
+      return /* @__PURE__ */(0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, {
+        children: [(label || showValueLabel) && /* @__PURE__ */(0, react_jsx_runtime.jsxs)("div", {
+          "data-scope": "meter",
+          "data-part": "labelRow",
+          style: {
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "baseline",
+            color: c?.text?.default,
+            ..._ttoss_fsl_theme_vars.vars.text.label.md
+          },
+          children: [/* @__PURE__ */(0, react_jsx_runtime.jsx)("span", {
+            "data-scope": "meter",
+            "data-part": "title",
+            children: label
+          }), showValueLabel && /* @__PURE__ */(0, react_jsx_runtime.jsx)("span", {
+            "data-scope": "meter",
+            "data-part": "status",
+            "aria-hidden": true,
+            children: valueText ?? `${Math.round(percentage)}%`
+          })]
+        }), /* @__PURE__ */(0, react_jsx_runtime.jsx)("div", {
+          "data-scope": "meter",
+          "data-part": "body",
+          style: buildTrackStyle(c),
+          children: /* @__PURE__ */(0, react_jsx_runtime.jsx)("div", {
+            "data-scope": "meter",
+            "data-part": "content",
+            style: buildFillStyle({
+              c,
+              percentage
+            })
+          })
+        })]
+      });
+    }
+  });
+};
+Meter.displayName = meterMeta.displayName;
+
+//#endregion
+exports.Meter = Meter;
+exports.meterMeta = meterMeta;

package/dist/components/Meter/Meter.d.cts

@@ -0,0 +1,63 @@
+
+import { EvaluationsFor } from "../../semantics/taxonomy.cjs";
+import * as React from "react";
+import { MeterProps } from "react-aria-components";
+
+//#region src/components/Meter/Meter.d.ts
+/** Formal semantic identity — Meter root (Feedback entity). */
+declare const meterMeta: {
+  readonly displayName: "Meter";
+  readonly entity: "Feedback";
+  readonly structure: "root";
+};
+/**
+ * Props for the Meter component.
+ */
+interface MeterProps$1 extends Omit<MeterProps, 'style' | 'className' | 'children'> {
+  /**
+   * Authorial emphasis matching the *meaning* of the level: `positive` for a
+   * healthy fill (storage available), `caution` for an approaching limit,
+   * `negative` for a critical level (battery almost empty). `primary` is the
+   * neutral default.
+   * @default 'primary'
+   */
+  evaluation?: EvaluationsFor<'Feedback'>;
+  /** Visible label shown above the bar (e.g. "Storage used"). */
+  label?: React.ReactNode;
+  /**
+   * Whether to render the formatted value alongside the label.
+   * @default true
+   */
+  showValueLabel?: boolean;
+}
+/**
+ * A semantic meter built on React Aria's `Meter` — a static quantity within a
+ * known range (`role="meter"`).
+ *
+ * Reads from `vars.colors.feedback.{primary|positive|caution|negative}` and
+ * uses `vars.radii.control` for the track. Unlike `ProgressBar` (which
+ * communicates an operation *in progress* and supports an indeterminate
+ * mode), `Meter` displays a **fixed measurement the user reads** — battery,
+ * disk usage, rate limit remaining. Pick `Meter` when the number is a state,
+ * `ProgressBar` when it is a task advancing.
+ *
+ * Provide an accessible name via `aria-label` (or `aria-labelledby`) — the
+ * visible `label` is display text and does not itself name the meter.
+ *
+ * @example
+ * ```tsx
+ * <Meter aria-label="Storage" label="Storage used" value={82} evaluation="caution" />
+ * <Meter aria-label="Battery" value={12} evaluation="negative" />
+ * ```
+ */
+declare const Meter: {
+  ({
+    evaluation,
+    label,
+    showValueLabel,
+    ...props
+  }: MeterProps$1): import("react/jsx-runtime").JSX.Element;
+  displayName: "Meter";
+};
+//#endregion
+export { Meter, MeterProps$1 as MeterProps, meterMeta };

package/dist/components/Meter/Meter.d.mts

@@ -0,0 +1,63 @@
+
+import { EvaluationsFor } from "../../semantics/taxonomy.mjs";
+import { MeterProps } from "react-aria-components";
+import * as React from "react";
+
+//#region src/components/Meter/Meter.d.ts
+/** Formal semantic identity — Meter root (Feedback entity). */
+declare const meterMeta: {
+  readonly displayName: "Meter";
+  readonly entity: "Feedback";
+  readonly structure: "root";
+};
+/**
+ * Props for the Meter component.
+ */
+interface MeterProps$1 extends Omit<MeterProps, 'style' | 'className' | 'children'> {
+  /**
+   * Authorial emphasis matching the *meaning* of the level: `positive` for a
+   * healthy fill (storage available), `caution` for an approaching limit,
+   * `negative` for a critical level (battery almost empty). `primary` is the
+   * neutral default.
+   * @default 'primary'
+   */
+  evaluation?: EvaluationsFor<'Feedback'>;
+  /** Visible label shown above the bar (e.g. "Storage used"). */
+  label?: React.ReactNode;
+  /**
+   * Whether to render the formatted value alongside the label.
+   * @default true
+   */
+  showValueLabel?: boolean;
+}
+/**
+ * A semantic meter built on React Aria's `Meter` — a static quantity within a
+ * known range (`role="meter"`).
+ *
+ * Reads from `vars.colors.feedback.{primary|positive|caution|negative}` and
+ * uses `vars.radii.control` for the track. Unlike `ProgressBar` (which
+ * communicates an operation *in progress* and supports an indeterminate
+ * mode), `Meter` displays a **fixed measurement the user reads** — battery,
+ * disk usage, rate limit remaining. Pick `Meter` when the number is a state,
+ * `ProgressBar` when it is a task advancing.
+ *
+ * Provide an accessible name via `aria-label` (or `aria-labelledby`) — the
+ * visible `label` is display text and does not itself name the meter.
+ *
+ * @example
+ * ```tsx
+ * <Meter aria-label="Storage" label="Storage used" value={82} evaluation="caution" />
+ * <Meter aria-label="Battery" value={12} evaluation="negative" />
+ * ```
+ */
+declare const Meter$1: {
+  ({
+    evaluation,
+    label,
+    showValueLabel,
+    ...props
+  }: MeterProps$1): import("react/jsx-runtime").JSX.Element;
+  displayName: "Meter";
+};
+//#endregion
+export { Meter$1 as Meter, MeterProps$1 as MeterProps, meterMeta };

package/dist/components/Meter/Meter.mjs

@@ -0,0 +1,125 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { vars } from "@ttoss/fsl-theme/vars";
+import { Meter } from "react-aria-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Meter/Meter.tsx
+/** Formal semantic identity — Meter root (Feedback entity). */
+var meterMeta = {
+  displayName: "Meter",
+  entity: "Feedback",
+  structure: "root"
+};
+/** Track (body) style — the empty rail the fill sits in. */
+var buildTrackStyle = c => {
+  return {
+    position: "relative",
+    overflow: "hidden",
+    width: "100%",
+    height: vars.spacing.gap.stack.sm,
+    backgroundColor: c?.background?.default,
+    borderRadius: vars.radii.control,
+    borderWidth: vars.border.outline.surface.width,
+    borderStyle: vars.border.outline.surface.style,
+    borderColor: c?.border?.default
+  };
+};
+/** Fill (content) style — width tracks the value's percentage of the range. */
+var buildFillStyle = ({
+  c,
+  percentage
+}) => {
+  return {
+    height: "100%",
+    width: `${percentage}%`,
+    backgroundColor: c?.border?.default,
+    borderRadius: "inherit",
+    transitionProperty: "width",
+    transitionDuration: vars.motion.transition.enter.duration,
+    transitionTimingFunction: vars.motion.transition.enter.easing
+  };
+};
+/**
+* A semantic meter built on React Aria's `Meter` — a static quantity within a
+* known range (`role="meter"`).
+*
+* Reads from `vars.colors.feedback.{primary|positive|caution|negative}` and
+* uses `vars.radii.control` for the track. Unlike `ProgressBar` (which
+* communicates an operation *in progress* and supports an indeterminate
+* mode), `Meter` displays a **fixed measurement the user reads** — battery,
+* disk usage, rate limit remaining. Pick `Meter` when the number is a state,
+* `ProgressBar` when it is a task advancing.
+*
+* Provide an accessible name via `aria-label` (or `aria-labelledby`) — the
+* visible `label` is display text and does not itself name the meter.
+*
+* @example
+* ```tsx
+* <Meter aria-label="Storage" label="Storage used" value={82} evaluation="caution" />
+* <Meter aria-label="Battery" value={12} evaluation="negative" />
+* ```
+*/
+var Meter$1 = ({
+  evaluation = "primary",
+  label,
+  showValueLabel = true,
+  ...props
+}) => {
+  const c = vars.colors.feedback[evaluation];
+  return /* @__PURE__ */jsx(Meter, {
+    ...props,
+    "data-scope": "meter",
+    "data-part": "root",
+    "data-evaluation": evaluation,
+    style: {
+      boxSizing: "border-box",
+      display: "flex",
+      flexDirection: "column",
+      gap: vars.spacing.gap.stack.xs
+    },
+    children: ({
+      percentage,
+      valueText
+    }) => {
+      return /* @__PURE__ */jsxs(Fragment, {
+        children: [(label || showValueLabel) && /* @__PURE__ */jsxs("div", {
+          "data-scope": "meter",
+          "data-part": "labelRow",
+          style: {
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "baseline",
+            color: c?.text?.default,
+            ...vars.text.label.md
+          },
+          children: [/* @__PURE__ */jsx("span", {
+            "data-scope": "meter",
+            "data-part": "title",
+            children: label
+          }), showValueLabel && /* @__PURE__ */jsx("span", {
+            "data-scope": "meter",
+            "data-part": "status",
+            "aria-hidden": true,
+            children: valueText ?? `${Math.round(percentage)}%`
+          })]
+        }), /* @__PURE__ */jsx("div", {
+          "data-scope": "meter",
+          "data-part": "body",
+          style: buildTrackStyle(c),
+          children: /* @__PURE__ */jsx("div", {
+            "data-scope": "meter",
+            "data-part": "content",
+            style: buildFillStyle({
+              c,
+              percentage
+            })
+          })
+        })]
+      });
+    }
+  });
+};
+Meter$1.displayName = meterMeta.displayName;
+
+//#endregion
+export { Meter$1 as Meter, meterMeta };