@starwind-ui/core 1.15.1 → 1.15.2

package/dist/index.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Component metadata interface describing a Starwind UI component
+ */
+interface ComponentMeta {
+    name: string;
+    version: string;
+    type: "component";
+    dependencies: string[];
+}
+/**
+ * Registry interface containing all available components
+ */
+interface Registry {
+    components: ComponentMeta[];
+}
+/**
+ * Get the absolute path to a component file
+ * @param {string} componentName - The name of the component
+ * @param {string} fileName - The name of the file within the component
+ * @returns {string} The absolute path to the component file
+ */
+declare const getComponentPath: (componentName: string, fileName: string) => string;
+/**
+ * Map of all components and their metadata from registry
+ */
+declare const registry: ComponentMeta[];
+
+export { type ComponentMeta, type Registry, getComponentPath, registry };

package/dist/index.js

@@ -0,0 +1,108 @@
+// src/index.ts
+import { join } from "path";
+import { fileURLToPath } from "url";
+
+// src/registry.json
+var registry_default = {
+  $schema: "https://starwind.dev/registry-schema.json",
+  components: [
+    { name: "accordion", type: "component", version: "1.3.3", dependencies: [] },
+    { name: "alert", type: "component", version: "1.3.0", dependencies: [] },
+    {
+      name: "alert-dialog",
+      type: "component",
+      version: "1.0.3",
+      dependencies: ["@starwind-ui/core/button@^2.1.0"]
+    },
+    { name: "aspect-ratio", type: "component", version: "1.0.0", dependencies: [] },
+    { name: "avatar", type: "component", version: "1.2.1", dependencies: [] },
+    { name: "badge", type: "component", version: "1.4.0", dependencies: [] },
+    { name: "breadcrumb", type: "component", version: "1.1.1", dependencies: [] },
+    {
+      name: "button-group",
+      type: "component",
+      version: "1.0.0",
+      dependencies: ["@starwind-ui/core/separator@^1.0.0"]
+    },
+    { name: "button", type: "component", version: "2.3.0", dependencies: [] },
+    { name: "card", type: "component", version: "1.3.0", dependencies: [] },
+    {
+      name: "carousel",
+      type: "component",
+      version: "1.0.1",
+      dependencies: ["@starwind-ui/core/button@^2.1.0", "embla-carousel@^8.6.0"]
+    },
+    { name: "checkbox", type: "component", version: "1.4.1", dependencies: [] },
+    { name: "collapsible", type: "component", version: "1.0.0", dependencies: [] },
+    { name: "dialog", type: "component", version: "1.4.3", dependencies: [] },
+    { name: "dropdown", type: "component", version: "1.2.3", dependencies: [] },
+    { name: "dropzone", type: "component", version: "1.2.2", dependencies: [] },
+    { name: "image", type: "component", version: "1.0.0", dependencies: [] },
+    { name: "input", type: "component", version: "1.3.1", dependencies: [] },
+    { name: "input-otp", type: "component", version: "1.0.1", dependencies: [] },
+    {
+      name: "item",
+      type: "component",
+      version: "1.0.0",
+      dependencies: ["@starwind-ui/core/separator@^1.0.0"]
+    },
+    { name: "kbd", type: "component", version: "1.0.0", dependencies: [] },
+    { name: "label", type: "component", version: "1.2.0", dependencies: [] },
+    { name: "pagination", type: "component", version: "3.0.2", dependencies: [] },
+    { name: "progress", type: "component", version: "1.1.1", dependencies: [] },
+    { name: "prose", type: "component", version: "1.0.0", dependencies: [] },
+    { name: "radio-group", type: "component", version: "1.2.4", dependencies: [] },
+    { name: "select", type: "component", version: "1.8.3", dependencies: [] },
+    { name: "separator", type: "component", version: "1.0.0", dependencies: [] },
+    {
+      name: "sheet",
+      type: "component",
+      version: "1.1.1",
+      dependencies: ["@starwind-ui/core/dialog@^1.3.0"]
+    },
+    {
+      name: "sidebar",
+      type: "component",
+      version: "1.0.0",
+      dependencies: [
+        "@starwind-ui/core/button@^2.3.0",
+        "@starwind-ui/core/dialog@^1.4.3",
+        "@starwind-ui/core/input@^1.3.1",
+        "@starwind-ui/core/separator@^1.0.0",
+        "@starwind-ui/core/sheet@^1.1.1",
+        "@starwind-ui/core/skeleton@^1.2.0",
+        "@starwind-ui/core/tooltip@^1.4.0"
+      ]
+    },
+    { name: "skeleton", type: "component", version: "1.2.0", dependencies: [] },
+    { name: "slider", type: "component", version: "1.0.0", dependencies: [] },
+    { name: "spinner", type: "component", version: "1.0.0", dependencies: [] },
+    { name: "switch", type: "component", version: "1.3.1", dependencies: [] },
+    { name: "table", type: "component", version: "1.1.0", dependencies: [] },
+    { name: "tabs", type: "component", version: "1.4.1", dependencies: [] },
+    { name: "textarea", type: "component", version: "1.3.1", dependencies: [] },
+    {
+      name: "theme-toggle",
+      type: "component",
+      version: "1.0.0",
+      dependencies: ["@starwind-ui/core/toggle@^1.0.1"]
+    },
+    { name: "toast", type: "component", version: "1.0.0", dependencies: [] },
+    { name: "toggle", type: "component", version: "1.0.1", dependencies: [] },
+    { name: "tooltip", type: "component", version: "1.4.0", dependencies: [] },
+    { name: "video", type: "component", version: "1.0.0", dependencies: [] }
+  ]
+};
+
+// src/index.ts
+var __dirname = fileURLToPath(new URL(".", import.meta.url));
+var getComponentPath = (componentName, fileName) => {
+  const componentsDir = __dirname.includes("dist") ? "src/components" : "src/components";
+  return join(__dirname, componentsDir, componentName, fileName);
+};
+var registry = registry_default.components;
+export {
+  getComponentPath,
+  registry
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/registry.json"],"sourcesContent":["import { join } from \"node:path\";\nimport { fileURLToPath } from \"node:url\";\n\nimport componentRegistry from \"./registry.json\" with { type: \"json\" };\n\n/**\n * Component metadata interface describing a Starwind UI component\n */\nexport interface ComponentMeta {\n  name: string;\n  version: string;\n  type: \"component\";\n  dependencies: string[];\n}\n\n/**\n * Registry interface containing all available components\n */\nexport interface Registry {\n  components: ComponentMeta[];\n}\n\nconst __dirname = fileURLToPath(new URL(\".\", import.meta.url));\n\n/**\n * Get the absolute path to a component file\n * @param {string} componentName - The name of the component\n * @param {string} fileName - The name of the file within the component\n * @returns {string} The absolute path to the component file\n */\nexport const getComponentPath = (componentName: string, fileName: string): string => {\n  // In production (when installed as a dependency), the components will be in dist/src/components\n  // In development, they will be in src/components\n  const componentsDir = __dirname.includes(\"dist\") ? \"src/components\" : \"src/components\";\n  return join(__dirname, componentsDir, componentName, fileName);\n};\n\n/**\n * Map of all components and their metadata from registry\n */\nexport const registry = componentRegistry.components as ComponentMeta[];\n","{\n  \"$schema\": \"https://starwind.dev/registry-schema.json\",\n  \"components\": [\n    { \"name\": \"accordion\", \"type\": \"component\", \"version\": \"1.3.3\", \"dependencies\": [] },\n    { \"name\": \"alert\", \"type\": \"component\", \"version\": \"1.3.0\", \"dependencies\": [] },\n    {\n      \"name\": \"alert-dialog\",\n      \"type\": \"component\",\n      \"version\": \"1.0.3\",\n      \"dependencies\": [\"@starwind-ui/core/button@^2.1.0\"]\n    },\n    { \"name\": \"aspect-ratio\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n    { \"name\": \"avatar\", \"type\": \"component\", \"version\": \"1.2.1\", \"dependencies\": [] },\n    { \"name\": \"badge\", \"type\": \"component\", \"version\": \"1.4.0\", \"dependencies\": [] },\n    { \"name\": \"breadcrumb\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n    {\n      \"name\": \"button-group\",\n      \"type\": \"component\",\n      \"version\": \"1.0.0\",\n      \"dependencies\": [\"@starwind-ui/core/separator@^1.0.0\"]\n    },\n    { \"name\": \"button\", \"type\": \"component\", \"version\": \"2.3.0\", \"dependencies\": [] },\n    { \"name\": \"card\", \"type\": \"component\", \"version\": \"1.3.0\", \"dependencies\": [] },\n    {\n      \"name\": \"carousel\",\n      \"type\": \"component\",\n      \"version\": \"1.0.1\",\n      \"dependencies\": [\"@starwind-ui/core/button@^2.1.0\", \"embla-carousel@^8.6.0\"]\n    },\n    { \"name\": \"checkbox\", \"type\": \"component\", \"version\": \"1.4.1\", \"dependencies\": [] },\n    { \"name\": \"collapsible\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n    { \"name\": \"dialog\", \"type\": \"component\", \"version\": \"1.4.3\", \"dependencies\": [] },\n    { \"name\": \"dropdown\", \"type\": \"component\", \"version\": \"1.2.3\", \"dependencies\": [] },\n    { \"name\": \"dropzone\", \"type\": \"component\", \"version\": \"1.2.2\", \"dependencies\": [] },\n    { \"name\": \"image\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n    { \"name\": \"input\", \"type\": \"component\", \"version\": \"1.3.1\", \"dependencies\": [] },\n    { \"name\": \"input-otp\", \"type\": \"component\", \"version\": \"1.0.1\", \"dependencies\": [] },\n    {\n      \"name\": \"item\",\n      \"type\": \"component\",\n      \"version\": \"1.0.0\",\n      \"dependencies\": [\"@starwind-ui/core/separator@^1.0.0\"]\n    },\n    { \"name\": \"kbd\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n    { \"name\": \"label\", \"type\": \"component\", \"version\": \"1.2.0\", \"dependencies\": [] },\n    { \"name\": \"pagination\", \"type\": \"component\", \"version\": \"3.0.2\", \"dependencies\": [] },\n    { \"name\": \"progress\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n    { \"name\": \"prose\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n    { \"name\": \"radio-group\", \"type\": \"component\", \"version\": \"1.2.4\", \"dependencies\": [] },\n    { \"name\": \"select\", \"type\": \"component\", \"version\": \"1.8.3\", \"dependencies\": [] },\n    { \"name\": \"separator\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n    {\n      \"name\": \"sheet\",\n      \"type\": \"component\",\n      \"version\": \"1.1.1\",\n      \"dependencies\": [\"@starwind-ui/core/dialog@^1.3.0\"]\n    },\n    {\n      \"name\": \"sidebar\",\n      \"type\": \"component\",\n      \"version\": \"1.0.0\",\n      \"dependencies\": [\n        \"@starwind-ui/core/button@^2.3.0\",\n        \"@starwind-ui/core/dialog@^1.4.3\",\n        \"@starwind-ui/core/input@^1.3.1\",\n        \"@starwind-ui/core/separator@^1.0.0\",\n        \"@starwind-ui/core/sheet@^1.1.1\",\n        \"@starwind-ui/core/skeleton@^1.2.0\",\n        \"@starwind-ui/core/tooltip@^1.4.0\"\n      ]\n    },\n    { \"name\": \"skeleton\", \"type\": \"component\", \"version\": \"1.2.0\", \"dependencies\": [] },\n    { \"name\": \"slider\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n    { \"name\": \"spinner\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n    { \"name\": \"switch\", \"type\": \"component\", \"version\": \"1.3.1\", \"dependencies\": [] },\n    { \"name\": \"table\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] },\n    { \"name\": \"tabs\", \"type\": \"component\", \"version\": \"1.4.1\", \"dependencies\": [] },\n    { \"name\": \"textarea\", \"type\": \"component\", \"version\": \"1.3.1\", \"dependencies\": [] },\n    {\n      \"name\": \"theme-toggle\",\n      \"type\": \"component\",\n      \"version\": \"1.0.0\",\n      \"dependencies\": [\"@starwind-ui/core/toggle@^1.0.1\"]\n    },\n    { \"name\": \"toast\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n    { \"name\": \"toggle\", \"type\": \"component\", \"version\": \"1.0.1\", \"dependencies\": [] },\n    { \"name\": \"tooltip\", \"type\": \"component\", \"version\": \"1.4.0\", \"dependencies\": [] },\n    { \"name\": \"video\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] }\n  ]\n}\n"],"mappings":"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","names":[]}

