@ttoss/fsl-ui 0.2.4

package/dist/components/Toolbar/Toolbar.d.mts

@@ -0,0 +1,60 @@
+
+import { EvaluationsFor } from "../../semantics/taxonomy.mjs";
+import { ToolbarProps } from "react-aria-components";
+import * as React from "react";
+
+//#region src/components/Toolbar/Toolbar.d.ts
+/** Formal semantic identity — Toolbar root (Structure entity, actions bar). */
+declare const toolbarMeta: {
+  readonly displayName: "Toolbar";
+  readonly entity: "Structure";
+  readonly structure: "root";
+};
+/** Props for the Toolbar component. */
+interface ToolbarProps$1 extends Omit<ToolbarProps, 'style' | 'className' | 'children'> {
+  /**
+   * Layout + roving-focus axis. `horizontal` uses Left/Right arrows;
+   * `vertical` uses Up/Down.
+   * @default 'horizontal'
+   */
+  orientation?: ToolbarProps['orientation'];
+  /**
+   * Authorial emphasis of the bar surface. `primary` is the standard toolbar
+   * chrome; `muted` is a subdued variant for dense or secondary bars.
+   * @default 'primary'
+   */
+  evaluation?: EvaluationsFor<(typeof toolbarMeta)['entity']>;
+  /** The interactive controls to lay out in the bar. */
+  children?: React.ReactNode;
+}
+/**
+ * A semantic toolbar built on React Aria's `Toolbar` (`role="toolbar"`).
+ *
+ * Entity = Structure → reads `vars.colors.informational.{primary|muted}` for
+ * the bar surface and border, `vars.radii.surface` for the corner, and
+ * `vars.spacing.inset.surface` for padding. Groups related actions (a text
+ * formatting bar, a view-mode switch, a set of table controls) under one
+ * region with arrow-key navigation. Non-interactive itself — hover/press
+ * chrome belongs to the `Button` / `ToggleButton` children.
+ *
+ * @example
+ * ```tsx
+ * <Toolbar aria-label="Text formatting">
+ *   <ToggleButton aria-label="Bold">B</ToggleButton>
+ *   <ToggleButton aria-label="Italic">I</ToggleButton>
+ *   <Separator orientation="vertical" />
+ *   <Button aria-label="Link">Link</Button>
+ * </Toolbar>
+ * ```
+ */
+declare const Toolbar$1: {
+  ({
+    orientation,
+    evaluation,
+    children,
+    ...props
+  }: ToolbarProps$1): import("react/jsx-runtime").JSX.Element;
+  displayName: "Toolbar";
+};
+//#endregion
+export { Toolbar$1 as Toolbar, ToolbarProps$1 as ToolbarProps, toolbarMeta };

package/dist/components/Toolbar/Toolbar.mjs

