@dogsbay/ui 0.2.0-beta.0

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@dogsbay/ui",
+  "version": "0.2.0-beta.0",
+  "description": "Accessible UI components for Astro, inspired by Base UI and shadcn",
+  "type": "module",
+  "exports": {
+    "./*": "./src/*"
+  },
+  "dependencies": {
+    "tailwind-variants": "^0.3.0"
+  },
+  "peerDependencies": {
+    "astro": "^5.0.0 || ^6.0.0",
+    "@dogsbay/primitives": "0.2.0-beta.0",
+    "@dogsbay/elements": "0.2.0-beta.0",
+    "@dogsbay/icons": "0.2.0-beta.0"
+  },
+  "optionalDependencies": {
+    "shiki": "^4.0.0",
+    "@shikijs/transformers": "^4.0.0",
+    "maplibre-gl": "^5.0.0",
+    "katex": "^0.16.0"
+  },
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dogsbay/dogsbay.git",
+    "directory": "packages/ui"
+  },
+  "homepage": "https://github.com/dogsbay/dogsbay/tree/main/packages/ui",
+  "bugs": {
+    "url": "https://github.com/dogsbay/dogsbay/issues"
+  }
+}

package/src/accordion/Accordion.astro

@@ -0,0 +1,38 @@
+---
+import { tv } from "tailwind-variants";
+
+const accordion = tv({
+  base: "w-full",
+});
+
+interface Props {
+  type?: "single" | "multiple";
+  defaultValue?: string | string[];
+  class?: string;
+  [key: string]: unknown;
+}
+
+const {
+  type = "single",
+  defaultValue,
+  class: className,
+  ...rest
+} = Astro.props;
+
+const defaultStr = Array.isArray(defaultValue)
+  ? defaultValue.join(",")
+  : defaultValue || "";
+---
+
+<db-accordion
+  class={accordion({ class: className })}
+  type={type}
+  default-value={defaultStr}
+  {...rest}
+>
+  <slot />
+</db-accordion>
+
+<script>
+  import "@dogsbay/elements/db-accordion";
+</script>

package/src/accordion/AccordionContent.astro

