@starwind-ui/core 1.15.1 → 1.15.2

package/dist/src/components/table/TableCaption.astro

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv, type VariantProps } from "tailwind-variants";
+
+type Props = HTMLAttributes<"caption"> & VariantProps<typeof tableCaption>;
+
+export const tableCaption = tv({
+  base: "text-muted-foreground mt-4 text-sm",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<caption data-slot="table-caption" class={tableCaption({ class: className })} {...rest}>
+  <slot />
+</caption>

package/dist/src/components/table/TableCell.astro

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv, type VariantProps } from "tailwind-variants";
+
+type Props = HTMLAttributes<"td"> & VariantProps<typeof tableCell>;
+
+export const tableCell = tv({
+  base: "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<td data-slot="table-cell" class={tableCell({ class: className })} {...rest}>
+  <slot />
+</td>

package/dist/src/components/table/TableFoot.astro

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

package/dist/src/components/table/TableHead.astro

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv, type VariantProps } from "tailwind-variants";
+
+type Props = HTMLAttributes<"th"> & VariantProps<typeof tableHead>;
+
+export const tableHead = tv({
+  base: "text-muted-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<th data-slot="table-head" class={tableHead({ class: className })} {...rest} role="columnheader">
+  <slot />
+</th>

package/dist/src/components/table/TableHeader.astro

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv, type VariantProps } from "tailwind-variants";
+
+type Props = HTMLAttributes<"thead"> & VariantProps<typeof tableHeader>;
+
+export const tableHeader = tv({
+  base: "[&_tr]:border-b",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<thead data-slot="table-header" class={tableHeader({ class: className })} {...rest}>
+  <slot />
+</thead>

package/dist/src/components/table/TableRow.astro

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv, type VariantProps } from "tailwind-variants";
+
+type Props = HTMLAttributes<"tr"> & VariantProps<typeof tableRow>;
+
+export const tableRow = tv({
+  base: "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<tr data-slot="table-row" class={tableRow({ class: className })} {...rest} role="row">
+  <slot />
+</tr>

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

@@ -0,0 +1,42 @@
+import Table, { table } from "./Table.astro";
+import TableBody, { tableBody } from "./TableBody.astro";
+import TableCaption, { tableCaption } from "./TableCaption.astro";
+import TableCell, { tableCell } from "./TableCell.astro";
+import TableFoot, { tableFoot } from "./TableFoot.astro";
+import TableHead, { tableHead } from "./TableHead.astro";
+import TableHeader, { tableHeader } from "./TableHeader.astro";
+import TableRow, { tableRow } from "./TableRow.astro";
+
+const TableVariants = {
+  table,
+  tableBody,
+  tableCaption,
+  tableCell,
+  tableFoot,
+  tableHead,
+  tableHeader,
+  tableRow,
+};
+
+export {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFoot,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableVariants,
+};
+
+export default {
+  Root: Table,
+  Body: TableBody,
+  Caption: TableCaption,
+  Cell: TableCell,
+  Foot: TableFoot,
+  Head: TableHead,
+  Header: TableHeader,
+  Row: TableRow,
+};

package/dist/src/components/tabs/Tabs.astro

@@ -0,0 +1,271 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+interface Props extends HTMLAttributes<"div"> {
+  defaultValue?: string;
+  syncKey?: string;
+}
+
+export const tabs = tv({ base: "starwind-tabs" });
+
+const { defaultValue, syncKey, class: className, ...rest } = Astro.props;
+---
+
+<div
+  class={tabs({ class: className })}
+  data-default-value={defaultValue}
+  data-sync-key={syncKey}
+  data-slot="tabs"
+  {...rest}
+>
+  <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;
+    private storageKey: string;
+    private valueToTriggerMap: Map<string, HTMLButtonElement>;
+    private valueToContentMap: Map<string, HTMLElement>;
+    private parentHandler: TabsHandler | null = null;
+
+    constructor(tabs: HTMLElement, idx: number, parentHandler: TabsHandler | null = null) {
+      this.tabs = tabs;
+      this.parentHandler = parentHandler;
+      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].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].disabled) {
+              newIndex = index;
+              break;
+            }
+          }
+          break;
+        }
+        case "Home": {
+          for (let i = 0; i < this.triggers.length; i++) {
+            if (!this.triggers[i].disabled) {
+              newIndex = i;
+              break;
+            }
+          }
+          break;
+        }
+        case "End": {
+          for (let i = this.triggers.length - 1; i >= 0; i--) {
+            if (!this.triggers[i].disabled) {
+              newIndex = i;
+              break;
+            }
+          }
+          break;
+        }
+        default:
+          return;
+      }
+
+      e.preventDefault();
+      const newTrigger = this.triggers[newIndex];
+      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, this);
+            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/dist/src/components/tabs/TabsContent.astro

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