@@ -0,0 +1,66 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { vars } from "@ttoss/fsl-theme/vars";
+import { Toolbar } from "react-aria-components";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Toolbar/Toolbar.tsx
+/** Formal semantic identity — Toolbar root (Structure entity, actions bar). */
+var toolbarMeta = {
+  displayName: "Toolbar",
+  entity: "Structure",
+  structure: "root"
+};
+/**
+* A semantic toolbar built on React Aria's `Toolbar` (`role="toolbar"`).
+*
+* Entity = Structure → reads `vars.colors.informational.{primary|muted}` for
+* the bar surface and border, `vars.radii.surface` for the corner, and
+* `vars.spacing.inset.surface` for padding. Groups related actions (a text
+* formatting bar, a view-mode switch, a set of table controls) under one
+* region with arrow-key navigation. Non-interactive itself — hover/press
+* chrome belongs to the `Button` / `ToggleButton` children.
+*
+* @example
+* ```tsx
+* <Toolbar aria-label="Text formatting">
+*   <ToggleButton aria-label="Bold">B</ToggleButton>
+*   <ToggleButton aria-label="Italic">I</ToggleButton>
+*   <Separator orientation="vertical" />
+*   <Button aria-label="Link">Link</Button>
+* </Toolbar>
+* ```
+*/
+var Toolbar$1 = ({
+  orientation = "horizontal",
+  evaluation = "primary",
+  children,
+  ...props
+}) => {
+  const c = vars.colors.informational[evaluation];
+  const isVertical = orientation === "vertical";
+  return /* @__PURE__ */jsx(Toolbar, {
+    ...props,
+    orientation,
+    "data-scope": "toolbar",
+    "data-part": "root",
+    "data-evaluation": evaluation,
+    style: {
+      boxSizing: "border-box",
+      display: "inline-flex",
+      flexDirection: isVertical ? "column" : "row",
+      alignItems: "center",
+      gap: vars.spacing.gap.inline.sm,
+      padding: vars.spacing.inset.surface.sm,
+      borderRadius: vars.radii.surface,
+      borderWidth: vars.border.outline.surface.width,
+      borderStyle: vars.border.outline.surface.style,
+      borderColor: c?.border?.default ?? "transparent",
+      backgroundColor: c?.background?.default
+    },
+    children
+  });
+};
+Toolbar$1.displayName = toolbarMeta.displayName;
+
+//#endregion
+export { Toolbar$1 as Toolbar, toolbarMeta };

package/dist/composites/Accordion/Accordion.cjs

