@ttoss/fsl-ui 0.2.4

package/dist/components/Slider/Slider.cjs

@@ -0,0 +1,160 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+const require_focusRing = require('../../tokens/focusRing.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/Slider/Slider.tsx
+/** Formal semantic identity — Slider root (Input entity). */
+var sliderMeta = {
+  displayName: "Slider",
+  entity: "Input",
+  structure: "root"
+};
+var TRACK_THICKNESS = "0.375rem";
+var THUMB_SIZE = "1.125rem";
+/** The rail the thumb travels along. */
+var buildTrackStyle = c => {
+  return {
+    boxSizing: "border-box",
+    position: "relative",
+    inlineSize: "100%",
+    blockSize: TRACK_THICKNESS,
+    borderRadius: _ttoss_fsl_theme_vars.vars.radii.round,
+    backgroundColor: c?.background?.disabled ?? c?.background?.default
+  };
+};
+/** The filled portion (from the first thumb — or 0 — to the last thumb). */
+var buildFillStyle = ({
+  c,
+  state
+}) => {
+  const lastIndex = state.values.length - 1;
+  const start = state.values.length > 1 ? state.getThumbPercent(0) : 0;
+  const end = state.getThumbPercent(lastIndex);
+  return {
+    position: "absolute",
+    blockSize: "100%",
+    insetInlineStart: `${start * 100}%`,
+    inlineSize: `${(end - start) * 100}%`,
+    borderRadius: "inherit",
+    backgroundColor: c?.border?.checked ?? c?.border?.default
+  };
+};
+/** The grabbable handle. */
+var buildThumbStyle = ({
+  c,
+  isFocusVisible,
+  isDisabled
+}) => {
+  const border = c?.border;
+  const background = c?.background;
+  const key = isDisabled ? "disabled" : "default";
+  return {
+    boxSizing: "border-box",
+    inlineSize: THUMB_SIZE,
+    blockSize: THUMB_SIZE,
+    borderRadius: _ttoss_fsl_theme_vars.vars.radii.round,
+    borderWidth: _ttoss_fsl_theme_vars.vars.border.outline.control.width,
+    borderStyle: _ttoss_fsl_theme_vars.vars.border.outline.control.style,
+    borderColor: border?.[key],
+    backgroundColor: background?.[key],
+    outline: require_focusRing.focusRingOutline(isFocusVisible)
+  };
+};
+/**
+* A semantic slider built on React Aria's `Slider` — select one value (or a
+* range) along a track. Entity = Input → reads `vars.colors.input.primary.*`.
+* Supports `minValue`/`maxValue`/`step`, `orientation`, locale-aware
+* `formatOptions`, and multiple thumbs (pass an array value for a range).
+* Keyboard + RTL handling come from React Aria.
+*
+* @example
+* ```tsx
+* <Slider label="Volume" defaultValue={50} />
+* <Slider label="Price" defaultValue={[20, 80]} formatOptions={{ style: 'currency', currency: 'USD' }} />
+* ```
+*/
+var Slider = ({
+  label,
+  showOutput = true,
+  ...props
+}) => {
+  const c = _ttoss_fsl_theme_vars.vars.colors.input.primary;
+  return /* @__PURE__ */(0, react_jsx_runtime.jsxs)(react_aria_components.Slider, {
+    ...props,
+    "data-scope": "slider",
+    "data-part": "root",
+    style: {
+      boxSizing: "border-box",
+      display: "flex",
+      flexDirection: "column",
+      gap: _ttoss_fsl_theme_vars.vars.spacing.gap.stack.xs
+    },
+    children: [(label != null || showOutput) && /* @__PURE__ */(0, react_jsx_runtime.jsxs)("div", {
+      "data-scope": "slider",
+      "data-part": "labelRow",
+      style: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "baseline",
+        color: c?.text?.default,
+        ..._ttoss_fsl_theme_vars.vars.text.label.md
+      },
+      children: [label != null && /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.Label, {
+        "data-scope": "slider",
+        "data-part": "label",
+        children: label
+      }), showOutput && /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.SliderOutput, {
+        "data-scope": "slider",
+        "data-part": "status"
+      })]
+    }), /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.SliderTrack, {
+      "data-scope": "slider",
+      "data-part": "track",
+      style: {
+        boxSizing: "border-box",
+        display: "flex",
+        alignItems: "center",
+        blockSize: THUMB_SIZE,
+        inlineSize: "100%"
+      },
+      children: ({
+        state
+      }) => {
+        return /* @__PURE__ */(0, react_jsx_runtime.jsxs)("div", {
+          style: buildTrackStyle(c),
+          children: [/* @__PURE__ */(0, react_jsx_runtime.jsx)("div", {
+            "data-scope": "slider",
+            "data-part": "fill",
+            style: buildFillStyle({
+              c,
+              state
+            })
+          }), state.values.map((_, index) => {
+            return /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.SliderThumb, {
+              index,
+              "data-scope": "slider",
+              "data-part": "control",
+              style: ({
+                isFocusVisible,
+                isDisabled
+              }) => {
+                return buildThumbStyle({
+                  c,
+                  isFocusVisible,
+                  isDisabled
+                });
+              }
+            }, index);
+          })]
+        });
+      }
+    })]
+  });
+};
+Slider.displayName = sliderMeta.displayName;
+
+//#endregion
+exports.Slider = Slider;
+exports.sliderMeta = sliderMeta;

