@starwind-ui/core 0.0.1 → 0.1.0

package/dist/src/components/select/SelectItem.astro

@@ -0,0 +1,41 @@
+---
+import Check from "@tabler/icons/outline/check.svg";
+
+import type { HTMLAttributes } from "astro/types";
+
+type Props = HTMLAttributes<"div"> & {
+	/**
+	 * The value associated with this select item
+	 */
+	value: string;
+	/**
+	 * Whether this select item is disabled and cannot be selected
+	 */
+	disabled?: boolean;
+};
+
+const { class: className, value, disabled, ...rest } = Astro.props;
+---
+
+<div
+	class:list={[
+		"relative flex w-full cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 outline-none select-none",
+		"focus:bg-accent focus:text-accent-foreground",
+		"data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		"not-aria-selected:[&_svg]:hidden aria-selected:[&_svg]:flex",
+		className,
+	]}
+	data-value={value}
+	data-disabled={disabled}
+	aria-selected="false"
+	role="option"
+	tabindex="0"
+	{...rest}
+>
+	<span class="absolute left-2 size-3.5 items-center justify-center">
+		<Check class="size-4" />
+	</span>
+	<span>
+		<slot />
+	</span>
+</div>

package/dist/src/components/select/SelectLabel.astro

@@ -0,0 +1,11 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Props = HTMLAttributes<"div">;
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class:list={["py-1.5 pr-2 pl-8 font-semibold", className]} {...rest}>
+	<slot />
+</div>

package/dist/src/components/select/SelectSeparator.astro

@@ -0,0 +1,9 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Props = HTMLAttributes<"div">;
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class:list={["bg-muted -mx-1 my-1 h-px", className]} {...rest}></div>

package/dist/src/components/select/SelectTrigger.astro

@@ -0,0 +1,40 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+import ChevronDown from "@tabler/icons/outline/chevron-down.svg";
+
+type Props = Omit<HTMLAttributes<"button">, "role" | "type"> & {
+	/**
+	 * The content to be rendered inside the select trigger
+	 */
+	children: any;
+	/**
+	 * Whether the select field is required in a form context
+	 */
+	required?: boolean;
+};
+
+const { class: className, required = false, ...rest } = Astro.props;
+---
+
+<button
+	class:list={[
+		"starwind-select-trigger",
+		"border-input bg-background text-foreground ring-offset-background flex h-11 items-center justify-between rounded-md border px-3 py-2",
+		"focus:outline-outline focus:outline-2 focus:outline-offset-2",
+		"disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+		className,
+	]}
+	type="button"
+	role="combobox"
+	aria-label="Select field"
+	aria-expanded="false"
+	aria-haspopup="listbox"
+	aria-autocomplete="none"
+	aria-required={required ? "true" : "false"}
+	data-state="closed"
+	{...rest}
+>
+	<slot />
+	<ChevronDown class="size-4 opacity-50" />
+</button>

package/dist/src/components/select/SelectTypes.ts

@@ -0,0 +1,7 @@
+export interface SelectChangeEvent extends CustomEvent {
+	detail: {
+		value: string;
+		selectId: string;
+		label: string;
+	};
+}

package/dist/src/components/select/SelectValue.astro

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Props = HTMLAttributes<"span"> & {
+	/**
+	 * The text to display when no value is selected
+	 */
+	placeholder?: string;
+};
+
+const { placeholder = "select", ...rest } = Astro.props;
+---
+
+<span class="pointer-events-none" {...rest}>
+	{placeholder}
+</span>

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

@@ -0,0 +1,30 @@
+import Select from "./Select.astro";
+import SelectContent from "./SelectContent.astro";
+import SelectGroup from "./SelectGroup.astro";
+import SelectItem from "./SelectItem.astro";
+import SelectLabel from "./SelectLabel.astro";
+import SelectSeparator from "./SelectSeparator.astro";
+import SelectTrigger from "./SelectTrigger.astro";
+import SelectValue from "./SelectValue.astro";
+
+export {
+	Select,
+	SelectTrigger,
+	SelectValue,
+	SelectContent,
+	SelectGroup,
+	SelectLabel,
+	SelectItem,
+	SelectSeparator,
+};
+
+export default {
+	Root: Select,
+	Trigger: SelectTrigger,
+	Value: SelectValue,
+	Content: SelectContent,
+	Group: SelectGroup,
+	Label: SelectLabel,
+	Item: SelectItem,
+	Separator: SelectSeparator,
+};

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