package/dist/src/components/accordion/Accordion.astro

@@ -0,0 +1,254 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"div"> & {
+  /**
+   * The type of accordion.  If "single", only one item can be open at a time.
+   */
+  type?: "single" | "multiple";
+  /**
+   * The value of the item that should be open by default
+   */
+  defaultValue?: string;
+};
+
+export const accordion = tv({ base: "starwind-accordion" });
+
+const { type = "single", defaultValue, class: className, ...rest } = Astro.props;
+---
+
+<div
+  class={accordion({ class: className })}
+  data-type={type}
+  data-value={defaultValue}
+  data-slot="accordion"
+  {...rest}
+>
+  <slot />
+</div>
+
+<script>
+  type AccordionType = "single" | "multiple";
+  type AccordionState = "open" | "closed";
+
+  /** Represents a single accordion item with its associated elements */
+  interface AccordionItem {
+    element: HTMLElement;
+    trigger: HTMLElement;
+    content: HTMLElement;
+    value: string;
+  }
+
+  /**
+   * Handles the functionality of an accordion component.
+   * Supports single and multiple open items, keyboard navigation,
+   * and maintains ARIA accessibility standards.
+   */
+  class AccordionHandler {
+    private accordion: HTMLElement;
+    private type: AccordionType;
+    private items: AccordionItem[];
+    private itemsByValue: Map<string, AccordionItem>;
+    private accordionId: string;
+    private isInitialized: boolean = false;
+
+    /**
+     * Creates a new AccordionHandler instance
+     * @param accordion - The root accordion element
+     * @param idx - Unique index for this accordion instance
+     */
+    constructor(accordion: HTMLElement, idx: number) {
+      this.accordion = accordion;
+      this.type = (accordion.dataset.type || "single") as AccordionType;
+      this.accordionId = `starwind-accordion${idx}`;
+
+      // Cache all items and create lookup maps
+      this.items = this.initializeItems();
+      this.itemsByValue = new Map(this.items.map((item) => [item.value, item]));
+
+      this.setupItems();
+      this.setInitialState();
+      this.isInitialized = true;
+    }
+
+    /**
+     * Initializes accordion items by querying the DOM and setting up data structures
+     * @returns Array of AccordionItem objects
+     */
+    private initializeItems(): AccordionItem[] {
+      return Array.from(this.accordion.querySelectorAll<HTMLElement>(".starwind-accordion-item"))
+        .map((element, idx) => {
+          const trigger = element.querySelector<HTMLElement>(".starwind-accordion-trigger");
+          const content = element.querySelector<HTMLElement>(".starwind-accordion-content");
+          const value = element.getAttribute("data-value") || String(idx);
+
+          if (!trigger || !content) return null;
+
+          return { element, trigger, content, value };
+        })
+        .filter((item): item is AccordionItem => item !== null);
+    }
+
+    /**
+     * Sets up initial state and event listeners for all accordion items
+     */
+    private setupItems(): void {
+      this.items.forEach((item, idx) => {
+        this.setupAccessibility(item, idx);
+        this.setContentHeight(item.content);
+        this.setupEventListeners(item);
+      });
+    }
+
+    /**
+     * Sets up ARIA attributes and IDs for accessibility
+     * @param item - The accordion item to setup
+     * @param idx - Index of the item
+     */
+    private setupAccessibility(item: AccordionItem, idx: number): void {
+      const triggerId = `${this.accordionId}-t${idx}`;
+      const contentId = `${this.accordionId}-c${idx}`;
+
+      item.trigger.id = triggerId;
+      item.trigger.setAttribute("aria-controls", contentId);
+      item.trigger.setAttribute("aria-expanded", "false");
+
+      item.content.id = contentId;
+      item.content.setAttribute("aria-labelledby", triggerId);
+      item.content.setAttribute("role", "region");
+    }
+
+    /**
+     * Calculates and sets the content height CSS variable for animations
+     * @param content - The content element to measure
+     */
+    private setContentHeight(content: HTMLElement): void {
+      const contentInner = content.firstElementChild as HTMLElement;
+      if (contentInner) {
+        const height = contentInner.getBoundingClientRect().height;
+        content.style.setProperty("--starwind-accordion-content-height", `${height}px`);
+      }
+    }
+
+    /**
+     * Sets the initial state based on the default value attribute
+     */
+    private setInitialState(): void {
+      const defaultValue = this.accordion.dataset.value;
+      if (defaultValue) {
+        const item = this.itemsByValue.get(defaultValue);
+        if (item) {
+          this.setItemState(item, true);
+        }
+      }
+    }
+
+    /**
+     * Sets up click and keyboard event listeners for an accordion item
+     * @param item - The accordion item to setup listeners for
+     */
+    private setupEventListeners(item: AccordionItem): void {
+      item.trigger.addEventListener("click", () => this.handleClick(item));
+      item.trigger.addEventListener("keydown", (e) => this.handleKeyDown(e, item));
+    }
+
+    /**
+     * Handles click events on accordion triggers
+     * @param item - The clicked accordion item
+     */
+    private handleClick(item: AccordionItem): void {
+      const isOpen = item.element.getAttribute("data-state") === "open";
+      this.toggleItem(item, !isOpen);
+    }
+
+    /**
+     * Handles keyboard navigation events
+     * @param event - The keyboard event
+     * @param item - The current accordion item
+     */
+    private handleKeyDown(event: KeyboardEvent, item: AccordionItem): void {
+      const index = this.items.indexOf(item);
+
+      const keyActions: Record<string, () => void> = {
+        ArrowDown: () => this.focusItem(index + 1),
+        ArrowUp: () => this.focusItem(index - 1),
+        Home: () => this.focusItem(0),
+        End: () => this.focusItem(this.items.length - 1),
+      };
+
+      const action = keyActions[event.key];
+      if (action) {
+        event.preventDefault();
+        action();
+      }
+    }
+
+    /**
+     * Focuses an accordion item by index with wrapping
+     * @param index - The target index to focus
+     */
+    private focusItem(index: number): void {
+      const targetIndex = (index + this.items.length) % this.items.length;
+      this.items[targetIndex].trigger.focus();
+    }
+
+    /**
+     * Toggles an accordion item's state
+     * @param item - The item to toggle
+     * @param shouldOpen - Whether the item should be opened
+     */
+    private toggleItem(item: AccordionItem, shouldOpen: boolean): void {
+      if (this.type === "single" && shouldOpen) {
+        // Close other items if in single mode
+        this.items.forEach((otherItem) => {
+          if (otherItem !== item && otherItem.element.getAttribute("data-state") === "open") {
+            this.setItemState(otherItem, false);
+          }
+        });
+      }
+
+      this.setItemState(item, shouldOpen);
+    }
+
+    /**
+     * Sets the state of an accordion item
+     * @param item - The item to update
+     * @param isOpen - Whether the item should be open
+     */
+    private setItemState(item: AccordionItem, isOpen: boolean): void {
+      const state: AccordionState = isOpen ? "open" : "closed";
+
+      // Skip animation during initial setup, enable for subsequent toggles
+      if (!this.isInitialized) {
+        item.content.style.setProperty("animation", "none");
+      } else {
+        item.content.style.removeProperty("animation");
+      }
+
+      // Set content height variable for animations
+      this.setContentHeight(item.content);
+
+      item.element.setAttribute("data-state", state);
+      item.content.setAttribute("data-state", state);
+      item.trigger.setAttribute("data-state", state);
+      item.trigger.setAttribute("aria-expanded", isOpen.toString());
+    }
+  }
+
+  // Store instances in a WeakMap to avoid memory leaks
+  const accordionInstances = new WeakMap<HTMLElement, AccordionHandler>();
+  let accordionCounter = 0;
+
+  const setupAccordions = () => {
+    document.querySelectorAll<HTMLElement>(".starwind-accordion").forEach((accordion) => {
+      if (!accordionInstances.has(accordion)) {
+        accordionInstances.set(accordion, new AccordionHandler(accordion, accordionCounter++));
+      }
+    });
+  };
+
+  setupAccordions();
+  document.addEventListener("astro:after-swap", setupAccordions);
+  document.addEventListener("starwind:init", setupAccordions);
+</script>

