banhaten 0.1.2 → 0.2.0

package/docs/design-system/token-governance.md

@@ -0,0 +1,60 @@
+# Token Governance
+
+Banhaten components must be built from Banhaten tokens. Component source may use:
+
+- Generated `--bh-*` semantic tokens.
+- System, typography, effect, and component variables compiled from their owned
+  fragments under `tokens/source/` into the published `cssVariables` contract.
+- shadcn alias bridge variables such as `--background`, `--foreground`, and `--ring` only when they point back to Banhaten tokens.
+- Documented exception-ledger values when the value is external, brand-owned, or required by a third-party primitive API.
+
+Do not add raw component styling literals directly to `registry/components`:
+
+- Raw color literals.
+- Raw `px`, `rem`, or `ms` values outside approved media-query breakpoints.
+- Raw opacity utilities such as `opacity-0` or `opacity-100`.
+- Raw z-index, ring width, duration, icon size, or compact spacing utilities.
+- Component-local `color-mix()` percentages.
+- Legacy `--ds-*` fallbacks.
+
+`npm run tokens:check` enforces the generated CSS contract and component token usage.
+
+Structured tokens and aliases are authored in the domain and component-owned
+fragments under `tokens/source/`. `tokens/banhaten.tokens.json` is output-only
+and deterministically compiled from that manifest. Authored Tailwind mappings,
+keyframes, global and accessibility rules, and typography utilities live in
+`tokens/banhaten.utilities.css`. The distributable
+`registry/styles/globals.css` is regenerated from the compiled token catalog and
+that authored CSS source.
+
+The generator emits the complete default-theme graph once, then emits only declarations whose values differ for each alternate theme. Dark mode and alternate themes inherit unchanged scoped aliases through the cascade. This keeps the live graph auditable without duplicating identical declarations.
+
+The default appearance deliberately composes two concerns: `blue` owns brand
+roles and `gray` owns the neutral ramp. As a result, default product surfaces
+are achromatic, while links, focus states, and primary actions remain blue.
+`cssContract.defaultTheme` and `cssContract.defaultNeutralTheme` record that
+composition. `npm run tokens:build` synchronizes it into the authored default
+theme and semantic color-mode values before compiling the public artifacts.
+Alternate brand themes keep their reviewed neutral ramps unless their source is
+explicitly changed.
+
+Color values are design-owned. The generated Color Contrast page reports failing combinations and recommendations, but automation must not silently change source colors. A color change requires an explicit design review and regeneration of the contrast baseline.
+
+## Exception Ledger
+
+The following exceptions are allowed only in token generation or documented alias source, not directly in component implementation:
+
+| Exception | Reason | Owner |
+| --- | --- | --- |
+| Social provider marks | Apple, Facebook, Google, LinkedIn, Twitter, and WhatsApp colors and icon geometry must preserve provider identity; color must still flow through `currentColor` and Banhaten social variables. | Component alias source and social button source |
+| Payment or illustrative mark geometry | Some Figma-matched marks use fractional geometry that cannot be expressed cleanly through the global spacing scale. | Component alias source |
+| Effect and shadow stops | The supplied token zips do not include effect tokens, so component shadow aliases document those values. | Component alias source |
+| Media-query breakpoints | CSS custom properties are not reliable in media-query conditions. | Component CSS with local comment |
+| Radix numeric offsets | Some Radix APIs require JavaScript numbers instead of CSS variables; comments must pair each number with its matching token. | Component source |
+| Expanded composition widths | Larger app compositions may expose public layout aliases or documentation-only layout aliases. | Expanded component docs |
+
+If a new literal is needed, add it to an alias or the exception ledger before using it.
+
+## Public Override Surface
+
+Stable override points are CSS variables emitted in `registry/styles/globals.css`. Prefer overriding component aliases rather than editing installed component source. Product teams should use local wrapper components for behavior and keep Banhaten files generated-owned.

