@svelte-thing/primitives 0.0.0

package/dist/tab/root/index.mjs

@@ -0,0 +1,57 @@
+import { n as setRoot, t as getRoot } from "../../context-DwEoOJU2.mjs";
+import { uid } from "uid";
+//#region src/tab/root/createRoot.svelte.ts
+function createRoot(props) {
+	const activateOnFocus = $derived(props.activateOnFocus ?? true);
+	const direction = $derived(props.direction ?? "ltr");
+	const id = $derived(uid());
+	const orientation = $derived(props.orientation ?? "horizontal");
+	let hasTitle = $state(false);
+	let value = $derived(props.value ?? null);
+	let panel = $derived(props.value ?? null);
+	const root = {
+		get activateOnFocus() {
+			return activateOnFocus;
+		},
+		get direction() {
+			return direction;
+		},
+		get hasTitle() {
+			return hasTitle;
+		},
+		set hasTitle(h) {
+			hasTitle = h;
+		},
+		get id() {
+			return id;
+		},
+		get orientation() {
+			return orientation;
+		},
+		get panel() {
+			return panel;
+		},
+		set panel(p) {
+			panel = p;
+		},
+		get value() {
+			return value;
+		},
+		set value(v) {
+			value = v;
+		},
+		props: {
+			get "data-orientation"() {
+				return orientation;
+			},
+			get id() {
+				return id;
+			},
+			"data-tab-root": ""
+		}
+	};
+	setRoot(root);
+	return root;
+}
+//#endregion
+export { createRoot, getRoot, setRoot };

package/dist/tab/title/index.d.mts

@@ -0,0 +1,2 @@
+import { n as createTitle, t as TitleState } from "../../index-DAHEDQQS.mjs";
+export { TitleState, createTitle };

package/dist/tab/title/index.mjs

@@ -0,0 +1,18 @@
+import { t as getRoot } from "../../context-DwEoOJU2.mjs";
+import { onDestroy } from "svelte";
+//#region src/tab/title/createTitle.svelte.ts
+function createTitle() {
+	const root = getRoot();
+	root.hasTitle = true;
+	onDestroy(() => {
+		root.hasTitle = false;
+	});
+	return { props: {
+		get id() {
+			return `${root.id}-title`;
+		},
+		"data-tab-title": ""
+	} };
+}
+//#endregion
+export { createTitle };

package/dist/tab/trigger/index.d.mts

@@ -0,0 +1,2 @@
+import { n as TriggerState, r as createTrigger, t as CreateTriggerProps } from "../../index-B-PBb_8h.mjs";
+export { CreateTriggerProps, TriggerState, createTrigger };

package/dist/tab/trigger/index.mjs

