@cl-light-ds/ui 0.1.0 → 0.3.0

package/src/components/table/TableSelectCell.astro

@@ -0,0 +1,50 @@
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+import { Checkbox } from "../checkbox";
+import { cellBase } from "./table-cell-variants";
+
+interface Props extends HTMLAttributes<"td"> {
+  class?: string;
+  /** Renders the header "select all on this page" checkbox in a `<th>`. */
+  header?: boolean;
+  checked?: boolean;
+  disabled?: boolean;
+  /** Accessible label. Defaults to "Select all rows" / "Select row". */
+  label?: string;
+}
+
+const {
+  class: className = "",
+  header = false,
+  checked = false,
+  disabled = false,
+  label = header ? "Select all rows" : "Select row",
+  ...rest
+} = Astro.props as Props;
+
+const Tag = header ? "th" : "td";
+---
+
+<Tag
+  data-slot={header ? "table-head" : "table-cell"}
+  data-select-cell
+  scope={header ? "col" : undefined}
+  class={cn(
+    cellBase,
+    "w-15 text-center",
+    header
+      ? "h-11 bg-muted group-data-[sticky-header]/table:sticky group-data-[sticky-header]/table:top-0 group-data-[sticky-header]/table:z-10 data-[pinned]:z-20 data-[pinned]:bg-muted"
+      : "h-12 py-2",
+    className,
+  )}
+  {...rest}
+>
+  <Checkbox
+    data-table-select={header ? "all" : "row"}
+    aria-label={label}
+    checked={checked}
+    disabled={disabled}
+    class="align-middle"
+  />
+</Tag>

package/src/components/table/TableSkeletonRow.astro

@@ -0,0 +1,21 @@
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import { Skeleton } from "../skeleton";
+import { cellBase } from "./table-cell-variants";
+
+interface Props {
+  /** Number of cells to render. */
+  columns: number;
+  class?: string;
+}
+
+const { columns, class: className = "" } = Astro.props as Props;
+---
+
+<tr data-slot="table-skeleton-row" aria-hidden="true" class={cn("bg-background", className)}>
+  {Array.from({ length: columns }, (_, i) => (
+    <td class={cn(cellBase, "h-12 py-2")}>
+      <Skeleton class={i === 0 ? "mx-auto size-4 rounded-sm" : "h-4 w-full max-w-32"} />
+    </td>
+  ))}
+</tr>

package/src/components/table/index.ts

@@ -1,9 +1,19 @@
-export { default as Table } from "./Table.astro";
-export { default as TableHeader } from "./TableHeader.astro";
-export { default as TableBody } from "./TableBody.astro";
-export { default as TableFooter } from "./TableFooter.astro";
-export { default as TableHead } from "./TableHead.astro";
-export { default as TableRow } from "./TableRow.astro";
-export { default as TableCell } from "./TableCell.astro";
-export { default as TableCaption } from "./TableCaption.astro";
-
+export { default as Table } from "./Table.astro";
+export { default as TableHeader } from "./TableHeader.astro";
+export { default as TableBody } from "./TableBody.astro";
+export { default as TableFooter } from "./TableFooter.astro";
+export { default as TableHead } from "./TableHead.astro";
+export { default as TableRow } from "./TableRow.astro";
+export { default as TableCell } from "./TableCell.astro";
+export { default as TableCaption } from "./TableCaption.astro";
+export { default as TableCellText } from "./TableCellText.astro";
+export { default as TableEditableCell } from "./TableEditableCell.astro";
+export { default as TableFolderCell } from "./TableFolderCell.astro";
+export { default as TableSelectCell } from "./TableSelectCell.astro";
+export { default as TableBulkToolbar } from "./TableBulkToolbar.astro";
+export { default as TableSelectAllBanner } from "./TableSelectAllBanner.astro";
+export { default as TablePagination } from "./TablePagination.astro";
+export { default as TableColumnMenu } from "./TableColumnMenu.astro";
+export { default as TableSkeletonRow } from "./TableSkeletonRow.astro";
+export { default as TableEmpty } from "./TableEmpty.astro";
+export type { TableCellOption } from "./TableEditableCell.astro";

