{
  "$schema": "https://shadcn-vue.com/schema/registry.json",
  "name": "stacktrace-ui",
  "homepage": "https://github.com/stacktracelabs/ui",
  "items": [
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "utils",
      "type": "registry:lib",
      "title": "Utils",
      "description": "Utility helpers used by StackTrace UI components.",
      "dependencies": [
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "index.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",
          "type": "registry:lib"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "accordion",
      "type": "registry:ui",
      "title": "Accordion",
      "description": "Accordion components for StackTrace UI.",
      "dependencies": [
        "@lucide/vue",
        "@vueuse/core",
        "reka-ui"
      ],
      "files": [
        {
          "path": "Accordion/Accordion.vue",
          "content": "<template>\n  <AccordionRoot data-slot=\"accordion\" v-bind=\"forwarded\">\n    <slot />\n  </AccordionRoot>\n</template>\n\n<script setup lang=\"ts\">\nimport {\n  AccordionRoot,\n  type AccordionRootEmits,\n  type AccordionRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<AccordionRootProps>()\nconst emits = defineEmits<AccordionRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Accordion/AccordionContent.vue",
          "content": "<template>\n  <AccordionContent\n    data-slot=\"accordion-content\"\n    v-bind=\"delegatedProps\"\n    class=\"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm\"\n  >\n    <div :class=\"cn('pt-0 pb-4', props.class)\">\n      <slot />\n    </div>\n  </AccordionContent>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { AccordionContent, type AccordionContentProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Accordion/AccordionItem.vue",
          "content": "<template>\n  <AccordionItem\n    data-slot=\"accordion-item\"\n    v-bind=\"forwardedProps\"\n    :class=\"cn('border-b last:border-b-0', props.class)\"\n  >\n    <slot />\n  </AccordionItem>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { AccordionItem, type AccordionItemProps, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Accordion/AccordionTrigger.vue",
          "content": "<template>\n  <AccordionHeader class=\"flex\">\n    <AccordionTrigger\n      data-slot=\"accordion-trigger\"\n      v-bind=\"delegatedProps\"\n      :class=\"\n        cn(\n          'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n      <slot name=\"icon\">\n        <ChevronDown\n          class=\"text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200\"\n        />\n      </slot>\n    </AccordionTrigger>\n  </AccordionHeader>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { ChevronDown } from '@lucide/vue'\nimport {\n  AccordionHeader,\n  AccordionTrigger,\n  type AccordionTriggerProps,\n} from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Accordion/index.ts",
          "content": "export { default as Accordion } from './Accordion.vue'\nexport { default as AccordionContent } from './AccordionContent.vue'\nexport { default as AccordionItem } from './AccordionItem.vue'\nexport { default as AccordionTrigger } from './AccordionTrigger.vue'\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "alert",
      "type": "registry:ui",
      "title": "Alert",
      "description": "Alert components for StackTrace UI.",
      "dependencies": [
        "class-variance-authority"
      ],
      "files": [
        {
          "path": "Alert/Alert.vue",
          "content": "<template>\n  <div\n    data-slot=\"alert\"\n    :class=\"cn(alertVariants({ variant }), props.class)\"\n    role=\"alert\"\n  >\n    <slot />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { type AlertVariants, alertVariants } from '.'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n  variant?: AlertVariants['variant']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Alert/AlertDescription.vue",
          "content": "<template>\n  <div\n    data-slot=\"alert-description\"\n    :class=\"cn('text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Alert/AlertTitle.vue",
          "content": "<template>\n  <div\n    data-slot=\"alert-title\"\n    :class=\"cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Alert/index.ts",
          "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Alert } from './Alert.vue'\nexport { default as AlertDescription } from './AlertDescription.vue'\nexport { default as AlertTitle } from './AlertTitle.vue'\n\nexport const alertVariants = cva(\n  'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',\n  {\n    variants: {\n      variant: {\n        default: 'bg-card text-card-foreground',\n        destructive: 'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',\n        positive: 'border-green-600/50 text-green-600 dark:border-green-400/60 dark:text-green-400 [&>svg]:text-green-600',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nexport type AlertVariants = VariantProps<typeof alertVariants>\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "alert-dialog",
      "type": "registry:ui",
      "title": "Alert Dialog",
      "description": "Alert Dialog components for StackTrace UI.",
      "dependencies": [
        "@vueuse/core",
        "reka-ui"
      ],
      "registryDependencies": [
        "@stacktrace/button"
      ],
      "files": [
        {
          "path": "AlertDialog/AlertDialog.vue",
          "content": "<template>\n  <AlertDialogRoot v-if=\"control\" data-slot=\"alert-dialog\" v-bind=\"forwarded\" v-model:open=\"control.active.value\">\n    <slot />\n  </AlertDialogRoot>\n  <AlertDialogRoot v-else data-slot=\"alert-dialog\" v-bind=\"forwarded\">\n    <slot />\n  </AlertDialogRoot>\n</template>\n\n<script setup lang=\"ts\">\nimport { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'reka-ui'\nimport { type Toggle } from '@stacktrace/ui'\n\nconst props = defineProps<AlertDialogProps & {\n  control?: Toggle\n}>()\nconst emits = defineEmits<AlertDialogEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "AlertDialog/AlertDialogAction.vue",
          "content": "<template>\n  <AlertDialogAction v-bind=\"delegatedProps\" :class=\"cn(buttonVariants(), props.class)\">\n    <slot />\n  </AlertDialogAction>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { AlertDialogAction, type AlertDialogActionProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/stacktrace/ui/Button'\n\nconst props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "AlertDialog/AlertDialogCancel.vue",
          "content": "<template>\n  <AlertDialogCancel\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'mt-2 sm:mt-0',\n      props.class,\n    )\"\n  >\n    <slot />\n  </AlertDialogCancel>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/stacktrace/ui/Button'\n\nconst props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "AlertDialog/AlertDialogContent.vue",
          "content": "<template>\n  <AlertDialogPortal :to=\"to\">\n    <AlertDialogOverlay\n      data-slot=\"alert-dialog-overlay\"\n      class=\"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80\"\n    />\n    <AlertDialogContent\n      data-slot=\"alert-dialog-content\"\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </AlertDialogContent>\n  </AlertDialogPortal>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport {\n  AlertDialogContent,\n  type AlertDialogContentEmits,\n  type AlertDialogContentProps,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AlertDialogContentProps & {\n  class?: HTMLAttributes['class']\n  to?: string | HTMLElement\n}>()\nconst emits = defineEmits<AlertDialogContentEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class', 'to')\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "AlertDialog/AlertDialogDescription.vue",
          "content": "<template>\n  <AlertDialogDescription\n    data-slot=\"alert-dialog-description\"\n    v-bind=\"delegatedProps\"\n    :class=\"cn('text-muted-foreground text-sm', props.class)\"\n  >\n    <slot />\n  </AlertDialogDescription>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport {\n  AlertDialogDescription,\n  type AlertDialogDescriptionProps,\n} from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "AlertDialog/AlertDialogFooter.vue",
          "content": "<template>\n  <div\n    data-slot=\"alert-dialog-footer\"\n    :class=\"\n      cn(\n        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "AlertDialog/AlertDialogHeader.vue",
          "content": "<template>\n  <div\n    data-slot=\"alert-dialog-header\"\n    :class=\"cn('flex flex-col gap-2 text-center sm:text-left', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "AlertDialog/AlertDialogTitle.vue",
          "content": "<template>\n  <AlertDialogTitle\n    data-slot=\"alert-dialog-title\"\n    v-bind=\"delegatedProps\"\n    :class=\"cn('text-lg font-semibold', props.class)\"\n  >\n    <slot />\n  </AlertDialogTitle>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { AlertDialogTitle, type AlertDialogTitleProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "AlertDialog/AlertDialogTrigger.vue",
          "content": "<template>\n  <AlertDialogTrigger data-slot=\"alert-dialog-trigger\" v-bind=\"props\">\n    <slot />\n  </AlertDialogTrigger>\n</template>\n\n<script setup lang=\"ts\">\nimport { AlertDialogTrigger, type AlertDialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<AlertDialogTriggerProps>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "AlertDialog/index.ts",
          "content": "export { default as AlertDialog } from './AlertDialog.vue'\nexport { default as AlertDialogAction } from './AlertDialogAction.vue'\nexport { default as AlertDialogCancel } from './AlertDialogCancel.vue'\nexport { default as AlertDialogContent } from './AlertDialogContent.vue'\nexport { default as AlertDialogDescription } from './AlertDialogDescription.vue'\nexport { default as AlertDialogFooter } from './AlertDialogFooter.vue'\nexport { default as AlertDialogHeader } from './AlertDialogHeader.vue'\nexport { default as AlertDialogTitle } from './AlertDialogTitle.vue'\nexport { default as AlertDialogTrigger } from './AlertDialogTrigger.vue'\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "aspect-ratio",
      "type": "registry:ui",
      "title": "Aspect Ratio",
      "description": "Aspect Ratio components for StackTrace UI.",
      "dependencies": [
        "reka-ui"
      ],
      "files": [
        {
          "path": "AspectRatio/AspectRatio.vue",
          "content": "<script setup lang=\"ts\">\nimport { AspectRatio, type AspectRatioProps } from 'reka-ui'\n\nconst props = defineProps<AspectRatioProps>()\n</script>\n\n<template>\n  <AspectRatio\n    data-slot=\"aspect-ratio\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </AspectRatio>\n</template>\n",
          "type": "registry:ui"
        },
        {
          "path": "AspectRatio/index.ts",
          "content": "export { default as AspectRatio } from './AspectRatio.vue'\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "avatar",
      "type": "registry:ui",
      "title": "Avatar",
      "description": "Avatar components for StackTrace UI.",
      "dependencies": [
        "@vueuse/core",
        "reka-ui"
      ],
      "files": [
        {
          "path": "Avatar/Avatar.vue",
          "content": "<template>\n  <AvatarRoot\n    data-slot=\"avatar\"\n    :class=\"cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', props.class)\"\n  >\n    <slot />\n  </AvatarRoot>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { AvatarRoot } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Avatar/AvatarFallback.vue",
          "content": "<template>\n  <AvatarFallback\n    data-slot=\"avatar-fallback\"\n    v-bind=\"delegatedProps\"\n    :class=\"cn('bg-muted flex size-full items-center justify-center rounded-full', props.class)\"\n  >\n    <slot />\n  </AvatarFallback>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { AvatarFallback, type AvatarFallbackProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AvatarFallbackProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Avatar/AvatarImage.vue",
          "content": "<template>\n  <AvatarImage\n    data-slot=\"avatar-image\"\n    v-bind=\"props\"\n    class=\"aspect-square size-full\"\n  >\n    <slot />\n  </AvatarImage>\n</template>\n\n<script setup lang=\"ts\">\nimport type { AvatarImageProps } from 'reka-ui'\nimport { AvatarImage } from 'reka-ui'\n\nconst props = defineProps<AvatarImageProps>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Avatar/index.ts",
          "content": "export { default as Avatar } from './Avatar.vue'\nexport { default as AvatarFallback } from './AvatarFallback.vue'\nexport { default as AvatarImage } from './AvatarImage.vue'\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "badge",
      "type": "registry:ui",
      "title": "Badge",
      "description": "Badge components for StackTrace UI.",
      "dependencies": [
        "@vueuse/core",
        "class-variance-authority",
        "reka-ui"
      ],
      "files": [
        {
          "path": "Badge/Badge.vue",
          "content": "<template>\n  <Primitive\n    data-slot=\"badge\"\n    :class=\"cn(badgeVariants({ variant }), props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </Primitive>\n</template>\n\n<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { Primitive } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { type BadgeVariants, badgeVariants } from '.'\n\nconst props = defineProps<PrimitiveProps & {\n  variant?: BadgeVariants['variant']\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Badge/index.ts",
          "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Badge } from './Badge.vue'\n\nexport const badgeVariants = cva(\n  'inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',\n  {\n    variants: {\n      variant: {\n        default:\n          'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',\n        secondary:\n          'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',\n        destructive:\n         'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',\n        outline:\n          'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\nexport type BadgeVariants = VariantProps<typeof badgeVariants>\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "breadcrumb",
      "type": "registry:ui",
      "title": "Breadcrumb",
      "description": "Breadcrumb components for StackTrace UI.",
      "dependencies": [
        "@lucide/vue",
        "reka-ui"
      ],
      "files": [
        {
          "path": "Breadcrumb/Breadcrumb.vue",
          "content": "<template>\n  <nav\n    aria-label=\"breadcrumb\"\n    data-slot=\"breadcrumb\"\n    :class=\"props.class\"\n  >\n    <slot />\n  </nav>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Breadcrumb/BreadcrumbEllipsis.vue",
          "content": "<template>\n  <span\n    data-slot=\"breadcrumb-ellipsis\"\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    :class=\"cn('flex size-9 items-center justify-center', props.class)\"\n  >\n    <slot>\n      <MoreHorizontal class=\"size-4\" />\n    </slot>\n    <span class=\"sr-only\">More</span>\n  </span>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { MoreHorizontal } from '@lucide/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Breadcrumb/BreadcrumbItem.vue",
          "content": "<template>\n  <li\n    data-slot=\"breadcrumb-item\"\n    :class=\"cn('inline-flex items-center gap-1.5', props.class)\"\n  >\n    <slot />\n  </li>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Breadcrumb/BreadcrumbLink.vue",
          "content": "<template>\n  <Primitive\n    data-slot=\"breadcrumb-link\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn('hover:text-foreground transition-colors', props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Link } from '@inertiajs/vue3'\n\nconst props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {\n  as: Link,\n})\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Breadcrumb/BreadcrumbList.vue",
          "content": "<template>\n  <ol\n    data-slot=\"breadcrumb-list\"\n    :class=\"cn('text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5', props.class)\"\n  >\n    <slot />\n  </ol>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Breadcrumb/BreadcrumbNavigation.vue",
          "content": "<template>\n  <BreadcrumbList>\n    <template v-for=\"(item, idx) in navigation\">\n      <BreadcrumbItem>\n        <BreadcrumbLink\n          v-if=\"item.action && isLinkAction(item.action)\"\n          :href=\"item.action.url\"\n          :as=\"item.action.external ? 'a' : undefined\"\n        >\n          {{ item.title }}\n        </BreadcrumbLink>\n        <BreadcrumbPage v-else-if=\"idx === list.length - 1\">{{ item.title }}</BreadcrumbPage>\n        <template v-else>{{ item.title }}</template>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator v-if=\"idx < list.length - 1\" />\n    </template>\n  </BreadcrumbList>\n</template>\n\n<script setup lang=\"ts\">\nimport { type Menu, useNavigation, isLinkAction } from '@stacktrace/ui'\nimport { computed } from 'vue'\nimport BreadcrumbList from './BreadcrumbList.vue'\nimport BreadcrumbItem from './BreadcrumbItem.vue'\nimport BreadcrumbLink from './BreadcrumbLink.vue'\nimport BreadcrumbPage from './BreadcrumbPage.vue'\nimport BreadcrumbSeparator from './BreadcrumbSeparator.vue'\n\nconst props = defineProps<{\n  list: Menu\n}>()\n\nconst navigation = useNavigation(computed(() => props.list))\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Breadcrumb/BreadcrumbPage.vue",
          "content": "<template>\n  <span\n    data-slot=\"breadcrumb-page\"\n    role=\"link\"\n    aria-disabled=\"true\"\n    aria-current=\"page\"\n    :class=\"cn('text-foreground font-normal', props.class)\"\n  >\n    <slot />\n  </span>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Breadcrumb/BreadcrumbSeparator.vue",
          "content": "<template>\n  <li\n    data-slot=\"breadcrumb-separator\"\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    :class=\"cn('[&>svg]:size-3.5', props.class)\"\n  >\n    <slot>\n      <ChevronRight />\n    </slot>\n  </li>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { ChevronRight } from '@lucide/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Breadcrumb/index.ts",
          "content": "export { default as Breadcrumb } from './Breadcrumb.vue'\nexport { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue'\nexport { default as BreadcrumbItem } from './BreadcrumbItem.vue'\nexport { default as BreadcrumbLink } from './BreadcrumbLink.vue'\nexport { default as BreadcrumbList } from './BreadcrumbList.vue'\nexport { default as BreadcrumbNavigation } from './BreadcrumbNavigation.vue'\nexport { default as BreadcrumbPage } from './BreadcrumbPage.vue'\nexport { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue'\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "button",
      "type": "registry:ui",
      "title": "Button",
      "description": "Button components for StackTrace UI.",
      "dependencies": [
        "@lucide/vue",
        "@vueuse/core",
        "class-variance-authority",
        "reka-ui"
      ],
      "registryDependencies": [
        "@stacktrace/spinner"
      ],
      "files": [
        {
          "path": "Button/Button.vue",
          "content": "<template>\n  <Primitive\n    data-slot=\"button\"\n    :data-variant=\"variant\"\n    :data-size=\"size\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn('group/button', buttonVariants({ variant, size }), props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n\n<script setup lang=\"ts\">\nimport { Primitive } from 'reka-ui'\nimport { type ButtonProps, buttonVariants } from './'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<ButtonProps>(), {\n  as: 'button',\n})\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Button/ButtonLink.vue",
          "content": "<template>\n  <Link\n    data-slot=\"button-link\"\n    :data-variant=\"variant\"\n    :data-size=\"size\"\n    v-bind=\"delegatedProps\"\n    :class=\"cn('group/button', buttonVariants({ variant, size }), props.class)\"\n  >\n    <slot />\n  </Link>\n</template>\n\n<script setup lang=\"ts\">\nimport { Link } from '@inertiajs/vue3'\nimport { reactiveOmit } from '@vueuse/core'\nimport { cn } from '@/lib/utils'\nimport { type ButtonLinkProps, buttonVariants } from '.'\n\nconst props = defineProps<ButtonLinkProps>()\n\nconst delegatedProps = reactiveOmit(props, 'class', 'variant', 'size')\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Button/ButtonState.vue",
          "content": "<template>\n  <span\n    data-slot=\"button-state\"\n    :class=\"cn('relative inline-grid place-items-center', props.class)\"\n    aria-live=\"polite\"\n  >\n    <span\n      :class=\"cn(\n        'col-start-1 row-start-1 inline-flex items-center justify-center gap-2',\n        (processing || recentlySuccessful) && 'invisible',\n        'group-data-[loading]/button:invisible',\n      )\"\n    >\n      <slot />\n    </span>\n\n    <span\n      :class=\"cn(\n        'absolute inset-0 hidden items-center justify-center',\n        processing && 'flex',\n        'group-data-[loading]/button:flex',\n      )\"\n    >\n      <Spinner aria-hidden=\"true\" />\n      <span class=\"sr-only\" role=\"status\">{{ processingLabel }}</span>\n    </span>\n\n    <span\n      v-if=\"recentlySuccessful && !processing\"\n      class=\"absolute inset-0 flex items-center justify-center gap-2 group-data-[loading]/button:hidden\"\n    >\n      <CheckIcon data-icon=\"inline-start\" />\n      <slot name=\"success\">{{ recentlySuccessfulLabel }}</slot>\n    </span>\n  </span>\n</template>\n\n<script setup lang=\"ts\">\nimport { CheckIcon } from '@lucide/vue'\nimport { Spinner } from '@/registry/stacktrace/ui/Spinner'\nimport { cn } from '@/lib/utils'\nimport type { ButtonStateProps } from '.'\n\nconst props = withDefaults(defineProps<ButtonStateProps>(), {\n  processing: false,\n  recentlySuccessful: false,\n  processingLabel: 'Processing',\n  recentlySuccessfulLabel: 'Saved',\n})\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Button/index.ts",
          "content": "import { cva, type VariantProps } from 'class-variance-authority'\nimport type { InertiaLinkProps } from '@inertiajs/vue3'\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\n\nexport { default as Button } from './Button.vue'\nexport { default as ButtonLink } from './ButtonLink.vue'\nexport { default as ButtonState } from './ButtonState.vue'\n\nexport interface ButtonProps extends PrimitiveProps {\n  variant?: NonNullable<Parameters<typeof buttonVariants>[0]>['variant']\n  size?: NonNullable<Parameters<typeof buttonVariants>[0]>['size']\n  class?: HTMLAttributes['class']\n}\n\nexport type ButtonLinkProps = InertiaLinkProps & {\n  variant?: ButtonVariants['variant']\n  size?: ButtonVariants['size']\n  class?: HTMLAttributes['class']\n}\n\nexport interface ButtonStateProps {\n  processing?: boolean\n  recentlySuccessful?: boolean\n  processingLabel?: string\n  recentlySuccessfulLabel?: string\n  class?: HTMLAttributes['class']\n}\n\nexport const buttonVariants = cva(\n  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*=\\'size-\\'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary text-primary-foreground hover:bg-primary/90',\n        destructive: 'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',\n        outline: 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',\n        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n        ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'h-9 px-4 py-2 has-[>svg]:px-3',\n        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',\n        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',\n        icon: 'size-9',\n        'icon-sm': 'size-8',\n        'icon-lg': 'size-10',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ButtonVariants = VariantProps<typeof buttonVariants>\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "button-group",
      "type": "registry:ui",
      "title": "Button Group",
      "description": "Button Group components for StackTrace UI.",
      "dependencies": [
        "@vueuse/core",
        "class-variance-authority",
        "reka-ui"
      ],
      "registryDependencies": [
        "@stacktrace/separator"
      ],
      "files": [
        {
          "path": "ButtonGroup/ButtonGroup.vue",
          "content": "<template>\n  <div\n    role=\"group\"\n    data-slot=\"button-group\"\n    :data-orientation=\"props.orientation\"\n    :class=\"cn(buttonGroupVariants({ orientation: props.orientation }), props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport type { ButtonGroupVariants } from '.'\nimport { cn } from '@/lib/utils'\nimport { buttonGroupVariants } from '.'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n  orientation?: ButtonGroupVariants['orientation']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "ButtonGroup/ButtonGroupSeparator.vue",
          "content": "<template>\n  <Separator\n    data-slot=\"button-group-separator\"\n    v-bind=\"delegatedProps\"\n    :orientation=\"props.orientation\"\n    :class=\"cn(\n      'bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto',\n      props.class,\n    )\"\n  />\n</template>\n\n<script lang=\"ts\" setup>\nimport type { SeparatorProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { cn } from '@/lib/utils'\nimport { Separator } from '@/registry/stacktrace/ui/Separator'\n\nconst props = withDefaults(defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>(), {\n  orientation: 'vertical',\n})\nconst delegatedProps = reactiveOmit(props, 'class')\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "ButtonGroup/ButtonGroupText.vue",
          "content": "<template>\n  <Primitive\n    role=\"group\"\n    :data-orientation=\"props.orientation\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn('bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*=\\'size-\\'])]:size-4', props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport type { ButtonGroupVariants } from '.'\nimport { Primitive } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\ninterface Props extends PrimitiveProps {\n  class?: HTMLAttributes['class']\n  orientation?: ButtonGroupVariants['orientation']\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  as: 'div',\n})\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "ButtonGroup/index.ts",
          "content": "import type { VariantProps } from 'class-variance-authority'\nimport { cva } from 'class-variance-authority'\n\nexport { default as ButtonGroup } from './ButtonGroup.vue'\nexport { default as ButtonGroupSeparator } from './ButtonGroupSeparator.vue'\nexport { default as ButtonGroupText } from './ButtonGroupText.vue'\n\nexport const buttonGroupVariants = cva(\n  \"flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          '[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none',\n        vertical:\n          'flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none',\n      },\n    },\n    defaultVariants: {\n      orientation: 'horizontal',\n    },\n  },\n)\n\nexport type ButtonGroupVariants = VariantProps<typeof buttonGroupVariants>\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "calendar",
      "type": "registry:ui",
      "title": "Calendar",
      "description": "Calendar components for StackTrace UI.",
      "dependencies": [
        "@lucide/vue",
        "@vueuse/core",
        "reka-ui"
      ],
      "registryDependencies": [
        "@stacktrace/button"
      ],
      "files": [
        {
          "path": "Calendar/Calendar.vue",
          "content": "<template>\n  <CalendarRoot\n    v-slot=\"{ grid, weekDays }\"\n    data-slot=\"calendar\"\n    :class=\"cn('p-3', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <CalendarHeader>\n      <CalendarHeading />\n\n      <div class=\"flex items-center gap-1\">\n        <CalendarPrevButton />\n        <CalendarNextButton />\n      </div>\n    </CalendarHeader>\n\n    <div class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <CalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <CalendarGridHead>\n          <CalendarGridRow>\n            <CalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </CalendarHeadCell>\n          </CalendarGridRow>\n        </CalendarGridHead>\n        <CalendarGridBody>\n          <CalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <CalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <CalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </CalendarCell>\n          </CalendarGridRow>\n        </CalendarGridBody>\n      </CalendarGrid>\n    </div>\n  </CalendarRoot>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.'\n\nconst props = defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<CalendarRootEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Calendar/CalendarCell.vue",
          "content": "<template>\n  <CalendarCell\n    data-slot=\"calendar-cell\"\n    :class=\"cn('relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCell>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { CalendarCell, type CalendarCellProps, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<CalendarCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Calendar/CalendarCellTrigger.vue",
          "content": "<template>\n  <CalendarCellTrigger\n    data-slot=\"calendar-cell-trigger\"\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'size-8 p-0 font-normal aria-selected:opacity-100 cursor-default',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selected\n      'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCellTrigger>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/stacktrace/ui/Button'\n\nconst props = withDefaults(defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>(), {\n  as: 'button',\n})\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Calendar/CalendarGrid.vue",
          "content": "<template>\n  <CalendarGrid\n    data-slot=\"calendar-grid\"\n    :class=\"cn('w-full border-collapse space-x-1', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarGrid>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { CalendarGrid, type CalendarGridProps, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<CalendarGridProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Calendar/CalendarGridBody.vue",
          "content": "<template>\n  <CalendarGridBody\n    data-slot=\"calendar-grid-body\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </CalendarGridBody>\n</template>\n\n<script lang=\"ts\" setup>\nimport { CalendarGridBody, type CalendarGridBodyProps } from 'reka-ui'\n\nconst props = defineProps<CalendarGridBodyProps>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Calendar/CalendarGridHead.vue",
          "content": "<template>\n  <CalendarGridHead\n    data-slot=\"calendar-grid-head\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </CalendarGridHead>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { CalendarGridHead, type CalendarGridHeadProps } from 'reka-ui'\n\nconst props = defineProps<CalendarGridHeadProps & { class?: HTMLAttributes['class'] }>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Calendar/CalendarGridRow.vue",
          "content": "<template>\n  <CalendarGridRow\n    data-slot=\"calendar-grid-row\"\n    :class=\"cn('flex', props.class)\" v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarGridRow>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { CalendarGridRow, type CalendarGridRowProps, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Calendar/CalendarHeadCell.vue",
          "content": "<template>\n  <CalendarHeadCell\n    data-slot=\"calendar-head-cell\"\n    :class=\"cn('text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarHeadCell>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { CalendarHeadCell, type CalendarHeadCellProps, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Calendar/CalendarHeader.vue",
          "content": "<template>\n  <CalendarHeader\n    data-slot=\"calendar-header\"\n    :class=\"cn('flex justify-center pt-1 relative items-center w-full', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarHeader>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { CalendarHeader, type CalendarHeaderProps, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<CalendarHeaderProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Calendar/CalendarHeading.vue",
          "content": "<template>\n  <CalendarHeading\n    v-slot=\"{ headingValue }\"\n    data-slot=\"calendar-heading\"\n    :class=\"cn('text-sm font-medium', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot :heading-value>\n      {{ headingValue }}\n    </slot>\n  </CalendarHeading>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { CalendarHeading, type CalendarHeadingProps, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes['class'] }>()\n\ndefineSlots<{\n  default: (props: { headingValue: string }) => any\n}>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Calendar/CalendarNextButton.vue",
          "content": "<template>\n  <CalendarNext\n    data-slot=\"calendar-next-button\"\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'absolute right-1',\n      'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRight class=\"size-4\" />\n    </slot>\n  </CalendarNext>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { ChevronRight } from '@lucide/vue'\nimport { CalendarNext, type CalendarNextProps, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/stacktrace/ui/Button'\n\nconst props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Calendar/CalendarPrevButton.vue",
          "content": "<template>\n  <CalendarPrev\n    data-slot=\"calendar-prev-button\"\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'absolute left-1',\n      'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeft class=\"size-4\" />\n    </slot>\n  </CalendarPrev>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { ChevronLeft } from '@lucide/vue'\nimport { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/stacktrace/ui/Button'\n\nconst props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Calendar/index.ts",
          "content": "export { default as Calendar } from './Calendar.vue'\nexport { default as CalendarCell } from './CalendarCell.vue'\nexport { default as CalendarCellTrigger } from './CalendarCellTrigger.vue'\nexport { default as CalendarGrid } from './CalendarGrid.vue'\nexport { default as CalendarGridBody } from './CalendarGridBody.vue'\nexport { default as CalendarGridHead } from './CalendarGridHead.vue'\nexport { default as CalendarGridRow } from './CalendarGridRow.vue'\nexport { default as CalendarHeadCell } from './CalendarHeadCell.vue'\nexport { default as CalendarHeader } from './CalendarHeader.vue'\nexport { default as CalendarHeading } from './CalendarHeading.vue'\nexport { default as CalendarNextButton } from './CalendarNextButton.vue'\nexport { default as CalendarPrevButton } from './CalendarPrevButton.vue'\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "card",
      "type": "registry:ui",
      "title": "Card",
      "description": "Card components for StackTrace UI.",
      "files": [
        {
          "path": "Card/Card.vue",
          "content": "<template>\n  <div\n    data-slot=\"card\"\n    :class=\"\n      cn(\n        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Card/CardAction.vue",
          "content": "<template>\n  <div\n    data-slot=\"card-action\"\n    :class=\"cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Card/CardContent.vue",
          "content": "<template>\n  <div\n    data-slot=\"card-content\"\n    :class=\"cn('px-6', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Card/CardDescription.vue",
          "content": "<template>\n  <p\n    data-slot=\"card-description\"\n    :class=\"cn('text-muted-foreground text-sm', props.class)\"\n  >\n    <slot />\n  </p>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Card/CardFooter.vue",
          "content": "<template>\n  <div\n    data-slot=\"card-footer\"\n    :class=\"cn('flex items-center px-6 [.border-t]:pt-6', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Card/CardHeader.vue",
          "content": "<template>\n  <div\n    data-slot=\"card-header\"\n    :class=\"cn('grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Card/CardTitle.vue",
          "content": "<template>\n  <h3\n    data-slot=\"card-title\"\n    :class=\"cn('leading-none font-semibold', props.class)\"\n  >\n    <slot />\n  </h3>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Card/index.ts",
          "content": "export { default as Card } from './Card.vue'\nexport { default as CardAction } from './CardAction.vue'\nexport { default as CardContent } from './CardContent.vue'\nexport { default as CardDescription } from './CardDescription.vue'\nexport { default as CardFooter } from './CardFooter.vue'\nexport { default as CardHeader } from './CardHeader.vue'\nexport { default as CardTitle } from './CardTitle.vue'\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "carousel",
      "type": "registry:ui",
      "title": "Carousel",
      "description": "Carousel components for StackTrace UI.",
      "dependencies": [
        "@lucide/vue",
        "@vueuse/core",
        "embla-carousel-vue"
      ],
      "registryDependencies": [
        "@stacktrace/button"
      ],
      "files": [
        {
          "path": "Carousel/Carousel.vue",
          "content": "<template>\n  <div\n    data-slot=\"carousel\"\n    :class=\"cn('relative', props.class)\"\n    role=\"region\"\n    aria-roledescription=\"carousel\"\n    tabindex=\"0\"\n    @keydown=\"onKeyDown\"\n  >\n    <slot :can-scroll-next :can-scroll-prev :carousel-api :carousel-ref :orientation :scroll-next :scroll-prev />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { useProvideCarousel } from './useCarousel'\n\nconst props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {\n  orientation: 'horizontal',\n})\n\nconst emits = defineEmits<CarouselEmits>()\n\nconst { canScrollNext, canScrollPrev, carouselApi, carouselRef, orientation, scrollNext, scrollPrev } = useProvideCarousel(props, emits)\n\ndefineExpose({\n  canScrollNext,\n  canScrollPrev,\n  carouselApi,\n  carouselRef,\n  orientation,\n  scrollNext,\n  scrollPrev,\n})\n\nfunction onKeyDown(event: KeyboardEvent) {\n  const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'\n  const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'\n\n  if (event.key === prevKey) {\n    event.preventDefault()\n    scrollPrev()\n\n    return\n  }\n\n  if (event.key === nextKey) {\n    event.preventDefault()\n    scrollNext()\n  }\n}\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Carousel/CarouselContent.vue",
          "content": "<template>\n  <div\n    ref=\"carouselRef\"\n    data-slot=\"carousel-content\"\n    class=\"overflow-hidden\"\n  >\n    <div\n      :class=\"\n        cn(\n          'flex',\n          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',\n          props.class,\n        )\"\n      v-bind=\"$attrs\"\n    >\n      <slot />\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { useCarousel } from './useCarousel'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { carouselRef, orientation } = useCarousel()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Carousel/CarouselItem.vue",
          "content": "<template>\n  <div\n    data-slot=\"carousel-item\"\n    role=\"group\"\n    aria-roledescription=\"slide\"\n    :class=\"cn(\n      'min-w-0 shrink-0 grow-0 basis-full',\n      orientation === 'horizontal' ? 'pl-4' : 'pt-4',\n      props.class,\n    )\"\n  >\n    <slot />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation } = useCarousel()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Carousel/CarouselNext.vue",
          "content": "<template>\n  <Button\n    data-slot=\"carousel-next\"\n    :disabled=\"!canScrollNext\"\n    :class=\"cn(\n      'absolute size-8 rounded-full',\n      orientation === 'horizontal'\n        ? 'top-1/2 -right-12 -translate-y-1/2'\n        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    :variant=\"variant\"\n    :size=\"size\"\n    @click=\"scrollNext\"\n  >\n    <slot>\n      <ArrowRight />\n      <span class=\"sr-only\">Next Slide</span>\n    </slot>\n  </Button>\n</template>\n\n<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { ArrowRight } from '@lucide/vue'\nimport { cn } from '@/lib/utils'\nimport { Button, type ButtonVariants } from '@/registry/stacktrace/ui/Button'\nimport { useCarousel } from './useCarousel'\n\nconst props = withDefaults(defineProps<{\n    variant?: ButtonVariants['variant']\n    size?: ButtonVariants['size']\n  }\n  & WithClassAsProps>(), {\n  variant: 'outline',\n  size: 'icon',\n})\n\nconst { orientation, canScrollNext, scrollNext } = useCarousel()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Carousel/CarouselPrevious.vue",
          "content": "<template>\n  <Button\n    data-slot=\"carousel-previous\"\n    :disabled=\"!canScrollPrev\"\n    :class=\"cn(\n      'absolute size-8 rounded-full',\n      orientation === 'horizontal'\n        ? 'top-1/2 -left-12 -translate-y-1/2'\n        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    :variant=\"variant\"\n    :size=\"size\"\n    @click=\"scrollPrev\"\n  >\n    <slot>\n      <ArrowLeft />\n      <span class=\"sr-only\">Previous Slide</span>\n    </slot>\n  </Button>\n</template>\n\n<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { ArrowLeft } from '@lucide/vue'\nimport { cn } from '@/lib/utils'\nimport { Button, type ButtonVariants } from '@/registry/stacktrace/ui/Button'\nimport { useCarousel } from './useCarousel'\n\nconst props = withDefaults(defineProps<{\n    variant?: ButtonVariants['variant']\n    size?: ButtonVariants['size']\n  }\n  & WithClassAsProps>(), {\n  variant: 'outline',\n  size: 'icon',\n})\n\nconst { orientation, canScrollPrev, scrollPrev } = useCarousel()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Carousel/index.ts",
          "content": "export { default as Carousel } from './Carousel.vue'\nexport { default as CarouselContent } from './CarouselContent.vue'\nexport { default as CarouselItem } from './CarouselItem.vue'\nexport { default as CarouselNext } from './CarouselNext.vue'\nexport { default as CarouselPrevious } from './CarouselPrevious.vue'\nexport type {\n  UnwrapRefCarouselApi as CarouselApi,\n} from './interface'\n\nexport { useCarousel } from './useCarousel'\n",
          "type": "registry:ui"
        },
        {
          "path": "Carousel/interface.ts",
          "content": "import type useEmblaCarousel from 'embla-carousel-vue'\nimport type {\n  EmblaCarouselVueType,\n} from 'embla-carousel-vue'\nimport type { HTMLAttributes, UnwrapRef } from 'vue'\n\ntype CarouselApi = EmblaCarouselVueType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\nexport type UnwrapRefCarouselApi = UnwrapRef<CarouselApi>\n\nexport interface CarouselProps {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: 'horizontal' | 'vertical'\n}\n\nexport interface CarouselEmits {\n  (e: 'init-api', payload: UnwrapRefCarouselApi): void\n}\n\nexport interface WithClassAsProps {\n  class?: HTMLAttributes['class']\n}\n",
          "type": "registry:ui"
        },
        {
          "path": "Carousel/useCarousel.ts",
          "content": "import type { UnwrapRefCarouselApi as CarouselApi, CarouselEmits, CarouselProps } from './interface'\nimport { createInjectionState } from '@vueuse/core'\nimport emblaCarouselVue from 'embla-carousel-vue'\nimport { onMounted, ref } from 'vue'\n\nconst [useProvideCarousel, useInjectCarousel] = createInjectionState(\n  ({\n    opts,\n    orientation,\n    plugins,\n  }: CarouselProps, emits: CarouselEmits) => {\n    const [emblaNode, emblaApi] = emblaCarouselVue({\n      ...opts,\n      axis: orientation === 'horizontal' ? 'x' : 'y',\n    }, plugins)\n\n    function scrollPrev() {\n      emblaApi.value?.scrollPrev()\n    }\n    function scrollNext() {\n      emblaApi.value?.scrollNext()\n    }\n\n    const canScrollNext = ref(false)\n    const canScrollPrev = ref(false)\n\n    function onSelect(api: CarouselApi) {\n      canScrollNext.value = api?.canScrollNext() || false\n      canScrollPrev.value = api?.canScrollPrev() || false\n    }\n\n    onMounted(() => {\n      if (!emblaApi.value)\n        return\n\n      emblaApi.value?.on('init', onSelect)\n      emblaApi.value?.on('reInit', onSelect)\n      emblaApi.value?.on('select', onSelect)\n\n      emits('init-api', emblaApi.value)\n    })\n\n    return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, orientation }\n  },\n)\n\nfunction useCarousel() {\n  const carouselState = useInjectCarousel()\n\n  if (!carouselState)\n    throw new Error('useCarousel must be used within a <Carousel />')\n\n  return carouselState\n}\n\nexport { useCarousel, useProvideCarousel }\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "chart",
      "type": "registry:ui",
      "title": "Chart",
      "description": "Chart components for StackTrace UI.",
      "dependencies": [
        "@unovis/vue",
        "@vueuse/core",
        "reka-ui"
      ],
      "files": [
        {
          "path": "Chart/ChartContainer.vue",
          "content": "<template>\n  <div\n    data-slot=\"chart\"\n    :data-chart=\"chartId\"\n    :class=\"cn(\n      `[&_.tick_text]:!fill-muted-foreground [&_.tick_line]:!stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex flex-col aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden [&_[data-vis-xy-container]]:h-full [&_[data-vis-single-container]]:h-full h-full [&_[data-vis-xy-container]]:w-full [&_[data-vis-single-container]]:w-full w-full `,\n      props.class,\n    )\"\n    :style=\"{\n      '--vis-tooltip-padding': '0px',\n      '--vis-tooltip-background-color': 'transparent',\n      '--vis-tooltip-border-color': 'transparent',\n      '--vis-tooltip-text-color': 'none',\n      '--vis-tooltip-shadow-color': 'none',\n      '--vis-tooltip-backdrop-filter': 'none',\n      '--vis-crosshair-circle-stroke-color': '#0000',\n      '--vis-crosshair-line-stroke-width': cursor ? '1px' : '0px',\n      '--vis-font-family': 'var(--font-sans)',\n    }\"\n  >\n    <slot :id=\"uniqueId\" :config=\"config\" />\n    <ChartStyle :id=\"chartId\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport type { ChartConfig } from '.'\nimport { useId } from 'reka-ui'\nimport { computed, toRefs } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { provideChartContext } from '.'\nimport ChartStyle from './ChartStyle.vue'\n</script>\n\n<script lang=\"ts\" setup>\nconst props = defineProps<{\n  id?: HTMLAttributes['id']\n  class?: HTMLAttributes['class']\n  config: ChartConfig\n  cursor?: boolean\n}>()\n\ndefineSlots<{\n  default: {\n    id: string\n    config: ChartConfig\n  }\n}>()\n\nconst { config } = toRefs(props)\nconst uniqueId = useId()\nconst chartId = computed(() => `chart-${props.id || uniqueId.replace(/:/g, '')}`)\n\nprovideChartContext({\n  id: uniqueId,\n  config,\n})\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Chart/ChartLegendContent.vue",
          "content": "<template>\n  <div\n    v-if=\"containerSelector\"\n    :class=\"cn(\n      'flex items-center justify-center gap-4',\n      verticalAlign === 'top' ? 'pb-3' : 'pt-3',\n      props.class,\n    )\"\n  >\n    <div\n      v-for=\"{ key, itemConfig } in payload\"\n      :key=\"key\"\n      :class=\"cn(\n        '[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3',\n      )\"\n    >\n      <component :is=\"itemConfig.icon\" v-if=\"itemConfig.icon\" />\n      <div\n        v-else\n        class=\"h-2 w-2 shrink-0 rounded-xs\"\n        :style=\"{\n          backgroundColor: itemConfig?.color,\n        }\"\n      />\n\n      {{ itemConfig.label }}\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { computed, onMounted, ref } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useChart } from '.'\n\nconst props = withDefaults(defineProps<{\n  hideIcon?: boolean\n  nameKey?: string\n  verticalAlign?: 'bottom' | 'top'\n  // payload?: any[]\n  class?: HTMLAttributes['class']\n}>(), {\n  verticalAlign: 'bottom',\n})\n\nconst { id, config } = useChart()\n\nconst payload = computed(() => Object.entries(config.value).map(([key, value]) => {\n  return {\n    key: props.nameKey || key,\n    itemConfig: value,\n  }\n}))\n\nconst containerSelector = ref('')\nonMounted(() => {\n  containerSelector.value = `[data-chart='chart-${id}']>[data-vis-xy-container]`\n})\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Chart/ChartStyle.vue",
          "content": "<template>\n  <Primitive\n    v-if=\"colorConfig.length\"\n    as=\"style\"\n  >\n    {{ Object.entries(THEMES)\n      .map(\n        ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color\n      = itemConfig.theme?.[theme as keyof typeof itemConfig.theme]\n      || itemConfig.color\n    return color ? `  --color-${key}: ${color};` : null\n  })\n        .join(\"\\n\")}\n}\n`,\n      )\n      .join(\"\\n\") }}\n  </Primitive>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { Primitive } from 'reka-ui'\nimport { computed } from 'vue'\nimport { THEMES, useChart } from '.'\n\ndefineProps<{\n  id?: HTMLAttributes['id']\n}>()\n\nconst { config } = useChart()\n\nconst colorConfig = computed(() => {\n  return Object.entries(config.value).filter(\n    ([, config]) => config.theme || config.color,\n  )\n})\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Chart/ChartTooltipContent.vue",
          "content": "<template>\n  <div\n    :class=\"cn(\n      'border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl',\n      props.class,\n    )\"\n  >\n    <slot>\n      <div v-if=\"!nestLabel && tooltipLabel\" class=\"font-medium\">\n        {{ tooltipLabel }}\n      </div>\n      <div class=\"grid gap-1.5\">\n        <div\n          v-for=\"{ value, itemConfig, indicatorColor, key } in payload\"\n          :key=\"key\"\n          :class=\"\n            cn('[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5',\n               indicator === 'dot' && 'items-center')\"\n        >\n          <component :is=\"itemConfig.icon\" v-if=\"itemConfig?.icon\" />\n          <template v-else-if=\"!hideIndicator\">\n            <div\n              :class=\"cn(\n                'shrink-0 rounded-xs border-(--color-border) bg-(--color-bg)',\n                {\n                  'h-2.5 w-2.5': indicator === 'dot',\n                  'w-1': indicator === 'line',\n                  'w-0 border-[1.5px] border-dashed bg-transparent':\n                    indicator === 'dashed',\n                  'my-0.5': nestLabel && indicator === 'dashed',\n                },\n              )\"\n              :style=\"{\n                '--color-bg': indicatorColor,\n                '--color-border': indicatorColor,\n              }\"\n            />\n          </template>\n\n          <div :class=\"cn('flex flex-1 justify-between leading-none', nestLabel ? 'items-end' : 'items-center')\">\n            <div class=\"grid gap-1.5\">\n              <div v-if=\"nestLabel\" class=\"font-medium\">\n                {{ tooltipLabel }}\n              </div>\n              <span class=\"text-muted-foreground\">\n                {{ itemConfig?.label || value }}\n              </span>\n            </div>\n            <span v-if=\"value\" class=\"text-foreground font-mono font-medium tabular-nums\">\n              {{ value.toLocaleString() }}\n            </span>\n          </div>\n        </div>\n      </div>\n    </slot>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport type { ChartConfig } from '.'\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<{\n  hideLabel?: boolean\n  hideIndicator?: boolean\n  indicator?: 'line' | 'dot' | 'dashed'\n  nameKey?: string\n  labelKey?: string\n  labelFormatter?: (d: number | Date) => string\n  payload?: Record<string, any>\n  config?: ChartConfig\n  class?: HTMLAttributes['class']\n  color?: string\n  x?: number | Date\n}>(), {\n  payload: () => ({}),\n  config: () => ({}),\n  indicator: 'dot',\n})\n\n// TODO: currently we use `createElement` and `render` to render the\n// const chartContext = useChart(null)\n\nconst payload = computed(() => {\n  return Object.entries(props.payload).map(([key, value]) => {\n    // const key = `${props.nameKey || item.name || item.dataKey || 'value'}`\n    const itemConfig = props.config[key]\n    const indicatorColor = props.config[key]?.color ?? props.payload.fill\n\n    return { key, value, itemConfig, indicatorColor }\n  }).filter(i => i.itemConfig)\n})\n\nconst nestLabel = computed(() => Object.keys(props.payload).length === 1 && props.indicator !== 'dot')\nconst tooltipLabel = computed(() => {\n  if (props.hideLabel)\n    return null\n  if (props.labelFormatter && props.x !== undefined) {\n    return props.labelFormatter(props.x)\n  }\n  return props.labelKey ? props.config[props.labelKey]?.label || props.payload[props.labelKey] : props.x\n})\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Chart/index.ts",
          "content": "import type { Component, Ref } from 'vue'\nimport { createContext } from 'reka-ui'\n\nexport { default as ChartContainer } from './ChartContainer.vue'\nexport { default as ChartLegendContent } from './ChartLegendContent.vue'\nexport { default as ChartTooltipContent } from './ChartTooltipContent.vue'\nexport { componentToString } from './utils'\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nexport const THEMES = { light: '', dark: '.dark' } as const\n\nexport type ChartConfig = {\n  [k in string]: {\n    label?: string | Component\n    icon?: string | Component\n  } & (\n    | { color?: string, theme?: never }\n    | { color?: never, theme: Record<keyof typeof THEMES, string> }\n  )\n}\n\ninterface ChartContextProps {\n  id: string\n  config: Ref<ChartConfig>\n}\n\nexport const [useChart, provideChartContext] = createContext<ChartContextProps>('Chart')\n\nexport { VisCrosshair as ChartCrosshair, VisTooltip as ChartTooltip } from '@unovis/vue'\n",
          "type": "registry:ui"
        },
        {
          "path": "Chart/utils.ts",
          "content": "import type { ChartConfig } from '.'\nimport { isClient } from '@vueuse/core'\nimport { useId } from 'reka-ui'\nimport { h, render } from 'vue'\n\n// Simple cache using a Map to store serialized object keys\nconst cache = new Map<string, string>()\n\n// Convert object to a consistent string key\nfunction serializeKey(key: Record<string, any>): string {\n  return JSON.stringify(key, Object.keys(key).sort())\n}\n\ninterface Constructor<P = any> {\n  __isFragment?: never\n  __isTeleport?: never\n  __isSuspense?: never\n  new (...args: any[]): {\n    $props: P\n  }\n}\n\nexport function componentToString<P>(config: ChartConfig, component: Constructor<P>, props?: P) {\n  if (!isClient)\n    return\n\n  // This function will be called once during mount lifecycle\n  const id = useId()\n\n  // https://unovis.dev/docs/auxiliary/Crosshair#component-props\n  return (_data: any, x: number | Date) => {\n    const data = 'data' in _data ? _data.data : _data\n    const serializedKey = `${id}-${serializeKey(data)}`\n    const cachedContent = cache.get(serializedKey)\n    if (cachedContent)\n      return cachedContent\n\n    const vnode = h<unknown>(component, { ...props, payload: data, config, x })\n    const div = document.createElement('div')\n    render(vnode, div)\n    cache.set(serializedKey, div.innerHTML)\n    return div.innerHTML\n  }\n}\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "checkbox",
      "type": "registry:ui",
      "title": "Checkbox",
      "description": "Checkbox components for StackTrace UI.",
      "dependencies": [
        "@vueuse/core",
        "reka-ui"
      ],
      "registryDependencies": [
        "@stacktrace/label"
      ],
      "files": [
        {
          "path": "Checkbox/Checkbox.vue",
          "content": "<template>\n  <input\n    ref=\"inputEl\"\n    type=\"checkbox\"\n    v-model=\"checked\"\n    :value=\"value\"\n    :class=\"cn('w-4 h-4 text-primary bg-background indeterminate:bg-primary dark:indeterminate:bg-background checked:bg-primary dark:checked:bg-background border rounded border-muted-foreground/40 appearance-none p-0 inline-flex align-middle flex-shrink-0 cursor-pointer focus-visible:outline-none focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-1 disabled:bg-muted disabled:opacity-50 disabled:cursor-auto')\"\n  >\n</template>\n\n<script setup lang=\"ts\">\nimport { useVModel } from \"@vueuse/core\";\nimport { cn } from \"@/lib/utils\";\nimport { onMounted, ref, watch } from \"vue\";\n\nconst emit = defineEmits(['update:modelValue'])\n\nconst props = defineProps<{\n  modelValue?: any\n  value?: any\n  indeterminate?: boolean\n}>()\n\nconst checked = useVModel(props, 'modelValue', emit)\n\nconst inputEl = ref<HTMLInputElement>()\n\nconst setIndeterminate = (value: boolean) => {\n  if (inputEl.value) {\n    inputEl.value.indeterminate = value\n  }\n}\n\nonMounted(() => {\n  setIndeterminate(props.indeterminate)\n})\n\nwatch(() => props.indeterminate, () => {\n  setIndeterminate(props.indeterminate)\n})\n</script>\n<style scoped>\ninput[type=\"checkbox\"] {\n  print-color-adjust: exact;\n  user-select: none;\n}\n\ninput[type=\"checkbox\"]:checked {\n  background-size: 100% 100%;\n  background-position: center;\n  background-repeat: no-repeat;\n  background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E\");\n}\n\ninput[type=\"checkbox\"]:indeterminate {\n  background-size: 100% 100%;\n  background-position: center;\n  background-repeat: no-repeat;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3E%3C/svg%3E\");\n}\n</style>\n",
          "type": "registry:ui"
        },
        {
          "path": "Checkbox/CheckboxControl.vue",
          "content": "<template>\n  <div :class=\"cn('flex items-center space-x-2', $attrs.class || '')\">\n    <Checkbox v-model=\"checked\" :value=\"value\" :indeterminate=\"indeterminate\" :id=\"id\" />\n    <Label :for=\"id\">\n      <slot />\n    </Label>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { useVModel } from \"@vueuse/core\";\nimport { cn } from \"@/lib/utils\";\nimport { Label } from \"@/registry/stacktrace/ui/Label\";\nimport { Checkbox } from \".\";\nimport { useId } from \"reka-ui\";\n\nconst emit = defineEmits(['update:modelValue'])\n\nconst props = defineProps<{\n  modelValue?: any\n  value?: any\n  indeterminate?: boolean\n}>()\n\nconst checked = useVModel(props, 'modelValue', emit)\n\nconst id = useId()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Checkbox/index.ts",
          "content": "export { default as Checkbox } from './Checkbox.vue'\nexport { default as CheckboxControl } from './CheckboxControl.vue'\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "collapsible",
      "type": "registry:ui",
      "title": "Collapsible",
      "description": "Collapsible components for StackTrace UI.",
      "dependencies": [
        "reka-ui"
      ],
      "files": [
        {
          "path": "Collapsible/Collapsible.vue",
          "content": "<template>\n  <CollapsibleRoot\n    v-slot=\"{ open }\"\n    data-slot=\"collapsible\"\n    v-bind=\"forwarded\"\n  >\n    <slot :open=\"open\" />\n  </CollapsibleRoot>\n</template>\n\n<script setup lang=\"ts\">\nimport type { CollapsibleRootEmits, CollapsibleRootProps } from 'reka-ui'\nimport { CollapsibleRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<CollapsibleRootProps>()\nconst emits = defineEmits<CollapsibleRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Collapsible/CollapsibleContent.vue",
          "content": "<template>\n  <CollapsibleContent\n    data-slot=\"collapsible-content\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </CollapsibleContent>\n</template>\n\n<script setup lang=\"ts\">\nimport { CollapsibleContent, type CollapsibleContentProps } from 'reka-ui'\n\nconst props = defineProps<CollapsibleContentProps>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Collapsible/CollapsibleTrigger.vue",
          "content": "<template>\n  <CollapsibleTrigger\n    data-slot=\"collapsible-trigger\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </CollapsibleTrigger>\n</template>\n\n<script setup lang=\"ts\">\nimport { CollapsibleTrigger, type CollapsibleTriggerProps } from 'reka-ui'\n\nconst props = defineProps<CollapsibleTriggerProps>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Collapsible/index.ts",
          "content": "export { default as Collapsible } from './Collapsible.vue'\nexport { default as CollapsibleContent } from './CollapsibleContent.vue'\nexport { default as CollapsibleTrigger } from './CollapsibleTrigger.vue'\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "combobox",
      "type": "registry:ui",
      "title": "Combobox",
      "description": "Combobox components for StackTrace UI.",
      "dependencies": [
        "@lucide/vue",
        "@vueuse/core",
        "reka-ui"
      ],
      "files": [
        {
          "path": "Combobox/Combobox.vue",
          "content": "<template>\n  <ComboboxRoot\n    data-slot=\"combobox\"\n    v-bind=\"forwarded\"\n  >\n    <slot />\n  </ComboboxRoot>\n</template>\n\n<script setup lang=\"ts\">\nimport { ComboboxRoot, type ComboboxRootEmits, type ComboboxRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<ComboboxRootProps>()\nconst emits = defineEmits<ComboboxRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Combobox/ComboboxAnchor.vue",
          "content": "<template>\n  <ComboboxAnchor\n    data-slot=\"combobox-anchor\"\n    v-bind=\"forwarded\"\n    :class=\"cn('w-[200px]', props.class)\"\n  >\n    <slot />\n  </ComboboxAnchor>\n</template>\n\n<script setup lang=\"ts\">\nimport type { ComboboxAnchorProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { ComboboxAnchor, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxAnchorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Combobox/ComboboxEmpty.vue",
          "content": "<template>\n  <ComboboxEmpty\n    data-slot=\"combobox-empty\"\n    v-bind=\"delegatedProps\"\n    :class=\"cn('py-6 text-center text-sm', props.class)\"\n  >\n    <slot />\n  </ComboboxEmpty>\n</template>\n\n<script setup lang=\"ts\">\nimport type { ComboboxEmptyProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { ComboboxEmpty } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Combobox/ComboboxGroup.vue",
          "content": "<template>\n  <ComboboxGroup\n    data-slot=\"combobox-group\"\n    v-bind=\"delegatedProps\"\n    :class=\"cn('overflow-hidden p-1 text-foreground', props.class)\"\n  >\n    <ComboboxLabel v-if=\"heading\" class=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n      {{ heading }}\n    </ComboboxLabel>\n    <slot />\n  </ComboboxGroup>\n</template>\n\n<script setup lang=\"ts\">\nimport type { ComboboxGroupProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { ComboboxGroup, ComboboxLabel } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxGroupProps & {\n  class?: HTMLAttributes['class']\n  heading?: string\n}>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Combobox/ComboboxInput.vue",
          "content": "<template>\n  <div\n    data-slot=\"command-input-wrapper\"\n    class=\"flex h-9 items-center gap-2 border-b px-3\"\n  >\n    <SearchIcon class=\"size-4 shrink-0 opacity-50\" />\n    <ComboboxInput\n      data-slot=\"command-input\"\n      :class=\"cn(\n        'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n        props.class,\n      )\"\n\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n    >\n      <slot />\n    </ComboboxInput>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { SearchIcon } from '@lucide/vue'\nimport { ComboboxInput, type ComboboxInputEmits, type ComboboxInputProps, useForwardPropsEmits } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<ComboboxInputProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst emits = defineEmits<ComboboxInputEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Combobox/ComboboxItem.vue",
          "content": "<template>\n  <ComboboxItem\n    data-slot=\"combobox-item\"\n    v-bind=\"forwarded\"\n    :class=\"cn(`data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`, props.class)\"\n  >\n    <slot />\n  </ComboboxItem>\n</template>\n\n<script setup lang=\"ts\">\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { ComboboxItem, useForwardPropsEmits } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ComboboxItemEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Combobox/ComboboxItemIndicator.vue",
          "content": "<template>\n  <ComboboxItemIndicator\n    data-slot=\"combobox-item-indicator\"\n    v-bind=\"forwarded\"\n    :class=\"cn('ml-auto', props.class)\"\n  >\n    <slot />\n  </ComboboxItemIndicator>\n</template>\n\n<script setup lang=\"ts\">\nimport type { ComboboxItemIndicatorProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { ComboboxItemIndicator, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxItemIndicatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Combobox/ComboboxList.vue",
          "content": "<template>\n  <ComboboxPortal>\n    <ComboboxContent\n      data-slot=\"combobox-list\"\n      v-bind=\"forwarded\"\n      :class=\"cn('z-50 w-[200px] rounded-md border bg-popover text-popover-foreground origin-(--reka-combobox-content-transform-origin) overflow-hidden shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n    >\n      <slot />\n    </ComboboxContent>\n  </ComboboxPortal>\n</template>\n\n<script setup lang=\"ts\">\nimport type { ComboboxContentEmits, ComboboxContentProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { ComboboxContent, ComboboxPortal, useForwardPropsEmits } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {\n  position: 'popper',\n  align: 'center',\n  sideOffset: 4,\n})\nconst emits = defineEmits<ComboboxContentEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Combobox/ComboboxSeparator.vue",
          "content": "<template>\n  <ComboboxSeparator\n    data-slot=\"combobox-separator\"\n    v-bind=\"delegatedProps\"\n    :class=\"cn('bg-border -mx-1 h-px', props.class)\"\n  >\n    <slot />\n  </ComboboxSeparator>\n</template>\n\n<script setup lang=\"ts\">\nimport type { ComboboxSeparatorProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { ComboboxSeparator } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Combobox/ComboboxTrigger.vue",
          "content": "<template>\n  <ComboboxTrigger\n    data-slot=\"combobox-trigger\"\n    v-bind=\"forwarded\"\n    :class=\"cn('', props.class)\"\n    tabindex=\"0\"\n  >\n    <slot />\n  </ComboboxTrigger>\n</template>\n\n<script setup lang=\"ts\">\nimport type { ComboboxTriggerProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { ComboboxTrigger, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Combobox/ComboboxViewport.vue",
          "content": "<template>\n  <ComboboxViewport\n    data-slot=\"combobox-viewport\"\n    v-bind=\"forwarded\"\n    :class=\"cn('max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', props.class)\"\n  >\n    <slot />\n  </ComboboxViewport>\n</template>\n\n<script setup lang=\"ts\">\nimport type { ComboboxViewportProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { ComboboxViewport, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Combobox/index.ts",
          "content": "export { default as Combobox } from './Combobox.vue'\nexport { default as ComboboxAnchor } from './ComboboxAnchor.vue'\nexport { default as ComboboxEmpty } from './ComboboxEmpty.vue'\nexport { default as ComboboxGroup } from './ComboboxGroup.vue'\nexport { default as ComboboxInput } from './ComboboxInput.vue'\nexport { default as ComboboxItem } from './ComboboxItem.vue'\nexport { default as ComboboxItemIndicator } from './ComboboxItemIndicator.vue'\nexport { default as ComboboxList } from './ComboboxList.vue'\nexport { default as ComboboxSeparator } from './ComboboxSeparator.vue'\nexport { default as ComboboxViewport } from './ComboboxViewport.vue'\n\nexport { ComboboxCancel, ComboboxTrigger } from 'reka-ui'\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "command",
      "type": "registry:ui",
      "title": "Command",
      "description": "Command components for StackTrace UI.",
      "dependencies": [
        "@lucide/vue",
        "@vueuse/core",
        "reka-ui"
      ],
      "registryDependencies": [
        "@stacktrace/dialog"
      ],
      "files": [
        {
          "path": "Command/Command.vue",
          "content": "<template>\n  <ListboxRoot\n    data-slot=\"command\"\n    v-bind=\"forwarded\"\n    :class=\"cn('bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md', props.class)\"\n  >\n    <slot />\n  </ListboxRoot>\n</template>\n\n<script setup lang=\"ts\">\nimport type { ListboxRootEmits, ListboxRootProps } from 'reka-ui'\nimport { reactiveOmit } from '@vueuse/core'\nimport { ListboxRoot, useFilter, useForwardPropsEmits } from 'reka-ui'\nimport { type HTMLAttributes, reactive, ref, watch } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { provideCommandContext } from '.'\n\nconst props = withDefaults(defineProps<ListboxRootProps & { class?: HTMLAttributes['class'] }>(), {\n  modelValue: '',\n})\n\nconst emits = defineEmits<ListboxRootEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n\nconst allItems = ref<Map<string, string>>(new Map())\nconst allGroups = ref<Map<string, Set<string>>>(new Map())\n\nconst { contains } = useFilter({ sensitivity: 'base' })\nconst filterState = reactive({\n  search: '',\n  filtered: {\n    /** The count of all visible items. */\n    count: 0,\n    /** Map from visible item id to its search score. */\n    items: new Map() as Map<string, number>,\n    /** Set of groups with at least one visible item. */\n    groups: new Set() as Set<string>,\n  },\n})\n\nfunction filterItems() {\n  if (!filterState.search) {\n    filterState.filtered.count = allItems.value.size\n    // Do nothing, each item will know to show itself because search is empty\n    return\n  }\n\n  // Reset the groups\n  filterState.filtered.groups = new Set()\n  let itemCount = 0\n\n  // Check which items should be included\n  for (const [id, value] of allItems.value) {\n    const score = contains(value, filterState.search)\n    filterState.filtered.items.set(id, score ? 1 : 0)\n    if (score)\n      itemCount++\n  }\n\n  // Check which groups have at least 1 item shown\n  for (const [groupId, group] of allGroups.value) {\n    for (const itemId of group) {\n      if (filterState.filtered.items.get(itemId)! > 0) {\n        filterState.filtered.groups.add(groupId)\n        break\n      }\n    }\n  }\n\n  filterState.filtered.count = itemCount\n}\n\nwatch(() => filterState.search, () => {\n  filterItems()\n})\n\nprovideCommandContext({\n  allItems,\n  allGroups,\n  filterState,\n})\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Command/CommandDialog.vue",
          "content": "<template>\n  <Dialog v-bind=\"forwarded\">\n    <DialogContent class=\"overflow-hidden p-0 \">\n      <DialogHeader class=\"sr-only\">\n        <DialogTitle>{{ title }}</DialogTitle>\n        <DialogDescription>{{ description }}</DialogDescription>\n      </DialogHeader>\n      <Command>\n        <slot />\n      </Command>\n    </DialogContent>\n  </Dialog>\n</template>\n\n<script setup lang=\"ts\">\nimport type { DialogRootEmits, DialogRootProps } from 'reka-ui'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/registry/stacktrace/ui/Dialog'\nimport Command from './Command.vue'\n\nconst props = withDefaults(defineProps<DialogRootProps & {\n  title?: string\n  description?: string\n}>(), {\n  title: 'Command Palette',\n  description: 'Search for a command to run...',\n})\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Command/CommandEmpty.vue",
          "content": "<template>\n  <Primitive\n    v-if=\"isRender\"\n    data-slot=\"command-empty\"\n    v-bind=\"delegatedProps\" :class=\"cn('py-6 text-center text-sm', props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n\n<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport { reactiveOmit } from '@vueuse/core'\nimport { Primitive } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useCommand } from '.'\n\nconst props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst { filterState } = useCommand()\nconst isRender = computed(() => !!filterState.search && filterState.filtered.count === 0,\n)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Command/CommandGroup.vue",
          "content": "<template>\n  <ListboxGroup\n    v-bind=\"delegatedProps\"\n    :id=\"id\"\n    data-slot=\"command-group\"\n    :class=\"cn('text-foreground overflow-hidden p-1', props.class)\"\n    :hidden=\"isRender ? undefined : true\"\n  >\n    <ListboxGroupLabel v-if=\"heading\" class=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n      {{ heading }}\n    </ListboxGroupLabel>\n    <slot />\n  </ListboxGroup>\n</template>\n\n<script setup lang=\"ts\">\nimport type { ListboxGroupProps } from 'reka-ui'\nimport { reactiveOmit } from '@vueuse/core'\nimport { ListboxGroup, ListboxGroupLabel, useId } from 'reka-ui'\nimport { computed, type HTMLAttributes, onMounted, onUnmounted } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { provideCommandGroupContext, useCommand } from '.'\n\nconst props = defineProps<ListboxGroupProps & {\n  class?: HTMLAttributes['class']\n  heading?: string\n}>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst { allGroups, filterState } = useCommand()\nconst id = useId()\n\nconst isRender = computed(() => !filterState.search ? true : filterState.filtered.groups.has(id))\n\nprovideCommandGroupContext({ id })\nonMounted(() => {\n  if (!allGroups.value.has(id))\n    allGroups.value.set(id, new Set())\n})\nonUnmounted(() => {\n  allGroups.value.delete(id)\n})\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Command/CommandInput.vue",
          "content": "<template>\n  <div\n    data-slot=\"command-input-wrapper\"\n    class=\"flex h-12 items-center gap-2 border-b px-3\"\n  >\n    <Search class=\"size-4 shrink-0 opacity-50\" />\n    <ListboxFilter\n      v-bind=\"{ ...forwardedProps, ...$attrs }\"\n      v-model=\"filterState.search\"\n      data-slot=\"command-input\"\n      auto-focus\n      :class=\"cn('placeholder:text-muted-foreground flex h-12 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n    />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { Search } from '@lucide/vue'\nimport { ListboxFilter, type ListboxFilterProps, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { useCommand } from '.'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<ListboxFilterProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n\nconst { filterState } = useCommand()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Command/CommandItem.vue",
          "content": "<template>\n  <ListboxItem\n    v-if=\"isRender\"\n    v-bind=\"forwarded\"\n    :id=\"id\"\n    ref=\"itemRef\"\n    data-slot=\"command-item\"\n    :class=\"cn(`data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-3 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`, props.class)\"\n    @select=\"() => {\n      filterState.search = ''\n    }\"\n  >\n    <slot />\n  </ListboxItem>\n</template>\n\n<script setup lang=\"ts\">\nimport type { ListboxItemEmits, ListboxItemProps } from 'reka-ui'\nimport { reactiveOmit, useCurrentElement } from '@vueuse/core'\nimport { ListboxItem, useForwardPropsEmits, useId } from 'reka-ui'\nimport { computed, type HTMLAttributes, onMounted, onUnmounted, ref } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useCommand, useCommandGroup } from '.'\n\nconst props = defineProps<ListboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ListboxItemEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n\nconst id = useId()\nconst { filterState, allItems, allGroups } = useCommand()\nconst groupContext = useCommandGroup()\n\nconst isRender = computed(() => {\n  if (!filterState.search) {\n    return true\n  }\n  else {\n    const filteredCurrentItem = filterState.filtered.items.get(id)\n    // If the filtered items is undefined means not in the all times map yet\n    // Do the first render to add into the map\n    if (filteredCurrentItem === undefined) {\n      return true\n    }\n\n    // Check with filter\n    return filteredCurrentItem > 0\n  }\n})\n\nconst itemRef = ref()\nconst currentElement = useCurrentElement(itemRef)\nonMounted(() => {\n  if (!(currentElement.value instanceof HTMLElement))\n    return\n\n  // textValue to perform filter\n  allItems.value.set(id, currentElement.value.textContent ?? (props.value?.toString() ?? ''))\n\n  const groupId = groupContext?.id\n  if (groupId) {\n    if (!allGroups.value.has(groupId)) {\n      allGroups.value.set(groupId, new Set([id]))\n    }\n    else {\n      allGroups.value.get(groupId)?.add(id)\n    }\n  }\n})\nonUnmounted(() => {\n  allItems.value.delete(id)\n})\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Command/CommandList.vue",
          "content": "<template>\n  <ListboxContent\n    data-slot=\"command-list\"\n    v-bind=\"forwarded\"\n    :class=\"cn('max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', props.class)\"\n  >\n    <div role=\"presentation\">\n      <slot />\n    </div>\n  </ListboxContent>\n</template>\n\n<script setup lang=\"ts\">\nimport type { ListboxContentProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { ListboxContent, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ListboxContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Command/CommandSeparator.vue",
          "content": "<template>\n  <Separator\n    data-slot=\"command-separator\"\n    v-bind=\"delegatedProps\"\n    :class=\"cn('bg-border -mx-1 h-px', props.class)\"\n  >\n    <slot />\n  </Separator>\n</template>\n\n<script setup lang=\"ts\">\nimport type { SeparatorProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { Separator } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Command/CommandShortcut.vue",
          "content": "<template>\n  <span\n    data-slot=\"command-shortcut\"\n    :class=\"cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)\"\n  >\n    <slot />\n  </span>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Command/index.ts",
          "content": "import type { Ref } from 'vue'\nimport { createContext } from 'reka-ui'\n\nexport { default as Command } from './Command.vue'\nexport { default as CommandDialog } from './CommandDialog.vue'\nexport { default as CommandEmpty } from './CommandEmpty.vue'\nexport { default as CommandGroup } from './CommandGroup.vue'\nexport { default as CommandInput } from './CommandInput.vue'\nexport { default as CommandItem } from './CommandItem.vue'\nexport { default as CommandList } from './CommandList.vue'\nexport { default as CommandSeparator } from './CommandSeparator.vue'\nexport { default as CommandShortcut } from './CommandShortcut.vue'\n\nexport const [useCommand, provideCommandContext] = createContext<{\n  allItems: Ref<Map<string, string>>\n  allGroups: Ref<Map<string, Set<string>>>\n  filterState: {\n    search: string\n    filtered: { count: number, items: Map<string, number>, groups: Set<string> }\n  }\n}>('Command')\n\nexport const [useCommandGroup, provideCommandGroupContext] = createContext<{\n  id?: string\n}>('CommandGroup')\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "confirmation-dialog",
      "type": "registry:ui",
      "title": "Confirmation Dialog",
      "description": "Confirmation Dialog components for StackTrace UI.",
      "registryDependencies": [
        "@stacktrace/alert-dialog",
        "@stacktrace/button"
      ],
      "files": [
        {
          "path": "ConfirmationDialog/ConfirmationDialog.vue",
          "content": "<template>\n  <AlertDialog :control=\"control\">\n    <AlertDialogContent v-if=\"dialog\" :to=\"to\">\n      <AlertDialogHeader>\n        <AlertDialogTitle>{{ dialog.title || (dialog.type === 'confirmation' ? 'Confirm' : 'Alert') }}</AlertDialogTitle>\n        <AlertDialogDescription>{{ dialog.message || 'Are you sure you want to run this action?' }}</AlertDialogDescription>\n      </AlertDialogHeader>\n\n      <AlertDialogFooter>\n        <template v-if=\"dialog.type === 'confirmation'\">\n          <Button @click=\"cancel\" variant=\"outline\">\n            <ButtonState :processing=\"isCancelling\">\n              {{ dialog.cancelLabel || 'Cancel' }}\n            </ButtonState>\n          </Button>\n          <Button @click=\"confirm\" :variant=\"dialog.destructive ? 'destructive' : 'default'\">\n            <ButtonState :processing=\"isConfirming\">\n              {{ dialog.confirmLabel || 'Confirm' }}\n            </ButtonState>\n          </Button>\n        </template>\n\n        <template v-else-if=\"dialog.type === 'alert'\">\n          <Button @click=\"confirm\" :variant=\"dialog.destructive ? 'destructive' : 'default'\">\n            <ButtonState :processing=\"isConfirming\">\n              {{ dialog.confirmLabel || 'OK' }}\n            </ButtonState>\n          </Button>\n        </template>\n      </AlertDialogFooter>\n    </AlertDialogContent>\n  </AlertDialog>\n</template>\n\n<script setup lang=\"ts\">\nimport { useConfirmationDialogRoot } from \".\"\nimport { ref } from \"vue\"\nimport { onDeactivated } from \"@stacktrace/ui\"\nimport { AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter } from '@/registry/stacktrace/ui/AlertDialog'\nimport { Button, ButtonState } from '@/registry/stacktrace/ui/Button'\n\ndefineProps<{\n  to?: string | HTMLElement\n}>()\n\nconst { control, dialog, close: closeDialog } = useConfirmationDialogRoot()\n\nconst isCancelling = ref(false)\nconst isConfirming = ref(false)\n\nconst ANIMATION_DELAY = 300\n\nconst close = () => closeDialog(ANIMATION_DELAY)\n\nconst cancel = async () => {\n  const currentDialog = dialog.value\n\n  if (! currentDialog || currentDialog.type !== 'confirmation') {\n    close()\n    return\n  }\n\n  const cancelCallback = currentDialog.cancel\n\n  if (! cancelCallback) {\n    close()\n    return\n  }\n\n  isCancelling.value = true\n\n  await cancelCallback()\n  close()\n}\n\nconst confirm = async () => {\n  const confirmCallback = dialog.value?.confirm\n\n  if (! confirmCallback) {\n    close()\n    return\n  }\n\n  isConfirming.value = true\n\n  await confirmCallback()\n  close()\n}\n\nonDeactivated(control, () => {\n  setTimeout(() => {\n    isCancelling.value = false\n    isConfirming.value = false\n  }, ANIMATION_DELAY)\n})\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "ConfirmationDialog/index.ts",
          "content": "import { useToggle } from \"@stacktrace/ui\"\nimport { computed, ref } from \"vue\"\n\nexport { default as ConfirmationDialog } from './ConfirmationDialog.vue'\n\nexport declare type Callback = (() => any) | (() => Promise<any>)\n\nexport interface Confirmation {\n  type: 'confirmation'\n  title?: string | undefined\n  message?: string | undefined\n  cancelLabel?: string | undefined\n  confirmLabel?: string | undefined\n  cancel?: Callback | undefined\n  confirm?: Callback | undefined\n  destructive?: boolean | undefined\n}\n\nexport interface Alert {\n  type: 'alert'\n  title?: string | undefined\n  message?: string | undefined\n  confirmLabel?: string | undefined\n  confirm?: Callback | undefined\n  destructive?: boolean | undefined\n}\n\nexport type PendingDialog = Confirmation | Alert\n\nconst control = useToggle()\nconst pendingDialog = ref<PendingDialog | null>(null)\n\nexport function useConfirmationDialogRoot() {\n  const dialog = computed(() => pendingDialog.value)\n\n  const close = (delay: number = 0) => {\n    control.deactivate()\n\n    if (delay) {\n      setTimeout(() => {\n        pendingDialog.value = null\n      }, delay)\n    } else {\n      pendingDialog.value = null\n    }\n  }\n\n  return {\n    control,\n    dialog,\n    close,\n  }\n}\n\nexport function useConfirmable() {\n  const showConfirmDialog = (confirm: PendingDialog) => {\n    pendingDialog.value = confirm\n    control.activate()\n  }\n\n  function confirm(confirm: string, action?: Callback | undefined, options?: Partial<Confirmation>): void;\n  function confirm(confirm: Confirmation): void;\n  function confirm(confirm: string|Confirmation, action?: Callback | undefined, options?: Partial<Confirmation>) {\n    if (typeof confirm == 'string') {\n      showConfirmDialog({\n        type: 'confirmation',\n        ...(options || {}),\n        message: confirm,\n        confirm: action,\n      })\n    } else {\n      showConfirmDialog(confirm as Confirmation)\n    }\n  }\n\n  const confirmDestructive = (message: string, action?: Callback | undefined) => {\n    return confirm(message, action, {\n      destructive: true,\n    })\n  }\n\n  function alert(message: string, action?: Callback | undefined, options?: Partial<Alert>): void;\n  function alert(message: Alert): void;\n  function alert(message: string|Alert, action?: Callback | undefined, options?: Partial<Alert>) {\n    if (typeof message == 'string') {\n      showConfirmDialog({\n        type: 'alert',\n        ...(options || {}),\n        message,\n        confirm: action,\n      })\n    } else {\n      showConfirmDialog(message as Alert)\n    }\n  }\n\n  const alertDestructive = (message: string, action?: Callback | undefined) => {\n    return alert(message, action, {\n      destructive: true,\n    })\n  }\n\n  return {\n    confirm, confirmDestructive, alert, alertDestructive,\n  }\n}\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "context-menu",
      "type": "registry:ui",
      "title": "Context Menu",
      "description": "Context Menu components for StackTrace UI.",
      "dependencies": [
        "@lucide/vue",
        "@vueuse/core",
        "reka-ui"
      ],
      "files": [
        {
          "path": "ContextMenu/ContextMenu.vue",
          "content": "<script setup lang=\"ts\">\nimport type { ContextMenuRootEmits, ContextMenuRootProps } from 'reka-ui'\nimport { ContextMenuRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<ContextMenuRootProps>()\nconst emits = defineEmits<ContextMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuRoot\n    data-slot=\"context-menu\"\n    v-bind=\"forwarded\"\n  >\n    <slot />\n  </ContextMenuRoot>\n</template>\n",
          "type": "registry:ui"
        },
        {
          "path": "ContextMenu/ContextMenuCheckboxItem.vue",
          "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { Check } from '@lucide/vue'\nimport {\n  ContextMenuCheckboxItem,\n  type ContextMenuCheckboxItemEmits,\n  type ContextMenuCheckboxItemProps,\n  ContextMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuCheckboxItemEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuCheckboxItem\n    data-slot=\"context-menu-checkbox-item\"\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      `focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,\n      props.class,\n    )\"\n  >\n    <span class=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator>\n        <Check class=\"size-4\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuCheckboxItem>\n</template>\n",
          "type": "registry:ui"
        },
        {
          "path": "ContextMenu/ContextMenuContent.vue",
          "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport {\n  ContextMenuContent,\n  type ContextMenuContentEmits,\n  type ContextMenuContentProps,\n  ContextMenuPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuContentEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuPortal>\n    <ContextMenuContent\n      data-slot=\"context-menu-content\"\n      v-bind=\"forwarded\"\n      :class=\"cn(\n        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--reka-context-menu-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',\n        props.class,\n      )\"\n    >\n      <slot />\n    </ContextMenuContent>\n  </ContextMenuPortal>\n</template>\n",
          "type": "registry:ui"
        },
        {
          "path": "ContextMenu/ContextMenuGroup.vue",
          "content": "<script setup lang=\"ts\">\nimport { ContextMenuGroup, type ContextMenuGroupProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuGroupProps>()\n</script>\n\n<template>\n  <ContextMenuGroup\n    data-slot=\"context-menu-group\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </ContextMenuGroup>\n</template>\n",
          "type": "registry:ui"
        },
        {
          "path": "ContextMenu/ContextMenuItem.vue",
          "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport {\n  ContextMenuItem,\n  type ContextMenuItemEmits,\n  type ContextMenuItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<ContextMenuItemProps & {\n  class?: HTMLAttributes['class']\n  inset?: boolean\n  variant?: 'default' | 'destructive'\n}>(), {\n  variant: 'default',\n})\nconst emits = defineEmits<ContextMenuItemEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuItem\n    data-slot=\"context-menu-item\"\n    :data-inset=\"inset ? '' : undefined\"\n    :data-variant=\"variant\"\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      `focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:!text-destructive-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,\n      props.class,\n    )\"\n  >\n    <slot />\n  </ContextMenuItem>\n</template>\n",
          "type": "registry:ui"
        },
        {
          "path": "ContextMenu/ContextMenuLabel.vue",
          "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { ContextMenuLabel, type ContextMenuLabelProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n</script>\n\n<template>\n  <ContextMenuLabel\n    data-slot=\"context-menu-label\"\n    :data-inset=\"inset ? '' : undefined\"\n    v-bind=\"delegatedProps\"\n    :class=\"cn('text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', props.class)\"\n  >\n    <slot />\n  </ContextMenuLabel>\n</template>\n",
          "type": "registry:ui"
        },
        {
          "path": "ContextMenu/ContextMenuPortal.vue",
          "content": "<script setup lang=\"ts\">\nimport { ContextMenuPortal, type ContextMenuPortalProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuPortalProps>()\n</script>\n\n<template>\n  <ContextMenuPortal\n    data-slot=\"context-menu-portal\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </ContextMenuPortal>\n</template>\n",
          "type": "registry:ui"
        },
        {
          "path": "ContextMenu/ContextMenuRadioGroup.vue",
          "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuRadioGroup,\n  type ContextMenuRadioGroupEmits,\n  type ContextMenuRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<ContextMenuRadioGroupProps>()\nconst emits = defineEmits<ContextMenuRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuRadioGroup\n    data-slot=\"context-menu-radio-group\"\n    v-bind=\"forwarded\"\n  >\n    <slot />\n  </ContextMenuRadioGroup>\n</template>\n",
          "type": "registry:ui"
        },
        {
          "path": "ContextMenu/ContextMenuRadioItem.vue",
          "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { Circle } from '@lucide/vue'\nimport {\n  ContextMenuItemIndicator,\n  ContextMenuRadioItem,\n  type ContextMenuRadioItemEmits,\n  type ContextMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuRadioItemEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuRadioItem\n    data-slot=\"context-menu-radio-item\"\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      `focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,\n      props.class,\n    )\"\n  >\n    <span class=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator>\n        <Circle class=\"size-2 fill-current\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuRadioItem>\n</template>\n",
          "type": "registry:ui"
        },
        {
          "path": "ContextMenu/ContextMenuSeparator.vue",
          "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport {\n  ContextMenuSeparator,\n  type ContextMenuSeparatorProps,\n} from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n</script>\n\n<template>\n  <ContextMenuSeparator\n    data-slot=\"context-menu-separator\"\n    v-bind=\"delegatedProps\"\n    :class=\"cn('bg-border -mx-1 my-1 h-px', props.class)\"\n  />\n</template>\n",
          "type": "registry:ui"
        },
        {
          "path": "ContextMenu/ContextMenuShortcut.vue",
          "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span\n    data-slot=\"context-menu-shortcut\"\n    :class=\"cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)\"\n  >\n    <slot />\n  </span>\n</template>\n",
          "type": "registry:ui"
        },
        {
          "path": "ContextMenu/ContextMenuSub.vue",
          "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuSub,\n  type ContextMenuSubEmits,\n  type ContextMenuSubProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<ContextMenuSubProps>()\nconst emits = defineEmits<ContextMenuSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuSub\n    data-slot=\"context-menu-sub\"\n    v-bind=\"forwarded\"\n  >\n    <slot />\n  </ContextMenuSub>\n</template>\n",
          "type": "registry:ui"
        },
        {
          "path": "ContextMenu/ContextMenuSubContent.vue",
          "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport {\n  ContextMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuSubContent\n    data-slot=\"context-menu-sub-content\"\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--reka-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </ContextMenuSubContent>\n</template>\n",
          "type": "registry:ui"
        },
        {
          "path": "ContextMenu/ContextMenuSubTrigger.vue",
          "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { ChevronRight } from '@lucide/vue'\nimport {\n  ContextMenuSubTrigger,\n  type ContextMenuSubTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ContextMenuSubTrigger\n    data-slot=\"context-menu-sub-trigger\"\n    :data-inset=\"inset ? '' : undefined\"\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      `focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRight class=\"ml-auto\" />\n  </ContextMenuSubTrigger>\n</template>\n",
          "type": "registry:ui"
        },
        {
          "path": "ContextMenu/ContextMenuTrigger.vue",
          "content": "<script setup lang=\"ts\">\nimport { ContextMenuTrigger, type ContextMenuTriggerProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuTriggerProps>()\n\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <ContextMenuTrigger\n    data-slot=\"context-menu-trigger\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </ContextMenuTrigger>\n</template>\n",
          "type": "registry:ui"
        },
        {
          "path": "ContextMenu/index.ts",
          "content": "export { default as ContextMenu } from './ContextMenu.vue'\nexport { default as ContextMenuCheckboxItem } from './ContextMenuCheckboxItem.vue'\nexport { default as ContextMenuContent } from './ContextMenuContent.vue'\nexport { default as ContextMenuGroup } from './ContextMenuGroup.vue'\nexport { default as ContextMenuItem } from './ContextMenuItem.vue'\nexport { default as ContextMenuLabel } from './ContextMenuLabel.vue'\nexport { default as ContextMenuRadioGroup } from './ContextMenuRadioGroup.vue'\nexport { default as ContextMenuRadioItem } from './ContextMenuRadioItem.vue'\nexport { default as ContextMenuSeparator } from './ContextMenuSeparator.vue'\nexport { default as ContextMenuShortcut } from './ContextMenuShortcut.vue'\nexport { default as ContextMenuSub } from './ContextMenuSub.vue'\nexport { default as ContextMenuSubContent } from './ContextMenuSubContent.vue'\nexport { default as ContextMenuSubTrigger } from './ContextMenuSubTrigger.vue'\nexport { default as ContextMenuTrigger } from './ContextMenuTrigger.vue'\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "data-table",
      "type": "registry:ui",
      "title": "Data Table",
      "description": "Data Table components for StackTrace UI.",
      "dependencies": [
        "@lucide/vue",
        "reka-ui"
      ],
      "registryDependencies": [
        "@stacktrace/badge",
        "@stacktrace/button",
        "@stacktrace/dialog",
        "@stacktrace/dropdown-menu",
        "@stacktrace/filter",
        "@stacktrace/input",
        "@stacktrace/table"
      ],
      "files": [
        {
          "path": "DataTable/Columns/Badge.vue",
          "content": "<template>\n  <Badge :variant=\"variant\">{{ text }}</Badge>\n</template>\n\n<script setup lang=\"ts\">\nimport { type BadgeVariants, Badge } from '@/registry/stacktrace/ui/Badge'\n\ndefineProps<{\n  variant?: BadgeVariants['variant']\n  text: string\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "DataTable/Columns/Icon.vue",
          "content": "<template>\n  <Icon class=\"inline\" v-if=\"src\" :src=\"src\" :style=\"{ width: `${size}rem`, height: `${size}rem`, }\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { Icon } from '@stacktrace/ui'\n\ndefineProps<{\n  src: string | null\n  size: number\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "DataTable/Columns/Image.vue",
          "content": "<template>\n  <div v-if=\"src\" :class=\"cn('overflow-hidden', imageClasses)\" :style=\"imageStyles\">\n    <img :src=\"src\" class=\"w-full h-full object-center\">\n  </div>\n  <div v-else class=\"bg-accent text-accent-foreground/80 flex items-center justify-center\" :class=\"imageClasses\" :style=\"imageStyles\">\n    <ImageIcon class=\"size-4\" />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { computed } from 'vue'\nimport { ImageIcon } from '@lucide/vue'\n\nconst props = defineProps<{\n  src: string | null\n  width: number\n  height: number\n  rounding: 'none' | 'rounded' | 'full'\n}>()\n\nconst imageStyles = computed(() => ({\n  width: `${props.width}rem`,\n  height: `${props.height}rem`\n}))\n\nconst imageClasses = computed(() => ({\n  'rounded': props.rounding === 'rounded',\n  'rounded-full': props.rounding === 'full',\n}))\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "DataTable/Columns/Link.vue",
          "content": "<template>\n  <component :is=\"external ? 'a' : Link\" :target=\"target || undefined\" :href=\"href || undefined\">{{ value || '&mdash;'}}</component>\n</template>\n\n<script setup lang=\"ts\">\nimport { Link } from '@inertiajs/vue3'\n\ndefineProps<{\n  value: string | null\n  href: string | null\n  external: boolean\n  target: string | null\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "DataTable/Columns/Text.vue",
          "content": "<template>\n  {{ value !== null ? value : '&mdash;'}}\n</template>\n\n<script setup lang=\"ts\">\ndefineProps<{\n  value: string | null | number\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "DataTable/DataTable.vue",
          "content": "<template>\n  <div>\n    <DataTableProvider :context=\"context\">\n      <!-- Empty Table -->\n      <DataTableEmpty\n        v-if=\"table.isEmpty\"\n        :title=\"emptyTableMessage || messages.emptyTableTitle\"\n        :description=\"emptyTableDescription || messages.emptyTableDescription\"\n        :icon=\"TableIcon\"\n      >\n        <slot name=\"empty-table\" />\n      </DataTableEmpty>\n\n      <!-- Data Table -->\n      <template v-else>\n        <div\n          class=\"flex flex-row justify-between\"\n          :class=\"cn(insetLeft || 'pl-2', insetRight || 'pr-2', { 'border-b py-2': ! borderless, 'pb-3': borderless })\"\n        >\n          <div class=\"inline-flex items-center gap-4\">\n            <slot name=\"search\" />\n\n            <DataTableSearch />\n          </div>\n\n          <div class=\"flex flex-row items-center gap-2\">\n            <div v-if=\"somethingSelected\" class=\"text-sm font-medium mr-4\">{{ messages.selectedRows(selectableRows.selectedCount.value, selectableRows.totalCount.value) }}</div>\n\n            <DataTableBulkActions @event=\"onEvent($event.name, $event.selection)\" />\n\n            <DataTableClearSelectionButton />\n\n            <slot name=\"actions\" />\n\n            <DataTableViewSettings />\n          </div>\n        </div>\n\n        <DataTableFilter :class=\"cn(insetLeft || 'pl-2', insetRight || 'pr-2', { 'border-b py-2': ! borderless, 'pb-4': borderless })\" />\n\n        <Table v-if=\"table.rows.length\">\n          <TableHeader>\n            <TableRow>\n              <TableHead class=\"w-10 text-center\" :class=\"cn(insetLeft || '')\">\n                <BulkSelect :disabled=\"! hasBulkActions\" :selectable=\"selectableRows\" />\n              </TableHead>\n              <template v-for=\"(heading, idx) in headings\">\n                <TableHead\n                  :class=\"cn({\n                      'px-0': !!heading.sortableAs,\n                    }, createHeadingStyle(heading.style), !hasRowActions && idx + 1 == headings.length ? (insetRight || '') : '')\"\n                  :style=\"{\n                      width: heading.width || undefined,\n                      minWidth: heading.minWidth || undefined,\n                      maxWidth: heading.maxWidth || undefined,\n                    }\"\n                >\n                  <Sorting v-if=\"heading.sortableAs\" :value=\"heading.sortableAs\" v-model:column=\"sortFilter.sort_by\" v-model:direction=\"sortFilter.sort_direction\">{{ heading.name }}</Sorting>\n                  <template v-else>{{ heading.name }}</template>\n                </TableHead>\n              </template>\n              <TableHead class=\"w-10\" v-if=\"hasRowActions\" :class=\"cn(insetRight || '')\"/>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            <SelectableTableRow v-for=\"row in rows\" :class=\"cn(createRowStyle({ highlight: row.highlightAs || 'default' }))\" :value=\"row.key\" v-model=\"selectableRows.selection.value\" :disabled=\"! shouldShowCheckboxForRow(row)\">\n              <TableCell class=\"text-center\" :class=\"cn(insetLeft || '')\">\n                <RowSelect />\n              </TableCell>\n\n              <template v-for=\"(cell, idx) in row.cells\">\n                <DataTableCell :cell=\"cell\" :class=\"!hasRowActions && idx + 1 == row.cells.length ? (insetRight || '') : ''\" />\n              </template>\n              <TableCell v-if=\"hasRowActions\" class=\"py-0.5\" :class=\"cn(insetRight || '')\">\n                <DataTableRowActions :row=\"row\" @event=\"onEvent($event.name, $event.selection)\" />\n              </TableCell>\n            </SelectableTableRow>\n          </TableBody>\n          <TableFooter v-if=\"table.footerCells.length > 0\">\n            <TableRow>\n              <TableCell />\n              <template v-for=\"cell in table.footerCells\">\n                <DataTableCell v-if=\"cell\" :cell=\"cell\" />\n                <TableCell v-else />\n              </template>\n              <TableCell v-if=\"hasRowActions\" />\n            </TableRow>\n          </TableFooter>\n        </Table>\n\n        <DataTablePagination :class=\"cn(insetLeft || 'pl-4', insetRight || 'pr-4')\" />\n\n        <DataTableEmpty\n          v-if=\"table.rows.length === 0\"\n          :title=\"emptyResultsMessage || messages.searchEmptyTitle\"\n          :description=\"emptyResultsDescription || messages.searchEmptyDescription\"\n          :icon=\"SearchIcon\"\n        >\n          <Button class=\"mt-6\" @click=\"clearSearch\"><XIcon class=\"w-4 h-4 mr-2\" /> {{ messages.clearSearch }}</Button>\n\n          <slot name=\"empty-results\" />\n        </DataTableEmpty>\n      </template>\n    </DataTableProvider>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { type DataTableValue } from \"./\";\nimport { createContext } from './internal'\nimport { createHeadingStyle, createRowStyle } from '.'\nimport { computed } from \"vue\";\nimport { cn } from \"@/lib/utils\";\nimport { SearchIcon, XIcon, TableIcon } from '@lucide/vue'\nimport { Button } from '@/registry/stacktrace/ui/Button'\nimport { Table, TableBody, TableCell, TableRow, TableHead, SelectableTableRow, RowSelect, Sorting, TableHeader, TableFooter, BulkSelect } from '@/registry/stacktrace/ui/Table'\nimport messages from './messages'\nimport DataTableCell from './DataTableCell.vue'\nimport DataTableProvider from './DataTableProvider.vue'\nimport DataTableRowActions from './DataTableRowActions.vue'\nimport DataTableBulkActions from './DataTableBulkActions.vue'\nimport DataTableSearch from './DataTableSearch.vue'\nimport DataTableClearSelectionButton from './DataTableClearSelectionButton.vue'\nimport DataTableViewSettings from './DataTableViewSettings.vue'\nimport DataTableFilter from './DataTableFilter.vue'\nimport DataTablePagination from './DataTablePagination.vue'\nimport DataTableEmpty from './DataTableEmpty.vue'\n\nconst emit = defineEmits() // eslint-disable-line vue/valid-define-emits\n\nconst props = defineProps<{\n  table: DataTableValue\n  emptyTableMessage?: string | null | undefined\n  emptyTableDescription?: string | null | undefined\n  emptyResultsMessage?: string | null | undefined\n  emptyResultsDescription?: string | null | undefined\n  borderless?: boolean\n  insetLeft?: string | undefined\n  insetRight?: string | undefined\n}>()\n\nconst context = createContext(computed(() => props.table))\n\nconst {\n  rows,\n  headings,\n\n  clearSearch,\n  sortFilter,\n\n  shouldShowCheckboxForRow,\n  selectableRows,\n  somethingSelected,\n\n  hasRowActions,\n  hasBulkActions,\n} = context\n\n// Called when either row action or bulk action is triggered.\nconst onEvent = (name: string, selection: Array<number | string>) => {\n  emit(name, selection)\n}\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "DataTable/DataTableActionButton.vue",
          "content": "<template>\n  <template v-if=\"action.canRun\">\n    <template v-if=\"action.type === 'Event'\">\n      <Button :class=\"{ 'px-2': !bulk }\" size=\"sm\" :variant=\"bulk ? 'default' : 'ghost'\" @click=\"emit('event', action.event)\">{{ action.label }}</Button>\n    </template>\n    <template v-else-if=\"action.type === 'Link'\">\n      <ButtonLink :class=\"{ 'px-2': !bulk }\" size=\"sm\" :variant=\"bulk ? 'default' : 'ghost'\" :as=\"action.isExternal ? 'a' : undefined\" :href=\"action.url\">{{ action.label }}</ButtonLink>\n    </template>\n    <template v-else-if=\"action.type === 'Executable'\">\n      <Button :class=\"{ 'px-2': !bulk }\" size=\"sm\" :variant=\"bulk ? 'default' : 'ghost'\" @click=\"run(action, selection)\">\n        <ButtonState :processing=\"isRunning\">\n          <DataTableIcon class=\"w-4 h-4\" v-if=\"action.icon\" :src=\"action.icon.src\" />\n          {{ action.label }}\n        </ButtonState>\n      </Button>\n    </template>\n  </template>\n</template>\n\n<script setup lang=\"ts\" generic=\"ResourceKey = string | number\">\nimport { Button, ButtonLink, ButtonState } from '@/registry/stacktrace/ui/Button'\nimport DataTableIcon from './DataTableIcon.vue'\nimport { type Action, useActionRunner } from './internal'\n\nconst emit = defineEmits(['event'])\n\nwithDefaults(defineProps<{\n  action: Action\n  selection: Array<ResourceKey>\n  bulk?: boolean\n}>(), {\n  bulk: false,\n})\n\nconst { run, isRunning } = useActionRunner<ResourceKey>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "DataTable/DataTableActionDialog.vue",
          "content": "<template>\n  <Dialog :control=\"control\">\n    <DialogContent>\n      <DialogHeader>\n        <DialogTitle>{{ action.title }}</DialogTitle>\n        <DialogDescription>{{ action.description }}</DialogDescription>\n      </DialogHeader>\n      <DialogFooter>\n        <Button @click=\"control.deactivate\" variant=\"outline\">{{ action.cancelLabel }}</Button>\n        <Button\n          :variant=\"action.isDestructive ? 'destructive' : 'default'\"\n          @click=\"runAction\"\n        >\n          <ButtonState :processing=\"isRunning\">\n            {{ action.confirmLabel }}\n          </ButtonState>\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n\n<script setup lang=\"ts\" generic=\"ResourceKey = string | number\">\nimport { Button, ButtonState } from '@/registry/stacktrace/ui/Button'\nimport { type ExecutableAction, useActionRunner } from './internal'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle\n} from '@/registry/stacktrace/ui/Dialog'\nimport { type Toggle } from '@stacktrace/ui'\n\nconst props = defineProps<{\n  control: Toggle\n  action: ExecutableAction\n  selection: Array<ResourceKey>\n}>()\n\nconst { run, isRunning } = useActionRunner<ResourceKey>()\n\nconst runAction = () => {\n  run(props.action, props.selection, {\n    onSuccess: () => {\n      props.control.deactivate()\n    }\n  })\n}\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "DataTable/DataTableActionDropdownMenuItem.vue",
          "content": "<template>\n  <template v-if=\"action.canRun\">\n    <template v-if=\"action.type === 'Event'\">\n      <DropdownMenuItem @select=\"emit('event', action.event)\">{{ action.label }}</DropdownMenuItem>\n    </template>\n    <template v-else-if=\"action.type === 'Link'\">\n      <DropdownMenuItem as-child>\n        <component class=\"w-full\" :is=\"action.isExternal ? 'a' : Link\" :href=\"action.url\">{{ action.label }}</component>\n      </DropdownMenuItem>\n    </template>\n    <template v-else-if=\"action.type === 'Executable'\">\n      <DropdownMenuItem @select=\"emit('exec', action)\">{{ action.label }}</DropdownMenuItem>\n    </template>\n  </template>\n</template>\n\n<script setup lang=\"ts\" generic=\"ResourceKey = string | number\">\nimport { DropdownMenuItem } from '@/registry/stacktrace/ui/DropdownMenu'\nimport { Link } from '@inertiajs/vue3'\nimport { type Action } from './internal'\n\nconst emit = defineEmits(['event', 'exec'])\n\ndefineProps<{\n  action: Action\n  selection: Array<ResourceKey>\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "DataTable/DataTableBulkActions.vue",
          "content": "<template>\n  <template v-if=\"showBulkActions\">\n    <DataTableActionButton\n      v-for=\"action in inlineActions\"\n      :action=\"action\"\n      :selection=\"selection\"\n      @event=\"onEvent\"\n    />\n\n    <DropdownMenu v-if=\"menuActions.length > 0\">\n      <DropdownMenuTrigger as-child>\n        <Button size=\"sm\"><ChevronDownIcon class=\"w-4 h-4 mr-1\" /> {{ messages.actions }}</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" class=\"min-w-48\">\n        <DataTableActionDropdownMenuItem\n          v-for=\"action in menuActions\"\n          :action=\"action\"\n          :selection=\"selection\"\n          @event=\"onEvent\"\n          @exec=\"onExecAction\"\n        />\n      </DropdownMenuContent>\n    </DropdownMenu>\n  </template>\n\n  <DataTableActionDialog\n    v-if=\"actionToRun\"\n    :control=\"actionDialog\"\n    :action=\"actionToRun\"\n    :selection=\"selection\"\n  />\n</template>\n\n<script setup lang=\"ts\" generic=\"ResourceKey = string | number\">\nimport { Button } from '@/registry/stacktrace/ui/Button'\nimport messages from './messages'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@/registry/stacktrace/ui/DropdownMenu'\nimport { useToggle } from '@stacktrace/ui'\nimport { ChevronDownIcon } from '@lucide/vue'\nimport { computed, ref } from 'vue'\nimport { type ExecutableAction, injectContext, useActionRunner } from './internal'\nimport DataTableActionDropdownMenuItem from './DataTableActionDropdownMenuItem.vue'\nimport DataTableActionButton from './DataTableActionButton.vue'\nimport DataTableActionDialog from './DataTableActionDialog.vue'\n\nconst emit = defineEmits(['event'])\n\nconst { showBulkActions, selectableRows, bulkActions } = injectContext()\n\nconst selection = computed(() => selectableRows.selection.value as Array<ResourceKey>)\n\nconst onEvent = (event: string) => {\n  emit('event', { name: event, selection: [...selection.value] })\n}\n\nconst { run } = useActionRunner<ResourceKey>()\nconst actionToRun = ref<ExecutableAction>()\nconst actionDialog = useToggle()\nconst onExecAction = (action: ExecutableAction) => {\n  if (action.isInline) {\n    run(action, [...selection.value])\n    return\n  } else {\n    actionToRun.value = action\n    actionDialog.activate()\n  }\n}\n\nconst inlineActions = computed(() => bulkActions.value.filter(it => it.canRun && it.isInline && it.isBulk))\nconst menuActions = computed(() => bulkActions.value.filter(it => it.canRun && !it.isInline && it.isBulk))\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "DataTable/DataTableCell.vue",
          "content": "<template>\n  <TableCell\n    :class=\"cn(createCellStyle(cell.style), $attrs.class || '')\"\n    :style=\"{\n      width: cell.width || undefined,\n      minWidth: cell.minWidth || undefined,\n      maxWidth: cell.maxWidth || undefined,\n    }\"\n  >\n    <Primitive v-if=\"cell.link\" :as=\"cell.link.isExternal ? 'a' : Link\" :href=\"cell.link.url\">\n      <component :is=\"cell.component\" v-bind=\"cell.props\" />\n    </Primitive>\n    <component v-else :is=\"cell.component\" v-bind=\"cell.props\" />\n  </TableCell>\n</template>\n\n<script setup lang=\"ts\">\nimport { type Cell } from './internal'\nimport { cn } from \"@/lib/utils\";\nimport { Link } from \"@inertiajs/vue3\";\nimport { Primitive } from \"reka-ui\";\nimport { TableCell } from \"@/registry/stacktrace/ui/Table\";\nimport { createCellStyle } from '.'\n\ndefineProps<{\n  cell: Cell\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "DataTable/DataTableClearSelectionButton.vue",
          "content": "<template>\n  <Button v-if=\"somethingSelected\" @click=\"selectableRows.clearSelection()\" size=\"sm\" variant=\"outline\">\n    <XIcon class=\"w-4 h-4 mr-1\" />\n    {{ messages.cancelSelection }}\n  </Button>\n</template>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/stacktrace/ui/Button'\nimport { injectContext } from './internal'\nimport messages from './messages'\nimport { XIcon } from '@lucide/vue'\n\nconst { somethingSelected, selectableRows } = injectContext()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "DataTable/DataTableEmpty.vue",
          "content": "<template>\n  <div :class=\"cn('overflow-hidden flex items-center flex-col', $attrs.class || '')\">\n    <div class=\"flex flex-col max-w-sm items-center relative pt-12 pb-12\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 480 480\" class=\"text-foreground/10 h-[520px] -translate-y-2/3 absolute\">\n        <mask id=\"c\" width=\"480\" height=\"480\" x=\"0\" y=\"0\" maskUnits=\"userSpaceOnUse\" style=\"mask-type:alpha\"><path fill=\"url(#a)\" d=\"M0 0h480v480H0z\"/></mask>\n        <g stroke=\"currentColor\" clip-path=\"url(#b)\" mask=\"url(#c)\">\n          <g clip-path=\"url(#d)\"><path d=\"M.5 0v480m32-480v480m32-480v480m32-480v480m32-480v480m32-480v480m32-480v480m32-480v480m32-480v480m32-480v480m32-480v480m32-480v480m32-480v480m32-480v480m32-480v480\"/></g>\n          <path d=\"M.5.5h479v479H.5z\"/>\n          <g clip-path=\"url(#e)\"><path d=\"M0 31.5h480M0 63.5h480M0 95.5h480m-480 32h480m-480 32h480m-480 32h480m-480 32h480m-480 32h480m-480 32h480m-480 32h480m-480 32h480m-480 32h480m-480 32h480m-480 32h480m-480 32h480\"/></g>\n          <path d=\"M.5.5h479v479H.5z\"/>\n        </g>\n        <defs>\n          <clipPath id=\"b\"><path fill=\"#fff\" d=\"M0 0h480v480H0z\"/></clipPath>\n          <clipPath id=\"d\"><path fill=\"#fff\" d=\"M0 0h480v480H0z\"/></clipPath>\n          <clipPath id=\"e\"><path fill=\"#fff\" d=\"M0 0h480v480H0z\"/></clipPath>\n          <radialGradient id=\"a\" cx=\"0\" cy=\"0\" r=\"1\" gradientTransform=\"rotate(90 0 240) scale(240)\" gradientUnits=\"userSpaceOnUse\"><stop/><stop offset=\"1\" stop-opacity=\"0\"/></radialGradient>\n        </defs>\n      </svg>\n\n      <div v-if=\"icon\" class=\"w-16 h-16 rounded-full bg-muted text-foreground inline-flex items-center justify-center mb-8\">\n        <component :is=\"icon\" class=\"w-6 h-6\" />\n      </div>\n\n      <p class=\"font-semibold text-center\" v-if=\"title\">{{ title }}</p>\n      <p class=\"max-w-lg text-center text-muted-foreground text-sm mt-1\" v-if=\"description\">{{ description }}</p>\n\n      <slot />\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { type Component } from 'vue'\nimport { cn } from '@/lib/utils'\n\ndefineProps<{\n  title?: string\n  description?: string\n  icon?: Component\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "DataTable/DataTableFilter.vue",
          "content": "<template>\n  <div v-if=\"table.filter\" :class=\"cn('flex flex-row flex-wrap gap-2 items-center', $attrs.class || '')\">\n    <template v-for=\"widget in table.filter.widgets\">\n      <component\n        :is=\"widget.component\"\n        v-bind=\"widget.props\"\n        :filter=\"filter\"\n      />\n    </template>\n\n    <FilterResetButton :filter=\"filter\" />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { injectContext } from './internal'\nimport { FilterResetButton } from '@/registry/stacktrace/ui/Filter'\nimport { cn } from '@/lib/utils'\n\nconst { table, filter } = injectContext()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "DataTable/DataTableIcon.vue",
          "content": "<template>\n  <svg v-bind=\"attributes\" v-html=\"content\"></svg>\n</template>\n<script setup lang=\"ts\">\nimport { shallowRef, watch } from 'vue'\n\nconst props = defineProps<{\n  src: string\n}>()\n\nconst resolveAttributes = (element: HTMLElement): Record<string, string> => {\n  const attributes = element.attributes\n  const attributesObj: Record<string, string> = {}\n\n  for (let i = 0; i < attributes.length; i++) {\n    const attribute = attributes.item(i)\n\n    if (attribute) {\n      attributesObj[attribute.name] = attribute.value\n    }\n  }\n\n  return attributesObj;\n}\n\nconst parser = new DOMParser()\nconst element = parser.parseFromString(props.src, 'image/svg+xml').documentElement\n\nconst attributes = shallowRef(resolveAttributes(element))\nconst content = shallowRef(element.innerHTML)\n\nwatch(() => props.src, () => {\n  const element = parser.parseFromString(props.src, 'image/svg+xml').documentElement\n\n  attributes.value = resolveAttributes(element)\n  content.value = element.innerHTML\n})\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "DataTable/DataTablePagination.vue",
          "content": "<template>\n  <template v-if=\"table.rows.length > 0\">\n    <div :class=\"cn('border-t py-2 flex justify-between items-center w-full', $attrs.class || '')\" v-if=\"table.pagination\">\n      <span class=\"pr-2 text-sm font-semibold\"><span class=\"text-foreground/60 font-normal\">{{ messages.paginatorTotal }}</span> {{ table.pagination.total }}</span>\n\n      <div class=\"flex flex-row gap-2 items-center\">\n        <Button class=\"px-2\" :as=\"table.pagination.firstPageUrl ? Link : undefined\" :disabled=\"!table.pagination.firstPageUrl\" :href=\"table.pagination.firstPageUrl || undefined\" variant=\"outline\">\n          <ChevronsLeftIcon class=\"w-4 h-4\" />\n        </Button>\n        <Button class=\"px-2\" :as=\"table.pagination.prevPageUrl ? Link : undefined\" :disabled=\"!table.pagination.prevPageUrl\" :href=\"table.pagination.prevPageUrl || undefined\" variant=\"outline\">\n          <ChevronLeftIcon class=\"w-4 h-4\" />\n        </Button>\n        <span class=\"px-2 text-sm font-semibold\">{{ table.pagination.currentPage }} <span class=\"text-foreground/60 font-normal\">{{ messages.paginatorOf }}</span> {{ table.pagination.lastPage }}</span>\n        <Button class=\"px-2\" :as=\"table.pagination.nextPageUrl ? Link : undefined\" :disabled=\"!table.pagination.nextPageUrl\" :href=\"table.pagination.nextPageUrl || undefined\" variant=\"outline\">\n          <ChevronRightIcon class=\"w-4 h-4\" />\n        </Button>\n        <Button class=\"px-2\" :as=\"table.pagination.lastPageUrl ? Link : undefined\" :disabled=\"!table.pagination.lastPageUrl\" :href=\"table.pagination.lastPageUrl || undefined\" variant=\"outline\">\n          <ChevronsRightIcon class=\"w-4 h-4\" />\n        </Button>\n      </div>\n    </div>\n    <div v-else-if=\"table.cursorPagination\" :class=\"cn('border-t py-2 flex justify-end items-center w-full', $attrs.class || '')\">\n      <div class=\"flex flex-row gap-2 items-center\">\n        <Button class=\"px-2 inline-flex gap-2\" :as=\"table.cursorPagination.prevPageUrl ? Link : undefined\" :disabled=\"!table.cursorPagination.prevPageUrl\" :href=\"table.cursorPagination.prevPageUrl || undefined\" variant=\"outline\">\n          <ChevronLeftIcon class=\"w-4 h-4\" />\n          {{ messages.paginatorPrevious }}\n        </Button>\n        <Button class=\"px-2 inline-flex gap-2\" :as=\"table.cursorPagination.nextPageUrl ? Link : undefined\" :disabled=\"!table.cursorPagination.nextPageUrl\" :href=\"table.cursorPagination.nextPageUrl || undefined\" variant=\"outline\">\n          {{ messages.paginatorNext }}\n          <ChevronRightIcon class=\"w-4 h-4\" />\n        </Button>\n      </div>\n    </div>\n  </template>\n</template>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/stacktrace/ui/Button'\nimport { injectContext } from './internal'\nimport messages from './messages'\nimport { cn } from '@/lib/utils'\nimport { Link } from '@inertiajs/vue3'\nimport { ChevronLeftIcon, ChevronRightIcon, ChevronsLeftIcon, ChevronsRightIcon } from '@lucide/vue'\n\nconst { table } = injectContext()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "DataTable/DataTableProvider.vue",
          "content": "<template>\n  <slot />\n</template>\n\n<script setup lang=\"ts\">\nimport { type Context, provideContext } from './internal'\n\nconst props = defineProps<{\n  context: Context\n}>()\nprovideContext(props.context)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "DataTable/DataTableResourceActions.vue",
          "content": "<template>\n  <DropdownMenu v-if=\"runnableActions.length > 0 || visible\">\n    <DropdownMenuTrigger>\n      <Button :variant=\"variant\" :size=\"size\" :class=\"cn('px-2 data-[state=open]:bg-muted', $attrs.class || '')\">\n        <EllipsisIcon data-icon=\"inline-start\" />\n        <template v-if=\"label\">{{ label }}</template>\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent :align=\"align\">\n      <slot :resource=\"actions.resource\" :runnable-actions=\"runnableActions\" />\n\n      <DataTableActionDropdownMenuItem\n        v-for=\"action in runnableActions\"\n        :action=\"action\"\n        :selection=\"[actions.resource.key]\"\n        @event=\"onEvent\"\n        @exec=\"onExecAction\"\n      />\n    </DropdownMenuContent>\n  </DropdownMenu>\n\n  <DataTableActionDialog\n    v-if=\"actionToRun\"\n    :control=\"actionDialog\"\n    :selection=\"[actions.resource.key]\"\n    :action=\"actionToRun\"\n  />\n</template>\n\n<script setup lang=\"ts\" generic=\"ResourceKey = string | number, ResourceValue = object\">\nimport { Button, type ButtonVariants } from '@/registry/stacktrace/ui/Button'\nimport DataTableActionDropdownMenuItem from './DataTableActionDropdownMenuItem.vue'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@/registry/stacktrace/ui/DropdownMenu'\nimport { cn } from '@/lib/utils'\nimport { useToggle } from '@stacktrace/ui'\nimport { EllipsisIcon } from '@lucide/vue'\nimport { computed, ref } from 'vue'\nimport { type DataTableResourceActionsValue } from '.'\nimport DataTableActionDialog from './DataTableActionDialog.vue'\nimport { type ExecutableAction, useActionRunner } from './internal'\n\nconst emit = defineEmits() // eslint-disable-line vue/valid-define-emits\n\nconst props = withDefaults(defineProps<{\n  actions: DataTableResourceActionsValue<ResourceKey, ResourceValue>\n  size?: ButtonVariants['size']\n  variant?: ButtonVariants['variant']\n  visible?: boolean\n  align?: 'center' | 'end' | 'start'\n  label?: string | undefined\n}>(), {\n  size: 'sm',\n  variant: 'ghost',\n  visible: false,\n  align: 'end'\n})\n\nconst runnableActions = computed(() => props.actions.actions.filter(it => it.canRun))\n\nconst onEvent = (event: string) => {\n  emit(event, [props.actions.resource.key])\n}\n\nconst { run } = useActionRunner<ResourceKey>()\nconst actionToRun = ref<ExecutableAction>()\nconst actionDialog = useToggle()\nconst onExecAction = (action: ExecutableAction) => {\n  if (action.isInline) {\n    run(action, [props.actions.resource.key])\n    return\n  } else {\n    actionToRun.value = action\n    actionDialog.activate()\n  }\n}\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "DataTable/DataTableRowActions.vue",
          "content": "<template>\n  <div class=\"flex flex-row justify-end gap-1\" v-if=\"inlineActions.length > 0 || menuActions.length > 0\">\n    <DataTableActionButton\n      v-for=\"action in inlineActions\"\n      :action=\"action\"\n      :selection=\"selection\"\n      @event=\"onEvent\"\n    />\n\n    <DropdownMenu v-if=\"menuActions.length > 0\">\n      <DropdownMenuTrigger as-child>\n        <Button variant=\"ghost\" class=\"px-2 data-[state=open]:bg-muted\" size=\"sm\"><EllipsisIcon class=\"w-4 h-4\" /></Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" class=\"min-w-48\">\n        <DataTableActionDropdownMenuItem\n          v-for=\"action in menuActions\"\n          :action=\"action\"\n          :selection=\"selection\"\n          @event=\"onEvent\"\n          @exec=\"onExecAction\"\n        />\n      </DropdownMenuContent>\n    </DropdownMenu>\n\n    <DataTableActionDialog\n      v-if=\"actionToRun\"\n      :control=\"actionDialog\"\n      :action=\"actionToRun\"\n      :selection=\"selection\"\n    />\n  </div>\n</template>\n\n<script setup lang=\"ts\" generic=\"ResourceKey = string | number, ResourceValue = object\">\nimport { Button } from '@/registry/stacktrace/ui/Button'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@/registry/stacktrace/ui/DropdownMenu'\nimport { useToggle } from '@stacktrace/ui'\nimport { EllipsisIcon } from '@lucide/vue'\nimport { computed, ref } from 'vue'\nimport { type ExecutableAction, type Row, useActionRunner } from './internal'\nimport DataTableActionDropdownMenuItem from './DataTableActionDropdownMenuItem.vue'\nimport DataTableActionButton from './DataTableActionButton.vue'\nimport DataTableActionDialog from './DataTableActionDialog.vue'\n\nconst emit = defineEmits(['event'])\n\nconst props = defineProps<{\n  row: Row<ResourceKey, ResourceValue>\n}>()\n\nconst onEvent = (event: string) => {\n  emit('event', { name: event, selection: [props.row.key] })\n}\n\nconst { run } = useActionRunner<ResourceKey>()\nconst actionToRun = ref<ExecutableAction>()\nconst actionDialog = useToggle()\nconst onExecAction = (action: ExecutableAction) => {\n  if (action.isInline) {\n    run(action, [props.row.key])\n    return\n  } else {\n    actionToRun.value = action\n    actionDialog.activate()\n  }\n}\n\nconst selection = computed(() => [props.row.key])\nconst inlineActions = computed(() => props.row.actions.filter(it => it.isInline && it.canRun))\nconst menuActions = computed(() => props.row.actions.filter(it => !it.isInline && it.canRun))\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "DataTable/DataTableSearch.vue",
          "content": "<template>\n  <div class=\"relative\" v-if=\"isSearchable\">\n    <SearchIcon class=\"w-4 h-4 absolute left-2 top-2 text-muted-foreground\" />\n    <DebouncedInput :debounce=\"50\" v-model=\"searchFilter.search\" class=\"h-8 w-[250px] pl-8 pr-8\" :placeholder=\"messages.searchPlaceholder\" />\n    <button v-if=\"searchFilter.applied\" @click.prevent=\"searchFilter.reset()\" class=\"absolute right-2 top-2.5 text-muted-foreground hover:text-destructive transition-colors\">\n      <CircleXIcon class=\"w-3 h-3\" />\n    </button>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { injectContext } from './internal'\nimport messages from './messages'\nimport { DebouncedInput } from '@/registry/stacktrace/ui/Input'\nimport { CircleXIcon, SearchIcon } from '@lucide/vue'\n\nconst { searchFilter, isSearchable } = injectContext()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "DataTable/DataTableViewSettings.vue",
          "content": "<template>\n  <DropdownMenu v-if=\"hasPerPageSettings\">\n    <DropdownMenuTrigger as-child>\n      <Button variant=\"outline\" size=\"sm\"><SlidersHorizontalIcon class=\"w-4 h-4 mr-2\" /> {{ messages.viewOptions }}</Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent align=\"end\">\n      <template v-if=\"table.perPageOptions.length > 0\">\n        <DropdownMenuLabel>{{ messages.perPage }}</DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuCheckboxItem\n          v-for=\"option in table.perPageOptions\"\n          @select=\"setPerPage(option)\"\n          :model-value=\"`${paginationFilter.limit}` == `${option}` || (option == table.defaultPerPage && !paginationFilter.limit)\"\n        >{{ messages.perPageOption(option) }}</DropdownMenuCheckboxItem>\n      </template>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/stacktrace/ui/Button'\nimport messages from './messages'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger\n} from '@/registry/stacktrace/ui/DropdownMenu'\nimport { SlidersHorizontalIcon } from '@lucide/vue'\nimport { injectContext } from './internal'\n\nconst { hasPerPageSettings, setPerPage, table, paginationFilter } = injectContext()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "DataTable/Filters/Checkbox.vue",
          "content": "<template>\n  <FilterCheckbox :title=\"title\" v-model=\"filter[field]\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { type Filter } from '@stacktrace/ui'\nimport { FilterCheckbox } from \"@/registry/stacktrace/ui/Filter\";\n\ndefineProps<{\n  title: string\n  field: string\n  filter: Filter<any>\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "DataTable/Filters/DateRange.vue",
          "content": "<template>\n  <FilterDateRange :title=\"title\" v-model:from=\"filter[fieldFrom]\" v-model:until=\"filter[fieldUntil]\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { type Filter } from '@stacktrace/ui'\nimport { FilterDateRange } from \"@/registry/stacktrace/ui/Filter\";\n\ndefineProps<{\n  title: string\n  fieldFrom: string\n  fieldUntil: string\n  filter: Filter<any>\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "DataTable/Filters/MultiSelect.vue",
          "content": "<template>\n  <FilterMultiSelect :title=\"title\" :options=\"options\" v-model=\"filter[field]\" />\n</template>\n\n<script setup lang=\"ts\">\nimport type { Filter, SelectOption } from '@stacktrace/ui'\nimport { FilterMultiSelect } from \"@/registry/stacktrace/ui/Filter\";\n\ndefineProps<{\n  title: string\n  field: string\n  filter: Filter<any>\n  options: Array<SelectOption>\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "DataTable/Filters/NumberValue.vue",
          "content": "<template>\n  <FilterNumberInput :title=\"title\" v-model=\"filter[field]\" />\n</template>\n\n<script setup lang=\"ts\">\nimport type { Filter } from '@stacktrace/ui'\nimport { FilterNumberInput } from \"@/registry/stacktrace/ui/Filter\";\n\ndefineProps<{\n  title: string\n  field: string\n  filter: Filter<any>\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "DataTable/index.ts",
          "content": "import { registerNamespacedComponents } from \"@stacktrace/ui\";\nimport type { DefineComponent, Plugin } from \"vue\";\nimport { type TextStyle, configureStyle } from './internal'\n\nexport { default as DataTable } from './DataTable.vue'\nexport { default as DataTableResourceActions } from './DataTableResourceActions.vue'\n\nexport type { DataTableValue, DataTableResourceActionsValue } from './internal'\n\nexport const DataTablePlugin: Plugin = {\n  install: app => {\n    const columns = import.meta.glob<DefineComponent>('./Columns/**/*.vue', { eager: true })\n    registerNamespacedComponents(app, columns, 'DataTable')\n\n    const filters = import.meta.glob<DefineComponent>('./Filters/**/*.vue', { eager: true })\n    registerNamespacedComponents(app, filters, 'DataTable')\n  }\n}\n\nexport type TableRowStyleProperty = 'highlight'\nexport type TableRowStyle = Record<TableRowStyleProperty | string, string | null>\n\nexport const createRowStyle = (style: TableRowStyle) => configureStyle(style, {\n  highlight: {\n    default: 'hover:bg-muted/50 data-[state=selected]:bg-muted',\n    muted: 'bg-muted/20 text-muted-foreground hover:bg-muted/50 data-[state=selected]:bg-muted',\n    destructive: 'bg-destructive/10 text-destructive hover:bg-destructive/20 data-[state=selected]:bg-destructive/30',\n  }\n})\n\nexport const createCellStyle = (style: TextStyle) => configureStyle(style, {\n  fontWeight: {\n    thin: 'font-thin',\n    extralight: 'font-extralight',\n    light: 'font-light',\n    normal: 'font-normal',\n    medium: 'font-medium',\n    semibold: 'font-semibold',\n    bold: 'font-bold',\n    extrabold: 'font-extrabold',\n    black: 'font-black',\n  },\n  fontFamily: {\n    sans: 'font-sans',\n    serif: 'font-serif',\n    mono: 'font-mono',\n  },\n  whitespace: {\n    normal: 'whitespace-normal',\n    nowrap: 'whitespace-nowrap',\n    pre: 'whitespace-pre',\n    preLine: 'whitespace-pre-line',\n    preWrap: 'whitespace-pre-wrap',\n    breakSpaces: 'whitespace-break-spaces',\n  },\n  fontVariantNumeric: {\n    normal: 'normal-nums',\n    ordinal: 'ordinal',\n    slashedZero: 'slashed-zero',\n    lining: 'lining-nums',\n    oldStyle: 'oldstyle-nums',\n    proportional: 'proportional-nums',\n    tabular: 'tabular-nums',\n    diagonalFractions: 'diagonal-fractions',\n    stackedFractions: 'stacked-fractions',\n  },\n  textDecorationLine: {\n    underline: 'underline',\n    overline: 'overline',\n    lineThrough: 'line-through',\n    noUnderline: 'no-underline',\n  },\n  verticalAlign: {\n    baseline: 'align-baseline',\n    top: 'align-top',\n    middle: 'align-middle',\n    bottom: 'align-bottom',\n    textTop: 'align-text-top',\n    textBottom: 'align-text-bottom',\n    sub: 'align-sub',\n    super: 'align-super',\n  },\n  textAlign: {\n    left: 'text-left',\n    center: 'text-center',\n    right: 'text-right',\n    justify: 'text-justify',\n    start: 'text-start',\n    end: 'text-end',\n  },\n  fontStyle: {\n    italic: 'italic',\n    notItalic: 'not-italic',\n  },\n  color: {\n    foreground: 'text-foreground',\n    muted: 'text-muted-foreground',\n  },\n})\n\nexport const createHeadingStyle = createCellStyle\n",
          "type": "registry:ui"
        },
        {
          "path": "DataTable/internal.ts",
          "content": "import { useSelectableRows } from '@/registry/stacktrace/ui/Table'\nimport { router, useForm, usePage } from '@inertiajs/vue3'\nimport { useFilter } from '@stacktrace/ui'\nimport { computed, type ComputedRef, inject, provide, toRaw } from 'vue'\n\nexport interface BaseAction {\n  name: string\n  label: string | null\n  canRun: boolean\n  isBulk: boolean\n  icon: { src: string } | null\n  isInline: boolean\n}\n\nexport interface EventAction extends BaseAction {\n  type: 'Event'\n  event: string\n}\n\nexport interface LinkAction extends BaseAction {\n  type: 'Link'\n  url: string\n  isExternal: boolean\n}\n\nexport interface ExecutableAction extends BaseAction {\n  type: 'Executable'\n  confirmable: boolean\n  title: string | null\n  description: string | null\n  cancelLabel: string\n  confirmLabel: string\n  action: string\n  isDestructive: boolean\n  args: string\n}\n\nexport type Action = EventAction | LinkAction | ExecutableAction\n\nexport interface Resource<K = string | number, V = object> {\n  key: K\n  value: V | null\n}\n\nexport interface DataTableResourceActionsValue<ResourceKey = string | number, ResourceValue = object> {\n  actions: Array<Action>\n  resource: Resource<ResourceKey, ResourceValue>\n}\n\nexport type TextStyleProperty = 'fontWeight' | 'fontFamily' | 'whitespace'\n  | 'fontVariantNumeric' | 'textDecorationLine' | 'textAlign' | 'fontStyle' | 'color'\n\nexport type TextStyle = Record<TextStyleProperty | string, string | null>\n\nexport interface Cell {\n  column: string\n  component: string\n  props: Record<string, any>\n  width: string | null\n  minWidth: string | null\n  maxWidth: string | null\n  style: TextStyle\n  link: {\n    url: string\n    isExternal: boolean\n  } | null\n}\n\nexport interface Row<ResourceKey = string | number, ResourceValue = object> {\n  key: ResourceKey\n  cells: Array<Cell>\n  actions: Array<Action>\n  resource: ResourceValue | null\n  highlightAs: string | null\n}\n\nexport interface CursorPagination {\n  prevPageUrl: string | null\n  nextPageUrl: string | null\n}\n\nexport interface Pagination {\n  currentPage: number\n  lastPage: number\n  total: number\n  prevPageUrl: string | null\n  nextPageUrl: string | null\n  firstPageUrl: string | null\n  lastPageUrl: string | null\n}\n\nexport interface Filter {\n  defaultValue: Record<string, any>\n  widgets: Array<{\n    component: string\n    props: Record<string, any>\n  }>\n}\n\nexport interface DataTableValue<ResourceValue = object, ResourceKey = string | number> {\n  headings: Array<{\n    id: string\n    name: string\n    width: string | null\n    minWidth: string | null\n    maxWidth: string | null\n    style: TextStyle\n    sortableAs: string | null\n  }>\n  rows: Array<Row<ResourceKey, ResourceValue>>\n  footerCells: Array<Cell | null>\n  perPageOptions: Array<number>\n  perPage: number\n  defaultPerPage: number\n  pagination: Pagination | null\n  cursorPagination: CursorPagination | null\n  isSearchable: boolean\n  filter: Filter | null\n  isEmpty: boolean\n}\n\nexport const createContext = (table: ComputedRef<DataTableValue>) => {\n  const rows = computed(() => table.value.rows)\n  const headings = computed(() => table.value.headings)\n\n  const shouldShowCheckboxForRow = (row: Row) => row.actions.some(it => it.isBulk && it.canRun)\n  const selectableRows = useSelectableRows(\n    computed(() => rows.value.map(it => it.key)),\n    computed(() => rows.value.filter(row => !shouldShowCheckboxForRow(row)).map(it => it.key))\n  )\n  const somethingSelected = computed(() => selectableRows.somethingSelected.value)\n  const selectedRows = computed(() => table.value.rows.filter(row => selectableRows.selection.value.includes(row.key)))\n\n  // Bulk actions\n  // Determine whether some row with actions is in the table.\n  const hasRowActions = computed(() => table.value.rows.some(it => it.actions.filter(it => it.canRun).length > 0))\n  // Determine whether some row has bulk actions.\n  const hasBulkActions = computed(() => table.value.rows.some(it => it.actions.filter(it => it.canRun && it.isBulk).length > 0))\n  const showBulkActions = computed(() => somethingSelected.value)\n  const bulkActions = computed<Array<Action>>(() => {\n    const actions: Record<string, Action> = {}\n\n    selectedRows.value.flatMap(it => it.actions.filter(action => action.canRun && action.isBulk)).forEach(action => {\n      if (!actions.hasOwnProperty(action.name)) {\n        actions[action.name] = action\n      }\n    })\n\n    return Object.values(actions)\n  })\n\n  // Filter\n  const page = usePage()\n  const searchFilter = useFilter(() => ({\n    search: '',\n  }))\n  const clearSearch = () => {\n    router.visit(page.url.replace(/\\?.*$/, ''))\n  }\n  const filter = useFilter(() => table.value.filter?.defaultValue || {})\n  const sortFilter = useFilter(() => ({\n    sort_by: null,\n    sort_direction: null,\n  }))\n  const paginationFilter = useFilter(() => ({\n    limit: table.value.defaultPerPage,\n  }))\n  const setPerPage = (limit: number) => {\n    paginationFilter.limit = limit\n  }\n  const hasPerPageSettings = computed(() => (table.value.pagination || table.value.cursorPagination) && table.value.perPageOptions.length > 0)\n\n  const isSearchable = computed(() => table.value.isSearchable)\n\n  return {\n    table,\n    rows,\n    headings,\n\n    // Filter\n    clearSearch,\n    searchFilter,\n    filter,\n    sortFilter,\n    paginationFilter,\n    setPerPage,\n    hasPerPageSettings,\n    isSearchable,\n\n    // Bulk selection\n    hasRowActions,\n    hasBulkActions,\n    showBulkActions,\n\n    // Selectable rows\n    selectableRows,\n    selectedRows,\n    shouldShowCheckboxForRow,\n    somethingSelected,\n    bulkActions,\n  }\n}\n\nexport type Context = ReturnType<typeof createContext>\n\nexport const provideContext = (context: Context) => {\n  provide('DataTableContext', context)\n}\n\nexport const injectContext = () => inject<Context>('DataTableContext')!\n\ninterface ActionRunnerOptions {\n  onSuccess: () => void\n  onError: () => void\n  onFinish: () => void\n}\n\nexport function useActionRunner<ResourceKey = string | number>() {\n  const form = useForm({})\n\n  const run = (action: ExecutableAction, selection: Array<ResourceKey>, options?: Partial<ActionRunnerOptions>) => {\n    form.transform(() => ({\n      selection: toRaw(selection),\n      action: action.action,\n      args: action.args,\n    })).post(route('ui.data-table-action'), {\n      preserveScroll: true,\n      onSuccess: () => {\n        const callback = options?.onSuccess\n        if (callback) {\n          callback()\n        }\n      },\n      onError: () => {\n        const callback = options?.onError\n        if (callback) {\n          callback()\n        }\n      },\n      onFinish: () => {\n        const callback = options?.onFinish\n        if (callback) {\n          callback()\n        }\n      }\n    })\n  }\n\n  return {\n    isRunning: computed(() => form.processing),\n    run,\n  }\n}\n\nexport function configureStyle<T extends Record<string, string | null>>(\n  style: T,\n  mapping: Record<keyof T, Record<string, string>>,\n): string {\n  const tokens: Array<string> = []\n\n  Object.keys(style).forEach(key => {\n    const styleValue = style[key]\n    const styleConfig = mapping[key]\n\n    if (styleValue && styleConfig?.[styleValue]) {\n      tokens.push(styleConfig[styleValue])\n    }\n  })\n\n  return tokens.join(' ')\n}\n",
          "type": "registry:ui"
        },
        {
          "path": "DataTable/messages.ts",
          "content": "export default {\n  searchPlaceholder: 'Search…',\n  emptyTableTitle: 'Nothing to see there.',\n  emptyTableDescription: 'The table is empty.',\n  selectedRows: (selected: number, total: number) => `Selected ${selected} of ${total}`,\n  actions: 'Actions',\n  cancelSelection: 'Cancel selection',\n  viewOptions: 'View options',\n  perPage: 'Per page',\n  perPageOption: (value: number) => `${value} results`,\n  paginatorTotal: 'Total',\n  paginatorOf: 'of',\n  paginatorPrevious: 'Previous',\n  paginatorNext: 'Next',\n  searchEmptyTitle: 'No records found.',\n  searchEmptyDescription: 'Try to adjust your search criteria.',\n  clearSearch: 'Clear Search',\n}\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "date-input",
      "type": "registry:ui",
      "title": "Date Input",
      "description": "Date Input components for StackTrace UI.",
      "dependencies": [
        "@internationalized/date",
        "@lucide/vue",
        "reka-ui"
      ],
      "registryDependencies": [
        "@stacktrace/button"
      ],
      "files": [
        {
          "path": "DateInput/DateInput.vue",
          "content": "<template>\n  <DatePickerRoot v-model=\"date\">\n    <DatePickerField v-slot=\"{ segments }\" >\n      <DatePickerTrigger as-child>\n        <Button\n          variant=\"outline\"\n          :class=\"cn(\n            'w-full justify-start text-left font-normal',\n            $attrs.class || ''\n          )\"\n        >\n          <CalendarIcon class=\"w-4 h-4\" />\n\n          <div class=\"inline-flex select-none items-center hover:cursor-text text-sm\" @click.stop>\n            <template v-for=\"item in segments\" :key=\"item.part\">\n              <DatePickerInput\n                v-if=\"item.part === 'literal'\"\n                :part=\"item.part\"\n              >\n                {{ item.value }}\n              </DatePickerInput>\n              <DatePickerInput\n                v-else\n                :part=\"item.part\"\n                class=\"rounded transition-[color,box-shadow] focus:outline-none focus:border-ring focus:ring-ring/50 focus:ring-3 border border-transparent focus:border-input data-[placeholder]:text-muted-foreground selection:bg-primary selection:text-primary-foreground\"\n              >\n                {{ item.value }}\n              </DatePickerInput>\n            </template>\n          </div>\n        </Button>\n      </DatePickerTrigger>\n    </DatePickerField>\n\n    <DatePickerContent\n      :portal=\"{ to }\"\n      class=\"w-auto z-50 p-3 rounded-md border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\"\n      :side-offset=\"4\"\n    >\n      <DatePickerCalendar v-slot=\"{ weekDays, grid }\">\n        <DatePickerHeader class=\"flex justify-center pt-1 relative items-center w-full\">\n          <DatePickerPrev :class=\"cn(\n            buttonVariants({ variant: 'outline' }),\n            'absolute left-1',\n            'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n          )\">\n            <ChevronLeftIcon class=\"size-4\" />\n          </DatePickerPrev>\n\n          <DatePickerHeading class=\"text-sm font-medium\" />\n\n          <DatePickerNext :class=\"cn(\n            buttonVariants({ variant: 'outline' }),\n            'absolute right-1',\n            'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n          )\">\n            <ChevronRightIcon class=\"size-4\" />\n          </DatePickerNext>\n        </DatePickerHeader>\n\n        <div class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n          <DatePickerGrid v-for=\"month in grid\" :key=\"month.value.toString()\" class=\"w-full border-collapse space-x-1\">\n            <DatePickerGridHead>\n              <DatePickerGridRow class=\"flex\">\n                <DatePickerHeadCell v-for=\"day in weekDays\" :key=\"day\" class=\"text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]\">\n                  {{ day }}\n                </DatePickerHeadCell>\n              </DatePickerGridRow>\n            </DatePickerGridHead>\n            <DatePickerGridBody>\n              <DatePickerGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"flex mt-2 w-full\">\n                <DatePickerCell\n                  v-for=\"weekDate in weekDates\"\n                  :key=\"weekDate.toString()\"\n                  :date=\"weekDate\"\n                  class=\"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent\"\n                >\n                  <DatePickerCellTrigger\n                    :day=\"weekDate\"\n                    :month=\"month.value\"\n                    :class=\"cn(\n                      buttonVariants({ variant: 'ghost' }),\n                      'size-8 p-0 font-normal aria-selected:opacity-100 cursor-default',\n                      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n                      // Selected\n                      'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',\n                      // Disabled\n                      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n                      // Unavailable\n                      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n                      // Outside months\n                      'data-[outside-view]:text-muted-foreground',\n                    )\"\n                  />\n                </DatePickerCell>\n              </DatePickerGridRow>\n            </DatePickerGridBody>\n          </DatePickerGrid>\n        </div>\n      </DatePickerCalendar>\n    </DatePickerContent>\n  </DatePickerRoot>\n</template>\n\n<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { type DateValue, parseDate } from '@internationalized/date'\nimport { Calendar as CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from '@lucide/vue'\nimport { buttonVariants, Button } from '@/registry/stacktrace/ui/Button'\nimport {\n  DatePickerCalendar,\n  DatePickerCell,\n  DatePickerCellTrigger,\n  DatePickerContent,\n  DatePickerField,\n  DatePickerGrid,\n  DatePickerGridBody,\n  DatePickerGridHead,\n  DatePickerGridRow,\n  DatePickerHeadCell,\n  DatePickerHeader,\n  DatePickerHeading,\n  DatePickerInput,\n  DatePickerNext,\n  DatePickerPrev,\n  DatePickerRoot,\n  DatePickerTrigger,\n  type DatePickerRootProps\n} from 'reka-ui'\nimport { computed, type Ref, ref, watch } from 'vue'\n\nconst emit = defineEmits(['update:modelValue'])\n\ninterface Props {\n  modelValue?: string | null | undefined\n  to?: string\n}\n\nconst props = defineProps<Props & DatePickerRootProps>()\n\nconst date = ref(props.modelValue ? parseDate(props.modelValue) : undefined) as Ref<DateValue | undefined>\n\nwatch(date, newDate => {\n  const updatedValue = newDate?.toString() || undefined\n\n  if (updatedValue !== props.modelValue) {\n    emit('update:modelValue', updatedValue)\n  }\n})\n\nwatch(computed(() => props.modelValue), newModelValue => {\n  const currentDate = date.value?.toString() || undefined\n  const updatedDate = newModelValue || undefined\n\n  if (currentDate !== updatedDate) {\n    date.value = updatedDate ? (parseDate(updatedDate) as DateValue) : undefined\n  }\n})\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "DateInput/index.ts",
          "content": "export { default as DateInput } from './DateInput.vue'\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "date-picker",
      "type": "registry:ui",
      "title": "Date Picker",
      "description": "Date Picker components for StackTrace UI.",
      "dependencies": [
        "@internationalized/date",
        "@lucide/vue"
      ],
      "registryDependencies": [
        "@stacktrace/button",
        "@stacktrace/calendar",
        "@stacktrace/popover"
      ],
      "files": [
        {
          "path": "DatePicker/DatePicker.vue",
          "content": "<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-full justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n          $attrs.class || ''\n        )\"\n      >\n        <CalendarIcon class=\"text-foreground h-4 w-4\" />\n        {{ date ? df.format(date.toDate(getLocalTimeZone())) : (placeholder || \"Pick a date\") }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\" :to=\"to\">\n      <Calendar v-model=\"date\" initial-focus />\n    </PopoverContent>\n  </Popover>\n</template>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/stacktrace/ui/Button'\nimport { Calendar } from '@/registry/stacktrace/ui/Calendar'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/stacktrace/ui/Popover'\nimport { cn } from '@/lib/utils'\nimport {\n  DateFormatter,\n  type DateValue,\n  parseDate,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { Calendar as CalendarIcon } from '@lucide/vue'\nimport { computed, ref, type Ref, watch } from 'vue'\n\nconst emit = defineEmits(['update:modelValue'])\n\nconst props = defineProps<{\n  modelValue?: string | null | undefined\n  placeholder?: string | null | undefined\n  to?: string | HTMLElement\n}>()\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst date = ref(props.modelValue ? parseDate(props.modelValue) : undefined) as Ref<DateValue | undefined>\n\nwatch(date, newDate => {\n  const updatedValue = newDate?.toString() || undefined\n\n  if (updatedValue !== props.modelValue) {\n    emit('update:modelValue', updatedValue)\n  }\n})\n\nwatch(computed(() => props.modelValue), newModelValue => {\n  const currentDate = date.value?.toString() || undefined\n  const updatedDate = newModelValue || undefined\n\n  if (currentDate !== updatedDate) {\n    date.value = updatedDate ? (parseDate(updatedDate) as DateValue) : undefined\n  }\n})\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "DatePicker/index.ts",
          "content": "export { default as DatePicker } from './DatePicker.vue'\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "date-range-picker",
      "type": "registry:ui",
      "title": "Date Range Picker",
      "description": "Date Range Picker components for StackTrace UI.",
      "dependencies": [
        "@internationalized/date",
        "@lucide/vue",
        "reka-ui"
      ],
      "registryDependencies": [
        "@stacktrace/button",
        "@stacktrace/popover",
        "@stacktrace/range-calendar"
      ],
      "files": [
        {
          "path": "DateRangePicker/DateRangePicker.vue",
          "content": "<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-full justify-start text-left font-normal',\n          !isSelected && 'text-muted-foreground',\n          $attrs.class || ''\n        )\"\n      >\n        <CalendarIcon class=\"text-foreground size-4\" />\n        {{ label || \"Pick a date range\" }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\" :to=\"to\">\n      <RangeCalendar v-model=\"date\" initial-focus :number-of-months=\"2\" />\n    </PopoverContent>\n  </Popover>\n</template>\n\n<script setup lang=\"ts\">\nimport { Popover, PopoverTrigger, PopoverContent } from '@/registry/stacktrace/ui/Popover'\nimport { RangeCalendar } from \"@/registry/stacktrace/ui/RangeCalendar\";\nimport { Button } from \"@/registry/stacktrace/ui/Button\";\nimport { Calendar as CalendarIcon } from '@lucide/vue'\nimport { computed, type Ref, ref, watch } from 'vue'\nimport { cn } from '@/lib/utils'\nimport {\n  DateFormatter,\n  parseDate,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport type { DateRange } from 'reka-ui'\n\nconst emit = defineEmits(['update:from', 'update:until'])\n\nconst props = defineProps<{\n  from?: string\n  until?: string\n  to?: string | HTMLElement\n}>()\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'medium',\n})\n\nconst date = ref({\n  start: props.from ? parseDate(props.from) : undefined,\n  end: props.until ? parseDate(props.until) : undefined,\n}) as Ref<DateRange>\n\nconst clear = () => {\n  date.value = { start: undefined, end: undefined }\n}\n\nwatch(date, newDate => {\n  const start = newDate.start?.toString() || undefined\n  const end = newDate.end?.toString() || undefined\n\n  if (start !== props.from) {\n    emit('update:from', start)\n  }\n\n  if (end !== props.until) {\n    emit('update:until', end)\n  }\n})\n\nwatch(computed(() => props.from), newFrom => {\n  const currentFrom = date.value.start?.toString() || undefined\n  const updatedFrom = newFrom || undefined\n\n  if (updatedFrom !== currentFrom) {\n    date.value.start = updatedFrom ? parseDate(updatedFrom) : undefined\n  }\n})\n\nwatch(computed(() => props.until), newUntil => {\n  const currentUntil = date.value.end?.toString() || undefined\n  const updatedUntil = newUntil || undefined\n\n  if (updatedUntil !== currentUntil) {\n    date.value.end = updatedUntil ? parseDate(updatedUntil) : undefined\n  }\n})\n\nconst isSelected = computed(() => date.value.start || date.value.end)\n\nconst label = computed(() => {\n  const from = date.value.start?.toDate(getLocalTimeZone()) || null\n  const until = date.value.end?.toDate(getLocalTimeZone()) || null\n\n  if (from && until) {\n    const fromFormat = df.format(from)\n    const untilFormat = df.format(until)\n\n    if (fromFormat == untilFormat) {\n      return fromFormat\n    }\n\n    return `${fromFormat} - ${untilFormat}`\n  }\n\n  return null\n})\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "DateRangePicker/index.ts",
          "content": "export { default as DateRangePicker } from './DateRangePicker.vue'\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "date-time-input",
      "type": "registry:ui",
      "title": "Date Time Input",
      "description": "Date Time Input components for StackTrace UI.",
      "dependencies": [
        "reka-ui"
      ],
      "files": [
        {
          "path": "DateTimeInput/DateTimeInput.vue",
          "content": "<template>\n  <DateFieldRoot\n    v-slot=\"{ segments }\"\n    class=\"flex items-center select-none border border-input shadow-xs px-3 h-9 text-sm bg-transparent rounded-md focus-visible:border-ring focus-visible:ring-ring/50\"\n  >\n    <template\n      v-for=\"item in segments\"\n      :key=\"item.part\"\n    >\n      <DateFieldInput\n        v-if=\"item.part === 'literal'\"\n        :part=\"item.part\"\n      >\n        {{ item.value }}\n      </DateFieldInput>\n      <DateFieldInput\n        v-else\n        :part=\"item.part\"\n        class=\"rounded transition-[color,box-shadow] focus:outline-none focus:border-ring focus:ring-ring/50 focus:ring-3 border border-transparent focus:border-input data-[placeholder]:text-muted-foreground selection:bg-primary selection:text-primary-foreground\"\n      >\n        {{ item.value }}\n      </DateFieldInput>\n    </template>\n  </DateFieldRoot>\n</template>\n\n<script lang=\"ts\" setup>\nimport { DateFieldInput, DateFieldRoot } from 'reka-ui'\n</script>\n\n",
          "type": "registry:ui"
        },
        {
          "path": "DateTimeInput/index.ts",
          "content": "export { default as DateTimeInput } from './DateTimeInput.vue'\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "dialog",
      "type": "registry:ui",
      "title": "Dialog",
      "description": "Dialog components for StackTrace UI.",
      "dependencies": [
        "@lucide/vue",
        "@vueuse/core",
        "reka-ui"
      ],
      "files": [
        {
          "path": "Dialog/Dialog.vue",
          "content": "<template>\n  <DialogRoot v-if=\"control\" data-slot=\"dialog\" v-bind=\"forwarded\" v-model:open=\"control.active.value\">\n    <slot />\n  </DialogRoot>\n  <DialogRoot v-else data-slot=\"dialog\" v-bind=\"forwarded\">\n    <slot />\n  </DialogRoot>\n</template>\n\n<script setup lang=\"ts\">\nimport { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { type Toggle } from '@stacktrace/ui'\n\nconst props = defineProps<DialogRootProps & {\n  control?: Toggle\n}>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Dialog/DialogClose.vue",
          "content": "<template>\n  <DialogClose\n    data-slot=\"dialog-close\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </DialogClose>\n</template>\n\n<script setup lang=\"ts\">\nimport { DialogClose, type DialogCloseProps } from 'reka-ui'\n\nconst props = defineProps<DialogCloseProps>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Dialog/DialogContent.vue",
          "content": "<template>\n  <DialogPortal>\n    <DialogOverlay />\n    <DialogContent\n      data-slot=\"dialog-content\"\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',\n          props.class,\n        )\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\"\n      >\n        <X />\n        <span class=\"sr-only\">Close</span>\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { X } from '@lucide/vue'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport DialogOverlay from './DialogOverlay.vue'\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Dialog/DialogDescription.vue",
          "content": "<template>\n  <DialogDescription\n    data-slot=\"dialog-description\"\n    v-bind=\"forwardedProps\"\n    :class=\"cn('text-muted-foreground text-sm', props.class)\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Dialog/DialogFooter.vue",
          "content": "<template>\n  <div\n    data-slot=\"dialog-footer\"\n    :class=\"cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Dialog/DialogHeader.vue",
          "content": "<template>\n  <div\n    data-slot=\"dialog-header\"\n    :class=\"cn('flex flex-col gap-2 text-center sm:text-left', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Dialog/DialogOverlay.vue",
          "content": "<template>\n  <DialogOverlay\n    data-slot=\"dialog-overlay\"\n    v-bind=\"delegatedProps\"\n    :class=\"cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', props.class)\"\n  >\n    <slot />\n  </DialogOverlay>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { DialogOverlay, type DialogOverlayProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogOverlayProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Dialog/DialogScrollContent.vue",
          "content": "<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    >\n      <DialogContent\n        :class=\"\n          cn(\n            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',\n            props.class,\n          )\n        \"\n        v-bind=\"forwarded\"\n        @pointer-down-outside=\"(event) => {\n          const originalEvent = event.detail.originalEvent;\n          const target = originalEvent.target as HTMLElement;\n          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {\n            event.preventDefault();\n          }\n        }\"\n      >\n        <slot />\n\n        <DialogClose\n          class=\"absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary\"\n        >\n          <X class=\"w-4 h-4\" />\n          <span class=\"sr-only\">Close</span>\n        </DialogClose>\n      </DialogContent>\n    </DialogOverlay>\n  </DialogPortal>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { X } from '@lucide/vue'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Dialog/DialogTitle.vue",
          "content": "<template>\n  <DialogTitle\n    data-slot=\"dialog-title\"\n    v-bind=\"forwardedProps\"\n    :class=\"cn('text-lg leading-none font-semibold', props.class)\"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { DialogTitle, type DialogTitleProps, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Dialog/DialogTrigger.vue",
          "content": "<template>\n  <DialogTrigger\n    data-slot=\"dialog-trigger\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </DialogTrigger>\n</template>\n\n<script setup lang=\"ts\">\nimport { DialogTrigger, type DialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<DialogTriggerProps>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Dialog/index.ts",
          "content": "export { default as Dialog } from './Dialog.vue'\nexport { default as DialogClose } from './DialogClose.vue'\nexport { default as DialogContent } from './DialogContent.vue'\nexport { default as DialogDescription } from './DialogDescription.vue'\nexport { default as DialogFooter } from './DialogFooter.vue'\nexport { default as DialogHeader } from './DialogHeader.vue'\nexport { default as DialogOverlay } from './DialogOverlay.vue'\nexport { default as DialogScrollContent } from './DialogScrollContent.vue'\nexport { default as DialogTitle } from './DialogTitle.vue'\nexport { default as DialogTrigger } from './DialogTrigger.vue'\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "drawer",
      "type": "registry:ui",
      "title": "Drawer",
      "description": "Drawer components for StackTrace UI.",
      "dependencies": [
        "@vueuse/core",
        "reka-ui",
        "vaul-vue"
      ],
      "files": [
        {
          "path": "Drawer/Drawer.vue",
          "content": "<script lang=\"ts\" setup>\nimport type { DrawerRootEmits, DrawerRootProps } from 'vaul-vue'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport { DrawerRoot } from 'vaul-vue'\n\nconst props = withDefaults(defineProps<DrawerRootProps>(), {\n  shouldScaleBackground: true,\n})\n\nconst emits = defineEmits<DrawerRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DrawerRoot\n    data-slot=\"drawer\"\n    v-bind=\"forwarded\"\n  >\n    <slot />\n  </DrawerRoot>\n</template>\n",
          "type": "registry:ui"
        },
        {
          "path": "Drawer/DrawerClose.vue",
          "content": "<script lang=\"ts\" setup>\nimport type { DrawerCloseProps } from 'vaul-vue'\nimport { DrawerClose } from 'vaul-vue'\n\nconst props = defineProps<DrawerCloseProps>()\n</script>\n\n<template>\n  <DrawerClose\n    data-slot=\"drawer-close\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </DrawerClose>\n</template>\n",
          "type": "registry:ui"
        },
        {
          "path": "Drawer/DrawerContent.vue",
          "content": "<script lang=\"ts\" setup>\nimport type { DialogContentEmits, DialogContentProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport { DrawerContent, DrawerPortal } from 'vaul-vue'\nimport { cn } from '@/lib/utils'\nimport DrawerOverlay from './DrawerOverlay.vue'\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DrawerPortal>\n    <DrawerOverlay />\n    <DrawerContent\n      data-slot=\"drawer-content\"\n      v-bind=\"forwarded\"\n      :class=\"cn(\n        `group/drawer-content bg-background fixed z-50 flex h-auto flex-col`,\n        `data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg`,\n        `data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg`,\n        `data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:sm:max-w-sm`,\n        `data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:sm:max-w-sm`,\n        props.class,\n      )\"\n    >\n      <div class=\"bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n      <slot />\n    </DrawerContent>\n  </DrawerPortal>\n</template>\n",
          "type": "registry:ui"
        },
        {
          "path": "Drawer/DrawerDescription.vue",
          "content": "<script lang=\"ts\" setup>\nimport type { DrawerDescriptionProps } from 'vaul-vue'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { DrawerDescription } from 'vaul-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DrawerDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n</script>\n\n<template>\n  <DrawerDescription\n    data-slot=\"drawer-description\"\n    v-bind=\"delegatedProps\"\n    :class=\"cn('text-muted-foreground text-sm', props.class)\"\n  >\n    <slot />\n  </DrawerDescription>\n</template>\n",
          "type": "registry:ui"
        },
        {
          "path": "Drawer/DrawerFooter.vue",
          "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-slot=\"drawer-footer\"\n    :class=\"cn('mt-auto flex flex-col gap-2 p-4', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
          "type": "registry:ui"
        },
        {
          "path": "Drawer/DrawerHeader.vue",
          "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-slot=\"drawer-header\"\n    :class=\"cn('flex flex-col gap-1.5 p-4', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
          "type": "registry:ui"
        },
        {
          "path": "Drawer/DrawerOverlay.vue",
          "content": "<script lang=\"ts\" setup>\nimport type { DialogOverlayProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { DrawerOverlay } from 'vaul-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogOverlayProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n</script>\n\n<template>\n  <DrawerOverlay\n    data-slot=\"drawer-overlay\"\n    v-bind=\"delegatedProps\"\n    :class=\"cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', props.class)\"\n  />\n</template>\n",
          "type": "registry:ui"
        },
        {
          "path": "Drawer/DrawerTitle.vue",
          "content": "<script lang=\"ts\" setup>\nimport type { DrawerTitleProps } from 'vaul-vue'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { DrawerTitle } from 'vaul-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DrawerTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n</script>\n\n<template>\n  <DrawerTitle\n    data-slot=\"drawer-title\"\n    v-bind=\"delegatedProps\"\n    :class=\"cn('text-foreground font-semibold', props.class)\"\n  >\n    <slot />\n  </DrawerTitle>\n</template>\n",
          "type": "registry:ui"
        },
        {
          "path": "Drawer/DrawerTrigger.vue",
          "content": "<script lang=\"ts\" setup>\nimport type { DrawerTriggerProps } from 'vaul-vue'\nimport { DrawerTrigger } from 'vaul-vue'\n\nconst props = defineProps<DrawerTriggerProps>()\n</script>\n\n<template>\n  <DrawerTrigger\n    data-slot=\"drawer-trigger\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </DrawerTrigger>\n</template>\n",
          "type": "registry:ui"
        },
        {
          "path": "Drawer/index.ts",
          "content": "export { default as Drawer } from './Drawer.vue'\nexport { default as DrawerClose } from './DrawerClose.vue'\nexport { default as DrawerContent } from './DrawerContent.vue'\nexport { default as DrawerDescription } from './DrawerDescription.vue'\nexport { default as DrawerFooter } from './DrawerFooter.vue'\nexport { default as DrawerHeader } from './DrawerHeader.vue'\nexport { default as DrawerOverlay } from './DrawerOverlay.vue'\nexport { default as DrawerTitle } from './DrawerTitle.vue'\nexport { default as DrawerTrigger } from './DrawerTrigger.vue'\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "dropdown-menu",
      "type": "registry:ui",
      "title": "Dropdown Menu",
      "description": "Dropdown Menu components for StackTrace UI.",
      "dependencies": [
        "@lucide/vue",
        "@vueuse/core",
        "reka-ui"
      ],
      "files": [
        {
          "path": "DropdownMenu/DropdownMenu.vue",
          "content": "<template>\n  <DropdownMenuRoot\n    data-slot=\"dropdown-menu\"\n    v-bind=\"forwarded\"\n  >\n    <slot />\n  </DropdownMenuRoot>\n</template>\n\n<script setup lang=\"ts\">\nimport { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuRootProps>()\nconst emits = defineEmits<DropdownMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "DropdownMenu/DropdownMenuCheckboxItem.vue",
          "content": "<template>\n  <DropdownMenuCheckboxItem\n    data-slot=\"dropdown-menu-checkbox-item\"\n    v-bind=\"forwarded\"\n    :class=\" cn(\n      `focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,\n      props.class,\n    )\"\n  >\n    <span class=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n      <DropdownMenuItemIndicator>\n        <Check class=\"size-4\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuCheckboxItem>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { Check } from '@lucide/vue'\nimport {\n  DropdownMenuCheckboxItem,\n  type DropdownMenuCheckboxItemEmits,\n  type DropdownMenuCheckboxItemProps,\n  DropdownMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuCheckboxItemEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "DropdownMenu/DropdownMenuContent.vue",
          "content": "<template>\n  <DropdownMenuPortal>\n    <DropdownMenuContent\n      data-slot=\"dropdown-menu-content\"\n      v-bind=\"forwarded\"\n      :class=\"cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--reka-dropdown-menu-content-available-height) min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md', props.class)\"\n    >\n      <slot />\n    </DropdownMenuContent>\n  </DropdownMenuPortal>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport {\n  DropdownMenuContent,\n  type DropdownMenuContentEmits,\n  type DropdownMenuContentProps,\n  DropdownMenuPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    sideOffset: 4,\n  },\n)\nconst emits = defineEmits<DropdownMenuContentEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "DropdownMenu/DropdownMenuGroup.vue",
          "content": "<template>\n  <DropdownMenuGroup\n    data-slot=\"dropdown-menu-group\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </DropdownMenuGroup>\n</template>\n\n<script setup lang=\"ts\">\nimport { DropdownMenuGroup, type DropdownMenuGroupProps } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuGroupProps>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "DropdownMenu/DropdownMenuItem.vue",
          "content": "<template>\n  <DropdownMenuItem\n    data-slot=\"dropdown-menu-item\"\n    :data-inset=\"inset ? '' : undefined\"\n    :data-variant=\"variant\"\n    v-bind=\"forwardedProps\"\n    :class=\"cn(`focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:!text-destructive-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`, props.class)\"\n  >\n    <slot />\n  </DropdownMenuItem>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<DropdownMenuItemProps & {\n  class?: HTMLAttributes['class']\n  inset?: boolean\n  variant?: 'default' | 'destructive'\n}>(), {\n  variant: 'default',\n})\n\nconst delegatedProps = reactiveOmit(props, 'inset', 'variant', 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "DropdownMenu/DropdownMenuLabel.vue",
          "content": "<template>\n  <DropdownMenuLabel\n    data-slot=\"dropdown-menu-label\"\n    :data-inset=\"inset ? '' : undefined\"\n    v-bind=\"forwardedProps\"\n    :class=\"cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', props.class)\"\n  >\n    <slot />\n  </DropdownMenuLabel>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = reactiveOmit(props, 'class', 'inset')\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "DropdownMenu/DropdownMenuLink.vue",
          "content": "<template>\n  <DropdownMenuItem v-bind=\"forwardedProps\" as-child>\n    <Link :as=\"props.as || undefined\" class=\"w-full\" :href=\"href\">\n      <slot />\n    </Link>\n  </DropdownMenuItem>\n</template>\n\n<script setup lang=\"ts\">\nimport { type DropdownMenuItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { Link, type InertiaLinkProps } from '@inertiajs/vue3'\nimport { DropdownMenuItem } from './'\n\nconst props = defineProps<DropdownMenuItemProps & InertiaLinkProps & {\n  class?: HTMLAttributes['class']\n  inset?: boolean\n  as?: string\n  href: string\n}>()\n\nconst delegatedProps = computed(() => {\n  const { as: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "DropdownMenu/DropdownMenuRadioGroup.vue",
          "content": "<template>\n  <DropdownMenuRadioGroup\n    data-slot=\"dropdown-menu-radio-group\"\n    v-bind=\"forwarded\"\n  >\n    <slot />\n  </DropdownMenuRadioGroup>\n</template>\n\n<script setup lang=\"ts\">\nimport {\n  DropdownMenuRadioGroup,\n  type DropdownMenuRadioGroupEmits,\n  type DropdownMenuRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<DropdownMenuRadioGroupProps>()\nconst emits = defineEmits<DropdownMenuRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "DropdownMenu/DropdownMenuRadioItem.vue",
          "content": "<template>\n  <DropdownMenuRadioItem\n    data-slot=\"dropdown-menu-radio-item\"\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      `focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,\n      props.class,\n    )\"\n  >\n    <span class=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n      <DropdownMenuItemIndicator>\n        <Circle class=\"size-2 fill-current\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuRadioItem>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { Circle } from '@lucide/vue'\nimport {\n  DropdownMenuItemIndicator,\n  DropdownMenuRadioItem,\n  type DropdownMenuRadioItemEmits,\n  type DropdownMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<DropdownMenuRadioItemEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "DropdownMenu/DropdownMenuSeparator.vue",
          "content": "<template>\n  <DropdownMenuSeparator\n    data-slot=\"dropdown-menu-separator\"\n    v-bind=\"delegatedProps\"\n    :class=\"cn('bg-border -mx-1 my-1 h-px', props.class)\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport {\n  DropdownMenuSeparator,\n  type DropdownMenuSeparatorProps,\n} from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuSeparatorProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "DropdownMenu/DropdownMenuShortcut.vue",
          "content": "<template>\n  <span\n    data-slot=\"dropdown-menu-shortcut\"\n    :class=\"cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)\"\n  >\n    <slot />\n  </span>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "DropdownMenu/DropdownMenuSub.vue",
          "content": "<template>\n  <DropdownMenuSub data-slot=\"dropdown-menu-sub\" v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuSub>\n</template>\n\n<script setup lang=\"ts\">\nimport {\n  DropdownMenuSub,\n  type DropdownMenuSubEmits,\n  type DropdownMenuSubProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<DropdownMenuSubProps>()\nconst emits = defineEmits<DropdownMenuSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "DropdownMenu/DropdownMenuSubContent.vue",
          "content": "<template>\n  <DropdownMenuSubContent\n    data-slot=\"dropdown-menu-sub-content\"\n    v-bind=\"forwarded\"\n    :class=\"cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg', props.class)\"\n  >\n    <slot />\n  </DropdownMenuSubContent>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport {\n  DropdownMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "DropdownMenu/DropdownMenuSubTrigger.vue",
          "content": "<template>\n  <DropdownMenuSubTrigger\n    data-slot=\"dropdown-menu-sub-trigger\"\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRight class=\"ml-auto size-4\" />\n  </DropdownMenuSubTrigger>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { ChevronRight } from '@lucide/vue'\nimport {\n  DropdownMenuSubTrigger,\n  type DropdownMenuSubTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = reactiveOmit(props, 'class', 'inset')\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "DropdownMenu/DropdownMenuTrigger.vue",
          "content": "<template>\n  <DropdownMenuTrigger\n    data-slot=\"dropdown-menu-trigger\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </DropdownMenuTrigger>\n</template>\n\n<script setup lang=\"ts\">\nimport { DropdownMenuTrigger, type DropdownMenuTriggerProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuTriggerProps>()\n\nconst forwardedProps = useForwardProps(props)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "DropdownMenu/index.ts",
          "content": "export { default as DropdownMenu } from './DropdownMenu.vue'\n\nexport { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'\nexport { default as DropdownMenuContent } from './DropdownMenuContent.vue'\nexport { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'\nexport { default as DropdownMenuItem } from './DropdownMenuItem.vue'\nexport { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'\nexport { default as DropdownMenuLink } from './DropdownMenuLink.vue'\nexport { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'\nexport { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'\nexport { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'\nexport { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'\nexport { default as DropdownMenuSub } from './DropdownMenuSub.vue'\nexport { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue'\nexport { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'\nexport { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'\nexport { DropdownMenuPortal } from 'reka-ui'\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "empty",
      "type": "registry:ui",
      "title": "Empty",
      "description": "Empty components for StackTrace UI.",
      "dependencies": [
        "class-variance-authority"
      ],
      "files": [
        {
          "path": "Empty/Empty.vue",
          "content": "<template>\n  <div\n    data-slot=\"empty\"\n    :class=\"cn(\n      'flex min-w-0 flex-1 flex-col items-center justify-center gap-6 text-balance rounded-lg border-dashed p-6 text-center md:p-12',\n      props.class,\n    )\"\n  >\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Empty/EmptyContent.vue",
          "content": "<template>\n  <div\n    data-slot=\"empty-content\"\n    :class=\"cn(\n      'flex w-full min-w-0 max-w-sm flex-col items-center gap-4 text-balance text-sm',\n      props.class,\n    )\"\n  >\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Empty/EmptyDescription.vue",
          "content": "<template>\n  <p\n    data-slot=\"empty-description\"\n    :class=\"cn(\n      'text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4',\n      $attrs.class ?? '',\n    )\"\n  >\n    <slot />\n  </p>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\ndefineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Empty/EmptyHeader.vue",
          "content": "<template>\n  <div\n    data-slot=\"empty-header\"\n    :class=\"cn(\n      'flex max-w-sm flex-col items-center gap-2 text-center',\n      props.class,\n    )\"\n  >\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Empty/EmptyMedia.vue",
          "content": "<template>\n  <div\n    data-slot=\"empty-icon\"\n    :data-variant=\"variant\"\n    :class=\"cn(emptyMediaVariants({ variant }), props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport type { EmptyMediaVariants } from '.'\nimport { cn } from '@/lib/utils'\nimport { emptyMediaVariants } from '.'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n  variant?: EmptyMediaVariants['variant']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Empty/EmptyTitle.vue",
          "content": "<template>\n  <div\n    data-slot=\"empty-title\"\n    :class=\"cn('text-lg font-medium tracking-tight', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Empty/index.ts",
          "content": "import type { VariantProps } from 'class-variance-authority'\nimport { cva } from 'class-variance-authority'\n\nexport { default as Empty } from './Empty.vue'\nexport { default as EmptyContent } from './EmptyContent.vue'\nexport { default as EmptyDescription } from './EmptyDescription.vue'\nexport { default as EmptyHeader } from './EmptyHeader.vue'\nexport { default as EmptyMedia } from './EmptyMedia.vue'\nexport { default as EmptyTitle } from './EmptyTitle.vue'\n\nexport const emptyMediaVariants = cva(\n  'mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        icon: \"bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6\",\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nexport type EmptyMediaVariants = VariantProps<typeof emptyMediaVariants>\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "field",
      "type": "registry:ui",
      "title": "Field",
      "description": "Field components for StackTrace UI.",
      "dependencies": [
        "class-variance-authority"
      ],
      "registryDependencies": [
        "@stacktrace/label",
        "@stacktrace/separator"
      ],
      "files": [
        {
          "path": "Field/Field.vue",
          "content": "<template>\n  <div\n    role=\"group\"\n    data-slot=\"field\"\n    :data-orientation=\"orientation\"\n    :class=\"cn(\n      fieldVariants({ orientation }),\n      props.class,\n    )\"\n  >\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport type { FieldVariants } from '.'\nimport { cn } from '@/lib/utils'\nimport { fieldVariants } from '.'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n  orientation?: FieldVariants['orientation']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Field/FieldContent.vue",
          "content": "<template>\n  <div\n    data-slot=\"field-content\"\n    :class=\"cn(\n      'group/field-content flex flex-1 flex-col gap-1.5 leading-snug',\n      props.class,\n    )\"\n  >\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Field/FieldDescription.vue",
          "content": "<template>\n  <p\n    data-slot=\"field-description\"\n    :class=\"cn(\n      'text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance',\n      'last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5',\n      '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',\n      props.class,\n    )\"\n  >\n    <slot />\n  </p>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Field/FieldError.vue",
          "content": "<template>\n  <div\n    v-if=\"$slots.default || content\"\n    role=\"alert\"\n    data-slot=\"field-error\"\n    :class=\"cn('text-destructive text-sm font-normal', props.class)\"\n  >\n    <slot v-if=\"$slots.default\" />\n\n    <template v-else-if=\"typeof content === 'string'\">\n      {{ content }}\n    </template>\n\n    <ul v-else-if=\"Array.isArray(content)\" class=\"ml-4 flex list-disc flex-col gap-1\">\n      <li v-for=\"(error, index) in content\" :key=\"index\">\n        {{ error }}\n      </li>\n    </ul>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n  errors?: Array<string | { message: string | undefined } | undefined>\n}>()\n\nconst content = computed(() => {\n  if (!props.errors || props.errors.length === 0)\n    return null\n\n  const uniqueErrors = [\n    ...new Map(\n      props.errors\n        .filter(Boolean)\n        .map((error) => {\n          const message = typeof error === 'string' ? error : error?.message\n          return [message, error]\n        }),\n    ).values(),\n  ]\n\n  if (uniqueErrors.length === 1 && uniqueErrors[0]) {\n    return typeof uniqueErrors[0] === 'string' ? uniqueErrors[0] : uniqueErrors[0].message\n  }\n\n  return uniqueErrors.map(error => typeof error === 'string' ? error : error?.message)\n})\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Field/FieldGroup.vue",
          "content": "<template>\n  <div\n    data-slot=\"field-group\"\n    :class=\"cn(\n      'group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4',\n      props.class,\n    )\"\n  >\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Field/FieldLabel.vue",
          "content": "<template>\n  <Label\n    data-slot=\"field-label\"\n    :class=\"cn(\n      'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50',\n      'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4',\n      'has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Label>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Label } from '@/registry/stacktrace/ui/Label'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Field/FieldLegend.vue",
          "content": "<template>\n  <legend\n    data-slot=\"field-legend\"\n    :data-variant=\"variant\"\n    :class=\"cn(\n      'mb-3 font-medium',\n      'data-[variant=legend]:text-base',\n      'data-[variant=label]:text-sm',\n      props.class,\n    )\"\n  >\n    <slot />\n  </legend>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n  variant?: 'legend' | 'label'\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Field/FieldSeparator.vue",
          "content": "<template>\n  <div\n    data-slot=\"field-separator\"\n    :data-content=\"!!$slots.default\"\n    :class=\"cn(\n      'relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2',\n      props.class,\n    )\"\n  >\n    <Separator class=\"absolute inset-0 top-1/2\" />\n    <span\n      v-if=\"$slots.default\"\n      class=\"bg-background text-muted-foreground relative mx-auto block w-fit px-2\"\n      data-slot=\"field-separator-content\"\n    >\n      <slot />\n    </span>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Separator } from '@/registry/stacktrace/ui/Separator'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Field/FieldSet.vue",
          "content": "<template>\n  <fieldset\n    data-slot=\"field-set\"\n    :class=\"cn(\n      'flex flex-col gap-6',\n      'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',\n      props.class,\n    )\"\n  >\n    <slot />\n  </fieldset>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Field/FieldTitle.vue",
          "content": "<template>\n  <div\n    data-slot=\"field-label\"\n    :class=\"cn(\n      'flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50',\n      props.class,\n    )\"\n  >\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Field/index.ts",
          "content": "import type { VariantProps } from 'class-variance-authority'\nimport { cva } from 'class-variance-authority'\n\nexport const fieldVariants = cva(\n  'group/field flex w-full gap-3 data-[invalid=true]:text-destructive',\n  {\n    variants: {\n      orientation: {\n        vertical: ['flex-col [&>*]:w-full [&>.sr-only]:w-auto'],\n        horizontal: [\n          'flex-row items-center',\n          '[&>[data-slot=field-label]]:flex-auto',\n          'has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',\n        ],\n        responsive: [\n          'flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto',\n          '@md/field-group:[&>[data-slot=field-label]]:flex-auto',\n          '@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',\n        ],\n      },\n    },\n    defaultVariants: {\n      orientation: 'vertical',\n    },\n  },\n)\n\nexport type FieldVariants = VariantProps<typeof fieldVariants>\n\nexport { default as Field } from './Field.vue'\nexport { default as FieldContent } from './FieldContent.vue'\nexport { default as FieldDescription } from './FieldDescription.vue'\nexport { default as FieldError } from './FieldError.vue'\nexport { default as FieldGroup } from './FieldGroup.vue'\nexport { default as FieldLabel } from './FieldLabel.vue'\nexport { default as FieldLegend } from './FieldLegend.vue'\nexport { default as FieldSeparator } from './FieldSeparator.vue'\nexport { default as FieldSet } from './FieldSet.vue'\nexport { default as FieldTitle } from './FieldTitle.vue'\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "filter",
      "type": "registry:ui",
      "title": "Filter",
      "description": "Filter components for StackTrace UI.",
      "dependencies": [
        "@internationalized/date",
        "@lucide/vue",
        "@vueuse/core",
        "reka-ui"
      ],
      "registryDependencies": [
        "@stacktrace/badge",
        "@stacktrace/button",
        "@stacktrace/checkbox",
        "@stacktrace/command",
        "@stacktrace/input",
        "@stacktrace/popover",
        "@stacktrace/range-calendar",
        "@stacktrace/select",
        "@stacktrace/separator"
      ],
      "files": [
        {
          "path": "Filter/FilterCheckbox.vue",
          "content": "<template>\n  <Button @click=\"value = !value\" variant=\"outline\" class=\"h-8 border-dashed\">\n    <Checkbox :model-value=\"value\" class=\"mr-2 -ml-1\" /> {{ title }}\n  </Button>\n</template>\n\n<script setup lang=\"ts\">\nimport { Button } from \"@/registry/stacktrace/ui/Button\";\nimport { Checkbox } from \"@/registry/stacktrace/ui/Checkbox\";\n\nconst value = defineModel({ required: false })\n\ndefineProps<{\n  title: string\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Filter/FilterDateRange.vue",
          "content": "<template>\n  <div :class=\"cn('grid gap-2', $attrs.class ?? '')\">\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          id=\"date\"\n          :variant=\"'outline'\"\n          :class=\"cn(\n            'border-dashed h-8',\n            !isSelected && 'font-medium',\n          )\"\n        >\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n\n          {{ title }}\n\n          <template v-if=\"label\">\n            <Separator orientation=\"vertical\" class=\"mx-2 h-4\" />\n            <Badge variant=\"secondary\" class=\"rounded-sm px-1 font-normal\">{{ label }}</Badge>\n          </template>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\" align=\"start\">\n        <RangeCalendar locale=\"sk\" v-model=\"date\" initial-focus :number-of-months=\"2\" />\n\n        <div v-if=\"isSelected\" class=\"px-4 pb-2\">\n          <Button @click=\"clear\" class=\"w-full\" variant=\"ghost\">Clear</Button>\n        </div>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { Popover, PopoverTrigger, PopoverContent } from '@/registry/stacktrace/ui/Popover'\nimport { Separator } from '@/registry/stacktrace/ui/Separator'\nimport { RangeCalendar } from \"@/registry/stacktrace/ui/RangeCalendar\";\nimport { Badge } from '@/registry/stacktrace/ui/Badge'\nimport { Button } from \"@/registry/stacktrace/ui/Button\";\nimport { Calendar as CalendarIcon } from '@lucide/vue'\nimport { computed, type Ref, ref, watch } from 'vue'\nimport { cn } from '@/lib/utils'\nimport {\n  DateFormatter,\n  parseDate,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport type { DateRange } from 'reka-ui'\n\nconst emit = defineEmits(['update:from', 'update:until'])\n\nconst props = defineProps<{\n  title: string\n  from?: string\n  until?: string\n}>()\n\nconst df = new DateFormatter('sk-SK', { // TODO: Locale Support\n  dateStyle: 'medium',\n})\n\nconst date = ref({\n  start: props.from ? parseDate(props.from) : undefined,\n  end: props.until ? parseDate(props.until) : undefined,\n}) as Ref<DateRange>\n\nconst clear = () => {\n  date.value = { start: undefined, end: undefined }\n}\n\nwatch(date, newDate => {\n  const start = newDate.start?.toString() || undefined\n  const end = newDate.end?.toString() || undefined\n\n  if (start !== props.from) {\n    emit('update:from', start)\n  }\n\n  if (end !== props.until) {\n    emit('update:until', end)\n  }\n})\n\nwatch(computed(() => props.from), newFrom => {\n  const currentFrom = date.value.start?.toString() || undefined\n  const updatedFrom = newFrom || undefined\n\n  if (updatedFrom !== currentFrom) {\n    date.value.start = updatedFrom ? parseDate(updatedFrom) : undefined\n  }\n})\n\nwatch(computed(() => props.until), newUntil => {\n  const currentUntil = date.value.end?.toString() || undefined\n  const updatedUntil = newUntil || undefined\n\n  if (updatedUntil !== currentUntil) {\n    date.value.end = updatedUntil ? parseDate(updatedUntil) : undefined\n  }\n})\n\nconst isSelected = computed(() => date.value.start || date.value.end)\n\nconst label = computed(() => {\n  const from = date.value.start?.toDate(getLocalTimeZone()) || null\n  const until = date.value.end?.toDate(getLocalTimeZone()) || null\n\n  if (from && until) {\n    const fromFormat = df.format(from)\n    const untilFormat = df.format(until)\n\n    if (fromFormat == untilFormat) {\n      return fromFormat\n    }\n\n    return `${fromFormat} - ${untilFormat}`\n  }\n\n  return null\n})\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Filter/FilterMultiSelect.vue",
          "content": "<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button variant=\"outline\" class=\"h-8 border-input border-dashed\">\n        <PlusCircleIcon class=\"mr-2 h-4 w-4\" />\n        {{ title }}\n        <template v-if=\"selectedValues.length > 0\">\n          <Separator orientation=\"vertical\" class=\"mx-2 h-4\" />\n          <Badge variant=\"secondary\" class=\"rounded-sm px-1 font-normal lg:hidden\">{{ selectedValues.length }}</Badge>\n          <div class=\"hidden space-x-1 lg:flex\">\n            <Badge v-if=\"selectedValues.length > 2\" variant=\"secondary\" class=\"rounded-sm px-1 font-normal\">{{ selectedValues.length }} vybrané</Badge>\n            <template v-else>\n              <Badge v-for=\"option in selectedValues\" :key=\"`${option.value}`\" variant=\"secondary\" class=\"rounded-sm px-1 font-normal\">{{ option.label }}</Badge>\n            </template>\n          </div>\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-[250px] p-0\" align=\"start\">\n      <Command :filter-function=\"onFilter\">\n        <CommandInput class=\"h-9\" :placeholder=\"title\" />\n        <CommandList>\n          <CommandGroup>\n            <CommandItem v-for=\"option in options\" :key=\"`${option.value}`\" :value=\"option\" @select=\"onSelect(option)\">\n              <Checkbox class=\"mr-2\" :model-value=\"isSelected(option)\" />\n              <span>{{ option.label }}</span>\n            </CommandItem>\n          </CommandGroup>\n\n          <template v-if=\"selectedValues.length >0\">\n            <CommandSeparator />\n            <CommandGroup>\n              <CommandItem :value=\"{ label: 'Clear' }\" class=\"justify-center text-center\" @select=\"onClear\">Clear</CommandItem>\n            </CommandGroup>\n          </template>\n        </CommandList>\n      </Command>\n    </PopoverContent>\n  </Popover>\n</template>\n\n<script setup lang=\"ts\">\nimport { PlusCircleIcon } from \"@lucide/vue\";\nimport { computed } from \"vue\";\nimport type { SelectOption } from \"@stacktrace/ui\";\nimport { Popover, PopoverTrigger, PopoverContent } from '@/registry/stacktrace/ui/Popover'\nimport { Separator } from '@/registry/stacktrace/ui/Separator'\nimport { Button } from '@/registry/stacktrace/ui/Button'\nimport { Badge } from '@/registry/stacktrace/ui/Badge'\nimport { Command, CommandInput, CommandList, CommandGroup, CommandItem, CommandSeparator } from '@/registry/stacktrace/ui/Command'\nimport { Checkbox } from \"@/registry/stacktrace/ui/Checkbox\"\n\nconst emit = defineEmits(['update:modelValue'])\n\nconst props = defineProps<{\n  title: string\n  options: Array<SelectOption>\n  modelValue?: Array<string>\n  disabled?: boolean\n}>()\n\nconst isSelected = (option: SelectOption) => props.modelValue?.includes(`${option.value}`)\n\nconst selectedValues = computed(() => props.options.filter(it => isSelected(it)))\n\nconst onFilter: any = (val: Array<SelectOption>, term: string) => val.filter(it => it.label.toLowerCase().includes(term))\n\nconst onSelect = (option: SelectOption) => {\n  if (props.disabled) {\n    return\n  }\n\n  const newValue = props.modelValue ? [...props.modelValue] : []\n\n  const strValue = `${option.value}`\n\n  if (newValue.includes(strValue)) {\n    newValue.splice(newValue.indexOf(strValue), 1)\n  } else {\n    newValue.push(strValue)\n  }\n\n  emit('update:modelValue', newValue)\n}\n\nconst onClear = () =>{\n  if (props.disabled) {\n    return\n  }\n\n  emit('update:modelValue', [])\n}\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Filter/FilterNumberInput.vue",
          "content": "<template>\n  <Popover v-model:open=\"open\">\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        class=\"border-dashed border-input h-8\"\n      >\n        <HashIcon class=\"w-4 h-4 mr-2\" />\n        {{ label }}\n\n        <template v-if=\"currentValue\">\n          <Separator orientation=\"vertical\" class=\"mx-2 h-4\" />\n          <Badge variant=\"secondary\" class=\"rounded-sm px-1 font-normal\">{{ currentValue }}</Badge>\n        </template>\n\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-60 p-0\" align=\"start\">\n      <div class=\"p-2\">\n        <Select v-model=\"operator\" @update:model-value=\"onOperatorChange\">\n          <SelectTrigger class=\"h-7 mb-2\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem value=\"lt\">less than</SelectItem>\n            <SelectItem value=\"lte\">less then or equal</SelectItem>\n            <SelectItem value=\"eq\">equal to</SelectItem>\n            <SelectItem value=\"gte\">greater than or equal</SelectItem>\n            <SelectItem value=\"gt\">greater than</SelectItem>\n            <SelectItem value=\"be\">between</SelectItem>\n            <SelectItem value=\"nbe\">not between</SelectItem>\n          </SelectContent>\n        </Select>\n\n        <div class=\"grid grid-cols-2 gap-2\" v-if=\"operator == 'be' || operator == 'nbe'\">\n          <Input type=\"number\" placeholder=\"From\" v-model=\"inputFrom\" class=\"h-7\" />\n          <Input type=\"number\" placeholder=\"To\" v-model=\"inputTo\" class=\"h-7\" @keydown.enter=\"open = false\" />\n        </div>\n\n        <Input v-else type=\"number\" placeholder=\"Value\" v-model=\"input\" class=\"h-7\" @keydown.enter=\"open = false\" />\n      </div>\n\n      <div class=\"border-t p-1\">\n        <Button @click=\"clear\" size=\"sm\" class=\"w-full\" variant=\"ghost\">Clear</Button>\n      </div>\n    </PopoverContent>\n  </Popover>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, watch } from \"vue\";\nimport { HashIcon } from \"@lucide/vue\";\nimport { Popover, PopoverTrigger, PopoverContent } from '@/registry/stacktrace/ui/Popover'\nimport { Separator } from '@/registry/stacktrace/ui/Separator'\nimport { Button } from '@/registry/stacktrace/ui/Button'\nimport { Input } from '@/registry/stacktrace/ui/Input'\nimport { Select, SelectValue, SelectItem, SelectContent, SelectTrigger } from '@/registry/stacktrace/ui/Select'\nimport { Badge } from '@/registry/stacktrace/ui/Badge'\n\nconst emit = defineEmits(['update:modelValue'])\n\nconst props = defineProps<{\n  title: string\n  modelValue?: string | null\n}>()\n\nconst open = ref(false)\n\nconst label = computed(() => props.title)\n\nconst operator = ref('eq')\nconst input = ref()\nconst inputFrom = ref()\nconst inputTo = ref()\n\nconst setDefaults = () => {\n  operator.value = 'eq'\n  input.value = ''\n  inputFrom.value = ''\n  inputTo.value = ''\n}\n\nconst isValidOperator = (operator: string) => {\n  return ['lt', 'lte', 'eq', 'gt', 'gte'].includes(operator)\n}\n\nconst asNumber = (value: any) => {\n  const numeric = parseFloat(value)\n\n  if (!isNaN(numeric) && isFinite(numeric)) {\n    return numeric\n  }\n\n  return null\n}\n\nconst createModelValue = () => {\n  if (operator.value == 'be' || operator.value == 'nbe') {\n    const from = asNumber(inputFrom.value)\n    const to = asNumber(inputTo.value)\n\n    if (from !== null && to !== null) {\n      return `${operator.value}:${from}:${to}`\n    }\n  } else {\n    const value = asNumber(input.value)\n\n    if (value !== null) {\n      return `${operator.value}:${value}`\n    }\n  }\n\n  return null\n}\n\nconst parseModelValue = (value: string | null | undefined) => {\n  if (! value || ! value.includes(':')) {\n    return null\n  }\n\n  const parts = value.split(':')\n  const [operatorPart, firstValuePart, secondValuePart] = parts\n\n  if (parts.length == 2) {\n    const op = operatorPart && isValidOperator(operatorPart) ? operatorPart : null\n    const value = asNumber(firstValuePart)\n\n    if (op && value !== null) {\n      return { op, value, from: '', to: '' }\n    }\n  } else if (parts.length === 3) {\n    const op = operatorPart == 'be' || operatorPart == 'nbe' ? operatorPart : null\n    const from = asNumber(firstValuePart)\n    const to = asNumber(secondValuePart)\n\n    if (op && from !== null && to !== null) {\n      return { op, value, from, to }\n    }\n  }\n\n  return null\n}\n\nconst setModelValue = (value: string | null | undefined) => {\n  const parsed = parseModelValue(value)\n\n  if (parsed) {\n    operator.value = parsed.op\n    input.value = parsed.value\n    inputFrom.value = parsed.from\n    inputTo.value = parsed.to\n  } else {\n    setDefaults()\n  }\n}\n\nsetModelValue(props.modelValue)\n\nwatch(() => props.modelValue, value => {\n  const current = createModelValue()\n  if (current !== value) {\n    setModelValue(value)\n  }\n})\n\nconst currentValue = computed(() => {\n  const value = parseModelValue(props.modelValue)\n\n  if (!value) {\n    return null\n  }\n\n  if (value.op == 'be') {\n    return `${value.from} > < ${value.to}`\n  }\n\n  if (value.op == 'nbe') {\n    return `${value.from} < > ${value.to}`\n  }\n\n  const sign = {\n    'lt': '<',\n    'lte': '<=',\n    'eq': '',\n    'gte': '>=',\n    'gt': '>'\n  }[value.op]\n\n  return `${sign || ''} ${value.value}`.trim()\n})\n\nconst onOperatorChange = () => {\n  const value = createModelValue()\n\n  if (value !== null) {\n    emit('update:modelValue', value)\n  }\n}\n\nconst emitCurrentValue = () => {\n  emit('update:modelValue', createModelValue())\n}\n\nconst clear = () => {\n  setDefaults()\n  emitCurrentValue()\n}\n\nwatch(open, isOpen => {\n  if (! isOpen) {\n    emitCurrentValue()\n  }\n})\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Filter/FilterResetButton.vue",
          "content": "<template>\n  <Button class=\"h-8\" @click=\"filter.reset()\" v-if=\"filter.applied\" variant=\"ghost\">Reset <XIcon class=\"ml-2 mt-0.5 w-4 h-4\" /></Button>\n</template>\n\n<script setup lang=\"ts\">\nimport type { Filter } from \"@stacktrace/ui\";\nimport { XIcon } from \"@lucide/vue\";\nimport { Button } from '@/registry/stacktrace/ui/Button'\n\ndefineProps<{\n  filter: Filter<any>\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Filter/FilterSearchInput.vue",
          "content": "<template>\n  <Input :debounce=\"300\" v-model=\"value\" placeholder=\"Search…\" class=\"h-8 w-[250px]\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { useVModel } from \"@vueuse/core\";\nimport { Input } from '@/registry/stacktrace/ui/Input'\n\nconst emit = defineEmits(['update:modelValue'])\n\nconst props = defineProps<{\n  modelValue?: string | number\n}>()\n\nconst value = useVModel(props, 'modelValue', emit)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Filter/index.ts",
          "content": "export { default as FilterDateRange } from './FilterDateRange.vue'\nexport { default as FilterCheckbox } from './FilterCheckbox.vue'\nexport { default as FilterMultiSelect } from './FilterMultiSelect.vue'\nexport { default as FilterNumberInput } from './FilterNumberInput.vue'\nexport { default as FilterResetButton } from './FilterResetButton.vue'\nexport { default as FilterSearchInput } from './FilterSearchInput.vue'\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "form",
      "type": "registry:ui",
      "title": "Form",
      "description": "Form components for StackTrace UI.",
      "dependencies": [
        "@lucide/vue",
        "@vueuse/core",
        "reka-ui"
      ],
      "registryDependencies": [
        "@stacktrace/button",
        "@stacktrace/command",
        "@stacktrace/field",
        "@stacktrace/popover",
        "@stacktrace/select"
      ],
      "files": [
        {
          "path": "Form/FormCombobox.vue",
          "content": "<template>\n  <Popover v-model:open=\"open\">\n    <PopoverTrigger as-child>\n      <Button\n        :id=\"id\"\n        variant=\"outline\"\n        role=\"combobox\"\n        :aria-expanded=\"open\"\n        :class=\"cn('w-full justify-between text-left', $attrs.class || '')\"\n      >\n        {{ value ? options.find((option) => option.value === value)?.label : placeholder }}\n        <ChevronDownIcon class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"p-0\" style=\"width: var(--reka-popover-trigger-width)\">\n      <Command v-model:search-term=\"searchTerm\">\n        <CommandInput class=\"h-9\" :placeholder=\"searchLabel\" />\n        <CommandEmpty>{{ notFoundLabel }}</CommandEmpty>\n        <CommandList>\n          <CommandGroup>\n            <CommandItem\n              v-for=\"option in filteredOptions\"\n              :key=\"option.value\"\n              :value=\"option.value\"\n              @select=\"onSelected(option)\"\n            >\n              {{ option.label }}\n              <CheckIcon\n                :class=\"cn(\n                  'ml-auto h-4 w-4',\n                  value === option.value ? 'opacity-100' : 'opacity-0',\n                )\"\n              />\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n    </PopoverContent>\n  </Popover>\n</template>\n<script setup lang=\"ts\" generic=\"V extends string | number\">\nimport { Button } from '@/registry/stacktrace/ui/Button'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/registry/stacktrace/ui/Command'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/stacktrace/ui/Popover'\nimport { cn } from '@/lib/utils'\nimport { ChevronDownIcon, CheckIcon } from '@lucide/vue'\nimport { useVModel } from '@vueuse/core'\nimport { computed, ref, type Ref } from 'vue'\nimport { type SelectOption } from '@stacktrace/ui'\n\nconst emit = defineEmits(['update:modelValue'])\n\nconst props = withDefaults(defineProps<{\n  options: Array<SelectOption<V>>\n  id?: string\n  searchLabel?: string | undefined\n  placeholder?: string | null\n  notFoundLabel?: string | null\n  nullable?: boolean\n  modelValue?: V | null\n}>(), {\n  searchLabel: 'Search options…',\n  placeholder: 'Select option…',\n  notFoundLabel: 'No options found.',\n  nullable: false,\n})\n\nconst open = ref(false)\nconst value = useVModel(props, 'modelValue', emit) as Ref<V | null>\n\nconst onSelected = (option: SelectOption<V>) => {\n  if (props.nullable && value.value === option.value) {\n    value.value = null\n  } else {\n    value.value = option.value\n  }\n\n  open.value = false\n}\n\nconst searchTerm = ref('')\nconst filteredOptions = computed(() =>\n  searchTerm.value == ''\n    ? props.options\n    : props.options.filter(it => it.label.toLowerCase().includes(searchTerm.value.toLowerCase())))\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Form/FormControl.vue",
          "content": "<template>\n  <FieldGroup\n    :class=\"[\n      'form-control gap-0',\n      { 'has-error': !!error },\n    ]\"\n  >\n    <Field\n      :orientation=\"variant === 'horizontal' ? 'responsive' : 'vertical'\"\n      :data-invalid=\"error ? true : undefined\"\n    >\n      <FieldContent v-if=\"variant === 'horizontal' && (label || help)\">\n        <FieldLabel v-if=\"label\" :for=\"props.for || undefined\">\n          {{ label }}\n          <span v-if=\"required\" aria-hidden=\"true\" class=\"text-destructive\">*</span>\n        </FieldLabel>\n        <FieldDescription v-if=\"help\">\n          {{ help }}\n        </FieldDescription>\n      </FieldContent>\n\n      <FieldLabel v-else-if=\"label\" :for=\"props.for || undefined\">\n        {{ label }}\n        <span v-if=\"required\" aria-hidden=\"true\" class=\"text-destructive\">*</span>\n      </FieldLabel>\n\n      <div class=\"flex w-full flex-1 flex-col gap-1.5\">\n        <slot />\n        <FieldDescription v-if=\"variant === 'vertical' && help\">\n          {{ help }}\n        </FieldDescription>\n        <FieldError v-if=\"error\">\n          {{ error }}\n        </FieldError>\n      </div>\n    </Field>\n  </FieldGroup>\n</template>\n\n<script setup lang=\"ts\">\nimport { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel } from '@/registry/stacktrace/ui/Field'\n\nconst props = withDefaults(defineProps<{\n  variant?: 'vertical' | 'horizontal'\n  for?: string\n  label?: string | null | undefined\n  help?: string | null | undefined\n  error?: string | null | undefined\n  required?: boolean\n}>(), {\n  variant: 'vertical',\n})\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Form/FormSelect.vue",
          "content": "<template>\n  <Select v-bind=\"forwarded\" v-model=\"value\">\n    <SelectTrigger :id=\"id\" :class=\"props.class\">\n      <SelectValue :placeholder=\"placeholder\" />\n    </SelectTrigger>\n    <SelectContent>\n      <SelectItem v-for=\"option in options\" :value=\"option.value\">{{ option.label }}</SelectItem>\n    </SelectContent>\n  </Select>\n</template>\n\n<script setup lang=\"ts\">\nimport { type SelectOption } from '@stacktrace/ui'\nimport type { SelectRootEmits, SelectRootProps } from 'reka-ui'\nimport { useForwardProps } from 'reka-ui'\nimport { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/registry/stacktrace/ui/Select'\nimport { useVModel } from '@vueuse/core'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectRootProps & {\n  options: Array<SelectOption>\n  id?: string\n  placeholder?: string | undefined\n  class?: HTMLAttributes['class']\n  modelValue?: string | number | undefined\n}>()\nconst emits = defineEmits<SelectRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { options, id, placeholder, class: _, modelValue, ...delegated } = props\n\n  return delegated\n})\n\nconst value = useVModel(props, 'modelValue', emits)\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Form/index.ts",
          "content": "export { default as FormCombobox } from './FormCombobox.vue'\nexport { default as FormControl } from './FormControl.vue'\nexport { default as FormSelect } from './FormSelect.vue'\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "hover-card",
      "type": "registry:ui",
      "title": "Hover Card",
      "description": "Hover Card components for StackTrace UI.",
      "dependencies": [
        "@vueuse/core",
        "reka-ui"
      ],
      "files": [
        {
          "path": "HoverCard/HoverCard.vue",
          "content": "<script setup lang=\"ts\">\nimport { HoverCardRoot, type HoverCardRootEmits, type HoverCardRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<HoverCardRootProps>()\nconst emits = defineEmits<HoverCardRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <HoverCardRoot\n    data-slot=\"hover-card\"\n    v-bind=\"forwarded\"\n  >\n    <slot />\n  </HoverCardRoot>\n</template>\n",
          "type": "registry:ui"
        },
        {
          "path": "HoverCard/HoverCardContent.vue",
          "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport {\n  HoverCardContent,\n  type HoverCardContentProps,\n  HoverCardPortal,\n  useForwardProps,\n} from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<HoverCardContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    sideOffset: 4,\n  },\n)\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <HoverCardPortal>\n    <HoverCardContent\n      data-slot=\"hover-card-content\"\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 rounded-md border p-4 shadow-md outline-hidden',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </HoverCardContent>\n  </HoverCardPortal>\n</template>\n",
          "type": "registry:ui"
        },
        {
          "path": "HoverCard/HoverCardTrigger.vue",
          "content": "<script setup lang=\"ts\">\nimport { HoverCardTrigger, type HoverCardTriggerProps } from 'reka-ui'\n\nconst props = defineProps<HoverCardTriggerProps>()\n</script>\n\n<template>\n  <HoverCardTrigger\n    data-slot=\"hover-card-trigger\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </HoverCardTrigger>\n</template>\n",
          "type": "registry:ui"
        },
        {
          "path": "HoverCard/index.ts",
          "content": "export { default as HoverCard } from './HoverCard.vue'\nexport { default as HoverCardContent } from './HoverCardContent.vue'\nexport { default as HoverCardTrigger } from './HoverCardTrigger.vue'\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "input",
      "type": "registry:ui",
      "title": "Input",
      "description": "Input components for StackTrace UI.",
      "dependencies": [
        "@vueuse/core",
        "lodash"
      ],
      "devDependencies": [
        "@types/lodash"
      ],
      "files": [
        {
          "path": "Input/DebouncedInput.vue",
          "content": "<template>\n  <Input v-model=\"value\" :class=\"cn(className || '')\" :placeholder=\"placeholder\" v-bind=\"rest\"/>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs, watch } from 'vue'\nimport { cn } from '@/lib/utils'\nimport debounce from \"lodash/debounce\";\nimport { Input } from './'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<{\n  defaultValue?: string | number\n  modelValue?: string | number\n  debounce?: number | undefined\n  maxWait?: number | undefined\n  placeholder?: string | undefined\n}>()\n\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst {class: className, ...rest} = useAttrs()\n\nconst value = ref(props.modelValue || '')\n\nconst emitValue = (val: string | number) => emits('update:modelValue', val)\nconst emitDebouncedValue = debounce(emitValue, props.debounce, {maxWait: props.maxWait})\nconst shouldDebounce = props.debounce && props.debounce > 0\n\nwatch(value, val => {\n  if (props.modelValue != val) {\n    if (val) {\n      if (shouldDebounce) {\n        emitDebouncedValue(val)\n      } else {\n        emitValue(val)\n      }\n    } else {\n      emitDebouncedValue.cancel()\n      emitValue(val)\n    }\n  }\n})\n\nwatch(computed(() => props.modelValue), it => {\n  if (value.value != it) {\n    value.value = it!\n  }\n})\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Input/index.ts",
          "content": "export { default as DebouncedInput } from './DebouncedInput.vue'\nexport { default as Input } from './Input.vue'\n",
          "type": "registry:ui"
        },
        {
          "path": "Input/Input.vue",
          "content": "<template>\n  <input\n    v-model=\"modelValue\"\n    data-slot=\"input\"\n    :class=\"cn(\n      'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',\n      'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3',\n      'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',\n      props.class,\n    )\"\n  >\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  defaultValue?: string | number\n  modelValue?: string | number\n  class?: HTMLAttributes['class']\n}>()\n\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: props.defaultValue,\n})\n</script>\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "input-group",
      "type": "registry:ui",
      "title": "Input Group",
      "description": "Input Group components for StackTrace UI.",
      "dependencies": [
        "class-variance-authority"
      ],
      "registryDependencies": [
        "@stacktrace/button",
        "@stacktrace/input",
        "@stacktrace/textarea"
      ],
      "files": [
        {
          "path": "InputGroup/index.ts",
          "content": "import type { VariantProps } from 'class-variance-authority'\nimport { cva } from 'class-variance-authority'\n\nexport { default as InputGroup } from './InputGroup.vue'\nexport { default as InputGroupAddon } from './InputGroupAddon.vue'\nexport { default as InputGroupButton } from './InputGroupButton.vue'\nexport { default as InputGroupInput } from './InputGroupInput.vue'\nexport { default as InputGroupText } from './InputGroupText.vue'\nexport { default as InputGroupTextarea } from './InputGroupTextarea.vue'\n\nexport const inputGroupAddonVariants = cva(\n  \"text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50\",\n  {\n    variants: {\n      align: {\n        'inline-start':\n          'order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]',\n        'inline-end':\n          'order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]',\n        'block-start':\n          'order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5',\n        'block-end':\n          'order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5',\n      },\n    },\n    defaultVariants: {\n      align: 'inline-start',\n    },\n  },\n)\n\nexport type InputGroupVariants = VariantProps<typeof inputGroupAddonVariants>\n\nexport const inputGroupButtonVariants = cva(\n  'text-sm shadow-none flex gap-2 items-center',\n  {\n    variants: {\n      size: {\n        'xs': \"h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2\",\n        'sm': 'h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5',\n        'icon-xs': 'size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0',\n        'icon-sm': 'size-8 p-0 has-[>svg]:p-0',\n      },\n    },\n    defaultVariants: {\n      size: 'xs',\n    },\n  },\n)\n\nexport type InputGroupButtonVariants = VariantProps<typeof inputGroupButtonVariants>\n",
          "type": "registry:ui"
        },
        {
          "path": "InputGroup/InputGroup.vue",
          "content": "<template>\n  <div\n    data-slot=\"input-group\"\n    role=\"group\"\n    :class=\"cn(\n      'group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none',\n      'h-9 min-w-0 has-[>textarea]:h-auto',\n\n      // Variants based on alignment.\n      'has-[>[data-align=inline-start]]:[&>input]:pl-2',\n      'has-[>[data-align=inline-end]]:[&>input]:pr-2',\n      'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3',\n      'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3',\n\n      // Focus state.\n      'has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-3',\n\n      // Error state.\n      'has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40',\n\n      props.class,\n    )\"\n  >\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "InputGroup/InputGroupAddon.vue",
          "content": "<template>\n  <div\n    role=\"group\"\n    data-slot=\"input-group-addon\"\n    :data-align=\"props.align\"\n    :class=\"cn(inputGroupAddonVariants({ align: props.align }), props.class)\"\n    @click=\"handleInputGroupAddonClick\"\n  >\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport type { InputGroupVariants } from '.'\nimport { cn } from '@/lib/utils'\nimport { inputGroupAddonVariants } from '.'\n\nconst props = withDefaults(defineProps<{\n  align?: InputGroupVariants['align']\n  class?: HTMLAttributes['class']\n}>(), {\n  align: 'inline-start',\n})\n\nfunction handleInputGroupAddonClick(e: MouseEvent) {\n  const currentTarget = e.currentTarget as HTMLElement | null\n  const target = e.target as HTMLElement | null\n  if (target && target.closest('button')) {\n    return\n  }\n  if (currentTarget && currentTarget?.parentElement) {\n    currentTarget.parentElement?.querySelector('input')?.focus()\n  }\n}\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "InputGroup/InputGroupButton.vue",
          "content": "<template>\n  <Button\n    :data-size=\"props.size\"\n    :variant=\"props.variant\"\n    :class=\"cn(inputGroupButtonVariants({ size: props.size }), props.class)\"\n  >\n    <slot />\n  </Button>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport type { InputGroupButtonVariants } from '.'\nimport type { ButtonVariants } from '@/registry/stacktrace/ui/Button'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/stacktrace/ui/Button'\nimport { inputGroupButtonVariants } from '.'\n\ninterface InputGroupButtonProps {\n  variant?: ButtonVariants['variant']\n  size?: InputGroupButtonVariants['size']\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<InputGroupButtonProps>(), {\n  size: 'xs',\n  variant: 'ghost',\n})\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "InputGroup/InputGroupInput.vue",
          "content": "<template>\n  <Input\n    data-slot=\"input-group-control\"\n    :class=\"cn(\n      'flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent',\n      props.class,\n    )\"\n  />\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Input } from '@/registry/stacktrace/ui/Input'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "InputGroup/InputGroupText.vue",
          "content": "<template>\n  <span\n    :class=\"cn(\n      'text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*=\\'size-\\'])]:size-4',\n      props.class,\n    )\"\n  >\n    <slot />\n  </span>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "InputGroup/InputGroupTextarea.vue",
          "content": "<template>\n  <Textarea\n    data-slot=\"input-group-control\"\n    :class=\"cn(\n      'flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent',\n      props.class,\n    )\"\n  />\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Textarea } from '@/registry/stacktrace/ui/Textarea'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "input-otp",
      "type": "registry:ui",
      "title": "Input OTP",
      "description": "Input OTP components for StackTrace UI.",
      "dependencies": [
        "@lucide/vue",
        "@vueuse/core",
        "reka-ui",
        "vue-input-otp"
      ],
      "files": [
        {
          "path": "InputOTP/index.ts",
          "content": "export { default as InputOTP } from './InputOTP.vue'\nexport { default as InputOTPGroup } from './InputOTPGroup.vue'\nexport { default as InputOTPSeparator } from './InputOTPSeparator.vue'\nexport { default as InputOTPSlot } from './InputOTPSlot.vue'\n",
          "type": "registry:ui"
        },
        {
          "path": "InputOTP/InputOTP.vue",
          "content": "<template>\n  <OTPInput\n    v-slot=\"slotProps\"\n    v-bind=\"forwarded\"\n    :container-class=\"cn('flex items-center gap-2 has-disabled:opacity-50', props.class)\"\n    data-slot=\"input-otp\"\n    class=\"disabled:cursor-not-allowed\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </OTPInput>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport type { OTPInputEmits, OTPInputProps } from 'vue-input-otp'\nimport { reactiveOmit } from '@vueuse/core'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport { OTPInput } from 'vue-input-otp'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<OTPInputProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<OTPInputEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "InputOTP/InputOTPGroup.vue",
          "content": "<template>\n  <div\n    data-slot=\"input-otp-group\"\n    v-bind=\"forwarded\"\n    :class=\"cn('flex items-center', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "InputOTP/InputOTPSeparator.vue",
          "content": "<template>\n  <div\n    data-slot=\"input-otp-separator\"\n    role=\"separator\"\n    v-bind=\"forwarded\"\n  >\n    <slot>\n      <MinusIcon />\n    </slot>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { MinusIcon } from '@lucide/vue'\nimport { useForwardProps } from 'reka-ui'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n\nconst forwarded = useForwardProps(props)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "InputOTP/InputOTPSlot.vue",
          "content": "<template>\n  <div\n    v-bind=\"forwarded\"\n    data-slot=\"input-otp-slot\"\n    :data-active=\"slot?.isActive\"\n    :class=\"cn('data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-3', props.class)\"\n  >\n    {{ slot?.char }}\n    <div v-if=\"slot?.hasFakeCaret\" class=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n      <div class=\"animate-caret-blink bg-foreground h-4 w-px duration-1000\" />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { useForwardProps } from 'reka-ui'\nimport { computed } from 'vue'\nimport { useVueOTPContext } from 'vue-input-otp'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ index: number, class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardProps(delegatedProps)\n\nconst context = useVueOTPContext()\n\nconst slot = computed(() => context?.value.slots[props.index])\n</script>\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "item",
      "type": "registry:ui",
      "title": "Item",
      "description": "Item components for StackTrace UI.",
      "dependencies": [
        "class-variance-authority",
        "reka-ui"
      ],
      "registryDependencies": [
        "@stacktrace/separator"
      ],
      "files": [
        {
          "path": "Item/index.ts",
          "content": "import type { VariantProps } from 'class-variance-authority'\nimport { cva } from 'class-variance-authority'\n\nexport { default as Item } from './Item.vue'\nexport { default as ItemActions } from './ItemActions.vue'\nexport { default as ItemContent } from './ItemContent.vue'\nexport { default as ItemDescription } from './ItemDescription.vue'\nexport { default as ItemFooter } from './ItemFooter.vue'\nexport { default as ItemGroup } from './ItemGroup.vue'\nexport { default as ItemHeader } from './ItemHeader.vue'\nexport { default as ItemMedia } from './ItemMedia.vue'\nexport { default as ItemSeparator } from './ItemSeparator.vue'\nexport { default as ItemTitle } from './ItemTitle.vue'\n\nexport const itemVariants = cva(\n  'group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3',\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        outline: 'border-border',\n        muted: 'bg-muted/50',\n      },\n      size: {\n        default: 'p-4 gap-4 ',\n        sm: 'py-3 px-4 gap-2.5',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport const itemMediaVariants = cva(\n  'flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5',\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        icon: \"size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4\",\n        image:\n          'size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nexport type ItemVariants = VariantProps<typeof itemVariants>\nexport type ItemMediaVariants = VariantProps<typeof itemMediaVariants>\n",
          "type": "registry:ui"
        },
        {
          "path": "Item/Item.vue",
          "content": "<template>\n  <Primitive\n    data-slot=\"item\"\n    :data-variant=\"variant\"\n    :data-size=\"size\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(itemVariants({ variant, size }), props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport type { ItemVariants } from '.'\nimport { Primitive } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { itemVariants } from '.'\n\nconst props = withDefaults(defineProps<PrimitiveProps & {\n  class?: HTMLAttributes['class']\n  variant?: ItemVariants['variant']\n  size?: ItemVariants['size']\n}>(), {\n  as: 'div',\n})\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Item/ItemActions.vue",
          "content": "<template>\n  <div\n    data-slot=\"item-actions\"\n    :class=\"cn('flex items-center gap-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Item/ItemContent.vue",
          "content": "<template>\n  <div\n    data-slot=\"item-content\"\n    :class=\"cn('flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Item/ItemDescription.vue",
          "content": "<template>\n  <p\n    data-slot=\"item-description\"\n    :class=\"cn(\n      'text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance',\n      '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',\n      props.class,\n    )\"\n  >\n    <slot />\n  </p>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Item/ItemFooter.vue",
          "content": "<template>\n  <div\n    data-slot=\"item-footer\"\n    :class=\"cn('flex basis-full items-center justify-between gap-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Item/ItemGroup.vue",
          "content": "<template>\n  <div\n    role=\"list\"\n    data-slot=\"item-group\"\n    :class=\"cn('group/item-group flex flex-col', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Item/ItemHeader.vue",
          "content": "<template>\n  <div\n    data-slot=\"item-header\"\n    :class=\"cn('flex basis-full items-center justify-between gap-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Item/ItemMedia.vue",
          "content": "<template>\n  <div\n    data-slot=\"item-media\"\n    :data-variant=\"props.variant\"\n    :class=\"cn(itemMediaVariants({ variant }), props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport type { ItemMediaVariants } from '.'\nimport { cn } from '@/lib/utils'\nimport { itemMediaVariants } from '.'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n  variant?: ItemMediaVariants['variant']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Item/ItemSeparator.vue",
          "content": "<template>\n  <Separator\n    data-slot=\"item-separator\"\n    orientation=\"horizontal\"\n    :class=\"cn('my-0', props.class)\"\n  />\n</template>\n\n<script lang=\"ts\" setup>\nimport type { SeparatorProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Separator } from '@/registry/stacktrace/ui/Separator'\n\nconst props = defineProps<\n  SeparatorProps & { class?: HTMLAttributes['class'] }\n>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Item/ItemTitle.vue",
          "content": "<template>\n  <div\n    data-slot=\"item-title\"\n    :class=\"cn('flex w-fit items-center gap-2 text-sm leading-snug font-medium', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "kbd",
      "type": "registry:ui",
      "title": "Kbd",
      "description": "Kbd components for StackTrace UI.",
      "files": [
        {
          "path": "Kbd/index.ts",
          "content": "export { default as Kbd } from './Kbd.vue'\nexport { default as KbdGroup } from './KbdGroup.vue'\n",
          "type": "registry:ui"
        },
        {
          "path": "Kbd/Kbd.vue",
          "content": "<template>\n  <kbd\n    :class=\"cn(\n      'bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none',\n      '[&_svg:not([class*=\\'size-\\'])]:size-3',\n      '[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10',\n      props.class,\n    )\"\n  >\n    <slot />\n  </kbd>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Kbd/KbdGroup.vue",
          "content": "<template>\n  <kbd\n    data-slot=\"kbd-group\"\n    :class=\"cn('inline-flex items-center gap-1', props.class)\"\n  >\n    <slot />\n  </kbd>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "label",
      "type": "registry:ui",
      "title": "Label",
      "description": "Label components for StackTrace UI.",
      "dependencies": [
        "@vueuse/core",
        "reka-ui"
      ],
      "files": [
        {
          "path": "Label/index.ts",
          "content": "export { default as Label } from './Label.vue'\n",
          "type": "registry:ui"
        },
        {
          "path": "Label/Label.vue",
          "content": "<template>\n  <Label\n    data-slot=\"label\"\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </Label>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { Label, type LabelProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n</script>\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "logo",
      "type": "registry:ui",
      "title": "Logo",
      "description": "Logo components for StackTrace UI.",
      "files": [
        {
          "path": "Logo/index.ts",
          "content": "export { default as Logo } from './Logo.vue'\n",
          "type": "registry:ui"
        },
        {
          "path": "Logo/Logo.vue",
          "content": "<template>\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n  >\n    <path d=\"M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3\" />\n  </svg>\n</template>\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "marker",
      "type": "registry:ui",
      "title": "Marker",
      "description": "Marker components for StackTrace UI.",
      "dependencies": [
        "class-variance-authority",
        "reka-ui"
      ],
      "files": [
        {
          "path": "Marker/index.ts",
          "content": "import type { VariantProps } from 'class-variance-authority'\nimport { cva } from 'class-variance-authority'\n\nexport { default as Marker } from './Marker.vue'\nexport { default as MarkerContent } from './MarkerContent.vue'\nexport { default as MarkerIcon } from './MarkerIcon.vue'\n\nexport const markerVariants = cva(\n  \"gap-2 text-sm text-muted-foreground [a]:hover:text-foreground [a]:underline-offset-3 [a]:underline [&_svg:not([class*='size-'])]:size-4 min-h-4 text-left group/marker relative flex w-full items-center\",\n  {\n    variants: {\n      variant: {\n        default: '',\n        separator: 'before:h-px before:min-w-0 before:flex-1 before:bg-border after:h-px after:min-w-0 after:flex-1 after:bg-border before:mr-1 after:ml-1',\n        border: 'border-b border-border pb-2',\n      },\n    },\n  },\n)\n\nexport type MarkerVariants = VariantProps<typeof markerVariants>\n",
          "type": "registry:ui"
        },
        {
          "path": "Marker/Marker.vue",
          "content": "<template>\n  <Primitive\n    data-slot=\"marker\"\n    :data-variant=\"variant\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(markerVariants({ variant }), props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport type { MarkerVariants } from '.'\nimport { Primitive } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { markerVariants } from '.'\n\nconst props = withDefaults(defineProps<PrimitiveProps & {\n  variant?: MarkerVariants['variant']\n  class?: HTMLAttributes['class']\n}>(), {\n  as: 'div',\n})\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Marker/MarkerContent.vue",
          "content": "<template>\n  <span\n    data-slot=\"marker-content\"\n    :class=\"cn(\n      'group-data-[variant=separator]/marker:flex-none group-data-[variant=separator]/marker:text-center *:[a]:hover:text-foreground *:[a]:underline *:[a]:underline-offset-3 min-w-0 wrap-break-word',\n      props.class,\n    )\"\n  >\n    <slot />\n  </span>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Marker/MarkerIcon.vue",
          "content": "<template>\n  <span\n    data-slot=\"marker-icon\"\n    aria-hidden=\"true\"\n    :class=\"cn(\n      'size-4 [&_svg:not([class*=\\'size-\\'])]:size-4 shrink-0',\n      props.class,\n    )\"\n  >\n    <slot />\n  </span>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "menubar",
      "type": "registry:ui",
      "title": "Menubar",
      "description": "Menubar components for StackTrace UI.",
      "dependencies": [
        "@lucide/vue",
        "@vueuse/core",
        "reka-ui"
      ],
      "files": [
        {
          "path": "Menubar/index.ts",
          "content": "export { default as Menubar } from './Menubar.vue'\nexport { default as MenubarCheckboxItem } from './MenubarCheckboxItem.vue'\nexport { default as MenubarContent } from './MenubarContent.vue'\nexport { default as MenubarGroup } from './MenubarGroup.vue'\nexport { default as MenubarItem } from './MenubarItem.vue'\nexport { default as MenubarLabel } from './MenubarLabel.vue'\nexport { default as MenubarMenu } from './MenubarMenu.vue'\nexport { default as MenubarRadioGroup } from './MenubarRadioGroup.vue'\nexport { default as MenubarRadioItem } from './MenubarRadioItem.vue'\nexport { default as MenubarSeparator } from './MenubarSeparator.vue'\nexport { default as MenubarShortcut } from './MenubarShortcut.vue'\nexport { default as MenubarSub } from './MenubarSub.vue'\nexport { default as MenubarSubContent } from './MenubarSubContent.vue'\nexport { default as MenubarSubTrigger } from './MenubarSubTrigger.vue'\nexport { default as MenubarTrigger } from './MenubarTrigger.vue'\n",
          "type": "registry:ui"
        },
        {
          "path": "Menubar/Menubar.vue",
          "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport {\n  MenubarRoot,\n  type MenubarRootEmits,\n  type MenubarRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarRootEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarRoot\n    data-slot=\"menubar\"\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </MenubarRoot>\n</template>\n",
          "type": "registry:ui"
        },
        {
          "path": "Menubar/MenubarCheckboxItem.vue",
          "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { Check } from '@lucide/vue'\nimport {\n  MenubarCheckboxItem,\n  type MenubarCheckboxItemEmits,\n  type MenubarCheckboxItemProps,\n  MenubarItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarCheckboxItemEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarCheckboxItem\n    data-slot=\"menubar-checkbox-item\"\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      `focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,\n      props.class,\n    )\"\n  >\n    <span class=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n      <MenubarItemIndicator>\n        <Check class=\"size-4\" />\n      </MenubarItemIndicator>\n    </span>\n    <slot />\n  </MenubarCheckboxItem>\n</template>\n",
          "type": "registry:ui"
        },
        {
          "path": "Menubar/MenubarContent.vue",
          "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport {\n  MenubarContent,\n  type MenubarContentProps,\n  MenubarPortal,\n  useForwardProps,\n} from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<MenubarContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    align: 'start',\n    alignOffset: -4,\n    sideOffset: 8,\n  },\n)\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarPortal>\n    <MenubarContent\n      data-slot=\"menubar-content\"\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[12rem] origin-(--reka-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </MenubarContent>\n  </MenubarPortal>\n</template>\n",
          "type": "registry:ui"
        },
        {
          "path": "Menubar/MenubarGroup.vue",
          "content": "<script setup lang=\"ts\">\nimport { MenubarGroup, type MenubarGroupProps } from 'reka-ui'\n\nconst props = defineProps<MenubarGroupProps>()\n</script>\n\n<template>\n  <MenubarGroup\n    data-slot=\"menubar-group\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </MenubarGroup>\n</template>\n",
          "type": "registry:ui"
        },
        {
          "path": "Menubar/MenubarItem.vue",
          "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport {\n  MenubarItem,\n  type MenubarItemEmits,\n  type MenubarItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarItemProps & {\n  class?: HTMLAttributes['class']\n  inset?: boolean\n  variant?: 'default' | 'destructive'\n}>()\n\nconst emits = defineEmits<MenubarItemEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class', 'inset', 'variant')\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarItem\n    data-slot=\"menubar-item\"\n    :data-inset=\"inset ? '' : undefined\"\n    :data-variant=\"variant\"\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      `focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:!text-destructive-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,\n      props.class,\n    )\"\n  >\n    <slot />\n  </MenubarItem>\n</template>\n",
          "type": "registry:ui"
        },
        {
          "path": "Menubar/MenubarLabel.vue",
          "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { MenubarLabel, type MenubarLabelProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\nconst delegatedProps = reactiveOmit(props, 'class', 'inset')\n</script>\n\n<template>\n  <MenubarLabel\n    :data-inset=\"inset ? '' : undefined\"\n    v-bind=\"delegatedProps\"\n    :class=\"cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', props.class)\"\n  >\n    <slot />\n  </MenubarLabel>\n</template>\n",
          "type": "registry:ui"
        },
        {
          "path": "Menubar/MenubarMenu.vue",
          "content": "<script setup lang=\"ts\">\nimport { MenubarMenu, type MenubarMenuProps } from 'reka-ui'\n\nconst props = defineProps<MenubarMenuProps>()\n</script>\n\n<template>\n  <MenubarMenu\n    data-slot=\"menubar-menu\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </MenubarMenu>\n</template>\n",
          "type": "registry:ui"
        },
        {
          "path": "Menubar/MenubarRadioGroup.vue",
          "content": "<script setup lang=\"ts\">\nimport {\n  MenubarRadioGroup,\n  type MenubarRadioGroupEmits,\n  type MenubarRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<MenubarRadioGroupProps>()\nconst emits = defineEmits<MenubarRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <MenubarRadioGroup\n    data-slot=\"menubar-radio-group\"\n    v-bind=\"forwarded\"\n  >\n    <slot />\n  </MenubarRadioGroup>\n</template>\n",
          "type": "registry:ui"
        },
        {
          "path": "Menubar/MenubarRadioItem.vue",
          "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { Circle } from '@lucide/vue'\nimport {\n  MenubarItemIndicator,\n  MenubarRadioItem,\n  type MenubarRadioItemEmits,\n  type MenubarRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarRadioItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarRadioItemEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarRadioItem\n    data-slot=\"menubar-radio-item\"\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      `focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,\n      props.class,\n    )\"\n  >\n    <span class=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n      <MenubarItemIndicator>\n        <Circle class=\"size-2 fill-current\" />\n      </MenubarItemIndicator>\n    </span>\n    <slot />\n  </MenubarRadioItem>\n</template>\n",
          "type": "registry:ui"
        },
        {
          "path": "Menubar/MenubarSeparator.vue",
          "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { MenubarSeparator, type MenubarSeparatorProps, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarSeparator\n    data-slot=\"menubar-separator\"\n    :class=\" cn('bg-border -mx-1 my-1 h-px', props.class)\"\n    v-bind=\"forwardedProps\"\n  />\n</template>\n",
          "type": "registry:ui"
        },
        {
          "path": "Menubar/MenubarShortcut.vue",
          "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span\n    data-slot=\"menubar-shortcut\"\n    :class=\"cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)\"\n  >\n    <slot />\n  </span>\n</template>\n",
          "type": "registry:ui"
        },
        {
          "path": "Menubar/MenubarSub.vue",
          "content": "<script setup lang=\"ts\">\nimport { MenubarSub, type MenubarSubEmits, useForwardPropsEmits } from 'reka-ui'\n\ninterface MenubarSubRootProps {\n  defaultOpen?: boolean\n  open?: boolean\n}\n\nconst props = defineProps<MenubarSubRootProps>()\nconst emits = defineEmits<MenubarSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <MenubarSub\n    data-slot=\"menubar-sub\"\n    v-bind=\"forwarded\"\n  >\n    <slot />\n  </MenubarSub>\n</template>\n",
          "type": "registry:ui"
        },
        {
          "path": "Menubar/MenubarSubContent.vue",
          "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport {\n  MenubarPortal,\n  MenubarSubContent,\n  type MenubarSubContentEmits,\n  type MenubarSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarSubContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarSubContentEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarPortal>\n    <MenubarSubContent\n      data-slot=\"menubar-sub-content\"\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--reka-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </MenubarSubContent>\n  </MenubarPortal>\n</template>\n",
          "type": "registry:ui"
        },
        {
          "path": "Menubar/MenubarSubTrigger.vue",
          "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { ChevronRight } from '@lucide/vue'\nimport { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = reactiveOmit(props, 'class', 'inset')\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarSubTrigger\n    data-slot=\"menubar-sub-trigger\"\n    :data-inset=\"inset ? '' : undefined\"\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRight class=\"ml-auto size-4\" />\n  </MenubarSubTrigger>\n</template>\n",
          "type": "registry:ui"
        },
        {
          "path": "Menubar/MenubarTrigger.vue",
          "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { MenubarTrigger, type MenubarTriggerProps, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarTrigger\n    data-slot=\"menubar-trigger\"\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </MenubarTrigger>\n</template>\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "native-select",
      "type": "registry:ui",
      "title": "Native Select",
      "description": "Native Select components for StackTrace UI.",
      "dependencies": [
        "@lucide/vue",
        "@vueuse/core",
        "reka-ui"
      ],
      "files": [
        {
          "path": "NativeSelect/index.ts",
          "content": "export { default as NativeSelect } from './NativeSelect.vue'\nexport { default as NativeSelectOptGroup } from './NativeSelectOptGroup.vue'\nexport { default as NativeSelectOption } from './NativeSelectOption.vue'\n",
          "type": "registry:ui"
        },
        {
          "path": "NativeSelect/NativeSelect.vue",
          "content": "<template>\n  <div\n    class=\"group/native-select relative w-fit has-[select:disabled]:opacity-50\"\n    data-slot=\"native-select-wrapper\"\n  >\n    <select\n      v-bind=\"{ ...$attrs, ...delegatedProps }\"\n      v-model=\"modelValue\"\n      data-slot=\"native-select\"\n      :class=\"cn(\n        'border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed',\n        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3',\n        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',\n        props.class,\n      )\"\n    >\n      <slot />\n    </select>\n    <ChevronDownIcon\n      class=\"text-muted-foreground pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 opacity-50 select-none\"\n      aria-hidden=\"true\"\n      data-slot=\"native-select-icon\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { AcceptableValue } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { ChevronDownIcon } from '@lucide/vue'\nimport { reactiveOmit, useVModel } from '@vueuse/core'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<{ modelValue?: AcceptableValue | AcceptableValue[], class?: HTMLAttributes['class'] }>()\n\nconst emit = defineEmits<{\n  'update:modelValue': AcceptableValue\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emit, {\n  passive: true,\n  defaultValue: '',\n})\n\nconst delegatedProps = reactiveOmit(props, 'class')\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "NativeSelect/NativeSelectOptGroup.vue",
          "content": "<template>\n  <optgroup data-slot=\"native-select-optgroup\" :class=\"cn('bg-popover text-popover-foreground', props.class)\">\n    <slot />\n  </optgroup>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "NativeSelect/NativeSelectOption.vue",
          "content": "<template>\n  <option data-slot=\"native-select-option\" :class=\"cn('bg-popover text-popover-foreground', props.class)\">\n    <slot />\n  </option>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "navigation-menu",
      "type": "registry:ui",
      "title": "Navigation Menu",
      "description": "Navigation Menu components for StackTrace UI.",
      "dependencies": [
        "@lucide/vue",
        "@vueuse/core",
        "class-variance-authority",
        "reka-ui"
      ],
      "files": [
        {
          "path": "NavigationMenu/index.ts",
          "content": "import { cva } from 'class-variance-authority'\n\nexport { default as NavigationMenu } from './NavigationMenu.vue'\nexport { default as NavigationMenuContent } from './NavigationMenuContent.vue'\nexport { default as NavigationMenuIndicator } from './NavigationMenuIndicator.vue'\nexport { default as NavigationMenuItem } from './NavigationMenuItem.vue'\nexport { default as NavigationMenuLink } from './NavigationMenuLink.vue'\nexport { default as NavigationMenuList } from './NavigationMenuList.vue'\nexport { default as NavigationMenuTrigger } from './NavigationMenuTrigger.vue'\nexport { default as NavigationMenuViewport } from './NavigationMenuViewport.vue'\n\nexport const navigationMenuTriggerStyle = cva(\n  'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[active]:bg-accent data-[active]:text-accent-foreground data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-3 focus-visible:outline-1',\n)\n",
          "type": "registry:ui"
        },
        {
          "path": "NavigationMenu/NavigationMenu.vue",
          "content": "<template>\n  <NavigationMenuRoot\n    data-slot=\"navigation-menu\"\n    :data-viewport=\"viewport\"\n    v-bind=\"forwarded\"\n    :class=\"cn('group/navigation-menu relative flex max-w-max flex-1 items-center justify-center', props.class)\"\n  >\n    <slot />\n    <NavigationMenuViewport v-if=\"viewport\" />\n  </NavigationMenuRoot>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport {\n  NavigationMenuRoot,\n  type NavigationMenuRootEmits,\n  type NavigationMenuRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport NavigationMenuViewport from './NavigationMenuViewport.vue'\n\nconst props = withDefaults(defineProps<NavigationMenuRootProps & {\n  class?: HTMLAttributes['class']\n  viewport?: boolean\n}>(), {\n  viewport: true,\n})\nconst emits = defineEmits<NavigationMenuRootEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class', 'viewport')\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "NavigationMenu/NavigationMenuContent.vue",
          "content": "<template>\n  <NavigationMenuContent\n    data-slot=\"navigation-menu-content\"\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      `data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto`,\n      `group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none`,\n      props.class,\n    )\"\n  >\n    <slot />\n  </NavigationMenuContent>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport {\n  NavigationMenuContent,\n  type NavigationMenuContentEmits,\n  type NavigationMenuContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<NavigationMenuContentEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "NavigationMenu/NavigationMenuIndicator.vue",
          "content": "<template>\n  <NavigationMenuIndicator\n    data-slot=\"navigation-menu-indicator\"\n    v-bind=\"forwardedProps\"\n    :class=\"cn('data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden', props.class)\"\n  >\n    <div class=\"bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md\" />\n  </NavigationMenuIndicator>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { NavigationMenuIndicator, type NavigationMenuIndicatorProps, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "NavigationMenu/NavigationMenuItem.vue",
          "content": "<template>\n  <NavigationMenuItem\n    data-slot=\"navigation-menu-item\"\n    v-bind=\"delegatedProps\"\n    :class=\"cn('relative', props.class)\"\n  >\n    <slot />\n  </NavigationMenuItem>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { NavigationMenuItem, type NavigationMenuItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "NavigationMenu/NavigationMenuLink.vue",
          "content": "<template>\n  <NavigationMenuLink\n    data-slot=\"navigation-menu-link\"\n    v-bind=\"forwarded\"\n    :as=\"Link\"\n    :class=\"cn(`'data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4'`, props.class)\"\n  >\n    <slot />\n  </NavigationMenuLink>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport {\n  NavigationMenuLink,\n  type NavigationMenuLinkEmits,\n  type NavigationMenuLinkProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Link } from '@inertiajs/vue3'\n\nconst props = defineProps<NavigationMenuLinkProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<NavigationMenuLinkEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "NavigationMenu/NavigationMenuList.vue",
          "content": "<template>\n  <NavigationMenuList\n    data-slot=\"navigation-menu-list\"\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'group flex flex-1 list-none items-center justify-center gap-1',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </NavigationMenuList>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { NavigationMenuList, type NavigationMenuListProps, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "NavigationMenu/NavigationMenuTrigger.vue",
          "content": "<template>\n  <NavigationMenuTrigger\n    data-slot=\"navigation-menu-trigger\"\n    v-bind=\"forwardedProps\"\n    :class=\"cn(navigationMenuTriggerStyle(), 'group', props.class)\"\n  >\n    <slot />\n    <ChevronDown\n      class=\"relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180\"\n      aria-hidden=\"true\"\n    />\n  </NavigationMenuTrigger>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { ChevronDown } from '@lucide/vue'\nimport {\n  NavigationMenuTrigger,\n  type NavigationMenuTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { navigationMenuTriggerStyle } from '.'\n\nconst props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "NavigationMenu/NavigationMenuViewport.vue",
          "content": "<template>\n  <div class=\"absolute top-full left-0 isolate z-50 flex justify-center\">\n    <NavigationMenuViewport\n      data-slot=\"navigation-menu-viewport\"\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--reka-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--reka-navigation-menu-viewport-width)]',\n          props.class,\n        )\n      \"\n    />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport {\n  NavigationMenuViewport,\n  type NavigationMenuViewportProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "number-field",
      "type": "registry:ui",
      "title": "Number Field",
      "description": "Number Field components for StackTrace UI.",
      "dependencies": [
        "@lucide/vue",
        "@vueuse/core",
        "reka-ui"
      ],
      "files": [
        {
          "path": "NumberField/index.ts",
          "content": "export { default as NumberField } from './NumberField.vue'\nexport { default as NumberFieldContent } from './NumberFieldContent.vue'\nexport { default as NumberFieldDecrement } from './NumberFieldDecrement.vue'\nexport { default as NumberFieldIncrement } from './NumberFieldIncrement.vue'\nexport { default as NumberFieldInput } from './NumberFieldInput.vue'\n",
          "type": "registry:ui"
        },
        {
          "path": "NumberField/NumberField.vue",
          "content": "<script setup lang=\"ts\">\nimport type { NumberFieldRootEmits, NumberFieldRootProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { NumberFieldRoot, useForwardPropsEmits } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NumberFieldRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<NumberFieldRootEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NumberFieldRoot v-bind=\"forwarded\" :class=\"cn('grid gap-1.5', props.class)\">\n    <slot />\n  </NumberFieldRoot>\n</template>\n",
          "type": "registry:ui"
        },
        {
          "path": "NumberField/NumberFieldContent.vue",
          "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('relative [&>[data-slot=input]]:has-[[data-slot=increment]]:pr-5 [&>[data-slot=input]]:has-[[data-slot=decrement]]:pl-5', props.class)\">\n    <slot />\n  </div>\n</template>\n",
          "type": "registry:ui"
        },
        {
          "path": "NumberField/NumberFieldDecrement.vue",
          "content": "<script setup lang=\"ts\">\nimport type { NumberFieldDecrementProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { Minus } from '@lucide/vue'\nimport { NumberFieldDecrement, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NumberFieldDecrementProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NumberFieldDecrement data-slot=\"decrement\" v-bind=\"forwarded\" :class=\"cn('absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20', props.class)\">\n    <slot>\n      <Minus class=\"h-4 w-4\" />\n    </slot>\n  </NumberFieldDecrement>\n</template>\n",
          "type": "registry:ui"
        },
        {
          "path": "NumberField/NumberFieldIncrement.vue",
          "content": "<script setup lang=\"ts\">\nimport type { NumberFieldIncrementProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { Plus } from '@lucide/vue'\nimport { NumberFieldIncrement, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NumberFieldIncrementProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NumberFieldIncrement data-slot=\"increment\" v-bind=\"forwarded\" :class=\"cn('absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3', props.class)\">\n    <slot>\n      <Plus class=\"h-4 w-4\" />\n    </slot>\n  </NumberFieldIncrement>\n</template>\n",
          "type": "registry:ui"
        },
        {
          "path": "NumberField/NumberFieldInput.vue",
          "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { NumberFieldInput } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <NumberFieldInput\n    data-slot=\"input\"\n    :class=\"cn('flex h-9 w-full rounded-md border border-input bg-transparent py-1 text-sm text-center shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n  />\n</template>\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "pagination",
      "type": "registry:ui",
      "title": "Pagination",
      "description": "Pagination components for StackTrace UI.",
      "dependencies": [
        "@lucide/vue",
        "@vueuse/core",
        "reka-ui"
      ],
      "registryDependencies": [
        "@stacktrace/button"
      ],
      "files": [
        {
          "path": "Pagination/index.ts",
          "content": "export { default as Pagination } from './Pagination.vue'\nexport { default as PaginationContent } from './PaginationContent.vue'\nexport { default as PaginationEllipsis } from './PaginationEllipsis.vue'\nexport { default as PaginationFirst } from './PaginationFirst.vue'\nexport { default as PaginationItem } from './PaginationItem.vue'\nexport { default as PaginationLast } from './PaginationLast.vue'\nexport { default as PaginationNext } from './PaginationNext.vue'\nexport { default as PaginationPrevious } from './PaginationPrevious.vue'\n",
          "type": "registry:ui"
        },
        {
          "path": "Pagination/Pagination.vue",
          "content": "<template>\n  <PaginationRoot\n    v-slot=\"slotProps\"\n    data-slot=\"pagination\"\n    v-bind=\"forwarded\"\n    :class=\"cn('mx-auto flex w-full justify-center', props.class)\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </PaginationRoot>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { PaginationRoot, type PaginationRootEmits, type PaginationRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<PaginationRootProps & {\n  class?: HTMLAttributes['class']\n}>()\nconst emits = defineEmits<PaginationRootEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Pagination/PaginationContent.vue",
          "content": "<template>\n  <PaginationList\n    v-slot=\"slotProps\"\n    data-slot=\"pagination-content\"\n    v-bind=\"delegatedProps\"\n    :class=\"cn('flex flex-row items-center gap-1', props.class)\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </PaginationList>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { PaginationList, type PaginationListProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<PaginationListProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Pagination/PaginationEllipsis.vue",
          "content": "<template>\n  <PaginationEllipsis\n    data-slot=\"pagination-ellipsis\"\n    v-bind=\"delegatedProps\"\n    :class=\"cn('flex size-9 items-center justify-center', props.class)\"\n  >\n    <slot>\n      <MoreHorizontal class=\"size-4\" />\n      <span class=\"sr-only\">More pages</span>\n    </slot>\n  </PaginationEllipsis>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { MoreHorizontal } from '@lucide/vue'\nimport { PaginationEllipsis, type PaginationEllipsisProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Pagination/PaginationFirst.vue",
          "content": "<template>\n  <PaginationFirst\n    data-slot=\"pagination-first\"\n    :class=\"cn(buttonVariants({ variant: 'ghost', size }), 'gap-1 px-2.5 sm:pr-2.5', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <slot>\n      <ChevronLeftIcon />\n      <span class=\"hidden sm:block\">First</span>\n    </slot>\n  </PaginationFirst>\n</template>\n\n<script setup lang=\"ts\">\nimport type { PaginationFirstProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { ChevronLeftIcon } from '@lucide/vue'\nimport { PaginationFirst, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants, type ButtonVariants } from '@/registry/stacktrace/ui/Button'\n\nconst props = withDefaults(defineProps<PaginationFirstProps & {\n  size?: ButtonVariants['size']\n  class?: HTMLAttributes['class']\n}>(), {\n  size: 'default',\n})\n\nconst delegatedProps = reactiveOmit(props, 'class', 'size')\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Pagination/PaginationItem.vue",
          "content": "<template>\n  <PaginationListItem\n    data-slot=\"pagination-item\"\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      buttonVariants({\n        variant: isActive ? 'outline' : 'ghost',\n        size,\n      }),\n      props.class)\"\n  >\n    <slot />\n  </PaginationListItem>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { PaginationListItem, type PaginationListItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants, type ButtonVariants } from '@/registry/stacktrace/ui/Button'\n\nconst props = withDefaults(defineProps<PaginationListItemProps & {\n  size?: ButtonVariants['size']\n  class?: HTMLAttributes['class']\n  isActive?: boolean\n}>(), {\n  size: 'icon',\n})\n\nconst delegatedProps = reactiveOmit(props, 'class', 'size', 'isActive')\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Pagination/PaginationLast.vue",
          "content": "<template>\n  <PaginationLast\n    data-slot=\"pagination-last\"\n    :class=\"cn(buttonVariants({ variant: 'ghost', size }), 'gap-1 px-2.5 sm:pr-2.5', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <slot>\n      <span class=\"hidden sm:block\">Last</span>\n      <ChevronRightIcon />\n    </slot>\n  </PaginationLast>\n</template>\n\n<script setup lang=\"ts\">\nimport type { PaginationLastProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { ChevronRightIcon } from '@lucide/vue'\nimport { PaginationLast, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants, type ButtonVariants } from '@/registry/stacktrace/ui/Button'\n\nconst props = withDefaults(defineProps<PaginationLastProps & {\n  size?: ButtonVariants['size']\n  class?: HTMLAttributes['class']\n}>(), {\n  size: 'default',\n})\n\nconst delegatedProps = reactiveOmit(props, 'class', 'size')\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Pagination/PaginationNext.vue",
          "content": "<template>\n  <PaginationNext\n    data-slot=\"pagination-next\"\n    :class=\"cn(buttonVariants({ variant: 'ghost', size }), 'gap-1 px-2.5 sm:pr-2.5', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <slot>\n      <span class=\"hidden sm:block\">Next</span>\n      <ChevronRightIcon />\n    </slot>\n  </PaginationNext>\n</template>\n\n<script setup lang=\"ts\">\nimport type { PaginationNextProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { ChevronRightIcon } from '@lucide/vue'\nimport { PaginationNext, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants, type ButtonVariants } from '@/registry/stacktrace/ui/Button'\n\nconst props = withDefaults(defineProps<PaginationNextProps & {\n  size?: ButtonVariants['size']\n  class?: HTMLAttributes['class']\n}>(), {\n  size: 'default',\n})\n\nconst delegatedProps = reactiveOmit(props, 'class', 'size')\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Pagination/PaginationPrevious.vue",
          "content": "<template>\n  <PaginationPrev\n    data-slot=\"pagination-previous\"\n    :class=\"cn(buttonVariants({ variant: 'ghost', size }), 'gap-1 px-2.5 sm:pr-2.5', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <slot>\n      <ChevronLeftIcon />\n      <span class=\"hidden sm:block\">Previous</span>\n    </slot>\n  </PaginationPrev>\n</template>\n\n<script setup lang=\"ts\">\nimport type { PaginationPrevProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { ChevronLeftIcon } from '@lucide/vue'\nimport { PaginationPrev, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants, type ButtonVariants } from '@/registry/stacktrace/ui/Button'\n\nconst props = withDefaults(defineProps<PaginationPrevProps & {\n  size?: ButtonVariants['size']\n  class?: HTMLAttributes['class']\n}>(), {\n  size: 'default',\n})\n\nconst delegatedProps = reactiveOmit(props, 'class', 'size')\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "panel",
      "type": "registry:ui",
      "title": "Panel",
      "description": "Panel components for StackTrace UI.",
      "dependencies": [
        "reka-ui"
      ],
      "files": [
        {
          "path": "Panel/index.ts",
          "content": "export { default as Panel } from './Panel.vue'\nexport { default as PanelContent } from './PanelContent.vue'\nexport { default as PanelFooter } from './PanelFooter.vue'\nexport { default as PanelHeader } from './PanelHeader.vue'\nexport { default as PanelItem } from './PanelItem.vue'\nexport { default as PanelTitle } from './PanelTitle.vue'\n",
          "type": "registry:ui"
        },
        {
          "path": "Panel/Panel.vue",
          "content": "<template>\n  <Primitive v-bind=\"props\">\n    <slot />\n  </Primitive>\n</template>\n<script setup lang=\"ts\">\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Panel/PanelContent.vue",
          "content": "<template>\n  <div class=\"flex flex-col divide-y divide-border/50\">\n    <slot />\n  </div>\n</template>\n\n",
          "type": "registry:ui"
        },
        {
          "path": "Panel/PanelFooter.vue",
          "content": "<template>\n  <div class=\"border-t py-4\">\n    <slot />\n  </div>\n</template>\n",
          "type": "registry:ui"
        },
        {
          "path": "Panel/PanelHeader.vue",
          "content": "<template>\n  <div :class=\"cn('border-b py-4', $attrs.class || '')\">\n    <slot />\n  </div>\n</template>\n<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Panel/PanelItem.vue",
          "content": "<template>\n  <div class=\"py-4\">\n    <div v-if=\"label\" class=\"flex flex-col sm:flex-row\">\n      <div class=\"sm:w-2/5 text-muted-foreground font-medium text-sm\">\n        {{ label }}\n      </div>\n      <div class=\"mt-0.5 sm:mt-0 sm:w-3/5 text-foreground font-medium text-sm\">\n        <slot />\n      </div>\n    </div>\n\n    <slot v-else />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\ndefineProps<{\n  label?: string | undefined\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Panel/PanelTitle.vue",
          "content": "<template>\n  <h3 class=\"font-semibold text-sm\">\n    <slot />\n  </h3>\n</template>\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "pin-input",
      "type": "registry:ui",
      "title": "Pin Input",
      "description": "Pin Input components for StackTrace UI.",
      "dependencies": [
        "@lucide/vue",
        "@vueuse/core",
        "reka-ui"
      ],
      "files": [
        {
          "path": "PinInput/index.ts",
          "content": "export { default as PinInput } from './PinInput.vue'\nexport { default as PinInputGroup } from './PinInputGroup.vue'\nexport { default as PinInputSeparator } from './PinInputSeparator.vue'\nexport { default as PinInputSlot } from './PinInputSlot.vue'\n",
          "type": "registry:ui"
        },
        {
          "path": "PinInput/PinInput.vue",
          "content": "<template>\n  <PinInputRoot\n    data-slot=\"pin-input\"\n    v-bind=\"forwarded\" :class=\"cn('flex items-center gap-2 has-disabled:opacity-50 disabled:cursor-not-allowed', props.class)\"\n  >\n    <slot />\n  </PinInputRoot>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { PinInputRoot, type PinInputRootEmits, type PinInputRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<PinInputRootProps & { class?: HTMLAttributes['class'] }>(), {\n  modelValue: () => [],\n})\nconst emits = defineEmits<PinInputRootEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "PinInput/PinInputGroup.vue",
          "content": "<template>\n  <Primitive\n    data-slot=\"pin-input-group\"\n    v-bind=\"forwardedProps\"\n    :class=\"cn('flex items-center', props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()\nconst delegatedProps = reactiveOmit(props, 'class')\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "PinInput/PinInputSeparator.vue",
          "content": "<template>\n  <Primitive\n    data-slot=\"pin-input-separator\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <Minus />\n    </slot>\n  </Primitive>\n</template>\n\n<script setup lang=\"ts\">\nimport { Minus } from '@lucide/vue'\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps>()\nconst forwardedProps = useForwardProps(props)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "PinInput/PinInputSlot.vue",
          "content": "<template>\n  <PinInputInput\n    data-slot=\"pin-input-slot\"\n    v-bind=\"forwardedProps\"\n    :class=\"cn('border-input focus:border-ring focus:ring-ring/50 focus:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:focus:aria-invalid:ring-destructive/40 aria-invalid:border-destructive focus:aria-invalid:border-destructive relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none text-center first:rounded-l-md first:border-l last:rounded-r-md focus:z-10 focus:ring-3', props.class)\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { PinInputInput, type PinInputInputProps, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<PinInputInputProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "popover",
      "type": "registry:ui",
      "title": "Popover",
      "description": "Popover components for StackTrace UI.",
      "dependencies": [
        "@vueuse/core",
        "reka-ui"
      ],
      "files": [
        {
          "path": "Popover/index.ts",
          "content": "export { default as Popover } from './Popover.vue'\nexport { default as PopoverAnchor } from './PopoverAnchor.vue'\nexport { default as PopoverContent } from './PopoverContent.vue'\nexport { default as PopoverTrigger } from './PopoverTrigger.vue'\n",
          "type": "registry:ui"
        },
        {
          "path": "Popover/Popover.vue",
          "content": "<template>\n  <PopoverRoot\n    data-slot=\"popover\"\n    v-bind=\"forwarded\"\n  >\n    <slot />\n  </PopoverRoot>\n</template>\n\n<script setup lang=\"ts\">\nimport type { PopoverRootEmits, PopoverRootProps } from 'reka-ui'\nimport { PopoverRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<PopoverRootProps>()\nconst emits = defineEmits<PopoverRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Popover/PopoverAnchor.vue",
          "content": "<template>\n  <PopoverAnchor\n    data-slot=\"popover-anchor\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </PopoverAnchor>\n</template>\n\n<script setup lang=\"ts\">\nimport type { PopoverAnchorProps } from 'reka-ui'\nimport { PopoverAnchor } from 'reka-ui'\n\nconst props = defineProps<PopoverAnchorProps>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Popover/PopoverContent.vue",
          "content": "<template>\n  <PopoverPortal :to=\"to\">\n    <PopoverContent\n      data-slot=\"popover-content\"\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n      :class=\"\n        cn(\n          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md origin-(--reka-popover-content-transform-origin) outline-hidden',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </PopoverContent>\n  </PopoverPortal>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport {\n  PopoverContent,\n  type PopoverContentEmits,\n  type PopoverContentProps,\n  PopoverPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<PopoverContentProps & {\n    class?: HTMLAttributes['class']\n    to?: string | HTMLElement\n  }>(),\n  {\n    align: 'center',\n    sideOffset: 4,\n  },\n)\nconst emits = defineEmits<PopoverContentEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class', 'to')\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Popover/PopoverTrigger.vue",
          "content": "<template>\n  <PopoverTrigger\n    data-slot=\"popover-trigger\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </PopoverTrigger>\n</template>\n\n<script setup lang=\"ts\">\nimport { PopoverTrigger, type PopoverTriggerProps } from 'reka-ui'\n\nconst props = defineProps<PopoverTriggerProps>()\n</script>\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "progress",
      "type": "registry:ui",
      "title": "Progress",
      "description": "Progress components for StackTrace UI.",
      "dependencies": [
        "@vueuse/core",
        "reka-ui"
      ],
      "files": [
        {
          "path": "Progress/index.ts",
          "content": "export { default as Progress } from './Progress.vue'\n",
          "type": "registry:ui"
        },
        {
          "path": "Progress/Progress.vue",
          "content": "<template>\n  <ProgressRoot\n    data-slot=\"progress\"\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'bg-primary/20 relative h-2 w-full overflow-hidden rounded-full',\n        props.class,\n      )\n    \"\n  >\n    <ProgressIndicator\n      data-slot=\"progress-indicator\"\n      class=\"bg-primary h-full w-full flex-1 transition-all\"\n      :style=\"`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`\"\n    />\n  </ProgressRoot>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport {\n  ProgressIndicator,\n  ProgressRoot,\n  type ProgressRootProps,\n} from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<ProgressRootProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    modelValue: 0,\n  },\n)\n\nconst delegatedProps = reactiveOmit(props, 'class')\n</script>\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "radio-group",
      "type": "registry:ui",
      "title": "Radio Group",
      "description": "Radio Group components for StackTrace UI.",
      "dependencies": [
        "@lucide/vue",
        "@vueuse/core",
        "reka-ui"
      ],
      "files": [
        {
          "path": "RadioGroup/index.ts",
          "content": "export { default as RadioGroup } from './RadioGroup.vue'\nexport { default as RadioGroupItem } from './RadioGroupItem.vue'\n",
          "type": "registry:ui"
        },
        {
          "path": "RadioGroup/RadioGroup.vue",
          "content": "<template>\n  <RadioGroupRoot\n    data-slot=\"radio-group\"\n    :class=\"cn('grid gap-3', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <slot />\n  </RadioGroupRoot>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<RadioGroupRootEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "RadioGroup/RadioGroupItem.vue",
          "content": "<template>\n  <RadioGroupItem\n    data-slot=\"radio-group-item\"\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <RadioGroupIndicator\n      data-slot=\"radio-group-indicator\"\n      class=\"relative flex items-center justify-center\"\n    >\n      <CircleIcon class=\"fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2\" />\n    </RadioGroupIndicator>\n  </RadioGroupItem>\n</template>\n\n<script setup lang=\"ts\">\nimport type { RadioGroupItemProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { CircleIcon } from '@lucide/vue'\nimport {\n  RadioGroupIndicator,\n  RadioGroupItem,\n\n  useForwardProps,\n} from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "range-calendar",
      "type": "registry:ui",
      "title": "Range Calendar",
      "description": "Range Calendar components for StackTrace UI.",
      "dependencies": [
        "@lucide/vue",
        "@vueuse/core",
        "reka-ui"
      ],
      "registryDependencies": [
        "@stacktrace/button"
      ],
      "files": [
        {
          "path": "RangeCalendar/index.ts",
          "content": "export { default as RangeCalendar } from './RangeCalendar.vue'\nexport { default as RangeCalendarCell } from './RangeCalendarCell.vue'\nexport { default as RangeCalendarCellTrigger } from './RangeCalendarCellTrigger.vue'\nexport { default as RangeCalendarGrid } from './RangeCalendarGrid.vue'\nexport { default as RangeCalendarGridBody } from './RangeCalendarGridBody.vue'\nexport { default as RangeCalendarGridHead } from './RangeCalendarGridHead.vue'\nexport { default as RangeCalendarGridRow } from './RangeCalendarGridRow.vue'\nexport { default as RangeCalendarHeadCell } from './RangeCalendarHeadCell.vue'\nexport { default as RangeCalendarHeader } from './RangeCalendarHeader.vue'\nexport { default as RangeCalendarHeading } from './RangeCalendarHeading.vue'\nexport { default as RangeCalendarNextButton } from './RangeCalendarNextButton.vue'\nexport { default as RangeCalendarPrevButton } from './RangeCalendarPrevButton.vue'\n",
          "type": "registry:ui"
        },
        {
          "path": "RangeCalendar/RangeCalendar.vue",
          "content": "<template>\n  <RangeCalendarRoot\n    v-slot=\"{ grid, weekDays }\"\n    data-slot=\"range-calendar\"\n    :class=\"cn('p-3', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <RangeCalendarHeader>\n      <RangeCalendarHeading />\n\n      <div class=\"flex items-center gap-1\">\n        <RangeCalendarPrevButton />\n        <RangeCalendarNextButton />\n      </div>\n    </RangeCalendarHeader>\n\n    <div class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <RangeCalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <RangeCalendarGridHead>\n          <RangeCalendarGridRow>\n            <RangeCalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </RangeCalendarHeadCell>\n          </RangeCalendarGridRow>\n        </RangeCalendarGridHead>\n        <RangeCalendarGridBody>\n          <RangeCalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <RangeCalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <RangeCalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </RangeCalendarCell>\n          </RangeCalendarGridRow>\n        </RangeCalendarGridBody>\n      </RangeCalendarGrid>\n    </div>\n  </RangeCalendarRoot>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { RangeCalendarRoot, type RangeCalendarRootEmits, type RangeCalendarRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNextButton, RangeCalendarPrevButton } from '.'\n\nconst props = defineProps<RangeCalendarRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<RangeCalendarRootEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "RangeCalendar/RangeCalendarCell.vue",
          "content": "<template>\n  <RangeCalendarCell\n    data-slot=\"range-calendar-cell\"\n    :class=\"cn('relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:bg-accent first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-selection-end])]:rounded-r-md [&:has([data-selected][data-selection-start])]:rounded-l-md', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCell>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { RangeCalendarCell, type RangeCalendarCellProps, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RangeCalendarCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "RangeCalendar/RangeCalendarCellTrigger.vue",
          "content": "<template>\n  <RangeCalendarCellTrigger\n    data-slot=\"range-calendar-trigger\"\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-8 w-8 p-0 font-normal data-[selected]:opacity-100',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selection Start\n      'data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground',\n      // Selection End\n      'data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCellTrigger>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/stacktrace/ui/Button'\n\nconst props = withDefaults(defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>(), {\n  as: 'button',\n})\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "RangeCalendar/RangeCalendarGrid.vue",
          "content": "<template>\n  <RangeCalendarGrid\n    data-slot=\"range-calendar-grid\"\n    :class=\"cn('w-full border-collapse space-x-1', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarGrid>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { RangeCalendarGrid, type RangeCalendarGridProps, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RangeCalendarGridProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "RangeCalendar/RangeCalendarGridBody.vue",
          "content": "<template>\n  <RangeCalendarGridBody\n    data-slot=\"range-calendar-grid-body\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </RangeCalendarGridBody>\n</template>\n\n<script lang=\"ts\" setup>\nimport { RangeCalendarGridBody, type RangeCalendarGridBodyProps } from 'reka-ui'\n\nconst props = defineProps<RangeCalendarGridBodyProps>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "RangeCalendar/RangeCalendarGridHead.vue",
          "content": "<template>\n  <RangeCalendarGridHead\n    data-slot=\"range-calendar-grid-head\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </RangeCalendarGridHead>\n</template>\n\n<script lang=\"ts\" setup>\nimport { RangeCalendarGridHead, type RangeCalendarGridHeadProps } from 'reka-ui'\n\nconst props = defineProps<RangeCalendarGridHeadProps>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "RangeCalendar/RangeCalendarGridRow.vue",
          "content": "<template>\n  <RangeCalendarGridRow\n    data-slot=\"range-calendar-grid-row\"\n    :class=\"cn('flex', props.class)\" v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarGridRow>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { RangeCalendarGridRow, type RangeCalendarGridRowProps, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RangeCalendarGridRowProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "RangeCalendar/RangeCalendarHeadCell.vue",
          "content": "<template>\n  <RangeCalendarHeadCell\n    data-slot=\"range-calendar-head-cell\"\n    :class=\"cn('w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarHeadCell>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { RangeCalendarHeadCell, type RangeCalendarHeadCellProps, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RangeCalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "RangeCalendar/RangeCalendarHeader.vue",
          "content": "<template>\n  <RangeCalendarHeader\n    data-slot=\"range-calendar-header\"\n    :class=\"cn('flex justify-center pt-1 relative items-center w-full', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarHeader>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { RangeCalendarHeader, type RangeCalendarHeaderProps, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RangeCalendarHeaderProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "RangeCalendar/RangeCalendarHeading.vue",
          "content": "<template>\n  <RangeCalendarHeading\n    v-slot=\"{ headingValue }\"\n    data-slot=\"range-calendar-heading\"\n    :class=\"cn('text-sm font-medium', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot :heading-value>\n      {{ headingValue }}\n    </slot>\n  </RangeCalendarHeading>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { RangeCalendarHeading, type RangeCalendarHeadingProps, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RangeCalendarHeadingProps & { class?: HTMLAttributes['class'] }>()\n\ndefineSlots<{\n  default: (props: { headingValue: string }) => any\n}>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "RangeCalendar/RangeCalendarNextButton.vue",
          "content": "<template>\n  <RangeCalendarNext\n    data-slot=\"range-calendar-next-button\"\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'absolute right-1',\n      'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRight class=\"size-4\" />\n    </slot>\n  </RangeCalendarNext>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { ChevronRight } from '@lucide/vue'\nimport { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/stacktrace/ui/Button'\n\nconst props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "RangeCalendar/RangeCalendarPrevButton.vue",
          "content": "<template>\n  <RangeCalendarPrev\n    data-slot=\"range-calendar-prev-button\"\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'absolute left-1',\n      'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeft class=\"size-4\" />\n    </slot>\n  </RangeCalendarPrev>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { ChevronLeft } from '@lucide/vue'\nimport { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/stacktrace/ui/Button'\n\nconst props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "resizable",
      "type": "registry:ui",
      "title": "Resizable",
      "description": "Resizable components for StackTrace UI.",
      "dependencies": [
        "@lucide/vue",
        "@vueuse/core",
        "reka-ui"
      ],
      "files": [
        {
          "path": "Resizable/index.ts",
          "content": "export { default as ResizableHandle } from './ResizableHandle.vue'\nexport { default as ResizablePanel } from './ResizablePanel.vue'\nexport { default as ResizablePanelGroup } from './ResizablePanelGroup.vue'\n",
          "type": "registry:ui"
        },
        {
          "path": "Resizable/ResizableHandle.vue",
          "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { GripVertical } from '@lucide/vue'\nimport { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes['class'], withHandle?: boolean }>()\nconst emits = defineEmits<SplitterResizeHandleEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class', 'withHandle')\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SplitterResizeHandle\n    data-slot=\"resizable-handle\"\n    v-bind=\"forwarded\"\n    :class=\"cn('bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[orientation=vertical]:h-px data-[orientation=vertical]:w-full data-[orientation=vertical]:after:left-0 data-[orientation=vertical]:after:h-1 data-[orientation=vertical]:after:w-full data-[orientation=vertical]:after:-translate-y-1/2 data-[orientation=vertical]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90', props.class)\"\n  >\n    <template v-if=\"props.withHandle\">\n      <div class=\"bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border\">\n        <GripVertical class=\"size-2.5\" />\n      </div>\n    </template>\n  </SplitterResizeHandle>\n</template>\n",
          "type": "registry:ui"
        },
        {
          "path": "Resizable/ResizablePanel.vue",
          "content": "<script setup lang=\"ts\">\nimport type { SplitterPanelEmits, SplitterPanelProps } from 'reka-ui'\nimport { SplitterPanel, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<SplitterPanelProps>()\nconst emits = defineEmits<SplitterPanelEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <SplitterPanel\n    data-slot=\"resizable-panel\"\n    v-bind=\"forwarded\"\n  >\n    <slot />\n  </SplitterPanel>\n</template>\n",
          "type": "registry:ui"
        },
        {
          "path": "Resizable/ResizablePanelGroup.vue",
          "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { SplitterGroup, type SplitterGroupEmits, type SplitterGroupProps, useForwardPropsEmits } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SplitterGroupProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<SplitterGroupEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SplitterGroup\n    data-slot=\"resizable-panel-group\"\n    v-bind=\"forwarded\"\n    :class=\"cn('flex h-full w-full data-[orientation=vertical]:flex-col', props.class)\"\n  >\n    <slot />\n  </SplitterGroup>\n</template>\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "scroll-area",
      "type": "registry:ui",
      "title": "Scroll Area",
      "description": "Scroll Area components for StackTrace UI.",
      "dependencies": [
        "@vueuse/core",
        "reka-ui"
      ],
      "files": [
        {
          "path": "ScrollArea/index.ts",
          "content": "export { default as ScrollArea } from './ScrollArea.vue'\nexport { default as ScrollBar } from './ScrollBar.vue'\n",
          "type": "registry:ui"
        },
        {
          "path": "ScrollArea/ScrollArea.vue",
          "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport {\n  ScrollAreaCorner,\n  ScrollAreaRoot,\n  type ScrollAreaRootProps,\n  ScrollAreaViewport,\n} from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport ScrollBar from './ScrollBar.vue'\n\nconst props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n</script>\n\n<template>\n  <ScrollAreaRoot\n    data-slot=\"scroll-area\"\n    v-bind=\"delegatedProps\"\n    :class=\"cn('relative', props.class)\"\n  >\n    <ScrollAreaViewport\n      data-slot=\"scroll-area-viewport\"\n      class=\"focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-3 focus-visible:outline-1\"\n    >\n      <slot />\n    </ScrollAreaViewport>\n    <ScrollBar />\n    <ScrollAreaCorner />\n  </ScrollAreaRoot>\n</template>\n",
          "type": "registry:ui"
        },
        {
          "path": "ScrollArea/ScrollBar.vue",
          "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {\n  orientation: 'vertical',\n})\n\nconst delegatedProps = reactiveOmit(props, 'class')\n</script>\n\n<template>\n  <ScrollAreaScrollbar\n    data-slot=\"scroll-area-scrollbar\"\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn('flex touch-none p-px transition-colors select-none',\n         orientation === 'vertical'\n           && 'h-full w-2.5 border-l border-l-transparent',\n         orientation === 'horizontal'\n           && 'h-2.5 flex-col border-t border-t-transparent',\n         props.class)\"\n  >\n    <ScrollAreaThumb\n      data-slot=\"scroll-area-thumb\"\n      class=\"bg-border relative flex-1 rounded-full\"\n    />\n  </ScrollAreaScrollbar>\n</template>\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "select",
      "type": "registry:ui",
      "title": "Select",
      "description": "Select components for StackTrace UI.",
      "dependencies": [
        "@lucide/vue",
        "@vueuse/core",
        "reka-ui"
      ],
      "files": [
        {
          "path": "Select/index.ts",
          "content": "export { default as Select } from './Select.vue'\nexport { default as SelectContent } from './SelectContent.vue'\nexport { default as SelectGroup } from './SelectGroup.vue'\nexport { default as SelectItem } from './SelectItem.vue'\nexport { default as SelectItemText } from './SelectItemText.vue'\nexport { default as SelectLabel } from './SelectLabel.vue'\nexport { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'\nexport { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'\nexport { default as SelectSeparator } from './SelectSeparator.vue'\nexport { default as SelectTrigger } from './SelectTrigger.vue'\nexport { default as SelectValue } from './SelectValue.vue'\n",
          "type": "registry:ui"
        },
        {
          "path": "Select/Select.vue",
          "content": "<template>\n  <SelectRoot\n    data-slot=\"select\"\n    v-bind=\"forwarded\"\n  >\n    <slot />\n  </SelectRoot>\n</template>\n\n<script setup lang=\"ts\">\nimport type { SelectRootEmits, SelectRootProps } from 'reka-ui'\nimport { SelectRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<SelectRootProps>()\nconst emits = defineEmits<SelectRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Select/SelectContent.vue",
          "content": "<template>\n  <SelectPortal>\n    <SelectContent\n      data-slot=\"select-content\"\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n      :class=\"cn(\n        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--reka-select-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border shadow-md',\n        position === 'popper'\n          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n        props.class,\n      )\n      \"\n    >\n      <SelectScrollUpButton />\n      <SelectViewport :class=\"cn('p-1', position === 'popper' && 'h-[var(--reka-select-trigger-height)] w-full min-w-[var(--reka-select-trigger-width)] scroll-my-1')\">\n        <slot />\n      </SelectViewport>\n      <SelectScrollDownButton />\n    </SelectContent>\n  </SelectPortal>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport {\n  SelectContent,\n  type SelectContentEmits,\n  type SelectContentProps,\n  SelectPortal,\n  SelectViewport,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    position: 'popper',\n  },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Select/SelectGroup.vue",
          "content": "<template>\n  <SelectGroup\n    data-slot=\"select-group\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </SelectGroup>\n</template>\n\n<script setup lang=\"ts\">\nimport { SelectGroup, type SelectGroupProps } from 'reka-ui'\n\nconst props = defineProps<SelectGroupProps>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Select/SelectItem.vue",
          "content": "<template>\n  <SelectItem\n    data-slot=\"select-item\"\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        `focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2`,\n        props.class,\n      )\n    \"\n  >\n    <span class=\"absolute right-2 flex size-3.5 items-center justify-center\">\n      <SelectItemIndicator>\n        <Check class=\"size-4\" />\n      </SelectItemIndicator>\n    </span>\n\n    <SelectItemText>\n      <slot />\n    </SelectItemText>\n  </SelectItem>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { Check } from '@lucide/vue'\nimport {\n  SelectItem,\n  SelectItemIndicator,\n  type SelectItemProps,\n  SelectItemText,\n  useForwardProps,\n} from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Select/SelectItemText.vue",
          "content": "<template>\n  <SelectItemText\n    data-slot=\"select-item-text\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </SelectItemText>\n</template>\n\n<script setup lang=\"ts\">\nimport { SelectItemText, type SelectItemTextProps } from 'reka-ui'\n\nconst props = defineProps<SelectItemTextProps>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Select/SelectLabel.vue",
          "content": "<template>\n  <SelectLabel\n    data-slot=\"select-label\"\n    :class=\"cn('px-2 py-1.5 text-sm font-medium', props.class)\"\n  >\n    <slot />\n  </SelectLabel>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { SelectLabel, type SelectLabelProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Select/SelectScrollDownButton.vue",
          "content": "<template>\n  <SelectScrollDownButton\n    data-slot=\"select-scroll-down-button\"\n    v-bind=\"forwardedProps\"\n    :class=\"cn('flex cursor-default items-center justify-center py-1', props.class)\"\n  >\n    <slot>\n      <ChevronDown class=\"size-4\" />\n    </slot>\n  </SelectScrollDownButton>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { ChevronDown } from '@lucide/vue'\nimport { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Select/SelectScrollUpButton.vue",
          "content": "<template>\n  <SelectScrollUpButton\n    data-slot=\"select-scroll-up-button\"\n    v-bind=\"forwardedProps\"\n    :class=\"cn('flex cursor-default items-center justify-center py-1', props.class)\"\n  >\n    <slot>\n      <ChevronUp class=\"size-4\" />\n    </slot>\n  </SelectScrollUpButton>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { ChevronUp } from '@lucide/vue'\nimport { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Select/SelectSeparator.vue",
          "content": "<template>\n  <SelectSeparator\n    data-slot=\"select-separator\"\n    v-bind=\"delegatedProps\"\n    :class=\"cn('bg-border pointer-events-none -mx-1 my-1 h-px', props.class)\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { SelectSeparator, type SelectSeparatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Select/SelectTrigger.vue",
          "content": "<template>\n  <SelectTrigger\n    data-slot=\"select-trigger\"\n    :data-size=\"size\"\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      `border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,\n      props.class,\n    )\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <ChevronDown class=\"size-4 opacity-50\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { ChevronDown } from '@lucide/vue'\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'], size?: 'sm' | 'default' }>(),\n  { size: 'default' },\n)\n\nconst delegatedProps = reactiveOmit(props, 'class', 'size')\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Select/SelectValue.vue",
          "content": "<template>\n  <SelectValue\n    data-slot=\"select-value\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </SelectValue>\n</template>\n\n<script setup lang=\"ts\">\nimport { SelectValue, type SelectValueProps } from 'reka-ui'\n\nconst props = defineProps<SelectValueProps>()\n</script>\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "separator",
      "type": "registry:ui",
      "title": "Separator",
      "description": "Separator components for StackTrace UI.",
      "dependencies": [
        "@vueuse/core",
        "reka-ui"
      ],
      "files": [
        {
          "path": "Separator/index.ts",
          "content": "export { default as Separator } from './Separator.vue'\n",
          "type": "registry:ui"
        },
        {
          "path": "Separator/Separator.vue",
          "content": "<template>\n  <Separator\n    data-slot=\"separator-root\"\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        `bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px`,\n        props.class,\n      )\n    \"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { Separator, type SeparatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<\n  SeparatorProps & { class?: HTMLAttributes['class'] }\n>(), {\n  orientation: 'horizontal',\n  decorative: true,\n})\n\nconst delegatedProps = reactiveOmit(props, 'class')\n</script>\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "sheet",
      "type": "registry:ui",
      "title": "Sheet",
      "description": "Sheet components for StackTrace UI.",
      "dependencies": [
        "@lucide/vue",
        "@vueuse/core",
        "reka-ui"
      ],
      "files": [
        {
          "path": "Sheet/index.ts",
          "content": "export { default as Sheet } from './Sheet.vue'\nexport { default as SheetClose } from './SheetClose.vue'\nexport { default as SheetContent } from './SheetContent.vue'\nexport { default as SheetDescription } from './SheetDescription.vue'\nexport { default as SheetFooter } from './SheetFooter.vue'\nexport { default as SheetHeader } from './SheetHeader.vue'\nexport { default as SheetTitle } from './SheetTitle.vue'\nexport { default as SheetTrigger } from './SheetTrigger.vue'\n",
          "type": "registry:ui"
        },
        {
          "path": "Sheet/Sheet.vue",
          "content": "<template>\n  <DialogRoot v-if=\"control\" data-slot=\"sheet\" v-bind=\"forwarded\" v-model:open=\"control.active.value\">\n    <slot />\n  </DialogRoot>\n  <DialogRoot v-else data-slot=\"sheet\" v-bind=\"forwarded\">\n    <slot />\n  </DialogRoot>\n</template>\n\n<script setup lang=\"ts\">\nimport { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { type Toggle } from '@stacktrace/ui'\n\nconst props = defineProps<DialogRootProps & {\n  control?: Toggle\n}>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Sheet/SheetClose.vue",
          "content": "<template>\n  <DialogClose\n    data-slot=\"sheet-close\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </DialogClose>\n</template>\n\n<script setup lang=\"ts\">\nimport { DialogClose, type DialogCloseProps } from 'reka-ui'\n\nconst props = defineProps<DialogCloseProps>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Sheet/SheetContent.vue",
          "content": "<template>\n  <DialogPortal :to=\"to\">\n    <SheetOverlay />\n    <DialogContent\n      data-slot=\"sheet-content\"\n      :class=\"cn(\n        'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',\n        side === 'right'\n          && 'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',\n        side === 'left'\n          && 'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',\n        side === 'top'\n          && 'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',\n        side === 'bottom'\n          && 'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',\n        props.class)\"\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none\"\n      >\n        <X class=\"size-4\" />\n        <span class=\"sr-only\">Close</span>\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { X } from '@lucide/vue'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport SheetOverlay from './SheetOverlay.vue'\n\ninterface SheetContentProps extends DialogContentProps {\n  class?: HTMLAttributes['class']\n  side?: 'top' | 'right' | 'bottom' | 'left'\n  to?: string | HTMLElement\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SheetContentProps>(), {\n  side: 'right',\n})\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class', 'side')\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Sheet/SheetDescription.vue",
          "content": "<template>\n  <DialogDescription\n    data-slot=\"sheet-description\"\n    :class=\"cn('text-muted-foreground text-sm', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { DialogDescription, type DialogDescriptionProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Sheet/SheetFooter.vue",
          "content": "<template>\n  <div\n    data-slot=\"sheet-footer\"\n    :class=\"cn('mt-auto flex flex-col gap-2 p-4', props.class)\n    \"\n  >\n    <slot />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Sheet/SheetHeader.vue",
          "content": "<template>\n  <div\n    data-slot=\"sheet-header\"\n    :class=\"cn('flex flex-col gap-1.5 p-4', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Sheet/SheetOverlay.vue",
          "content": "<template>\n  <DialogOverlay\n    data-slot=\"sheet-overlay\"\n    :class=\"cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </DialogOverlay>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { DialogOverlay, type DialogOverlayProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogOverlayProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Sheet/SheetTitle.vue",
          "content": "<template>\n  <DialogTitle\n    data-slot=\"sheet-title\"\n    :class=\"cn('text-foreground font-semibold', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { DialogTitle, type DialogTitleProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Sheet/SheetTrigger.vue",
          "content": "<template>\n  <DialogTrigger\n    data-slot=\"sheet-trigger\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </DialogTrigger>\n</template>\n\n<script setup lang=\"ts\">\nimport { DialogTrigger, type DialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<DialogTriggerProps>()\n</script>\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "sidebar",
      "type": "registry:ui",
      "title": "Sidebar",
      "description": "Sidebar components for StackTrace UI.",
      "dependencies": [
        "@lucide/vue",
        "@vueuse/core",
        "class-variance-authority",
        "reka-ui"
      ],
      "registryDependencies": [
        "@stacktrace/button",
        "@stacktrace/collapsible",
        "@stacktrace/input",
        "@stacktrace/separator",
        "@stacktrace/sheet",
        "@stacktrace/skeleton",
        "@stacktrace/tooltip"
      ],
      "files": [
        {
          "path": "Sidebar/index.ts",
          "content": "import type { VariantProps } from 'class-variance-authority'\nimport type { HTMLAttributes } from 'vue'\nimport { cva } from 'class-variance-authority'\n\nexport interface SidebarProps {\n  side?: 'left' | 'right'\n  variant?: 'sidebar' | 'floating' | 'inset'\n  collapsible?: 'offcanvas' | 'icon' | 'none'\n  class?: HTMLAttributes['class']\n}\n\nexport { default as Sidebar } from './Sidebar.vue'\nexport { default as SidebarContent } from './SidebarContent.vue'\nexport { default as SidebarFooter } from './SidebarFooter.vue'\nexport { default as SidebarGroup } from './SidebarGroup.vue'\nexport { default as SidebarGroupAction } from './SidebarGroupAction.vue'\nexport { default as SidebarGroupContent } from './SidebarGroupContent.vue'\nexport { default as SidebarGroupLabel } from './SidebarGroupLabel.vue'\nexport { default as SidebarHeader } from './SidebarHeader.vue'\nexport { default as SidebarInput } from './SidebarInput.vue'\nexport { default as SidebarInset } from './SidebarInset.vue'\nexport { default as SidebarMenu } from './SidebarMenu.vue'\nexport { default as SidebarMenuAction } from './SidebarMenuAction.vue'\nexport { default as SidebarMenuBadge } from './SidebarMenuBadge.vue'\nexport { default as SidebarMenuButton } from './SidebarMenuButton.vue'\nexport { default as SidebarMenuItem } from './SidebarMenuItem.vue'\nexport { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue'\nexport { default as SidebarMenuSub } from './SidebarMenuSub.vue'\nexport { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue'\nexport { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue'\nexport { default as SidebarNavigation } from './SidebarNavigation.vue'\nexport { default as SidebarNavigationButton } from './SidebarNavigationButton.vue'\nexport { default as SidebarProvider } from './SidebarProvider.vue'\nexport { default as SidebarRail } from './SidebarRail.vue'\nexport { default as SidebarSeparator } from './SidebarSeparator.vue'\nexport { default as SidebarTrigger } from './SidebarTrigger.vue'\n\nexport { useSidebar } from './utils'\n\nexport const sidebarMenuButtonVariants = cva(\n  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n        outline:\n          'bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]',\n      },\n      size: {\n        default: 'h-8 text-sm',\n        sm: 'h-7 text-xs',\n        lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>\n",
          "type": "registry:ui"
        },
        {
          "path": "Sidebar/Sidebar.vue",
          "content": "<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    data-slot=\"sidebar\"\n    :class=\"cn('bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-slot=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <SheetHeader class=\"sr-only\">\n        <SheetTitle>Sidebar</SheetTitle>\n        <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n      </SheetHeader>\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else\n    class=\"group peer text-sidebar-foreground hidden md:block\"\n    data-slot=\"sidebar\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'\n          : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'\n          : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport type { SidebarProps } from '.'\nimport { cn } from '@/lib/utils'\nimport { Sheet, SheetContent } from '@/registry/stacktrace/ui/Sheet'\nimport SheetDescription from '@/registry/stacktrace/ui/Sheet/SheetDescription.vue'\nimport SheetHeader from '@/registry/stacktrace/ui/Sheet/SheetHeader.vue'\nimport SheetTitle from '@/registry/stacktrace/ui/Sheet/SheetTitle.vue'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Sidebar/SidebarContent.vue",
          "content": "<template>\n  <div\n    data-slot=\"sidebar-content\"\n    data-sidebar=\"content\"\n    :class=\"cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Sidebar/SidebarFooter.vue",
          "content": "<template>\n  <div\n    data-slot=\"sidebar-footer\"\n    data-sidebar=\"footer\"\n    :class=\"cn('flex flex-col gap-2 p-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Sidebar/SidebarGroup.vue",
          "content": "<template>\n  <div\n    data-slot=\"sidebar-group\"\n    data-sidebar=\"group\"\n    :class=\"cn('relative flex w-full min-w-0 flex-col p-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Sidebar/SidebarGroupAction.vue",
          "content": "<template>\n  <Primitive\n    data-slot=\"sidebar-group-action\"\n    data-sidebar=\"group-action\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(\n      'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n      'after:absolute after:-inset-2 md:after:hidden',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Primitive>\n</template>\n\n<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { Primitive } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<PrimitiveProps & {\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Sidebar/SidebarGroupContent.vue",
          "content": "<template>\n  <div\n    data-slot=\"sidebar-group-content\"\n    data-sidebar=\"group-content\"\n    :class=\"cn('w-full text-sm', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Sidebar/SidebarGroupLabel.vue",
          "content": "<template>\n  <Primitive\n    data-slot=\"sidebar-group-label\"\n    data-sidebar=\"group-label\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(\n      'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n      'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',\n      props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n\n<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { Primitive } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<PrimitiveProps & {\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Sidebar/SidebarHeader.vue",
          "content": "<template>\n  <div\n    data-slot=\"sidebar-header\"\n    data-sidebar=\"header\"\n    :class=\"cn('flex flex-col gap-2 p-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Sidebar/SidebarInput.vue",
          "content": "<template>\n  <Input\n    data-slot=\"sidebar-input\"\n    data-sidebar=\"input\"\n    :class=\"cn(\n      'bg-background h-8 w-full shadow-none',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Input>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Input } from '@/registry/stacktrace/ui/Input'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Sidebar/SidebarInset.vue",
          "content": "<template>\n  <main\n    data-slot=\"sidebar-inset\"\n    :class=\"cn(\n      'bg-background relative flex w-full flex-1 flex-col',\n      'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',\n      props.class,\n    )\"\n  >\n    <slot />\n  </main>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Sidebar/SidebarMenu.vue",
          "content": "<template>\n  <ul\n    data-slot=\"sidebar-menu\"\n    data-sidebar=\"menu\"\n    :class=\"cn('flex w-full min-w-0 flex-col gap-1', props.class)\"\n  >\n    <slot />\n  </ul>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Sidebar/SidebarMenuAction.vue",
          "content": "<template>\n  <Primitive\n    data-slot=\"sidebar-menu-action\"\n    data-sidebar=\"menu-action\"\n    :class=\"cn(\n      'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n      'after:absolute after:-inset-2 md:after:hidden',\n      'peer-data-[size=sm]/menu-button:top-1',\n      'peer-data-[size=default]/menu-button:top-1.5',\n      'peer-data-[size=lg]/menu-button:top-2.5',\n      'group-data-[collapsible=icon]:hidden',\n      showOnHover\n        && 'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',\n      props.class,\n    )\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </Primitive>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<PrimitiveProps & {\n  showOnHover?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  as: 'button',\n})\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Sidebar/SidebarMenuBadge.vue",
          "content": "<template>\n  <div\n    data-slot=\"sidebar-menu-badge\"\n    data-sidebar=\"menu-badge\"\n    :class=\"cn(\n      'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',\n      'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',\n      'peer-data-[size=sm]/menu-button:top-1',\n      'peer-data-[size=default]/menu-button:top-1.5',\n      'peer-data-[size=lg]/menu-button:top-2.5',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Sidebar/SidebarMenuButton.vue",
          "content": "<template>\n  <SidebarMenuButtonChild v-if=\"!tooltip\" v-bind=\"{ ...delegatedProps, ...$attrs }\">\n    <slot />\n  </SidebarMenuButtonChild>\n\n  <Tooltip v-else>\n    <TooltipTrigger as-child>\n      <SidebarMenuButtonChild v-bind=\"{ ...delegatedProps, ...$attrs }\">\n        <slot />\n      </SidebarMenuButtonChild>\n    </TooltipTrigger>\n    <TooltipContent\n      side=\"right\"\n      align=\"center\"\n      :hidden=\"state !== 'collapsed' || isMobile\"\n    >\n      <template v-if=\"typeof tooltip === 'string'\">\n        {{ tooltip }}\n      </template>\n      <component :is=\"tooltip\" v-else />\n    </TooltipContent>\n  </Tooltip>\n</template>\n\n<script setup lang=\"ts\">\nimport type { Component } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/registry/stacktrace/ui/Tooltip'\nimport SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'\nimport { useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps & {\n  tooltip?: string | Component\n}>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n\nconst { isMobile, state } = useSidebar()\n\nconst delegatedProps = reactiveOmit(props, 'tooltip')\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Sidebar/SidebarMenuButtonChild.vue",
          "content": "<template>\n  <Primitive\n    data-slot=\"sidebar-menu-button\"\n    data-sidebar=\"menu-button\"\n    :data-size=\"size\"\n    :data-active=\"isActive\"\n    :class=\"cn(sidebarMenuButtonVariants({ variant, size }), props.class)\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </Primitive>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { type SidebarMenuButtonVariants, sidebarMenuButtonVariants } from '.'\n\nexport interface SidebarMenuButtonProps extends PrimitiveProps {\n  variant?: SidebarMenuButtonVariants['variant']\n  size?: SidebarMenuButtonVariants['size']\n  isActive?: boolean\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Sidebar/SidebarMenuItem.vue",
          "content": "<template>\n  <li\n    data-slot=\"sidebar-menu-item\"\n    data-sidebar=\"menu-item\"\n    :class=\"cn('group/menu-item relative', props.class)\"\n  >\n    <slot />\n  </li>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Sidebar/SidebarMenuSkeleton.vue",
          "content": "<template>\n  <div\n    data-slot=\"sidebar-menu-skeleton\"\n    data-sidebar=\"menu-skeleton\"\n    :class=\"cn('flex h-8 items-center gap-2 rounded-md px-2', props.class)\"\n  >\n    <Skeleton\n      v-if=\"showIcon\"\n      class=\"size-4 rounded-md\"\n      data-sidebar=\"menu-skeleton-icon\"\n    />\n\n    <Skeleton\n      class=\"h-4 max-w-(--skeleton-width) flex-1\"\n      data-sidebar=\"menu-skeleton-text\"\n      :style=\"{ '--skeleton-width': width }\"\n    />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, type HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Skeleton } from '@/registry/stacktrace/ui/Skeleton'\n\nconst props = defineProps<{\n  showIcon?: boolean\n  class?: HTMLAttributes['class']\n}>()\n\nconst width = computed(() => {\n  return `${Math.floor(Math.random() * 40) + 50}%`\n})\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Sidebar/SidebarMenuSub.vue",
          "content": "<template>\n  <ul\n    data-slot=\"sidebar-menu-sub\"\n    data-sidebar=\"menu-badge\"\n    :class=\"cn(\n      'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </ul>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Sidebar/SidebarMenuSubButton.vue",
          "content": "<template>\n  <Primitive\n    data-slot=\"sidebar-menu-sub-button\"\n    data-sidebar=\"menu-sub-button\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :data-size=\"size\"\n    :data-active=\"isActive\"\n    :class=\"cn(\n      'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n      'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',\n      size === 'sm' && 'text-xs',\n      size === 'md' && 'text-sm',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Primitive>\n</template>\n\n<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { Primitive } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<PrimitiveProps & {\n  size?: 'sm' | 'md'\n  isActive?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  as: 'a',\n  size: 'md',\n})\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Sidebar/SidebarMenuSubItem.vue",
          "content": "<template>\n  <li\n    data-slot=\"sidebar-menu-sub-item\"\n    data-sidebar=\"menu-sub-item\"\n    :class=\"cn('group/menu-sub-item relative', props.class)\"\n  >\n    <slot />\n  </li>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Sidebar/SidebarNavigation.vue",
          "content": "<template>\n  <SidebarGroup v-for=\"item in navigation\">\n    <template v-if=\"item.hasChildren\">\n      <SidebarGroupLabel v-if=\"item.title\">{{ item.title }}</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          <template v-for=\"child in item.children\">\n            <template v-if=\"child.hasChildren\">\n              <Collapsible :default-open=\"child.isChildActive\" class=\"group/collapsible\">\n                <SidebarMenuItem>\n                  <CollapsibleTrigger as-child>\n                    <SidebarNavigationButton :item=\"child\" :as=\"SidebarMenuButton\">\n                      <ChevronRightIcon class=\"size-4 ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                    </SidebarNavigationButton>\n                  </CollapsibleTrigger>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      <template v-for=\"subChld in child.children\">\n                        <SidebarNavigationButton\n                          :item=\"subChld\"\n                          :as=\"SidebarMenuSubButton\"\n                          :is-active=\"subChld.isActive || subChld.isChildActive\"\n                        />\n                      </template>\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </SidebarMenuItem>\n              </Collapsible>\n            </template>\n            <template v-else>\n              <SidebarMenuItem>\n                <SidebarNavigationButton :item=\"child\" :as=\"SidebarMenuButton\" :is-active=\"child.isActive\" />\n              </SidebarMenuItem>\n            </template>\n          </template>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </template>\n    <template v-else>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarNavigationButton :item=\"item\" :as=\"SidebarMenuButton\" :is-active=\"item.isActive\" />\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </template>\n  </SidebarGroup>\n</template>\n\n<script setup lang=\"ts\">\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/registry/stacktrace/ui/Collapsible'\nimport { computed } from 'vue'\nimport SidebarMenuItem from './SidebarMenuItem.vue'\nimport SidebarGroup from './SidebarGroup.vue'\nimport SidebarGroupContent from './SidebarGroupContent.vue'\nimport SidebarGroupLabel from './SidebarGroupLabel.vue'\nimport SidebarMenu from './SidebarMenu.vue'\nimport SidebarMenuSub from './SidebarMenuSub.vue'\nimport SidebarNavigationButton from './SidebarNavigationButton.vue'\nimport SidebarMenuButton from './SidebarMenuButton.vue'\nimport SidebarMenuSubButton from './SidebarMenuSubButton.vue'\nimport { ChevronRightIcon } from '@lucide/vue'\nimport { type Menu, useNavigation } from '@stacktrace/ui'\n\nconst props = defineProps<{\n  menu: Menu\n}>()\n\nconst navigation = useNavigation(computed(() => props.menu))\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Sidebar/SidebarNavigationButton.vue",
          "content": "<template>\n  <component :is=\"as\" :as=\"markRaw(NavigationButton)\" :item=\"item\" :tooltip=\"item.title || undefined\">\n    <NavigationButtonIcon class=\"size-4\" />\n    <span>{{ item.title }}</span>\n    <SidebarMenuBadge v-if=\"item.badge\">{{ item.badge }}</SidebarMenuBadge>\n    <slot />\n  </component>\n</template>\n\n<script setup lang=\"ts\">\nimport SidebarMenuBadge from './SidebarMenuBadge.vue'\nimport { type Component, markRaw } from 'vue'\nimport { type NavigationItem } from '@stacktrace/ui'\nimport { NavigationButton, NavigationButtonIcon } from '@stacktrace/ui'\n\ndefineProps<{\n  item: NavigationItem\n  as: Component\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Sidebar/SidebarProvider.vue",
          "content": "<template>\n  <TooltipProvider :delay-duration=\"0\">\n    <div\n      data-slot=\"sidebar-wrapper\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH,\n        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n      }\"\n      :class=\"cn('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full', props.class)\"\n      v-bind=\"$attrs\"\n    >\n      <slot />\n    </div>\n  </TooltipProvider>\n</template>\n\n<script setup lang=\"ts\">\nimport { useEventListener, useMediaQuery, useVModel } from '@vueuse/core'\nimport { TooltipProvider } from 'reka-ui'\nimport { computed, type HTMLAttributes, type Ref, ref } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils'\n\nconst props = withDefaults(defineProps<{\n  defaultOpen?: boolean\n  open?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  defaultOpen: true,\n  open: undefined,\n})\n\nconst emits = defineEmits<{\n  'update:open': [open: boolean]\n}>()\n\nconst isMobile = useMediaQuery('(max-width: 768px)')\nconst openMobile = ref(false)\n\nfunction getRememberedOpenValue(defaultValue: boolean = false) {\n  const value = `; ${document.cookie}`\n  const parts = value.split(`; ${SIDEBAR_COOKIE_NAME}=`)\n  if (parts.length === 2) {\n    return parts.pop()?.split(';').shift() === 'true'\n  }\n\n  return defaultValue\n}\n\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: getRememberedOpenValue(props.defaultOpen ?? false),\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nfunction setOpen(value: boolean) {\n  open.value = value // emits('update:open', value)\n\n  // This sets the cookie to keep the sidebar state.\n  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n}\n\nfunction setOpenMobile(value: boolean) {\n  openMobile.value = value\n}\n\n// Helper to toggle the sidebar.\nfunction toggleSidebar() {\n  return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value)\n}\n\nuseEventListener('keydown', (event: KeyboardEvent) => {\n  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n    event.preventDefault()\n    toggleSidebar()\n  }\n})\n\n// We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n// This makes it easier to style the sidebar with Tailwind classes.\nconst state = computed(() => open.value ? 'expanded' : 'collapsed')\n\nprovideSidebarContext({\n  state,\n  open,\n  setOpen,\n  isMobile,\n  openMobile,\n  setOpenMobile,\n  toggleSidebar,\n})\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Sidebar/SidebarRail.vue",
          "content": "<template>\n  <button\n    data-sidebar=\"rail\"\n    data-slot=\"sidebar-rail\"\n    aria-label=\"Toggle Sidebar\"\n    :tabindex=\"-1\"\n    title=\"Toggle Sidebar\"\n    :class=\"cn(\n      'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',\n      'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',\n      '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n      'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',\n      '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',\n      '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',\n      props.class,\n    )\"\n    @click=\"toggleSidebar\"\n  >\n    <slot />\n  </button>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Sidebar/SidebarSeparator.vue",
          "content": "<template>\n  <Separator\n    data-slot=\"sidebar-separator\"\n    data-sidebar=\"separator\"\n    :class=\"cn('bg-sidebar-border mx-2 w-auto', props.class)\"\n  >\n    <slot />\n  </Separator>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Separator } from '@/registry/stacktrace/ui/Separator'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Sidebar/SidebarTrigger.vue",
          "content": "<template>\n  <Button\n    data-sidebar=\"trigger\"\n    data-slot=\"sidebar-trigger\"\n    variant=\"ghost\"\n    size=\"icon\"\n    :class=\"cn('h-7 w-7', props.class)\"\n    @click=\"toggleSidebar\"\n  >\n    <PanelLeft />\n    <span class=\"sr-only\">Toggle Sidebar</span>\n  </Button>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { PanelLeft } from '@lucide/vue'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/stacktrace/ui/Button'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Sidebar/utils.ts",
          "content": "import type { ComputedRef, Ref } from 'vue'\nimport { createContext } from 'reka-ui'\n\nexport const SIDEBAR_COOKIE_NAME = 'sidebar_state'\nexport const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nexport const SIDEBAR_WIDTH = '16rem'\nexport const SIDEBAR_WIDTH_MOBILE = '18rem'\nexport const SIDEBAR_WIDTH_ICON = '3rem'\nexport const SIDEBAR_KEYBOARD_SHORTCUT = 'b'\n\nexport const [useSidebar, provideSidebarContext] = createContext<{\n  state: ComputedRef<'expanded' | 'collapsed'>\n  open: Ref<boolean>\n  setOpen: (value: boolean) => void\n  isMobile: Ref<boolean>\n  openMobile: Ref<boolean>\n  setOpenMobile: (value: boolean) => void\n  toggleSidebar: () => void\n}>('Sidebar')\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "skeleton",
      "type": "registry:ui",
      "title": "Skeleton",
      "description": "Skeleton components for StackTrace UI.",
      "files": [
        {
          "path": "Skeleton/index.ts",
          "content": "export { default as Skeleton } from './Skeleton.vue'\n",
          "type": "registry:ui"
        },
        {
          "path": "Skeleton/Skeleton.vue",
          "content": "<template>\n  <div\n    data-slot=\"skeleton\"\n    :class=\"cn('animate-pulse rounded-md bg-primary/10', props.class)\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\ninterface SkeletonProps {\n  class?: HTMLAttributes['class']\n}\n\nconst props = defineProps<SkeletonProps>()\n</script>\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "slider",
      "type": "registry:ui",
      "title": "Slider",
      "description": "Slider components for StackTrace UI.",
      "dependencies": [
        "@vueuse/core",
        "reka-ui"
      ],
      "files": [
        {
          "path": "Slider/index.ts",
          "content": "export { default as Slider } from './Slider.vue'\n",
          "type": "registry:ui"
        },
        {
          "path": "Slider/Slider.vue",
          "content": "<template>\n  <SliderRoot\n    v-slot=\"{ modelValue }\"\n    data-slot=\"slider\"\n    :class=\"cn(\n      'relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',\n      props.class,\n    )\"\n    v-bind=\"forwarded\"\n  >\n    <SliderTrack\n      data-slot=\"slider-track\"\n      class=\"bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5\"\n    >\n      <SliderRange\n        data-slot=\"slider-range\"\n        class=\"bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full\"\n      />\n    </SliderTrack>\n\n    <SliderThumb\n      v-for=\"(_, key) in modelValue\"\n      :key=\"key\"\n      data-slot=\"slider-thumb\"\n      class=\"border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50\"\n    />\n  </SliderRoot>\n</template>\n\n<script setup lang=\"ts\">\nimport type { SliderRootEmits, SliderRootProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SliderRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<SliderRootEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "sonner",
      "type": "registry:ui",
      "title": "Sonner",
      "description": "Sonner components for StackTrace UI.",
      "dependencies": [
        "@lucide/vue",
        "vue-sonner"
      ],
      "files": [
        {
          "path": "Sonner/index.ts",
          "content": "export { default as Toaster } from './Sonner.vue'\n",
          "type": "registry:ui"
        },
        {
          "path": "Sonner/Sonner.vue",
          "content": "<template>\n  <Sonner\n    :class=\"cn('toaster group', props.class)\"\n    :style=\"{\n      '--normal-bg': 'var(--popover)',\n      '--normal-text': 'var(--popover-foreground)',\n      '--normal-border': 'var(--border)',\n      '--border-radius': 'var(--radius)',\n    }\"\n    v-bind=\"props\"\n  >\n    <template #success-icon>\n      <CircleCheckIcon class=\"size-4\" />\n    </template>\n    <template #info-icon>\n      <InfoIcon class=\"size-4\" />\n    </template>\n    <template #warning-icon>\n      <TriangleAlertIcon class=\"size-4\" />\n    </template>\n    <template #error-icon>\n      <OctagonXIcon class=\"size-4\" />\n    </template>\n    <template #loading-icon>\n      <div>\n        <Loader2Icon class=\"size-4 animate-spin\" />\n      </div>\n    </template>\n    <template #close-icon>\n      <XIcon class=\"size-4\" />\n    </template>\n  </Sonner>\n</template>\n\n<script lang=\"ts\" setup>\nimport { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon, XIcon } from '@lucide/vue'\nimport { toast, Toaster as Sonner, type ToasterProps } from 'vue-sonner'\nimport { useFlash } from '@stacktrace/ui'\nimport { cn } from '@/lib/utils'\nimport 'vue-sonner/style.css'\n\nconst props = defineProps<ToasterProps>()\n\nuseFlash('toast', event => {\n  const message = event as { title: string, content?: string | null }\n\n  toast(message.title, {\n    description: message.content || undefined,\n  })\n})\n</script>\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "spinner",
      "type": "registry:ui",
      "title": "Spinner",
      "description": "Spinner components for StackTrace UI.",
      "dependencies": [
        "@lucide/vue"
      ],
      "files": [
        {
          "path": "Spinner/index.ts",
          "content": "export { default as Spinner } from './Spinner.vue'\n",
          "type": "registry:ui"
        },
        {
          "path": "Spinner/Spinner.vue",
          "content": "<template>\n  <Loader2Icon\n    role=\"status\"\n    aria-label=\"Loading\"\n    :class=\"cn('size-4 animate-spin', props.class)\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { Loader2Icon } from '@lucide/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "stepper",
      "type": "registry:ui",
      "title": "Stepper",
      "description": "Stepper components for StackTrace UI.",
      "dependencies": [
        "@vueuse/core",
        "reka-ui"
      ],
      "files": [
        {
          "path": "Stepper/index.ts",
          "content": "export { default as Stepper } from './Stepper.vue'\nexport { default as StepperDescription } from './StepperDescription.vue'\nexport { default as StepperIndicator } from './StepperIndicator.vue'\nexport { default as StepperItem } from './StepperItem.vue'\nexport { default as StepperSeparator } from './StepperSeparator.vue'\nexport { default as StepperTitle } from './StepperTitle.vue'\nexport { default as StepperTrigger } from './StepperTrigger.vue'\n",
          "type": "registry:ui"
        },
        {
          "path": "Stepper/Stepper.vue",
          "content": "<template>\n  <StepperRoot\n    v-slot=\"slotProps\"\n    :class=\"cn(\n      'flex gap-2',\n      props.class,\n    )\"\n    v-bind=\"forwarded\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </StepperRoot>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { StepperRootEmits, StepperRootProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { StepperRoot, useForwardPropsEmits } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<StepperRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<StepperRootEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Stepper/StepperDescription.vue",
          "content": "<template>\n  <StepperDescription v-slot=\"slotProps\" v-bind=\"forwarded\" :class=\"cn('text-xs text-muted-foreground', props.class)\">\n    <slot v-bind=\"slotProps\" />\n  </StepperDescription>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { StepperDescriptionProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { StepperDescription, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<StepperDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Stepper/StepperIndicator.vue",
          "content": "<template>\n  <StepperIndicator\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'inline-flex items-center justify-center rounded-full text-muted-foreground/50 w-8 h-8',\n      // Disabled\n      'group-data-[disabled]:text-muted-foreground group-data-[disabled]:opacity-50',\n      // Active\n      'group-data-[state=active]:bg-primary group-data-[state=active]:text-primary-foreground',\n      // Completed\n      'group-data-[state=completed]:bg-accent group-data-[state=completed]:text-accent-foreground',\n      props.class,\n    )\"\n  >\n    <slot />\n  </StepperIndicator>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { StepperIndicatorProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { StepperIndicator, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<StepperIndicatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Stepper/StepperItem.vue",
          "content": "<template>\n  <StepperItem\n    v-slot=\"slotProps\"\n    v-bind=\"forwarded\"\n    :class=\"cn('flex items-center gap-2 group data-[disabled]:pointer-events-none', props.class)\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </StepperItem>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { StepperItemProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { StepperItem, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<StepperItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Stepper/StepperSeparator.vue",
          "content": "<template>\n  <StepperSeparator\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'bg-muted',\n      // Disabled\n      'group-data-[disabled]:bg-muted group-data-[disabled]:opacity-50',\n      // Completed\n      'group-data-[state=completed]:bg-accent-foreground',\n      props.class,\n    )\"\n  />\n</template>\n\n<script lang=\"ts\" setup>\nimport type { StepperSeparatorProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { StepperSeparator, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<StepperSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Stepper/StepperTitle.vue",
          "content": "<template>\n  <StepperTitle v-bind=\"forwarded\" :class=\"cn('text-md font-semibold whitespace-nowrap', props.class)\">\n    <slot />\n  </StepperTitle>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { StepperTitleProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { StepperTitle, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<StepperTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Stepper/StepperTrigger.vue",
          "content": "<template>\n  <StepperTrigger\n    v-bind=\"forwarded\"\n    :class=\"cn('p-1 flex flex-col items-center text-center gap-1 rounded-md', props.class)\"\n  >\n    <slot />\n  </StepperTrigger>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { StepperTriggerProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { StepperTrigger, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<StepperTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "switch",
      "type": "registry:ui",
      "title": "Switch",
      "description": "Switch components for StackTrace UI.",
      "dependencies": [
        "@vueuse/core",
        "reka-ui"
      ],
      "registryDependencies": [
        "@stacktrace/label"
      ],
      "files": [
        {
          "path": "Switch/index.ts",
          "content": "export { default as Switch } from './Switch.vue'\nexport { default as SwitchControl } from './SwitchControl.vue'\n",
          "type": "registry:ui"
        },
        {
          "path": "Switch/Switch.vue",
          "content": "<template>\n  <SwitchRoot\n    data-slot=\"switch\"\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50',\n      props.class,\n    )\"\n  >\n    <SwitchThumb\n      data-slot=\"switch-thumb\"\n      :class=\"cn('bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0')\"\n    >\n      <slot name=\"thumb\" />\n    </SwitchThumb>\n  </SwitchRoot>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport {\n  SwitchRoot,\n  type SwitchRootEmits,\n  type SwitchRootProps,\n  SwitchThumb,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<SwitchRootEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Switch/SwitchControl.vue",
          "content": "<template>\n  <div :class=\"cn('flex items-center space-x-2', props.class || '')\">\n    <Switch v-bind=\"forwarded\" :id=\"id\" />\n    <Label :for=\"id\">\n      <slot />\n    </Label>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { Switch } from '.'\nimport { Label } from '@/registry/stacktrace/ui/Label'\nimport { useId } from \"reka-ui\";\nimport { cn } from '@/lib/utils'\nimport {\n  type SwitchRootEmits,\n  type SwitchRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst id = useId()\n\nconst props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<SwitchRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "table",
      "type": "registry:ui",
      "title": "Table",
      "description": "Table components for StackTrace UI.",
      "dependencies": [
        "@lucide/vue",
        "@vueuse/core"
      ],
      "registryDependencies": [
        "@stacktrace/button",
        "@stacktrace/checkbox"
      ],
      "files": [
        {
          "path": "Table/BulkSelect.vue",
          "content": "<template>\n  <Checkbox\n      :indeterminate=\"isIndeterminate\"\n      :model-value=\"isChecked\"\n      @click=\"onChange\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { type SelectableRows } from \"./\";\nimport { computed, nextTick } from \"vue\";\nimport { Checkbox } from \"@/registry/stacktrace/ui/Checkbox\";\n\nconst props = defineProps<{\n  selectable: SelectableRows\n}>()\n\nconst isIndeterminate = computed(() => props.selectable.somethingSelected.value && !props.selectable.everythingSelected.value)\nconst isChecked = computed(() => props.selectable.everythingSelected.value)\n\nconst onChange = () =>{\n  nextTick(() => {\n    if (props.selectable.everythingSelected.value) {\n      props.selectable.clearSelection()\n    } else {\n      props.selectable.selectEverything()\n    }\n  })\n}\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Table/index.ts",
          "content": "import { computed, type ComputedRef, type Ref, ref, watch } from \"vue\";\n\nexport { default as Table } from './Table.vue'\nexport { default as TableBody } from './TableBody.vue'\nexport { default as TableCaption } from './TableCaption.vue'\nexport { default as TableCell } from './TableCell.vue'\nexport { default as TableEmpty } from './TableEmpty.vue'\nexport { default as TableFooter } from './TableFooter.vue'\nexport { default as TableHead } from './TableHead.vue'\nexport { default as TableHeader } from './TableHeader.vue'\nexport { default as TableRow } from './TableRow.vue'\n\nexport { default as BulkSelect } from './BulkSelect.vue'\nexport { default as RowSelect } from './RowSelect.vue'\nexport { default as SelectableTableRow } from './SelectableTableRow.vue'\nexport { default as Sorting } from './Sorting.vue'\n\nexport interface SelectableRows<T = string | number> {\n  selection: Ref<Array<T>>\n  somethingSelected: ComputedRef<boolean>\n  everythingSelected: ComputedRef<boolean>\n  selectedCount: ComputedRef<number>\n  totalCount: ComputedRef<number>\n  clearSelection: () => void\n  selectEverything: () => void\n  withSelection: (callback: (selection: Array<T>) => void) => void\n  availableRows: ComputedRef<Array<T>>\n  disabledRows: ComputedRef<Array<T>>\n}\n\nexport function useSelectableRows<T = string | number>(\n  available: ComputedRef<Array<T>>,\n  disabled?: ComputedRef<Array<T>>\n): SelectableRows<T> {\n  const selection = ref<Array<T>>([]) as Ref<Array<T>>\n\n  // Set to null, when rows are changed.\n  watch(available, () => {\n    selection.value = []\n  })\n\n  const disabledRows = disabled || computed(() => [])\n\n  const selectedCount = computed(() => selection.value.length)\n  const totalCount = computed(() => available.value.length - disabledRows.value.length)\n  const somethingSelected = computed(() => selectedCount.value > 0)\n  const everythingSelected = computed(() => somethingSelected.value && selectedCount.value == totalCount.value)\n\n  const clearSelection = () => {\n    selection.value = []\n  }\n\n  const isValueSelected = (value: T) => selection.value.includes(value)\n  const isValueDisabled = (value: T) => disabledRows.value.includes(value)\n\n  const selectEverything = () => {\n    available.value.forEach(it => {\n      if (!isValueSelected(it) && !isValueDisabled(it)) {\n        selection.value.push(it)\n      }\n    })\n  }\n\n  /**\n   * Run given callback when selection is not empty.\n   */\n  const withSelection = (callback: (selection: Array<T>) => void) => {\n    const selected = selection.value\n\n    if (selected.length > 0) {\n      callback(selected)\n    }\n  }\n\n  return {\n    selection,\n    somethingSelected,\n    everythingSelected,\n    selectEverything,\n    selectedCount,\n    totalCount,\n    clearSelection,\n    withSelection,\n    availableRows: available,\n    disabledRows,\n  }\n}\n",
          "type": "registry:ui"
        },
        {
          "path": "Table/RowSelect.vue",
          "content": "<template>\n  <Checkbox v-model=\"selectable\" :value=\"value\" :disabled=\"disabled\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { type ComputedRef, inject, type Ref } from \"vue\";\nimport { Checkbox } from \"@/registry/stacktrace/ui/Checkbox\";\n\nconst selectable = inject<Ref<Array<string | number>>>('selectedValues', () => {\n  throw new Error(\"The RowSelect must be inside SelectableTableRow\")\n}, true)\n\nconst value = inject<ComputedRef<string | number>>('value', () => {\n  throw new Error(\"The SelectableTableRow does not have a value set.\")\n}, true)\n\nconst disabled = inject<ComputedRef<boolean>>('disabled', () => {\n  throw new Error(\"The SelectableTableRow does not have a value set.\")\n}, true)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Table/SelectableTableRow.vue",
          "content": "<template>\n<TableRow v-bind=\"$attrs\" :data-state=\"isSelected && 'selected'\">\n  <slot />\n</TableRow>\n</template>\n\n<script setup lang=\"ts\">\nimport { useVModel } from \"@vueuse/core\";\nimport { computed, provide } from \"vue\";\nimport { TableRow } from './'\n\nconst emit = defineEmits(['update:modelValue'])\n\nconst props = withDefaults(defineProps<{\n  value: string | number\n  modelValue?: Array<string | number>\n  disabled?: boolean\n}>(), {\n  disabled: false,\n})\n\nconst val = useVModel(props, 'modelValue', emit)\n\nprovide('selectedValues', val)\nprovide('value', computed(() => props.value))\nprovide('disabled', computed(() => props.disabled))\n\nconst isSelected = computed(() => val.value?.includes(props.value))\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Table/Sorting.vue",
          "content": "<template>\n  <div class=\"inline-flex\">\n    <Button @click=\"toggle\" class=\"h-8 px-1 text-sm\" variant=\"ghost\" size=\"sm\">\n      <slot />\n\n      <template v-if=\"isApplied\">\n        <ChevronsUpIcon v-if=\"isAsc\" class=\"ml-1.5 w-4 h-4\" />\n        <ChevronsDownIcon v-else class=\"ml-1.5 w-4 h-4\" />\n      </template>\n      <ChevronsUpDownIcon v-else class=\"ml-1.5 w-4 h-4\" />\n    </Button>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ChevronsUpDownIcon, ChevronsUpIcon, ChevronsDownIcon } from \"@lucide/vue\";\nimport { computed } from \"vue\";\nimport { Button } from '@/registry/stacktrace/ui/Button'\n\nconst props = defineProps<{\n  value: string\n}>()\n\nconst column = defineModel<string | null>('column')\nconst direction = defineModel<'asc' | 'desc' | null>('direction')\n\nconst isApplied = computed(() => column.value === props.value)\nconst isAsc = computed(() => direction.value === 'asc')\n\nconst toggle = () => {\n  if (isApplied.value) {\n    if (direction.value == 'asc') {\n      direction.value = 'desc'\n    } else if (direction.value == 'desc') {\n      direction.value = null\n      column.value = null\n    } else {\n      direction.value = 'asc'\n    }\n  } else {\n    column.value = props.value\n    direction.value = 'asc'\n  }\n}\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Table/Table.vue",
          "content": "<template>\n  <div data-slot=\"table-container\" class=\"relative w-full overflow-auto\">\n    <table data-slot=\"table\" :class=\"cn('w-full caption-bottom text-sm', props.class)\">\n      <slot />\n    </table>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Table/TableBody.vue",
          "content": "<template>\n  <tbody\n    data-slot=\"table-body\"\n    :class=\"cn('[&_tr:last-child]:border-0', props.class)\"\n  >\n    <slot />\n  </tbody>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Table/TableCaption.vue",
          "content": "<template>\n  <caption\n    data-slot=\"table-caption\"\n    :class=\"cn('text-muted-foreground mt-4 text-sm', props.class)\"\n  >\n    <slot />\n  </caption>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Table/TableCell.vue",
          "content": "<template>\n  <td\n    data-slot=\"table-cell\"\n    :class=\"\n      cn(\n        'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </td>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Table/TableEmpty.vue",
          "content": "<template>\n  <TableRow>\n    <TableCell\n      :class=\"\n        cn(\n          'p-4 whitespace-nowrap align-middle text-sm text-foreground',\n          props.class,\n        )\n      \"\n      v-bind=\"delegatedProps\"\n    >\n      <div class=\"flex items-center justify-center py-10\">\n        <slot />\n      </div>\n    </TableCell>\n  </TableRow>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { cn } from '@/lib/utils'\nimport TableCell from './TableCell.vue'\nimport TableRow from './TableRow.vue'\n\nconst props = withDefaults(defineProps<{\n  class?: HTMLAttributes['class']\n  colspan?: number\n}>(), {\n  colspan: 1,\n})\n\nconst delegatedProps = reactiveOmit(props, 'class')\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Table/TableFooter.vue",
          "content": "<template>\n  <tfoot\n    data-slot=\"table-footer\"\n    :class=\"cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', props.class)\"\n  >\n    <slot />\n  </tfoot>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Table/TableHead.vue",
          "content": "<template>\n  <th\n    data-slot=\"table-head\"\n    :class=\"cn('text-muted-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', props.class)\"\n  >\n    <slot />\n  </th>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Table/TableHeader.vue",
          "content": "<template>\n  <thead\n    data-slot=\"table-header\"\n    :class=\"cn('[&_tr]:border-b', props.class)\"\n  >\n    <slot />\n  </thead>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Table/TableRow.vue",
          "content": "<template>\n  <tr\n    data-slot=\"table-row\"\n    :class=\"cn('hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors', props.class)\"\n  >\n    <slot />\n  </tr>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "tabs",
      "type": "registry:ui",
      "title": "Tabs",
      "description": "Tabs components for StackTrace UI.",
      "dependencies": [
        "@vueuse/core",
        "class-variance-authority",
        "reka-ui"
      ],
      "files": [
        {
          "path": "Tabs/index.ts",
          "content": "import { cva, type VariantProps } from 'class-variance-authority'\nimport { computed, type ComputedRef, inject, type MaybeRefOrGetter, provide, toValue } from 'vue'\n\nexport { default as Tabs } from './Tabs.vue'\nexport { default as TabsContent } from './TabsContent.vue'\nexport { default as TabsLink } from './TabsLink.vue'\nexport { default as TabsLinkList } from './TabsLinkList.vue'\nexport { default as TabsList } from './TabsList.vue'\nexport { default as TabsNavigation } from './TabsNavigation.vue'\nexport { default as TabsTrigger } from './TabsTrigger.vue'\n\nexport const tabsListVariants = cva(\n  'rounded-lg p-1',\n  {\n    variants: {\n      variant: {\n        default: 'bg-muted text-muted-foreground',\n        ghost: 'bg-transparent gap-1 p-0',\n      },\n      orientation: {\n        vertical: 'flex flex-col gap-1',\n        horizontal: 'inline-flex items-center justify-center w-fit',\n      }\n    },\n    defaultVariants: {\n      variant: 'default',\n      orientation: 'horizontal',\n    }\n  }\n)\nexport type TabsListVariants = VariantProps<typeof tabsListVariants>\n\nexport const tabsListItemVariants = cva(\n  'inline-flex items-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring focus-visible:ring-3 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\\'size-\\'])]:size-4',\n  {\n    variants: {\n      variant: {\n        default: 'data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground',\n        ghost: 'hover:bg-accent py-2 hover:text-accent-foreground dark:hover:bg-accent/50 data-[state=active]:bg-muted data-[state=active]:text-foreground',\n      },\n      orientation: {\n        vertical: 'px-4 py-2',\n        horizontal: '',\n      }\n    },\n    defaultVariants: {\n      variant: 'default',\n      orientation: 'horizontal',\n    }\n  }\n)\nexport type TabsListItemVariants = VariantProps<typeof tabsListItemVariants>\nexport type TabsVariants = TabsListVariants | TabsListItemVariants\n\nconst TabsContextKey = Symbol()\ninterface TabsContext {\n  variant: NonNullable<Parameters<typeof tabsListVariants>[0]>['variant']\n  orientation: NonNullable<Parameters<typeof tabsListVariants>[0]>['orientation']\n}\nexport function provideTabsContext(context: MaybeRefOrGetter<TabsContext>) {\n  provide(TabsContextKey, context)\n}\nexport function injectTabsContext(): ComputedRef<TabsContext | null> {\n  const value = inject<TabsContext>(TabsContextKey)\n\n  return computed(() => value ? toValue(value) : null)\n}\n",
          "type": "registry:ui"
        },
        {
          "path": "Tabs/Tabs.vue",
          "content": "<template>\n  <TabsRoot\n    data-slot=\"tabs\"\n    v-bind=\"forwarded\"\n    :class=\"cn('flex flex-col gap-2', props.class)\"\n  >\n    <slot />\n  </TabsRoot>\n</template>\n\n<script setup lang=\"ts\">\nimport { provideTabsContext, tabsListVariants } from '.'\nimport type { TabsRootEmits, TabsRootProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { TabsRoot, useForwardPropsEmits } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TabsRootProps & {\n  class?: HTMLAttributes['class']\n  variant?: NonNullable<Parameters<typeof tabsListVariants>[0]>['variant']\n}>()\nconst emits = defineEmits<TabsRootEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n\nprovideTabsContext(computed(() => ({\n  variant: props.variant || 'default',\n  orientation: 'horizontal',\n})))\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Tabs/TabsContent.vue",
          "content": "<template>\n  <TabsContent\n    data-slot=\"tabs-content\"\n    :class=\"cn('flex-1 outline-none', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </TabsContent>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { TabsContent, type TabsContentProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Tabs/TabsLink.vue",
          "content": "<template>\n  <Link\n    v-bind=\"props\"\n    :data-state=\"isActive ? 'active' : 'inactive'\"\n    :class=\"\n      cn(\n        tabsListItemVariants({\n          variant: context?.variant || 'default',\n          orientation: context?.orientation || 'horizontal',\n        }),\n        $attrs.class || undefined,\n      )\n    \"\n  >\n    <slot />\n  </Link>\n</template>\n\n<script setup lang=\"ts\">\nimport { Link, type InertiaLinkProps } from '@inertiajs/vue3'\nimport { cn } from '@/lib/utils'\nimport { computed } from 'vue'\nimport { useActiveLink } from '@stacktrace/ui'\nimport { injectTabsContext, tabsListItemVariants } from '.'\n\nconst context = injectTabsContext()\n\ninterface Props extends InertiaLinkProps {\n  active?: boolean | undefined\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  active: undefined\n})\n\nconst isLinkActive = useActiveLink(computed(() => {\n  const href = props.href\n\n  return { url: typeof href === 'string' ? href : '' }\n}))\n\nconst isActive = computed(() => props.active !== undefined ? props.active : isLinkActive.value)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Tabs/TabsLinkList.vue",
          "content": "<template>\n  <div :class=\"cn(tabsListVariants({ variant, orientation }), $attrs.class || undefined)\">\n    <slot />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { computed } from 'vue'\nimport { provideTabsContext, tabsListVariants } from '.'\n\nconst props = defineProps<{\n  variant?: NonNullable<Parameters<typeof tabsListVariants>[0]>['variant']\n  orientation?: NonNullable<Parameters<typeof tabsListVariants>[0]>['orientation']\n}>()\n\nprovideTabsContext(computed(() => ({\n  variant: props.variant || 'default',\n  orientation: props.orientation || 'horizontal',\n})))\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Tabs/TabsList.vue",
          "content": "<template>\n  <TabsList\n    data-slot=\"tabs-list\"\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      tabsListVariants({\n        variant: context?.variant || 'default',\n        orientation: context?.orientation || 'horizontal',\n      }),\n      props.class,\n    )\"\n  >\n    <slot />\n  </TabsList>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { TabsList, type TabsListProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { injectTabsContext, tabsListVariants } from '.'\n\nconst props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst context = injectTabsContext()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Tabs/TabsNavigation.vue",
          "content": "<template>\n  <TabsLinkList v-if=\"navigation.length > 0\" :orientation=\"orientation\" :variant=\"variant\">\n    <TabsNavigationItem v-for=\"item in navigation\" :item=\"item\" />\n  </TabsLinkList>\n</template>\n\n<script setup lang=\"ts\">\nimport { tabsListVariants } from '.'\nimport { computed } from 'vue'\nimport TabsLinkList from './TabsLinkList.vue'\nimport TabsNavigationItem from './TabsNavigationItem.vue'\nimport { type Menu, useNavigation } from '@stacktrace/ui'\n\nconst props = defineProps<{\n  menu: Menu\n  variant?: NonNullable<Parameters<typeof tabsListVariants>[0]>['variant']\n  orientation?: NonNullable<Parameters<typeof tabsListVariants>[0]>['orientation']\n}>()\n\nconst navigation = useNavigation(computed(() => props.menu))\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Tabs/TabsNavigationItem.vue",
          "content": "<template>\n  <NavigationButton\n    :item=\"item\"\n    :class=\"\n      cn(\n         tabsListItemVariants({\n          variant: context?.variant || 'default',\n          orientation: context?.orientation || 'horizontal',\n        }),\n        props.class,\n      )\"\n    >\n    {{ item.title }}\n  </NavigationButton>\n</template>\n\n<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { type NavigationItem, NavigationButton } from '@stacktrace/ui'\nimport { type HTMLAttributes } from 'vue'\nimport { injectTabsContext, tabsListItemVariants } from '.'\n\nconst context = injectTabsContext()\n\nconst props = defineProps<{\n  item: NavigationItem\n  class?: HTMLAttributes['class']\n}>()\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Tabs/TabsTrigger.vue",
          "content": "<template>\n  <TabsTrigger\n    data-slot=\"tabs-trigger\"\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      tabsListItemVariants({\n        variant: context?.variant || 'default',\n        orientation: context?.orientation || 'horizontal',\n      }),\n      props.class,\n    )\"\n  >\n    <slot />\n  </TabsTrigger>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { injectTabsContext, tabsListItemVariants } from '.'\n\nconst context = injectTabsContext()\n\nconst props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "tags-input",
      "type": "registry:ui",
      "title": "Tags Input",
      "description": "Tags Input components for StackTrace UI.",
      "dependencies": [
        "@lucide/vue",
        "@vueuse/core",
        "reka-ui"
      ],
      "files": [
        {
          "path": "TagsInput/index.ts",
          "content": "export { default as TagsInput } from './TagsInput.vue'\nexport { default as TagsInputInput } from './TagsInputInput.vue'\nexport { default as TagsInputItem } from './TagsInputItem.vue'\nexport { default as TagsInputItemDelete } from './TagsInputItemDelete.vue'\nexport { default as TagsInputItemText } from './TagsInputItemText.vue'\n",
          "type": "registry:ui"
        },
        {
          "path": "TagsInput/TagsInput.vue",
          "content": "<template>\n  <TagsInputRoot v-bind=\"forwarded\" :class=\"cn('flex flex-wrap gap-2 items-center rounded-md border border-input bg-background px-3 py-1.5 text-sm', props.class)\">\n    <slot />\n  </TagsInputRoot>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { TagsInputRoot, type TagsInputRootEmits, type TagsInputRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TagsInputRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<TagsInputRootEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "TagsInput/TagsInputInput.vue",
          "content": "<template>\n  <TagsInputInput v-bind=\"forwardedProps\" :class=\"cn('text-sm min-h-5 focus:outline-none flex-1 bg-transparent px-1', props.class)\" />\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { TagsInputInput, type TagsInputInputProps, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TagsInputInputProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "TagsInput/TagsInputItem.vue",
          "content": "<template>\n  <TagsInputItem v-bind=\"forwardedProps\" :class=\"cn('flex h-5 items-center rounded-md bg-secondary data-[state=active]:ring-ring data-[state=active]:ring-2 data-[state=active]:ring-offset-2 ring-offset-background', props.class)\">\n    <slot />\n  </TagsInputItem>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\n\nimport { TagsInputItem, type TagsInputItemProps, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TagsInputItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "TagsInput/TagsInputItemDelete.vue",
          "content": "<template>\n  <TagsInputItemDelete v-bind=\"forwardedProps\" :class=\"cn('flex rounded bg-transparent mr-1', props.class)\">\n    <slot>\n      <X class=\"w-4 h-4\" />\n    </slot>\n  </TagsInputItemDelete>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { X } from '@lucide/vue'\nimport { TagsInputItemDelete, type TagsInputItemDeleteProps, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "TagsInput/TagsInputItemText.vue",
          "content": "<template>\n  <TagsInputItemText v-bind=\"forwardedProps\" :class=\"cn('py-0.5 px-2 text-sm rounded bg-transparent', props.class)\" />\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { TagsInputItemText, type TagsInputItemTextProps, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "textarea",
      "type": "registry:ui",
      "title": "Textarea",
      "description": "Textarea components for StackTrace UI.",
      "dependencies": [
        "@vueuse/core"
      ],
      "files": [
        {
          "path": "Textarea/index.ts",
          "content": "export { default as Textarea } from './Textarea.vue'\n",
          "type": "registry:ui"
        },
        {
          "path": "Textarea/Textarea.vue",
          "content": "<template>\n  <textarea\n    v-model=\"modelValue\"\n    data-slot=\"textarea\"\n    :class=\"cn('border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', props.class)\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n  defaultValue?: string | number\n  modelValue?: string | number\n}>()\n\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: props.defaultValue,\n})\n</script>\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "toggle",
      "type": "registry:ui",
      "title": "Toggle",
      "description": "Toggle components for StackTrace UI.",
      "dependencies": [
        "@vueuse/core",
        "class-variance-authority",
        "reka-ui"
      ],
      "files": [
        {
          "path": "Toggle/index.ts",
          "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Toggle } from './Toggle.vue'\n\nexport const toggleVariants = cva(\n  'inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*=\\'size-\\'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3 outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap',\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        outline:\n          'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',\n      },\n      size: {\n        default: 'h-9 px-2 min-w-9',\n        sm: 'h-8 px-1.5 min-w-8',\n        lg: 'h-10 px-2.5 min-w-10',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ToggleVariants = VariantProps<typeof toggleVariants>\n",
          "type": "registry:ui"
        },
        {
          "path": "Toggle/Toggle.vue",
          "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { Toggle, type ToggleEmits, type ToggleProps, useForwardPropsEmits } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { type ToggleVariants, toggleVariants } from '.'\n\nconst props = withDefaults(defineProps<ToggleProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleVariants['variant']\n  size?: ToggleVariants['size']\n}>(), {\n  variant: 'default',\n  size: 'default',\n  disabled: false,\n})\n\nconst emits = defineEmits<ToggleEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class', 'size', 'variant')\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <Toggle\n    v-slot=\"slotProps\"\n    data-slot=\"toggle\"\n    v-bind=\"forwarded\"\n    :class=\"cn(toggleVariants({ variant, size }), props.class)\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </Toggle>\n</template>\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "toggle-group",
      "type": "registry:ui",
      "title": "Toggle Group",
      "description": "Toggle Group components for StackTrace UI.",
      "dependencies": [
        "@vueuse/core",
        "class-variance-authority",
        "reka-ui"
      ],
      "registryDependencies": [
        "@stacktrace/toggle"
      ],
      "files": [
        {
          "path": "ToggleGroup/index.ts",
          "content": "export { default as ToggleGroup } from './ToggleGroup.vue'\nexport { default as ToggleGroupItem } from './ToggleGroupItem.vue'\n",
          "type": "registry:ui"
        },
        {
          "path": "ToggleGroup/ToggleGroup.vue",
          "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport type { toggleVariants } from '@/registry/stacktrace/ui/Toggle'\nimport { reactiveOmit } from '@vueuse/core'\nimport { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { type HTMLAttributes, provide } from 'vue'\nimport { cn } from '@/lib/utils'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupRootProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\nconst emits = defineEmits<ToggleGroupRootEmits>()\n\nprovide('toggleGroup', {\n  variant: props.variant,\n  size: props.size,\n})\n\nconst delegatedProps = reactiveOmit(props, 'class', 'size', 'variant')\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ToggleGroupRoot\n    v-slot=\"slotProps\"\n    data-slot=\"toggle-group\"\n    :data-size=\"size\"\n    :data-variant=\"variant\"\n    v-bind=\"forwarded\"\n    :class=\"cn('group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs', props.class)\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </ToggleGroupRoot>\n</template>\n",
          "type": "registry:ui"
        },
        {
          "path": "ToggleGroup/ToggleGroupItem.vue",
          "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { reactiveOmit } from '@vueuse/core'\nimport { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'reka-ui'\nimport { type HTMLAttributes, inject } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { toggleVariants } from '@/registry/stacktrace/ui/Toggle'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupItemProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\n\nconst context = inject<ToggleGroupVariants>('toggleGroup')\n\nconst delegatedProps = reactiveOmit(props, 'class', 'size', 'variant')\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ToggleGroupItem\n    v-slot=\"slotProps\"\n    data-slot=\"toggle-group-item\"\n    :data-variant=\"context?.variant || variant\"\n    :data-size=\"context?.size || size\"\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      toggleVariants({\n        variant: context?.variant || variant,\n        size: context?.size || size,\n      }),\n      'min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l',\n      props.class)\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </ToggleGroupItem>\n</template>\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "tooltip",
      "type": "registry:ui",
      "title": "Tooltip",
      "description": "Tooltip components for StackTrace UI.",
      "dependencies": [
        "@vueuse/core",
        "reka-ui"
      ],
      "files": [
        {
          "path": "Tooltip/index.ts",
          "content": "export { default as Tooltip } from './Tooltip.vue'\nexport { default as TooltipContent } from './TooltipContent.vue'\nexport { default as TooltipProvider } from './TooltipProvider.vue'\nexport { default as TooltipTrigger } from './TooltipTrigger.vue'\n",
          "type": "registry:ui"
        },
        {
          "path": "Tooltip/Tooltip.vue",
          "content": "<template>\n  <TooltipRoot\n    data-slot=\"tooltip\"\n    v-bind=\"forwarded\"\n  >\n    <slot />\n  </TooltipRoot>\n</template>\n\n<script setup lang=\"ts\">\nimport { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<TooltipRootProps>()\nconst emits = defineEmits<TooltipRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Tooltip/TooltipContent.vue",
          "content": "<template>\n  <TooltipPortal>\n    <TooltipContent\n      data-slot=\"tooltip-content\"\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n      :class=\"cn('bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance', props.class)\"\n    >\n      <slot />\n\n      <TooltipArrow class=\"bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]\" />\n    </TooltipContent>\n  </TooltipPortal>\n</template>\n\n<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { TooltipArrow, TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(), {\n  sideOffset: 4,\n})\n\nconst emits = defineEmits<TooltipContentEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Tooltip/TooltipProvider.vue",
          "content": "<template>\n  <TooltipProvider v-bind=\"props\">\n    <slot />\n  </TooltipProvider>\n</template>\n\n<script setup lang=\"ts\">\nimport { TooltipProvider, type TooltipProviderProps } from 'reka-ui'\n\nconst props = withDefaults(defineProps<TooltipProviderProps>(), {\n  delayDuration: 0,\n})\n</script>\n",
          "type": "registry:ui"
        },
        {
          "path": "Tooltip/TooltipTrigger.vue",
          "content": "<template>\n  <TooltipTrigger\n    data-slot=\"tooltip-trigger\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </TooltipTrigger>\n</template>\n\n<script setup lang=\"ts\">\nimport { TooltipTrigger, type TooltipTriggerProps } from 'reka-ui'\n\nconst props = defineProps<TooltipTriggerProps>()\n</script>\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://shadcn-vue.com/schema/registry-item.json",
      "name": "all",
      "type": "registry:item",
      "title": "All Components",
      "description": "All StackTrace UI components.",
      "registryDependencies": [
        "@stacktrace/accordion",
        "@stacktrace/alert",
        "@stacktrace/alert-dialog",
        "@stacktrace/aspect-ratio",
        "@stacktrace/avatar",
        "@stacktrace/badge",
        "@stacktrace/breadcrumb",
        "@stacktrace/button",
        "@stacktrace/button-group",
        "@stacktrace/calendar",
        "@stacktrace/card",
        "@stacktrace/carousel",
        "@stacktrace/chart",
        "@stacktrace/checkbox",
        "@stacktrace/collapsible",
        "@stacktrace/combobox",
        "@stacktrace/command",
        "@stacktrace/confirmation-dialog",
        "@stacktrace/context-menu",
        "@stacktrace/data-table",
        "@stacktrace/date-input",
        "@stacktrace/date-picker",
        "@stacktrace/date-range-picker",
        "@stacktrace/date-time-input",
        "@stacktrace/dialog",
        "@stacktrace/drawer",
        "@stacktrace/dropdown-menu",
        "@stacktrace/empty",
        "@stacktrace/field",
        "@stacktrace/filter",
        "@stacktrace/form",
        "@stacktrace/hover-card",
        "@stacktrace/input",
        "@stacktrace/input-group",
        "@stacktrace/input-otp",
        "@stacktrace/item",
        "@stacktrace/kbd",
        "@stacktrace/label",
        "@stacktrace/logo",
        "@stacktrace/marker",
        "@stacktrace/menubar",
        "@stacktrace/native-select",
        "@stacktrace/navigation-menu",
        "@stacktrace/number-field",
        "@stacktrace/pagination",
        "@stacktrace/panel",
        "@stacktrace/pin-input",
        "@stacktrace/popover",
        "@stacktrace/progress",
        "@stacktrace/radio-group",
        "@stacktrace/range-calendar",
        "@stacktrace/resizable",
        "@stacktrace/scroll-area",
        "@stacktrace/select",
        "@stacktrace/separator",
        "@stacktrace/sheet",
        "@stacktrace/sidebar",
        "@stacktrace/skeleton",
        "@stacktrace/slider",
        "@stacktrace/sonner",
        "@stacktrace/spinner",
        "@stacktrace/stepper",
        "@stacktrace/switch",
        "@stacktrace/table",
        "@stacktrace/tabs",
        "@stacktrace/tags-input",
        "@stacktrace/textarea",
        "@stacktrace/toggle",
        "@stacktrace/toggle-group",
        "@stacktrace/tooltip"
      ],
      "files": []
    }
  ]
}