@@ -0,0 +1,94 @@
+import { t as getRoot } from "../../context-DwEoOJU2.mjs";
+//#region src/tab/trigger/createTrigger.svelte.ts
+function createTrigger(props) {
+	const root = getRoot();
+	const isSelected = $derived(root.value === props.value);
+	if (root.value === null) {
+		root.value = props.value;
+		root.panel = props.value;
+	}
+	return { props: {
+		get "aria-controls"() {
+			return `${root.id}-panel-${props.value}`;
+		},
+		get "aria-selected"() {
+			return isSelected;
+		},
+		get "data-disabled"() {
+			return props.disabled ? true : void 0;
+		},
+		get "data-orientation"() {
+			return root.orientation;
+		},
+		get "data-root-id"() {
+			return root.id;
+		},
+		get "data-selected"() {
+			return isSelected ? "" : void 0;
+		},
+		get "data-value"() {
+			return props.value;
+		},
+		get id() {
+			return `${root.id}-trigger-${props.value}`;
+		},
+		get tabindex() {
+			return isSelected ? void 0 : -1;
+		},
+		"data-tabs-trigger": "",
+		type: "button",
+		role: "tab",
+		onclick(event) {
+			root.value = props.value;
+			root.panel = props.value;
+			event.currentTarget.focus();
+		},
+		onkeydown(event) {
+			if (event.ctrlKey || event.metaKey || event.altKey || event.shiftKey) return;
+			let preventDefault = false;
+			let pendingValue = null;
+			const button = event.currentTarget;
+			const triggers = [...document.querySelectorAll(`[data-tabs-trigger][data-root-id="${root.id}"]:not([data-disabled])`)];
+			const currentIndex = triggers.indexOf(button);
+			const nextKeyName = root.orientation === "horizontal" ? "ArrowRight" : "ArrowDown";
+			const previousKeyName = root.orientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
+			switch (event.key) {
+				case previousKeyName: {
+					const nextIndex = currentIndex === 0 ? triggers.length - 1 : currentIndex - 1;
+					pendingValue = triggers[nextIndex]?.dataset.value ?? null;
+					triggers[nextIndex]?.focus();
+					preventDefault = true;
+					break;
+				}
+				case nextKeyName: {
+					const nextIndex = (currentIndex + 1) % triggers.length;
+					pendingValue = triggers[nextIndex]?.dataset.value ?? null;
+					triggers[nextIndex]?.focus();
+					preventDefault = true;
+					break;
+				}
+				case "Home":
+					pendingValue = triggers[0]?.dataset.value ?? null;
+					triggers[0]?.focus();
+					preventDefault = true;
+					break;
+				case "End":
+					pendingValue = triggers.at(-1)?.dataset.value ?? null;
+					triggers.at(-1)?.focus();
+					preventDefault = true;
+					break;
+				default: break;
+			}
+			if (pendingValue !== null) {
+				root.value = pendingValue;
+				if (root.activateOnFocus) root.panel = pendingValue;
+			}
+			if (preventDefault) {
+				event.stopPropagation();
+				event.preventDefault();
+			}
+		}
+	} };
+}
+//#endregion
+export { createTrigger };

package/dist/table/index.d.mts

@@ -0,0 +1,2 @@
+import { CreateRowProps, RowState, createRow, getRow, setRow } from "./row/index.mjs";
+export { CreateRowProps, RowState, createRow, getRow, setRow };

package/dist/table/index.mjs

@@ -0,0 +1,2 @@
+import { createRow, getRow, setRow } from "./row/index.mjs";
+export { createRow, getRow, setRow };

package/dist/table/row/index.d.mts

@@ -0,0 +1,17 @@
+import { Exact } from "@svelte-thing/type-utils";
+import { HTMLAttributes } from "svelte/elements";
+
+//#region src/table/row/createRow.svelte.d.ts
+interface CreateRowProps {
+  href: string | undefined;
+}
+interface RowState {
+  href: string | undefined;
+  props: HTMLAttributes<HTMLElement>;
+}
+declare function createRow<T extends CreateRowProps>(props: Exact<CreateRowProps, T>): RowState;
+//#endregion
+//#region src/table/row/context.d.ts
+declare const getRow: () => RowState, setRow: (context: RowState) => RowState;
+//#endregion
+export { CreateRowProps, RowState, createRow, getRow, setRow };

package/dist/table/row/index.mjs