package/src/components/table/table-cell-variants.ts

@@ -0,0 +1,29 @@
+import { cva } from "class-variance-authority";
+
+/** Shared padding, borders and pinning for header and data cells. */
+export const cellBase = [
+  "relative border-b border-border px-4 align-middle whitespace-nowrap first:pl-6 last:pr-6",
+  "outline-none focus-visible:z-[2] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
+  "data-[pinned]:sticky data-[pinned]:z-[1] data-[pinned]:bg-inherit data-[pinned-last]:shadow-[inset_-1px_0_0_var(--border)]",
+];
+
+export const cellAlign = cva("", {
+  variants: {
+    align: {
+      left: "text-left",
+      center: "text-center",
+      right: "text-right",
+    },
+  },
+  defaultVariants: {
+    align: "left",
+  },
+});
+
+export type CellAlign = "left" | "center" | "right";
+
+/** Indent for nested rows: 20px per level, matching the Figma folder tree. */
+export function levelIndentStyle(level: number | undefined): string | undefined {
+  if (!level || level <= 1) return undefined;
+  return `padding-inline-start: calc(1rem + ${(level - 1) * 1.25}rem)`;
+}

package/src/components/tabs/CHANGELOG.md

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

package/src/components/tabs/index.ts

@@ -1,6 +1,6 @@
-export { default as Tabs } from "./Tabs.astro";
-export { default as TabsList } from "./TabsList.astro";
-export { default as TabsTrigger } from "./TabsTrigger.astro";
-export { default as TabsContent } from "./TabsContent.astro";
-export { tabsListVariants } from "./TabsList.astro";
-export { tabsContentVariants } from "./TabsContent.astro";
+export { default as Tabs } from "./Tabs.astro";
+export { default as TabsList } from "./TabsList.astro";
+export { default as TabsTrigger } from "./TabsTrigger.astro";
+export { default as TabsContent } from "./TabsContent.astro";
+export { tabsListVariants } from "./TabsList.astro";
+export { tabsContentVariants } from "./TabsContent.astro";

package/src/components/textarea/CHANGELOG.md

@@ -1,5 +1,22 @@
-# Changelog
-
-All notable changes to the `Textarea` component will be documented in this file.
-
-## Unreleased
+# Changelog
+
+All notable changes to the `Textarea` component will be documented in this file.
+
+## 2026-09-18 — Figma alignment (ClickLearn Lightning Design Library, node `144-2`)
+
+Figma documents Textarea across four pages: Contents (Clean, Label, "Actionable with resize mode", All details), States (Default, Hover, Pressed/Focus, Disabled), and Sizes (Simple, Actionable).
+
+### Fixed
+
+- Updated `@figmaUrl` from the old Bejamas file to the ClickLearn Lightning Design Library link.
+- Background: `bg-transparent dark:bg-input/30` → `bg-card` — same recurring fix as `Input`/`InputGroup`/`DialogContent` (no light-mode background was set at all).
+- Font weight: removed `font-semibold` — Figma specifies Regular (400), not Semi Bold; there was no reason for a plain textarea's typed text to be bold.
+- Removed a dead duplicate `px-2.5` (a later `px-3` in the same class string always won anyway).
+- `py-2` (8px) → `py-2.5` (10px), matching Figma's `padding/p-2.5` token (consistent across every Textarea instance checked).
+- Disabled: `disabled:opacity-50` → `disabled:bg-muted disabled:text-muted-foreground` (kept `disabled:cursor-not-allowed`) — a real flat-color swap, matching Figma's Disabled screenshot and the same category of fix already made to `Checkbox`/`Input`.
+
+### Notes (answering the "toolbar prop" question)
+
+- Checked bejamas' own upstream `Textarea.astro` (via `gh api`) — it's a bare `<textarea>` with no toolbar concept whatsoever, so this isn't something to port from there.
+- Figma's "Actionable" size is a **composition**, not a `Textarea`-level concern: it's the exact same `InputGroup` + `InputGroupTextarea` + `InputGroupAddon(align="block-start")` pattern already built and verified for `InputGroup`'s own toolbar example (same shared border, block-start divider). No `toolbar` prop was added to `Textarea` — added a storybook example demonstrating the composition instead, plus a note pointing at `InputGroup` for the full API.
+- Focus ring (`border-ring`/`ring-3 ring-ring/50`), border color (`border-input`), and radius (`rounded-lg`) already matched Figma's tokens exactly — no changes needed.

