@ttoss/fsl-ui 0.2.4

package/dist/composites/Dialog/Dialog.d.mts

@@ -0,0 +1,234 @@
+
+import { EvaluationsFor } from "../../semantics/taxonomy.mjs";
+import { DialogProps, DialogTriggerProps, ModalOverlayProps } from "react-aria-components";
+import * as React from "react";
+
+//#region src/composites/Dialog/Dialog.d.ts
+/**
+ * Formal semantic identity — what this component *is* (Layer 1).
+ *
+ * Entity = Overlay → CONTRACT.md §1 row:
+ *   colors: `informational`, radii: `surface`, border: `outline.surface`,
+ *   sizing: — (none), spacing: `inset.surface`, typography: `title + body + label`,
+ *   motion: `transition`, elevation: `overlay`.
+ */
+declare const dialogMeta: {
+  readonly displayName: "Dialog";
+  readonly entity: "Overlay";
+  readonly structure: "root";
+};
+/**
+ * Orchestrates open/close state between a trigger and a Dialog.
+ * Pure pass-through to React Aria — no semantic tokens applied.
+ */
+declare const DialogTrigger$1: {
+  (props: DialogTriggerProps): import("react/jsx-runtime").JSX.Element;
+  displayName: string;
+};
+/**
+ * Props for the Dialog content surface.
+ *
+ * The composite owns its layout; pass `style`/`className` on a wrapping
+ * element rather than on the composite root. See CONTRIBUTING §4.
+ */
+interface DialogProps$1 extends Omit<DialogProps, 'style' | 'className'> {
+  /**
+   * Semantic scope marker rendered as the `data-scope` attribute — lets
+   * composites built on Dialog (e.g. ConfirmationDialog) re-scope the
+   * surface for styling and testing hooks.
+   * @default 'dialog'
+   */
+  'data-scope'?: string;
+  /**
+   * Semantic emphasis.
+   * @default 'primary'
+   */
+  evaluation?: EvaluationsFor<(typeof dialogMeta)['entity']>;
+}
+/**
+ * A semantic overlay dialog surface built on React Aria.
+ *
+ * This component renders the Dialog content area — the surface that holds
+ * title, body, and actions. It must be placed inside a `DialogModal`.
+ *
+ * Entity = Overlay → colors: `informational`, radii: `surface`,
+ * border: `outline.surface`, spacing: `inset.surface.md`,
+ * typography: `title.md`, `body.md`, `label.md`.
+ */
+declare const Dialog$1: {
+  ({
+    evaluation,
+    "data-scope": dataScope,
+    children,
+    ...props
+  }: DialogProps$1): import("react/jsx-runtime").JSX.Element;
+  displayName: "Dialog";
+};
+/**
+ * Formal semantic identity for the DialogModal wrapper.
+ *
+ * DialogModal composes two DOM roots: a backdrop (ModalOverlay) and a
+ * surface (Modal). `structure` reflects the *semantically meaningful* part
+ * — the surface carries the evaluation tokens, radii, border, elevation,
+ * and is what a consumer styles. The backdrop is pure infrastructure (a
+ * scrim + positioner) and is not modeled as a separate component.
+ */
+declare const dialogModalMeta: {
+  readonly displayName: "DialogModal";
+  readonly entity: "Overlay";
+  readonly structure: "surface";
+};
+/**
+ * Props for the DialogModal wrapper.
+ */
+interface DialogModalProps extends Omit<ModalOverlayProps, 'style' | 'className'> {
+  /**
+   * Semantic emphasis for the surface colors.
+   * @default 'primary'
+   */
+  evaluation?: EvaluationsFor<(typeof dialogMeta)['entity']>;
+}
+/**
+ * A modal wrapper that renders a scrim backdrop and a positioned surface.
+ *
+ * Combines React Aria's ModalOverlay (backdrop) and Modal (surface)
+ * with semantic tokens from CONTRACT.md §1 (Entity = Overlay).
+ *
+ * @example
+ * ```tsx
+ * <DialogTrigger>
+ *   <Button>Open</Button>
+ *   <DialogModal>
+ *     <Dialog>
+ *       <DialogHeading>Title</DialogHeading>
+ *       <p>Body content here.</p>
+ *     </Dialog>
+ *   </DialogModal>
+ * </DialogTrigger>
+ * ```
+ */
+declare const DialogModal: {
+  ({
+    evaluation,
+    children,
+    ...props
+  }: DialogModalProps): import("react/jsx-runtime").JSX.Element;
+  displayName: string;
+};
+/**
+ * Formal semantic identity — heading slot inside Dialog (FSL §4).
+ */
+declare const dialogHeadingMeta: {
+  readonly displayName: "DialogHeading";
+  readonly entity: "Overlay";
+  readonly structure: "title";
+  readonly composition: "heading";
+};
+/**
+ * Props for the DialogHeading component.
+ */
+interface DialogHeadingProps extends Omit<React.HTMLAttributes<HTMLHeadingElement>, 'style' | 'className'> {
+  /**
+   * HTML heading level.
+   * @default 2
+   */
+  level?: 1 | 2 | 3 | 4 | 5 | 6;
+}
+/**
+ * The title part of a Dialog, using `title.md` typography tokens.
+ * Wired to React Aria's `slot="title"` for accessibility.
+ *
+ * Must be rendered inside a `<Dialog>` — throws otherwise.
+ */
+declare const DialogHeading: {
+  ({
+    level,
+    ...props
+  }: DialogHeadingProps): import("react/jsx-runtime").JSX.Element;
+  displayName: "DialogHeading";
+};
+/**
+ * Formal semantic identity — body slot inside Dialog (FSL §4).
+ */
+declare const dialogBodyMeta: {
+  readonly displayName: "DialogBody";
+  readonly entity: "Overlay";
+  readonly structure: "body";
+  readonly composition: "body";
+};
+/**
+ * Props for the DialogBody component.
+ */
+type DialogBodyProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'style' | 'className'>;
+/**
+ * The body content area of a Dialog, using `body.md` typography tokens.
+ *
+ * Must be rendered inside a `<Dialog>` — throws otherwise.
+ */
+declare const DialogBody: {
+  (props: DialogBodyProps): import("react/jsx-runtime").JSX.Element;
+  displayName: "DialogBody";
+};
+/**
+ * Formal semantic identity — actions slot container inside Dialog.
+ */
+declare const dialogActionsMeta: {
+  readonly displayName: "DialogActions";
+  readonly entity: "Overlay";
+  readonly structure: "actions";
+};
+/**
+ * Platform convention for action-button ordering inside `DialogActions`.
+ *
+ * - `ios` (macOS / iOS / Web default) — cancel (`dismissAction`) on the
+ *   left, confirm (`primaryAction`) on the right. Matches Apple HIG and
+ *   most web design systems.
+ * - `windows` — confirm (`primaryAction`) on the left, cancel
+ *   (`dismissAction`) on the right. Matches the Windows/Fluent convention.
+ */
+type DialogActionsPlatform = 'ios' | 'windows';
+/**
+ * Props for the DialogActions component.
+ */
+interface DialogActionsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style' | 'className'> {
+  /**
+   * Platform convention for ordering action children by their
+   * `composition` prop. Children without a `composition` keep their
+   * source order after the ranked ones.
+   *
+   * @default 'ios'
+   */
+  platform?: DialogActionsPlatform;
+}
+/**
+ * The actions area of a Dialog (buttons, links).
+ *
+ * Runtime behavior: sorts children by their `composition` prop per the
+ * selected `platform` convention — this is what makes `composition` a
+ * behavior-driving FSL dimension and not mere decoration.
+ *
+ * @example
+ * ```tsx
+ * // Defaults to iOS: Cancel | Save
+ * <DialogActions>
+ *   <Button composition="dismissAction" slot="close">Cancel</Button>
+ *   <Button composition="primaryAction">Save</Button>
+ * </DialogActions>
+ *
+ * // Windows convention: Save | Cancel
+ * <DialogActions platform="windows">
+ *   <Button composition="dismissAction" slot="close">Cancel</Button>
+ *   <Button composition="primaryAction">Save</Button>
+ * </DialogActions>
+ * ```
+ */
+declare const DialogActions: {
+  ({
+    platform,
+    children,
+    ...props
+  }: DialogActionsProps): import("react/jsx-runtime").JSX.Element;
+  displayName: "DialogActions";
+};
+//#endregion
+export { Dialog$1 as Dialog, DialogActions, DialogActionsPlatform, DialogActionsProps, DialogBody, DialogBodyProps, DialogHeading, DialogHeadingProps, DialogModal, DialogModalProps, DialogProps$1 as DialogProps, DialogTrigger$1 as DialogTrigger, dialogActionsMeta, dialogBodyMeta, dialogHeadingMeta, dialogMeta, dialogModalMeta };

