@fairgarden/design 0.1.0-0.canary.0

package/navigation/toolbar/index.js

@@ -0,0 +1,2 @@
+export * from './Toolbar';
+//# sourceMappingURL=index.js.map

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,74 @@
+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` …). */
+export type AlertDialogProps<Payload = unknown> = BaseAlertDialog.Root.Props<Payload>;
+/**
+ * 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"). */
+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;AA+BlB,eAAO,MAAM,WAAW,oFAAmB,CAAA;AAE3C,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,QAAQ,CAAA;AAEpD,wFAAwF;AACxF,MAAM,MAAM,gBAAgB,CAAC,OAAO,GAAG,OAAO,IAAI,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;AAErF;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,OAAO,GAAG,OAAO,EAAE,KAAK,EAAE,gBAAgB,CAAC,OAAO,CAAC,qBAE9E;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,mGAAmG;AACnG,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,qBAShE;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,99 @@
+'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 { 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. 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) {
+    return React.createElement(BaseAlertDialog.Root, { ...props });
+}
+/** Opens the alert dialog. Renders a Button (§9.2) whose label names the act ("Delete Photos"). */
+export function AlertDialogTrigger(props) {
+    const { handle, payload, ...buttonProps } = props;
+    return (React.createElement(BaseAlertDialog.Trigger, { 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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"}

package/overlays/alert-dialog/alert-dialog.module.css

@@ -0,0 +1,53 @@
+/*
+ * Alert Dialog (§10.14). CVA function `alertDialog` in AlertDialog.tsx.
+ * Parts: base (the panel, beside the Dialog's own base), glyph. The panel,
+ * body, title, description and action bar are the Dialog's
+ * (dialog.module.css); this module adds only the Alert's status glyph:
+ * ▲ with ! (warning) or ◆ with × (danger) at --fgd-size-icon-block above the
+ * title, in --role-status of the status scale, which the glyph carries as
+ * its own secondary, with its inner mark [D58, D129, D141, D155].
+ */
+
+@layer base {
+  /* Local dimension: the glyph's inset matches the panel's padding at each tier. */
+  .base {
+    --alert-dialog-inset: var(--size-px-3);
+  }
+
+  @media (min-width: 1024px) {
+    .base {
+      --alert-dialog-inset: var(--size-px-7);
+    }
+  }
+
+  /*
+   * The status glyph at the block tier: shape and inner mark in
+   * --role-status (currentColor); knockouts in --role-status-fill. Drawn on
+   * a 20 px grid, so the inner mark scales with the glyph.
+   */
+  .glyph {
+    flex: none;
+    display: block;
+    inline-size: var(--fgd-size-icon-block);
+    block-size: var(--fgd-size-icon-block);
+    margin-block-start: var(--alert-dialog-inset);
+    margin-inline: var(--alert-dialog-inset);
+    overflow: visible;
+    color: var(--role-status);
+    fill: var(--role-status-fill);
+    stroke: var(--role-status-fill);
+    stroke-width: var(--border-size-1-5);
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  /* Forced colors: keep the shape and its knockout mark legible. */
+  @media (forced-colors: active) {
+    .glyph {
+      forced-color-adjust: none;
+      color: CanvasText;
+      fill: Canvas;
+      stroke: Canvas;
+    }
+  }
+}

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

@@ -0,0 +1,2 @@
+export * from './AlertDialog';
+//# sourceMappingURL=index.d.ts.map

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

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

package/overlays/alert-dialog/index.js

@@ -0,0 +1,2 @@
+export * from './AlertDialog';
+//# sourceMappingURL=index.js.map

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

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

package/overlays/context-menu/ContextMenu.d.ts

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { ContextMenu as BaseContextMenu } from '@base-ui/react/context-menu';
+import { MenuCheckboxItem, MenuGroup, MenuGroupLabel, MenuItem, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger } from '../menu';
+import { type MenuPopupProps } from '../menu/popup';
+/** Props for ContextMenu: Base UI ContextMenu.Root props. */
+export type ContextMenuProps = BaseContextMenu.Root.Props;
+/**
+ * Groups the parts of a context menu (Base UI ContextMenu.Root). It opens
+ * by right-click, Shift+F10 or the Menu key on the trigger area.
+ */
+export declare function ContextMenu(props: ContextMenuProps): React.JSX.Element;
+/** Props for ContextMenuTrigger: Base UI ContextMenu.Trigger props. */
+export type ContextMenuTriggerProps = BaseContextMenu.Trigger.Props;
+/**
+ * The area that opens the menu: a row, an editor or a canvas. It has no
+ * visual part of its own; it writes its scope attributes like every root.
+ */
+export declare function ContextMenuTrigger(props: ContextMenuTriggerProps): React.JSX.Element;
+/** Props for ContextMenuPopup: the Menu popup's props. */
+export type ContextMenuPopupProps = MenuPopupProps;
+/**
+ * The popup: the Menu's build (a `white` scope, --border-size-2 --primary12
+ * edge, --fgd-size-hit rows, the highlight with its start-edge bar),
+ * anchored to the pointer, or to the focused object for keyboard
+ * invocation. Compose the Menu item parts inside it, re-exported here as
+ * ContextMenuItem, ContextMenuCheckboxItem and so on.
+ */
+export declare function ContextMenuPopup(props: ContextMenuPopupProps): React.JSX.Element;
+/** An action row; see MenuItem. */
+export declare const ContextMenuItem: typeof MenuItem;
+/** An option that toggles; see MenuCheckboxItem. */
+export declare const ContextMenuCheckboxItem: typeof MenuCheckboxItem;
+/** One choice among several; see MenuRadioGroup. */
+export declare const ContextMenuRadioGroup: typeof MenuRadioGroup;
+/** A choice in a radio group; see MenuRadioItem. */
+export declare const ContextMenuRadioItem: typeof MenuRadioItem;
+/** Groups related items; see MenuGroup. */
+export declare const ContextMenuGroup: typeof MenuGroup;
+/** A group's label; see MenuGroupLabel. */
+export declare const ContextMenuGroupLabel: typeof MenuGroupLabel;
+/** A rule between groups; see MenuSeparator. */
+export declare const ContextMenuSeparator: typeof MenuSeparator;
+/** Groups a submenu's trigger and popup; see MenuSubmenu. */
+export declare const ContextMenuSubmenu: typeof MenuSubmenu;
+/** The row that opens a submenu; see MenuSubmenuTrigger. */
+export declare const ContextMenuSubmenuTrigger: typeof MenuSubmenuTrigger;
+//# sourceMappingURL=ContextMenu.d.ts.map

package/overlays/context-menu/ContextMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../src/overlays/context-menu/ContextMenu.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,6BAA6B,CAAA;AAE5E,OAAO,EACL,gBAAgB,EAChB,SAAS,EACT,cAAc,EACd,QAAQ,EACR,cAAc,EACd,aAAa,EACb,aAAa,EACb,WAAW,EACX,kBAAkB,EACnB,MAAM,SAAS,CAAA;AAChB,OAAO,EAAkB,KAAK,cAAc,EAAE,MAAM,eAAe,CAAA;AAsBnE,6DAA6D;AAC7D,MAAM,MAAM,gBAAgB,GAAG,eAAe,CAAC,IAAI,CAAC,KAAK,CAAA;AAEzD;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,qBAElD;AAED,uEAAuE;AACvE,MAAM,MAAM,uBAAuB,GAAG,eAAe,CAAC,OAAO,CAAC,KAAK,CAAA;AAEnE;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,qBAGhE;AAED,0DAA0D;AAC1D,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAA;AAElD;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,qBAE5D;AAED,mCAAmC;AACnC,eAAO,MAAM,eAAe,iBAAW,CAAA;AACvC,oDAAoD;AACpD,eAAO,MAAM,uBAAuB,yBAAmB,CAAA;AACvD,oDAAoD;AACpD,eAAO,MAAM,qBAAqB,uBAAiB,CAAA;AACnD,oDAAoD;AACpD,eAAO,MAAM,oBAAoB,sBAAgB,CAAA;AACjD,2CAA2C;AAC3C,eAAO,MAAM,gBAAgB,kBAAY,CAAA;AACzC,2CAA2C;AAC3C,eAAO,MAAM,qBAAqB,uBAAiB,CAAA;AACnD,gDAAgD;AAChD,eAAO,MAAM,oBAAoB,sBAAgB,CAAA;AACjD,6DAA6D;AAC7D,eAAO,MAAM,kBAAkB,oBAAc,CAAA;AAC7C,4DAA4D;AAC5D,eAAO,MAAM,yBAAyB,2BAAqB,CAAA"}

package/overlays/context-menu/ContextMenu.js

@@ -0,0 +1,50 @@
+'use client';
+import * as React from 'react';
+import { ContextMenu as BaseContextMenu } from '@base-ui/react/context-menu';
+import { MenuCheckboxItem, MenuGroup, MenuGroupLabel, MenuItem, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, } from '../menu';
+import { MenuPopupFrame } from '../menu/popup';
+import { useScopeAttributes } from '../../utils/scope';
+/**
+ * Groups the parts of a context menu (Base UI ContextMenu.Root). It opens
+ * by right-click, Shift+F10 or the Menu key on the trigger area.
+ */
+export function ContextMenu(props) {
+    return React.createElement(BaseContextMenu.Root, { ...props });
+}
+/**
+ * The area that opens the menu: a row, an editor or a canvas. It has no
+ * visual part of its own; it writes its scope attributes like every root.
+ */
+export function ContextMenuTrigger(props) {
+    const scope = useScopeAttributes();
+    return React.createElement(BaseContextMenu.Trigger, { ...scope, ...props });
+}
+/**
+ * The popup: the Menu's build (a `white` scope, --border-size-2 --primary12
+ * edge, --fgd-size-hit rows, the highlight with its start-edge bar),
+ * anchored to the pointer, or to the focused object for keyboard
+ * invocation. Compose the Menu item parts inside it, re-exported here as
+ * ContextMenuItem, ContextMenuCheckboxItem and so on.
+ */
+export function ContextMenuPopup(props) {
+    return React.createElement(MenuPopupFrame, { ...props });
+}
+/** An action row; see MenuItem. */
+export const ContextMenuItem = MenuItem;
+/** An option that toggles; see MenuCheckboxItem. */
+export const ContextMenuCheckboxItem = MenuCheckboxItem;
+/** One choice among several; see MenuRadioGroup. */
+export const ContextMenuRadioGroup = MenuRadioGroup;
+/** A choice in a radio group; see MenuRadioItem. */
+export const ContextMenuRadioItem = MenuRadioItem;
+/** Groups related items; see MenuGroup. */
+export const ContextMenuGroup = MenuGroup;
+/** A group's label; see MenuGroupLabel. */
+export const ContextMenuGroupLabel = MenuGroupLabel;
+/** A rule between groups; see MenuSeparator. */
+export const ContextMenuSeparator = MenuSeparator;
+/** Groups a submenu's trigger and popup; see MenuSubmenu. */
+export const ContextMenuSubmenu = MenuSubmenu;
+/** The row that opens a submenu; see MenuSubmenuTrigger. */
+export const ContextMenuSubmenuTrigger = MenuSubmenuTrigger;
+//# sourceMappingURL=ContextMenu.js.map

package/overlays/context-menu/ContextMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.js","sourceRoot":"","sources":["../../src/overlays/context-menu/ContextMenu.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,6BAA6B,CAAA;AAE5E,OAAO,EACL,gBAAgB,EAChB,SAAS,EACT,cAAc,EACd,QAAQ,EACR,cAAc,EACd,aAAa,EACb,aAAa,EACb,WAAW,EACX,kBAAkB,GACnB,MAAM,SAAS,CAAA;AAChB,OAAO,EAAE,cAAc,EAAuB,MAAM,eAAe,CAAA;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AAwBtD;;;GAGG;AACH,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,OAAO,oBAAC,eAAe,CAAC,IAAI,OAAK,KAAK,GAAI,CAAA;AAC5C,CAAC;AAKD;;;GAGG;AACH,MAAM,UAAU,kBAAkB,CAAC,KAA8B;IAC/D,MAAM,KAAK,GAAG,kBAAkB,EAAE,CAAA;IAClC,OAAO,oBAAC,eAAe,CAAC,OAAO,OAAK,KAAK,KAAM,KAAK,GAAI,CAAA;AAC1D,CAAC;AAKD;;;;;;GAMG;AACH,MAAM,UAAU,gBAAgB,CAAC,KAA4B;IAC3D,OAAO,oBAAC,cAAc,OAAK,KAAK,GAAI,CAAA;AACtC,CAAC;AAED,mCAAmC;AACnC,MAAM,CAAC,MAAM,eAAe,GAAG,QAAQ,CAAA;AACvC,oDAAoD;AACpD,MAAM,CAAC,MAAM,uBAAuB,GAAG,gBAAgB,CAAA;AACvD,oDAAoD;AACpD,MAAM,CAAC,MAAM,qBAAqB,GAAG,cAAc,CAAA;AACnD,oDAAoD;AACpD,MAAM,CAAC,MAAM,oBAAoB,GAAG,aAAa,CAAA;AACjD,2CAA2C;AAC3C,MAAM,CAAC,MAAM,gBAAgB,GAAG,SAAS,CAAA;AACzC,2CAA2C;AAC3C,MAAM,CAAC,MAAM,qBAAqB,GAAG,cAAc,CAAA;AACnD,gDAAgD;AAChD,MAAM,CAAC,MAAM,oBAAoB,GAAG,aAAa,CAAA;AACjD,6DAA6D;AAC7D,MAAM,CAAC,MAAM,kBAAkB,GAAG,WAAW,CAAA;AAC7C,4DAA4D;AAC5D,MAAM,CAAC,MAAM,yBAAyB,GAAG,kBAAkB,CAAA"}

package/overlays/context-menu/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ContextMenu';
+//# sourceMappingURL=index.d.ts.map

package/overlays/context-menu/index.d.ts.map

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

package/overlays/context-menu/index.js

@@ -0,0 +1,2 @@
+export * from './ContextMenu';
+//# sourceMappingURL=index.js.map

package/overlays/context-menu/index.js.map

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