@@ -0,0 +1,17 @@
+import { createContext } from "svelte";
+//#region src/table/row/context.ts
+const [getRow, setRow] = createContext();
+//#endregion
+//#region src/table/row/createRow.svelte.ts
+function createRow(props) {
+	const row = {
+		get href() {
+			return props.href;
+		},
+		props: {}
+	};
+	setRow(row);
+	return row;
+}
+//#endregion
+export { createRow, getRow, setRow };

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@svelte-thing/primitives",
+  "version": "0.0.0",
+  "files": [
+    "src",
+    "dist",
+    "!**/*.test.js",
+    "!**/*.test.js.map",
+    "!**/*.test.d.ts"
+  ],
+  "type": "module",
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./button": "./dist/button/index.mjs",
+    "./field": "./dist/field/index.mjs",
+    "./field/date": "./dist/field/date/index.mjs",
+    "./field/error": "./dist/field/error/index.mjs",
+    "./field/input": "./dist/field/input/index.mjs",
+    "./field/label": "./dist/field/label/index.mjs",
+    "./field/password": "./dist/field/password/index.mjs",
+    "./field/root": "./dist/field/root/index.mjs",
+    "./menu": "./dist/menu/index.mjs",
+    "./menu/item": "./dist/menu/item/index.mjs",
+    "./menu/popup": "./dist/menu/popup/index.mjs",
+    "./menu/root": "./dist/menu/root/index.mjs",
+    "./menu/trigger": "./dist/menu/trigger/index.mjs",
+    "./pagination": "./dist/pagination/index.mjs",
+    "./pagination/content": "./dist/pagination/content/index.mjs",
+    "./pagination/ellipsis": "./dist/pagination/ellipsis/index.mjs",
+    "./pagination/item": "./dist/pagination/item/index.mjs",
+    "./pagination/link": "./dist/pagination/link/index.mjs",
+    "./pagination/root": "./dist/pagination/root/index.mjs",
+    "./tab": "./dist/tab/index.mjs",
+    "./tab/indicator": "./dist/tab/indicator/index.mjs",
+    "./tab/list": "./dist/tab/list/index.mjs",
+    "./tab/panel": "./dist/tab/panel/index.mjs",
+    "./tab/root": "./dist/tab/root/index.mjs",
+    "./tab/title": "./dist/tab/title/index.mjs",
+    "./tab/trigger": "./dist/tab/trigger/index.mjs",
+    "./table": "./dist/table/index.mjs",
+    "./table/row": "./dist/table/row/index.mjs",
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "@svelte-thing/component-utils": "^0.0.16",
+    "@svelte-thing/type-utils": "^0.0.1",
+    "esm-env": "^1.2.2",
+    "uid": "2.0.2"
+  },
+  "devDependencies": {
+    "@arethetypeswrong/core": "^0.18.3",
+    "@svelte-thing/tailwind-radix-colors": "^0.0.0",
+    "@sveltejs/package": "^2.5.8",
+    "publint": "0.3.21",
+    "svelte": "5.53.7",
+    "tailwindcss": "4.1.18",
+    "typescript": "6.0.3",
+    "vite-plus": "^0.1.24"
+  },
+  "peerDependencies": {
+    "svelte": "5.53.7",
+    "tailwindcss": "4.1.18"
+  }
+}

package/src/button/createButton.svelte.ts

@@ -0,0 +1,11 @@
+import type { HTMLButtonAttributes } from 'svelte/elements';
+
+export interface ButtonState {
+	props: HTMLButtonAttributes;
+}
+
+export function createButton(): ButtonState {
+	return {
+		props: {},
+	};
+}

package/src/button/index.ts

@@ -0,0 +1 @@
+export * from './createButton.svelte.js';

package/src/field/date/createPicker.svelte.ts

@@ -0,0 +1,41 @@
+import type { HTMLButtonAttributes } from 'svelte/elements';
+
+import { getRoot } from '../root/context.js';
+
+export interface PickerState {
+	props: HTMLButtonAttributes;
+}
+
+export function createPicker(): PickerState {
+	const root = getRoot();
+	const picker: PickerState = {
+		props: {
+			get disabled() {
+				return root.isDisabled;
+			},
+			get 'aria-controls'() {
+				return root.controlId;
+			},
+			get 'data-disabled'() {
+				return root.isDisabled ? '' : undefined;
+			},
+			type: 'button',
+			onmousedown(event) {
+				// Prevent losing focus on the input when clicking the toggle.
+				event.preventDefault();
+			},
+			onclick() {
+				if (root.isDisabled) {
+					return;
+				}
+
+				const input = document.getElementById(root.controlId) as HTMLInputElement | null;
+				if (input && 'showPicker' in input) {
+					input.showPicker();
+				}
+			},
+		},
+	};
+
+	return picker;
+}

package/src/field/date/index.ts

@@ -0,0 +1 @@
+export * from './createPicker.svelte.js';

package/src/field/error/createError.svelte.ts