@@ -0,0 +1,25 @@
+---
+import { tv } from "tailwind-variants";
+
+const accordionContent = tv({
+  base: "overflow-hidden text-sm transition-all",
+});
+
+interface Props {
+  default?: boolean;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { default: isDefault = false, class: className, ...rest } = Astro.props;
+---
+
+<div
+  class={accordionContent({ class: className })}
+  data-part="content"
+  role="region"
+  hidden={!isDefault}
+  {...rest}
+>
+  <slot />
+</div>

package/src/accordion/AccordionItem.astro

@@ -0,0 +1,26 @@
+---
+import { tv } from "tailwind-variants";
+
+const accordionItem = tv({
+  base: "border-b",
+});
+
+interface Props {
+  value: string;
+  disabled?: boolean;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { value, disabled = false, class: className, ...rest } = Astro.props;
+---
+
+<div
+  class={accordionItem({ class: className })}
+  data-part="item"
+  data-value={value}
+  data-disabled={disabled || undefined}
+  {...rest}
+>
+  <slot />
+</div>

package/src/accordion/AccordionTrigger.astro

@@ -0,0 +1,38 @@
+---
+import { tv } from "tailwind-variants";
+
+const accordionTrigger = tv({
+  base: "flex w-full items-center justify-between py-4 font-medium transition-all hover:underline [&[aria-expanded=true]>svg]:rotate-180 disabled:pointer-events-none disabled:opacity-50",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<button
+  class={accordionTrigger({ class: className })}
+  data-part="trigger"
+  type="button"
+  {...rest}
+>
+  <slot />
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="shrink-0 transition-transform duration-200"
+    aria-hidden="true"
+  >
+    <polyline points="6 9 12 15 18 9"></polyline>
+  </svg>
+</button>

package/src/accordion/accordion.ts

@@ -0,0 +1,189 @@
+import { CompositeNavigation } from "@dogsbay/primitives/composite";
+import { Collapsible } from "@dogsbay/primitives/collapsible";
+
+interface AccordionItem {
+  el: HTMLElement;
+  value: string;
+  collapsible: Collapsible;
+  disabled: boolean;
+}
+
+interface AccordionInstance {
+  root: HTMLElement;
+  type: "single" | "multiple";
+  items: AccordionItem[];
+  nav: CompositeNavigation;
+  openValues: Set<string>;
+}
+
+const instances = new WeakMap<HTMLElement, AccordionInstance>();
+
+function initAccordion(root: HTMLElement) {
+  if (instances.has(root)) return;
+
+  const type = (root.dataset.type as "single" | "multiple") || "single";
+  const defaultStr = root.dataset.defaultValue || "";
+  const defaultValues = defaultStr ? defaultStr.split(",") : [];
+
+  const itemEls = Array.from(
+    root.querySelectorAll("[data-part='item']"),
+  ) as HTMLElement[];
+
+  const items = itemEls
+    .map((el) => {
+      const trigger = el.querySelector(
+        "[data-part='trigger']",
+      ) as HTMLElement | null;
+      const content = el.querySelector(
+        "[data-part='content']",
+      ) as HTMLElement | null;
+      if (!trigger || !content) return null;
+
+      const value = el.dataset.value || "";
+      const disabled = el.hasAttribute("data-disabled");
+
+      if (disabled) {
+        trigger.setAttribute("disabled", "");
+        trigger.setAttribute("aria-disabled", "true");
+      }
+
+      // Create a Collapsible instance for each item
+      // We pass onToggle to coordinate single/multiple behavior
+      const collapsible = new Collapsible(trigger, content, {
+        onToggle: (open) => {
+          if (open) {
+            onItemExpanded(root, value);
+          } else {
+            onItemCollapsed(root, value);
+          }
+        },
+      });
+
+      return { el, value, collapsible, disabled };
+    })
+    .filter(Boolean) as AccordionItem[];
+
+  // Keyboard navigation on triggers
+  const nav = new CompositeNavigation(root, "[data-part='trigger']", {
+    orientation: "vertical",
+    loop: true,
+    homeEnd: true,
+  });
+
+  const instance: AccordionInstance = {
+    root,
+    type,
+    items,
+    nav,
+    openValues: new Set(),
+  };
+
+  instances.set(root, instance);
+
+  // Activate keyboard nav
+  nav.activate();
+
+  // Set initial tabindex for roving
+  items.forEach((item, i) => {
+    item.collapsible.trigger.setAttribute("tabindex", i === 0 ? "0" : "-1");
+  });
+
+  // Set initial open state
+  defaultValues.forEach((value) => {
+    const item = items.find((i) => i.value === value && !i.disabled);
+    if (item) {
+      item.collapsible.expand();
+    }
+  });
+}
+
+function onItemExpanded(root: HTMLElement, value: string) {
+  const instance = instances.get(root);
+  if (!instance) return;
+
+  // In single mode, collapse all others
+  if (instance.type === "single") {
+    for (const openValue of instance.openValues) {
+      if (openValue !== value) {
+        const other = instance.items.find((i) => i.value === openValue);
+        if (other) {
+          other.collapsible.collapse();
+        }
+      }
+    }
+  }
+
+  instance.openValues.add(value);
+  const item = instance.items.find((i) => i.value === value);
+  if (item) {
+    item.el.setAttribute("data-state", "open");
+  }
+
+  root.dispatchEvent(
+    new CustomEvent("base-accordion:change", {
+      detail: { value, open: true, openValues: [...instance.openValues] },
+      bubbles: true,
+    }),
+  );
+}
+
+function onItemCollapsed(root: HTMLElement, value: string) {
+  const instance = instances.get(root);
+  if (!instance) return;
+
+  instance.openValues.delete(value);
+  const item = instance.items.find((i) => i.value === value);
+  if (item) {
+    item.el.removeAttribute("data-state");
+  }
+
+  root.dispatchEvent(
+    new CustomEvent("base-accordion:change", {
+      detail: { value, open: false, openValues: [...instance.openValues] },
+      bubbles: true,
+    }),
+  );
+}
+
+function toggleItem(root: HTMLElement, value: string) {
+  const instance = instances.get(root);
+  if (!instance) return;
+  const item = instance.items.find((i) => i.value === value);
+  if (item && !item.disabled) {
+    item.collapsible.toggle();
+  }
+}
+
+function expandItem(root: HTMLElement, value: string) {
+  const instance = instances.get(root);
+  if (!instance) return;
+  const item = instance.items.find((i) => i.value === value);
+  if (item && !item.disabled) {
+    item.collapsible.expand();
+  }
+}
+
+function collapseItem(root: HTMLElement, value: string) {
+  const instance = instances.get(root);
+  if (!instance) return;
+  const item = instance.items.find((i) => i.value === value);
+  if (item) {
+    item.collapsible.collapse();
+  }
+}
+
+// Auto-initialize
+function init() {
+  document.querySelectorAll("[data-component='accordion']").forEach((el) => {
+    initAccordion(el as HTMLElement);
+  });
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", init);
+} else {
+  init();
+}
+document.addEventListener("astro:page-load", init);
+
+export { initAccordion, toggleItem, expandItem, collapseItem };

package/src/accordion/index.ts

@@ -0,0 +1,4 @@
+export { default as Accordion } from "./Accordion.astro";
+export { default as AccordionItem } from "./AccordionItem.astro";
+export { default as AccordionTrigger } from "./AccordionTrigger.astro";
+export { default as AccordionContent } from "./AccordionContent.astro";

package/src/alert/Alert.astro

@@ -0,0 +1,69 @@
+---
+import { tv, type VariantProps } from "tailwind-variants";
+import { contentVariants, icons } from "./variants.js";
+import { resolveIcon } from "./icon.js";
+
+const alert = tv({
+  base: "relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:size-4 [&>svg~div]:pl-7",
+  variants: {
+    variant: {
+      default: "bg-background text-foreground",
+      destructive:
+        "border-destructive/50 text-destructive [&>*[data-part='title']]:text-destructive [&>svg]:text-destructive",
+      note: "border-note/50 bg-note/5 text-foreground [&>svg]:text-note",
+      abstract: "border-abstract/50 bg-abstract/5 text-foreground [&>svg]:text-abstract",
+      info: "border-info/50 bg-info/5 text-foreground [&>svg]:text-info",
+      tip: "border-tip/50 bg-tip/5 text-foreground [&>svg]:text-tip",
+      success: "border-success/50 bg-success/5 text-foreground [&>svg]:text-success",
+      question: "border-question/50 bg-question/5 text-foreground [&>svg]:text-question",
+      warning: "border-warning/50 bg-warning/5 text-foreground [&>svg]:text-warning",
+      failure: "border-failure/50 bg-failure/5 text-foreground [&>svg]:text-failure",
+      danger: "border-danger/50 bg-danger/5 text-foreground [&>svg]:text-danger",
+      bug: "border-bug/50 bg-bug/5 text-foreground [&>svg]:text-bug",
+      example: "border-example/50 bg-example/5 text-foreground [&>svg]:text-example",
+      quote: "border-quote/50 bg-quote/5 text-foreground [&>svg]:text-quote",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+type AlertVariants = VariantProps<typeof alert>;
+
+interface Props {
+  variant?: AlertVariants["variant"];
+  /**
+   * Optional icon shortcode to override the variant default.
+   * Format: `library:name` (e.g. "lucide:rocket", "material:check-circle",
+   * "simple:github") or a bare emoji shortcode (e.g. "rocket" → 🚀).
+   * Unknown icons fall back to the variant default.
+   */
+  icon?: string;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { variant = "default", icon: iconShortcode, class: className, ...rest } = Astro.props;
+
+const role = variant === "destructive"
+  ? "alert"
+  : contentVariants.has(variant || "")
+    ? "note"
+    : "status";
+
+// Resolve icon: user-provided shortcode takes precedence; otherwise variant default
+const customIcon = iconShortcode ? resolveIcon(iconShortcode) : null;
+const variantIcon = contentVariants.has(variant || "") ? icons[variant!] : null;
+const icon = customIcon ?? variantIcon;
+---
+
+<div
+  class={alert({ variant, class: className })}
+  data-variant={variant}
+  role={role}
+  {...rest}
+>
+  {icon && <Fragment set:html={icon} />}
+  <slot />
+</div>

package/src/alert/AlertDescription.astro

@@ -0,0 +1,17 @@
+---
+import { tv } from "tailwind-variants";
+
+const alertDescription = tv({
+  base: "text-sm [&_p]:leading-relaxed",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class={alertDescription({ class: className })} {...rest}>
+  <slot />
+</div>

package/src/alert/AlertTitle.astro

@@ -0,0 +1,21 @@
+---
+import { tv } from "tailwind-variants";
+
+const alertTitle = tv({
+  base: "mb-1 text-sm font-semibold leading-none tracking-tight",
+});
+
+type Element = "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span";
+
+interface Props {
+  as?: Element;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { as: Tag = "div", class: className, ...rest } = Astro.props;
+---
+
+<Tag class={alertTitle({ class: className })} data-part="title" {...rest}>
+  <slot />
+</Tag>

package/src/alert/CollapsibleAlert.astro

@@ -0,0 +1,103 @@
+---
+/**
+ * CollapsibleAlert — a <details>-based alert with two-tone backgrounds.
+ *
+ * Title bar gets a stronger variant tint, body gets a subtle tint.
+ * Composes with the same variant tokens as Alert.
+ *
+ * Usage:
+ *   <CollapsibleAlert variant="warning" title="Warning" open>
+ *     <p>Body content here.</p>
+ *   </CollapsibleAlert>
+ */
+import { tv, type VariantProps } from "tailwind-variants";
+import { contentVariants, icons, chevronSvg } from "./variants.js";
+
+const wrapper = tv({
+  base: "relative w-full rounded-lg border overflow-hidden [&>summary]:list-none [&>summary::-webkit-details-marker]:hidden",
+  variants: {
+    variant: {
+      default: "border-border",
+      destructive: "border-destructive/50",
+      note: "border-note/50",
+      abstract: "border-abstract/50",
+      info: "border-info/50",
+      tip: "border-tip/50",
+      success: "border-success/50",
+      question: "border-question/50",
+      warning: "border-warning/50",
+      failure: "border-failure/50",
+      danger: "border-danger/50",
+      bug: "border-bug/50",
+      example: "border-example/50",
+      quote: "border-quote/50",
+    },
+  },
+  defaultVariants: { variant: "default" },
+});
+
+type Variant = VariantProps<typeof wrapper>["variant"];
+
+/** Title bar: stronger tint (~10%) */
+const titleBg: Record<string, string> = {
+  default: "bg-muted",
+  destructive: "bg-destructive/10 text-destructive",
+  note: "bg-note/10", abstract: "bg-abstract/10", info: "bg-info/10",
+  tip: "bg-tip/10", success: "bg-success/10", question: "bg-question/10",
+  warning: "bg-warning/10", failure: "bg-failure/10", danger: "bg-danger/10",
+  bug: "bg-bug/10", example: "bg-example/10", quote: "bg-quote/10",
+};
+
+/** Body: subtle tint (~3%) */
+const bodyBg: Record<string, string> = {
+  default: "bg-background",
+  destructive: "bg-destructive/3",
+  note: "bg-note/3", abstract: "bg-abstract/3", info: "bg-info/3",
+  tip: "bg-tip/3", success: "bg-success/3", question: "bg-question/3",
+  warning: "bg-warning/3", failure: "bg-failure/3", danger: "bg-danger/3",
+  bug: "bg-bug/3", example: "bg-example/3", quote: "bg-quote/3",
+};
+
+/** Icon color per variant */
+const iconColor: Record<string, string> = {
+  destructive: "text-destructive",
+  note: "text-note", abstract: "text-abstract", info: "text-info",
+  tip: "text-tip", success: "text-success", question: "text-question",
+  warning: "text-warning", failure: "text-failure", danger: "text-danger",
+  bug: "text-bug", example: "text-example", quote: "text-quote",
+};
+
+interface Props {
+  variant?: Variant;
+  /** Title text shown in the summary bar */
+  title?: string;
+  /** Whether the details starts open */
+  open?: boolean;
+  class?: string;
+}
+
+const { variant = "note", title, open = false, class: className } = Astro.props;
+const v = variant || "note";
+
+const role = contentVariants.has(v) ? "note" : "status";
+const icon = contentVariants.has(v) ? icons[v] : null;
+---
+
+<details
+  class:list={[wrapper({ variant, class: className }), "group/collapsible"]}
+  data-variant={variant}
+  role={role}
+  open={open}
+>
+  <summary class:list={[
+    "flex cursor-pointer items-center gap-2 px-4 py-3 text-sm font-semibold select-none",
+    titleBg[v],
+  ]}>
+    {icon && <span class:list={["shrink-0 [&>svg]:size-4", iconColor[v]]} set:html={icon} />}
+    <span class="flex-1 text-foreground" data-part="title">{title || v.charAt(0).toUpperCase() + v.slice(1)}</span>
+    <span class="shrink-0 text-muted-foreground group-open/collapsible:rotate-180 transition-transform duration-200" set:html={chevronSvg} />
+  </summary>
+  <div class:list={["px-4 py-3 text-sm [&_p]:leading-relaxed", bodyBg[v]]}>
+    <slot />
+  </div>
+</details>

package/src/alert/icon.ts

@@ -0,0 +1,32 @@
+/**
+ * Resolve an icon shortcode for the Alert component.
+ *
+ * Accepts two formats:
+ *   - `library:name` — e.g. "lucide:rocket", "material:check-circle", "simple:github"
+ *   - bare shortcode — treated as emoji (e.g. "rocket" → 🚀)
+ *
+ * Returns an inline SVG string or a span with the emoji character. Returns
+ * null when the shortcode can't be resolved (caller should fall back to the
+ * variant's default icon).
+ */
+import { createIconRegistry } from "@dogsbay/icons";
+
+const registry = createIconRegistry();
+
+export function resolveIcon(shortcode: string): string | null {
+  const colonIdx = shortcode.indexOf(":");
+  const [library, name] = colonIdx >= 0
+    ? [shortcode.slice(0, colonIdx), shortcode.slice(colonIdx + 1)]
+    : ["emoji", shortcode];
+
+  const resolved = registry.resolve(library, name);
+  if (!resolved) return null;
+
+  // Emoji resolve to Unicode characters; wrap for consistent sizing/positioning
+  // with the SVG icons in the Alert layout.
+  if (library === "emoji") {
+    return `<span aria-hidden="true" style="font-size:1em;line-height:1;display:inline-block;width:1em;text-align:center;">${resolved}</span>`;
+  }
+
+  return resolved;
+}

package/src/alert/index.ts

@@ -0,0 +1,4 @@
+export { default as Alert } from "./Alert.astro";
+export { default as AlertTitle } from "./AlertTitle.astro";
+export { default as AlertDescription } from "./AlertDescription.astro";
+export { default as CollapsibleAlert } from "./CollapsibleAlert.astro";

package/src/alert/variants.ts

@@ -0,0 +1,29 @@
+/** Shared variant metadata for Alert and CollapsibleAlert */
+
+export type AlertVariant =
+  | "default" | "destructive"
+  | "note" | "abstract" | "info" | "tip" | "success" | "question"
+  | "warning" | "failure" | "danger" | "bug" | "example" | "quote";
+
+export const contentVariants = new Set<AlertVariant>([
+  "note", "abstract", "info", "tip", "success", "question",
+  "warning", "failure", "danger", "bug", "example", "quote",
+]);
+
+/** Default icon SVGs per content variant (MkDocs Material icon set) */
+export const icons: Partial<Record<AlertVariant, string>> = {
+  note: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2m3.1 5.07c.14 0 .28.05.4.16l1.27 1.27c.23.22.23.57 0 .78l-1 1-2.05-2.05 1-1c.1-.11.24-.16.38-.16m-1.97 1.74 2.06 2.06-6.06 6.06H7.07v-2.06z"/></svg>',
+  abstract: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M17 9H7V7h10m0 6H7v-2h10m-3 6H7v-2h7M12 3a1 1 0 0 1 1 1 1 1 0 0 1-1 1 1 1 0 0 1-1-1 1 1 0 0 1 1-1m7 0h-4.18C14.4 1.84 13.3 1 12 1s-2.4.84-2.82 2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2"/></svg>',
+  info: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M13 9h-2V7h2m0 10h-2v-6h2m-1-9A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2"/></svg>',
+  tip: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M17.66 11.2c-.23-.3-.51-.56-.77-.82-.67-.6-1.43-1.03-2.07-1.66C13.33 7.26 13 4.85 13.95 3c-.95.23-1.78.75-2.49 1.32-2.59 2.08-3.61 5.75-2.39 8.9.04.1.08.2.08.33 0 .22-.15.42-.35.5-.23.1-.47.04-.66-.12a.6.6 0 0 1-.14-.17c-1.13-1.43-1.31-3.48-.55-5.12C5.78 10 4.87 12.3 5 14.47c.06.5.12 1 .29 1.5.14.6.41 1.2.71 1.73 1.08 1.73 2.95 2.97 4.96 3.22 2.14.27 4.43-.12 6.07-1.6 1.83-1.66 2.47-4.32 1.53-6.6l-.13-.26c-.21-.46-.77-1.26-.77-1.26m-3.16 6.3c-.28.24-.74.5-1.1.6-1.12.4-2.24-.16-2.9-.82 1.19-.28 1.9-1.16 2.11-2.05.17-.8-.15-1.46-.28-2.23-.12-.74-.1-1.37.17-2.06.19.38.39.76.63 1.06.77 1 1.98 1.44 2.24 2.8.04.14.06.28.06.43.03.82-.33 1.72-.93 2.27"/></svg>',
+  success: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M21 7 9 19l-5.5-5.5 1.41-1.41L9 16.17 19.59 5.59z"/></svg>',
+  question: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="m15.07 11.25-.9.92C13.45 12.89 13 13.5 13 15h-2v-.5c0-1.11.45-2.11 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41a2 2 0 0 0-2-2 2 2 0 0 0-2 2H8a4 4 0 0 1 4-4 4 4 0 0 1 4 4 3.2 3.2 0 0 1-.93 2.25M13 19h-2v-2h2M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10c0-5.53-4.5-10-10-10"/></svg>',
+  warning: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M13 14h-2V9h2m0 9h-2v-2h2M1 21h22L12 2z"/></svg>',
+  failure: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>',
+  danger: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="m11.5 20 4.86-9.73H13V4l-5 9.73h3.5zM12 2c2.75 0 5.1 1 7.05 2.95S22 9.25 22 12s-1 5.1-2.95 7.05S14.75 22 12 22s-5.1-1-7.05-2.95S2 14.75 2 12s1-5.1 2.95-7.05S9.25 2 12 2"/></svg>',
+  bug: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="m11 13h2v1h-2zm10-8v6c0 5.5-3.8 10.7-9 12-5.2-1.3-9-6.5-9-12V5l9-4zm-4 5h-2.2c-.2-.6-.6-1.1-1.1-1.5l1.2-1.2-.7-.7L12.8 8H12c-.2 0-.5 0-.7.1L9.9 6.6l-.8.8 1.2 1.2c-.5.3-.9.8-1.1 1.4H7v1h2v1H7v1h2v1H7v1h2.2c.4 1.2 1.5 2 2.8 2s2.4-.8 2.8-2H17v-1h-2v-1h2v-1h-2v-1h2zm-6 2h2v-1h-2z"/></svg>',
+  example: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M7 2v2h1v14a4 4 0 0 0 4 4 4 4 0 0 0 4-4V4h1V2zm4 14c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1m2-4c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1m1-5h-4V4h4z"/></svg>',
+  quote: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M14 17h3l2-4V7h-6v6h3M6 17h3l2-4V7H5v6h3z"/></svg>',
+};
+
+export const chevronSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>';

package/src/alert-dialog/AlertDialog.astro

@@ -0,0 +1,16 @@
+---
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div
+  class={className}
+  data-component="alert-dialog"
+  {...rest}
+>
+  <slot />
+</div>