package/src/components/textarea/Textarea.astro

@@ -3,7 +3,7 @@
  * @component Textarea
  * @title Textarea
  * @description A multi-line input field for longer user content.
- * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/bejamas-ui?node-id=2508-2555&t=YFStJ3V8fXEO8QD8-4
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=144-2
  * @status stable
  * @since 0.1.0
  *
@@ -20,17 +20,39 @@
  *
  * <Textarea placeholder="Type your message here..." />
  * ```
+ *
+ * @examples
+ *
+ * ### Actionable (with toolbar)
+ *
+ * Figma's "Actionable" size is a composition, not a `Textarea` prop — build it with
+ * `InputGroup` + `InputGroupTextarea` + a `block-start` `InputGroupAddon`, the same
+ * pattern already used for InputGroup's own toolbar example.
+ *
+ * <InputGroup>
+ *   <InputGroupTextarea placeholder="Type your message here..." />
+ *   <InputGroupAddon align="block-start">
+ *     <InputGroupButton size="icon-xs"><BoldIcon /></InputGroupButton>
+ *     <InputGroupButton size="icon-xs"><ItalicIcon /></InputGroupButton>
+ *     <InputGroupButton size="icon-xs"><UnderlineIcon /></InputGroupButton>
+ *     <Separator orientation="vertical" class="!h-4" />
+ *     <InputGroupButton size="icon-xs"><ListIcon /></InputGroupButton>
+ *     <InputGroupButton size="icon-xs"><ImageIcon /></InputGroupButton>
+ *     <Separator orientation="vertical" class="!h-4" />
+ *     <InputGroupButton size="icon-xs"><EllipsisIcon /></InputGroupButton>
+ *   </InputGroupAddon>
+ * </InputGroup>
  */
 
 const { class: className = "", ...props } = Astro.props;
 
 const baseClass =
-  "flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50";
+  "flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed";
 
 import { cn } from "@cl-light-ds/ui/lib/utils";
 ---
 
 <textarea
   data-slot={props["data-slot"] ?? "textarea"}
-  class={cn("border-input dark:bg-input/30 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:aria-invalid:border-destructive/50 rounded-lg border bg-transparent px-2.5 py-2 text-base font-semibold shadow-xs transition-[color,box-shadow] focus-visible:ring-3 aria-invalid:ring-3 md:text-sm px-3", baseClass, className)}
+  class={cn("border-input bg-card 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:aria-invalid:border-destructive/50 disabled:bg-muted disabled:text-muted-foreground rounded-lg border px-3 py-2.5 text-base shadow-xs transition-[color,box-shadow] focus-visible:ring-3 aria-invalid:ring-3 md:text-sm", baseClass, className)}
   {...props}></textarea>

package/src/components/textarea/index.ts

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

package/src/components/toggle/CHANGELOG.md

@@ -1,5 +1,23 @@
-# Changelog
-
-All notable changes to the `Toggle` component will be documented in this file.
-
-## Unreleased
+# Changelog
+
+All notable changes to the `Toggle` component will be documented in this file.
+
+## 2026-09-18 — Figma alignment (ClickLearn Lightning Design Library, node `5455-19034`)
+
+Figma documents Toggle across four pages: Contents (Default, Clean, Tail Icon, Complex), States (Default, Hover, Pressed, Focus Default, Focus Pressed, Disabled), and Sizes (Small 28px, Medium 32px, Large 36px). Sizing/variant fixes live in the shared `toggleVariants` (`packages/ui/src/lib/toggle-shared.ts`), used by both `Toggle` and `ToggleGroup`.
+
+### Fixed
+
+- Added the missing `@figmaUrl`.
+- **Default variant**: Figma's "Default" (unpressed) state renders as a bordered button — matching what the code calls `outline`, not the code's own bare/borderless `default` variant. Every existing usage example already passed `variant="outline"` explicitly, so changed the component's own default to `"outline"` — visually a no-op for existing usages, just removes the need to repeat the prop.
+- **Sizes**: Figma's three sizes (28/32/36px) turned out to be the existing `sm`(32px, was mislabeled relative to Figma's "Medium")/`default`(36px, Figma's "Large") tiers shifted down one notch, with Figma's smallest size (28px) missing entirely. Added a new `size="xs"` (28px, `h-7`) to `toggle-shared.ts`. The code's own `lg` (40px) has no Figma equivalent — flagging per the recurring size-naming pattern (Accordion/Checkbox/Input/RadioGroup/Switch), not renaming.
+- Disabled: `disabled:opacity-50` → `disabled:bg-muted disabled:text-muted-foreground` (kept `disabled:pointer-events-none`) — a real flat-color swap, matching Figma's Disabled screenshot and the same category of fix already made repeatedly (Checkbox/Input/Textarea).
+
+### Added
+
+- A "Tail icon" storybook/JSDoc example, matching Figma's "Tail Icon"/"Complex" content variants — already achievable today via the existing slot (just place a trailing icon after the text), no new prop needed.
+
+### Notes
+
+- Pressed (`aria-pressed:bg-background-hover`) and Focus (`border-ring`/`ring-[3px]`) treatments already matched Figma's tokens exactly — no changes needed.
+- Hover isn't implemented, per the standing project direction to skip hover states.

package/src/components/toggle/Toggle.astro

@@ -3,6 +3,7 @@
  * @component Toggle
  * @title Toggle
  * @description A two-state button that can be either on or off.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=5455-19034
  *
  * @preview
  *
@@ -71,6 +72,9 @@
  * ### Sizes
  *
  * <div class="flex items-center gap-2">
+ *   <Toggle size="xs" variant="outline" aria-label="Toggle extra small">
+ *     XS
+ *   </Toggle>
  *   <Toggle size="sm" variant="outline" aria-label="Toggle small">
  *     Small
  *   </Toggle>
@@ -82,6 +86,14 @@
  *   </Toggle>
  * </div>
  *
+ * ### Tail icon
+ *
+ * <Toggle variant="outline" aria-label="Toggle bookmark">
+ *   <BookmarkIcon class="group-aria-pressed/toggle:fill-foreground" />
+ *   Bookmark
+ *   <XIcon class="size-3.5" />
+ * </Toggle>
+ *
  * ### Disabled
  *
  * <div class="flex items-center gap-2">
@@ -109,7 +121,7 @@ interface Props extends ToggleVariantProps, Omit<HTMLAttributes<"button">, "clas
 }
 
 const {
-  variant = "default",
+  variant = "outline",
   size = "default",
   defaultPressed,
   disabled,

package/src/components/toggle/index.ts

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

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

@@ -1,5 +1,18 @@
-# Changelog
-
-All notable changes to the `ToggleGroup` component will be documented in this file.
-
-## Unreleased
+# Changelog
+
+All notable changes to the `ToggleGroup` component will be documented in this file.
+
+## 2026-09-18 — Figma alignment (ClickLearn Lightning Design Library, node `5455-20808`)
+
+Figma documents ToggleGroup across four pages: States (Default, Hover, Pressed, Focus Default, Focus Pressed, Disabled), Sizes (Small 28px, Medium 32px, Large 36px — matching `Toggle`'s own scale), Items (Lead/Middle/Tail item positions × sizes × states), and the top-level Variants page (Small/Medium/Large).
+
+### Fixed
+
+- Added the missing `@figmaUrl`.
+- **Default variant**: changed the component's own default from `"default"` to `"outline"`, matching Figma's bordered default look — same fix and same reasoning as `Toggle` (every existing usage example already passed `variant="outline"` explicitly, so this is a no-op for current demos).
+- **Sizes**: added `size="xs"` (28px) to the shared `toggleVariants` (see `Toggle`'s changelog for the full sizing analysis — `ToggleGroup` uses the identical scale). `ToggleGroupItem`'s own `size` override picks this up automatically since it shares the same `ToggleVariantProps` type.
+
+### Notes
+
+- Segmented "connected" styling (`spacing=0` → shared borders, first/last rounding) and the vertical-orientation border swap weren't shown differently in Figma's reference (which only documents individual items, not the connected-segment composition) — left unchanged since there's no contradicting evidence.
+- Disabled/Focus/Pressed treatments are inherited from the same shared `toggleVariants` fixed in `Toggle` — no separate `ToggleGroup`-specific styling needed.

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

@@ -3,6 +3,7 @@
  * @component ToggleGroup
  * @title Toggle Group
  * @description A set of two-state buttons that can be toggled on or off. Supports single or multiple selection.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=5455-20808
  *
  * @preview
  *
@@ -100,6 +101,17 @@
  * ### Sizes
  *
  * <div class="flex flex-col gap-4">
+ *   <ToggleGroup size="xs" 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="sm" variant="outline" defaultValue="center">
  *     <ToggleGroupItem value="left" aria-label="Align left">
  *       <AlignLeftIcon />
@@ -170,7 +182,7 @@ import { cn } from "@cl-light-ds/ui/lib/utils";
 
 interface Props extends Omit<HTMLAttributes<"div">, "class"> {
   variant?: "default" | "outline";
-  size?: "default" | "sm" | "lg";
+  size?: "xs" | "default" | "sm" | "lg";
   spacing?: number;
   defaultValue?: string | string[];
   multiple?: boolean;
@@ -181,7 +193,7 @@ interface Props extends Omit<HTMLAttributes<"div">, "class"> {
 }
 
 const {
-  variant = "default",
+  variant = "outline",
   size = "default",
   spacing = 0,
   defaultValue,

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

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

package/src/components/tooltip/CHANGELOG.md

@@ -1,5 +1,22 @@
-# Changelog
-
-All notable changes to the `Tooltip` component will be documented in this file.
-
-## Unreleased
+# Changelog
+
+All notable changes to the `Tooltip` component family (`Tooltip`, `TooltipTrigger`, `TooltipContent`) are documented in this file.
+
+## 2026-09-18 — Figma alignment (ClickLearn Lightning Design Library, node `5275-137`)
+
+Figma documents Tooltip across four pages: Contents (6 side/align positions — already fully covered by the existing `side`/`align` props), Variants (Default, Outline), Sizes (Small, Large), and the top-level Component page.
+
+### Added
+
+- **`variant` prop on `TooltipContent`** (`"default" | "outline"`, default `"default"`): Figma documents a second, previously entirely unimplemented "Outline" variant — a light `bg-card` tooltip with a `border-border` border and dark text, versus the existing inverted-dark style. Colors confirmed via Figma tokens (`card` = `#ffffff`, `border` = `#e4e4e7`, text = `foreground`). The arrow now matches whichever variant is active.
+- **`size` prop on `TooltipContent`** (`"default" | "lg"`, default `"default"`): Figma's "Large" size uses more generous padding (`px-3 py-2` vs. the existing `px-2 py-1`) to comfortably fit a two-line title + supportive-text composition. The two-line content itself is left to the consumer to compose (a `flex flex-col` wrapper with a bold title and a muted caption) rather than hardcoded into `TooltipContent`, consistent with how other compound content (e.g. Popover's header) is handled.
+- Storybook/JSDoc examples for both the Outline variant and the Large size.
+
+### Fixed
+
+- Removed a dead, redundant duplicate of the arrow's `data-[side=*]` position classes (repeated verbatim right after the main class string) — same class of cleanup already done on Dialog/HoverCard/Popover.
+
+### Notes
+
+- The existing 6 content positions (None/Left/Right/Bottom Left/Bottom Middle/Bottom Right) all map directly onto the already-supported `side`/`align` props — no changes needed there.
+- The default (dark, inverted) variant's colors already matched Figma exactly (`bg-foreground`/`text-background`) — no change needed.