package/package.json

@@ -1,65 +1,97 @@
-{
-  "name": "banhaten",
-  "version": "0.1.2",
-  "description": "Banhaten design system: an Arabic and English-first React design system with shadcn-style component installation.",
-  "type": "module",
-  "bin": {
-    "banhaten": "src/cli/index.js"
-  },
-  "files": [
-    "src",
-    "registry",
-    "tokens",
-    "banhaten.config.example.json",
-    "README.md",
-    "LICENSE"
-  ],
-  "scripts": {
-    "build": "npm --prefix playground ci --include=dev --include=optional && npm --prefix playground run build",
-    "build:railway": "npm --prefix playground ci --include=dev --include=optional && npm --prefix playground run build:railway",
-    "start": "node playground/scripts/serve-static.mjs playground/dist",
-    "check": "node --check src/cli/index.js && npm run cli:test && npm run tokens:check && npm run registry:check && npm run playground:test",
-    "cli:test": "node scripts/cli-integration-test.mjs",
-    "playground:build": "npm --prefix playground run build",
-    "playground:dev": "npm --prefix playground run dev",
-    "playground:test": "npm --prefix playground run test",
-    "registry:check": "node scripts/check-registry-mirrors.mjs",
-    "registry:sync": "node scripts/check-registry-mirrors.mjs --write",
-    "components:tokens:check": "node scripts/check-component-token-usage.mjs",
-    "smoke": "node src/cli/index.js list",
-    "tokens:build": "node scripts/generate-token-css.mjs --write",
-    "tokens:check": "node scripts/generate-token-css.mjs --check && node scripts/check-token-contract.mjs && npm run components:tokens:check"
-  },
-  "engines": {
-    "node": ">=18.18"
-  },
-  "peerDependencies": {
-    "react": ">=18.2.0 || >=19.0.0",
-    "react-dom": ">=18.2.0 || >=19.0.0",
-    "tailwindcss": "^4.0.0"
-  },
-  "keywords": [
-    "banhaten",
-    "design-system",
-    "react",
-    "shadcn",
-    "rtl",
-    "arabic",
-    "components"
-  ],
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/AhmadGalal85/Banhaten-design-system.git"
-  },
-  "bugs": {
-    "url": "https://github.com/AhmadGalal85/Banhaten-design-system/issues"
-  },
-  "homepage": "https://github.com/AhmadGalal85/Banhaten-design-system#readme",
-  "main": "index.js",
-  "directories": {
-    "doc": "docs"
-  },
-  "devDependencies": {},
-  "author": ""
-}
+{
+  "name": "banhaten",
+  "version": "0.2.0",
+  "description": "Banhaten design system: an Arabic and English-first React design system with shadcn-style component installation.",
+  "type": "module",
+  "bin": {
+    "banhaten": "src/cli/index.js"
+  },
+  "files": [
+    "src",
+    "registry/index.json",
+    "registry/component-contract.json",
+    "registry/components",
+    "registry/examples",
+    "registry/guidance",
+    "registry/hooks",
+    "registry/styles",
+    "registry/utils",
+    "registry/assets/activity-feed-avatar.png",
+    "registry/assets/avatars/avatar-01.jpg",
+    "registry/assets/images/art-01.jpg",
+    "registry.json",
+    "tokens/banhaten.tokens.json",
+    "schema",
+    "docs",
+    "banhaten.config.example.json",
+    "README.md",
+    "CHANGELOG.md",
+    "CONTRIBUTING.md",
+    "SECURITY.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "npm --prefix playground ci --include=dev --include=optional && npm --prefix playground run build",
+    "build:railway": "npm --prefix playground ci --include=dev --include=optional && npm --prefix playground run build:railway",
+    "start": "node playground/scripts/serve-static.mjs playground/dist",
+    "check": "node --check src/cli/index.js && node --check src/cli/command-line.js && node --check src/cli/doctor.js && node --check src/cli/config-editors.js && node --check src/cli/source-scanner.js && node --check src/cli/jsonc.js && node --check src/cli/vite-config.js && node --check src/cli/install-plan.js && node --check src/cli/install-receipt.js && node --check src/cli/package-install-state.js && node --check src/cli/package-manager.js && node --check src/cli/package-plan.js && node --check src/cli/package-version.js && node --check scripts/compile-token-catalog.mjs && node --check scripts/sync-default-theme-neutral-values.mjs && node --check scripts/token-catalog-test.mjs && node --check scripts/registry-catalog.mjs && node --check scripts/generate-registry-index.mjs && node --check scripts/generate-shadcn-registry.mjs && node --check scripts/normalize-component-docs.mjs && node --check scripts/package-artifact.mjs && node --check scripts/check-package-contents.mjs && node --check scripts/select-react-compatibility.mjs && npm run contracts:check && npm run cli:test && npm run tokens:check && npm run registry:check && npm run docs:check && npm run package:check && npm run playground:build && npm run playground:test:browser && npm run playground:audit",
+    "contracts:check": "node scripts/validate-contracts.mjs",
+    "cli:test": "node scripts/cli-argument-test.mjs && node scripts/cli-dependency-test.mjs && node scripts/cli-install-plan-test.mjs && node scripts/cli-integration-test.mjs && node scripts/cli-doctor-test.mjs",
+    "playground:build": "npm --prefix playground run build",
+    "playground:dev": "npm --prefix playground run dev",
+    "playground:test": "npm --prefix playground run test",
+    "playground:test:browser": "npm --prefix playground run test:browser",
+    "playground:audit": "npm --prefix playground audit --audit-level=high",
+    "package:check": "node scripts/generate-registry-index.mjs --check && node scripts/compile-token-catalog.mjs --check && node scripts/check-package-contents.mjs",
+    "registry:build": "node scripts/generate-registry-index.mjs --write",
+    "registry:check": "node scripts/generate-registry-index.mjs --check && node scripts/check-registry-mirrors.mjs && node scripts/generate-shadcn-registry.mjs --check && node scripts/registry-runtime-exports-test.mjs && node scripts/check-isolated-registry-installs.mjs --packed",
+    "registry:export": "node scripts/generate-registry-index.mjs --write && node scripts/generate-shadcn-registry.mjs --write",
+    "registry:exports": "node scripts/check-isolated-registry-installs.mjs --write-exports",
+    "registry:sync": "node scripts/check-registry-mirrors.mjs --write",
+    "components:tokens:check": "node scripts/check-component-token-usage.mjs",
+    "components:tokens:metadata": "node scripts/sync-component-token-metadata.mjs",
+    "docs:check": "node scripts/check-component-docs.mjs && node scripts/normalize-component-docs.mjs",
+    "docs:normalize": "node scripts/normalize-component-docs.mjs --write",
+    "smoke": "node src/cli/index.js list",
+    "tokens:aliases:check": "node scripts/sync-default-theme-neutral-values.mjs",
+    "tokens:aliases:sync": "node scripts/sync-default-theme-neutral-values.mjs --write",
+    "tokens:build": "npm run tokens:aliases:sync && node scripts/compile-token-catalog.mjs --write && node scripts/generate-token-css.mjs --write",
+    "tokens:check": "npm run tokens:aliases:check && node scripts/compile-token-catalog.mjs --check && node scripts/token-catalog-test.mjs && node scripts/generate-token-css.mjs --check && node scripts/check-token-css-reproducibility.mjs && node scripts/check-token-contract.mjs && npm run components:tokens:check && npm run components:tokens:metadata"
+  },
+  "engines": {
+    "node": ">=18.18"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0",
+    "tailwindcss": "^4.0.0"
+  },
+  "keywords": [
+    "banhaten",
+    "design-system",
+    "react",
+    "shadcn",
+    "rtl",
+    "arabic",
+    "components"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/AhmadGalal85/Banhaten-design-system.git"
+  },
+  "bugs": {
+    "url": "https://github.com/AhmadGalal85/Banhaten-design-system/issues"
+  },
+  "homepage": "https://github.com/AhmadGalal85/Banhaten-design-system/tree/main/docs",
+  "directories": {
+    "doc": "docs"
+  },
+  "author": "Ahmad Galal",
+  "dependencies": {
+    "ajv": "^8.20.0",
+    "minimatch": "^10.2.5",
+    "semver": "^7.8.5",
+    "yaml": "^2.9.0"
+  }
+}