package/dist/components/Slider/Slider.d.cts

@@ -0,0 +1,45 @@
+
+import * as React from "react";
+import { SliderProps } from "react-aria-components";
+
+//#region src/components/Slider/Slider.d.ts
+/** Formal semantic identity — Slider root (Input entity). */
+declare const sliderMeta: {
+  readonly displayName: "Slider";
+  readonly entity: "Input";
+  readonly structure: "root";
+};
+/** Props for the Slider component. */
+interface SliderProps$1<T extends number | number[] = number> extends Omit<SliderProps<T>, 'style' | 'className' | 'children'> {
+  /** Visible label displayed above the track. */
+  label?: React.ReactNode;
+  /**
+   * Whether to render the current value(s) next to the label (RAC
+   * `SliderOutput`, locale-formatted via `formatOptions`).
+   * @default true
+   */
+  showOutput?: boolean;
+}
+/**
+ * A semantic slider built on React Aria's `Slider` — select one value (or a
+ * range) along a track. Entity = Input → reads `vars.colors.input.primary.*`.
+ * Supports `minValue`/`maxValue`/`step`, `orientation`, locale-aware
+ * `formatOptions`, and multiple thumbs (pass an array value for a range).
+ * Keyboard + RTL handling come from React Aria.
+ *
+ * @example
+ * ```tsx
+ * <Slider label="Volume" defaultValue={50} />
+ * <Slider label="Price" defaultValue={[20, 80]} formatOptions={{ style: 'currency', currency: 'USD' }} />
+ * ```
+ */
+declare const Slider: {
+  <T extends number | number[] = number>({
+    label,
+    showOutput,
+    ...props
+  }: SliderProps$1<T>): import("react/jsx-runtime").JSX.Element;
+  displayName: "Slider";
+};
+//#endregion
+export { Slider, SliderProps$1 as SliderProps, sliderMeta };

package/dist/components/Slider/Slider.d.mts

@@ -0,0 +1,45 @@
+
+import { SliderProps } from "react-aria-components";
+import * as React from "react";
+
+//#region src/components/Slider/Slider.d.ts
+/** Formal semantic identity — Slider root (Input entity). */
+declare const sliderMeta: {
+  readonly displayName: "Slider";
+  readonly entity: "Input";
+  readonly structure: "root";
+};
+/** Props for the Slider component. */
+interface SliderProps$1<T extends number | number[] = number> extends Omit<SliderProps<T>, 'style' | 'className' | 'children'> {
+  /** Visible label displayed above the track. */
+  label?: React.ReactNode;
+  /**
+   * Whether to render the current value(s) next to the label (RAC
+   * `SliderOutput`, locale-formatted via `formatOptions`).
+   * @default true
+   */
+  showOutput?: boolean;
+}
+/**
+ * A semantic slider built on React Aria's `Slider` — select one value (or a
+ * range) along a track. Entity = Input → reads `vars.colors.input.primary.*`.
+ * Supports `minValue`/`maxValue`/`step`, `orientation`, locale-aware
+ * `formatOptions`, and multiple thumbs (pass an array value for a range).
+ * Keyboard + RTL handling come from React Aria.
+ *
+ * @example
+ * ```tsx
+ * <Slider label="Volume" defaultValue={50} />
+ * <Slider label="Price" defaultValue={[20, 80]} formatOptions={{ style: 'currency', currency: 'USD' }} />
+ * ```
+ */
+declare const Slider$1: {
+  <T extends number | number[] = number>({
+    label,
+    showOutput,
+    ...props
+  }: SliderProps$1<T>): import("react/jsx-runtime").JSX.Element;
+  displayName: "Slider";
+};
+//#endregion
+export { Slider$1 as Slider, SliderProps$1 as SliderProps, sliderMeta };

package/dist/components/Slider/Slider.mjs