package/src/components/tooltip/Tooltip.astro

@@ -3,6 +3,7 @@
  * @component Tooltip
  * @title Tooltip
  * @description A small popup that appears when hovering over or focusing on an element. Positioning is computed in JavaScript.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=5275-137
  *
  * @preview
  *
@@ -35,6 +36,31 @@
  *
  * @examples
  *
+ * ### Outline variant
+ *
+ * <Tooltip>
+ *   <TooltipTrigger asChild>
+ *     <Button variant="outline">Hover</Button>
+ *   </TooltipTrigger>
+ *   <TooltipContent variant="outline">
+ *     <p>Tooltip label</p>
+ *   </TooltipContent>
+ * </Tooltip>
+ *
+ * ### Large size (with supportive text)
+ *
+ * <Tooltip>
+ *   <TooltipTrigger asChild>
+ *     <Button variant="outline">Hover</Button>
+ *   </TooltipTrigger>
+ *   <TooltipContent variant="outline" size="lg">
+ *     <div class="flex flex-col gap-1">
+ *       <p class="font-medium">Tooltip label</p>
+ *       <p class="opacity-70">Supportive text</p>
+ *     </div>
+ *   </TooltipContent>
+ * </Tooltip>
+ *
  * ### With delay
  *
  * <Tooltip delay={1000}>

