{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "popover",
  "dependencies": [
    "@data-slot/popover"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "ui/popover/Popover.astro",
      "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/popover/Popover.astro directly.\n/**\n * @component Popover\n * @title Popover\n * @description A floating panel that appears on trigger click, useful for displaying rich content like forms or additional information.\n *\n * @preview\n * <Popover>\n *   <PopoverTrigger variant=\"outline\">Open popover</PopoverTrigger>\n *   <PopoverContent>\n *     <PopoverHeader>\n *       <PopoverTitle>Dimensions</PopoverTitle>\n *       <PopoverDescription>Set the dimensions for the layer.</PopoverDescription>\n *     </PopoverHeader>\n *     <div class=\"grid gap-2\">\n *       <div class=\"grid grid-cols-3 items-center gap-4\">\n *         <Label>Width</Label>\n *         <Input class=\"col-span-2 h-8\" value=\"100%\" />\n *       </div>\n *       <div class=\"grid grid-cols-3 items-center gap-4\">\n *         <Label>Height</Label>\n *         <Input class=\"col-span-2 h-8\" value=\"25px\" />\n *       </div>\n *     </div>\n *   </PopoverContent>\n * </Popover>\n *\n * @usage\n *\n * ```astro nocollapse\n * ---\n * import { Popover, PopoverTrigger, PopoverContent, PopoverHeader, PopoverTitle, PopoverDescription } from '@bejamas/ui/components/popover';\n * ---\n *\n * <Popover>\n *   <PopoverTrigger variant=\"outline\">Open</PopoverTrigger>\n *   <PopoverContent>\n *     <PopoverHeader>\n *       <PopoverTitle>Title</PopoverTitle>\n *       <PopoverDescription>Description text.</PopoverDescription>\n *     </PopoverHeader>\n *     <p>Popover body content.</p>\n *   </PopoverContent>\n * </Popover>\n * ```\n *\n * @api\n *\n * ### Events\n *\n * The popover emits custom events that you can listen to:\n *\n * | Event | Detail | Description |\n * |-------|--------|-------------|\n * | `popover:change` | `{ open: boolean }` | Fired when the popover opens or closes |\n *\n * ```astro nocollapse console\n * <Popover id=\"my-popover\">\n *   <PopoverTrigger variant=\"outline\">Open</PopoverTrigger>\n *   <PopoverContent>\n *     <p>Content</p>\n *   </PopoverContent>\n * </Popover>\n * ```\n *\n * ```js nocollapse\n *   const popover = document.getElementById('my-popover');\n *\n *   popover.addEventListener('popover:change', (e) => {\n *     console.log('Is open:', e.detail.open);\n *   });\n * ```\n *\n * ### Programmatic Control\n *\n * You can control the popover programmatically by dispatching a `popover:set` event:\n *\n * ```js nocollapse\n * const popover = document.getElementById('my-popover');\n *\n * // Open the popover\n * popover.dispatchEvent(new CustomEvent('popover:set', {\n *   detail: { open: true }\n * }));\n *\n * // Close the popover\n * popover.dispatchEvent(new CustomEvent('popover:set', {\n *   detail: { open: false }\n * }));\n * ```\n *\n * ### Data Attributes\n *\n * The popover sets these data attributes that you can use for styling or querying state:\n *\n * | Attribute | Element | Description |\n * |-----------|---------|-------------|\n * | `data-state` | popover, popover-content | Current state (`open` or `closed`) |\n * | `data-side` | popover, popover-content | Position relative to trigger (`top`, `bottom`, `left`, `right`) |\n * | `data-align` | popover, popover-content | Alignment (`start`, `center`, or `end`) |\n *\n * @examples\n *\n * ### Basic\n *\n * <Popover>\n *   <PopoverTrigger variant=\"outline\">Open popover</PopoverTrigger>\n *   <PopoverContent>\n *     <PopoverHeader>\n *       <PopoverTitle>Popover Title</PopoverTitle>\n *       <PopoverDescription>This is a simple popover.</PopoverDescription>\n *     </PopoverHeader>\n *   </PopoverContent>\n * </Popover>\n *\n * ### Side Variants\n *\n * <div class=\"flex gap-4 items-center justify-center py-8\">\n *   <Popover>\n *     <PopoverTrigger variant=\"outline\">Left</PopoverTrigger>\n *     <PopoverContent side=\"left\">\n *       <p>Popover on the left</p>\n *     </PopoverContent>\n *   </Popover>\n *   <Popover>\n *     <PopoverTrigger variant=\"outline\">Top</PopoverTrigger>\n *     <PopoverContent side=\"top\">\n *       <p>Popover on top</p>\n *     </PopoverContent>\n *   </Popover>\n *   <Popover>\n *     <PopoverTrigger variant=\"outline\">Bottom</PopoverTrigger>\n *     <PopoverContent side=\"bottom\">\n *       <p>Popover on bottom</p>\n *     </PopoverContent>\n *   </Popover>\n *   <Popover>\n *     <PopoverTrigger variant=\"outline\">Right</PopoverTrigger>\n *     <PopoverContent side=\"right\">\n *       <p>Popover on the right</p>\n *     </PopoverContent>\n *   </Popover>\n * </div>\n *\n * ### Alignment Variants\n *\n * <div class=\"flex gap-8\">\n *   <Popover>\n *     <PopoverTrigger variant=\"outline\">Start</PopoverTrigger>\n *     <PopoverContent side=\"bottom\" align=\"start\">\n *       <p>Start-aligned content</p>\n *     </PopoverContent>\n *   </Popover>\n *   <Popover>\n *     <PopoverTrigger variant=\"outline\">Center</PopoverTrigger>\n *     <PopoverContent side=\"bottom\" align=\"center\">\n *       <p>Center-aligned content</p>\n *     </PopoverContent>\n *   </Popover>\n *   <Popover>\n *     <PopoverTrigger variant=\"outline\">End</PopoverTrigger>\n *     <PopoverContent side=\"bottom\" align=\"end\">\n *       <p>End-aligned content</p>\n *     </PopoverContent>\n *   </Popover>\n * </div>\n *\n * ### With Form\n *\n * <Popover>\n *   <PopoverTrigger variant=\"outline\">Open form</PopoverTrigger>\n *   <PopoverContent>\n *     <PopoverHeader>\n *       <PopoverTitle>Dimensions</PopoverTitle>\n *       <PopoverDescription>Set the dimensions for the layer.</PopoverDescription>\n *     </PopoverHeader>\n *     <div class=\"grid gap-2\">\n *       <div class=\"grid grid-cols-3 items-center gap-4\">\n *         <Label>Width</Label>\n *         <Input class=\"col-span-2 h-8\" value=\"100%\" />\n *       </div>\n *       <div class=\"grid grid-cols-3 items-center gap-4\">\n *         <Label>Height</Label>\n *         <Input class=\"col-span-2 h-8\" value=\"25px\" />\n *       </div>\n *     </div>\n *   </PopoverContent>\n * </Popover>\n */\n\nimport type { HTMLAttributes } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\n\ninterface Props extends HTMLAttributes<\"div\"> {\n  class?: string;\n}\n\nconst { class: className = \"\", ...rest } = Astro.props as Props;\n---\n\n<div {...rest} data-slot=\"popover\" class={cn(\"\", \"inline-block\", className)}>\n  <slot />\n</div>\n\n<script>\n  import { createPopover } from \"@data-slot/popover\";\n  document\n    .querySelectorAll('[data-slot=\"popover\"]')\n    .forEach((el) => createPopover(el));\n</script>\n",
      "type": "registry:ui"
    },
    {
      "path": "ui/popover/PopoverTrigger.astro",
      "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/popover/PopoverTrigger.astro directly.\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"../button\";\nimport type { Props as ButtonProps } from \"../button/Button.astro\";\n\ntype Props = ButtonProps & {\n  class?: string;\n  /** Radix-like: render wrapper so the child can be the interactive element */\n  asChild?: boolean;\n};\n\nconst { class: className = \"\", asChild = false, ...rest } = Astro.props as Props;\n---\n\n{\n  asChild ? (\n    <div data-slot=\"popover-trigger\" data-as-child class={cn(\"\", \"inline-flex items-center\", className)}>\n      <slot />\n    </div>\n  ) : (\n    <Button\n      data-slot=\"popover-trigger\"\n      class={cn(\"\", \"inline-flex items-center\", className)}\n      {...rest as any}\n    >\n      <slot />\n    </Button>\n  )\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "ui/popover/PopoverContent.astro",
      "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/popover/PopoverContent.astro directly.\nimport type { HTMLAttributes } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\nimport { cva } from \"class-variance-authority\";\n\ninterface Props extends HTMLAttributes<\"div\"> {\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  align?: \"start\" | \"center\" | \"end\";\n  alignOffset?: number;\n  sideOffset?: number;\n  class?: string;\n}\n\nconst {\n  side = \"bottom\",\n  align = \"center\",\n  sideOffset = 6,\n  alignOffset = 0,\n  class: className = \"\",\n  ...rest\n} = Astro.props as Props;\n\nconst contentVariants = cva([\n  \"z-50 duration-150 ease transition-discrete outline-hidden flex flex-col\",\n  \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n  \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n  \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n  \"data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2\",\n  \"origin-(--transform-origin) [--tw-animation-fill-mode:both]\",\n]);\n---\n\n<div\n  {...rest}\n  hidden\n  data-slot=\"popover-content\"\n  data-align={align}\n  data-align-offset={alignOffset}\n  data-side={side}\n  data-side-offset={sideOffset}\n  style={`--side-offset: ${sideOffset}px`}\n  class={cn(\n    \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 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 ring-foreground/10 flex flex-col gap-4 rounded-md p-4 text-sm shadow-md ring-1 duration-100 rounded-lg data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2\",\n    contentVariants(),\n    className,\n  )}\n>\n  <slot />\n</div>\n",
      "type": "registry:ui"
    },
    {
      "path": "ui/popover/PopoverClose.astro",
      "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/popover/PopoverClose.astro directly.\nimport type { HTMLAttributes } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\n\ninterface Props extends HTMLAttributes<\"button\"> {\n  class?: string;\n}\n\nconst { class: className = \"\", ...rest } = Astro.props as Props;\n---\n\n<button\n  {...rest}\n  data-slot=\"popover-close\"\n  class={cn(\"\", className)}\n>\n  <slot />\n</button>\n",
      "type": "registry:ui"
    },
    {
      "path": "ui/popover/PopoverHeader.astro",
      "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/popover/PopoverHeader.astro directly.\nimport type { HTMLAttributes } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\n\ninterface Props extends HTMLAttributes<\"div\"> {\n  class?: string;\n}\n\nconst { class: className = \"\", ...rest } = Astro.props as Props;\n---\n\n<div\n  {...rest}\n  data-slot=\"popover-header\"\n  class={cn(\"flex flex-col gap-1 text-sm\", className)}\n>\n  <slot />\n</div>\n",
      "type": "registry:ui"
    },
    {
      "path": "ui/popover/PopoverTitle.astro",
      "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/popover/PopoverTitle.astro directly.\nimport type { HTMLAttributes } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\n\ninterface Props extends HTMLAttributes<\"div\"> {\n  class?: string;\n}\n\nconst { class: className = \"\", ...rest } = Astro.props as Props;\n---\n\n<div\n  {...rest}\n  data-slot=\"popover-title\"\n  class={cn(\"font-medium\", className)}\n>\n  <slot />\n</div>\n",
      "type": "registry:ui"
    },
    {
      "path": "ui/popover/PopoverDescription.astro",
      "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/popover/PopoverDescription.astro directly.\nimport type { HTMLAttributes } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\n\ninterface Props extends HTMLAttributes<\"p\"> {\n  class?: string;\n}\n\nconst { class: className = \"\", ...rest } = Astro.props as Props;\n---\n\n<p\n  {...rest}\n  data-slot=\"popover-description\"\n  class={cn(\"text-muted-foreground\", className)}\n>\n  <slot />\n</p>\n",
      "type": "registry:ui"
    },
    {
      "path": "ui/popover/index.ts",
      "content": "// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/popover/index.ts directly.\nexport { default as Popover } from \"./Popover.astro\";\nexport { default as PopoverTrigger } from \"./PopoverTrigger.astro\";\nexport { default as PopoverContent } from \"./PopoverContent.astro\";\nexport { default as PopoverClose } from \"./PopoverClose.astro\";\nexport { default as PopoverHeader } from \"./PopoverHeader.astro\";\nexport { default as PopoverTitle } from \"./PopoverTitle.astro\";\nexport { default as PopoverDescription } from \"./PopoverDescription.astro\";\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}