@epilot/volt-ui-experimental-griffel 0.1.0-experiment.1

package/README.md

@@ -0,0 +1,157 @@
+# @epilot/volt-ui-experimental-griffel
+
+An **experiment**, not a supported package. Do not adopt it in production without talking to the
+owner first.
+
+It rebuilds Volt UI so that each micro-frontend bundles and versions its own copy, instead of every
+MFE sharing one singleton loaded at the portal root. Radix primitives, styled with
+[Griffel](https://github.com/microsoft/griffel). No Tailwind, and no stylesheet to load — styles are
+inserted at runtime, keyed by content.
+
+## Why it exists
+
+Today one Volt UI release reaches all 13 MFEs at once, so a bad release breaks every team
+simultaneously and there is no way to roll it out gradually. The open question this package answers is
+whether per-MFE versioning is **affordable**, since each team shipping its own copy necessarily costs
+more than one shared bundle.
+
+Current answer: roughly break-even on the initial page load, and about 120k gzip more if every team
+loads everything it imports. CSS is free at one version — rule count stays at ×1.00 across eight
+co-resident copies. See `STATUS.md` for the measurements and the reasoning behind them.
+
+## Install
+
+```sh
+npm install @epilot/volt-ui-experimental-griffel@experiment
+```
+
+Published under the `experiment` dist-tag, never `latest`, so a bare
+`npm install @epilot/volt-ui-experimental-griffel` cannot pick it up by accident.
+
+React 18 or 19, as peers. Nothing else: every other dependency — Griffel, Radix, dnd-kit, date-fns —
+is bundled into `dist`, which is the point of per-MFE delivery. You install two peers and nothing more.
+
+## Use
+
+```tsx
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogTrigger,
+} from "@epilot/volt-ui-experimental-griffel"
+
+export const Example = () => (
+  <Dialog>
+    <DialogTrigger>
+      <Button variant="primary">Open</Button>
+    </DialogTrigger>
+    <DialogContent>…</DialogContent>
+  </Dialog>
+)
+```
+
+No provider, no CSS import, no configuration. Tokens and styles install themselves on first render,
+and two different versions of this package can sit on the same page without fighting: property names
+carry a hash derived from their values, so different values mean different names rather than a
+last-one-wins collision.
+
+Tree-shaking is real and worth relying on — `Text` alone is 15.5k gzip against 172.4k for every
+export, an 11× spread. v1 has no such spread; it ships everything either way.
+
+## Tokens outside React
+
+The runtime custom properties this package emits carry a value-derived hash
+(`--volt2-bf9a721-accent-9`) which moves whenever a value changes. That is what stops two
+co-resident versions overwriting each other, and it also means the names cannot be written by hand
+from outside. A consumer that is not rendering these components — a journey, a marketing page, a
+design tool — should not reference them.
+
+Import the values instead and compile them into your own CSS, under your own names, at your own
+build time:
+
+```js
+import tokens from "@epilot/volt-ui-experimental-griffel/tokens.json"
+
+const css = Object.entries(tokens.themes.light)
+  .map(([name, value]) => `  --myapp-${name}: ${value};`)
+  .join("\n")
+```
+
+950 tokens per theme, `light` and `dark`, all references already resolved to literals. Nothing from
+this package is present at runtime, so there is nothing to collide with and no dependency on its
+hashes.
+
+The trade is that values are frozen at your build: picking up a token change means rebuilding. A
+stable alias sheet would track our releases instead, but two versions of it on one page would
+redeclare the same names at `:root` and the last one loaded would win — the collision the namespace
+exists to prevent. If that becomes a real requirement it needs deciding deliberately, not adding by
+default.
+
+## A console warning you can ignore
+
+In a development build, `@griffel/core` prints this once per component you render:
+
+> A provided renderer has different "classNameHashSalt". This is not supported and WILL cause
+> issues with classnames generation.
+
+It is a false positive, and the check that emits it cannot do anything else. Griffel compares the
+renderer's salt against a variable it only assigns _after_ the comparison, inside a block that runs
+once per `makeStyles` call site — so the comparison is always `undefined !== yourSalt` and always
+warns, for any renderer that sets a salt at all.
+
+Measured rather than assumed: rendering three components produces exactly three warnings while the
+page carries **one** salt and **one** insertion point, so it scales with call sites rather than with
+renderers. Under `NODE_ENV=production` it does not appear at all.
+
+Nothing is wrong with class-name generation. If it ever becomes a real conflict, `gate:isolation`
+fails on the insertion-point count and `gate:class-salt-skew` fails on atom-name overlap.
+
+## What is not here
+
+`DataTable` is not ported and stays on v1. It is the only component still missing, and the only gap
+in what consumers actually import: of 143 distinct Volt symbols used across shipped MFE code, this
+package covers 127, and all 16 it does not are DataTable or a TanStack type it re-exports.
+
+There is no `--volt-*` compatibility layer. Consumer CSS reading v1's variable names by hand needs
+migrating to this package's exported token bindings — 217 references across six MFEs, two thirds of
+them in `entity`.
+
+Animation is unverified. The visual harness disables it on both arms, so transitions are the one thing
+264 matching specimens do not cover.
+
+## Verification
+
+Every check below has a `GATE_NEGATIVE_CONTROL` mode that has been demonstrated to fail when the
+property it checks breaks, and to trip only the checks it should. `bun run gates` runs them
+fail-fast. A green gate is evidence for that gate's own assertions and nothing wider:
+
+| check                           | what it proves                                                                   |
+| ------------------------------- | -------------------------------------------------------------------------------- |
+| `bun run gate:vr`               | 264 specimens rendered under v1 and v2 and diffed pixel by pixel                 |
+| `bun run gate:isolation`        | two copies mount separately, emit no global selectors, share one insertion point |
+| `bun run gate:token-value-skew` | two builds differing only in token VALUES paint independently                    |
+| `bun run gate:class-salt-skew`  | two builds differing only in CLASS SALT keep disjoint atom names                 |
+| `bun run gate:cascade`          | a consumer utility can still override a component, in a real browser             |
+| `bun run gate:griffel-contract` | the private Griffel API this depends on still behaves                            |
+| `bunx vitest run`               | 433 tests, plus 437 under React 18                                               |
+
+`AGENTS.md` is the normative rule set and overrides every other document in the package. `AUTHORING.md`
+states the defect behind each rule. `DECISIONS.md` holds the architecture rationale. `STATUS.md` is a
+dated snapshot of measurements — more current than this file on numbers, but not authoritative on
+rules.
+
+## Releasing
+
+```sh
+bun run release          # npm publish --tag experiment
+```
+
+Two things the manifest cannot enforce. `publishConfig.tag` is **not** honoured by npm 10.9.2 in this
+workspace, so the tag has to be passed on the command line — which is why `release` exists rather than
+a bare `npm publish`. And the `@epilot` scope has 2FA, so a real publish needs `--otp=<code>` appended.
+
+`prepack` rebuilds before packing, so a stale `dist` cannot ship. The tarball is ~958 kB packed and
+4.1 MB unpacked, of which 348 files are sourcemaps — mostly for the vendored dependencies. They are
+kept deliberately: a package being piloted is exactly when someone needs to read a stack trace. Set
+`sourcemap: false` in `vite.config.ts` if that changes.

package/dist/_virtual/index.js

@@ -0,0 +1,5 @@
+var e = { exports: {} };
+export {
+  e as __module
+};
+//# sourceMappingURL=index.js.map

package/dist/_virtual/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/use-sync-external-store-shim.development.js

@@ -0,0 +1,5 @@
+var e = {};
+export {
+  e as __exports
+};
+//# sourceMappingURL=use-sync-external-store-shim.development.js.map

package/dist/_virtual/use-sync-external-store-shim.development.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-sync-external-store-shim.development.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/use-sync-external-store-shim.production.js

@@ -0,0 +1,5 @@
+var r = {};
+export {
+  r as __exports
+};
+//# sourceMappingURL=use-sync-external-store-shim.production.js.map

package/dist/_virtual/use-sync-external-store-shim.production.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-sync-external-store-shim.production.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/accordion/accordion.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+export type AccordionType = "single" | "multiple";
+export type AccordionAlign = "start" | "end";
+export type AccordionProps = React.ComponentProps<typeof AccordionPrimitive.Root>;
+export type AccordionItemProps = React.ComponentProps<typeof AccordionPrimitive.Item>;
+export type AccordionTriggerProps = React.ComponentProps<typeof AccordionPrimitive.Trigger> & {
+    align?: AccordionAlign;
+};
+export type AccordionContentProps = React.ComponentProps<typeof AccordionPrimitive.Content>;
+export declare const Accordion: React.ForwardRefExoticComponent<(Omit<AccordionPrimitive.AccordionSingleProps & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<AccordionPrimitive.AccordionMultipleProps & React.RefAttributes<HTMLDivElement>, "ref">) & React.RefAttributes<HTMLDivElement>>;
+export declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const AccordionContent: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/accordion/accordion.js

@@ -0,0 +1,167 @@
+import { jsx as i, jsxs as u } from "react/jsx-runtime";
+import * as r from "react";
+import { Root as h, Content as x, Item as w, Header as y, Trigger as A } from "../../node_modules/@radix-ui/react-accordion/dist/index.js";
+import { SLOT_ATTR as a } from "../../renderer/contract.js";
+import { makeVoltStyles as b } from "../../styles/make-styles.js";
+import { spacingElement2 as v, spacingElement1 as S, spacingElement3 as l, textSm as f, grayA11 as T, grayA3 as C, fontWeightMedium as R, radiusMd as I, accentA8 as k } from "../../tokens/index.js";
+import { mergeClasses as m } from "../../node_modules/@griffel/core/src/mergeClasses.js";
+const g = b({
+  header: {
+    display: "flex"
+  },
+  trigger: {
+    outlineColor: k,
+    paddingInline: l,
+    paddingBlock: "1rem",
+    cursor: "pointer",
+    display: "flex",
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: "0%",
+    alignItems: "flex-start",
+    gap: l,
+    borderRadius: I,
+    textAlign: "left",
+    fontSize: f,
+    fontWeight: R,
+    transitionProperty: "all",
+    transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+    transitionDuration: "150ms",
+    ":hover": { backgroundColor: C },
+    ":focus-visible": {
+      outlineOffset: "2px",
+      outlineWidth: "2px",
+      outlineStyle: "solid"
+    },
+    ":disabled, &[data-disabled]": {
+      pointerEvents: "none",
+      opacity: 0.5
+    },
+    "&[data-state='open'] > [data-volt2-slot='accordion-icon']": {
+      transform: "rotate(180deg)"
+    }
+  },
+  alignStart: {
+    justifyContent: "flex-start"
+  },
+  alignEnd: {
+    justifyContent: "space-between"
+  },
+  icon: {
+    width: "1.25rem",
+    height: "1.25rem",
+    color: T,
+    pointerEvents: "none",
+    flexShrink: 0,
+    transform: "translateY(0)",
+    transitionProperty: "transform",
+    transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+    transitionDuration: "150ms"
+  },
+  panel: {
+    overflow: "hidden",
+    fontSize: f,
+    paddingInline: l,
+    paddingBlockStart: S,
+    paddingBlockEnd: v,
+    "&[data-state='open']": {
+      animationName: {
+        from: { height: "0" },
+        to: { height: "var(--radix-accordion-content-height)" }
+      },
+      animationDuration: "200ms",
+      animationTimingFunction: "cubic-bezier(0, 0, 0.2, 1)"
+    },
+    "&[data-state='closed']": {
+      animationName: {
+        from: { height: "var(--radix-accordion-content-height)" },
+        to: { height: "0" }
+      },
+      animationDuration: "200ms",
+      animationTimingFunction: "cubic-bezier(0, 0, 0.2, 1)"
+    }
+  },
+  inner: {
+    paddingInline: "0",
+    paddingBlock: "0"
+  }
+}), j = r.forwardRef(function({ className: n, ...t }, o) {
+  return /* @__PURE__ */ i(
+    h,
+    {
+      ref: o,
+      "data-slot": "accordion",
+      [a]: "accordion",
+      className: n,
+      ...t
+    }
+  );
+}), F = r.forwardRef(function({ className: n, ...t }, o) {
+  return /* @__PURE__ */ i(
+    w,
+    {
+      ref: o,
+      "data-slot": "accordion-item",
+      [a]: "accordion-item",
+      className: n,
+      ...t
+    }
+  );
+}), p = r.forwardRef(function({ className: n, ...t }, o) {
+  const e = g();
+  return /* @__PURE__ */ i(
+    "svg",
+    {
+      ref: o,
+      "data-slot": "accordion-icon",
+      [a]: "accordion-icon",
+      className: m(e.icon, n),
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 -960 960 960",
+      fill: "currentColor",
+      ...t,
+      children: /* @__PURE__ */ i("path", { d: "M480-361q-8 0-15-2.5t-13-8.5L268-556q-11-11-11-28t11-28q11-11 28-11t28 11l156 156 156-156q11-11 28-11t28 11q11 11 11 28t-11 28L508-372q-6 6-13 8.5t-15 2.5Z" })
+    }
+  );
+}), L = r.forwardRef(function({ className: n, align: t = "end", children: o, ...e }, s) {
+  const d = g();
+  return /* @__PURE__ */ i(y, { className: d.header, children: /* @__PURE__ */ u(
+    A,
+    {
+      ref: s,
+      "data-slot": "accordion-trigger",
+      [a]: "accordion-trigger",
+      className: m(
+        d.trigger,
+        t === "start" ? d.alignStart : d.alignEnd,
+        n
+      ),
+      ...e,
+      children: [
+        t === "start" && /* @__PURE__ */ i(p, {}),
+        o,
+        t === "end" && /* @__PURE__ */ i(p, {})
+      ]
+    }
+  ) });
+}), M = r.forwardRef(function({ className: n, children: t, ...o }, e) {
+  const s = g();
+  return /* @__PURE__ */ i(
+    x,
+    {
+      ref: e,
+      "data-slot": "accordion-content",
+      [a]: "accordion-content",
+      className: s.panel,
+      ...o,
+      children: /* @__PURE__ */ i("div", { className: m(s.inner, n), children: t })
+    }
+  );
+});
+export {
+  j as Accordion,
+  M as AccordionContent,
+  F as AccordionItem,
+  L as AccordionTrigger
+};
+//# sourceMappingURL=accordion.js.map

package/dist/components/accordion/accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.js","sources":["../../../src/components/accordion/accordion.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\"\nimport { mergeClasses } from \"@griffel/core\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\nconst useStyles = makeVoltStyles({\n  header: {\n    display: \"flex\",\n  },\n  trigger: {\n    outlineColor: tokens.accentA8,\n    paddingInline: tokens.spacingElement3,\n    paddingBlock: \"1rem\",\n    cursor: \"pointer\",\n    display: \"flex\",\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"0%\",\n    alignItems: \"flex-start\",\n    gap: tokens.spacingElement3,\n    borderRadius: tokens.radiusMd,\n    textAlign: \"left\",\n    fontSize: tokens.textSm,\n    fontWeight: tokens.fontWeightMedium,\n    transitionProperty: \"all\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    transitionDuration: \"150ms\",\n    \":hover\": { backgroundColor: tokens.grayA3 },\n    \":focus-visible\": {\n      outlineOffset: \"2px\",\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n    },\n    \":disabled, &[data-disabled]\": {\n      pointerEvents: \"none\",\n      opacity: 0.5,\n    },\n    \"&[data-state='open'] > [data-volt2-slot='accordion-icon']\": {\n      transform: \"rotate(180deg)\",\n    },\n  },\n  alignStart: {\n    justifyContent: \"flex-start\",\n  },\n  alignEnd: {\n    justifyContent: \"space-between\",\n  },\n  icon: {\n    width: \"1.25rem\",\n    height: \"1.25rem\",\n    color: tokens.grayA11,\n    pointerEvents: \"none\",\n    flexShrink: 0,\n    transform: \"translateY(0)\",\n    transitionProperty: \"transform\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    transitionDuration: \"150ms\",\n  },\n  panel: {\n    overflow: \"hidden\",\n    fontSize: tokens.textSm,\n    paddingInline: tokens.spacingElement3,\n    paddingBlockStart: tokens.spacingElement1,\n    paddingBlockEnd: tokens.spacingElement2,\n    \"&[data-state='open']\": {\n      animationName: {\n        from: { height: \"0\" },\n        to: { height: \"var(--radix-accordion-content-height)\" },\n      },\n      animationDuration: \"200ms\",\n      animationTimingFunction: \"cubic-bezier(0, 0, 0.2, 1)\",\n    },\n    \"&[data-state='closed']\": {\n      animationName: {\n        from: { height: \"var(--radix-accordion-content-height)\" },\n        to: { height: \"0\" },\n      },\n      animationDuration: \"200ms\",\n      animationTimingFunction: \"cubic-bezier(0, 0, 0.2, 1)\",\n    },\n  },\n  inner: {\n    paddingInline: \"0\",\n    paddingBlock: \"0\",\n  },\n})\n\nexport type AccordionType = \"single\" | \"multiple\"\nexport type AccordionAlign = \"start\" | \"end\"\n\nexport type AccordionProps = React.ComponentProps<\n  typeof AccordionPrimitive.Root\n>\n\nexport type AccordionItemProps = React.ComponentProps<\n  typeof AccordionPrimitive.Item\n>\n\nexport type AccordionTriggerProps = React.ComponentProps<\n  typeof AccordionPrimitive.Trigger\n> & {\n  align?: AccordionAlign\n}\n\nexport type AccordionContentProps = React.ComponentProps<\n  typeof AccordionPrimitive.Content\n>\n\nexport const Accordion = React.forwardRef<\n  React.ComponentRef<typeof AccordionPrimitive.Root>,\n  AccordionProps\n>(function Accordion({ className, ...props }, ref) {\n  return (\n    <AccordionPrimitive.Root\n      ref={ref}\n      data-slot=\"accordion\"\n      {...{ [SLOT_ATTR]: \"accordion\" }}\n      className={className}\n      {...props}\n    />\n  )\n})\n\nexport const AccordionItem = React.forwardRef<\n  React.ComponentRef<typeof AccordionPrimitive.Item>,\n  AccordionItemProps\n>(function AccordionItem({ className, ...props }, ref) {\n  return (\n    <AccordionPrimitive.Item\n      ref={ref}\n      data-slot=\"accordion-item\"\n      {...{ [SLOT_ATTR]: \"accordion-item\" }}\n      className={className}\n      {...props}\n    />\n  )\n})\n\nconst AccordionDownIcon = React.forwardRef<\n  SVGSVGElement,\n  React.SVGProps<SVGSVGElement>\n>(function AccordionDownIcon({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <svg\n      ref={ref}\n      data-slot=\"accordion-icon\"\n      {...{ [SLOT_ATTR]: \"accordion-icon\" }}\n      className={mergeClasses(styles.icon, className)}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 -960 960 960\"\n      fill=\"currentColor\"\n      {...props}\n    >\n      <path d=\"M480-361q-8 0-15-2.5t-13-8.5L268-556q-11-11-11-28t11-28q11-11 28-11t28 11l156 156 156-156q11-11 28-11t28 11q11 11 11 28t-11 28L508-372q-6 6-13 8.5t-15 2.5Z\" />\n    </svg>\n  )\n})\n\nexport const AccordionTrigger = React.forwardRef<\n  React.ComponentRef<typeof AccordionPrimitive.Trigger>,\n  AccordionTriggerProps\n>(function AccordionTrigger(\n  { className, align = \"end\", children, ...props },\n  ref\n) {\n  const styles = useStyles()\n\n  return (\n    <AccordionPrimitive.Header className={styles.header}>\n      <AccordionPrimitive.Trigger\n        ref={ref}\n        data-slot=\"accordion-trigger\"\n        {...{ [SLOT_ATTR]: \"accordion-trigger\" }}\n        className={mergeClasses(\n          styles.trigger,\n          align === \"start\" ? styles.alignStart : styles.alignEnd,\n          className\n        )}\n        {...props}\n      >\n        {align === \"start\" && <AccordionDownIcon />}\n        {children}\n        {align === \"end\" && <AccordionDownIcon />}\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n})\n\nexport const AccordionContent = React.forwardRef<\n  React.ComponentRef<typeof AccordionPrimitive.Content>,\n  AccordionContentProps\n>(function AccordionContent({ className, children, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <AccordionPrimitive.Content\n      ref={ref}\n      data-slot=\"accordion-content\"\n      {...{ [SLOT_ATTR]: \"accordion-content\" }}\n      className={styles.panel}\n      {...props}\n    >\n      <div className={mergeClasses(styles.inner, className)}>{children}</div>\n    </AccordionPrimitive.Content>\n  )\n})\n"],"names":["useStyles","makeVoltStyles","tokens.accentA8","tokens.spacingElement3","tokens.radiusMd","tokens.textSm","tokens.fontWeightMedium","tokens.grayA3","tokens.grayA11","tokens.spacingElement1","tokens.spacingElement2","Accordion","React","className","props","ref","jsx","AccordionPrimitive.Root","SLOT_ATTR","AccordionItem","AccordionPrimitive.Item","AccordionDownIcon","styles","mergeClasses","AccordionTrigger","align","children","AccordionPrimitive.Header","jsxs","AccordionPrimitive.Trigger","AccordionContent","AccordionPrimitive.Content"],"mappings":"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"}