package/registry/component-contract.json

@@ -0,0 +1,40 @@
+{
+  "capabilities": {
+    "actions": "Actions",
+    "alignments": "Alignments",
+    "breakpoints": "Breakpoints",
+    "cardPositions": "Card Positions",
+    "colors": "Colors",
+    "controlPositions": "Control Positions",
+    "densities": "Densities",
+    "directions": "Directions",
+    "features": "Features",
+    "forms": "Forms",
+    "indicators": "Indicators",
+    "intents": "Intents",
+    "itemKinds": "Item Kinds",
+    "itemTypes": "Item Types",
+    "kinds": "Kinds",
+    "labelPositions": "Label Positions",
+    "layouts": "Layouts",
+    "modes": "Modes",
+    "offsets": "Offsets",
+    "options": "Options",
+    "orientations": "Orientations",
+    "platforms": "Platforms",
+    "pointerPositions": "Pointer Positions",
+    "selectionTypes": "Selection Types",
+    "shapes": "Shapes",
+    "sides": "Sides",
+    "sizes": "Sizes",
+    "states": "States",
+    "statusColors": "Status Colors",
+    "styles": "Styles",
+    "tokens": "Tokens",
+    "tones": "Tones",
+    "types": "Types",
+    "valueModes": "Value Modes",
+    "variants": "Variants",
+    "widths": "Widths"
+  }
+}

