@cl-light-ds/ui 0.1.0

package/src/components/toggle/index.ts

@@ -0,0 +1 @@
+export { default as Toggle } from "./Toggle.astro";

package/src/components/toggle-group/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changelog
+
+All notable changes to the `ToggleGroup` component will be documented in this file.
+
+## Unreleased

package/src/components/toggle-group/ToggleGroup.astro

@@ -0,0 +1,224 @@
+---
+/**
+ * @component ToggleGroup
+ * @title Toggle Group
+ * @description A set of two-state buttons that can be toggled on or off. Supports single or multiple selection.
+ *
+ * @preview
+ *
+ * <ToggleGroup defaultValue="center" variant="outline">
+ *   <ToggleGroupItem value="left" aria-label="Align left">
+ *     <AlignLeftIcon />
+ *   </ToggleGroupItem>
+ *   <ToggleGroupItem value="center" aria-label="Align center">
+ *     <AlignCenterIcon />
+ *   </ToggleGroupItem>
+ *   <ToggleGroupItem value="right" aria-label="Align right">
+ *     <AlignRightIcon />
+ *   </ToggleGroupItem>
+ * </ToggleGroup>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { ToggleGroup, ToggleGroupItem } from '@bejamas/ui/components/toggle-group';
+ * import { BoldIcon, ItalicIcon, UnderlineIcon } from '@lucide/astro';
+ * ---
+ *
+ * <ToggleGroup defaultValue="bold" variant="outline">
+ *   <ToggleGroupItem value="bold" aria-label="Toggle bold">
+ *     <BoldIcon />
+ *   </ToggleGroupItem>
+ *   <ToggleGroupItem value="italic" aria-label="Toggle italic">
+ *     <ItalicIcon />
+ *   </ToggleGroupItem>
+ *   <ToggleGroupItem value="underline" aria-label="Toggle underline">
+ *     <UnderlineIcon />
+ *   </ToggleGroupItem>
+ * </ToggleGroup>
+ * ```
+ *
+ * @api
+ *
+ * ### Events
+ *
+ * | Event | Detail | Description |
+ * |-------|--------|-------------|
+ * | `toggle-group:change` | `{ value: string[] }` | Fired when the selection changes |
+ *
+ * ### Programmatic Control
+ *
+ * ```js nocollapse
+ * // Set selected values programmatically
+ * element.dispatchEvent(new CustomEvent('toggle-group:set', {
+ *   detail: { value: ['bold', 'italic'] }
+ * }));
+ * ```
+ *
+ * ### Data Attributes
+ *
+ * | Attribute | Element | Description |
+ * |-----------|---------|-------------|
+ * | `data-state` | toggle-group-item | Current state: `on` or `off` |
+ * | `data-disabled` | toggle-group | Present when group is disabled |
+ * | `data-orientation` | toggle-group | Orientation: `horizontal` or `vertical` |
+ * | `data-spacing` | toggle-group | Gap value used by style packs |
+ * | `data-variant` | toggle-group | Visual variant: `default` or `outline` |
+ * | `data-size` | toggle-group | Size: `sm`, `default`, or `lg` |
+ *
+ * @examples
+ *
+ * ### Multiple Selection
+ *
+ * <ToggleGroup multiple defaultValue={["bold", "italic"]} variant="outline">
+ *   <ToggleGroupItem value="bold" aria-label="Toggle bold">
+ *     <BoldIcon />
+ *   </ToggleGroupItem>
+ *   <ToggleGroupItem value="italic" aria-label="Toggle italic">
+ *     <ItalicIcon />
+ *   </ToggleGroupItem>
+ *   <ToggleGroupItem value="underline" aria-label="Toggle underline">
+ *     <UnderlineIcon />
+ *   </ToggleGroupItem>
+ * </ToggleGroup>
+ *
+ * ### Outline Variant
+ *
+ * <ToggleGroup variant="outline" defaultValue="center">
+ *   <ToggleGroupItem value="left" aria-label="Align left">
+ *     <AlignLeftIcon />
+ *   </ToggleGroupItem>
+ *   <ToggleGroupItem value="center" aria-label="Align center">
+ *     <AlignCenterIcon />
+ *   </ToggleGroupItem>
+ *   <ToggleGroupItem value="right" aria-label="Align right">
+ *     <AlignRightIcon />
+ *   </ToggleGroupItem>
+ * </ToggleGroup>
+ *
+ * ### Sizes
+ *
+ * <div class="flex flex-col gap-4">
+ *   <ToggleGroup size="sm" variant="outline" defaultValue="center">
+ *     <ToggleGroupItem value="left" aria-label="Align left">
+ *       <AlignLeftIcon />
+ *     </ToggleGroupItem>
+ *     <ToggleGroupItem value="center" aria-label="Align center">
+ *       <AlignCenterIcon />
+ *     </ToggleGroupItem>
+ *     <ToggleGroupItem value="right" aria-label="Align right">
+ *       <AlignRightIcon />
+ *     </ToggleGroupItem>
+ *   </ToggleGroup>
+ *   <ToggleGroup size="default" variant="outline" defaultValue="center">
+ *     <ToggleGroupItem value="left" aria-label="Align left">
+ *       <AlignLeftIcon />
+ *     </ToggleGroupItem>
+ *     <ToggleGroupItem value="center" aria-label="Align center">
+ *       <AlignCenterIcon />
+ *     </ToggleGroupItem>
+ *     <ToggleGroupItem value="right" aria-label="Align right">
+ *       <AlignRightIcon />
+ *     </ToggleGroupItem>
+ *   </ToggleGroup>
+ *   <ToggleGroup size="lg" variant="outline" defaultValue="center">
+ *     <ToggleGroupItem value="left" aria-label="Align left">
+ *       <AlignLeftIcon />
+ *     </ToggleGroupItem>
+ *     <ToggleGroupItem value="center" aria-label="Align center">
+ *       <AlignCenterIcon />
+ *     </ToggleGroupItem>
+ *     <ToggleGroupItem value="right" aria-label="Align right">
+ *       <AlignRightIcon />
+ *     </ToggleGroupItem>
+ *   </ToggleGroup>
+ * </div>
+ *
+ * ### Vertical Orientation
+ *
+ * <ToggleGroup orientation="vertical" variant="outline" defaultValue="middle">
+ *   <ToggleGroupItem value="top" aria-label="Align top">
+ *     <AlignVerticalJustifyStartIcon />
+ *   </ToggleGroupItem>
+ *   <ToggleGroupItem value="middle" aria-label="Align middle">
+ *     <AlignVerticalJustifyCenterIcon />
+ *   </ToggleGroupItem>
+ *   <ToggleGroupItem value="bottom" aria-label="Align bottom">
+ *     <AlignVerticalJustifyEndIcon />
+ *   </ToggleGroupItem>
+ * </ToggleGroup>
+ *
+ * ### Disabled
+ *
+ * <ToggleGroup disabled variant="outline" defaultValue="center">
+ *   <ToggleGroupItem value="left" aria-label="Align left">
+ *     <AlignLeftIcon />
+ *   </ToggleGroupItem>
+ *   <ToggleGroupItem value="center" aria-label="Align center">
+ *     <AlignCenterIcon />
+ *   </ToggleGroupItem>
+ *   <ToggleGroupItem value="right" aria-label="Align right">
+ *     <AlignRightIcon />
+ *   </ToggleGroupItem>
+ * </ToggleGroup>
+ *
+ */
+
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends Omit<HTMLAttributes<"div">, "class"> {
+  variant?: "default" | "outline";
+  size?: "default" | "sm" | "lg";
+  spacing?: number;
+  defaultValue?: string | string[];
+  multiple?: boolean;
+  orientation?: "horizontal" | "vertical";
+  disabled?: boolean;
+  class?: string;
+  style?: string;
+}
+
+const {
+  variant = "default",
+  size = "default",
+  spacing = 0,
+  defaultValue,
+  multiple = false,
+  orientation = "horizontal",
+  disabled = false,
+  class: className = "",
+  style = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<div
+  data-slot="toggle-group"
+  data-horizontal={orientation === "horizontal" ? "" : undefined}
+  data-variant={variant}
+  data-spacing={String(spacing)}
+  data-size={size}
+  data-orientation={orientation}
+  data-vertical={orientation === "vertical" ? "" : undefined}
+  data-disabled={disabled ? "true" : undefined}
+  data-default-value={Array.isArray(defaultValue) ? defaultValue.join(",") : defaultValue}
+  data-multiple={multiple ? "true" : undefined}
+  class={cn(
+    "rounded-lg data-[spacing=0]:data-[variant=outline]:shadow-xs",
+    "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-vertical:flex-col data-vertical:items-stretch",
+    className
+  )}
+  style={`--gap:${spacing};${style}`}
+  {...rest}
+>
+  <slot />
+</div>
+
+<script>
+  import { createToggleGroup } from "@cl-light-ds/ui/lib/toggle-group-controller";
+  document.querySelectorAll<HTMLElement>('[data-slot="toggle-group"]').forEach((el) => {
+    createToggleGroup(el);
+  });
+</script>

package/src/components/toggle-group/ToggleGroupItem.astro

@@ -0,0 +1,48 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import {
+  toggleVariants,
+  type ToggleVariantProps,
+} from "@cl-light-ds/ui/lib/toggle-shared";
+
+interface Props extends ToggleVariantProps, Omit<HTMLAttributes<"button">, "class"> {
+  value: string;
+  disabled?: boolean;
+  class?: string;
+}
+
+const {
+  value,
+  variant,
+  size,
+  disabled,
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<button
+  type="button"
+  data-slot="toggle-group-item"
+  data-size={size ?? undefined}
+  data-value={value}
+  data-variant={variant ?? undefined}
+  disabled={disabled}
+  class={cn(
+    "data-[state=on]:bg-muted group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:shadow-none group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-md group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-md group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-md rounded-none group-data-[orientation=horizontal]/toggle-group:first:rounded-s-md group-data-[orientation=horizontal]/toggle-group:last:rounded-e-md group-data-[orientation=vertical]/toggle-group:first:rounded-t-md group-data-[orientation=vertical]/toggle-group:last:rounded-b-md",
+    toggleVariants({
+      variant: variant ?? "default",
+      size: size ?? "default",
+    }),
+    "shrink-0 focus:z-10 focus-visible:z-10",
+    "group-data-horizontal/toggle-group:group-data-[spacing=0]/toggle-group:group-data-[variant=outline]/toggle-group:border-s-0",
+    "group-data-vertical/toggle-group:group-data-[spacing=0]/toggle-group:group-data-[variant=outline]/toggle-group:border-t-0",
+    "group-data-horizontal/toggle-group:group-data-[spacing=0]/toggle-group:group-data-[variant=outline]/toggle-group:first:border-s",
+    "group-data-vertical/toggle-group:group-data-[spacing=0]/toggle-group:group-data-[variant=outline]/toggle-group:first:border-t",
+    className
+  )}
+  {...rest}
+>
+  <slot />
+</button>

package/src/components/toggle-group/index.ts

@@ -0,0 +1,2 @@
+export { default as ToggleGroup } from "./ToggleGroup.astro";
+export { default as ToggleGroupItem } from "./ToggleGroupItem.astro";

package/src/components/tooltip/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changelog
+
+All notable changes to the `Tooltip` component will be documented in this file.
+
+## Unreleased

package/src/components/tooltip/Tooltip.astro

@@ -0,0 +1,331 @@
+---
+/**
+ * @component Tooltip
+ * @title Tooltip
+ * @description A small popup that appears when hovering over or focusing on an element. Positioning is computed in JavaScript.
+ *
+ * @preview
+ *
+ * <Tooltip>
+ *   <TooltipTrigger asChild>
+ *     <Button variant="outline">Hover</Button>
+ *   </TooltipTrigger>
+ *   <TooltipContent>
+ *     <p>Add to library</p>
+ *   </TooltipContent>
+ * </Tooltip>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { Tooltip, TooltipTrigger, TooltipContent } from '@bejamas/ui/components/tooltip';
+ * import { Button } from '@bejamas/ui/components/button';
+ * ---
+ *
+ * <Tooltip>
+ *   <TooltipTrigger asChild>
+ *     <Button variant="outline">Hover</Button>
+ *   </TooltipTrigger>
+ *   <TooltipContent>
+ *     <p>Add to library</p>
+ *   </TooltipContent>
+ * </Tooltip>
+ * ```
+ *
+ * @examples
+ *
+ * ### With delay
+ *
+ * <Tooltip delay={1000}>
+ *   <TooltipTrigger asChild>
+ *     <Button variant="outline">Hover with delay</Button>
+ *   </TooltipTrigger>
+ *   <TooltipContent>
+ *     <p>This tooltip appears after 1000ms</p>
+ *   </TooltipContent>
+ * </Tooltip>
+ *
+ * ### Skip delay on subsequent tooltips
+ *
+ * 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.
+ *
+ * <div class="flex gap-2">
+ *   <Tooltip delay={500}>
+ *     <TooltipTrigger asChild>
+ *       <Button variant="outline">Bold</Button>
+ *     </TooltipTrigger>
+ *     <TooltipContent>
+ *       <p>Bold (Ctrl+B)</p>
+ *     </TooltipContent>
+ *   </Tooltip>
+ *   <Tooltip delay={500}>
+ *     <TooltipTrigger asChild>
+ *       <Button variant="outline">Italic</Button>
+ *     </TooltipTrigger>
+ *     <TooltipContent>
+ *       <p>Italic (Ctrl+I)</p>
+ *     </TooltipContent>
+ *   </Tooltip>
+ *   <Tooltip delay={500}>
+ *     <TooltipTrigger asChild>
+ *       <Button variant="outline">Underline</Button>
+ *     </TooltipTrigger>
+ *     <TooltipContent>
+ *       <p>Underline (Ctrl+U)</p>
+ *     </TooltipContent>
+ *   </Tooltip>
+ * </div>
+ *
+ * ### Different sides
+ *
+ * Use the `side` prop to control which side the tooltip appears on.
+ *
+ * <div class="grid gap-4 py-8">
+ *   <div class="flex gap-4 items-center justify-center">
+ *     <Tooltip>
+ *       <TooltipTrigger asChild>
+ *         <Button variant="outline">Left</Button>
+ *       </TooltipTrigger>
+ *       <TooltipContent side="left">
+ *         <p>Tooltip on left</p>
+ *       </TooltipContent>
+ *     </Tooltip>
+ *     <Tooltip>
+ *       <TooltipTrigger asChild>
+ *         <Button variant="outline">Top</Button>
+ *       </TooltipTrigger>
+ *       <TooltipContent side="top">
+ *         <p>Tooltip on top</p>
+ *       </TooltipContent>
+ *     </Tooltip>
+ *     <Tooltip>
+ *       <TooltipTrigger asChild>
+ *         <Button variant="outline">Bottom</Button>
+ *       </TooltipTrigger>
+ *       <TooltipContent side="bottom">
+ *         <p>Tooltip on bottom</p>
+ *       </TooltipContent>
+ *     </Tooltip>
+ *     <Tooltip>
+ *       <TooltipTrigger asChild>
+ *         <Button variant="outline">Right</Button>
+ *       </TooltipTrigger>
+ *       <TooltipContent side="right">
+ *         <p>Tooltip on right</p>
+ *       </TooltipContent>
+ *     </Tooltip>
+ *   </div>
+ *   <div class="flex gap-4 items-center justify-center">
+ *     <Tooltip>
+ *       <TooltipTrigger asChild>
+ *         <Button variant="outline">Inline Start</Button>
+ *       </TooltipTrigger>
+ *       <TooltipContent side="inline-start">
+ *         <p>Tooltip on inline start</p>
+ *       </TooltipContent>
+ *     </Tooltip>
+ *     <Tooltip>
+ *       <TooltipTrigger asChild>
+ *         <Button variant="outline">Inline End</Button>
+ *       </TooltipTrigger>
+ *       <TooltipContent side="inline-end">
+ *         <p>Tooltip on inline end</p>
+ *       </TooltipContent>
+ *     </Tooltip>
+ *   </div>
+ * </div>
+ *
+ * ### Alignment options
+ *
+ * Use the `align` prop to control how the tooltip aligns relative to the trigger.
+ *
+ * <div class="flex flex-col gap-4 items-center py-8">
+ *   <div class="flex gap-4">
+ *     <Tooltip>
+ *       <TooltipTrigger asChild>
+ *         <Button variant="outline">Top Start</Button>
+ *       </TooltipTrigger>
+ *       <TooltipContent side="top" align="start">
+ *         <p>Aligned to start</p>
+ *       </TooltipContent>
+ *     </Tooltip>
+ *     <Tooltip>
+ *       <TooltipTrigger asChild>
+ *         <Button variant="outline">Top Center</Button>
+ *       </TooltipTrigger>
+ *       <TooltipContent side="top" align="center">
+ *         <p>Aligned to center</p>
+ *       </TooltipContent>
+ *     </Tooltip>
+ *     <Tooltip>
+ *       <TooltipTrigger asChild>
+ *         <Button variant="outline">Top End</Button>
+ *       </TooltipTrigger>
+ *       <TooltipContent side="top" align="end">
+ *         <p>Aligned to end</p>
+ *       </TooltipContent>
+ *     </Tooltip>
+ *   </div>
+ *   <div class="flex gap-4">
+ *     <Tooltip>
+ *       <TooltipTrigger asChild>
+ *         <Button variant="outline">Bottom Start</Button>
+ *       </TooltipTrigger>
+ *       <TooltipContent side="bottom" align="start">
+ *         <p>Aligned to start</p>
+ *       </TooltipContent>
+ *     </Tooltip>
+ *     <Tooltip>
+ *       <TooltipTrigger asChild>
+ *         <Button variant="outline">Bottom Center</Button>
+ *       </TooltipTrigger>
+ *       <TooltipContent side="bottom" align="center">
+ *         <p>Aligned to center</p>
+ *       </TooltipContent>
+ *     </Tooltip>
+ *     <Tooltip>
+ *       <TooltipTrigger asChild>
+ *         <Button variant="outline">Bottom End</Button>
+ *       </TooltipTrigger>
+ *       <TooltipContent side="bottom" align="end">
+ *         <p>Aligned to end</p>
+ *       </TooltipContent>
+ *     </Tooltip>
+ *   </div>
+ * </div>
+ *
+ * ### Positioning Options
+ *
+ * Use `TooltipContent` props to configure placement:
+ *
+ * <div class="flex gap-3">
+ *   <Tooltip>
+ *     <TooltipTrigger asChild>
+ *       <Button variant="outline">Offset</Button>
+ *     </TooltipTrigger>
+ *     <TooltipContent sideOffset={8}>
+ *       <p>More distance from trigger</p>
+ *     </TooltipContent>
+ *   </Tooltip>
+ *   <Tooltip>
+ *     <TooltipTrigger asChild>
+ *       <Button variant="outline">Align offset</Button>
+ *     </TooltipTrigger>
+ *     <TooltipContent side="bottom" align="start" alignOffset={12}>
+ *       <p>Shifted on alignment axis</p>
+ *     </TooltipContent>
+ *   </Tooltip>
+ * </div>
+ *
+ * ### Disabled
+ *
+ * <Tooltip>
+ *   <TooltipTrigger asChild>
+ *     <Button variant="outline" disabled>Disabled</Button>
+ *   </TooltipTrigger>
+ *   <TooltipContent>
+ *     <p>This feature is currently unavailable</p>
+ *   </TooltipContent>
+ * </Tooltip>
+ *
+ * @api
+ *
+ * ### Events
+ *
+ * The tooltip emits custom events that you can listen to:
+ *
+ * | Event | Detail | Description |
+ * |-------|--------|-------------|
+ * | `tooltip:change` | `{ open: boolean, trigger: HTMLElement, content: HTMLElement, reason: string }` | Fired when visibility changes |
+ *
+ * ```astro nocollapse
+ * <Tooltip id="my-tooltip">
+ *   <TooltipTrigger asChild>
+ *     <Button variant="outline">Hover me</Button>
+ *   </TooltipTrigger>
+ *   <TooltipContent>
+ *     <p>Tooltip content</p>
+ *   </TooltipContent>
+ * </Tooltip>
+ * ```
+ *
+ * ```js nocollapse
+ *   const tooltip = document.getElementById('my-tooltip');
+ *
+ *   tooltip.addEventListener('tooltip:change', (e) => {
+ *     console.log('Is open:', e.detail.open);
+ *     console.log('Reason:', e.detail.reason);
+ *   });
+ * ```
+ *
+ * ### Programmatic Control
+ *
+ * You can control the tooltip programmatically by dispatching a `tooltip:set` event:
+ *
+ * ```js nocollapse
+ * const tooltip = document.getElementById('my-tooltip');
+ *
+ * // Show the tooltip
+ * tooltip.dispatchEvent(new CustomEvent('tooltip:set', {
+ *   detail: { open: true }
+ * }));
+ *
+ * // Hide the tooltip
+ * tooltip.dispatchEvent(new CustomEvent('tooltip:set', {
+ *   detail: { open: false }
+ * }));
+ * ```
+ *
+ * The deprecated `{ value: boolean }` detail shape is still supported temporarily for compatibility, but new code should always use `{ open: boolean }`.
+ *
+ * ### Data Attributes
+ *
+ * The tooltip sets these data attributes that you can use for styling or querying state:
+ *
+ * | Attribute | Element | Description |
+ * |-----------|---------|-------------|
+ * | `data-state` | tooltip, tooltip-content | Legacy `"open"` / `"closed"` compatibility shim. Prefer `data-open` / `data-closed`. |
+ * | `data-open` / `data-closed` | tooltip, tooltip-content, tooltip-positioner, tooltip-arrow | Present while open/closed |
+ * | `data-starting-style` / `data-ending-style` | tooltip-content | Present while opening or closing |
+ * | `data-instant` | tooltip, tooltip-content, tooltip-positioner, tooltip-arrow | Interaction reason: `"delay"`, `"focus"`, or `"dismiss"` |
+ * | `data-side` | tooltip-content, tooltip-positioner, tooltip-arrow | Runtime side (`top`, `right`, `bottom`, `left`, `inline-start`, or `inline-end`) after collision handling |
+ * | `data-align` | tooltip-content, tooltip-positioner, tooltip-arrow | Runtime alignment (`start`, `center`, or `end`) |
+ * | `data-side-offset` | tooltip-content | Distance from trigger in pixels (default `4`) |
+ * | `data-align-offset` | tooltip-content | Alignment-axis offset in pixels (default `0`) |
+ */
+
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+  delay?: number;
+  skipDelayDuration?: number;
+}
+
+const {
+  class: className = "",
+  delay = 300,
+  skipDelayDuration = 300,
+  ...rest
+} = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  data-slot="tooltip"
+  data-delay={delay}
+  data-skip-delay-duration={skipDelayDuration}
+  class={cn("", "inline-block", className)}
+>
+  <slot />
+</div>
+
+<script>
+  import { createTooltip } from "@data-slot/tooltip";
+
+  document
+    .querySelectorAll('[data-slot="tooltip"]')
+    .forEach((el) => createTooltip(el));
+</script>

package/src/components/tooltip/TooltipContent.astro

@@ -0,0 +1,60 @@
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+type TooltipSide =
+  | "top"
+  | "bottom"
+  | "left"
+  | "right"
+  | "inline-start"
+  | "inline-end";
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+  sideOffset?: number;
+  side?: TooltipSide;
+  align?: "start" | "center" | "end";
+  alignOffset?: number;
+}
+
+const {
+  class: className = "",
+  sideOffset,
+  side = "top",
+  align = "center",
+  alignOffset,
+  ...rest
+} = Astro.props as Props;
+---
+
+<div data-slot="tooltip-portal">
+  <div data-slot="tooltip-positioner" class="isolate z-50">
+    <div
+      {...rest}
+      hidden
+      data-slot="tooltip-content"
+      data-side={side}
+      data-side-offset={sideOffset}
+      data-align={align}
+      data-align-offset={alignOffset}
+      class={cn(
+        "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 px-2 py-1 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",
+        className,
+      )}
+    >
+      <slot />
+      <div
+        data-slot="tooltip-arrow"
+        class={cn(
+          "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",
+          "data-[side=top]:-bottom-1",
+          "data-[side=bottom]:-top-1",
+          "data-[side=left]:-right-1",
+          "data-[side=right]:-left-1",
+        )}
+      >
+      </div>
+    </div>
+  </div>
+</div>