@fairgarden/design 0.1.0-alpha.0 → 0.1.0-alpha.2

package/navigation/toolbar/Toolbar.js

@@ -0,0 +1,174 @@
+'use client';
+import * as React from 'react';
+import { Toolbar as BaseToolbar } from '@base-ui/react/toolbar';
+import { cva } from 'class-variance-authority';
+import { Button } from '../../actions/button';
+import { Link } from '../../actions/link';
+import { Menu, MenuPopup, MenuTrigger } from '../../overlays/menu';
+import { Tooltip, TooltipPopup, TooltipProvider, TooltipTrigger } from '../../overlays/tooltip';
+import { cx, resolveClassName } from '../../utils/className';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import styles from './toolbar.module.css';
+/*
+ * Toolbar (§9.11): a compact row of tools acting on one object or region.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: toolbar.module.css; CVA functions `toolbar` (the row) and
+ *   `toolbarBottomRule` (the optional bottom rule).
+ * - Axes: `kind` → list | format | context | figure → list, format,
+ *   context, figure; `docked` → `docked`; `primary`, `secondary` → scales
+ *   module classes (the toolbar's own parts use only the primary).
+ *   Orientation is Base UI's own prop (`data-orientation`).
+ *   `toolbarBottomRule`: `variant` → rule | hairline.
+ * - Compound variants: none.
+ * - Defaults: kind list, docked false; color axes: none.
+ * - Color fallback: inherits the band's scope.
+ * - States: data-orientation on `base`, `group` and `separator` → the row
+ *   direction and the separator's axis; items are Buttons, Links, Toggles
+ *   and Menu triggers whose own modules draw hover, press, focus and
+ *   disabled (§9.2, §9.4, §9.7) [D181]; disabled items stay focusable
+ *   (`focusableWhenDisabled`); a separator beside a data-pressed item hides.
+ * - Parts: base (the row), group, separator, count, more, bottomRule; plus
+ *   collapsing / label (a ToolbarButton that is icon-only below 768 px, and
+ *   its label), lowPriority (an item that moves into "More") and caption
+ *   (the printed state line).
+ * - Scope: none.
+ * - Container: `base` is the inline-size container `toolbar` (named, so a
+ *   toolbar inside a card answers to itself). Baseline: icon-only `text`
+ *   Buttons with names and Tooltips, low-priority items in "More"; viewport
+ *   fallback labels from --md-n-above; container from 768 px labels return
+ *   (§5.10.2). A toolbar never scrolls sideways and never wraps.
+ */
+export const toolbar = cva(styles.base, {
+    variants: {
+        kind: {
+            list: styles.list,
+            format: styles.format,
+            context: styles.context,
+            figure: styles.figure,
+        },
+        docked: {
+            true: styles.docked,
+        },
+        // Color axes: never defaulted, so an omitted prop inherits the scope [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+    defaultVariants: {
+        kind: 'list',
+        docked: false,
+    },
+});
+/** The optional bottom rule (§9.11): `rule` governs a list or table; `hairline` where whitespace also separates. */
+export const toolbarBottomRule = cva(styles.bottomRule, {
+    variants: {
+        variant: {
+            rule: styles.rule,
+            hairline: styles.hairline,
+        },
+    },
+    defaultVariants: {
+        variant: 'rule',
+    },
+});
+/**
+ * A Base UI Toolbar: one Tab stop enters it and arrow keys move within it.
+ * Compose ToolbarGroup, ToolbarSeparator, ToolbarButton, ToolbarLink,
+ * ToolbarCount and ToolbarMore; a Toggle or a Menu trigger joins through
+ * Base UI's `render`, e.g. `<ToolbarItem render={<Toggle … />} />`. The row
+ * takes the band's ground and has no face of its own. Avoid saturated
+ * grounds; on a photo, use media buttons.
+ */
+export function Toolbar(props) {
+    const { kind, docked, primary, secondary, caption, className, children, ...rest } = props;
+    const scope = useScopeAttributes();
+    return (React.createElement(React.Fragment, null,
+        React.createElement(BaseToolbar.Root, { ...rest, ...scope, className: resolveClassName(className, (extra) => toolbar({ kind, docked, primary, secondary, className: extra })) },
+            React.createElement(TooltipProvider, null, children)),
+        caption != null ? (React.createElement("p", { ...scope, className: styles.caption }, caption)) : null));
+}
+/** Groups related items, `--size-px-1` apart (Base UI Toolbar.Group). `disabled` disables the whole group. */
+export function ToolbarGroup(props) {
+    const { className, ...rest } = props;
+    return (React.createElement(BaseToolbar.Group, { ...rest, className: resolveClassName(className, (extra) => cx(styles.group, extra)) }));
+}
+/**
+ * A vertical `--border-size-1` rule in `--role-rule`, `--size-px-4` tall
+ * with `--size-px-2` each side, announced to assistive technology. It takes
+ * the axis opposite the toolbar's and hides beside a pressed segment.
+ */
+export function ToolbarSeparator(props) {
+    const { className, ...rest } = props;
+    return (React.createElement(BaseToolbar.Separator, { ...rest, className: resolveClassName(className, (extra) => cx(styles.separator, extra)) }));
+}
+/**
+ * A roving-focus slot for a control that is not a ToolbarButton: a Toggle
+ * (§9.4) or a Menu trigger (§9.7), passed as `render`. Disabled items stay
+ * focusable by default.
+ */
+export function ToolbarItem(props) {
+    return React.createElement(BaseToolbar.Button, { ...props });
+}
+/**
+ * A Button (§9.2) in the toolbar's roving focus. Defaults: `variant="text"`,
+ * `size` `sm` (`md` when `iconOnly`). A `text` Button with an `icon` is
+ * icon-only below 768 px of the toolbar's width, its label kept as the
+ * accessible name and shown in a Tooltip; from 768 px the label returns.
+ * An `iconOnly` Button always carries the Tooltip. Disabled buttons stay
+ * focusable so their name can be read.
+ */
+export function ToolbarButton(props) {
+    const { lowPriority, variant, size, className, children, disabled, focusableWhenDisabled = true, ...rest } = props;
+    const resolvedVariant = variant ?? 'text';
+    const collapsing = !rest.iconOnly && rest.icon != null && resolvedVariant === 'text';
+    const named = Boolean(rest.iconOnly) || collapsing;
+    const ownClasses = cx(collapsing && styles.collapsing, lowPriority && styles.lowPriority);
+    const buttonProps = {
+        ...rest,
+        variant: resolvedVariant,
+        size: size ?? (rest.iconOnly ? 'md' : 'sm'),
+        disabled,
+        focusableWhenDisabled,
+        className: resolveClassName(className, (extra) => cx(ownClasses, extra)),
+        children: collapsing ? React.createElement("span", { className: styles.label }, children) : children,
+    };
+    const item = (React.createElement(BaseToolbar.Button, { disabled: disabled, focusableWhenDisabled: focusableWhenDisabled, render: React.createElement(Button, { ...buttonProps }) }));
+    if (!named)
+        return item;
+    return (React.createElement(Tooltip, null,
+        React.createElement(TooltipTrigger, { render: item }),
+        React.createElement(TooltipPopup, null, children)));
+}
+/**
+ * A Link (§9.3) in the toolbar's roving focus (Base UI Toolbar.Link).
+ * Default `kind="nav"`: no rest underline, Link's hover and ring.
+ */
+export function ToolbarLink(props) {
+    const { kind, ...rest } = props;
+    return React.createElement(BaseToolbar.Link, { render: React.createElement(Link, { kind: kind ?? 'nav', ...rest }) });
+}
+/** The list's count in mono `type-data`, `--primary12`, in parentheses: "Items (54)". */
+export function ToolbarCount(props) {
+    const { className, ...rest } = props;
+    return React.createElement("span", { ...rest, className: cx(styles.count, className) });
+}
+/**
+ * The "…" overflow: an icon-only `more_horiz` `text` Button named "More"
+ * that opens a Menu. It shows only below 768 px of the toolbar's width,
+ * while the `lowPriority` items are hidden, so list those items here.
+ */
+export function ToolbarMore(props) {
+    const { label = 'More', align = 'end', morph = true, children, ...popupProps } = props;
+    return (React.createElement(Menu, { morph: morph },
+        React.createElement(Tooltip, null,
+            React.createElement(TooltipTrigger, { render: React.createElement(BaseToolbar.Button, { render: React.createElement(MenuTrigger, { variant: "text", size: "sm", iconOnly: true, icon: "more_horiz", className: styles.more }, label) }) }),
+            React.createElement(TooltipPopup, null, label)),
+        React.createElement(MenuPopup, { ...popupProps, align: align }, children)));
+}
+/** The optional `--border-size-1` rule along the toolbar's bottom edge; place it last. Decorative. */
+export function ToolbarBottomRule(props) {
+    const { variant, className, ...rest } = props;
+    return (React.createElement("span", { "aria-hidden": "true", ...rest, className: toolbarBottomRule({ variant, className }) }));
+}
+//# sourceMappingURL=Toolbar.js.map