package/dist/components/alert-dialog/alert-dialog.d.ts

@@ -0,0 +1,36 @@
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import { type ButtonProps, type ButtonSize, type ButtonVariant } from "../button/button";
+export type AlertDialogProps = React.ComponentProps<typeof AlertDialogPrimitive.Root>;
+export type AlertDialogTriggerProps = React.ComponentProps<typeof AlertDialogPrimitive.Trigger>;
+export type AlertDialogPortalProps = React.ComponentProps<typeof AlertDialogPrimitive.Portal>;
+export type AlertDialogOverlayProps = React.ComponentProps<typeof AlertDialogPrimitive.Overlay>;
+export type AlertDialogSize = "xl" | "lg" | "md" | "sm";
+export type AlertDialogContentProps = React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
+    size?: AlertDialogSize;
+};
+export type AlertDialogHeaderProps = React.ComponentProps<"div">;
+export type AlertDialogFooterProps = React.ComponentProps<"div">;
+export type AlertDialogTitleProps = React.ComponentProps<typeof AlertDialogPrimitive.Title>;
+export type AlertDialogDescriptionProps = React.ComponentProps<typeof AlertDialogPrimitive.Description>;
+export type AlertDialogActionProps = Omit<ButtonProps, "variant" | "size" | "destructive"> & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    destructive?: boolean;
+};
+export type AlertDialogCancelProps = Omit<ButtonProps, "variant" | "size" | "destructive"> & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    destructive?: boolean;
+};
+export declare const AlertDialog: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogProps & React.RefAttributes<HTMLElement>>;
+export declare const AlertDialogTrigger: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const AlertDialogPortal: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogPortalProps & React.RefAttributes<HTMLElement>>;
+export declare const AlertDialogOverlay: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const AlertDialogContent: React.ForwardRefExoticComponent<Omit<AlertDialogContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const AlertDialogHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const AlertDialogFooter: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const AlertDialogTitle: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+export declare const AlertDialogDescription: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export declare const AlertDialogAction: React.ForwardRefExoticComponent<Omit<AlertDialogActionProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const AlertDialogCancel: React.ForwardRefExoticComponent<Omit<AlertDialogCancelProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;