package/registry/components/alert-dialog.tsx

@@ -0,0 +1,297 @@
+"use client"
+
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+import { cva, type VariantProps } from "class-variance-authority"
+import { TriangleAlertIcon } from "lucide-react"
+
+import { Button, type ButtonProps } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+type AlertDialogIntent = "default" | "warning" | "danger"
+type AlertDialogSize = "sm" | "default" | "lg"
+
+const alertDialogContentVariants = cva(
+  [
+    "fixed left-1/2 top-1/2 z-[var(--bh-z-overlay)] flex max-h-[calc(100vh-(var(--bh-space-8xl-48)*2))] w-[var(--bh-alert-dialog-width)]",
+    "max-w-[calc(100vw-(var(--bh-space-4xl-20)*2))] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden",
+    "rounded-[var(--bh-radius-2xl-12)] bg-[var(--bh-bg-raised)] text-[var(--bh-content-default)] shadow-[var(--shadow-modal)] outline-none",
+    "[--bh-alert-dialog-border:var(--bh-border-subtle)] [--shadow-modal:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-alert-dialog-border),var(--shadow-component-default)]",
+  ],
+  {
+    variants: {
+      size: {
+        default:
+          "[--bh-alert-dialog-width:calc(var(--bh-space-19xl-384)+var(--bh-space-12xl-128)+var(--bh-space-8xl-48))]",
+        lg: "[--bh-alert-dialog-width:calc(var(--bh-space-19xl-384)+var(--bh-space-16xl-256)+var(--bh-space-9xl-64)-var(--bh-space-xs-4))]",
+        sm: "[--bh-alert-dialog-width:calc(var(--bh-space-19xl-384)+var(--bh-space-8xl-48)+var(--bh-space-md-8))]",
+      },
+    },
+    defaultVariants: {
+      size: "sm",
+    },
+  }
+)
+
+const intentClassNames: Record<AlertDialogIntent, string> = {
+  danger:
+    "bg-[var(--bh-bg-danger-subtle)] text-[var(--bh-content-danger-default)]",
+  default:
+    "bg-[var(--bh-bg-neutral-subtle)] text-[var(--bh-content-subtle)]",
+  warning:
+    "bg-[var(--bh-bg-warning-subtle)] text-[var(--bh-content-warning-default)]",
+}
+
+type AlertDialogProps = React.ComponentProps<typeof AlertDialogPrimitive.Root>
+type AlertDialogTriggerProps = React.ComponentProps<
+  typeof AlertDialogPrimitive.Trigger
+>
+type AlertDialogPortalProps = React.ComponentProps<
+  typeof AlertDialogPrimitive.Portal
+>
+type AlertDialogOverlayProps = React.ComponentPropsWithoutRef<
+  typeof AlertDialogPrimitive.Overlay
+>
+type AlertDialogContentProps = React.ComponentPropsWithoutRef<
+  typeof AlertDialogPrimitive.Content
+> &
+  VariantProps<typeof alertDialogContentVariants> & {
+    overlayClassName?: string
+  }
+type AlertDialogHeaderProps = React.ComponentProps<"header">
+type AlertDialogBodyProps = React.ComponentProps<"div">
+type AlertDialogFooterProps = React.ComponentProps<"footer">
+type AlertDialogTitleProps = React.ComponentPropsWithoutRef<
+  typeof AlertDialogPrimitive.Title
+>
+type AlertDialogDescriptionProps = React.ComponentPropsWithoutRef<
+  typeof AlertDialogPrimitive.Description
+>
+type AlertDialogIconProps = React.ComponentProps<"span"> & {
+  intent?: AlertDialogIntent
+}
+type AlertDialogActionProps = ButtonProps
+type AlertDialogCancelProps = ButtonProps
+
+const AlertDialog = AlertDialogPrimitive.Root
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  AlertDialogOverlayProps
+>(function AlertDialogOverlay({ className, ...props }, ref) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      ref={ref}
+      className={cn(
+        "fixed inset-0 z-[var(--bh-z-overlay)] bg-[var(--bh-bg-backdrop)]",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  AlertDialogContentProps
+>(function AlertDialogContent(
+  { children, className, overlayClassName, size, ...props },
+  ref
+) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay className={overlayClassName} />
+      <AlertDialogPrimitive.Content
+        data-size={size ?? "sm"}
+        data-slot="alert-dialog-content"
+        ref={ref}
+        className={cn(alertDialogContentVariants({ size, className }))}
+        {...props}
+      >
+        {children}
+      </AlertDialogPrimitive.Content>
+    </AlertDialogPortal>
+  )
+})
+
+const AlertDialogHeader = React.forwardRef<HTMLElement, AlertDialogHeaderProps>(
+  function AlertDialogHeader({ className, ...props }, ref) {
+    return (
+      <header
+        data-slot="alert-dialog-header"
+        ref={ref}
+        className={cn(
+          "flex w-full shrink-0 items-start gap-[var(--bh-space-sm-6)] px-[var(--bh-space-4xl-20)] pb-[var(--bh-space-md-8)] pt-[var(--bh-space-4xl-20)] text-start",
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+
+const AlertDialogBody = React.forwardRef<HTMLDivElement, AlertDialogBodyProps>(
+  function AlertDialogBody({ className, ...props }, ref) {
+    return (
+      <div
+        data-slot="alert-dialog-body"
+        ref={ref}
+        className={cn(
+          "flex w-full shrink-0 items-start px-[var(--bh-space-4xl-20)] pb-[var(--bh-space-4xl-20)] pt-[var(--bh-space-lg-10)]",
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+
+const AlertDialogFooter = React.forwardRef<
+  HTMLElement,
+  AlertDialogFooterProps
+>(function AlertDialogFooter({ className, ...props }, ref) {
+  return (
+    <footer
+      data-slot="alert-dialog-footer"
+      ref={ref}
+      className={cn(
+        "flex w-full shrink-0 items-center justify-end gap-[var(--bh-space-lg-10)] border-t border-[var(--bh-border-subtle)] px-[var(--bh-space-4xl-20)] py-[var(--bh-space-3xl-16)]",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  AlertDialogTitleProps
+>(function AlertDialogTitle({ className, dir = "auto", ...props }, ref) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      dir={dir}
+      ref={ref}
+      className={cn(
+        "min-w-0 flex-1 text-start text-[length:var(--bh-text-heading-sm-semibold-font-size)] font-[var(--bh-text-heading-sm-semibold-font-weight)] leading-[var(--bh-text-heading-sm-semibold-line-height)] tracking-[var(--bh-text-heading-sm-semibold-letter-spacing)] text-[var(--bh-content-default)]",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  AlertDialogDescriptionProps
+>(function AlertDialogDescription({ className, dir = "auto", ...props }, ref) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      dir={dir}
+      ref={ref}
+      className={cn(
+        "min-w-0 flex-1 text-start text-[length:var(--bh-text-body-md-regular-font-size)] font-[var(--bh-text-body-md-regular-font-weight)] leading-[var(--bh-text-body-md-regular-line-height)] tracking-[var(--bh-text-body-md-regular-letter-spacing)] text-[var(--bh-content-subtle)]",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+
+function AlertDialogIcon({
+  children,
+  className,
+  intent = "danger",
+  ...props
+}: AlertDialogIconProps) {
+  return (
+    <span
+      aria-hidden="true"
+      data-intent={intent}
+      data-slot="alert-dialog-icon"
+      className={cn(
+        "inline-flex size-[var(--bh-space-5xl-24)] shrink-0 items-center justify-center rounded-[var(--bh-radius-full)]",
+        intentClassNames[intent],
+        className
+      )}
+      {...props}
+    >
+      {children ?? (
+        <TriangleAlertIcon
+          className="size-[var(--bh-space-3xl-16)]"
+          strokeWidth="var(--bh-icon-stroke-200)"
+        />
+      )}
+    </span>
+  )
+}
+
+const AlertDialogAction = React.forwardRef<
+  HTMLButtonElement,
+  AlertDialogActionProps
+>(function AlertDialogAction(
+  { asChild = false, children = "Confirm", size = "sm", variant = "danger", ...props },
+  ref
+) {
+  return (
+    <AlertDialogPrimitive.Action asChild>
+      <Button asChild={asChild} ref={ref} size={size} variant={variant} {...props}>
+        {children}
+      </Button>
+    </AlertDialogPrimitive.Action>
+  )
+})
+
+const AlertDialogCancel = React.forwardRef<
+  HTMLButtonElement,
+  AlertDialogCancelProps
+>(function AlertDialogCancel(
+  { asChild = false, children = "Cancel", size = "sm", variant = "soft", ...props },
+  ref
+) {
+  return (
+    <AlertDialogPrimitive.Cancel asChild>
+      <Button asChild={asChild} ref={ref} size={size} variant={variant} {...props}>
+        {children}
+      </Button>
+    </AlertDialogPrimitive.Cancel>
+  )
+})
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogBody,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogIcon,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+  alertDialogContentVariants,
+}
+export type {
+  AlertDialogActionProps,
+  AlertDialogBodyProps,
+  AlertDialogCancelProps,
+  AlertDialogContentProps,
+  AlertDialogDescriptionProps,
+  AlertDialogFooterProps,
+  AlertDialogHeaderProps,
+  AlertDialogIconProps,
+  AlertDialogIntent,
+  AlertDialogOverlayProps,
+  AlertDialogPortalProps,
+  AlertDialogProps,
+  AlertDialogSize,
+  AlertDialogTitleProps,
+  AlertDialogTriggerProps,
+}