@@ -0,0 +1,21 @@
+import type { HTMLAttributes } from 'svelte/elements';
+
+import { getRoot } from '../root/context.js';
+
+export interface ErrorState {
+	props: HTMLAttributes<HTMLElement>;
+}
+
+export function createError(): ErrorState {
+	const root = getRoot();
+
+	const error: ErrorState = {
+		props: {
+			get id() {
+				return root.errorId;
+			},
+		},
+	};
+
+	return error;
+}

package/src/field/error/index.ts

@@ -0,0 +1 @@
+export * from './createError.svelte.js';

package/src/field/index.ts

@@ -0,0 +1,6 @@
+export * from './date/index.js';
+export * from './error/index.js';
+export * from './input/index.js';
+export * from './label/index.js';
+export * from './password/index.js';
+export * from './root/index.js';

package/src/field/input/createInput.svelte.ts

@@ -0,0 +1,136 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+
+import { getRoot } from '../root/context.js';
+import type { RootState } from '../root/createRoot.svelte.js';
+
+export interface InputState {
+	props: HTMLInputAttributes;
+}
+
+type Control = HTMLInputElement;
+
+function isCheckboxOrRadio(
+	control: Control,
+): control is HTMLInputElement & { type: 'checkbox' | 'radio' } {
+	return control.type === 'checkbox' || control.type === 'radio';
+}
+
+function isFilled(control: Control) {
+	if (isCheckboxOrRadio(control)) {
+		return control.checked;
+	}
+	return control.value !== '';
+}
+
+function syncValidity(root: RootState, control: Control) {
+	// If the control doesn't participate in constraint validation, don't force
+	// validity state changes.
+	if (!control.willValidate) {
+		return;
+	}
+
+	const { valid } = control.validity;
+	root.isValid = valid;
+	root.isInvalid = !valid;
+}
+
+export function createInput(): InputState {
+	const root = getRoot();
+
+	return {
+		props: {
+			get id() {
+				return root.controlId;
+			},
+			get disabled() {
+				return root.isDisabled;
+			},
+			get 'aria-invalid'() {
+				return root.isInvalid ? true : undefined;
+			},
+			get 'aria-describedby'() {
+				return root.isInvalid ? root.errorId : undefined;
+			},
+			get 'data-disabled'() {
+				return root.isDisabled ? '' : undefined;
+			},
+			get 'data-valid'() {
+				return root.isValid ? '' : undefined;
+			},
+			get 'data-invalid'() {
+				return root.isInvalid ? '' : undefined;
+			},
+			get 'data-dirty'() {
+				return root.isDirty ? '' : undefined;
+			},
+			get 'data-touched'() {
+				return root.isTouched ? '' : undefined;
+			},
+			get 'data-filled'() {
+				return root.isFilled ? '' : undefined;
+			},
+			get 'data-focused'() {
+				return root.isFocused ? '' : undefined;
+			},
+			onchange(event) {
+				if (root.isDisabled) {
+					return;
+				}
+
+				const input = event.currentTarget;
+
+				root.isDirty = true;
+				root.isFilled = isFilled(input);
+				syncValidity(root, input);
+			},
+			oninput(event) {
+				if (root.isDisabled) {
+					return;
+				}
+
+				const input = event.currentTarget;
+
+				root.isDirty = true;
+				root.isFilled = isFilled(input);
+				syncValidity(root, input);
+			},
+			onfocus(event) {
+				if (root.isDisabled) {
+					return;
+				}
+
+				const input = event.currentTarget;
+
+				root.isFocused = true;
+				root.isFilled = isFilled(input);
+				syncValidity(root, input);
+			},
+			onblur(event) {
+				if (root.isDisabled) {
+					return;
+				}
+
+				const input = event.currentTarget;
+
+				root.isFocused = false;
+				root.isTouched = true;
+				root.isFilled = isFilled(input);
+				syncValidity(root, input);
+			},
+			onkeydown(event) {
+				if (root.isDisabled) {
+					return;
+				}
+				if (event.key !== 'Enter') {
+					return;
+				}
+
+				const input = event.currentTarget;
+
+				root.isTouched = true;
+				root.isFilled = isFilled(input);
+				syncValidity(root, input);
+			},
+		},
+	};
+}

