{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tooltip",
  "dependencies": [
    "@data-slot/tooltip"
  ],
  "files": [
    {
      "path": "ui/tooltip/Tooltip.astro",
      "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/tooltip/Tooltip.astro directly.\n/**\n * @component Tooltip\n * @title Tooltip\n * @description A small popup that appears when hovering over or focusing on an element. Positioning is computed in JavaScript.\n *\n * @preview\n *\n * <Tooltip>\n *   <TooltipTrigger asChild>\n *     <Button variant=\"outline\">Hover</Button>\n *   </TooltipTrigger>\n *   <TooltipContent>\n *     <p>Add to library</p>\n *   </TooltipContent>\n * </Tooltip>\n *\n * @usage\n *\n * ```astro nocollapse\n * ---\n * import { Tooltip, TooltipTrigger, TooltipContent } from '@bejamas/ui/components/tooltip';\n * import { Button } from '@bejamas/ui/components/button';\n * ---\n *\n * <Tooltip>\n *   <TooltipTrigger asChild>\n *     <Button variant=\"outline\">Hover</Button>\n *   </TooltipTrigger>\n *   <TooltipContent>\n *     <p>Add to library</p>\n *   </TooltipContent>\n * </Tooltip>\n * ```\n *\n * @examples\n *\n * ### With delay\n *\n * <Tooltip delay={1000}>\n *   <TooltipTrigger asChild>\n *     <Button variant=\"outline\">Hover with delay</Button>\n *   </TooltipTrigger>\n *   <TooltipContent>\n *     <p>This tooltip appears after 1000ms</p>\n *   </TooltipContent>\n * </Tooltip>\n *\n * ### Skip delay on subsequent tooltips\n *\n * When a tooltip is shown, hovering over other tooltip triggers will show their tooltips immediately without delay. Try hovering over the first button, then quickly move to the others.\n *\n * <div class=\"flex gap-2\">\n *   <Tooltip delay={500}>\n *     <TooltipTrigger asChild>\n *       <Button variant=\"outline\">Bold</Button>\n *     </TooltipTrigger>\n *     <TooltipContent>\n *       <p>Bold (Ctrl+B)</p>\n *     </TooltipContent>\n *   </Tooltip>\n *   <Tooltip delay={500}>\n *     <TooltipTrigger asChild>\n *       <Button variant=\"outline\">Italic</Button>\n *     </TooltipTrigger>\n *     <TooltipContent>\n *       <p>Italic (Ctrl+I)</p>\n *     </TooltipContent>\n *   </Tooltip>\n *   <Tooltip delay={500}>\n *     <TooltipTrigger asChild>\n *       <Button variant=\"outline\">Underline</Button>\n *     </TooltipTrigger>\n *     <TooltipContent>\n *       <p>Underline (Ctrl+U)</p>\n *     </TooltipContent>\n *   </Tooltip>\n * </div>\n *\n * ### Different sides\n *\n * Use the `side` prop to control which side the tooltip appears on.\n *\n * <div class=\"grid gap-4 py-8\">\n *   <div class=\"flex gap-4 items-center justify-center\">\n *     <Tooltip>\n *       <TooltipTrigger asChild>\n *         <Button variant=\"outline\">Left</Button>\n *       </TooltipTrigger>\n *       <TooltipContent side=\"left\">\n *         <p>Tooltip on left</p>\n *       </TooltipContent>\n *     </Tooltip>\n *     <Tooltip>\n *       <TooltipTrigger asChild>\n *         <Button variant=\"outline\">Top</Button>\n *       </TooltipTrigger>\n *       <TooltipContent side=\"top\">\n *         <p>Tooltip on top</p>\n *       </TooltipContent>\n *     </Tooltip>\n *     <Tooltip>\n *       <TooltipTrigger asChild>\n *         <Button variant=\"outline\">Bottom</Button>\n *       </TooltipTrigger>\n *       <TooltipContent side=\"bottom\">\n *         <p>Tooltip on bottom</p>\n *       </TooltipContent>\n *     </Tooltip>\n *     <Tooltip>\n *       <TooltipTrigger asChild>\n *         <Button variant=\"outline\">Right</Button>\n *       </TooltipTrigger>\n *       <TooltipContent side=\"right\">\n *         <p>Tooltip on right</p>\n *       </TooltipContent>\n *     </Tooltip>\n *   </div>\n *   <div class=\"flex gap-4 items-center justify-center\">\n *     <Tooltip>\n *       <TooltipTrigger asChild>\n *         <Button variant=\"outline\">Inline Start</Button>\n *       </TooltipTrigger>\n *       <TooltipContent side=\"inline-start\">\n *         <p>Tooltip on inline start</p>\n *       </TooltipContent>\n *     </Tooltip>\n *     <Tooltip>\n *       <TooltipTrigger asChild>\n *         <Button variant=\"outline\">Inline End</Button>\n *       </TooltipTrigger>\n *       <TooltipContent side=\"inline-end\">\n *         <p>Tooltip on inline end</p>\n *       </TooltipContent>\n *     </Tooltip>\n *   </div>\n * </div>\n *\n * ### Alignment options\n *\n * Use the `align` prop to control how the tooltip aligns relative to the trigger.\n *\n * <div class=\"flex flex-col gap-4 items-center py-8\">\n *   <div class=\"flex gap-4\">\n *     <Tooltip>\n *       <TooltipTrigger asChild>\n *         <Button variant=\"outline\">Top Start</Button>\n *       </TooltipTrigger>\n *       <TooltipContent side=\"top\" align=\"start\">\n *         <p>Aligned to start</p>\n *       </TooltipContent>\n *     </Tooltip>\n *     <Tooltip>\n *       <TooltipTrigger asChild>\n *         <Button variant=\"outline\">Top Center</Button>\n *       </TooltipTrigger>\n *       <TooltipContent side=\"top\" align=\"center\">\n *         <p>Aligned to center</p>\n *       </TooltipContent>\n *     </Tooltip>\n *     <Tooltip>\n *       <TooltipTrigger asChild>\n *         <Button variant=\"outline\">Top End</Button>\n *       </TooltipTrigger>\n *       <TooltipContent side=\"top\" align=\"end\">\n *         <p>Aligned to end</p>\n *       </TooltipContent>\n *     </Tooltip>\n *   </div>\n *   <div class=\"flex gap-4\">\n *     <Tooltip>\n *       <TooltipTrigger asChild>\n *         <Button variant=\"outline\">Bottom Start</Button>\n *       </TooltipTrigger>\n *       <TooltipContent side=\"bottom\" align=\"start\">\n *         <p>Aligned to start</p>\n *       </TooltipContent>\n *     </Tooltip>\n *     <Tooltip>\n *       <TooltipTrigger asChild>\n *         <Button variant=\"outline\">Bottom Center</Button>\n *       </TooltipTrigger>\n *       <TooltipContent side=\"bottom\" align=\"center\">\n *         <p>Aligned to center</p>\n *       </TooltipContent>\n *     </Tooltip>\n *     <Tooltip>\n *       <TooltipTrigger asChild>\n *         <Button variant=\"outline\">Bottom End</Button>\n *       </TooltipTrigger>\n *       <TooltipContent side=\"bottom\" align=\"end\">\n *         <p>Aligned to end</p>\n *       </TooltipContent>\n *     </Tooltip>\n *   </div>\n * </div>\n *\n * ### Positioning Options\n *\n * Use `TooltipContent` props to configure placement:\n *\n * <div class=\"flex gap-3\">\n *   <Tooltip>\n *     <TooltipTrigger asChild>\n *       <Button variant=\"outline\">Offset</Button>\n *     </TooltipTrigger>\n *     <TooltipContent sideOffset={8}>\n *       <p>More distance from trigger</p>\n *     </TooltipContent>\n *   </Tooltip>\n *   <Tooltip>\n *     <TooltipTrigger asChild>\n *       <Button variant=\"outline\">Align offset</Button>\n *     </TooltipTrigger>\n *     <TooltipContent side=\"bottom\" align=\"start\" alignOffset={12}>\n *       <p>Shifted on alignment axis</p>\n *     </TooltipContent>\n *   </Tooltip>\n * </div>\n *\n * ### Disabled\n *\n * <Tooltip>\n *   <TooltipTrigger asChild>\n *     <Button variant=\"outline\" disabled>Disabled</Button>\n *   </TooltipTrigger>\n *   <TooltipContent>\n *     <p>This feature is currently unavailable</p>\n *   </TooltipContent>\n * </Tooltip>\n *\n * @api\n *\n * ### Events\n *\n * The tooltip emits custom events that you can listen to:\n *\n * | Event | Detail | Description |\n * |-------|--------|-------------|\n * | `tooltip:change` | `{ open: boolean, trigger: HTMLElement, content: HTMLElement, reason: string }` | Fired when visibility changes |\n *\n * ```astro nocollapse\n * <Tooltip id=\"my-tooltip\">\n *   <TooltipTrigger asChild>\n *     <Button variant=\"outline\">Hover me</Button>\n *   </TooltipTrigger>\n *   <TooltipContent>\n *     <p>Tooltip content</p>\n *   </TooltipContent>\n * </Tooltip>\n * ```\n *\n * ```js nocollapse\n *   const tooltip = document.getElementById('my-tooltip');\n *\n *   tooltip.addEventListener('tooltip:change', (e) => {\n *     console.log('Is open:', e.detail.open);\n *     console.log('Reason:', e.detail.reason);\n *   });\n * ```\n *\n * ### Programmatic Control\n *\n * You can control the tooltip programmatically by dispatching a `tooltip:set` event:\n *\n * ```js nocollapse\n * const tooltip = document.getElementById('my-tooltip');\n *\n * // Show the tooltip\n * tooltip.dispatchEvent(new CustomEvent('tooltip:set', {\n *   detail: { open: true }\n * }));\n *\n * // Hide the tooltip\n * tooltip.dispatchEvent(new CustomEvent('tooltip:set', {\n *   detail: { open: false }\n * }));\n * ```\n *\n * The deprecated `{ value: boolean }` detail shape is still supported temporarily for compatibility, but new code should always use `{ open: boolean }`.\n *\n * ### Data Attributes\n *\n * The tooltip sets these data attributes that you can use for styling or querying state:\n *\n * | Attribute | Element | Description |\n * |-----------|---------|-------------|\n * | `data-state` | tooltip, tooltip-content | Legacy `\"open\"` / `\"closed\"` compatibility shim. Prefer `data-open` / `data-closed`. |\n * | `data-open` / `data-closed` | tooltip, tooltip-content, tooltip-positioner, tooltip-arrow | Present while open/closed |\n * | `data-starting-style` / `data-ending-style` | tooltip-content | Present while opening or closing |\n * | `data-instant` | tooltip, tooltip-content, tooltip-positioner, tooltip-arrow | Interaction reason: `\"delay\"`, `\"focus\"`, or `\"dismiss\"` |\n * | `data-side` | tooltip-content, tooltip-positioner, tooltip-arrow | Runtime side (`top`, `right`, `bottom`, `left`, `inline-start`, or `inline-end`) after collision handling |\n * | `data-align` | tooltip-content, tooltip-positioner, tooltip-arrow | Runtime alignment (`start`, `center`, or `end`) |\n * | `data-side-offset` | tooltip-content | Distance from trigger in pixels (default `4`) |\n * | `data-align-offset` | tooltip-content | Alignment-axis offset in pixels (default `0`) |\n */\n\nimport { cn } from \"@/lib/utils\";\nimport type { HTMLAttributes } from \"astro/types\";\n\ninterface Props extends HTMLAttributes<\"div\"> {\n  class?: string;\n  delay?: number;\n  skipDelayDuration?: number;\n}\n\nconst {\n  class: className = \"\",\n  delay = 300,\n  skipDelayDuration = 300,\n  ...rest\n} = Astro.props as Props;\n---\n\n<div\n  {...rest}\n  data-slot=\"tooltip\"\n  data-delay={delay}\n  data-skip-delay-duration={skipDelayDuration}\n  class={cn(\"\", \"inline-block\", className)}\n>\n  <slot />\n</div>\n\n<script>\n  import { createTooltip } from \"@data-slot/tooltip\";\n\n  document\n    .querySelectorAll('[data-slot=\"tooltip\"]')\n    .forEach((el) => createTooltip(el));\n</script>\n",
      "type": "registry:ui"
    },
    {
      "path": "ui/tooltip/TooltipTrigger.astro",
      "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/tooltip/TooltipTrigger.astro directly.\nimport { cn } from \"@/lib/utils\";\nimport type { HTMLAttributes } from \"astro/types\";\n\ninterface Props extends HTMLAttributes<\"button\"> {\n  class?: string;\n  /** Radix-like: render wrapper so the child can be the interactive element */\n  asChild?: boolean;\n}\n\nconst {\n  class: className = \"\",\n  asChild = false,\n  type = \"button\",\n  ...rest\n} = Astro.props as Props;\n---\n\n{\n  asChild ? (\n    <div data-slot=\"tooltip-trigger\" data-as-child class={cn(\"\", className)}>\n      <slot />\n    </div>\n  ) : (\n    <button\n      {...rest}\n      type={type}\n      data-slot=\"tooltip-trigger\"\n      class={cn(\"\", className)}\n    >\n      <slot />\n    </button>\n  )\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "ui/tooltip/TooltipContent.astro",
      "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/tooltip/TooltipContent.astro directly.\nimport { cn } from \"@/lib/utils\";\nimport type { HTMLAttributes } from \"astro/types\";\n\ntype TooltipSide =\n  | \"top\"\n  | \"bottom\"\n  | \"left\"\n  | \"right\"\n  | \"inline-start\"\n  | \"inline-end\";\n\ninterface Props extends HTMLAttributes<\"div\"> {\n  class?: string;\n  sideOffset?: number;\n  side?: TooltipSide;\n  align?: \"start\" | \"center\" | \"end\";\n  alignOffset?: number;\n}\n\nconst {\n  class: className = \"\",\n  sideOffset,\n  side = \"top\",\n  align = \"center\",\n  alignOffset,\n  ...rest\n} = Astro.props as Props;\n---\n\n<div data-slot=\"tooltip-portal\">\n  <div data-slot=\"tooltip-positioner\" class=\"isolate z-50\">\n    <div\n      {...rest}\n      hidden\n      data-slot=\"tooltip-content\"\n      data-side={side}\n      data-side-offset={sideOffset}\n      data-align={align}\n      data-align-offset={alignOffset}\n      class={cn(\n        \"relative pointer-events-none data-open:pointer-events-auto data-closed:pointer-events-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-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 inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm rounded-lg shadow-md data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 w-fit max-w-xs origin-(--transform-origin) bg-foreground text-background\",\n        className,\n      )}\n    >\n      <slot />\n      <div\n        data-slot=\"tooltip-arrow\"\n        class={cn(\n          \"absolute size-2.5 rotate-45 rounded-[2px] data-[side=top]:-bottom-1 data-[side=bottom]:-top-1 data-[side=left]:-right-1 data-[side=left]:translate-x-[-1.5px] data-[side=right]:-left-1 data-[side=right]:translate-x-[1.5px] data-[side=inline-start]:-right-1 data-[side=inline-start]:translate-x-[-1.5px] data-[side=inline-end]:-left-1 data-[side=inline-end]:translate-x-[1.5px] z-50 bg-foreground fill-foreground\",\n          \"data-[side=top]:-bottom-1\",\n          \"data-[side=bottom]:-top-1\",\n          \"data-[side=left]:-right-1\",\n          \"data-[side=right]:-left-1\",\n        )}\n      >\n      </div>\n    </div>\n  </div>\n</div>\n",
      "type": "registry:ui"
    },
    {
      "path": "ui/tooltip/index.ts",
      "content": "// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/tooltip/index.ts directly.\nexport { default as Tooltip } from \"./Tooltip.astro\";\nexport { default as TooltipTrigger } from \"./TooltipTrigger.astro\";\nexport { default as TooltipContent } from \"./TooltipContent.astro\";\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}