@rimelight/ui 0.0.5 → 0.0.7

package/src/components/table/TableCaption.astro

@@ -1,18 +0,0 @@
----
-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

@@ -1,18 +0,0 @@
----
-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

@@ -1,18 +0,0 @@
----
-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

@@ -1,18 +0,0 @@
----
-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

@@ -1,18 +0,0 @@
----
-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

@@ -1,17 +0,0 @@
----
-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

@@ -1,270 +0,0 @@
----
-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

@@ -1,28 +0,0 @@
----
-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

@@ -1,23 +0,0 @@
----
-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

@@ -1,34 +0,0 @@
----
-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

@@ -1,31 +0,0 @@
----
-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

@@ -1,22 +0,0 @@
----
-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

@@ -1,56 +0,0 @@
----
-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

@@ -1,27 +0,0 @@
----
-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

@@ -1,59 +0,0 @@
----
-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>