@starwind-ui/core 1.6.2 → 1.7.0

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

@@ -3,186 +3,186 @@ 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";
+  /**
+   * 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
+  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;
+  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"];
+  ariaLabel = rest["aria-label"];
+  delete rest["aria-label"];
 } else if (label) {
-	ariaLabel = label;
+  ariaLabel = label;
 } else {
-	ariaLabel = "switch";
+  ariaLabel = "switch";
 }
 
 const switchButton = tv({
-	base: [
-		"starwind-transition-colors border-input bg-muted inline-flex h-(--height) w-(--width) items-center rounded-full border",
-		"group peer ring-offset-background focus-visible:outline-2 focus-visible:outline-offset-2",
-		"not-disabled:cursor-pointer disabled:cursor-not-allowed disabled:opacity-50",
-	],
-	variants: {
-		variant: {
-			primary: "aria-checked:border-primary focus:outline-primary",
-			secondary: "aria-checked:border-secondary focus:outline-secondary",
-			default: "aria-checked:border-foreground focus:outline-outline",
-			info: "aria-checked:border-info focus:outline-info",
-			success: "aria-checked:border-success focus:outline-success",
-			warning: "aria-checked:border-warning focus:outline-warning",
-			error: "aria-checked:border-error focus:outline-error",
-		},
-	},
-	defaultVariants: { variant: "default" },
+  base: [
+    "starwind-transition-colors border-input bg-muted inline-flex h-(--height) w-(--width) items-center rounded-full border",
+    "group peer ring-offset-background focus-visible:outline-2 focus-visible:outline-offset-2",
+    "not-disabled:cursor-pointer disabled:cursor-not-allowed disabled:opacity-50",
+  ],
+  variants: {
+    variant: {
+      primary: "aria-checked:border-primary focus:outline-primary",
+      secondary: "aria-checked:border-secondary focus:outline-secondary",
+      default: "aria-checked:border-foreground focus:outline-outline",
+      info: "aria-checked:border-info focus:outline-info",
+      success: "aria-checked:border-success focus:outline-success",
+      warning: "aria-checked:border-warning focus:outline-warning",
+      error: "aria-checked:border-error focus:outline-error",
+    },
+  },
+  defaultVariants: { variant: "default" },
 });
 
 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" },
+  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" },
 });
 
 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" },
+  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",
-		}}
-		{...rest}
-	>
-		<span
-			class={switchToggle({ size })}
-			style={{
-				"--translation": `calc((var(--spacing) * ${sizeMultiplier}) + (var(--padding) * 2) - var(--border-offset))`,
-			}}></span>
-	</button>
-	{
-		label && (
-			<label for={id} class={switchLabel({ size })}>
-				{label}
-			</label>
-		)
-	}
+  <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",
+    }}
+    {...rest}
+  >
+    <span
+      class={switchToggle({ size })}
+      style={{
+        "--translation": `calc((var(--spacing) * ${sizeMultiplier}) + (var(--padding) * 2) - var(--border-offset))`,
+      }}></span>
+  </button>
+  {
+    label && (
+      <label for={id} class={switchLabel({ size })}>
+        {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);
+  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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,16 +1,16 @@
 ---
 import type { HTMLAttributes } from "astro/types";
-import { type VariantProps, tv } from "tailwind-variants";
+import { tv, type VariantProps } from "tailwind-variants";
 
 type Props = HTMLAttributes<"th"> & VariantProps<typeof tableHead>;
 
 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]",
+  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-table-head class={tableHead({ class: className })} {...rest} role="columnheader">
-	<slot />
+  <slot />
 </th>

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

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

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

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

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

@@ -10,12 +10,12 @@ import TableRow from "./TableRow.astro";
 export { Table, TableBody, TableCaption, TableCell, TableFoot, TableHead, TableHeader, TableRow };
 
 export default {
-	Root: Table,
-	Body: TableBody,
-	Caption: TableCaption,
-	Cell: TableCell,
-	Foot: TableFoot,
-	Head: TableHead,
-	Header: TableHeader,
-	Row: TableRow,
+  Root: Table,
+  Body: TableBody,
+  Caption: TableCaption,
+  Cell: TableCell,
+  Foot: TableFoot,
+  Head: TableHead,
+  Header: TableHeader,
+  Row: TableRow,
 };