package/dist/composites/Dialog/Dialog.mjs

@@ -0,0 +1,360 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { createPresenceScope } from "../scope.mjs";
+import { fslVar } from "../../tokens/escapeHatch.mjs";
+import { vars } from "@ttoss/fsl-theme/vars";
+import { Dialog, DialogTrigger, Heading, Modal, ModalOverlay } from "react-aria-components";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+
+//#region src/composites/Dialog/Dialog.tsx
+var dialogScope = createPresenceScope("Dialog");
+/**
+* Formal semantic identity — what this component *is* (Layer 1).
+*
+* Entity = Overlay → CONTRACT.md §1 row:
+*   colors: `informational`, radii: `surface`, border: `outline.surface`,
+*   sizing: — (none), spacing: `inset.surface`, typography: `title + body + label`,
+*   motion: `transition`, elevation: `overlay`.
+*/
+var dialogMeta = {
+  displayName: "Dialog",
+  entity: "Overlay",
+  structure: "root"
+};
+/**
+* Orchestrates open/close state between a trigger and a Dialog.
+* Pure pass-through to React Aria — no semantic tokens applied.
+*/
+var DialogTrigger$1 = props => {
+  return /* @__PURE__ */jsx(DialogTrigger, {
+    ...props
+  });
+};
+DialogTrigger$1.displayName = "DialogTrigger";
+/**
+* A semantic overlay dialog surface built on React Aria.
+*
+* This component renders the Dialog content area — the surface that holds
+* title, body, and actions. It must be placed inside a `DialogModal`.
+*
+* Entity = Overlay → colors: `informational`, radii: `surface`,
+* border: `outline.surface`, spacing: `inset.surface.md`,
+* typography: `title.md`, `body.md`, `label.md`.
+*/
+var Dialog$1 = ({
+  evaluation = "primary",
+  "data-scope": dataScope = "dialog",
+  children,
+  ...props
+}) => {
+  const colors = vars.colors.informational[evaluation];
+  return /* @__PURE__ */jsx(Dialog, {
+    ...props,
+    "data-scope": dataScope,
+    "data-part": "root",
+    "data-evaluation": evaluation,
+    style: {
+      boxSizing: "border-box",
+      outline: "none",
+      padding: vars.spacing.inset.surface.md,
+      color: colors?.text?.default
+    },
+    children: state => {
+      return /* @__PURE__ */jsx(dialogScope.Provider, {
+        children: typeof children === "function" ? children(state) : children
+      });
+    }
+  });
+};
+Dialog$1.displayName = dialogMeta.displayName;
+/**
+* Formal semantic identity for the DialogModal wrapper.
+*
+* DialogModal composes two DOM roots: a backdrop (ModalOverlay) and a
+* surface (Modal). `structure` reflects the *semantically meaningful* part
+* — the surface carries the evaluation tokens, radii, border, elevation,
+* and is what a consumer styles. The backdrop is pure infrastructure (a
+* scrim + positioner) and is not modeled as a separate component.
+*/
+var dialogModalMeta = {
+  displayName: "DialogModal",
+  entity: "Overlay",
+  structure: "surface"
+};
+var DIALOG_MAX_WIDTH_DEFAULT = "min(500px, 90vw)";
+var DIALOG_MAX_HEIGHT_DEFAULT = "90vh";
+/**
+* The active enter/exit motion spec, or `null` when the surface is at rest.
+* Collapses the repeated `transition[isEntering ? 'enter' : 'exit']` lookups
+* into a single resolution the style builders read from.
+*/
+var resolveTransitionPhase = ({
+  isEntering,
+  isExiting
+}) => {
+  if (isEntering) return vars.motion.transition.enter;
+  if (isExiting) return vars.motion.transition.exit;
+  return null;
+};
+/** Scrim backdrop style — dims + centers, fades on enter/exit. */
+var buildBackdropStyle = ({
+  isEntering,
+  isExiting
+}) => {
+  const phase = resolveTransitionPhase({
+    isEntering,
+    isExiting
+  });
+  return {
+    position: "fixed",
+    inset: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: vars.zIndex.layer.blocking,
+    backgroundColor: vars.overlay.scrim,
+    transition: phase ? `opacity ${phase.duration} ${phase.easing}` : void 0,
+    opacity: isExiting ? 0 : 1
+  };
+};
+/** Modal surface style — the blocking card; scales + fades on enter/exit. */
+var buildModalSurfaceStyle = ({
+  colors,
+  isEntering,
+  isExiting
+}) => {
+  const phase = resolveTransitionPhase({
+    isEntering,
+    isExiting
+  });
+  const inTransition = isEntering || isExiting;
+  return {
+    boxSizing: "border-box",
+    maxWidth: fslVar("--fsl-dialog-max-width", DIALOG_MAX_WIDTH_DEFAULT),
+    maxHeight: fslVar("--fsl-dialog-max-height", DIALOG_MAX_HEIGHT_DEFAULT),
+    overflow: "auto",
+    borderRadius: vars.radii.surface,
+    borderWidth: vars.border.outline.surface.width,
+    borderStyle: vars.border.outline.surface.style,
+    borderColor: colors?.border?.default,
+    boxShadow: vars.elevation.surface.overlay,
+    backgroundColor: colors?.background?.default,
+    outline: "none",
+    transition: phase ? `transform ${phase.duration} ${phase.easing}, opacity ${phase.duration} ${phase.easing}` : void 0,
+    transform: inTransition ? "scale(0.95)" : "scale(1)",
+    opacity: inTransition ? 0 : 1
+  };
+};
+/**
+* A modal wrapper that renders a scrim backdrop and a positioned surface.
+*
+* Combines React Aria's ModalOverlay (backdrop) and Modal (surface)
+* with semantic tokens from CONTRACT.md §1 (Entity = Overlay).
+*
+* @example
+* ```tsx
+* <DialogTrigger>
+*   <Button>Open</Button>
+*   <DialogModal>
+*     <Dialog>
+*       <DialogHeading>Title</DialogHeading>
+*       <p>Body content here.</p>
+*     </Dialog>
+*   </DialogModal>
+* </DialogTrigger>
+* ```
+*/
+var DialogModal = ({
+  evaluation = "primary",
+  children,
+  ...props
+}) => {
+  const colors = vars.colors.informational[evaluation];
+  return /* @__PURE__ */jsx(ModalOverlay, {
+    ...props,
+    "data-scope": "dialog",
+    "data-part": "backdrop",
+    style: ({
+      isEntering,
+      isExiting
+    }) => {
+      return buildBackdropStyle({
+        isEntering,
+        isExiting
+      });
+    },
+    children: /* @__PURE__ */jsx(Modal, {
+      "data-scope": "dialog",
+      "data-part": "surface",
+      "data-evaluation": evaluation,
+      style: ({
+        isEntering,
+        isExiting
+      }) => {
+        return buildModalSurfaceStyle({
+          colors,
+          isEntering,
+          isExiting
+        });
+      },
+      children
+    })
+  });
+};
+DialogModal.displayName = "DialogModal";
+/**
+* Formal semantic identity — heading slot inside Dialog (FSL §4).
+*/
+var dialogHeadingMeta = {
+  displayName: "DialogHeading",
+  entity: "Overlay",
+  structure: "title",
+  composition: "heading"
+};
+/**
+* The title part of a Dialog, using `title.md` typography tokens.
+* Wired to React Aria's `slot="title"` for accessibility.
+*
+* Must be rendered inside a `<Dialog>` — throws otherwise.
+*/
+var DialogHeading = ({
+  level = 2,
+  ...props
+}) => {
+  dialogScope.use(dialogHeadingMeta.displayName);
+  return /* @__PURE__ */jsx(Heading, {
+    slot: "title",
+    level,
+    ...props,
+    "data-scope": "dialog",
+    "data-part": "title",
+    style: {
+      margin: 0,
+      ...vars.text.title.md
+    }
+  });
+};
+DialogHeading.displayName = dialogHeadingMeta.displayName;
+/**
+* Formal semantic identity — body slot inside Dialog (FSL §4).
+*/
+var dialogBodyMeta = {
+  displayName: "DialogBody",
+  entity: "Overlay",
+  structure: "body",
+  composition: "body"
+};
+/**
+* The body content area of a Dialog, using `body.md` typography tokens.
+*
+* Must be rendered inside a `<Dialog>` — throws otherwise.
+*/
+var DialogBody = props => {
+  dialogScope.use(dialogBodyMeta.displayName);
+  return /* @__PURE__ */jsx("div", {
+    ...props,
+    "data-scope": "dialog",
+    "data-part": "body",
+    style: {
+      ...vars.text.body.md,
+      marginBlockStart: vars.spacing.gap.stack.md
+    }
+  });
+};
+DialogBody.displayName = dialogBodyMeta.displayName;
+/**
+* Formal semantic identity — actions slot container inside Dialog.
+*/
+var dialogActionsMeta = {
+  displayName: "DialogActions",
+  entity: "Overlay",
+  structure: "actions"
+};
+/**
+* Logical positions for each action composition role, per platform.
+* Lower number = closer to the start of the flex row (left, when LTR).
+*
+* `justifyContent: 'flex-end'` pushes the row to the right; the platform
+* mapping controls the *relative* order of actions within that row.
+*/
+var ACTION_ORDER = {
+  ios: {
+    dismissAction: 0,
+    secondaryAction: 1,
+    primaryAction: 2
+  },
+  windows: {
+    primaryAction: 0,
+    secondaryAction: 1,
+    dismissAction: 2
+  }
+};
+/** Unknown / unclassified children preserve their source order after the ranked ones. */
+var UNRANKED = Number.POSITIVE_INFINITY;
+var getChildComposition = child => {
+  if (!React.isValidElement(child)) return void 0;
+  const props = child.props;
+  return typeof props.composition === "string" ? props.composition : void 0;
+};
+/**
+* The actions area of a Dialog (buttons, links).
+*
+* Runtime behavior: sorts children by their `composition` prop per the
+* selected `platform` convention — this is what makes `composition` a
+* behavior-driving FSL dimension and not mere decoration.
+*
+* @example
+* ```tsx
+* // Defaults to iOS: Cancel | Save
+* <DialogActions>
+*   <Button composition="dismissAction" slot="close">Cancel</Button>
+*   <Button composition="primaryAction">Save</Button>
+* </DialogActions>
+*
+* // Windows convention: Save | Cancel
+* <DialogActions platform="windows">
+*   <Button composition="dismissAction" slot="close">Cancel</Button>
+*   <Button composition="primaryAction">Save</Button>
+* </DialogActions>
+* ```
+*/
+var DialogActions = ({
+  platform = "ios",
+  children,
+  ...props
+}) => {
+  dialogScope.use(dialogActionsMeta.displayName);
+  const table = ACTION_ORDER[platform];
+  const sorted = React.Children.toArray(children).map((child, index) => {
+    const composition = getChildComposition(child);
+    return {
+      child,
+      rank: composition !== void 0 ? table[composition] ?? UNRANKED : UNRANKED,
+      index
+    };
+  }).sort((a, b) => {
+    if (a.rank !== b.rank) return a.rank - b.rank;
+    return a.index - b.index;
+  }).map(({
+    child
+  }) => {
+    return child;
+  });
+  return /* @__PURE__ */jsx("div", {
+    ...props,
+    "data-scope": "dialog",
+    "data-part": "actions",
+    "data-platform": platform,
+    style: {
+      display: "flex",
+      justifyContent: "flex-end",
+      gap: vars.spacing.gap.inline.md,
+      marginBlockStart: vars.spacing.gap.stack.lg
+    },
+    children: sorted
+  });
+};
+DialogActions.displayName = dialogActionsMeta.displayName;
+
+//#endregion
+export { Dialog$1 as Dialog, DialogActions, DialogBody, DialogHeading, DialogModal, DialogTrigger$1 as DialogTrigger, dialogActionsMeta, dialogBodyMeta, dialogHeadingMeta, dialogMeta, dialogModalMeta };