package/dist/src/components/accordion/AccordionContent.astro

@@ -0,0 +1,33 @@
+---
+/**
+ * NOTE: style="animation: none;" makes it so the close animation doesn't run on page load
+ * It is later removed in the Accordion.astro script
+ */
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"div">;
+
+export const accordionContent = tv({
+  base: [
+    "starwind-accordion-content",
+    "transform-gpu overflow-hidden",
+    "data-[state=closed]:animate-accordion-up data-[state=closed]:h-0",
+    "data-[state=open]:animate-accordion-down",
+  ],
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div
+  class={accordionContent({ class: className })}
+  data-state="closed"
+  style="animation: none;"
+  data-slot="accordion-content"
+  {...rest}
+>
+  <div class="pt-0 pb-4">
+    <slot />
+  </div>
+</div>

package/dist/src/components/accordion/AccordionItem.astro

@@ -0,0 +1,27 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"div"> & {
+  /**
+   * The value of the item
+   */
+  value: string;
+};
+
+export const accordionItem = tv({
+  base: "starwind-accordion-item border-b last:border-b-0",
+});
+
+const { value, class: className, ...rest } = Astro.props;
+---
+
+<div
+  class={accordionItem({ class: className })}
+  data-value={value}
+  data-state="closed"
+  data-slot="accordion-item"
+  {...rest}
+>
+  <slot />
+</div>

package/dist/src/components/accordion/AccordionTrigger.astro

@@ -0,0 +1,32 @@
+---
+import ChevronDown from "@tabler/icons/outline/chevron-down.svg";
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"button">;
+
+export const accordionTrigger = tv({
+  base: [
+    "starwind-accordion-trigger",
+    "flex w-full items-center justify-between gap-4 rounded-md py-4",
+    "hover:text-muted-foreground text-left font-medium transition-all",
+    "[&[data-state=open]>svg]:rotate-180",
+    "focus-visible:border-outline focus-visible:ring-outline/50 outline-none focus-visible:ring-3",
+  ],
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<button
+  type="button"
+  class={accordionTrigger({ class: className })}
+  data-slot="accordion-trigger"
+  aria-expanded="false"
+  {...rest}
+>
+  <slot />
+  <slot name="icon">
+    <ChevronDown class="size-5 shrink-0 transition-transform duration-200" />
+  </slot>
+</button>

package/dist/src/components/accordion/index.ts

@@ -0,0 +1,15 @@
+import Accordion, { accordion } from "./Accordion.astro";
+import AccordionContent, { accordionContent } from "./AccordionContent.astro";
+import AccordionItem, { accordionItem } from "./AccordionItem.astro";
+import AccordionTrigger, { accordionTrigger } from "./AccordionTrigger.astro";
+
+const AccordionVariants = { accordion, accordionContent, accordionItem, accordionTrigger };
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AccordionVariants };
+
+export default {
+  Root: Accordion,
+  Content: AccordionContent,
+  Item: AccordionItem,
+  Trigger: AccordionTrigger,
+};

package/dist/src/components/alert/Alert.astro

@@ -0,0 +1,31 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv, type VariantProps } from "tailwind-variants";
+
+type Props = HTMLAttributes<"div"> & VariantProps<typeof alert>;
+
+export const alert = tv({
+  base: "text-foreground relative w-full rounded-lg border p-4",
+  variants: {
+    variant: {
+      default: "bg-background dark:bg-input/30 [&>h5>svg]:text-foreground",
+      primary: "border-primary bg-primary/7 [&>h5>svg]:text-primary",
+      secondary: "border-secondary bg-secondary/7 [&>h5>svg]:text-secondary",
+      info: "border-info bg-info/7 [&>h5>svg]:text-info",
+      success: "border-success bg-success/7 [&>h5>svg]:text-success",
+      warning: "border-warning bg-warning/7 [&>h5>svg]:text-warning",
+      error: "border-error bg-error/7 [&>h5>svg]:text-error",
+    },
+  },
+  defaultVariants: { variant: "default" },
+});
+
+const { variant, class: className, ...rest } = Astro.props;
+
+const inferredRole =
+  rest.role ?? (variant === "error" || variant === "warning" ? "alert" : "status");
+---
+
+<div class={alert({ variant, class: className })} data-slot="alert" role={inferredRole} {...rest}>
+  <slot />
+</div>

package/dist/src/components/alert/AlertDescription.astro

@@ -0,0 +1,14 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+export const alertDescription = tv({ base: "leading-relaxed" });
+
+type Props = HTMLAttributes<"p">;
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<p class={alertDescription({ class: className })} data-slot="alert-description" {...rest}>
+  <slot />
+</p>

package/dist/src/components/alert/AlertTitle.astro

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+export const alertTitle = tv({
+  base: "font-heading mb-2 flex items-center gap-2 text-lg leading-none font-medium tracking-tight",
+});
+
+type Props = HTMLAttributes<"h5">;
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<h5 class={alertTitle({ class: className })} data-slot="alert-title" {...rest}>
+  <slot />
+</h5>

package/dist/src/components/alert/index.ts

@@ -0,0 +1,13 @@
+import Alert, { alert } from "./Alert.astro";
+import AlertDescription, { alertDescription } from "./AlertDescription.astro";
+import AlertTitle, { alertTitle } from "./AlertTitle.astro";
+
+const AlertVariants = { alert, alertDescription, alertTitle };
+
+export { Alert, AlertDescription, AlertTitle, AlertVariants };
+
+export default {
+  Root: Alert,
+  Description: AlertDescription,
+  Title: AlertTitle,
+};