@ttoss/fsl-ui 0.2.4

package/dist/composites/Accordion/Accordion.d.mts

@@ -0,0 +1,176 @@
+
+import { EvaluationsFor } from "../../semantics/taxonomy.mjs";
+import { ButtonProps, DisclosureGroupProps, DisclosurePanelProps, DisclosureProps } from "react-aria-components";
+import * as React from "react";
+
+//#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 };

package/dist/composites/Accordion/Accordion.mjs

@@ -0,0 +1,270 @@
+/** 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, Disclosure, DisclosureGroup, DisclosurePanel, DisclosureStateContext, Heading } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+
+//#region src/composites/Accordion/Accordion.tsx
+var accordionScope = 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__ */jsx(accordionScope.Provider, {
+    value: {
+      evaluation
+    },
+    children: /* @__PURE__ */jsx(DisclosureGroup, {
+      ...props,
+      "data-scope": "accordion",
+      "data-part": "root",
+      "data-evaluation": evaluation,
+      style: {
+        boxSizing: "border-box",
+        display: "flex",
+        flexDirection: "column",
+        borderWidth: vars.border.outline.control.width,
+        borderStyle: vars.border.outline.control.style,
+        borderColor: vars.colors.navigation[evaluation]?.border?.default ?? "transparent",
+        borderRadius: 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__ */jsx(Disclosure, {
+    ...props,
+    "data-scope": "accordion",
+    "data-part": "item",
+    style: {
+      boxSizing: "border-box",
+      borderBlockStartWidth: vars.border.divider.width,
+      borderBlockStartStyle: vars.border.divider.style,
+      borderBlockStartColor: 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 = vars.colors.navigation[evaluation];
+  const isExpanded = React.useContext(DisclosureStateContext)?.isExpanded ?? false;
+  return /* @__PURE__ */jsx(Heading, {
+    level: headingLevel,
+    "data-scope": "accordion",
+    "data-part": "header",
+    style: {
+      margin: 0
+    },
+    children: /* @__PURE__ */jsxs(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: vars.spacing.gap.inline.sm,
+          minHeight: vars.sizing.hit.base,
+          paddingBlock: vars.spacing.inset.control.md,
+          paddingInline: vars.spacing.inset.control.md,
+          border: "none",
+          background: "none",
+          backgroundColor: resolveInteractiveStyle(c?.background, flags),
+          color: resolveInteractiveStyle(c?.text, flags) ?? c?.text?.default,
+          cursor: isDisabled ? "not-allowed" : "pointer",
+          opacity: isDisabled ? vars.opacity.disabled : void 0,
+          ...vars.text.label.md,
+          textAlign: "start",
+          transitionProperty: "background-color, color",
+          transitionDuration: vars.motion.transition.enter.duration,
+          transitionTimingFunction: vars.motion.transition.enter.easing,
+          outline: focusRingOutline(isFocusVisible),
+          outlineOffset: "-2px"
+        };
+      },
+      children: [/* @__PURE__ */jsx("span", {
+        "data-scope": "accordion",
+        "data-part": "label",
+        style: {
+          flex: 1
+        },
+        children
+      }), /* @__PURE__ */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 ? vars.motion.transition.enter.duration : vars.motion.transition.exit.duration,
+          transitionTimingFunction: isExpanded ? vars.motion.transition.enter.easing : vars.motion.transition.exit.easing
+        },
+        children: /* @__PURE__ */jsx(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 = vars.colors.navigation[evaluation];
+  return /* @__PURE__ */jsx(DisclosurePanel, {
+    ...props,
+    "data-scope": "accordion",
+    "data-part": "content",
+    style: {
+      boxSizing: "border-box",
+      paddingBlock: vars.spacing.inset.control.md,
+      paddingInline: vars.spacing.inset.control.md,
+      backgroundColor: c?.background?.default,
+      color: c?.text?.default,
+      ...vars.text.body.md
+    },
+    children
+  });
+};
+AccordionPanel.displayName = accordionPanelMeta.displayName;
+
+//#endregion
+export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, accordionItemMeta, accordionMeta, accordionPanelMeta, accordionTriggerMeta };

package/dist/composites/ConfirmationDialog/ConfirmationDialog.cjs

@@ -0,0 +1,206 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
+const require_Button = require('../../components/Button/Button.cjs');
+const require_Dialog = require('../Dialog/Dialog.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+react = require_runtime.__toESM(react);
+
+//#region src/composites/ConfirmationDialog/ConfirmationDialog.tsx
+/**
+* Formal semantic identity — ConfirmationDialog root (Overlay entity).
+*/
+var confirmationDialogMeta = {
+  displayName: "ConfirmationDialog",
+  entity: "Overlay",
+  structure: "root"
+};
+/**
+* Owns the consequence-driven confirm mechanism so the component body stays
+* declarative. `destructive` requires a two-click arm→confirm within
+* `armWindowMs`; everything else confirms on the first click. Toggling
+* `consequence` mid-lifetime resets arming via the render-phase adjustment
+* pattern (no extra commit).
+*/
+var useArmedConfirm = ({
+  consequence,
+  onConfirm,
+  armWindowMs
+}) => {
+  const requiresArming = consequence === "destructive";
+  const [isArmed, setIsArmed] = react.useState(false);
+  const armTimerRef = react.useRef(null);
+  const clearArmTimer = react.useCallback(() => {
+    if (armTimerRef.current !== null) {
+      clearTimeout(armTimerRef.current);
+      armTimerRef.current = null;
+    }
+  }, []);
+  const [prevConsequence, setPrevConsequence] = react.useState(consequence);
+  if (prevConsequence !== consequence) {
+    setPrevConsequence(consequence);
+    setIsArmed(false);
+  }
+  react.useEffect(() => {
+    return () => {
+      clearArmTimer();
+    };
+  }, [clearArmTimer]);
+  const reset = react.useCallback(() => {
+    clearArmTimer();
+    setIsArmed(false);
+  }, [clearArmTimer]);
+  const arm = react.useCallback(() => {
+    setIsArmed(true);
+    clearArmTimer();
+    armTimerRef.current = setTimeout(() => {
+      armTimerRef.current = null;
+      setIsArmed(false);
+    }, armWindowMs);
+  }, [armWindowMs, clearArmTimer]);
+  const confirm = close => {
+    if (!(!requiresArming || isArmed)) {
+      arm();
+      return;
+    }
+    reset();
+    onConfirm();
+    close();
+  };
+  return {
+    isArmed,
+    confirm,
+    reset
+  };
+};
+/**
+* A Dialog composite that demands confirmation before invoking a side effect.
+*
+* Reads its `consequence` prop at runtime to select the confirm mechanism —
+* this is what makes `Consequence` a behavior-driving FSL dimension and not
+* decoration. For `destructive`, the confirm button emits
+* `data-arming="true"` while awaiting the second click. (`data-pending` is
+* reserved by React Aria for `isPending`, which also toggles
+* `aria-disabled` — unsuitable here because the armed button must remain
+* clickable for the second press.)
+*
+* @example Single-click commit
+* ```tsx
+* <ConfirmationDialog
+*   trigger={<Button>Publish</Button>}
+*   title="Publish post?"
+*   confirmLabel="Publish"
+*   cancelLabel="Cancel"
+*   consequence="committing"
+*   onConfirm={publish}
+* >
+*   Your post will become visible to everyone.
+* </ConfirmationDialog>
+* ```
+*
+* @example Two-click destructive confirm
+* ```tsx
+* <ConfirmationDialog
+*   trigger={<Button evaluation="negative">Delete account</Button>}
+*   title="Delete account?"
+*   confirmLabel="Delete"
+*   armedLabel="Click again to confirm"
+*   cancelLabel="Cancel"
+*   consequence="destructive"
+*   evaluation="negative"
+*   onConfirm={deleteAccount}
+* >
+*   This action cannot be undone.
+* </ConfirmationDialog>
+* ```
+*
+* @example Visually destructive but single-click (escape-hatch pattern)
+*
+* Use `consequence="committing"` with `evaluation="negative"` when the
+* action is irreversible-looking but does **not** warrant two-click arming
+* (e.g. "Remove from list", "Unsubscribe"). The confirm button renders in
+* the negative color without engaging the arming protocol.
+*
+* ```tsx
+* <ConfirmationDialog
+*   trigger={<Button evaluation="negative">Unsubscribe</Button>}
+*   title="Unsubscribe?"
+*   confirmLabel="Unsubscribe"
+*   cancelLabel="Cancel"
+*   consequence="committing"
+*   evaluation="negative"
+*   onConfirm={unsubscribe}
+* />
+* ```
+*/
+var ConfirmationDialog = ({
+  trigger,
+  title,
+  children,
+  confirmLabel,
+  armedLabel,
+  cancelLabel,
+  consequence = "neutral",
+  evaluation = "primary",
+  onConfirm,
+  armWindowMs = 2e3,
+  platform = "ios"
+}) => {
+  const {
+    isArmed,
+    confirm,
+    reset
+  } = useArmedConfirm({
+    consequence,
+    onConfirm,
+    armWindowMs
+  });
+  const currentConfirmLabel = consequence === "destructive" && isArmed ? armedLabel : confirmLabel;
+  return /* @__PURE__ */(0, react_jsx_runtime.jsxs)(require_Dialog.DialogTrigger, {
+    onOpenChange: open => {
+      if (!open) reset();
+    },
+    children: [trigger, /* @__PURE__ */(0, react_jsx_runtime.jsx)(require_Dialog.DialogModal, {
+      children: /* @__PURE__ */(0, react_jsx_runtime.jsx)(require_Dialog.Dialog, {
+        "data-scope": "confirmation-dialog",
+        "data-consequence": consequence,
+        children: ({
+          close
+        }) => {
+          return /* @__PURE__ */(0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, {
+            children: [/* @__PURE__ */(0, react_jsx_runtime.jsx)(require_Dialog.DialogHeading, {
+              children: title
+            }), children !== void 0 && /* @__PURE__ */(0, react_jsx_runtime.jsx)(require_Dialog.DialogBody, {
+              children
+            }), /* @__PURE__ */(0, react_jsx_runtime.jsxs)(require_Dialog.DialogActions, {
+              platform,
+              children: [/* @__PURE__ */(0, react_jsx_runtime.jsx)(require_Button.Button, {
+                slot: "close",
+                composition: "dismissAction",
+                evaluation: "muted",
+                onPress: () => {
+                  return reset();
+                },
+                children: cancelLabel
+              }), /* @__PURE__ */(0, react_jsx_runtime.jsx)(require_Button.Button, {
+                composition: "primaryAction",
+                consequence,
+                evaluation,
+                "data-arming": isArmed ? "true" : void 0,
+                onPress: () => {
+                  return confirm(close);
+                },
+                children: currentConfirmLabel
+              })]
+            })]
+          });
+        }
+      })
+    })]
+  });
+};
+ConfirmationDialog.displayName = confirmationDialogMeta.displayName;
+
+//#endregion
+exports.ConfirmationDialog = ConfirmationDialog;
+exports.confirmationDialogMeta = confirmationDialogMeta;