@starwind-ui/core 1.12.1 → 1.12.2-next.0

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

@@ -0,0 +1,9 @@
+import Skeleton, { skeleton } from "./Skeleton.astro";
+
+const SkeletonVariants = {
+  skeleton,
+};
+
+export { Skeleton, SkeletonVariants };
+
+export default Skeleton;

package/dist/src/components/spinner/Spinner.astro

@@ -0,0 +1,21 @@
+---
+import Loader2 from "@tabler/icons/outline/loader-2.svg";
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = Omit<HTMLAttributes<"svg">, "role" | "aria-label">;
+
+export const spinner = tv({
+  base: "size-4 animate-spin",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<Loader2
+  role="status"
+  aria-label="Loading"
+  class={spinner({ class: className })}
+  data-slot="spinner"
+  {...rest}
+/>

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

@@ -0,0 +1,7 @@
+import Spinner, { spinner } from "./Spinner.astro";
+
+const SpinnerVariants = { spinner };
+
+export { Spinner, SpinnerVariants };
+
+export default Spinner;

package/dist/src/components/switch/Switch.astro

@@ -0,0 +1,191 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = Omit<HTMLAttributes<"button">, "role" | "type" | "aria-checked"> & {
+  /**
+   * Unique identifier for the switch component.
+   */
+  id: string;
+  /**
+   * Optional text label to display alongside the switch.
+   */
+  label?: string;
+  /**
+   * Controls the checked state of the switch.
+   */
+  checked?: boolean;
+  /**
+   * Custom padding in pixels to apply around the switch.
+   */
+  padding?: number;
+  /**
+   * Size variant of the switch component.
+   */
+  size?: "sm" | "md" | "lg";
+  /**
+   * Visual style variant of the switch.
+   * @default "default"
+   */
+  variant?: "default" | "primary" | "secondary" | "info" | "success" | "warning" | "error";
+};
+
+const {
+  id,
+  label,
+  checked = false,
+  padding,
+  size = "md",
+  variant = "default",
+  class: className,
+  ...rest
+} = Astro.props;
+
+// if no specific padding is set, base it off of size
+let newPadding = padding;
+if (!padding) {
+  newPadding = size === "sm" ? 2.5 : size === "lg" ? 4 : 3;
+}
+
+const sizeMultiplier = size === "sm" ? 4 : size === "lg" ? 6 : 5;
+
+let ariaLabel;
+if (rest["aria-label"]) {
+  ariaLabel = rest["aria-label"];
+  delete rest["aria-label"];
+} else if (label) {
+  ariaLabel = label;
+} else {
+  ariaLabel = "switch";
+}
+
+export const switchButton = tv({
+  base: [
+    "border-input bg-muted inline-flex h-(--height) w-(--width) items-center rounded-full border",
+    "group peer ring-offset-background transition outline-none focus-visible:ring-3",
+    "not-disabled:cursor-pointer disabled:cursor-not-allowed disabled:opacity-50",
+  ],
+  variants: {
+    variant: {
+      primary: "aria-checked:border-primary focus-visible:border-primary/70 focus:ring-primary/50",
+      secondary:
+        "aria-checked:border-secondary focus-visible:border-secondary/70 focus:ring-secondary/50",
+      default: "aria-checked:border-foreground focus-visible:border-outline focus:ring-outline/50",
+      info: "aria-checked:border-info focus-visible:border-info/70 focus:ring-info/50",
+      success: "aria-checked:border-success focus-visible:border-success/70 focus:ring-success/50",
+      warning: "aria-checked:border-warning focus-visible:border-warning/70 focus:ring-warning/50",
+      error: "aria-checked:border-error focus-visible:border-error/70 focus:ring-error/50",
+    },
+  },
+  defaultVariants: { variant: "default" },
+});
+
+export const switchToggle = tv({
+  base: [
+    "bg-foreground inline-block transform rounded-full transition-transform",
+    "group-aria-checked:translate-x-(--translation) group-aria-[checked=false]:translate-x-[calc(var(--padding)-var(--border-offset))]",
+  ],
+  variants: { size: { sm: "size-4", md: "size-5", lg: "size-6" } },
+  defaultVariants: { size: "md" },
+});
+
+export const switchLabel = tv({
+  base: "text-foreground ml-2 font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+  variants: { size: { sm: "text-sm", md: "text-base", lg: "text-lg" } },
+  defaultVariants: { size: "md" },
+});
+---
+
+<div class="starwind-switch flex items-center">
+  <button
+    type="button"
+    id={id}
+    role="switch"
+    aria-checked={checked ? "true" : "false"}
+    aria-label={ariaLabel}
+    class={switchButton({ variant, class: className })}
+    style={{
+      "--padding": `${newPadding}px`,
+      "--height": `calc((var(--spacing) * ${sizeMultiplier}) + (var(--padding) * 2))`,
+      "--width": `calc((var(--spacing) * ${sizeMultiplier} * 2) + (var(--padding) * 3))`,
+      "--border-offset": "1px",
+    }}
+    data-slot="switch-button"
+    {...rest}
+  >
+    <span
+      class={switchToggle({ size })}
+      data-slot="switch-toggle"
+      style={{
+        "--translation": `calc((var(--spacing) * ${sizeMultiplier}) + (var(--padding) * 2) - var(--border-offset))`,
+      }}></span>
+  </button>
+  {
+    label && (
+      <label for={id} class={switchLabel({ size })} data-slot="switch-label">
+        {label}
+      </label>
+    )
+  }
+</div>
+
+<script>
+  import type { SwitchChangeEvent } from "./SwitchTypes";
+
+  class SwitchHandler {
+    private switchButton: HTMLButtonElement;
+
+    constructor(switchButton: HTMLButtonElement) {
+      this.switchButton = switchButton;
+      this.setupEventListeners();
+    }
+
+    private setupEventListeners(): void {
+      this.switchButton.addEventListener("click", () => this.handleStateChange());
+      this.switchButton.addEventListener("keydown", (event) => this.handleKeyDown(event));
+    }
+
+    private handleStateChange(): void {
+      if (this.switchButton.disabled) return;
+
+      const isChecked = this.switchButton.getAttribute("aria-checked") === "true";
+      const newState = !isChecked;
+
+      this.switchButton.setAttribute("aria-checked", newState.toString());
+
+      // Dispatch custom event with the new state
+      const event = new CustomEvent<SwitchChangeEvent["detail"]>("starwind-switch:change", {
+        detail: { checked: newState, switchId: this.switchButton.id },
+        bubbles: true,
+        cancelable: true,
+      });
+
+      this.switchButton.dispatchEvent(event);
+    }
+
+    private handleKeyDown(event: KeyboardEvent): void {
+      if (this.switchButton.disabled) return;
+
+      if (event.key === " " || event.key === "Enter") {
+        event.preventDefault();
+        this.handleStateChange();
+      }
+    }
+  }
+
+  // Store instances in a WeakMap to avoid memory leaks
+  const switchInstances = new WeakMap<HTMLButtonElement, SwitchHandler>();
+
+  const setupSwitches = () => {
+    document
+      .querySelectorAll<HTMLButtonElement>('.starwind-switch button[role="switch"]')
+      .forEach((switchButton) => {
+        if (!switchInstances.has(switchButton)) {
+          switchInstances.set(switchButton, new SwitchHandler(switchButton));
+        }
+      });
+  };
+
+  setupSwitches();
+  document.addEventListener("astro:after-swap", setupSwitches);
+</script>

package/dist/src/components/switch/SwitchTypes.ts

@@ -0,0 +1,6 @@
+export interface SwitchChangeEvent extends CustomEvent {
+  detail: {
+    checked: boolean;
+    switchId: string;
+  };
+}

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

@@ -0,0 +1,12 @@
+import Switch, { switchButton, switchLabel, switchToggle } from "./Switch.astro";
+import type { SwitchChangeEvent } from "./SwitchTypes";
+
+const SwitchVariants = {
+  switchButton,
+  switchToggle,
+  switchLabel,
+};
+
+export { Switch, type SwitchChangeEvent, SwitchVariants };
+
+export default Switch;

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

@@ -0,0 +1,18 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv, type VariantProps } from "tailwind-variants";
+
+type Props = HTMLAttributes<"table"> & VariantProps<typeof table>;
+
+export const table = tv({
+  base: "w-full caption-bottom text-sm",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div data-slot="table-container" class="relative w-full overflow-x-auto">
+  <table data-slot="table" class={table({ class: className })} {...rest} role="table">
+    <slot />
+  </table>
+</div>

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

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

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,
+};