@@ -0,0 +1,189 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+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;
+
+const toggleSizeClass = {
+	sm: "size-4",
+	md: "size-5",
+	lg: "size-6",
+};
+
+let ariaLabel;
+if (rest["aria-label"]) {
+	ariaLabel = rest["aria-label"];
+	delete rest["aria-label"];
+} else if (label) {
+	ariaLabel = label;
+} else {
+	ariaLabel = "switch";
+}
+---
+
+<div class="starwind-switch flex items-center">
+	<button
+		type="button"
+		id={id}
+		role="switch"
+		aria-checked={checked ? "true" : "false"}
+		aria-label={ariaLabel}
+		class:list={[
+			"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",
+			{
+				"aria-checked:border-primary focus:outline-primary": variant === "primary",
+				"aria-checked:border-secondary focus:outline-secondary": variant === "secondary",
+				"aria-checked:border-foreground focus:outline-outline": variant === "default",
+				"aria-checked:border-info focus:outline-info": variant === "info",
+				"aria-checked:border-success focus:outline-success": variant === "success",
+				"aria-checked:border-warning focus:outline-warning": variant === "warning",
+				"aria-checked:border-error focus:outline-error": variant === "error",
+			},
+			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:list={[
+				"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))]",
+				toggleSizeClass[size],
+			]}
+			style={{
+				"--translation": `calc((var(--spacing) * ${sizeMultiplier}) + (var(--padding) * 2) - var(--border-offset))`,
+			}}></span>
+	</button>
+	{
+		label && (
+			<label
+				for={id}
+				class:list={[
+					"text-foreground ml-2 font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+					{
+						"text-sm": size === "sm",
+						"text-base": size === "md",
+						"text-lg": size === "lg",
+					},
+				]}
+			>
+				{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,6 @@
+import Switch from "./Switch.astro";
+import type { SwitchChangeEvent } from "./SwitchTypes";
+
+export { Switch, type SwitchChangeEvent };
+
+export default Switch;

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

@@ -0,0 +1,246 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {
+	defaultValue?: string;
+	syncKey?: string;
+}
+
+const { defaultValue, syncKey, class: className, ...rest } = Astro.props;
+---
+
+<div
+	class:list={["starwind-tabs", className]}
+	data-default-value={defaultValue}
+	data-sync-key={syncKey}
+	{...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>;
+
+		constructor(tabs: HTMLElement, idx: number) {
+			this.tabs = tabs;
+			this.triggers = Array.from(tabs.querySelectorAll("[data-tabs-trigger]"));
+			this.contents = Array.from(tabs.querySelectorAll("[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, trigger: HTMLElement): 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, trigger));
+			});
+		}
+
+		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;
+			});
+		}
+	}
+
+	// Store instances in a WeakMap to avoid memory leaks
+	const tabInstances = new WeakMap<HTMLElement, TabsHandler>();
+
+	const setupTabs = () => {
+		document.querySelectorAll<HTMLElement>(".starwind-tabs").forEach((tabs, idx) => {
+			if (!tabInstances.has(tabs)) {
+				tabInstances.set(tabs, new TabsHandler(tabs, idx));
+			}
+		});
+	};
+
+	setupTabs();
+	document.addEventListener("astro:after-swap", setupTabs);
+</script>

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

@@ -0,0 +1,22 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends Omit<HTMLAttributes<"div">, "id" | "role" | "tabindex" | "hidden"> {
+	value: string;
+}
+
+const { value, class: className, ...rest } = Astro.props;
+---
+
+<div
+	class:list={["mt-2 focus-visible:outline-2 focus-visible:outline-offset-2", className]}
+	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,19 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Props = Omit<HTMLAttributes<"div">, "role">;
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div
+	class:list={[
+		"bg-muted text-muted-foreground inline-flex w-full items-center justify-center rounded-md p-1",
+		className,
+	]}
+	data-tabs-list
+	role="tablist"
+	{...rest}
+>
+	<slot />
+</div>

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

@@ -0,0 +1,27 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends Omit<HTMLAttributes<"button">, "type" | "id" | "role"> {
+	value: string;
+}
+
+const { value, class: className, ...rest } = Astro.props;
+---
+
+<button
+	class:list={[
+		"starwind-transition-colors inline-flex grow items-center justify-center rounded-sm px-3 py-1.5 font-medium whitespace-nowrap",
+		"data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+		"focus-visible:outline-outline focus-visible:outline-2 focus-visible:outline-offset-2",
+		"disabled:pointer-events-none disabled:opacity-50",
+		className,
+	]}
+	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,13 @@
+import Tabs from "./Tabs.astro";
+import TabsContent from "./TabsContent.astro";
+import TabsList from "./TabsList.astro";
+import TabsTrigger from "./TabsTrigger.astro";
+
+export { Tabs, TabsContent, TabsList, TabsTrigger };
+
+export default {
+	Root: Tabs,
+	Content: TabsContent,
+	List: TabsList,
+	Trigger: TabsTrigger,
+};