@@ -0,0 +1,159 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { focusRingOutline } from "../../tokens/focusRing.mjs";
+import { vars } from "@ttoss/fsl-theme/vars";
+import { Label, Slider, SliderOutput, SliderThumb, SliderTrack } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Slider/Slider.tsx
+/** Formal semantic identity — Slider root (Input entity). */
+var sliderMeta = {
+  displayName: "Slider",
+  entity: "Input",
+  structure: "root"
+};
+var TRACK_THICKNESS = "0.375rem";
+var THUMB_SIZE = "1.125rem";
+/** The rail the thumb travels along. */
+var buildTrackStyle = c => {
+  return {
+    boxSizing: "border-box",
+    position: "relative",
+    inlineSize: "100%",
+    blockSize: TRACK_THICKNESS,
+    borderRadius: vars.radii.round,
+    backgroundColor: c?.background?.disabled ?? c?.background?.default
+  };
+};
+/** The filled portion (from the first thumb — or 0 — to the last thumb). */
+var buildFillStyle = ({
+  c,
+  state
+}) => {
+  const lastIndex = state.values.length - 1;
+  const start = state.values.length > 1 ? state.getThumbPercent(0) : 0;
+  const end = state.getThumbPercent(lastIndex);
+  return {
+    position: "absolute",
+    blockSize: "100%",
+    insetInlineStart: `${start * 100}%`,
+    inlineSize: `${(end - start) * 100}%`,
+    borderRadius: "inherit",
+    backgroundColor: c?.border?.checked ?? c?.border?.default
+  };
+};
+/** The grabbable handle. */
+var buildThumbStyle = ({
+  c,
+  isFocusVisible,
+  isDisabled
+}) => {
+  const border = c?.border;
+  const background = c?.background;
+  const key = isDisabled ? "disabled" : "default";
+  return {
+    boxSizing: "border-box",
+    inlineSize: THUMB_SIZE,
+    blockSize: THUMB_SIZE,
+    borderRadius: vars.radii.round,
+    borderWidth: vars.border.outline.control.width,
+    borderStyle: vars.border.outline.control.style,
+    borderColor: border?.[key],
+    backgroundColor: background?.[key],
+    outline: focusRingOutline(isFocusVisible)
+  };
+};
+/**
+* A semantic slider built on React Aria's `Slider` — select one value (or a
+* range) along a track. Entity = Input → reads `vars.colors.input.primary.*`.
+* Supports `minValue`/`maxValue`/`step`, `orientation`, locale-aware
+* `formatOptions`, and multiple thumbs (pass an array value for a range).
+* Keyboard + RTL handling come from React Aria.
+*
+* @example
+* ```tsx
+* <Slider label="Volume" defaultValue={50} />
+* <Slider label="Price" defaultValue={[20, 80]} formatOptions={{ style: 'currency', currency: 'USD' }} />
+* ```
+*/
+var Slider$1 = ({
+  label,
+  showOutput = true,
+  ...props
+}) => {
+  const c = vars.colors.input.primary;
+  return /* @__PURE__ */jsxs(Slider, {
+    ...props,
+    "data-scope": "slider",
+    "data-part": "root",
+    style: {
+      boxSizing: "border-box",
+      display: "flex",
+      flexDirection: "column",
+      gap: vars.spacing.gap.stack.xs
+    },
+    children: [(label != null || showOutput) && /* @__PURE__ */jsxs("div", {
+      "data-scope": "slider",
+      "data-part": "labelRow",
+      style: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "baseline",
+        color: c?.text?.default,
+        ...vars.text.label.md
+      },
+      children: [label != null && /* @__PURE__ */jsx(Label, {
+        "data-scope": "slider",
+        "data-part": "label",
+        children: label
+      }), showOutput && /* @__PURE__ */jsx(SliderOutput, {
+        "data-scope": "slider",
+        "data-part": "status"
+      })]
+    }), /* @__PURE__ */jsx(SliderTrack, {
+      "data-scope": "slider",
+      "data-part": "track",
+      style: {
+        boxSizing: "border-box",
+        display: "flex",
+        alignItems: "center",
+        blockSize: THUMB_SIZE,
+        inlineSize: "100%"
+      },
+      children: ({
+        state
+      }) => {
+        return /* @__PURE__ */jsxs("div", {
+          style: buildTrackStyle(c),
+          children: [/* @__PURE__ */jsx("div", {
+            "data-scope": "slider",
+            "data-part": "fill",
+            style: buildFillStyle({
+              c,
+              state
+            })
+          }), state.values.map((_, index) => {
+            return /* @__PURE__ */jsx(SliderThumb, {
+              index,
+              "data-scope": "slider",
+              "data-part": "control",
+              style: ({
+                isFocusVisible,
+                isDisabled
+              }) => {
+                return buildThumbStyle({
+                  c,
+                  isFocusVisible,
+                  isDisabled
+                });
+              }
+            }, index);
+          })]
+        });
+      }
+    })]
+  });
+};
+Slider$1.displayName = sliderMeta.displayName;
+
+//#endregion
+export { Slider$1 as Slider, sliderMeta };

