@rimelight/ui 0.0.1

package/src/components/table/TableCaption.astro

@@ -0,0 +1,18 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+type VariantProps<T extends (...args: any) => any> = NonNullable<Parameters<T>[0]>;
+
+type Props = HTMLAttributes<"caption"> & VariantProps<typeof tableCaption>;
+
+export const tableCaption = cv({
+  base: "text-muted-foreground mt-2xl text-sm",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<caption class:list={[tableCaption(), className]} {...rest} data-slot="table-caption">
+  <slot />
+</caption>

package/src/components/table/TableCell.astro

@@ -0,0 +1,18 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+type VariantProps<T extends (...args: any) => any> = NonNullable<Parameters<T>[0]>;
+
+type Props = HTMLAttributes<"td"> & VariantProps<typeof tableCell>;
+
+export const tableCell = cv({
+  base: "p-5xs align-middle ws-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-6xs",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<td class:list={[tableCell(), className]} {...rest} data-slot="table-cell">
+  <slot />
+</td>

package/src/components/table/TableFoot.astro

@@ -0,0 +1,18 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+type VariantProps<T extends (...args: any) => any> = NonNullable<Parameters<T>[0]>;
+
+type Props = HTMLAttributes<"tfoot"> & VariantProps<typeof tableFoot>;
+
+export const tableFoot = cv({
+  base: "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<tfoot class:list={[tableFoot(), className]} {...rest} data-slot="table-foot">
+  <slot />
+</tfoot>

package/src/components/table/TableHead.astro

@@ -0,0 +1,18 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+type VariantProps<T extends (...args: any) => any> = NonNullable<Parameters<T>[0]>;
+
+type Props = HTMLAttributes<"th"> & VariantProps<typeof tableHead>;
+
+export const tableHead = cv({
+  base: "text-muted-foreground h-2xs px-5xs text-left align-middle font-medium ws-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-6xs",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<th class:list={[tableHead(), className]} {...rest} data-slot="table-head">
+  <slot />
+</th>

package/src/components/table/TableHeader.astro

@@ -0,0 +1,18 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+type VariantProps<T extends (...args: any) => any> = NonNullable<Parameters<T>[0]>;
+
+type Props = HTMLAttributes<"thead"> & VariantProps<typeof tableHeader>;
+
+export const tableHeader = cv({
+  base: "[&_tr]:border-b",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<thead class:list={[tableHeader(), className]} {...rest} data-slot="table-header">
+  <slot />
+</thead>

package/src/components/table/TableRow.astro

@@ -0,0 +1,17 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import { cv } from "css-variants"
+
+type VariantProps<T extends (...args: any) => any> = NonNullable<Parameters<T>[0]>
+type Props = HTMLAttributes<"tr"> & VariantProps<typeof tableRow>
+
+export const tableRow = cv({
+  base: "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted"
+})
+
+const { class: className, ...rest } = Astro.props
+---
+
+<tr role="row" class:list={[tableRow(), className]} {...rest} data-slot="table-row">
+  <slot />
+</tr>

package/src/components/tabs/Tabs.astro

@@ -0,0 +1,270 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+interface Props extends HTMLAttributes<"div"> {
+  defaultValue?: string;
+  syncKey?: string;
+}
+
+export const tabs = cv({ base: "starwind-tabs" });
+
+const { defaultValue, syncKey, class: className, ...rest } = Astro.props;
+---
+
+<div
+  class:list={[tabs(), className]}
+  data-default-value={defaultValue}
+  data-sync-key={syncKey}
+  {...rest}
+  data-slot="tabs"
+>
+  <slot />
+</div>
+
+<script>
+  type TabValue = string;
+
+  interface TabsSyncEventDetail {
+    value: TabValue;
+  }
+
+  interface TabsSyncEvent extends CustomEvent<TabsSyncEventDetail> {
+    type: `starwind-tabs-sync:${string}`;
+  }
+
+  class TabsHandler {
+    private tabs: HTMLElement;
+    private triggers: HTMLButtonElement[];
+    private contents: HTMLElement[];
+    private currentTabIndex: number = 0;
+    private tabsId: string;
+    private syncKey: string | undefined;
+    private storageKey: string;
+    private valueToTriggerMap: Map<string, HTMLButtonElement>;
+    private valueToContentMap: Map<string, HTMLElement>;
+
+    constructor(tabs: HTMLElement, idx: number) {
+      this.tabs = tabs;
+      this.triggers = Array.from(
+        tabs.querySelectorAll(":scope > [data-tabs-list] > [data-tabs-trigger]"),
+      );
+      this.contents = Array.from(tabs.querySelectorAll(":scope > [data-tabs-content]"));
+      this.tabsId = `starwind-tabs${idx}`;
+      this.syncKey = tabs.dataset.syncKey;
+      this.storageKey = this.syncKey
+        ? `starwind-tabs-${this.syncKey}`
+        : `starwind-tabs-${this.tabsId}`;
+
+      // Create maps for faster lookups
+      this.valueToTriggerMap = new Map(
+        this.triggers.map((trigger) => [trigger.getAttribute("data-value") ?? "", trigger]),
+      );
+      this.valueToContentMap = new Map(
+        this.contents.map((content) => [content.getAttribute("data-value") ?? "", content]),
+      );
+
+      this.setupIds();
+      this.initializeTab();
+      this.addEventListeners();
+
+      if (this.syncKey) {
+        this.setupSyncListener();
+      }
+    }
+
+    private initializeTab(): void {
+      const value = this.syncKey
+        ? (localStorage.getItem(this.storageKey) ?? this.tabs.dataset.defaultValue)
+        : this.tabs.dataset.defaultValue;
+
+      if (value) {
+        this.showTab(value);
+        this.currentTabIndex = this.triggers.findIndex(
+          (trigger) => trigger.getAttribute("data-value") === value,
+        );
+        this.setTabIndex();
+      }
+    }
+
+    private setupSyncListener(): void {
+      document.addEventListener(`starwind-tabs-sync:${this.syncKey}`, ((e: TabsSyncEvent) => {
+        const value = e.detail.value;
+        const trigger = this.valueToTriggerMap.get(value);
+        const index = trigger ? this.triggers.indexOf(trigger) : -1;
+
+        if (index !== -1) {
+          this.showTab(value);
+          this.currentTabIndex = index;
+          this.setTabIndex();
+        }
+      }) as EventListener);
+    }
+
+    private setupIds(): void {
+      this.triggers.forEach((trigger, idx) => {
+        const triggerId = `${this.tabsId}-t${idx}`;
+        const contentId = `${this.tabsId}-c${idx}`;
+        const value = trigger.getAttribute("data-value");
+
+        trigger.id = triggerId;
+
+        if (value) {
+          trigger.setAttribute("aria-controls", contentId);
+          const content = this.valueToContentMap.get(value);
+          if (content) {
+            content.id = contentId;
+            content.setAttribute("aria-labelledby", triggerId);
+          }
+        }
+      });
+    }
+
+    private setTabIndex(): void {
+      this.triggers.forEach((trigger, index) => {
+        trigger.setAttribute("tabindex", index === this.currentTabIndex ? "0" : "-1");
+      });
+    }
+
+    private dispatchSyncEvent(value: TabValue): void {
+      if (!this.syncKey) return;
+
+      document.dispatchEvent(
+        new CustomEvent(`starwind-tabs-sync:${this.syncKey}`, { detail: { value } }),
+      );
+
+      localStorage.setItem(this.storageKey, value);
+    }
+
+    private handleKeyNavigation = (e: KeyboardEvent): void => {
+      const key = e.key;
+      let newIndex = this.currentTabIndex;
+
+      switch (key) {
+        case "ArrowRight": {
+          for (let i = 1; i < this.triggers.length; i++) {
+            const index = (this.currentTabIndex + i) % this.triggers.length;
+            if (this.triggers[index] && !this.triggers[index]!.disabled) {
+              newIndex = index;
+              break;
+            }
+          }
+          break;
+        }
+        case "ArrowLeft": {
+          for (let i = 1; i < this.triggers.length; i++) {
+            const index = (this.currentTabIndex - i + this.triggers.length) % this.triggers.length;
+            if (this.triggers[index] && !this.triggers[index]!.disabled) {
+              newIndex = index;
+              break;
+            }
+          }
+          break;
+        }
+        case "Home": {
+          for (let i = 0; i < this.triggers.length; i++) {
+            if (this.triggers[i] && !this.triggers[i]!.disabled) {
+              newIndex = i;
+              break;
+            }
+          }
+          break;
+        }
+        case "End": {
+          for (let i = this.triggers.length - 1; i >= 0; i--) {
+            if (this.triggers[i] && !this.triggers[i]!.disabled) {
+              newIndex = i;
+              break;
+            }
+          }
+          break;
+        }
+        default:
+          return;
+      }
+
+      e.preventDefault();
+      const newTrigger = this.triggers[newIndex];
+      if (!newTrigger) return;
+      const value = newTrigger.getAttribute("data-value");
+      if (value) {
+        this.showTab(value);
+        this.currentTabIndex = newIndex;
+        this.setTabIndex();
+        newTrigger.focus();
+        this.dispatchSyncEvent(value);
+      }
+    };
+
+    private handleClick = (trigger: HTMLElement, index: number): void => {
+      const value = trigger.getAttribute("data-value");
+      if (value) {
+        this.showTab(value);
+        this.currentTabIndex = index;
+        this.setTabIndex();
+        trigger.focus();
+        this.dispatchSyncEvent(value);
+      }
+    };
+
+    private addEventListeners(): void {
+      this.triggers.forEach((trigger, index) => {
+        trigger.addEventListener("click", () => this.handleClick(trigger, index));
+        trigger.addEventListener("keydown", (e) => this.handleKeyNavigation(e));
+      });
+    }
+
+    private showTab(value: TabValue): void {
+      const trigger = this.valueToTriggerMap.get(value);
+      const content = this.valueToContentMap.get(value);
+
+      if (!trigger || !content) return;
+
+      // Update all triggers and contents
+      this.triggers.forEach((t) => {
+        const isActive = t === trigger;
+        t.setAttribute("data-state", isActive ? "active" : "inactive");
+        t.setAttribute("aria-selected", isActive.toString());
+      });
+
+      this.contents.forEach((c) => {
+        const isActive = c === content;
+        c.setAttribute("data-state", isActive ? "active" : "inactive");
+        c.hidden = !isActive;
+      });
+
+      // Initialize any nested tabs in the active content
+      if (content.hasAttribute("data-state") && content.getAttribute("data-state") === "active") {
+        const nestedTabs = content.querySelectorAll<HTMLElement>(".starwind-tabs");
+
+        nestedTabs.forEach((nestedTab, nestedIdx) => {
+          // Skip tabs that already have instances
+          if (!tabInstances.has(nestedTab)) {
+            const uniqueIdx = 1000 + nestedIdx;
+            const handler = new TabsHandler(nestedTab, uniqueIdx);
+            tabInstances.set(nestedTab, handler);
+          }
+        });
+      }
+    }
+  }
+
+  // Store instances in a WeakMap to avoid memory leaks
+  const tabInstances = new WeakMap<HTMLElement, TabsHandler>();
+  let tabCounter = 0;
+
+  const setupTabs = () => {
+    // First handle top-level tabs
+    document.querySelectorAll<HTMLElement>(".starwind-tabs").forEach((tabs) => {
+      // Skip tabs that are nested within other tab contents
+      const isNested = !!tabs.closest("[data-tabs-content]");
+      if (!isNested && !tabInstances.has(tabs)) {
+        tabInstances.set(tabs, new TabsHandler(tabs, tabCounter++));
+      }
+    });
+  };
+
+  setupTabs();
+  document.addEventListener("astro:after-swap", setupTabs);
+  document.addEventListener("starwind:init", setupTabs);
+</script>

package/src/components/tabs/TabsContent.astro

@@ -0,0 +1,28 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+interface Props extends Omit<HTMLAttributes<"div">, "id" | "role" | "tabindex" | "hidden"> {
+  value: string;
+}
+
+export const tabsContent = cv({
+  base: "mt-3xs focus-visible:outline-2 focus-visible:outline-offset-2",
+});
+
+const { value, class: className, ...rest } = Astro.props;
+---
+
+<div
+  class:list={[tabsContent(), className]}
+  data-tabs-content
+  data-value={value}
+  data-state="inactive"
+  role="tabpanel"
+  tabindex="0"
+  hidden
+  {...rest}
+  data-slot="tabs-content"
+>
+  <slot />
+</div>

package/src/components/tabs/TabsList.astro

@@ -0,0 +1,23 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+type Props = HTMLAttributes<"div">;
+
+export const tabsList = cv({
+  base: [
+    "bg-muted text-muted-foreground inline-flex h-3xl items-center justify-start gap-5xs rounded-lg p-5xs",
+  ],
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div
+  class:list={[tabsList(), className]}
+  role="tablist"
+  {...rest}
+  data-slot="tabs-list"
+>
+  <slot />
+</div>

package/src/components/tabs/TabsTrigger.astro

@@ -0,0 +1,34 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+interface Props extends Omit<HTMLAttributes<"button">, "type" | "id" | "role"> {
+  value: string;
+}
+
+export const tabsTrigger = cv({
+  base: [
+    "inline-flex grow items-center justify-center gap-3xs rounded-sm b border-transparent px-xs py-5xs font-medium ws-nowrap transition-[color,box-shadow]",
+    "data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+    "dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:text-muted-foreground",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    "focus-visible:border-outline focus-visible:ring-outline/50 focus-visible:outline-outline focus-visible:ring-3 focus-visible:outline-1",
+    "disabled:pointer-events-none disabled:op-50",
+  ],
+});
+
+const { value, class: className, ...rest } = Astro.props;
+---
+
+<button
+  class:list={[tabsTrigger(), className]}
+  data-tabs-trigger
+  data-value={value}
+  data-state="inactive"
+  role="tab"
+  aria-selected="false"
+  {...rest}
+  data-slot="tabs-trigger"
+>
+  <slot />
+</button>

package/src/components/textarea/Textarea.astro

@@ -0,0 +1,31 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+type VariantProps<T extends (...args: any) => any> = NonNullable<Parameters<T>[0]>;
+
+type Props = HTMLAttributes<"textarea"> & VariantProps<typeof textarea>;
+
+export const textarea = cv({
+  base: [
+    "border-input dark:bg-input/30 text-foreground ring-offset-background min-h-3xl w-full rounded-md b bg-transparent shadow-xs",
+    "focus-visible:border-outline focus-visible:ring-outline/50 transition-[color,box-shadow] focus-visible:ring-3",
+    "file:text-foreground file:border-0 file:bg-transparent file:text-sm file:font-medium",
+    "disabled:cursor-not-allowed disabled:op-50",
+    "aria-invalid:border-error aria-invalid:focus-visible:ring-error/40",
+    "peer placeholder:text-muted-foreground",
+  ],
+  variants: {
+    size: {
+      sm: "min-h-2xl px-3xs py-6xs text-sm",
+      md: "min-h-3xl px-xs py-5xs text-base",
+      lg: "min-h-3xl px-2xl py-xs text-lg",
+    },
+  },
+  defaultVariants: { size: "md" },
+});
+
+const { size, class: className, ...rest } = Astro.props;
+---
+
+<textarea class:list={[textarea({ size }), className]} {...rest} data-slot="textarea"></textarea>

package/src/components/toast/ToastDescription.astro

@@ -0,0 +1,22 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+export const toastDescription = cv({
+  base: "starwind-toast-description text-muted-foreground text-sm",
+});
+
+export interface ToastDescriptionProps extends HTMLAttributes<"div"> {}
+type Props = ToastDescriptionProps;
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div
+  class:list={[toastDescription(), className]}
+  data-toast-description
+  {...rest}
+  data-slot="toast-description"
+>
+  <slot />
+</div>

package/src/components/toast/ToastItem.astro

@@ -0,0 +1,56 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+import IconX from "~icons/lucide/x";
+
+export const toastItem = cv({
+  base: "starwind-toast bg-popover text-popover-foreground pointer-events-auto absolute inset-x-0 bottom-0 flex w-full origin-bottom flex-col gap-5xs overflow-hidden rounded-lg b bg-clip-padding p-md pr-3xl shadow-lg transition-[transform,op] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] data-limited:pointer-events-none data-limited:op-0",
+  variants: {
+    variant: {
+      default: "border-border",
+      success: "border-success/80",
+      error: "border-error/80",
+      warning: "border-warning/80",
+      info: "border-info/80",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+type Variant = "default" | "success" | "error" | "warning" | "info";
+
+export interface ToastItemProps extends HTMLAttributes<"div"> {
+  variant?: Variant;
+}
+
+type Props = ToastItemProps;
+
+const { class: className, variant = "default", ...rest } = Astro.props;
+---
+
+<div
+  class:list={[toastItem({ variant }), className]}
+  data-variant={variant}
+  data-state="open"
+  role="dialog"
+  aria-modal="false"
+  {...rest}
+  data-slot="toast"
+>
+  <div
+    class="starwind-toast-content grid gap-5xs transition-op duration-200 data-behind:op-0 data-expanded:op-100"
+    data-slot="toast-content"
+  >
+    <slot />
+  </div>
+  <button
+    type="button"
+    class="starwind-toast-close text-muted-foreground hover:text-foreground absolute top-3xs right-3xs rounded-md p-5xs op-70 transition-op hover:op-100 focus-visible:ring-2 focus-visible:outline-none"
+    data-slot="toast-close"
+    aria-label="Close notification"
+  >
+    <IconX class="size-4" />
+  </button>
+</div>

package/src/components/toast/ToastTemplate.astro

@@ -0,0 +1,27 @@
+---
+import ToastDescription from "./ToastDescription.astro";
+import ToastItem from "./ToastItem.astro";
+import ToastTitle from "./ToastTitle.astro";
+
+type Variant = "default" | "success" | "error" | "warning" | "info" | "loading";
+
+export interface ToastTemplateProps {
+  variant: Variant;
+}
+
+type Props = ToastTemplateProps;
+
+const { variant } = Astro.props;
+
+// Loading variant uses default item styling but loading title styling
+const itemVariant = variant === "loading" ? "default" : variant;
+---
+
+<template data-toast-template={variant}>
+  <slot>
+    <ToastItem variant={itemVariant}>
+      <ToastTitle variant={variant}>Title</ToastTitle>
+      <ToastDescription>Description</ToastDescription>
+    </ToastItem>
+  </slot>
+</template>

package/src/components/toast/ToastTitle.astro

@@ -0,0 +1,59 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+import IconCircleCheck from "~icons/lucide/circle-check";
+import IconCircleX from "~icons/lucide/circle-x";
+import IconAlertTriangle from "~icons/lucide/alert-triangle";
+import IconInfo from "~icons/lucide/info";
+import IconLoader2 from "~icons/lucide/loader-2";
+
+export const toastTitle = cv({
+  base: "starwind-toast-title flex items-center gap-5xs text-sm font-semibold [&_svg]:size-4",
+  variants: {
+    variant: {
+      default: "",
+      success: "[&_svg]:text-success",
+      error: "[&_svg]:text-error",
+      warning: "[&_svg]:text-warning",
+      info: "[&_svg]:text-info",
+      loading: "[&_svg]:text-muted-foreground",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+type Variant = "default" | "success" | "error" | "warning" | "info" | "loading";
+
+export interface ToastTitleProps extends HTMLAttributes<"div"> {
+  variant?: Variant;
+}
+
+type Props = ToastTitleProps;
+
+const { class: className, variant = "default", ...rest } = Astro.props;
+
+const icons: Record<string, any> = {
+  success: IconCircleCheck,
+  error: IconCircleX,
+  warning: IconAlertTriangle,
+  info: IconInfo,
+  loading: IconLoader2,
+};
+
+const Icon = icons[variant];
+---
+
+<div
+  class:list={[toastTitle({ variant }), className]}
+  data-slot="toast-title"
+  data-toast-title
+  {...rest}
+>
+  <slot name="icon">
+    {Icon && <Icon class={variant === "loading" ? "animate-spin" : ""} />}
+  </slot>
+  <span data-toast-title-text><slot /></span>
+</div>