package/src/field/input/index.ts

@@ -0,0 +1 @@
+export * from './createInput.svelte.js';

package/src/field/label/createLabel.svelte.ts

@@ -0,0 +1,24 @@
+import type { HTMLLabelAttributes } from 'svelte/elements';
+
+import { getRoot } from '../root/context.js';
+
+export interface LabelState {
+	props: HTMLLabelAttributes;
+}
+
+export function createLabel(): LabelState {
+	const root = getRoot();
+
+	const label: LabelState = {
+		props: {
+			get for() {
+				return root.controlId;
+			},
+			get id() {
+				return root.labelId;
+			},
+		},
+	};
+
+	return label;
+}

package/src/field/label/index.ts

@@ -0,0 +1 @@
+export * from './createLabel.svelte.js';

package/src/field/password/context.ts

@@ -0,0 +1,5 @@
+import { createContext } from 'svelte';
+
+import type { PasswordState } from './createPassword.svelte.js';
+
+export const [getPassword, setPassword] = createContext<PasswordState>();

package/src/field/password/createPassword.svelte.ts

@@ -0,0 +1,43 @@
+import { mergeProps } from '@svelte-thing/component-utils';
+import type { Exact } from '@svelte-thing/type-utils';
+
+import { type InputState, createInput } from '../input/createInput.svelte.js';
+import { setPassword } from './context.js';
+
+export interface CreatePasswordProps {
+	isVisible: boolean | null | undefined;
+	type: 'password' | null | undefined;
+}
+
+export interface PasswordState extends InputState {
+	isVisible: boolean;
+	toggle: () => void;
+}
+
+export function createPassword<T extends CreatePasswordProps>(
+	props: Exact<CreatePasswordProps, T>,
+): PasswordState {
+	let isVisible = $derived(props.isVisible ?? false);
+
+	const input = createInput();
+	const password: PasswordState = mergeProps(input, {
+		get isVisible() {
+			return isVisible;
+		},
+		set isVisible(visible) {
+			isVisible = visible;
+		},
+		toggle() {
+			isVisible = !isVisible;
+		},
+		props: {
+			get type() {
+				return isVisible ? 'text' : 'password';
+			},
+		},
+	});
+
+	setPassword(password);
+
+	return password;
+}

package/src/field/password/createShow.svelte.ts

@@ -0,0 +1,47 @@
+import type { HTMLButtonAttributes } from 'svelte/elements';
+
+import { getRoot } from '../root/context.js';
+import { getPassword } from './context.js';
+
+export interface ShowState {
+	props: HTMLButtonAttributes;
+}
+
+export function createShow(): ShowState {
+	const root = getRoot();
+	const password = getPassword();
+	const show: ShowState = {
+		props: {
+			get disabled() {
+				return root.isDisabled;
+			},
+			get 'aria-controls'() {
+				return root.controlId;
+			},
+			get 'aria-pressed'() {
+				return password.isVisible;
+			},
+			get 'data-disabled'() {
+				return root.isDisabled ? '' : undefined;
+			},
+			get 'data-visible'() {
+				return password.isVisible ? '' : undefined;
+			},
+			type: 'button',
+			onmousedown(event) {
+				// Prevent losing focus on the input when clicking the toggle.
+				event.preventDefault();
+			},
+			onclick() {
+				if (root.isDisabled) {
+					return;
+				}
+
+				password.toggle();
+				document.getElementById(root.controlId)?.focus?.();
+			},
+		},
+	};
+
+	return show;
+}

package/src/field/password/index.ts

@@ -0,0 +1,3 @@
+export * from './context.js';
+export * from './createPassword.svelte.js';
+export * from './createShow.svelte.js';

package/src/field/root/context.ts

@@ -0,0 +1,5 @@
+import { createContext } from 'svelte';
+
+import type { RootState } from './createRoot.svelte.js';
+
+export const [getRoot, setRoot] = createContext<RootState>();