@svelte-thing/primitives 0.0.1 → 0.0.2

package/dist/tab/indicator/index.mjs

@@ -1,42 +1,2 @@
-import { t as getRoot } from "../../context-DwEoOJU2.mjs";
-import { createAttachmentKey } from "svelte/attachments";
-//#region src/tab/indicator/createIndicator.svelte.ts
-function createIndicator() {
-	const root = getRoot();
-	const tabListSelector = $derived(`[data-tabs-list][id="${root.id}-list"]`);
-	const id = $derived(`${root.id}-indicator`);
-	const indicatorSelector = $derived(`[data-tabs-indicator][id="${id}"]`);
-	let resizeTick = $state(0);
-	return { props: {
-		"data-tabs-indicator": "",
-		get id() {
-			return id;
-		},
-		[createAttachmentKey()](element) {
-			const tabList = element.closest(tabListSelector);
-			if (!tabList) return;
-			const observer = new ResizeObserver(() => {
-				resizeTick += 1;
-			});
-			observer.observe(tabList);
-			return () => {
-				observer.disconnect();
-			};
-		},
-		get style() {
-			if (typeof document === "undefined") return;
-			const { value, direction, id } = root;
-			const tabList = document.querySelector(indicatorSelector)?.closest(tabListSelector) ?? null;
-			const selectedTab = tabList?.querySelector(`[data-tabs-trigger][id="${id}-trigger-${value}"]`);
-			if (!tabList || value === null || !selectedTab) return;
-			const rect = selectedTab.getBoundingClientRect();
-			const width = Math.floor(rect.width);
-			const height = Math.floor(rect.height);
-			const right = direction === "ltr" ? tabList.scrollWidth - selectedTab.offsetLeft - width - tabList.clientLeft : selectedTab.offsetLeft - tabList.clientLeft;
-			const bottom = tabList.scrollHeight - selectedTab.offsetTop - height - tabList.clientTop;
-			return `--active-tab-left: ${selectedTab.offsetLeft - tabList.clientLeft}px;--active-tab-top: ${selectedTab.offsetTop - tabList.clientTop}px;--active-tab-width: ${width}px;--active-tab-height: ${height}px;--active-tab-right: ${right}px;--active-tab-bottom: ${bottom}px;`;
-		}
-	} };
-}
-//#endregion
+import { createIndicator } from "./createIndicator.svelte.mjs";
 export { createIndicator };

package/dist/{index-CbchmhrC.d.mts → tab/list/createList.svelte.d.mts}

@@ -6,4 +6,4 @@ interface ListState {
 }
 declare function createList(): ListState;
 //#endregion
-export { createList as n, ListState as t };
+export { ListState, createList };

package/dist/tab/list/createList.svelte.mjs

@@ -0,0 +1,20 @@
+import { getRoot } from "../root/context.mjs";
+//#region src/tab/list/createList.svelte.ts
+function createList() {
+	const root = getRoot();
+	return { props: {
+		get id() {
+			return `${root.id}-list`;
+		},
+		get "aria-labelledby"() {
+			return root.hasTitle ? `${root.id}-title` : void 0;
+		},
+		get "data-orientation"() {
+			return root.orientation;
+		},
+		"data-tabs-list": "",
+		role: "tablist"
+	} };
+}
+//#endregion
+export { createList };

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

@@ -1,2 +1,2 @@
-import { n as createList, t as ListState } from "../../index-CbchmhrC.mjs";
+import { ListState, createList } from "./createList.svelte.mjs";
 export { ListState, createList };

package/dist/tab/list/index.mjs

@@ -1,20 +1,2 @@
-import { t as getRoot } from "../../context-DwEoOJU2.mjs";
-//#region src/tab/list/createList.svelte.ts
-function createList() {
-	const root = getRoot();
-	return { props: {
-		get id() {
-			return `${root.id}-list`;
-		},
-		get "aria-labelledby"() {
-			return root.hasTitle ? `${root.id}-title` : void 0;
-		},
-		get "data-orientation"() {
-			return root.orientation;
-		},
-		"data-tabs-list": "",
-		role: "tablist"
-	} };
-}
-//#endregion
+import { createList } from "./createList.svelte.mjs";
 export { createList };