package/navigation/toolbar/Toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.js","sourceRoot":"","sources":["../../src/navigation/toolbar/Toolbar.tsx"],"names":[],"mappings":"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"}

package/navigation/toolbar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/navigation/toolbar/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA"}

package/navigation/toolbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/navigation/toolbar/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA"}

package/navigation/toolbar/toolbar.module.css

@@ -0,0 +1,273 @@
+/*
+ * Toolbar (§9.11). CVA functions `toolbar` and `toolbarBottomRule` in
+ * Toolbar.tsx. Parts: base (the row, the `toolbar` container), group,
+ * separator, count, more (the "…" trigger), bottomRule (with its `rule` /
+ * `hairline` classes), item (a ToolbarButton's root), collapsing and label
+ * (the icon-only-below-768 label), lowPriority, caption (print only). The
+ * module styles only these layout parts; items keep their own modules
+ * (§9.2, §9.4, §9.7). Colors follow the §9.11 Color roles table through
+ * role variables only.
+ */
+
+/* Composition sits in top-level rules, outside the layers: Lightning CSS
+ * (Next.js with Turbopack) rejects `composes` inside @layer or any nesting.
+ * The composed classes keep their own layers. */
+.count {
+  composes: typeData from '../../utils/type.module.css';
+}
+
+.caption {
+  composes: typeCaption from '../../utils/type.module.css';
+}
+
+.bottomRule {
+  composes: lineSolid from '../../utils/line.module.css';
+}
+
+@layer base {
+  /* The row: --size-px-8 tall (--fgd-size-control-md items plus --size-px-1
+     padding), the band's ground, no face of its own. Never wraps. */
+  .base {
+    container: toolbar / inline-size;
+    position: relative;
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    gap: var(--size-px-1);
+    box-sizing: border-box;
+    min-block-size: var(--size-px-8);
+    padding-block: var(--size-px-1);
+    color: var(--primary12);
+  }
+
+  .group {
+    display: flex;
+    flex: none;
+    align-items: center;
+    gap: var(--size-px-1);
+  }
+
+  /* Vertical --border-size-1 in --role-rule; the axis rules are in `states`. */
+  .separator {
+    flex: none;
+    align-self: center;
+    margin: 0;
+    border: 0 solid var(--role-rule);
+  }
+
+  /* "Items (54)": mono, --primary12. */
+  .count {
+    flex: none;
+    color: var(--primary12);
+    white-space: nowrap;
+  }
+
+  /* Baseline: the label stays the accessible name, visually hidden. */
+  .label {
+    position: absolute;
+    inline-size: var(--border-size-1);
+    block-size: var(--border-size-1);
+    margin: calc(var(--border-size-1) * -1);
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  /* The bottom rule: --border-size-1 along the row's bottom edge. */
+  .bottomRule {
+    position: absolute;
+    inset-inline: 0;
+    inset-block-end: 0;
+    border-width: 0;
+    border-block-end-width: var(--border-size-1);
+    pointer-events: none;
+  }
+
+  .caption {
+    display: none;
+    margin: 0;
+  }
+}
+
+@layer variants {
+  /* List: the count at the start, its actions at the end. */
+  .list .count {
+    margin-inline-end: auto;
+  }
+
+  /* Format: groups of icon toggles and buttons, start-aligned, divided by
+     vertical rules. */
+  .format {
+    justify-content: flex-start;
+  }
+
+  /* Context: tools at the start, the breadcrumb centered, a toggle at the end. */
+  .context {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  }
+
+  .context > :nth-child(1) {
+    justify-self: start;
+  }
+
+  .context > :nth-child(2) {
+    justify-self: center;
+  }
+
+  .context > :nth-child(3) {
+    justify-self: end;
+  }
+
+  /* Figure: the controls spread under the figure, a step pager at the end. */
+  .figure {
+    justify-content: space-between;
+  }
+
+  /* Docked: opaque on the band's ground, a --border-size-1 --role-rule on the
+     content side, --fgd-space-margin at the ends, --layer-2 [D23, D89]. */
+  .docked {
+    position: sticky;
+    inset-block-start: 0;
+    z-index: var(--layer-2);
+    padding-inline: var(--fgd-space-margin);
+    border-block-end: var(--border-size-1) solid var(--role-rule);
+    background-color: var(--role-ground);
+  }
+
+  .docked .bottomRule {
+    display: none;
+  }
+
+  .rule {
+    border-color: var(--role-rule);
+  }
+
+  .hairline {
+    border-color: var(--role-hairline);
+  }
+
+  /* Baseline, container-first [D163]: icon-only `text` Buttons (the Button's
+     gap closes with its label) and the low-priority items inside "More". */
+  .collapsing {
+    column-gap: 0;
+  }
+
+  .lowPriority {
+    display: none;
+  }
+
+  /* Viewport fallback: labels return from --md-n-above. */
+  @media (min-width: 768px) {
+    .collapsing {
+      column-gap: revert-layer;
+    }
+
+    .collapsing .label {
+      position: static;
+      inline-size: auto;
+      block-size: auto;
+      margin: 0;
+      overflow: visible;
+      clip-path: none;
+    }
+
+    .lowPriority {
+      display: revert-layer;
+    }
+
+    .more {
+      display: none;
+    }
+  }
+
+  /* Container thresholds (§5.10.2): from 768 px of the toolbar, labels return. */
+  @container toolbar (width < 768px) {
+    .collapsing {
+      column-gap: 0;
+    }
+
+    .collapsing .label {
+      position: absolute;
+      inline-size: var(--border-size-1);
+      block-size: var(--border-size-1);
+      margin: calc(var(--border-size-1) * -1);
+      overflow: hidden;
+      clip-path: inset(50%);
+    }
+
+    .lowPriority {
+      display: none;
+    }
+
+    .more {
+      display: revert-layer;
+    }
+  }
+
+  @container toolbar (width >= 768px) {
+    .collapsing {
+      column-gap: revert-layer;
+    }
+
+    .collapsing .label {
+      position: static;
+      inline-size: auto;
+      block-size: auto;
+      margin: 0;
+      overflow: visible;
+      clip-path: none;
+    }
+
+    .lowPriority {
+      display: revert-layer;
+    }
+
+    .more {
+      display: none;
+    }
+  }
+}
+
+@layer states {
+  /* data-orientation: the row's direction and the separator's axis. */
+  .base[data-orientation='vertical'] {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .group[data-orientation='vertical'] {
+    flex-direction: column;
+  }
+
+  .separator[data-orientation='vertical'] {
+    block-size: var(--size-px-4);
+    margin-inline: calc(var(--size-px-2) - var(--size-px-1));
+    border-inline-start-width: var(--border-size-1);
+  }
+
+  .separator[data-orientation='horizontal'] {
+    inline-size: var(--size-px-4);
+    margin-block: calc(var(--size-px-2) - var(--size-px-1));
+    border-block-start-width: var(--border-size-1);
+  }
+
+  /* Hidden beside a pressed segment (§9.4); its space is kept. */
+  [data-pressed] + .separator,
+  .separator:has(+ [data-pressed]) {
+    visibility: hidden;
+  }
+}
+
+@layer print {
+  @media print {
+    /* The toolbar is hidden; the state it carries prints as a caption (§9.11). */
+    .base {
+      display: none;
+    }
+
+    .caption {
+      display: block;
+    }
+  }
+}

package/overlays/alert-dialog/AlertDialog.d.ts

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog';
+import { type ButtonProps } from '../../actions/button';
+import { type DialogActionsProps, type DialogBodyProps, type DialogDescriptionProps, type DialogPopupProps, type DialogTitleProps } from '../dialog';
+export declare const alertDialog: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export type AlertDialogStatus = 'warning' | 'danger';
+/** Props for AlertDialog: Base UI AlertDialog.Root props (`open`, `onOpenChange` …) plus `morph`. */
+export type AlertDialogProps<Payload = unknown> = BaseAlertDialog.Root.Props<Payload> & {
+    /**
+     * The outline morph (§9.17) from the trigger to the panel and back, as
+     * Dialog's [D206]. Default `true`; `false` opens and closes at once, as
+     * does an alert opened with no rendered trigger (from a Menu item).
+     */
+    morph?: boolean;
+};
+/**
+ * Groups the parts of an alert dialog (Base UI AlertDialog.Root): always
+ * modal, and an outside press never dismisses it. It may open over a
+ * Dialog, never deeper; the Dialog stays visible, framed and inert.
+ */
+export declare function AlertDialog<Payload = unknown>(props: AlertDialogProps<Payload>): React.JSX.Element;
+/** Props for AlertDialogTrigger: Button props plus Base UI's trigger `handle` and `payload`. */
+export type AlertDialogTriggerProps = ButtonProps & {
+    /** Associates a detached trigger with an AlertDialog created by `AlertDialog.createHandle`. */
+    handle?: BaseAlertDialog.Trigger.Props['handle'];
+    /** A payload handed to the AlertDialog's children function when this trigger opens it. */
+    payload?: unknown;
+};
+/**
+ * Opens the alert dialog. Renders a Button (§9.2) whose label names the act
+ * ("Delete Photos"); the alert morphs out of it.
+ */
+export declare function AlertDialogTrigger(props: AlertDialogTriggerProps): React.JSX.Element;
+/** Props for AlertDialogPopup: DialogPopup props (without `wide`) plus the required status. */
+export type AlertDialogPopupProps = Omit<DialogPopupProps, 'wide'> & {
+    /**
+     * Required (no default): `warning` draws ▲ with !, `danger` ◆ with ×, at
+     * the block tier above the title [D58]. The glyph and the words carry the
+     * seriousness; a destructive confirm adds the red fill (Button
+     * `destructive`) [D192].
+     */
+    status: AlertDialogStatus;
+    /** The glyph's accessible name; defaults to the English status word. */
+    statusLabel?: string;
+};
+/**
+ * The alert panel: the Dialog panel (--size-sm, white scope, --border-size-2-25
+ * --primary12 frame, full-screen sheet below --md-n-above) with the status
+ * glyph above the title. Compose `AlertDialogBody` (title and one
+ * consequence sentence) and `AlertDialogActions` inside it; there is no
+ * close X, only `AlertDialogCancel`, which takes focus on open.
+ */
+export declare function AlertDialogPopup(props: AlertDialogPopupProps): React.JSX.Element;
+/** Props for AlertDialogCancel: Button props for the outline twin that dismisses the alert. */
+export type AlertDialogCancelProps = ButtonProps;
+/**
+ * The least destructive action, and the alert's only way out besides Esc:
+ * an `outline` Button that closes the alert and takes focus when it opens.
+ * Name the act it keeps ("Keep Photos"), never "OK" or "Cancel" alone.
+ */
+export declare function AlertDialogCancel(props: AlertDialogCancelProps): React.JSX.Element;
+/** Props for AlertDialogTitle: DialogTitle props. */
+export type AlertDialogTitleProps = DialogTitleProps;
+/** The alert's title and accessible name, in `type-itemhead`: the question ("Delete 3 photos?"). */
+export declare function AlertDialogTitle(props: AlertDialogTitleProps): React.JSX.Element;
+/** Props for AlertDialogDescription: DialogDescription props. */
+export type AlertDialogDescriptionProps = DialogDescriptionProps;
+/** One consequence sentence, in `type-body-ui` --primary12. */
+export declare function AlertDialogDescription(props: AlertDialogDescriptionProps): React.JSX.Element;
+/** Props for AlertDialogBody: DialogBody props. */
+export type AlertDialogBodyProps = DialogBodyProps;
+/** Holds the title and description under the glyph; scrolls with overflow edges like the Dialog body. */
+export declare function AlertDialogBody(props: AlertDialogBodyProps): React.JSX.Element;
+/** Props for AlertDialogActions: DialogActions props. */
+export type AlertDialogActionsProps = DialogActionsProps;
+/**
+ * The action bar: the confirming `solid` Button first ("Delete 3 Photos",
+ * "Deleting…" while busy), then `AlertDialogCancel`. A confirm that
+ * destroys (every `danger` alert's, and any Delete, Remove or Discard)
+ * takes `destructive`, the danger fill [D192]. Stacked below
+ * --md-n-above, one row from it.
+ */
+export declare function AlertDialogActions(props: AlertDialogActionsProps): React.JSX.Element;
+//# sourceMappingURL=AlertDialog.d.ts.map

package/overlays/alert-dialog/AlertDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertDialog.d.ts","sourceRoot":"","sources":["../../src/overlays/alert-dialog/AlertDialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,6BAA6B,CAAA;AAG5E,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAC/D,OAAO,EAML,KAAK,kBAAkB,EACvB,KAAK,eAAe,EACpB,KAAK,sBAAsB,EAC3B,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACtB,MAAM,WAAW,CAAA;AAkClB,eAAO,MAAM,WAAW,oFAAmB,CAAA;AAE3C,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,QAAQ,CAAA;AAEpD,qGAAqG;AACrG,MAAM,MAAM,gBAAgB,CAAC,OAAO,GAAG,OAAO,IAAI,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG;IACtF;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,OAAO,GAAG,OAAO,EAAE,KAAK,EAAE,gBAAgB,CAAC,OAAO,CAAC,qBAa9E;AAED,gGAAgG;AAChG,MAAM,MAAM,uBAAuB,GAAG,WAAW,GAAG;IAClD,+FAA+F;IAC/F,MAAM,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAA;IAChD,0FAA0F;IAC1F,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,qBAWhE;AAID,+FAA+F;AAC/F,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC,GAAG;IACnE;;;;;OAKG;IACH,MAAM,EAAE,iBAAiB,CAAA;IACzB,wEAAwE;IACxE,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,qBAsB5D;AAED,+FAA+F;AAC/F,MAAM,MAAM,sBAAsB,GAAG,WAAW,CAAA;AAEhD;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,qBAS9D;AAED,qDAAqD;AACrD,MAAM,MAAM,qBAAqB,GAAG,gBAAgB,CAAA;AAEpD,oGAAoG;AACpG,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,qBAE5D;AAED,iEAAiE;AACjE,MAAM,MAAM,2BAA2B,GAAG,sBAAsB,CAAA;AAEhE,+DAA+D;AAC/D,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,qBAExE;AAED,mDAAmD;AACnD,MAAM,MAAM,oBAAoB,GAAG,eAAe,CAAA;AAElD,yGAAyG;AACzG,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,qBAE1D;AAED,yDAAyD;AACzD,MAAM,MAAM,uBAAuB,GAAG,kBAAkB,CAAA;AAExD;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,qBAEhE"}

package/overlays/alert-dialog/AlertDialog.js

@@ -0,0 +1,109 @@
+'use client';
+import * as React from 'react';
+import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog';
+import { cva } from 'class-variance-authority';
+import { Button } from '../../actions/button';
+import { DialogActions, DialogBody, DialogDescription, DialogPopup, DialogTitle, } from '../dialog';
+import { DialogMorphContext } from '../dialog/morph';
+import { useOutlineMorphRoot } from '../../foundations/outline-morph/useOutlineMorphRoot';
+import { cx, resolveClassName } from '../../utils/className';
+import { overlayAttributes } from '../../utils/overlay';
+import { secondaryScaleVariants } from '../../utils/scales';
+import { StatusGlyph, statusLabels, statusScales } from '../../utils/StatusGlyph';
+import styles from './alert-dialog.module.css';
+/*
+ * Alert Dialog (§10.14): confirms a destructive or irreversible action.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: alert-dialog.module.css; CVA function `alertDialog`. The panel,
+ *   body, title, description and action bar are the Dialog's
+ *   (dialog.module.css, through DialogPopup); this module adds the glyph.
+ * - Axes: `status` → warning | danger (selects the ▲ or ◆ glyph and its
+ *   scale; it carries no class); `primary`, `secondary` → applied inside
+ *   the panel's scope by DialogPopup.
+ * - Compound variants: none. Defaults: `status` is required, no default;
+ *   color axes: none.
+ * - Color fallback: the panel takes the `white` preset's defaults; the
+ *   glyph's secondary is the status scale (warning amber, danger red) [D129].
+ *   A confirm that destroys (every danger alert's, and any Delete, Remove
+ *   or Discard) is a `solid` Button with `destructive`: the danger fill
+ *   [D192].
+ * - States: as Dialog, the outline morph from the trigger included [D206].
+ *   Focus opens on the least destructive action
+ *   (AlertDialogCancel); Esc means Cancel; outside presses never dismiss.
+ * - Parts: base (the panel, with the Dialog's base), glyph.
+ * - Scope: as Dialog. The glyph writes the overlay scope attributes beside
+ *   its status scale so --role-status re-resolves on it [D148].
+ * - Container: none; the panel is page frame (see Dialog).
+ */
+export const alertDialog = cva(styles.base);
+/**
+ * Groups the parts of an alert dialog (Base UI AlertDialog.Root): always
+ * modal, and an outside press never dismisses it. It may open over a
+ * Dialog, never deeper; the Dialog stays visible, framed and inert.
+ */
+export function AlertDialog(props) {
+    const { morph = true, open, defaultOpen, onOpenChange, ...rest } = props;
+    const root = useOutlineMorphRoot({ open, defaultOpen, onOpenChange, morph, surface: true });
+    return (React.createElement(DialogMorphContext.Provider, { value: root.refs },
+        React.createElement(BaseAlertDialog.Root, { ...rest, open: open, defaultOpen: defaultOpen, onOpenChange: root.onOpenChange })));
+}
+/**
+ * Opens the alert dialog. Renders a Button (§9.2) whose label names the act
+ * ("Delete Photos"); the alert morphs out of it.
+ */
+export function AlertDialogTrigger(props) {
+    const { handle, payload, ...buttonProps } = props;
+    const morph = React.useContext(DialogMorphContext);
+    return (React.createElement(BaseAlertDialog.Trigger, { ref: handle ? undefined : morph?.sourceRef, handle: handle, payload: payload, render: React.createElement(Button, { ...buttonProps }) }));
+}
+const CancelContext = React.createContext(null);
+/**
+ * The alert panel: the Dialog panel (--size-sm, white scope, --border-size-2-25
+ * --primary12 frame, full-screen sheet below --md-n-above) with the status
+ * glyph above the title. Compose `AlertDialogBody` (title and one
+ * consequence sentence) and `AlertDialogActions` inside it; there is no
+ * close X, only `AlertDialogCancel`, which takes focus on open.
+ */
+export function AlertDialogPopup(props) {
+    const { status, statusLabel, className, initialFocus, children, ...rest } = props;
+    const cancelRef = React.useRef(null);
+    // Focus on open: the least destructive action, else Base UI's default.
+    const focusCancel = React.useCallback(() => cancelRef.current ?? true, []);
+    return (React.createElement(DialogPopup, { ...rest, initialFocus: initialFocus ?? focusCancel, className: resolveClassName(className, (extra) => alertDialog({ className: extra })) },
+        React.createElement(StatusGlyph, { ...overlayAttributes, status: status, label: statusLabel ?? statusLabels[status], className: cx(styles.glyph, secondaryScaleVariants[statusScales[status]]) }),
+        React.createElement(CancelContext.Provider, { value: cancelRef }, children)));
+}
+/**
+ * The least destructive action, and the alert's only way out besides Esc:
+ * an `outline` Button that closes the alert and takes focus when it opens.
+ * Name the act it keeps ("Keep Photos"), never "OK" or "Cancel" alone.
+ */
+export function AlertDialogCancel(props) {
+    const cancelRef = React.useContext(CancelContext);
+    const { variant = 'outline', ...buttonProps } = props;
+    return (React.createElement(BaseAlertDialog.Close, { ref: cancelRef ?? undefined, render: React.createElement(Button, { ...buttonProps, variant: variant }) }));
+}
+/** The alert's title and accessible name, in `type-itemhead`: the question ("Delete 3 photos?"). */
+export function AlertDialogTitle(props) {
+    return React.createElement(DialogTitle, { ...props });
+}
+/** One consequence sentence, in `type-body-ui` --primary12. */
+export function AlertDialogDescription(props) {
+    return React.createElement(DialogDescription, { ...props });
+}
+/** Holds the title and description under the glyph; scrolls with overflow edges like the Dialog body. */
+export function AlertDialogBody(props) {
+    return React.createElement(DialogBody, { ...props });
+}
+/**
+ * The action bar: the confirming `solid` Button first ("Delete 3 Photos",
+ * "Deleting…" while busy), then `AlertDialogCancel`. A confirm that
+ * destroys (every `danger` alert's, and any Delete, Remove or Discard)
+ * takes `destructive`, the danger fill [D192]. Stacked below
+ * --md-n-above, one row from it.
+ */
+export function AlertDialogActions(props) {
+    return React.createElement(DialogActions, { ...props });
+}
+//# sourceMappingURL=AlertDialog.js.map

package/overlays/alert-dialog/AlertDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertDialog.js","sourceRoot":"","sources":["../../src/overlays/alert-dialog/AlertDialog.tsx"],"names":[],"mappings":"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"}