package/dist/components/Switch/Switch.cjs

@@ -0,0 +1,176 @@
+/** 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');
+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/Switch/Switch.tsx
+/** Formal semantic identity — Switch root (Selection entity, toggle.binary). */
+var switchMeta = {
+  displayName: "Switch",
+  entity: "Selection",
+  structure: "root"
+};
+var TRACK_W = "2.5rem";
+var TRACK_H = "1.5rem";
+var THUMB_SIZE = "1.125rem";
+var THUMB_OFFSET = "0.1875rem";
+var TRACK_STYLE_STATIC = {
+  boxSizing: "border-box",
+  position: "relative",
+  flexShrink: 0,
+  display: "inline-block",
+  width: TRACK_W,
+  height: TRACK_H,
+  borderRadius: _ttoss_fsl_theme_vars.vars.radii.round,
+  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,
+  outlineOffset: "2px"
+};
+/** Sliding-track style (state-dependent background/border + focus ring). */
+var buildTrackStyle = ({
+  c,
+  isDisabled,
+  isSelected,
+  isHovered,
+  isPressed,
+  isFocusVisible
+}) => {
+  return {
+    ...TRACK_STYLE_STATIC,
+    backgroundColor: require_resolveInteractiveStyle.resolveInteractiveStyle(c?.background, {
+      isDisabled,
+      isSelected,
+      isHovered,
+      isPressed
+    }),
+    borderColor: require_resolveInteractiveStyle.resolveInteractiveStyle(c?.border, {
+      isDisabled,
+      isSelected,
+      isFocusVisible
+    }),
+    outline: require_focusRing.focusRingOutline(isFocusVisible)
+  };
+};
+/**
+* Thumb color:
+*   ON  → text.checked (typically neutral.0 = white on brand track)
+*   OFF → border.default (typically neutral.300 = visible on light track)
+*/
+var resolveThumbColor = ({
+  c,
+  isSelected
+}) => {
+  const text = c?.text;
+  return isSelected ? text?.checked ?? text?.default : c?.border?.default;
+};
+/** Label color — disabled dominates default (Selection has no evaluation). */
+var resolveLabelColor = ({
+  c,
+  isDisabled
+}) => {
+  const text = c?.text;
+  return isDisabled ? text?.disabled : text?.default;
+};
+/**
+* A semantic on/off toggle built on React Aria's Switch.
+*
+* Entity = Selection → reads `vars.colors.input.primary.*`, radii: `round`
+* (pill track + circular thumb), border: `outline.control`,
+* sizing: `hit.base`, motion: `feedback`.
+*
+* @example
+* ```tsx
+* <Switch>Enable notifications</Switch>
+* <Switch defaultSelected>Dark mode</Switch>
+* ```
+*/
+var Switch = ({
+  children,
+  ...props
+}) => {
+  const c = _ttoss_fsl_theme_vars.vars.colors.input.primary;
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.Switch, {
+    ...props,
+    "data-scope": "switch",
+    "data-part": "root",
+    style: ({
+      isDisabled
+    }) => {
+      return {
+        boxSizing: "border-box",
+        display: "inline-flex",
+        alignItems: "center",
+        gap: _ttoss_fsl_theme_vars.vars.spacing.gap.inline.sm,
+        minHeight: _ttoss_fsl_theme_vars.vars.sizing.hit.base,
+        cursor: isDisabled ? "not-allowed" : "pointer",
+        opacity: isDisabled ? _ttoss_fsl_theme_vars.vars.opacity.disabled : void 0,
+        ..._ttoss_fsl_theme_vars.vars.text.label.md,
+        color: isDisabled ? c?.text?.disabled : c?.text?.default
+      };
+    },
+    children: ({
+      isHovered,
+      isPressed,
+      isDisabled,
+      isFocusVisible,
+      isSelected
+    }) => {
+      const thumbInsetInlineStart = isSelected ? `calc(${TRACK_W} - ${THUMB_SIZE} - ${THUMB_OFFSET})` : THUMB_OFFSET;
+      return /* @__PURE__ */(0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, {
+        children: [/* @__PURE__ */(0, react_jsx_runtime.jsx)("span", {
+          "data-scope": "switch",
+          "data-part": "control",
+          "aria-hidden": true,
+          style: buildTrackStyle({
+            c,
+            isDisabled,
+            isSelected,
+            isHovered,
+            isPressed,
+            isFocusVisible
+          }),
+          children: /* @__PURE__ */(0, react_jsx_runtime.jsx)("span", {
+            "data-scope": "switch",
+            "data-part": "indicator",
+            "aria-hidden": true,
+            style: {
+              position: "absolute",
+              insetBlockStart: THUMB_OFFSET,
+              insetInlineStart: thumbInsetInlineStart,
+              width: THUMB_SIZE,
+              height: THUMB_SIZE,
+              borderRadius: _ttoss_fsl_theme_vars.vars.radii.round,
+              backgroundColor: resolveThumbColor({
+                c,
+                isSelected
+              }),
+              transitionProperty: "inset-inline-start, background-color",
+              transitionDuration: _ttoss_fsl_theme_vars.vars.motion.feedback.duration,
+              transitionTimingFunction: _ttoss_fsl_theme_vars.vars.motion.feedback.easing
+            }
+          })
+        }), children != null && /* @__PURE__ */(0, react_jsx_runtime.jsx)("span", {
+          "data-scope": "switch",
+          "data-part": "label",
+          style: {
+            color: resolveLabelColor({
+              c,
+              isDisabled
+            })
+          },
+          children
+        })]
+      });
+    }
+  });
+};
+Switch.displayName = switchMeta.displayName;
+
+//#endregion
+exports.Switch = Switch;
+exports.switchMeta = switchMeta;