package/dist/{index-D2vzMU8o.d.mts → tab/panel/createPanel.svelte.d.mts}

@@ -10,4 +10,4 @@ interface PanelState {
 }
 declare function createPanel<T extends CreatePanelProps>(props: Exact<CreatePanelProps, T>): PanelState;
 //#endregion
-export { PanelState as n, createPanel as r, CreatePanelProps as t };
+export { CreatePanelProps, PanelState, createPanel };

package/dist/tab/panel/createPanel.svelte.mjs

@@ -0,0 +1,28 @@
+import { getRoot } from "../root/context.mjs";
+//#region src/tab/panel/createPanel.svelte.ts
+function createPanel(props) {
+	const root = getRoot();
+	const isSelected = $derived(root.panel === props.value);
+	return { props: {
+		get "aria-labelledby"() {
+			return `${root.id}-trigger-${props.value}`;
+		},
+		get "data-orientation"() {
+			return root.orientation;
+		},
+		get "data-hidden"() {
+			return isSelected ? void 0 : "";
+		},
+		get hidden() {
+			return isSelected ? void 0 : "";
+		},
+		get id() {
+			return `${root.id}-panel-${props.value}`;
+		},
+		"data-tab-panel": "",
+		role: "tabpanel",
+		tabindex: 0
+	} };
+}
+//#endregion
+export { createPanel };

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

@@ -1,2 +1,2 @@
-import { n as PanelState, r as createPanel, t as CreatePanelProps } from "../../index-D2vzMU8o.mjs";
+import { CreatePanelProps, PanelState, createPanel } from "./createPanel.svelte.mjs";
 export { CreatePanelProps, PanelState, createPanel };

package/dist/tab/panel/index.mjs

@@ -1,28 +1,2 @@
-import { t as getRoot } from "../../context-DwEoOJU2.mjs";
-//#region src/tab/panel/createPanel.svelte.ts
-function createPanel(props) {
-	const root = getRoot();
-	const isSelected = $derived(root.panel === props.value);
-	return { props: {
-		get "aria-labelledby"() {
-			return `${root.id}-trigger-${props.value}`;
-		},
-		get "data-orientation"() {
-			return root.orientation;
-		},
-		get "data-hidden"() {
-			return isSelected ? void 0 : "";
-		},
-		get hidden() {
-			return isSelected ? void 0 : "";
-		},
-		get id() {
-			return `${root.id}-panel-${props.value}`;
-		},
-		"data-tab-panel": "",
-		role: "tabpanel",
-		tabindex: 0
-	} };
-}
-//#endregion
+import { createPanel } from "./createPanel.svelte.mjs";
 export { createPanel };

package/dist/tab/root/context.d.mts

@@ -0,0 +1,6 @@
+import { RootState } from "./createRoot.svelte.mjs";
+
+//#region src/tab/root/context.d.ts
+declare const getRoot: () => RootState, setRoot: (context: RootState) => RootState;
+//#endregion
+export { getRoot, setRoot };

package/dist/{context-DwEoOJU2.mjs → tab/root/context.mjs}

@@ -2,4 +2,4 @@ import { createContext } from "svelte";
 //#region src/tab/root/context.ts
 const [getRoot, setRoot] = createContext();
 //#endregion
-export { setRoot as n, getRoot as t };
+export { getRoot, setRoot };

package/dist/{index-j-8eH9nJ.d.mts → tab/root/createRoot.svelte.d.mts}

@@ -23,7 +23,4 @@ interface RootState {
 }
 declare function createRoot<T extends CreateRootProps>(props: Exact<CreateRootProps, T>): RootState;
 //#endregion