package/src/components/tooltip/TooltipContent.astro

@@ -1,5 +1,6 @@
 ---
 import { cn } from "@cl-light-ds/ui/lib/utils";
+import { cva } from "class-variance-authority";
 import type { HTMLAttributes } from "astro/types";
 
 type TooltipSide =
@@ -16,6 +17,8 @@ interface Props extends HTMLAttributes<"div"> {
   side?: TooltipSide;
   align?: "start" | "center" | "end";
   alignOffset?: number;
+  variant?: "default" | "outline";
+  size?: "default" | "lg";
 }
 
 const {
@@ -24,8 +27,36 @@ const {
   side = "top",
   align = "center",
   alignOffset,
+  variant = "default",
+  size = "default",
   ...rest
 } = Astro.props as Props;
+
+const contentVariants = cva(
+  [
+    // visibility / animation
+    "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=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2",
+    // layout
+    "inline-flex items-center gap-1 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 z-50 w-fit max-w-xs origin-(--transform-origin)",
+  ],
+  {
+    variants: {
+      variant: {
+        default: "bg-foreground text-background",
+        outline: "bg-card text-foreground border border-border",
+      },
+      size: {
+        default: "px-2 py-1 text-xs",
+        lg: "px-3 py-2 text-sm",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
 ---
 
 <div data-slot="tooltip-portal">
@@ -38,20 +69,14 @@ const {
       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,
-      )}
+      class={cn(contentVariants({ variant, size }), 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",
+          variant === "outline" ? "bg-card border border-border" : "bg-foreground fill-foreground",
+          "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",
         )}
       >
       </div>

package/src/components/tooltip/index.ts

@@ -1,3 +1,3 @@
-export { default as Tooltip } from "./Tooltip.astro";
-export { default as TooltipTrigger } from "./TooltipTrigger.astro";
-export { default as TooltipContent } from "./TooltipContent.astro";
+export { default as Tooltip } from "./Tooltip.astro";
+export { default as TooltipTrigger } from "./TooltipTrigger.astro";
+export { default as TooltipContent } from "./TooltipContent.astro";