{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alert-dialog-accent",
  "title": "Dialog-accent alert",
  "description": "Styled alert: the Dialog-accent set. 5 decorative alert variations (TopBarAlert, SideBarAlert, RingAlert, GlowAlert, FillAlert) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.",
  "dependencies": [
    "motion@^12.42.2",
    "lucide-react@^1.23.0"
  ],
  "registryDependencies": [
    "@ai2/tokens"
  ],
  "files": [
    {
      "path": "registry/ai2/styled/alert-dialog-accent.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Droplet, Focus, PanelLeft, PanelTop, Sparkles } from \"lucide-react\"\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Accent alert-dialog family: 5 confirmation modals with a token accent colour.\n   Every export is a complete modal and SELF-CONTAINED (no radix, no portal): a\n   fixed backdrop plus a centred fixed panel. A backdrop click, Escape or Cancel\n   closes it; Confirm calls onConfirm first and then closes. The panel takes\n   focus on open. AnimatePresence enter/exit, only a fade under reduced motion.\n   Colour comes ONLY from tokens; transparency ONLY through\n   color-mix(in oklab, var(--color-x) N%, transparent). The accent colour is the\n   primary token; the variants apply that accent to a DIFFERENT part of the\n   panel: a top strip, a left vertical bar, a ring box-shadow, a glow box-shadow,\n   a soft fill. */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\nconst panelWidth: Record<StyledSize, string> = {\n  sm: \"max-w-sm\",\n  md: \"max-w-md\",\n  lg: \"max-w-lg\",\n  xl: \"max-w-xl\",\n}\n\nconst bodyPad: Record<StyledSize, string> = {\n  sm: \"p-4\",\n  md: \"p-5\",\n  lg: \"p-6\",\n  xl: \"p-7\",\n}\n\nconst cancelBtn =\n  \"inline-flex h-9 items-center justify-center rounded-md border border-border bg-transparent px-4 text-sm font-medium text-foreground transition-colors hover:bg-secondary focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none\"\n\n/* The confirm button is painted with the accent (primary) token. */\nconst confirmBtn =\n  \"inline-flex h-9 items-center justify-center gap-1.5 rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none\"\n\ntype StyledAlertPublicProps = {\n  size?: StyledSize\n  trigger?: React.ReactNode\n  title?: React.ReactNode\n  description?: React.ReactNode\n  confirmLabel?: string\n  cancelLabel?: string\n  onConfirm?: () => void\n  className?: string\n  open?: boolean\n  defaultOpen?: boolean\n  onOpenChange?: (o: boolean) => void\n}\n\ntype StyledAlertCoreProps = StyledAlertPublicProps & {\n  /** Panelin cerceve / box-shadow / dolgu aksan siniflari. */\n  panelClassName?: string\n  /** The decorative layer added inside the panel (a top strip, a left bar and so on). */\n  accent?: React.ReactNode\n  icon: React.ReactNode\n}\n\n/* Ortak modal cekirdegi: durum yonetimi, backdrop, panel, escape, odak, motion. */\nfunction AccentAlertDialog({\n  size = \"md\",\n  trigger,\n  title,\n  description,\n  confirmLabel = \"Confirm\",\n  cancelLabel = \"Cancel\",\n  onConfirm,\n  className,\n  open,\n  defaultOpen,\n  onOpenChange,\n  panelClassName,\n  accent,\n  icon,\n}: StyledAlertCoreProps) {\n  const reduce = useReducedMotion()\n  const isControlled = open !== undefined\n  const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? false)\n  const actualOpen = isControlled ? open : internalOpen\n  const panelRef = React.useRef<HTMLDivElement>(null)\n\n  const setOpen = React.useCallback(\n    (next: boolean) => {\n      if (!isControlled) setInternalOpen(next)\n      onOpenChange?.(next)\n    },\n    [isControlled, onOpenChange]\n  )\n\n  React.useEffect(() => {\n    if (!actualOpen) return\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") setOpen(false)\n    }\n    document.addEventListener(\"keydown\", onKey)\n    const raf = window.requestAnimationFrame(() => panelRef.current?.focus())\n    return () => {\n      document.removeEventListener(\"keydown\", onKey)\n      window.cancelAnimationFrame(raf)\n    }\n  }, [actualOpen, setOpen])\n\n  const handleConfirm = () => {\n    onConfirm?.()\n    setOpen(false)\n  }\n\n  return (\n    <span data-slot=\"styled-alert-dialog\" className=\"contents\">\n      {/* ARIA durumu tetikleyicinin KENDISINDE. Once yoktu: ekran okuyucu\n\n          kullanicisi butonun bir dialog actigini ve acik olup olmadigini\n\n          HIC bilmiyordu. Canli AX taramasiyla bulundu (grep gostermemisti). */}\n\n      <span data-slot=\"styled-alert-dialog-trigger\" className=\"inline-flex\">\n\n        {React.isValidElement<React.ButtonHTMLAttributes<HTMLButtonElement>>(trigger) ? (\n\n          React.cloneElement(trigger, {\n\n            \"aria-haspopup\": \"dialog\",\n\n            \"aria-expanded\": actualOpen,\n\n            onClick: (event: React.MouseEvent<HTMLButtonElement>) => {\n\n              trigger.props.onClick?.(event)\n\n              setOpen(true)\n\n            },\n\n          })\n\n        ) : (\n\n          <button\n\n            type=\"button\"\n\n            aria-haspopup=\"dialog\"\n\n            aria-expanded={actualOpen}\n\n            onClick={() => setOpen(true)}\n\n            className=\"inline-flex h-9 items-center justify-center rounded-md border border-border bg-secondary px-4 text-sm font-medium text-secondary-foreground transition-colors hover:bg-secondary/80 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50\"\n\n          >\n\n            {trigger ?? \"Open\"}\n\n          </button>\n\n        )}\n\n      </span>\n\n      <AnimatePresence>\n        {actualOpen ? (\n          <>\n            <motion.div\n              data-slot=\"styled-alert-dialog-backdrop\"\n              className=\"fixed inset-0 z-50 bg-[color-mix(in_oklab,var(--color-foreground)_45%,transparent)] supports-[backdrop-filter]:backdrop-blur-sm\"\n              onClick={() => setOpen(false)}\n              initial={reduce ? false : { opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={reduce ? { opacity: 1 } : { opacity: 0 }}\n              transition={{ duration: 0.2, ease: \"easeOut\" }}\n            />\n            <div className=\"pointer-events-none fixed inset-0 z-50 flex items-center justify-center p-4\">\n              <motion.div\n                ref={panelRef}\n                role=\"alertdialog\"\n                aria-modal=\"true\"\n                tabIndex={-1}\n                onClick={(e) => e.stopPropagation()}\n                className={cn(\n                  \"pointer-events-auto relative w-full overflow-hidden rounded-xl border border-border bg-popover text-popover-foreground shadow-lg outline-none\",\n                  panelWidth[size],\n                  panelClassName,\n                  className\n                )}\n                initial={reduce ? false : { opacity: 0, scale: 0.96, y: 8 }}\n                animate={{ opacity: 1, scale: 1, y: 0 }}\n                exit={reduce ? { opacity: 1 } : { opacity: 0, scale: 0.96, y: 8 }}\n                transition={{ duration: 0.2, ease: \"easeOut\" }}\n              >\n                {accent}\n                <div className={cn(\"flex gap-3\", bodyPad[size])}>\n                  <span\n                    data-slot=\"styled-alert-dialog-icon\"\n                    className=\"mt-0.5 flex shrink-0 items-center text-primary [&_svg]:size-5 [&_svg]:shrink-0 [&_i]:text-xl [&_i]:leading-none\"\n                  >\n                    {icon}\n                  </span>\n                  <div className=\"min-w-0 flex-1\">\n                    {title ? (\n                      <h2\n                        data-slot=\"styled-alert-dialog-title\"\n                        className=\"text-base font-semibold tracking-tight text-foreground\"\n                      >\n                        {title}\n                      </h2>\n                    ) : null}\n                    {description ? (\n                      <p\n                        data-slot=\"styled-alert-dialog-description\"\n                        className=\"mt-1 text-sm text-muted-foreground\"\n                      >\n                        {description}\n                      </p>\n                    ) : null}\n                  </div>\n                </div>\n\n                <div\n                  data-slot=\"styled-alert-dialog-footer\"\n                  className={cn(\"flex justify-end gap-2 pt-0\", bodyPad[size])}\n                >\n                  <button\n                    type=\"button\"\n                    data-slot=\"styled-alert-dialog-cancel\"\n                    className={cancelBtn}\n                    onClick={() => setOpen(false)}\n                  >\n                    {cancelLabel}\n                  </button>\n                  <button\n                    type=\"button\"\n                    data-slot=\"styled-alert-dialog-confirm\"\n                    className={confirmBtn}\n                    onClick={handleConfirm}\n                  >\n                    {confirmLabel}\n                  </button>\n                </div>\n              </motion.div>\n            </div>\n          </>\n        ) : null}\n      </AnimatePresence>\n    </span>\n  )\n}\n\n/* TopBarAlert: a full-width primary token accent strip above the panel (h-1). */\nexport function TopBarAlert({\n  title = \"Confirm this action\",\n  description = \"A token accent runs across the top of the panel.\",\n  ...props\n}: StyledAlertPublicProps) {\n  return (\n    <AccentAlertDialog\n      icon={<PanelTop />}\n      title={title}\n      description={description}\n      accent={\n        <span\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-x-0 top-0 h-1 bg-primary\"\n        />\n      }\n      {...props}\n    />\n  )\n}\n\n/* SideBarAlert: panelin solunda dikey primary token aksan cubuk (w-1). */\nexport function SideBarAlert({\n  title = \"Confirm this action\",\n  description = \"A token accent bar runs down the left edge of the panel.\",\n  ...props\n}: StyledAlertPublicProps) {\n  return (\n    <AccentAlertDialog\n      icon={<PanelLeft />}\n      title={title}\n      description={description}\n      accent={\n        <span\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-y-0 left-0 w-1 bg-primary\"\n        />\n      }\n      {...props}\n    />\n  )\n}\n\n/* RingAlert: panel etrafinda cift halka. Border + iki azalan yogunlukta primary\n   token box-shadow cizgisi (color-mix ile). */\nexport function RingAlert({\n  title = \"Confirm this action\",\n  description = \"A token ring wraps the panel with a soft outer halo.\",\n  ...props\n}: StyledAlertPublicProps) {\n  return (\n    <AccentAlertDialog\n      icon={<Focus />}\n      title={title}\n      description={description}\n      panelClassName=\"border-[color-mix(in_oklab,var(--color-primary)_40%,transparent)] shadow-[0_0_0_1px_color-mix(in_oklab,var(--color-primary)_45%,transparent),0_0_0_5px_color-mix(in_oklab,var(--color-primary)_18%,transparent)]\"\n      {...props}\n    />\n  )\n}\n\n/* GlowAlert: panel etrafinda genis, dusuk yogunluklu primary token glow. */\nexport function GlowAlert({\n  title = \"Confirm this action\",\n  description = \"A soft token glow radiates from behind the panel.\",\n  ...props\n}: StyledAlertPublicProps) {\n  return (\n    <AccentAlertDialog\n      icon={<Sparkles />}\n      title={title}\n      description={description}\n      panelClassName=\"border-[color-mix(in_oklab,var(--color-primary)_35%,transparent)] shadow-[0_0_45px_color-mix(in_oklab,var(--color-primary)_28%,transparent),0_0_0_1px_color-mix(in_oklab,var(--color-primary)_20%,transparent)]\"\n      {...props}\n    />\n  )\n}\n\n/* FillAlert: the panel background is a light primary token soft fill (mixed over\n   popover with color-mix), plus a thin accent border. */\nexport function FillAlert({\n  title = \"Confirm this action\",\n  description = \"The panel surface carries a faint token fill.\",\n  ...props\n}: StyledAlertPublicProps) {\n  return (\n    <AccentAlertDialog\n      icon={<Droplet />}\n      title={title}\n      description={description}\n      panelClassName=\"border-[color-mix(in_oklab,var(--color-primary)_30%,transparent)] bg-[color-mix(in_oklab,var(--color-primary)_6%,var(--color-popover))]\"\n      {...props}\n    />\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/alert-dialog-accent.tsx"
    }
  ],
  "categories": [
    "styled",
    "alert"
  ],
  "type": "registry:component"
}