{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dialog",
  "type": "registry:block",
  "title": "Dialog",
  "description": "Accessible modal dialogs for forms, confirmations, and focused tasks.",
  "author": "Wensity <hey@wensity.com>",
  "dependencies": [
    "@base-ui/react",
    "@tabler/icons-react",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/wensity/lib/utils.ts",
      "type": "registry:lib",
      "target": "@lib/utils.ts",
      "content": "import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"
    },
    {
      "path": "registry/wensity/dialog.tsx",
      "type": "registry:component",
      "target": "@components/wensity/dialog.tsx",
      "content": "\"use client\";\n\n/**\n * Dialog — Base UI Dialog foundation (Phase 4B).\n * Focus trap/return, dismissal, portal, aria-modal, and scroll lock come from Base UI.\n * Motion is CSS keyed to data-starting-style / data-ending-style (overlay.tsx timing reference).\n * D-17: onOpenChange simplified to (open: boolean) => void; asChild maps to render.\n */\n\nimport * as React from \"react\";\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport { IconX } from \"@tabler/icons-react\";\nimport { cn } from \"@/lib/utils\";\n\nconst modalSurfaceClass = cn(\n  \"border border-[var(--border)] bg-[var(--primitive-surface-elevated)]\",\n  \"[box-shadow:var(--primitive-shadow-modal)]\",\n  \"isolate overflow-hidden rounded-[var(--primitive-radius-surface)]\",\n);\n\nconst backdropClass = cn(\n  \"fixed inset-0 z-[var(--primitive-z-overlay)] bg-[var(--primitive-backdrop)]\",\n  \"transition-opacity duration-[300ms] ease-[var(--primitive-ease,cubic-bezier(0.23,1,0.32,1))]\",\n  \"data-[starting-style]:opacity-0 data-[ending-style]:opacity-0\",\n  \"motion-reduce:transition-none\",\n);\n\nconst popupMotionClass = cn(\n  \"transition-[opacity,scale] duration-[440ms] ease-[var(--primitive-ease,cubic-bezier(0.23,1,0.32,1))]\",\n  \"data-[ending-style]:duration-[220ms]\",\n  \"data-[starting-style]:opacity-0 data-[ending-style]:opacity-0\",\n  \"data-[starting-style]:scale-[0.965] data-[ending-style]:scale-[0.965]\",\n  \"motion-reduce:transition-none motion-reduce:data-[starting-style]:scale-100 motion-reduce:data-[ending-style]:scale-100\",\n);\n\nconst fullscreenMotionClass = cn(\n  \"transition-[opacity,scale] duration-[460ms] ease-[var(--primitive-ease,cubic-bezier(0.23,1,0.32,1))]\",\n  \"data-[ending-style]:duration-[240ms]\",\n  \"data-[starting-style]:opacity-0 data-[ending-style]:opacity-0\",\n  \"data-[starting-style]:scale-[0.985] data-[ending-style]:scale-[0.985]\",\n  \"motion-reduce:transition-none motion-reduce:data-[starting-style]:scale-100 motion-reduce:data-[ending-style]:scale-100\",\n);\n\nfunction hasDialogTitle(children: React.ReactNode): boolean {\n  return React.Children.toArray(children).some((child) => {\n    if (!React.isValidElement(child)) return false;\n    if (child.type === DialogTitle || child.type === BaseDialog.Title) {\n      return true;\n    }\n    return hasDialogTitle(\n      (child.props as { children?: React.ReactNode }).children,\n    );\n  });\n}\n\nfunction adaptOpenChange(\n  onOpenChange?: (open: boolean) => void,\n): ((open: boolean, details: unknown) => void) | undefined {\n  if (!onOpenChange) return undefined;\n  return (open) => onOpenChange(open);\n}\n\nexport type DialogVariant =\n  | \"default\"\n  | \"confirmation\"\n  | \"form\"\n  | \"fullscreen\"\n  | \"scrollable\";\n\nexport interface DialogProps\n  extends Omit<\n    React.ComponentPropsWithoutRef<typeof BaseDialog.Root>,\n    \"onOpenChange\"\n  > {\n  onOpenChange?: (open: boolean) => void;\n}\n\nexport function Dialog({\n  onOpenChange,\n  modal = true,\n  children,\n  ...props\n}: DialogProps) {\n  return (\n    <BaseDialog.Root\n      modal={modal}\n      onOpenChange={adaptOpenChange(onOpenChange)}\n      {...props}\n    >\n      {children}\n    </BaseDialog.Root>\n  );\n}\n\nexport interface DialogTriggerProps\n  extends React.ComponentPropsWithoutRef<typeof BaseDialog.Trigger> {\n  asChild?: boolean;\n}\n\nexport function DialogTrigger({\n  asChild = false,\n  children,\n  ...props\n}: DialogTriggerProps) {\n  if (asChild && React.isValidElement(children)) {\n    // Base UI: nativeButton must match the rendered host. Button → true; <a>/div → false.\n    const nativeButton =\n      typeof children.type === \"string\" ? children.type === \"button\" : true;\n    return (\n      <BaseDialog.Trigger\n        nativeButton={nativeButton}\n        render={children as React.ReactElement}\n        {...props}\n      />\n    );\n  }\n  return <BaseDialog.Trigger {...props}>{children}</BaseDialog.Trigger>;\n}\n\nexport interface DialogCloseProps\n  extends React.ComponentPropsWithoutRef<typeof BaseDialog.Close> {\n  asChild?: boolean;\n}\n\nexport function DialogClose({\n  asChild = false,\n  children,\n  ...props\n}: DialogCloseProps) {\n  if (asChild && React.isValidElement(children)) {\n    const nativeButton =\n      typeof children.type === \"string\" ? children.type === \"button\" : true;\n    return (\n      <BaseDialog.Close\n        nativeButton={nativeButton}\n        render={children as React.ReactElement}\n        {...props}\n      />\n    );\n  }\n  return <BaseDialog.Close {...props}>{children}</BaseDialog.Close>;\n}\n\nexport const DialogPortal = BaseDialog.Portal;\n\nexport interface DialogOverlayProps\n  extends React.ComponentPropsWithoutRef<typeof BaseDialog.Backdrop> {}\n\nexport function DialogOverlay({ className, ...props }: DialogOverlayProps) {\n  return (\n    <BaseDialog.Backdrop className={cn(backdropClass, className)} {...props} />\n  );\n}\n\nexport interface DialogContentProps\n  extends React.ComponentPropsWithoutRef<typeof BaseDialog.Popup> {\n  variant?: DialogVariant;\n  showClose?: boolean;\n  container?: React.ComponentPropsWithoutRef<\n    typeof BaseDialog.Portal\n  >[\"container\"];\n  /** Screen-reader label when no DialogTitle is provided. */\n  accessibilityTitle?: string;\n}\n\nconst contentVariants: Record<DialogVariant, string> = {\n  default:\n    \"relative w-[calc(100vw-2rem)] max-w-[480px] outline-none\",\n  confirmation:\n    \"relative w-[calc(100vw-2rem)] max-w-[420px] outline-none\",\n  form: \"relative w-[calc(100vw-2rem)] max-w-[540px] outline-none\",\n  fullscreen:\n    \"relative flex h-full w-full flex-col outline-none sm:h-auto sm:max-h-[calc(100dvh-2rem)] sm:w-[calc(100vw-2rem)] md:max-h-[calc(100dvh-3rem)]\",\n  scrollable:\n    \"relative flex max-h-[min(88vh,720px)] w-[calc(100vw-2rem)] max-w-[520px] flex-col outline-none\",\n};\n\nexport function DialogContent({\n  className,\n  children,\n  variant = \"default\",\n  showClose = true,\n  container,\n  accessibilityTitle = \"Dialog\",\n  ...props\n}: DialogContentProps) {\n  const isFullscreen = variant === \"fullscreen\";\n  const isScrollable = variant === \"scrollable\";\n  const hasProvidedTitle = hasDialogTitle(children);\n\n  return (\n    <BaseDialog.Portal container={container}>\n      <BaseDialog.Backdrop className={backdropClass} />\n      <BaseDialog.Viewport\n        className={cn(\n          \"fixed inset-0 z-[var(--primitive-z-overlay)] flex outline-none\",\n          isFullscreen\n            ? \"items-stretch justify-stretch p-3 sm:items-center sm:justify-center sm:p-4 md:p-6\"\n            : \"items-center justify-center p-4\",\n        )}\n      >\n        <BaseDialog.Popup data-wensity-primitive=\"\"\n          className={cn(\n            contentVariants[variant],\n            modalSurfaceClass,\n            isFullscreen && \"rounded-[var(--primitive-radius-surface)]\",\n            isScrollable && \"min-h-0 overflow-hidden\",\n            isFullscreen ? fullscreenMotionClass : popupMotionClass,\n            className,\n          )}\n          {...props}\n        >\n          {hasProvidedTitle ? null : (\n            <BaseDialog.Title className=\"sr-only\">\n              {accessibilityTitle}\n            </BaseDialog.Title>\n          )}\n          <div\n            className={cn(\n              isScrollable && \"flex min-h-0 flex-1 flex-col\",\n              !isScrollable && \"relative\",\n            )}\n          >\n            {children}\n            {showClose ? (\n              <BaseDialog.Close\n                className={cn(\n                  \"absolute right-3 top-3 z-10 inline-flex size-8 items-center justify-center rounded-[var(--primitive-radius-control-sm)]\",\n                  \"border border-transparent text-[var(--muted-foreground)]\",\n                  \"transition-[background-color,border-color,color] duration-160 ease-[var(--primitive-ease)]\",\n                  \"hover:border-[var(--border)] hover:bg-[var(--primitive-surface-hover)] hover:text-[var(--foreground)]\",\n                  \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--primitive-ring)]\",\n                )}\n                aria-label=\"Close\"\n              >\n                <IconX stroke={1.75} className=\"size-4\" />\n              </BaseDialog.Close>\n            ) : null}\n          </div>\n        </BaseDialog.Popup>\n      </BaseDialog.Viewport>\n    </BaseDialog.Portal>\n  );\n}\n\nexport function DialogHeader({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      className={cn(\n        \"border-b border-[var(--border)] px-5 py-4 sm:px-6 sm:py-5\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function DialogBody({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div className={cn(\"px-5 py-4 sm:px-6 sm:py-5\", className)} {...props} />\n  );\n}\n\nexport function DialogScrollBody({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      className={cn(\n        \"min-h-0 flex-1 overflow-y-auto overscroll-contain px-5 py-4 sm:px-6 sm:py-5\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function DialogFooter({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      className={cn(\n        \"flex flex-col-reverse gap-2 border-t border-[var(--border)] px-5 py-4 sm:flex-row sm:justify-end sm:px-6\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function DialogTitle({\n  className,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof BaseDialog.Title>) {\n  return (\n    <BaseDialog.Title\n      className={cn(\n        \"pr-8 font-[family-name:var(--primitive-font-display)] text-base font-semibold tracking-[-0.015em] text-[var(--foreground)] sm:text-[17px]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function DialogDescription({\n  className,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof BaseDialog.Description>) {\n  return (\n    <BaseDialog.Description\n      className={cn(\n        \"mt-1.5 text-[13px] leading-[1.55] text-[var(--muted-foreground)]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport interface DialogConfirmationProps {\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  trigger?: React.ReactNode;\n  icon?: React.ReactNode;\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  container?: React.ComponentPropsWithoutRef<\n    typeof BaseDialog.Portal\n  >[\"container\"];\n  confirmLabel?: React.ReactNode;\n  cancelLabel?: React.ReactNode;\n  onConfirm?: () => void;\n  destructive?: boolean;\n}\n\nexport function DialogConfirmation({\n  open,\n  onOpenChange,\n  trigger,\n  icon,\n  title,\n  description,\n  container,\n  confirmLabel = \"Confirm\",\n  cancelLabel = \"Cancel\",\n  onConfirm,\n  destructive = false,\n}: DialogConfirmationProps) {\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      {trigger ? <DialogTrigger asChild>{trigger}</DialogTrigger> : null}\n      <DialogContent\n        variant=\"confirmation\"\n        showClose={false}\n        container={container}\n        accessibilityTitle={\n          typeof title === \"string\" ? title : \"Confirm action\"\n        }\n      >\n        <DialogBody className=\"pt-6 text-center sm:pt-7\">\n          {icon ? (\n            <div\n              className={cn(\n                \"mx-auto mb-4 flex size-11 items-center justify-center rounded-[var(--primitive-radius-surface)] border\",\n                destructive\n                  ? \"border-[var(--primitive-destructive-border)] bg-[var(--primitive-destructive-surface)] text-[var(--primitive-destructive)]\"\n                  : \"border-[var(--border)] bg-[var(--primitive-surface-hover)] text-[var(--foreground)]\",\n              )}\n            >\n              {icon}\n            </div>\n          ) : null}\n          <DialogTitle className=\"pr-0 text-center\">{title}</DialogTitle>\n          {description ? (\n            <DialogDescription className=\"mx-auto mt-2 max-w-[30ch] text-center\">\n              {description}\n            </DialogDescription>\n          ) : null}\n        </DialogBody>\n        <DialogFooter className=\"grid grid-cols-2 gap-2 sm:flex sm:justify-center\">\n          <DialogClose asChild>\n            <button\n              type=\"button\"\n              className={cn(\n                \"inline-flex h-10 items-center justify-center rounded-[var(--primitive-radius-control)] border border-[var(--border)] px-4 text-sm font-medium\",\n                \"text-[var(--foreground)] transition-[background-color,border-color] duration-160\",\n                \"hover:bg-[var(--primitive-surface-hover)]\",\n              )}\n            >\n              {cancelLabel}\n            </button>\n          </DialogClose>\n          <DialogClose asChild>\n            <button\n              type=\"button\"\n              onClick={onConfirm}\n              className={cn(\n                \"inline-flex h-10 items-center justify-center rounded-[var(--primitive-radius-control)] px-4 text-sm font-medium\",\n                \"transition-[background-color,border-color] duration-160\",\n                destructive\n                  ? \"border border-[var(--primitive-destructive-border)] bg-[var(--primitive-destructive)] text-[var(--primitive-destructive-foreground)] hover:bg-[var(--primitive-destructive-hover)] active:bg-[var(--primitive-destructive-active)]\"\n                  : \"border border-transparent bg-[var(--primitive-control-solid)] text-[var(--primitive-control-solid-foreground)] hover:bg-[var(--primitive-control-solid-hover)]\",\n              )}\n            >\n              {confirmLabel}\n            </button>\n          </DialogClose>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"
    }
  ],
  "cssVars": {
    "theme": {
      "font-sans": "var(--font-satoshi, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif)",
      "font-display": "var(--font-cabinet, ui-sans-serif, system-ui, sans-serif)",
      "color-background": "var(--background)",
      "color-foreground": "var(--foreground)",
      "color-surface": "var(--surface)",
      "color-surface-muted": "var(--surface-muted)",
      "color-border": "var(--border)",
      "color-border-strong": "var(--border-strong)",
      "color-muted": "var(--muted)",
      "color-muted-foreground": "var(--muted-foreground)",
      "color-ring": "var(--ring)",
      "color-chili-50": "#fff1ee",
      "color-chili-100": "#ffe2db",
      "color-chili-200": "#ffa896",
      "color-chili-300": "#ff8a73",
      "color-chili-400": "#f15a45",
      "color-chili-500": "#cd1c18",
      "color-chili-600": "#b31614",
      "color-chili-700": "#9b1313",
      "color-chili-800": "#6a0d0e",
      "color-chili-900": "#38000a",
      "color-chili-950": "#1f0006",
      "color-primitive-surface-elevated": "var(--primitive-surface-elevated)",
      "color-primitive-surface-overlay": "var(--primitive-surface-overlay)",
      "color-primitive-surface-hover": "var(--primitive-surface-hover)",
      "color-primitive-surface-active": "var(--primitive-surface-active)",
      "color-primitive-surface-selected": "var(--primitive-surface-selected)",
      "color-primitive-border-subtle": "var(--primitive-border-subtle)",
      "color-primitive-ring": "var(--primitive-ring)",
      "color-primitive-text-secondary": "var(--primitive-text-secondary)",
      "color-primitive-text-placeholder": "var(--primitive-text-placeholder)",
      "color-primitive-text-inverse": "var(--primitive-text-inverse)",
      "color-primitive-destructive": "var(--primitive-destructive)",
      "color-primitive-destructive-hover": "var(--primitive-destructive-hover)",
      "color-primitive-destructive-active": "var(--primitive-destructive-active)",
      "color-primitive-destructive-foreground": "var(--primitive-destructive-foreground)",
      "color-primitive-destructive-surface": "var(--primitive-destructive-surface)",
      "color-primitive-destructive-border": "var(--primitive-destructive-border)",
      "color-primitive-success": "var(--primitive-success)",
      "color-primitive-warning": "var(--primitive-warning)",
      "color-primitive-info": "var(--primitive-info)",
      "color-primitive-control-solid": "var(--primitive-control-solid)",
      "color-primitive-control-solid-hover": "var(--primitive-control-solid-hover)",
      "color-primitive-control-solid-active": "var(--primitive-control-solid-active)",
      "color-primitive-control-solid-foreground": "var(--primitive-control-solid-foreground)",
      "color-primitive-chart-1": "var(--primitive-chart-1)",
      "color-primitive-chart-2": "var(--primitive-chart-2)",
      "color-primitive-chart-3": "var(--primitive-chart-3)",
      "color-primitive-chart-4": "var(--primitive-chart-4)",
      "color-primitive-chart-5": "var(--primitive-chart-5)",
      "color-primitive-chart-6": "var(--primitive-chart-6)",
      "radius-primitive": "var(--primitive-radius)",
      "radius-primitive-control": "var(--primitive-radius-control)",
      "radius-primitive-control-sm": "var(--primitive-radius-control-sm)",
      "radius-primitive-surface": "var(--primitive-radius-surface)",
      "radius-primitive-item": "var(--primitive-radius-item)",
      "font-primitive-sans": "var(--primitive-font-sans)",
      "font-primitive-display": "var(--primitive-font-display)",
      "font-primitive-mono": "var(--primitive-font-mono)",
      "spacing-primitive-control-height-sm": "var(--primitive-control-height-sm)",
      "spacing-primitive-control-height-md": "var(--primitive-control-height-md)",
      "spacing-primitive-control-height-lg": "var(--primitive-control-height-lg)"
    },
    "light": {
      "background": "#fafafa",
      "foreground": "#0a0a0a",
      "surface": "#ffffff",
      "surface-muted": "#f4f4f5",
      "border": "rgba(10, 10, 10, 0.08)",
      "border-strong": "rgba(10, 10, 10, 0.16)",
      "muted": "#f4f4f5",
      "muted-foreground": "#52525b",
      "ring": "#cd1c18",
      "pattern-fg": "rgba(10, 10, 10, 0.07)",
      "llb-primary": "#18181b",
      "llb-primary-fg": "#ffffff",
      "llb-success": "#1f883d",
      "llb-error": "#cf222e",
      "primitive-surface-elevated": "#ffffff",
      "primitive-surface-overlay": "#ffffff",
      "primitive-surface-hover": "color-mix(in srgb, var(--foreground) 4%, transparent)",
      "primitive-surface-active": "color-mix(in srgb, var(--foreground) 7%, transparent)",
      "primitive-surface-selected": "color-mix(in srgb, var(--foreground) 6%, transparent)",
      "primitive-border-subtle": "color-mix(in srgb, var(--border) 60%, transparent)",
      "primitive-ring": "color-mix(in srgb, var(--foreground) 45%, transparent)",
      "primitive-text-secondary": "color-mix(in srgb, var(--foreground) 72%, transparent)",
      "primitive-text-placeholder": "color-mix(in srgb, var(--muted-foreground) 85%, transparent)",
      "primitive-radius": "0.875rem",
      "primitive-font-sans": "var(--font-sans)",
      "primitive-font-display": "var(--font-display)",
      "primitive-font-mono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
      "primitive-control-solid": "#24292d",
      "primitive-control-solid-hover": "#2c3237",
      "primitive-control-solid-active": "#1e2326",
      "primitive-control-solid-foreground": "#ffffff",
      "primitive-chart-1": "#2a78d6",
      "primitive-chart-2": "#1baf7a",
      "primitive-chart-3": "#eda100",
      "primitive-chart-4": "#008300",
      "primitive-chart-5": "#4a3aa7",
      "primitive-chart-6": "#e34948",
      "primitive-text-inverse": "#ffffff",
      "primitive-text-hint": "0.6875rem",
      "primitive-destructive": "#dc2626",
      "primitive-destructive-hover": "#b91c1c",
      "primitive-destructive-active": "#991b1b",
      "primitive-destructive-foreground": "#ffffff",
      "primitive-destructive-surface": "rgba(220, 38, 38, 0.10)",
      "primitive-destructive-border": "rgba(220, 38, 38, 0.45)",
      "primitive-success": "#047857",
      "primitive-success-surface": "rgba(4, 120, 87, 0.10)",
      "primitive-success-border": "rgba(4, 120, 87, 0.45)",
      "primitive-warning": "#b45309",
      "primitive-warning-surface": "rgba(180, 83, 9, 0.10)",
      "primitive-warning-border": "rgba(180, 83, 9, 0.45)",
      "primitive-info": "#0369a1",
      "primitive-info-surface": "rgba(3, 105, 161, 0.10)",
      "primitive-info-border": "rgba(3, 105, 161, 0.45)",
      "primitive-radius-control": "var(--primitive-radius)",
      "primitive-radius-control-sm": "max(0px, calc(var(--primitive-radius) - 4px))",
      "primitive-radius-surface": "calc(var(--primitive-radius) + min(2px, var(--primitive-radius)))",
      "primitive-radius-item": "max(0px, calc(var(--primitive-radius-surface) - 6px))",
      "primitive-control-height-sm": "2rem",
      "primitive-control-height-md": "2.25rem",
      "primitive-control-height-lg": "2.5rem",
      "primitive-shadow-raised": "0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px -12px rgba(0, 0, 0, 0.08)",
      "primitive-shadow-overlay": "0 1px 2px rgba(0, 0, 0, 0.06), 0 18px 48px -24px rgba(0, 0, 0, 0.35)",
      "primitive-shadow-modal": "0 1px 2px rgba(0, 0, 0, 0.08), 0 24px 64px -28px rgba(0, 0, 0, 0.42)",
      "primitive-z-overlay": "100",
      "primitive-z-popover": "130",
      "primitive-z-toast": "140",
      "primitive-backdrop": "rgba(0, 0, 0, 0.6)",
      "primitive-ease": "cubic-bezier(0.23, 1, 0.32, 1)"
    },
    "dark": {
      "background": "#0a0a0b",
      "foreground": "#f5f5f6",
      "surface": "#111113",
      "surface-muted": "#18181b",
      "border": "rgba(255, 255, 255, 0.08)",
      "border-strong": "rgba(255, 255, 255, 0.14)",
      "muted": "#1c1c1f",
      "muted-foreground": "#a1a1aa",
      "ring": "#cd1c18",
      "pattern-fg": "rgba(255, 255, 255, 0.06)",
      "llb-primary": "#f5f5f6",
      "llb-primary-fg": "#0a0a0b",
      "llb-success": "#2da44e",
      "llb-error": "#f85149",
      "primitive-surface-elevated": "#0f0f10",
      "primitive-surface-overlay": "#141415",
      "primitive-surface-hover": "color-mix(in srgb, var(--foreground) 5%, transparent)",
      "primitive-surface-active": "color-mix(in srgb, var(--foreground) 10%, transparent)",
      "primitive-surface-selected": "color-mix(in srgb, var(--foreground) 8%, transparent)",
      "primitive-border-subtle": "color-mix(in srgb, var(--border) 60%, transparent)",
      "primitive-ring": "color-mix(in srgb, var(--foreground) 45%, transparent)",
      "primitive-text-secondary": "color-mix(in srgb, var(--foreground) 72%, transparent)",
      "primitive-text-placeholder": "color-mix(in srgb, var(--muted-foreground) 85%, transparent)",
      "primitive-radius": "0.875rem",
      "primitive-font-sans": "var(--font-sans)",
      "primitive-font-display": "var(--font-display)",
      "primitive-font-mono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
      "primitive-control-solid": "#f5f3ee",
      "primitive-control-solid-hover": "#ffffff",
      "primitive-control-solid-active": "#e8e4da",
      "primitive-control-solid-foreground": "#151719",
      "primitive-chart-1": "#3987e5",
      "primitive-chart-2": "#199e70",
      "primitive-chart-3": "#c98500",
      "primitive-chart-4": "#008300",
      "primitive-chart-5": "#9085e9",
      "primitive-chart-6": "#e66767",
      "primitive-text-inverse": "#151719",
      "primitive-text-hint": "0.6875rem",
      "primitive-destructive": "#e11d2e",
      "primitive-destructive-hover": "#c1121f",
      "primitive-destructive-active": "#a4161a",
      "primitive-destructive-foreground": "#ffffff",
      "primitive-destructive-surface": "rgba(225, 29, 46, 0.12)",
      "primitive-destructive-border": "rgba(225, 29, 46, 0.52)",
      "primitive-success": "#34d399",
      "primitive-success-surface": "rgba(52, 211, 153, 0.12)",
      "primitive-success-border": "rgba(52, 211, 153, 0.45)",
      "primitive-warning": "#fbbf24",
      "primitive-warning-surface": "rgba(251, 191, 36, 0.12)",
      "primitive-warning-border": "rgba(251, 191, 36, 0.45)",
      "primitive-info": "#38bdf8",
      "primitive-info-surface": "rgba(56, 189, 248, 0.12)",
      "primitive-info-border": "rgba(56, 189, 248, 0.45)",
      "primitive-radius-control": "var(--primitive-radius)",
      "primitive-radius-control-sm": "max(0px, calc(var(--primitive-radius) - 4px))",
      "primitive-radius-surface": "calc(var(--primitive-radius) + min(2px, var(--primitive-radius)))",
      "primitive-radius-item": "max(0px, calc(var(--primitive-radius-surface) - 6px))",
      "primitive-control-height-sm": "2rem",
      "primitive-control-height-md": "2.25rem",
      "primitive-control-height-lg": "2.5rem",
      "primitive-shadow-raised": "0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6)",
      "primitive-shadow-overlay": "0 1px 2px rgba(0, 0, 0, 0.4), 0 20px 56px -28px rgba(0, 0, 0, 0.72)",
      "primitive-shadow-modal": "0 1px 2px rgba(0, 0, 0, 0.45), 0 28px 72px -32px rgba(0, 0, 0, 0.8)",
      "primitive-z-overlay": "100",
      "primitive-z-popover": "130",
      "primitive-z-toast": "140",
      "primitive-backdrop": "rgba(0, 0, 0, 0.6)",
      "primitive-ease": "cubic-bezier(0.23, 1, 0.32, 1)"
    }
  },
  "css": {
    "@layer base": {
      ":where([data-wensity-primitive])": {
        "font-family": "var(--primitive-font-sans)"
      }
    },
    "@utility scrollbar-hidden": {
      "scrollbar-width": "none",
      "-ms-overflow-style": "none",
      "&::-webkit-scrollbar": {
        "display": "none"
      }
    },
    "@keyframes wensity-marquee-x": {
      "from": {
        "transform": "translate3d(0, 0, 0)"
      },
      "to": {
        "transform": "translate3d(-50%, 0, 0)"
      }
    },
    "@keyframes wensity-marquee-x-reverse": {
      "from": {
        "transform": "translate3d(-50%, 0, 0)"
      },
      "to": {
        "transform": "translate3d(0, 0, 0)"
      }
    },
    "@keyframes wensity-morph-rot-cw": {
      "from": {
        "transform": "rotate(0deg)"
      },
      "to": {
        "transform": "rotate(360deg)"
      }
    },
    "@keyframes wensity-morph-rot-ccw": {
      "from": {
        "transform": "rotate(0deg)"
      },
      "to": {
        "transform": "rotate(-360deg)"
      }
    }
  },
  "docs": "Free Wensity component. Installs to @components/wensity/dialog.tsx. For Pro components and updates, use pnpm dlx wensity@latest add dialog.",
  "categories": [
    "UI Primitives",
    "wensity",
    "free"
  ],
  "meta": {
    "wensity": {
      "slug": "dialog",
      "access": "free",
      "category": "UI Primitives",
      "kind": "component",
      "componentUrl": "https://ui.wensity.com/primitives/dialog",
      "shadcnUrl": "https://ui.wensity.com/r/dialog",
      "cliInstall": "pnpm dlx wensity@latest add dialog"
    }
  }
}