@@ -0,0 +1,279 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
+const require_focusRing = require('../../tokens/focusRing.cjs');
+const require_resolveInteractiveStyle = require('../../tokens/resolveInteractiveStyle.cjs');
+const require_Icon = require('../../components/Icon/Icon.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");
+let react = require("react");
+react = require_runtime.__toESM(react);
+
+//#region src/composites/Accordion/Accordion.tsx
+var accordionScope = require_scope.createCompositeScope("Accordion");
+/** Formal semantic identity — Accordion root (Disclosure entity, group host). */
+var accordionMeta = {
+  displayName: "Accordion",
+  entity: "Disclosure",
+  structure: "root"
+};
+/** Formal semantic identity — AccordionItem (Disclosure entity, single item).
+*
+* Intentionally has no `composition` field. Per the §2.3 evidence rule,
+* `composition` is declared only when a runtime dispatches on it (DOM
+* reorder, behavior selection, or coloring). The Accordion host does not
+* dispatch on composition — items are not reordered, selected, or styled
+* by it — so attaching a value here would be dead weight. The disclosure's
+* interactive `'control'` is the trigger button, not the item container,
+* and even on `accordionTriggerMeta` the value would be unused today; if
+* a future runtime starts dispatching on it, declare it then.
+*/
+var accordionItemMeta = {
+  displayName: "AccordionItem",
+  entity: "Disclosure",
+  structure: "root"
+};
+/** Formal semantic identity — AccordionTrigger (header button). */
+var accordionTriggerMeta = {
+  displayName: "AccordionTrigger",
+  entity: "Disclosure",
+  structure: "trigger"
+};
+/** Formal semantic identity — AccordionPanel (collapsible content region). */
+var accordionPanelMeta = {
+  displayName: "AccordionPanel",
+  entity: "Disclosure",
+  structure: "content"
+};
+/**
+* A semantic accordion built on React Aria's `DisclosureGroup`.
+*
+* Entity = Disclosure, interaction = `disclose.toggle`. Reads from
+* `vars.colors.navigation.{primary|muted}` and animates with
+* `vars.motion.transition.{enter,exit}` — never with `vars.motion.feedback`,
+* which is reserved for micro-interactions on Action and Input controls.
+*
+* Supports single-expand (default) or `allowsMultipleExpanded` for multiple
+* concurrently open panels.
+*
+* @example
+* ```tsx
+* <Accordion>
+*   <AccordionItem id="terms">
+*     <AccordionTrigger>Terms of service</AccordionTrigger>
+*     <AccordionPanel>You agree not to misuse the service.</AccordionPanel>
+*   </AccordionItem>
+*   <AccordionItem id="privacy">
+*     <AccordionTrigger>Privacy policy</AccordionTrigger>
+*     <AccordionPanel>We collect minimal personal data.</AccordionPanel>
+*   </AccordionItem>
+* </Accordion>
+* ```
+*/
+var Accordion = ({
+  evaluation = "primary",
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(accordionScope.Provider, {
+    value: {
+      evaluation
+    },
+    children: /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.DisclosureGroup, {
+      ...props,
+      "data-scope": "accordion",
+      "data-part": "root",
+      "data-evaluation": evaluation,
+      style: {
+        boxSizing: "border-box",
+        display: "flex",
+        flexDirection: "column",
+        borderWidth: _ttoss_fsl_theme_vars.vars.border.outline.control.width,
+        borderStyle: _ttoss_fsl_theme_vars.vars.border.outline.control.style,
+        borderColor: _ttoss_fsl_theme_vars.vars.colors.navigation[evaluation]?.border?.default ?? "transparent",
+        borderRadius: _ttoss_fsl_theme_vars.vars.radii.surface,
+        overflow: "hidden"
+      },
+      children
+    })
+  });
+};
+Accordion.displayName = accordionMeta.displayName;
+/**
+* A single collapsible item — must be used inside an `Accordion`.
+*
+* Wraps React Aria's `Disclosure`. Adjacent items are separated by a divider
+* border; the last item's bottom border is suppressed by the parent `overflow:
+* hidden` + the rounded surface radius.
+*
+* @example
+* ```tsx
+* <AccordionItem id="terms">
+*   <AccordionTrigger>Terms of service</AccordionTrigger>
+*   <AccordionPanel>You agree not to misuse the service.</AccordionPanel>
+* </AccordionItem>
+* ```
+*/
+var AccordionItem = ({
+  children,
+  ...props
+}) => {
+  const {
+    evaluation
+  } = accordionScope.use(accordionItemMeta.displayName);
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.Disclosure, {
+    ...props,
+    "data-scope": "accordion",
+    "data-part": "item",
+    style: {
+      boxSizing: "border-box",
+      borderBlockStartWidth: _ttoss_fsl_theme_vars.vars.border.divider.width,
+      borderBlockStartStyle: _ttoss_fsl_theme_vars.vars.border.divider.style,
+      borderBlockStartColor: _ttoss_fsl_theme_vars.vars.colors.navigation[evaluation]?.border?.default ?? "transparent"
+    },
+    children
+  });
+};
+AccordionItem.displayName = accordionItemMeta.displayName;
+/**
+* The clickable header of an `AccordionItem`. Renders inside a heading
+* element (level via `headingLevel`, default `<h3>` per RAC's recommended
+* structure) and exposes `aria-expanded` / a controlled chevron icon.
+*
+* Reads `isExpanded`, `isHovered`, `isFocusVisible`, `isDisabled` from RAC's
+* `Button` render-props and resolves them through the canonical state
+* cascade in [`resolveInteractiveStyle`](../../tokens/resolveInteractiveStyle.ts).
+*/
+var AccordionTrigger = ({
+  headingLevel = 3,
+  children,
+  ...props
+}) => {
+  const {
+    evaluation
+  } = accordionScope.use(accordionTriggerMeta.displayName);
+  const c = _ttoss_fsl_theme_vars.vars.colors.navigation[evaluation];
+  const isExpanded = react.useContext(react_aria_components.DisclosureStateContext)?.isExpanded ?? false;
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.Heading, {
+    level: headingLevel,
+    "data-scope": "accordion",
+    "data-part": "header",
+    style: {
+      margin: 0
+    },
+    children: /* @__PURE__ */(0, react_jsx_runtime.jsxs)(react_aria_components.Button, {
+      ...props,
+      slot: "trigger",
+      "data-scope": "accordion",
+      "data-part": "trigger",
+      style: ({
+        isHovered,
+        isPressed,
+        isDisabled,
+        isFocusVisible
+      }) => {
+        const flags = {
+          isHovered,
+          isPressed,
+          isDisabled,
+          isFocusVisible,
+          isExpanded
+        };
+        return {
+          boxSizing: "border-box",
+          width: "100%",
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: _ttoss_fsl_theme_vars.vars.spacing.gap.inline.sm,
+          minHeight: _ttoss_fsl_theme_vars.vars.sizing.hit.base,
+          paddingBlock: _ttoss_fsl_theme_vars.vars.spacing.inset.control.md,
+          paddingInline: _ttoss_fsl_theme_vars.vars.spacing.inset.control.md,
+          border: "none",
+          background: "none",
+          backgroundColor: require_resolveInteractiveStyle.resolveInteractiveStyle(c?.background, flags),
+          color: require_resolveInteractiveStyle.resolveInteractiveStyle(c?.text, flags) ?? c?.text?.default,
+          cursor: isDisabled ? "not-allowed" : "pointer",
+          opacity: isDisabled ? _ttoss_fsl_theme_vars.vars.opacity.disabled : void 0,
+          ..._ttoss_fsl_theme_vars.vars.text.label.md,
+          textAlign: "start",
+          transitionProperty: "background-color, color",
+          transitionDuration: _ttoss_fsl_theme_vars.vars.motion.transition.enter.duration,
+          transitionTimingFunction: _ttoss_fsl_theme_vars.vars.motion.transition.enter.easing,
+          outline: require_focusRing.focusRingOutline(isFocusVisible),
+          outlineOffset: "-2px"
+        };
+      },
+      children: [/* @__PURE__ */(0, react_jsx_runtime.jsx)("span", {
+        "data-scope": "accordion",
+        "data-part": "label",
+        style: {
+          flex: 1
+        },
+        children
+      }), /* @__PURE__ */(0, react_jsx_runtime.jsx)("span", {
+        "data-scope": "accordion",
+        "data-part": "indicator",
+        "aria-hidden": true,
+        style: {
+          flexShrink: 0,
+          display: "inline-block",
+          transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)",
+          transitionProperty: "transform",
+          transitionDuration: isExpanded ? _ttoss_fsl_theme_vars.vars.motion.transition.enter.duration : _ttoss_fsl_theme_vars.vars.motion.transition.exit.duration,
+          transitionTimingFunction: isExpanded ? _ttoss_fsl_theme_vars.vars.motion.transition.enter.easing : _ttoss_fsl_theme_vars.vars.motion.transition.exit.easing
+        },
+        children: /* @__PURE__ */(0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+          intent: "disclosure.collapse"
+        })
+      })]
+    })
+  });
+};
+AccordionTrigger.displayName = accordionTriggerMeta.displayName;
+/**
+* The collapsible content region of an `AccordionItem`. RAC handles the
+* show/hide via the parent Disclosure state; we apply the
+* `vars.motion.transition.{enter,exit}` semantics for the chrome's
+* appearance change.
+*
+* @example
+* ```tsx
+* <AccordionPanel>You agree not to misuse the service.</AccordionPanel>
+* ```
+*/
+var AccordionPanel = ({
+  children,
+  ...props
+}) => {
+  const {
+    evaluation
+  } = accordionScope.use(accordionPanelMeta.displayName);
+  const c = _ttoss_fsl_theme_vars.vars.colors.navigation[evaluation];
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.DisclosurePanel, {
+    ...props,
+    "data-scope": "accordion",
+    "data-part": "content",
+    style: {
+      boxSizing: "border-box",
+      paddingBlock: _ttoss_fsl_theme_vars.vars.spacing.inset.control.md,
+      paddingInline: _ttoss_fsl_theme_vars.vars.spacing.inset.control.md,
+      backgroundColor: c?.background?.default,
+      color: c?.text?.default,
+      ..._ttoss_fsl_theme_vars.vars.text.body.md
+    },
+    children
+  });
+};
+AccordionPanel.displayName = accordionPanelMeta.displayName;
+
+//#endregion
+exports.Accordion = Accordion;
+exports.AccordionItem = AccordionItem;
+exports.AccordionPanel = AccordionPanel;
+exports.AccordionTrigger = AccordionTrigger;
+exports.accordionItemMeta = accordionItemMeta;
+exports.accordionMeta = accordionMeta;
+exports.accordionPanelMeta = accordionPanelMeta;
+exports.accordionTriggerMeta = accordionTriggerMeta;