package/dist/src/components/tabs/TabsList.astro

@@ -0,0 +1,22 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = Omit<HTMLAttributes<"div">, "role">;
+
+export const tabsList = tv({
+  base: "bg-muted text-muted-foreground inline-flex w-fit items-center justify-center rounded-md p-1",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div
+  class={tabsList({ class: className })}
+  data-slot="tabs-list"
+  data-tabs-list
+  role="tablist"
+  {...rest}
+>
+  <slot />
+</div>

package/dist/src/components/tabs/TabsTrigger.astro

@@ -0,0 +1,34 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+interface Props extends Omit<HTMLAttributes<"button">, "type" | "id" | "role"> {
+  value: string;
+}
+
+export const tabsTrigger = tv({
+  base: [
+    "inline-flex grow items-center justify-center gap-2 rounded-sm border border-transparent px-3 py-1.5 font-medium whitespace-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:opacity-50",
+  ],
+});
+
+const { value, class: className, ...rest } = Astro.props;
+---
+
+<button
+  class={tabsTrigger({ class: className })}
+  data-slot="tabs-trigger"
+  data-tabs-trigger
+  data-value={value}
+  data-state="inactive"
+  role="tab"
+  aria-selected="false"
+  {...rest}
+>
+  <slot />
+</button>

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

@@ -0,0 +1,20 @@
+import Tabs, { tabs } from "./Tabs.astro";
+import TabsContent, { tabsContent } from "./TabsContent.astro";
+import TabsList, { tabsList } from "./TabsList.astro";
+import TabsTrigger, { tabsTrigger } from "./TabsTrigger.astro";
+
+const TabsVariants = {
+  tabs,
+  tabsContent,
+  tabsList,
+  tabsTrigger,
+};
+
+export { Tabs, TabsContent, TabsList, TabsTrigger, TabsVariants };
+
+export default {
+  Root: Tabs,
+  Content: TabsContent,
+  List: TabsList,
+  Trigger: TabsTrigger,
+};

package/dist/src/components/textarea/Textarea.astro

@@ -0,0 +1,29 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv, type VariantProps } from "tailwind-variants";
+
+type Props = HTMLAttributes<"textarea"> & VariantProps<typeof textarea>;
+
+export const textarea = tv({
+  base: [
+    "border-input dark:bg-input/30 text-foreground ring-offset-background min-h-10 w-full rounded-md border 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:opacity-50",
+    "aria-invalid:border-error aria-invalid:focus-visible:ring-error/40",
+    "peer placeholder:text-muted-foreground",
+  ],
+  variants: {
+    size: {
+      sm: "min-h-9 px-2 py-1 text-sm",
+      md: "min-h-10 px-3 py-2 text-base",
+      lg: "min-h-12 px-4 py-3 text-lg",
+    },
+  },
+  defaultVariants: { size: "md" },
+});
+
+const { size, class: className, ...rest } = Astro.props;
+---
+
+<textarea class={textarea({ size, class: className })} data-slot="textarea" {...rest}></textarea>

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

@@ -0,0 +1,9 @@
+import Textarea, { textarea } from "./Textarea.astro";
+
+const TextareaVariants = {
+  textarea,
+};
+
+export { Textarea, TextareaVariants };
+
+export default Textarea;