{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "b-dialog",
  "type": "registry:ui",
  "registryDependencies": [],
  "dependencies": [
    "@base-ui/react",
    "@radix-ui/react-slot",
    "motion",
    "lucide-react"
  ],
  "devDependencies": [],
  "files": [
    {
      "path": "b-dialog.tsx",
      "content": "\"use client\";\n\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { X } from \"lucide-react\";\nimport {\n  MotionConfig,\n  motion,\n  type Transition,\n  useReducedMotion,\n  type Variants,\n} from \"motion/react\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst controlCornerClassName =\n  \"rounded-lg supports-[corner-shape:squircle]:corner-squircle supports-[corner-shape:squircle]:rounded-[11px]\";\n\nconst surfaceCornerClassName =\n  \"rounded-lg supports-[corner-shape:squircle]:corner-squircle supports-[corner-shape:squircle]:rounded-[12px]\";\n\nconst dialogThemeClassName =\n  \"[--dlg-surface:var(--popover,#ffffff)] [--dlg-foreground:var(--popover-foreground,#111111)] [--dlg-border:var(--border,#e3e7ec)] [--dlg-ring:var(--ring,rgba(17,17,17,0.16))] [--dlg-muted-foreground:var(--muted-foreground,#6d7480)] [--dlg-muted:var(--muted,#f5f7fa)] [--dlg-destructive:var(--destructive,#dc2626)] [--dlg-destructive-foreground:var(--destructive-foreground,#ffffff)] [--color-accent:var(--dlg-muted)] [--color-accent-foreground:var(--dlg-foreground)] dark:[--dlg-surface:var(--popover,#0a0a0a)] dark:[--dlg-foreground:var(--popover-foreground,#f6f3ec)] dark:[--dlg-border:var(--border,#2b2a25)] dark:[--dlg-ring:var(--ring,rgba(246,243,236,0.18))] dark:[--dlg-muted-foreground:var(--muted-foreground,#9a958a)] dark:[--dlg-muted:var(--muted,#1a1a18)] dark:[--dlg-destructive:var(--destructive,#f87171)] dark:[--dlg-destructive-foreground:var(--destructive-foreground,#111111)]\";\n\nconst dialogContentMaxHeightClassName =\n  \"max-h-[min(90svh,calc(100svh-env(safe-area-inset-top,0px)-env(safe-area-inset-bottom,0px)-2rem))] overflow-y-auto\";\n\nconst dialogContentBaseClassName = cn(\n  surfaceCornerClassName,\n  \"relative flex min-h-0 transform-gpu flex-col gap-5 border border-[color:color-mix(in_oklch,var(--dlg-border),transparent_25%)] bg-[color:color-mix(in_oklch,var(--dlg-surface),transparent_4%)] p-6 text-[color:var(--dlg-foreground)] shadow-[0_32px_120px_rgba(15,23,42,0.18)] outline-none supports-[backdrop-filter]:bg-[color:color-mix(in_oklch,var(--dlg-surface),transparent_8%)] sm:p-7\"\n);\n\nconst dialogContentSizeClassNames = {\n  sm: \"w-[min(100%,28rem)] max-w-md\",\n  default: \"w-[min(100%,34rem)] max-w-xl\",\n  lg: \"w-[min(100%,42rem)] max-w-2xl\",\n  full: \"w-[min(100%,calc(100vw-2rem))] max-w-none\",\n} as const;\n\ntype DialogContentSize = keyof typeof dialogContentSizeClassNames;\n\nconst dialogCloseClassName = cn(\n  controlCornerClassName,\n  \"absolute top-4 right-4 z-10 grid size-9 shrink-0 place-items-center text-[color:var(--dlg-muted-foreground)] transition-colors hover:bg-accent/60 hover:text-[color:var(--dlg-foreground)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:color-mix(in_oklch,var(--dlg-ring),transparent_50%)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--dlg-surface)] active:bg-accent/80 [&_svg]:block [&_svg]:size-4 [&_svg]:shrink-0\"\n);\n\nconst dialogTriggerClassName = cn(\n  controlCornerClassName,\n  \"inline-flex min-h-11 items-center justify-center bg-[color:var(--dlg-foreground)] px-4 py-2.5 font-medium text-[14px] text-[color:var(--dlg-surface)] tracking-[-0.01em] transition-[transform,background-color] duration-200 ease-[cubic-bezier(0.16,1,0.3,1)] hover:-translate-y-px hover:bg-[color:color-mix(in_oklch,var(--dlg-foreground),transparent_10%)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:color-mix(in_oklch,var(--dlg-ring),transparent_50%)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--dlg-surface)] active:translate-y-0 active:bg-[color:color-mix(in_oklch,var(--dlg-foreground),transparent_20%)] disabled:pointer-events-none disabled:opacity-50\"\n);\n\nconst dialogTriggerSmClassName = cn(\n  controlCornerClassName,\n  \"inline-flex h-8 min-h-8 translate-y-px items-center bg-[color:var(--dlg-foreground)] px-3 py-0 font-medium text-[13px] text-[color:var(--dlg-surface)] tracking-[-0.01em] transition-[transform,background-color] duration-200 ease-[cubic-bezier(0.16,1,0.3,1)] hover:-translate-y-px hover:bg-[color:color-mix(in_oklch,var(--dlg-foreground),transparent_10%)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:color-mix(in_oklch,var(--dlg-ring),transparent_50%)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--dlg-surface)] active:translate-y-0 active:bg-[color:color-mix(in_oklch,var(--dlg-foreground),transparent_20%)] disabled:pointer-events-none disabled:opacity-50\"\n);\n\nconst dialogCancelClassName = cn(\n  controlCornerClassName,\n  \"inline-flex min-h-11 items-center justify-center bg-[color:color-mix(in_oklch,var(--dlg-muted),transparent_45%)] px-4 py-2.5 font-medium text-[14px] text-[color:var(--dlg-muted-foreground)] tracking-[-0.01em] transition-colors duration-150 hover:bg-accent/60 hover:text-[color:var(--dlg-foreground)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:color-mix(in_oklch,var(--dlg-ring),transparent_50%)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--dlg-surface)] active:bg-accent/80 disabled:pointer-events-none disabled:opacity-50\"\n);\n\nconst dialogActionClassName = cn(\n  controlCornerClassName,\n  \"inline-flex min-h-11 items-center justify-center bg-[color:var(--dlg-foreground)] px-4 py-2.5 font-medium text-[14px] text-[color:var(--dlg-surface)] tracking-[-0.01em] transition-[transform,background-color] duration-200 ease-[cubic-bezier(0.16,1,0.3,1)] hover:-translate-y-px hover:bg-[color:color-mix(in_oklch,var(--dlg-foreground),transparent_10%)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:color-mix(in_oklch,var(--dlg-ring),transparent_50%)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--dlg-surface)] active:translate-y-0 active:bg-[color:color-mix(in_oklch,var(--dlg-foreground),transparent_20%)] disabled:pointer-events-none disabled:opacity-50\"\n);\n\nconst dialogDestructiveActionClassName = cn(\n  controlCornerClassName,\n  \"inline-flex min-h-11 items-center justify-center bg-[color:var(--dlg-destructive)] px-4 py-2.5 font-medium text-[14px] text-[color:var(--dlg-destructive-foreground)] tracking-[-0.01em] transition-[transform,filter] duration-200 ease-[cubic-bezier(0.16,1,0.3,1)] hover:-translate-y-px hover:brightness-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:color-mix(in_oklch,var(--dlg-destructive),transparent_30%)] focus-visible:ring-offset-2 active:translate-y-0 active:brightness-90 disabled:pointer-events-none disabled:opacity-50\"\n);\n\nconst FLUID_EASE: [number, number, number, number] = [0.22, 1, 0.36, 1];\nconst FLUID_EXIT_EASE: [number, number, number, number] = [0.4, 0, 0.2, 1];\n\nconst overlayEnterTransition: Transition = {\n  opacity: { duration: 0.44, ease: FLUID_EASE },\n  backdropFilter: { duration: 0.52, ease: FLUID_EASE },\n};\n\nconst overlayExitTransition: Transition = {\n  opacity: { duration: 0.32, ease: FLUID_EXIT_EASE },\n  backdropFilter: { duration: 0.28, ease: FLUID_EXIT_EASE },\n};\n\nconst overlayVariants: Variants = {\n  hidden: {\n    opacity: 0,\n    backdropFilter: \"blur(0px)\",\n    transition: overlayExitTransition,\n  },\n  visible: {\n    opacity: 1,\n    backdropFilter: \"blur(10px)\",\n    transition: overlayEnterTransition,\n  },\n};\n\nconst reducedOverlayVariants: Variants = {\n  hidden: { opacity: 0, transition: { duration: 0.1, ease: FLUID_EXIT_EASE } },\n  visible: { opacity: 1, transition: { duration: 0.12, ease: FLUID_EASE } },\n};\n\nconst contentVariants: Variants = {\n  hidden: {\n    opacity: 0,\n    scale: 0.85,\n    y: 30,\n    filter: \"blur(8px)\",\n  },\n  visible: {\n    opacity: 1,\n    scale: 1,\n    y: 0,\n    filter: \"blur(0px)\",\n    transition: {\n      type: \"spring\" as const,\n      damping: 25,\n      stiffness: 300,\n      mass: 0.8,\n      staggerChildren: 0.07,\n      delayChildren: 0.1,\n    },\n  },\n  exit: {\n    opacity: 0,\n    scale: 0.92,\n    y: 15,\n    filter: \"blur(4px)\",\n    transition: {\n      type: \"spring\" as const,\n      damping: 30,\n      stiffness: 400,\n      duration: 0.2,\n    },\n  },\n};\n\nconst reducedContentVariants: Variants = {\n  hidden: { opacity: 0 },\n  visible: {\n    opacity: 1,\n    transition: { duration: 0.12, ease: FLUID_EASE },\n  },\n  exit: {\n    opacity: 0,\n    transition: { duration: 0.1, ease: FLUID_EXIT_EASE },\n  },\n};\n\nconst childVariants: Variants = {\n  hidden: { opacity: 0, y: 12 },\n  visible: {\n    opacity: 1,\n    y: 0,\n    transition: { type: \"spring\" as const, damping: 20, stiffness: 300 },\n  },\n};\n\nconst reducedChildVariants: Variants = {\n  hidden: { opacity: 0 },\n  visible: { opacity: 1, transition: { duration: 0.1 } },\n};\n\ntype DialogContextValue = {\n  actionsRef: React.RefObject<DialogPrimitive.Root.Actions | null>;\n  open: boolean;\n};\n\nconst DialogContext = React.createContext<DialogContextValue | null>(null);\n\nfunction useDialogContext() {\n  const context = React.useContext(DialogContext);\n\n  if (!context) {\n    throw new Error(\"Dialog components must be used within Dialog.\");\n  }\n\n  return context;\n}\n\ntype PopupRenderProps = React.HTMLAttributes<HTMLDivElement> & {\n  children?: React.ReactNode;\n  className?: string;\n  ref?: React.Ref<HTMLDivElement>;\n  style?: React.CSSProperties;\n};\n\ntype BackdropRenderProps = React.HTMLAttributes<HTMLDivElement> & {\n  className?: string;\n  ref?: React.Ref<HTMLDivElement>;\n  style?: React.CSSProperties;\n};\n\nfunction setRef<T>(ref: React.Ref<T> | undefined, value: T | null) {\n  if (typeof ref === \"function\") {\n    ref(value);\n    return;\n  }\n\n  if (ref) {\n    (ref as React.MutableRefObject<T | null>).current = value;\n  }\n}\n\nfunction resolvePopupProps(popupProps: PopupRenderProps) {\n  const {\n    children: popupChildren,\n    className: popupClassName,\n    onAnimationEnd: _onAnimationEnd,\n    onAnimationIteration: _onAnimationIteration,\n    onAnimationStart: _onAnimationStart,\n    onDrag: _onDrag,\n    onDragEnd: _onDragEnd,\n    onDragEnter: _onDragEnter,\n    onDragExit: _onDragExit,\n    onDragLeave: _onDragLeave,\n    onDragOver: _onDragOver,\n    onDragStart: _onDragStart,\n    onDrop: _onDrop,\n    ref: popupRef,\n    style: popupStyle,\n    ...resolvedPopupProps\n  } = popupProps;\n\n  return {\n    popupChildren,\n    popupClassName,\n    popupRef,\n    popupStyle,\n    resolvedPopupProps,\n  };\n}\n\nfunction resolveBackdropProps(backdropProps: BackdropRenderProps) {\n  const {\n    className: backdropClassName,\n    onAnimationEnd: _onAnimationEnd,\n    onAnimationIteration: _onAnimationIteration,\n    onAnimationStart: _onAnimationStart,\n    onDrag: _onDrag,\n    onDragEnd: _onDragEnd,\n    onDragStart: _onDragStart,\n    ref: backdropRef,\n    style: backdropStyle,\n    ...resolvedBackdropProps\n  } = backdropProps;\n\n  return {\n    backdropClassName,\n    backdropRef,\n    backdropStyle,\n    resolvedBackdropProps,\n  };\n}\n\nfunction composeRefs<T>(...refs: Array<React.Ref<T> | undefined>) {\n  return (value: T | null) => {\n    for (const ref of refs) {\n      setRef(ref, value);\n    }\n  };\n}\n\nfunction mapStaggeredChildren(children: React.ReactNode, variants: Variants) {\n  return React.Children.map(children, (child, index) => {\n    if (child == null) {\n      return null;\n    }\n\n    const key =\n      React.isValidElement(child) && child.key != null ? child.key : index;\n\n    return (\n      <motion.div key={key} variants={variants}>\n        {child}\n      </motion.div>\n    );\n  });\n}\n\nexport interface DialogProps\n  extends Omit<\n    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>,\n    \"children\" | \"defaultOpen\" | \"onOpenChange\" | \"open\"\n  > {\n  children: React.ReactNode;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  open?: boolean;\n}\n\nfunction Dialog({\n  children,\n  defaultOpen = false,\n  onOpenChange,\n  open: openProp,\n  ...props\n}: DialogProps) {\n  const actionsRef = React.useRef<DialogPrimitive.Root.Actions | null>(null);\n  const isControlled = openProp !== undefined;\n  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);\n  const open = isControlled ? openProp : uncontrolledOpen;\n\n  const handleOpenChange = React.useCallback(\n    (\n      nextOpen: boolean,\n      eventDetails: DialogPrimitive.Root.ChangeEventDetails\n    ) => {\n      if (!nextOpen) {\n        eventDetails.preventUnmountOnClose();\n      }\n\n      onOpenChange?.(nextOpen);\n\n      if (!(eventDetails.isCanceled || isControlled)) {\n        setUncontrolledOpen(nextOpen);\n      }\n    },\n    [isControlled, onOpenChange]\n  );\n\n  return (\n    <DialogContext.Provider value={{ actionsRef, open }}>\n      <DialogPrimitive.Root\n        {...props}\n        actionsRef={actionsRef}\n        defaultOpen={isControlled ? undefined : defaultOpen}\n        onOpenChange={handleOpenChange}\n        open={open}\n      >\n        {children}\n      </DialogPrimitive.Root>\n    </DialogContext.Provider>\n  );\n}\n\ntype TriggerOrCloseProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n  asChild?: boolean;\n};\n\ntype DialogTriggerRef = React.ComponentProps<\n  typeof DialogPrimitive.Trigger\n>[\"ref\"];\n\nconst DialogTrigger = React.forwardRef<HTMLElement, TriggerOrCloseProps>(\n  ({ asChild, children, className, type = \"button\", ...props }, ref) => {\n    return (\n      <DialogPrimitive.Trigger\n        {...props}\n        className={\n          asChild\n            ? cn(dialogThemeClassName, className)\n            : cn(dialogThemeClassName, className ?? dialogTriggerClassName)\n        }\n        ref={ref as DialogTriggerRef}\n        render={asChild ? <Slot /> : undefined}\n        type={asChild ? undefined : type}\n      >\n        {children}\n      </DialogPrimitive.Trigger>\n    );\n  }\n);\nDialogTrigger.displayName = \"DialogTrigger\";\n\nconst DialogClose = React.forwardRef<HTMLButtonElement, TriggerOrCloseProps>(\n  ({ asChild, children, className, type = \"button\", ...props }, ref) => {\n    return (\n      <DialogPrimitive.Close\n        {...props}\n        className={cn(dialogThemeClassName, className)}\n        ref={ref}\n        render={asChild ? <Slot /> : undefined}\n        type={asChild ? undefined : type}\n      >\n        {children}\n      </DialogPrimitive.Close>\n    );\n  }\n);\nDialogClose.displayName = \"DialogClose\";\n\nconst DialogPortal = DialogPrimitive.Portal;\n\nexport interface DialogOverlayProps\n  extends Omit<\n    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Backdrop>,\n    \"render\"\n  > {\n  className?: string;\n}\n\nconst DialogOverlay = React.forwardRef<HTMLDivElement, DialogOverlayProps>(\n  ({ className, ...props }, ref) => {\n    const { open } = useDialogContext();\n    const reduceMotion = useReducedMotion() === true;\n    const overlayVariantConfig = reduceMotion\n      ? reducedOverlayVariants\n      : overlayVariants;\n\n    return (\n      <DialogPrimitive.Backdrop\n        {...props}\n        render={(backdropProps) => {\n          const {\n            backdropClassName,\n            backdropRef,\n            backdropStyle,\n            resolvedBackdropProps,\n          } = resolveBackdropProps(backdropProps);\n\n          return (\n            <motion.div\n              {...resolvedBackdropProps}\n              animate={open ? \"visible\" : \"hidden\"}\n              className={cn(\n                backdropClassName,\n                \"fixed inset-0 z-50 bg-black/52\",\n                className\n              )}\n              initial=\"hidden\"\n              ref={(node) => {\n                setRef(backdropRef, node);\n                setRef(ref, node);\n              }}\n              style={backdropStyle}\n              variants={overlayVariantConfig}\n            />\n          );\n        }}\n      />\n    );\n  }\n);\nDialogOverlay.displayName = \"DialogOverlay\";\n\nexport interface DialogContentProps\n  extends Omit<\n    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Popup>,\n    \"children\" | \"className\" | \"render\"\n  > {\n  children: React.ReactNode;\n  className?: string;\n  open?: boolean;\n  showCloseButton?: boolean;\n  size?: DialogContentSize;\n}\n\nconst DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>(\n  (\n    {\n      children,\n      className,\n      open: openProp,\n      showCloseButton = true,\n      size = \"default\",\n      ...props\n    },\n    ref\n  ) => {\n    const { actionsRef, open: contextOpen } = useDialogContext();\n    const resolvedOpen = openProp ?? contextOpen;\n    const [present, setPresent] = React.useState(resolvedOpen);\n    const hasOpenedRef = React.useRef(resolvedOpen);\n    const reduceMotion = useReducedMotion() === true;\n    const contentVariantConfig = reduceMotion\n      ? reducedContentVariants\n      : contentVariants;\n    const childVariantConfig = reduceMotion\n      ? reducedChildVariants\n      : childVariants;\n    const overlayVariantConfig = reduceMotion\n      ? reducedOverlayVariants\n      : overlayVariants;\n\n    React.useEffect(() => {\n      if (resolvedOpen) {\n        setPresent(true);\n        hasOpenedRef.current = true;\n      }\n    }, [resolvedOpen]);\n\n    if (!present) {\n      return null;\n    }\n\n    const contentAnimationState = resolvedOpen\n      ? \"visible\"\n      : hasOpenedRef.current\n        ? \"exit\"\n        : \"hidden\";\n\n    return (\n      <DialogPrimitive.Portal>\n        <MotionConfig reducedMotion={reduceMotion ? \"always\" : \"never\"}>\n          <DialogPrimitive.Backdrop\n            render={(backdropProps) => {\n              const {\n                backdropClassName,\n                backdropRef,\n                backdropStyle,\n                resolvedBackdropProps,\n              } = resolveBackdropProps(backdropProps);\n\n              return (\n                <motion.div\n                  {...resolvedBackdropProps}\n                  animate={resolvedOpen ? \"visible\" : \"hidden\"}\n                  className={cn(\n                    backdropClassName,\n                    \"fixed inset-0 z-50 bg-black/52\",\n                    !resolvedOpen && \"pointer-events-none\"\n                  )}\n                  initial=\"hidden\"\n                  ref={(node) => {\n                    setRef(backdropRef, node);\n                  }}\n                  style={backdropStyle}\n                  variants={overlayVariantConfig}\n                />\n              );\n            }}\n          />\n          <DialogPrimitive.Viewport className=\"pointer-events-none fixed inset-0 z-[51] grid place-items-center overflow-y-auto overscroll-contain p-4\">\n            <DialogPrimitive.Popup\n              {...props}\n              finalFocus\n              render={(popupProps) => {\n                const {\n                  popupChildren,\n                  popupClassName,\n                  popupRef,\n                  popupStyle,\n                  resolvedPopupProps,\n                } = resolvePopupProps(popupProps);\n\n                return (\n                  <motion.div\n                    {...resolvedPopupProps}\n                    animate={contentAnimationState}\n                    className={cn(\n                      dialogThemeClassName,\n                      dialogContentBaseClassName,\n                      dialogContentMaxHeightClassName,\n                      dialogContentSizeClassNames[size],\n                      \"pointer-events-auto\",\n                      className,\n                      popupClassName\n                    )}\n                    initial=\"hidden\"\n                    onAnimationComplete={(definition) => {\n                      if (!resolvedOpen && definition === \"exit\") {\n                        actionsRef.current?.unmount();\n                        setPresent(false);\n                      }\n                    }}\n                    ref={composeRefs(popupRef, ref)}\n                    style={{\n                      ...popupStyle,\n                      transformOrigin: \"center center\",\n                    }}\n                    variants={contentVariantConfig}\n                  >\n                    {popupChildren}\n                  </motion.div>\n                );\n              }}\n            >\n              {mapStaggeredChildren(children, childVariantConfig)}\n              {showCloseButton ? (\n                <DialogPrimitive.Close\n                  className={dialogCloseClassName}\n                  type=\"button\"\n                >\n                  <X aria-hidden=\"true\" className=\"size-4\" />\n                  <span className=\"sr-only\">Close</span>\n                </DialogPrimitive.Close>\n              ) : null}\n            </DialogPrimitive.Popup>\n          </DialogPrimitive.Viewport>\n        </MotionConfig>\n      </DialogPrimitive.Portal>\n    );\n  }\n);\nDialogContent.displayName = \"DialogContent\";\n\nfunction DialogHeader({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      className={cn(\"flex flex-col gap-2 pr-10 text-left\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction DialogBody({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      className={cn(\"-mx-1 min-h-0 flex-1 overflow-y-auto px-1\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction DialogMedia({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      className={cn(\n        \"grid size-11 shrink-0 place-items-center rounded-full bg-[color:color-mix(in_oklch,var(--dlg-foreground),transparent_90%)] text-[color:var(--dlg-foreground)] [&_svg]:block [&_svg]:size-5 [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DialogFooter({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      className={cn(\n        \"flex flex-col-reverse gap-2 pt-1 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nconst DialogTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => {\n  return (\n    <DialogPrimitive.Title\n      className={cn(\n        \"font-semibold text-[1.35rem] text-[color:var(--dlg-foreground)] leading-tight tracking-[-0.03em]\",\n        className\n      )}\n      ref={ref}\n      {...props}\n    />\n  );\n});\nDialogTitle.displayName = \"DialogTitle\";\n\nconst DialogDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => {\n  return (\n    <DialogPrimitive.Description\n      className={cn(\n        \"max-w-[46ch] text-[15px] text-[color:var(--dlg-muted-foreground)] leading-6\",\n        className\n      )}\n      ref={ref}\n      {...props}\n    />\n  );\n});\nDialogDescription.displayName = \"DialogDescription\";\n\ntype DialogButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n  asChild?: boolean;\n  closeOnClick?: boolean;\n};\n\ntype DialogCloseRef = React.ComponentProps<typeof DialogPrimitive.Close>[\"ref\"];\n\nconst DialogCancel = React.forwardRef<HTMLElement, DialogButtonProps>(\n  (\n    {\n      asChild,\n      children,\n      className,\n      closeOnClick = true,\n      onClick,\n      type = \"button\",\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <DialogPrimitive.Close\n        {...props}\n        className={cn(dialogCancelClassName, className)}\n        onClick={(event) => {\n          onClick?.(event);\n\n          if (!closeOnClick) {\n            event.preventDefault();\n          }\n        }}\n        ref={ref as DialogCloseRef}\n        render={asChild ? <Slot /> : undefined}\n        type={asChild ? undefined : type}\n      >\n        {children}\n      </DialogPrimitive.Close>\n    );\n  }\n);\nDialogCancel.displayName = \"DialogCancel\";\n\ntype DialogActionVariant = \"default\" | \"destructive\";\n\ninterface DialogActionProps extends DialogButtonProps {\n  variant?: DialogActionVariant;\n}\n\nconst DialogAction = React.forwardRef<HTMLElement, DialogActionProps>(\n  (\n    {\n      asChild,\n      children,\n      className,\n      closeOnClick = true,\n      onClick,\n      type = \"button\",\n      variant = \"default\",\n      ...props\n    },\n    ref\n  ) => {\n    const actionClassName =\n      variant === \"destructive\"\n        ? dialogDestructiveActionClassName\n        : dialogActionClassName;\n\n    return (\n      <DialogPrimitive.Close\n        {...props}\n        className={cn(actionClassName, className)}\n        onClick={(event) => {\n          onClick?.(event);\n\n          if (!closeOnClick) {\n            event.preventDefault();\n          }\n        }}\n        ref={ref as DialogCloseRef}\n        render={asChild ? <Slot /> : undefined}\n        type={asChild ? undefined : type}\n      >\n        {children}\n      </DialogPrimitive.Close>\n    );\n  }\n);\nDialogAction.displayName = \"DialogAction\";\n\nexport {\n  Dialog,\n  DialogTrigger,\n  DialogClose,\n  DialogPortal,\n  DialogOverlay,\n  DialogContent,\n  DialogHeader,\n  DialogBody,\n  DialogMedia,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n  DialogAction,\n  DialogCancel,\n  dialogActionClassName,\n  dialogCancelClassName,\n  dialogDestructiveActionClassName,\n  dialogThemeClassName,\n  dialogTriggerClassName,\n  dialogTriggerSmClassName,\n};\n",
      "type": "registry:ui"
    }
  ],
  "title": "Dialog (Base UI)",
  "description": "Dialog with the same exported Iconiq parts layered over Base UI primitives, preserving the original dialog springs while using the softer alert-dialog card styling and overlay treatment."
}