-//#region src/tab/root/context.d.ts
-declare const getRoot: () => RootState, setRoot: (context: RootState) => RootState;
-//#endregion
-export { Orientation as a, createRoot as c, Direction as i, setRoot as n, RootState as o, CreateRootProps as r, TValue as s, getRoot as t };
+export { CreateRootProps, Direction, Orientation, RootState, TValue, createRoot };

package/dist/tab/root/createRoot.svelte.mjs

@@ -0,0 +1,57 @@
+import { setRoot } from "./context.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 };

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

@@ -1,2 +1,3 @@
-import { a as Orientation, c as createRoot, i as Direction, n as setRoot, o as RootState, r as CreateRootProps, s as TValue, t as getRoot } from "../../index-j-8eH9nJ.mjs";
+import { CreateRootProps, Direction, Orientation, RootState, TValue, createRoot } from "./createRoot.svelte.mjs";
+import { getRoot, setRoot } from "./context.mjs";
 export { CreateRootProps, Direction, Orientation, RootState, TValue, createRoot, getRoot, setRoot };

package/dist/tab/root/index.mjs

@@ -1,57 +1,3 @@
-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
+import { getRoot, setRoot } from "./context.mjs";
+import { createRoot } from "./createRoot.svelte.mjs";
 export { createRoot, getRoot, setRoot };

package/dist/{index-DAHEDQQS.d.mts → tab/title/createTitle.svelte.d.mts}

@@ -6,4 +6,4 @@ interface TitleState {
 }
 declare function createTitle(): TitleState;
 //#endregion
-export { createTitle as n, TitleState as t };
+export { TitleState, createTitle };

package/dist/tab/title/createTitle.svelte.mjs

@@ -0,0 +1,18 @@
+import { getRoot } from "../root/context.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/title/index.d.mts

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

package/dist/tab/title/index.mjs

@@ -1,18 +1,2 @@
-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
+import { createTitle } from "./createTitle.svelte.mjs";
 export { createTitle };

package/dist/{index-B-PBb_8h.d.mts → tab/trigger/createTrigger.svelte.d.mts}

@@ -11,4 +11,4 @@ interface TriggerState {
 }
 declare function createTrigger<T extends CreateTriggerProps>(props: Exact<CreateTriggerProps, T>): TriggerState;
 //#endregion
-export { TriggerState as n, createTrigger as r, CreateTriggerProps as t };
+export { CreateTriggerProps, TriggerState, createTrigger };

package/dist/tab/trigger/createTrigger.svelte.mjs

@@ -0,0 +1,94 @@
+import { getRoot } from "../root/context.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/tab/trigger/index.d.mts

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

package/dist/tab/trigger/index.mjs

@@ -1,94 +1,2 @@
-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
+import { createTrigger } from "./createTrigger.svelte.mjs";
 export { createTrigger };

package/dist/table/index.d.mts

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

package/dist/table/index.mjs

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

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

@@ -0,0 +1,6 @@
+import { RowState } from "./createRow.svelte.mjs";
+
+//#region src/table/row/context.d.ts
+declare const getRow: () => RowState, setRow: (context: RowState) => RowState;
+//#endregion
+export { getRow, setRow };

package/dist/table/row/context.mjs

@@ -0,0 +1,5 @@
+import { createContext } from "svelte";
+//#region src/table/row/context.ts
+const [getRow, setRow] = createContext();
+//#endregion
+export { getRow, setRow };

package/dist/table/row/createRow.svelte.d.mts

@@ -0,0 +1,14 @@
+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
+export { CreateRowProps, RowState, createRow };

package/dist/table/row/createRow.svelte.mjs

@@ -0,0 +1,14 @@
+import { setRow } from "./context.mjs";
+//#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 };

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

@@ -1,17 +1,3 @@
-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
+import { CreateRowProps, RowState, createRow } from "./createRow.svelte.mjs";
+import { getRow, setRow } from "./context.mjs";
 export { CreateRowProps, RowState, createRow, getRow, setRow };