{
  "name": "alert-dialog",
  "title": "Alert Dialog",
  "description": "Kura Alert Dialog component source.",
  "type": "ui",
  "add": "when-added",
  "files": [
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';\n  import {\n    buttonVariants,\n    type ButtonVariant,\n    type ButtonSize\n  } from '$lib/components/ui/button/index.js';\n  import { cn } from '$lib/utils.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    variant = 'default',\n    size = 'default',\n    ...restProps\n  }: AlertDialogPrimitive.ActionProps & {\n    variant?: ButtonVariant;\n    size?: ButtonSize;\n  } = $props();\n</script>\n\n<AlertDialogPrimitive.Action\n  bind:ref\n  data-slot=\"alert-dialog-action\"\n  class={cn(buttonVariants({ variant, size }), className)}\n  {...restProps}\n/>\n",
      "path": "alert-dialog/alert-dialog-action.svelte",
      "_imports_": [
        {
          "import": "$lib/components/ui/button/index.js",
          "item": "button",
          "file": {
            "type": "ui",
            "path": "button/index.ts"
          },
          "meta": {}
        },
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';\n  import {\n    buttonVariants,\n    type ButtonVariant,\n    type ButtonSize\n  } from '$lib/components/ui/button/index.js';\n  import { cn } from '$lib/utils.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    variant = 'outline',\n    size = 'default',\n    ...restProps\n  }: AlertDialogPrimitive.CancelProps & {\n    variant?: ButtonVariant;\n    size?: ButtonSize;\n  } = $props();\n</script>\n\n<AlertDialogPrimitive.Cancel\n  bind:ref\n  data-slot=\"alert-dialog-cancel\"\n  class={cn(buttonVariants({ variant, size }), className)}\n  {...restProps}\n/>\n",
      "path": "alert-dialog/alert-dialog-cancel.svelte",
      "_imports_": [
        {
          "import": "$lib/components/ui/button/index.js",
          "item": "button",
          "file": {
            "type": "ui",
            "path": "button/index.ts"
          },
          "meta": {}
        },
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';\n  import AlertDialogPortal from './alert-dialog-portal.svelte';\n  import AlertDialogOverlay from './alert-dialog-overlay.svelte';\n  import { cn, type WithoutChild, type WithoutChildrenOrChild } from '$lib/utils.js';\n  import type { ComponentProps } from 'svelte';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    size = 'default',\n    portalProps,\n    ...restProps\n  }: WithoutChild<AlertDialogPrimitive.ContentProps> & {\n    size?: 'default' | 'sm';\n    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof AlertDialogPortal>>;\n  } = $props();\n</script>\n\n<AlertDialogPortal {...portalProps}>\n  <AlertDialogOverlay />\n  <AlertDialogPrimitive.Content\n    bind:ref\n    data-slot=\"alert-dialog-content\"\n    data-size={size}\n    class={cn(\n      'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 bg-popover p-4 text-xs/relaxed text-popover-foreground outline-none duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm rounded-overlay hairline-frame group/alert-dialog-content',\n      className\n    )}\n    {...restProps}\n  />\n</AlertDialogPortal>\n",
      "path": "alert-dialog/alert-dialog-content.svelte",
      "_imports_": [
        {
          "import": "./alert-dialog-portal.svelte",
          "item": "alert-dialog",
          "file": {
            "type": "ui",
            "path": "alert-dialog/alert-dialog-portal.svelte"
          },
          "meta": {}
        },
        {
          "import": "./alert-dialog-overlay.svelte",
          "item": "alert-dialog",
          "file": {
            "type": "ui",
            "path": "alert-dialog/alert-dialog-overlay.svelte"
          },
          "meta": {}
        },
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';\n  import { cn } from '$lib/utils.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    ...restProps\n  }: AlertDialogPrimitive.DescriptionProps = $props();\n</script>\n\n<AlertDialogPrimitive.Description\n  bind:ref\n  data-slot=\"alert-dialog-description\"\n  class={cn(\n    'text-muted-foreground text-xs/relaxed text-balance md:text-pretty *:[a]:text-link *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground',\n    className\n  )}\n  {...restProps}\n/>\n",
      "path": "alert-dialog/alert-dialog-description.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { cn, type WithElementRef } from '$lib/utils.js';\n  import type { HTMLAttributes } from 'svelte/elements';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    children,\n    ...restProps\n  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();\n</script>\n\n<div\n  bind:this={ref}\n  data-slot=\"alert-dialog-footer\"\n  class={cn(\n    'flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end',\n    className\n  )}\n  {...restProps}\n>\n  {@render children?.()}\n</div>\n",
      "path": "alert-dialog/alert-dialog-footer.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import type { HTMLAttributes } from 'svelte/elements';\n  import { cn, type WithElementRef } from '$lib/utils.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    children,\n    ...restProps\n  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();\n</script>\n\n<div\n  bind:this={ref}\n  data-slot=\"alert-dialog-header\"\n  class={cn(\n    'grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]',\n    className\n  )}\n  {...restProps}\n>\n  {@render children?.()}\n</div>\n",
      "path": "alert-dialog/alert-dialog-header.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import type { HTMLAttributes } from 'svelte/elements';\n  import { cn, type WithElementRef } from '$lib/utils.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    children,\n    ...restProps\n  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();\n</script>\n\n<div\n  bind:this={ref}\n  data-slot=\"alert-dialog-media\"\n  class={cn(\n    'bg-muted mb-2 inline-flex size-10 items-center justify-center text-link sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*=\"size-\"])]:size-6',\n    className\n  )}\n  {...restProps}\n>\n  {@render children?.()}\n</div>\n",
      "path": "alert-dialog/alert-dialog-media.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';\n  import { cn } from '$lib/utils.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    ...restProps\n  }: AlertDialogPrimitive.OverlayProps = $props();\n</script>\n\n<AlertDialogPrimitive.Overlay\n  bind:ref\n  data-slot=\"alert-dialog-overlay\"\n  class={cn(\n    'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs',\n    className\n  )}\n  {...restProps}\n/>\n",
      "path": "alert-dialog/alert-dialog-overlay.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';\n\n  let { ...restProps }: AlertDialogPrimitive.PortalProps = $props();\n</script>\n\n<AlertDialogPrimitive.Portal {...restProps} />\n",
      "path": "alert-dialog/alert-dialog-portal.svelte",
      "_imports_": [],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';\n  import { cn } from '$lib/utils.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    ...restProps\n  }: AlertDialogPrimitive.TitleProps = $props();\n</script>\n\n<AlertDialogPrimitive.Title\n  bind:ref\n  data-slot=\"alert-dialog-title\"\n  class={cn(\n    'text-sm font-medium text-popover-foreground sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2',\n    className\n  )}\n  {...restProps}\n/>\n",
      "path": "alert-dialog/alert-dialog-title.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';\n  import { cn } from '$lib/utils.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    ...restProps\n  }: AlertDialogPrimitive.TriggerProps = $props();\n</script>\n\n<AlertDialogPrimitive.Trigger\n  bind:ref\n  data-slot=\"alert-dialog-trigger\"\n  class={cn(\n    'outline-none transition-colors focus-visible:ring-1 focus-visible:ring-ring/50',\n    className\n  )}\n  {...restProps}\n/>\n",
      "path": "alert-dialog/alert-dialog-trigger.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';\n\n  let { open = $bindable(false), ...restProps }: AlertDialogPrimitive.RootProps = $props();\n</script>\n\n<AlertDialogPrimitive.Root bind:open {...restProps} />\n",
      "path": "alert-dialog/alert-dialog.svelte",
      "_imports_": [],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "import Root from './alert-dialog.svelte';\nimport Portal from './alert-dialog-portal.svelte';\nimport Trigger from './alert-dialog-trigger.svelte';\nimport Title from './alert-dialog-title.svelte';\nimport Action from './alert-dialog-action.svelte';\nimport Cancel from './alert-dialog-cancel.svelte';\nimport Footer from './alert-dialog-footer.svelte';\nimport Header from './alert-dialog-header.svelte';\nimport Overlay from './alert-dialog-overlay.svelte';\nimport Content from './alert-dialog-content.svelte';\nimport Description from './alert-dialog-description.svelte';\nimport Media from './alert-dialog-media.svelte';\n\nexport {\n  Root,\n  Title,\n  Action,\n  Cancel,\n  Portal,\n  Footer,\n  Header,\n  Trigger,\n  Overlay,\n  Content,\n  Description,\n  Media,\n  //\n  Root as AlertDialog,\n  Title as AlertDialogTitle,\n  Action as AlertDialogAction,\n  Cancel as AlertDialogCancel,\n  Portal as AlertDialogPortal,\n  Footer as AlertDialogFooter,\n  Header as AlertDialogHeader,\n  Trigger as AlertDialogTrigger,\n  Overlay as AlertDialogOverlay,\n  Content as AlertDialogContent,\n  Description as AlertDialogDescription,\n  Media as AlertDialogMedia\n};\n",
      "path": "alert-dialog/index.ts",
      "_imports_": [
        {
          "import": "./alert-dialog.svelte",
          "item": "alert-dialog",
          "file": {
            "type": "ui",
            "path": "alert-dialog/alert-dialog.svelte"
          },
          "meta": {}
        },
        {
          "import": "./alert-dialog-portal.svelte",
          "item": "alert-dialog",
          "file": {
            "type": "ui",
            "path": "alert-dialog/alert-dialog-portal.svelte"
          },
          "meta": {}
        },
        {
          "import": "./alert-dialog-trigger.svelte",
          "item": "alert-dialog",
          "file": {
            "type": "ui",
            "path": "alert-dialog/alert-dialog-trigger.svelte"
          },
          "meta": {}
        },
        {
          "import": "./alert-dialog-title.svelte",
          "item": "alert-dialog",
          "file": {
            "type": "ui",
            "path": "alert-dialog/alert-dialog-title.svelte"
          },
          "meta": {}
        },
        {
          "import": "./alert-dialog-action.svelte",
          "item": "alert-dialog",
          "file": {
            "type": "ui",
            "path": "alert-dialog/alert-dialog-action.svelte"
          },
          "meta": {}
        },
        {
          "import": "./alert-dialog-cancel.svelte",
          "item": "alert-dialog",
          "file": {
            "type": "ui",
            "path": "alert-dialog/alert-dialog-cancel.svelte"
          },
          "meta": {}
        },
        {
          "import": "./alert-dialog-footer.svelte",
          "item": "alert-dialog",
          "file": {
            "type": "ui",
            "path": "alert-dialog/alert-dialog-footer.svelte"
          },
          "meta": {}
        },
        {
          "import": "./alert-dialog-header.svelte",
          "item": "alert-dialog",
          "file": {
            "type": "ui",
            "path": "alert-dialog/alert-dialog-header.svelte"
          },
          "meta": {}
        },
        {
          "import": "./alert-dialog-overlay.svelte",
          "item": "alert-dialog",
          "file": {
            "type": "ui",
            "path": "alert-dialog/alert-dialog-overlay.svelte"
          },
          "meta": {}
        },
        {
          "import": "./alert-dialog-content.svelte",
          "item": "alert-dialog",
          "file": {
            "type": "ui",
            "path": "alert-dialog/alert-dialog-content.svelte"
          },
          "meta": {}
        },
        {
          "import": "./alert-dialog-description.svelte",
          "item": "alert-dialog",
          "file": {
            "type": "ui",
            "path": "alert-dialog/alert-dialog-description.svelte"
          },
          "meta": {}
        },
        {
          "import": "./alert-dialog-media.svelte",
          "item": "alert-dialog",
          "file": {
            "type": "ui",
            "path": "alert-dialog/alert-dialog-media.svelte"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    }
  ],
  "registryDependencies": [
    "styles",
    "button",
    "utils"
  ],
  "dependencies": [
    {
      "ecosystem": "js",
      "name": "bits-ui",
      "version": "^2.18.1"
    }
  ],
  "devDependencies": []
}