package/dist/composites/Accordion/Accordion.d.cts

@@ -0,0 +1,176 @@
+
+import { EvaluationsFor } from "../../semantics/taxonomy.cjs";
+import * as React from "react";
+import { ButtonProps, DisclosureGroupProps, DisclosurePanelProps, DisclosureProps } from "react-aria-components";
+
+//#region src/composites/Accordion/Accordion.d.ts
+/** Formal semantic identity — Accordion root (Disclosure entity, group host). */
+declare const accordionMeta: {
+  readonly displayName: "Accordion";
+  readonly entity: "Disclosure";
+  readonly structure: "root";
+};
+/** Formal semantic identity — AccordionItem (Disclosure entity, single item).
+ *
+ * Intentionally has no `composition` field. Per the §2.3 evidence rule,
+ * `composition` is declared only when a runtime dispatches on it (DOM
+ * reorder, behavior selection, or coloring). The Accordion host does not
+ * dispatch on composition — items are not reordered, selected, or styled
+ * by it — so attaching a value here would be dead weight. The disclosure's
+ * interactive `'control'` is the trigger button, not the item container,
+ * and even on `accordionTriggerMeta` the value would be unused today; if
+ * a future runtime starts dispatching on it, declare it then.
+ */
+declare const accordionItemMeta: {
+  readonly displayName: "AccordionItem";
+  readonly entity: "Disclosure";
+  readonly structure: "root";
+};
+/** Formal semantic identity — AccordionTrigger (header button). */
+declare const accordionTriggerMeta: {
+  readonly displayName: "AccordionTrigger";
+  readonly entity: "Disclosure";
+  readonly structure: "trigger";
+};
+/** Formal semantic identity — AccordionPanel (collapsible content region). */
+declare const accordionPanelMeta: {
+  readonly displayName: "AccordionPanel";
+  readonly entity: "Disclosure";
+  readonly structure: "content";
+};
+/**
+ * Props for the Accordion component.
+ *
+ * The composite owns its layout; pass `style`/`className` on a wrapping
+ * element rather than on the composite root. See CONTRIBUTING §4.
+ */
+interface AccordionProps extends Omit<DisclosureGroupProps, 'style' | 'children' | 'className'> {
+  /**
+   * Authorial emphasis. `primary` is the standard accordion chrome;
+   * `muted` is a subdued variant for sidebars and dense lists.
+   * @default 'primary'
+   */
+  evaluation?: EvaluationsFor<'Disclosure'>;
+  /** `AccordionItem` children. */
+  children?: React.ReactNode;
+}
+/**
+ * A semantic accordion built on React Aria's `DisclosureGroup`.
+ *
+ * Entity = Disclosure, interaction = `disclose.toggle`. Reads from
+ * `vars.colors.navigation.{primary|muted}` and animates with
+ * `vars.motion.transition.{enter,exit}` — never with `vars.motion.feedback`,
+ * which is reserved for micro-interactions on Action and Input controls.
+ *
+ * Supports single-expand (default) or `allowsMultipleExpanded` for multiple
+ * concurrently open panels.
+ *
+ * @example
+ * ```tsx
+ * <Accordion>
+ *   <AccordionItem id="terms">
+ *     <AccordionTrigger>Terms of service</AccordionTrigger>
+ *     <AccordionPanel>You agree not to misuse the service.</AccordionPanel>
+ *   </AccordionItem>
+ *   <AccordionItem id="privacy">
+ *     <AccordionTrigger>Privacy policy</AccordionTrigger>
+ *     <AccordionPanel>We collect minimal personal data.</AccordionPanel>
+ *   </AccordionItem>
+ * </Accordion>
+ * ```
+ */
+declare const Accordion: {
+  ({
+    evaluation,
+    children,
+    ...props
+  }: AccordionProps): import("react/jsx-runtime").JSX.Element;
+  displayName: "Accordion";
+};
+/**
+ * Props for the AccordionItem component.
+ */
+interface AccordionItemProps extends Omit<DisclosureProps, 'style' | 'children' | 'className'> {
+  /** `AccordionTrigger` and `AccordionPanel` children, in that order. */
+  children?: React.ReactNode;
+}
+/**
+ * A single collapsible item — must be used inside an `Accordion`.
+ *
+ * Wraps React Aria's `Disclosure`. Adjacent items are separated by a divider
+ * border; the last item's bottom border is suppressed by the parent `overflow:
+ * hidden` + the rounded surface radius.
+ *
+ * @example
+ * ```tsx
+ * <AccordionItem id="terms">
+ *   <AccordionTrigger>Terms of service</AccordionTrigger>
+ *   <AccordionPanel>You agree not to misuse the service.</AccordionPanel>
+ * </AccordionItem>
+ * ```
+ */
+declare const AccordionItem: {
+  ({
+    children,
+    ...props
+  }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;
+  displayName: "AccordionItem";
+};
+/**
+ * Props for the AccordionTrigger component.
+ *
+ * Extends the full React Aria `Button` API (minus `style`/`className` and
+ * the reserved `slot`) so behavior props — `isDisabled`, `onPress`, `id`,
+ * `aria-*` — flow through to the underlying trigger button.
+ */
+interface AccordionTriggerProps extends Omit<ButtonProps, 'style' | 'className' | 'children' | 'slot'> {
+  /**
+   * HTML heading level of the wrapping heading element. Pick the level
+   * that fits the host page's document outline.
+   * @default 3
+   */
+  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+  /** Visible label content of the trigger row. */
+  children?: React.ReactNode;
+}
+/**
+ * The clickable header of an `AccordionItem`. Renders inside a heading
+ * element (level via `headingLevel`, default `<h3>` per RAC's recommended
+ * structure) and exposes `aria-expanded` / a controlled chevron icon.
+ *
+ * Reads `isExpanded`, `isHovered`, `isFocusVisible`, `isDisabled` from RAC's
+ * `Button` render-props and resolves them through the canonical state
+ * cascade in [`resolveInteractiveStyle`](../../tokens/resolveInteractiveStyle.ts).
+ */
+declare const AccordionTrigger: {
+  ({
+    headingLevel,
+    children,
+    ...props
+  }: AccordionTriggerProps): import("react/jsx-runtime").JSX.Element;
+  displayName: "AccordionTrigger";
+};
+/**
+ * Props for the AccordionPanel component.
+ */
+type AccordionPanelProps = Omit<DisclosurePanelProps, 'style' | 'className'>;
+/**
+ * The collapsible content region of an `AccordionItem`. RAC handles the
+ * show/hide via the parent Disclosure state; we apply the
+ * `vars.motion.transition.{enter,exit}` semantics for the chrome's
+ * appearance change.
+ *
+ * @example
+ * ```tsx
+ * <AccordionPanel>You agree not to misuse the service.</AccordionPanel>
+ * ```
+ */
+declare const AccordionPanel: {
+  ({
+    children,
+    ...props
+  }: AccordionPanelProps): import("react/jsx-runtime").JSX.Element;
+  displayName: "AccordionPanel";
+};
+//#endregion
+export { Accordion, AccordionItem, AccordionItemProps, AccordionPanel, AccordionPanelProps, AccordionProps, AccordionTrigger, AccordionTriggerProps, accordionItemMeta, accordionMeta, accordionPanelMeta, accordionTriggerMeta };