package/dist/components/Switch/Switch.d.cts

@@ -0,0 +1,43 @@
+
+import * as React from "react";
+import { SwitchProps } from "react-aria-components";
+
+//#region src/components/Switch/Switch.d.ts
+/** Formal semantic identity — Switch root (Selection entity, toggle.binary). */
+declare const switchMeta: {
+  readonly displayName: "Switch";
+  readonly entity: "Selection";
+  readonly structure: "root";
+};
+/**
+ * Props for the Switch component.
+ */
+interface SwitchProps$1 extends Omit<SwitchProps, 'style' | 'children'> {
+  /**
+   * Label content displayed next to the switch track.
+   * Rendered inside a `data-part="label"` span.
+   */
+  children?: React.ReactNode;
+}
+/**
+ * A semantic on/off toggle built on React Aria's Switch.
+ *
+ * Entity = Selection → reads `vars.colors.input.primary.*`, radii: `round`
+ * (pill track + circular thumb), border: `outline.control`,
+ * sizing: `hit.base`, motion: `feedback`.
+ *
+ * @example
+ * ```tsx
+ * <Switch>Enable notifications</Switch>
+ * <Switch defaultSelected>Dark mode</Switch>
+ * ```
+ */
+declare const Switch: {
+  ({
+    children,
+    ...props
+  }: SwitchProps$1): import("react/jsx-runtime").JSX.Element;
+  displayName: "Switch";
+};
+//#endregion
+export { Switch, SwitchProps$1 as SwitchProps, switchMeta };

package/dist/components/Switch/Switch.d.mts

@@ -0,0 +1,43 @@
+
+import { SwitchProps } from "react-aria-components";
+import * as React from "react";
+
+//#region src/components/Switch/Switch.d.ts
+/** Formal semantic identity — Switch root (Selection entity, toggle.binary). */
+declare const switchMeta: {
+  readonly displayName: "Switch";
+  readonly entity: "Selection";
+  readonly structure: "root";
+};
+/**
+ * Props for the Switch component.
+ */
+interface SwitchProps$1 extends Omit<SwitchProps, 'style' | 'children'> {
+  /**
+   * Label content displayed next to the switch track.
+   * Rendered inside a `data-part="label"` span.
+   */
+  children?: React.ReactNode;
+}
+/**
+ * A semantic on/off toggle built on React Aria's Switch.
+ *
+ * Entity = Selection → reads `vars.colors.input.primary.*`, radii: `round`
+ * (pill track + circular thumb), border: `outline.control`,
+ * sizing: `hit.base`, motion: `feedback`.
+ *
+ * @example
+ * ```tsx
+ * <Switch>Enable notifications</Switch>
+ * <Switch defaultSelected>Dark mode</Switch>
+ * ```
+ */
+declare const Switch$1: {
+  ({
+    children,
+    ...props
+  }: SwitchProps$1): import("react/jsx-runtime").JSX.Element;
+  displayName: "Switch";
+};
+//#endregion
+export { Switch$1 as Switch, SwitchProps$1 as SwitchProps, switchMeta };