@svelte-thing/primitives 0.0.0

package/dist/menu/item/index.mjs

@@ -0,0 +1,86 @@
+import { t as getRoot } from "../../context-BJAwVB1S.mjs";
+import { flushSync } from "svelte";
+import { uid } from "uid";
+import { createAttachmentKey } from "svelte/attachments";
+//#region src/menu/item/createItem.svelte.ts
+function createItem(props) {
+	const root = getRoot();
+	const itemId = $derived(props.id ?? `menuitem-${uid()}`);
+	return { props: {
+		"data-menu-item": "",
+		get "aria-disabled"() {
+			return props.disabled ? "true" : void 0;
+		},
+		get "data-disabled"() {
+			return props.disabled ? "" : void 0;
+		},
+		get "data-id"() {
+			return itemId;
+		},
+		get "data-root-id"() {
+			return root.id;
+		},
+		get id() {
+			return itemId;
+		},
+		get tabindex() {
+			return root.highlightedItemId === itemId ? 0 : -1;
+		},
+		onkeydown(event) {
+			if (event.ctrlKey || event.metaKey || event.altKey || event.shiftKey) return;
+			let preventDefault = false;
+			let pendingHighlighted = null;
+			const item = event.currentTarget;
+			const items = [...document.querySelectorAll(`[data-menu-item][data-root-id="${root.id}"]:not([data-disabled])`)];
+			const currentIndex = items.indexOf(item);
+			const nextKeyName = root.orientation === "horizontal" ? "ArrowRight" : "ArrowDown";
+			const previousKeyName = root.orientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
+			switch (event.key) {
+				case previousKeyName:
+					pendingHighlighted = items[currentIndex === 0 ? items.length - 1 : currentIndex - 1]?.dataset.id ?? null;
+					preventDefault = true;
+					break;
+				case nextKeyName:
+					pendingHighlighted = items[(currentIndex + 1) % items.length]?.dataset.id ?? null;
+					preventDefault = true;
+					break;
+				case "Home":
+					pendingHighlighted = items[0]?.dataset.id ?? null;
+					preventDefault = true;
+					break;
+				case "End":
+					pendingHighlighted = items.at(-1)?.dataset.id ?? null;
+					preventDefault = true;
+					break;
+				default: break;
+			}
+			if (pendingHighlighted !== null) {
+				root.highlightedItemId = pendingHighlighted;
+				flushSync();
+				items.find((el) => el.dataset.id === pendingHighlighted)?.focus();
+			}
+			if (preventDefault) {
+				event.stopPropagation();
+				event.preventDefault();
+			}
+		},
+		onmouseover: (event) => {
+			if (root.shouldHighlightOnHover) {
+				root.highlightedItemId = itemId;
+				flushSync();
+				event.currentTarget.focus();
+			}
+		},
+		onmouseleave: () => {
+			if (root.shouldHighlightOnHover && root.highlightedItemId === itemId) root.highlightedItemId = null;
+		},
+		role: "menuitem",
+		[createAttachmentKey()]: () => {
+			return () => {
+				if (root.highlightedItemId === itemId) root.highlightedItemId = null;
+			};
+		}
+	} };
+}
+//#endregion
+export { createItem };

package/dist/menu/popup/index.d.mts

@@ -0,0 +1,19 @@
+import { HTMLAttributes } from "svelte/elements";
+
+//#region src/menu/popup/createPopup.svelte.d.ts
+type Side = 'left' | 'right' | 'bottom' | 'top' | 'inline-end' | 'inline-start';
+type Align = 'start' | 'end' | 'center';
+interface CreatePopupProps {
+  popover: HTMLAttributes<HTMLElement>['popover'] | null | undefined;
+  align: Align | undefined;
+  side: Side | undefined;
+  alignOffset: number | undefined;
+  positionAnchor: string | null | undefined;
+  sideOffset: number | undefined;
+}
+interface PopupState {
+  props: HTMLAttributes<HTMLElement>;
+}
+declare function createPopup(props: CreatePopupProps): PopupState;
+//#endregion
+export { CreatePopupProps, PopupState, createPopup };

package/dist/menu/popup/index.mjs

@@ -0,0 +1,121 @@
+import { t as getRoot } from "../../context-BJAwVB1S.mjs";
+import { flushSync, untrack } from "svelte";
+import { createAttachmentKey } from "svelte/attachments";
+import { assertNever } from "@svelte-thing/type-utils";
+import { on } from "svelte/events";
+//#region src/menu/popup/createPopup.svelte.ts
+function createPopup(props) {
+	const root = getRoot();
+	return { props: {
+		"data-menu-popup": "",
+		get "data-root-id"() {
+			return root.id;
+		},
+		get "data-open"() {
+			return root.isOpen ? "" : void 0;
+		},
+		get "data-closed"() {
+			return root.isOpen ? void 0 : "";
+		},
+		get "data-side"() {
+			return props.side ?? "bottom";
+		},
+		get "data-align"() {
+			return props.align ?? "center";
+		},
+		get popover() {
+			return props.popover ?? "";
+		},
+		get id() {
+			return root.popupId;
+		},
+		get style() {
+			const positionAnchor = props.positionAnchor === void 0 ? root.anchorName : props.positionAnchor;
+			const styles = [positionAnchor === null ? void 0 : `position-anchor: ${positionAnchor}`, `justify-self: anchor-${props.align ?? "center"}`];
+			const side = props.side ?? "bottom";
+			const sideOffset = props.sideOffset ?? 0;
+			if (side === "bottom") styles.push(`top: calc(anchor(bottom) + ${sideOffset}px);`);
+			else if (side === "top") styles.push(`bottom: calc(anchor(top) + ${sideOffset}px);`);
+			else if (side === "left") styles.push(`right: calc(anchor(left) + ${sideOffset}px);`);
+			else if (side === "right") styles.push(`left: calc(anchor(right) + ${sideOffset}px);`);
+			else if (side === "inline-end") styles.push(`inset-inline-end: calc(anchor(end) + ${sideOffset}px);`);
+			else if (side === "inline-start") styles.push(`inset-inline-start: calc(anchor(start) + ${sideOffset}px);`);
+			else assertNever(side);
+			return styles.filter(Boolean).join("; ");
+		},
+		get tabindex() {
+			return root.isOpen ? -1 : void 0;
+		},
+		[createAttachmentKey()](element) {
+			const update = (event) => {
+				if (event && event.newState !== "open") return;
+				root.isOpen = event ? true : element.matches(":popover-open");
+				flushSync();
+				if (root.isOpen) element.focus();
+			};
+			const open = () => {
+				element.showPopover();
+			};
+			const close = () => {
+				element.hidePopover();
+			};
+			root.open = open;
+			root.close = close;
+			$effect(() => {
+				if (root._propIsOpen === true && !element.matches(":popover-open")) element.showPopover();
+				else if (root._propIsOpen === false && element.matches(":popover-open")) element.hidePopover();
+				untrack(() => {
+					update();
+				});
+			});
+			update();
+			const offBefore = on(element, "beforetoggle", update);
+			const offAfter = on(element, "toggle", update);
+			return () => {
+				offBefore();
+				offAfter();
+				root.open = () => {
+					throw new Error("Attempted to open before popup initialization");
+				};
+				root.close = () => {
+					throw new Error("Attempted to close before popup initialization");
+				};
+			};
+		},
+		onkeydown(event) {
+			if (event.ctrlKey || event.metaKey || event.altKey || event.shiftKey) return;
+			const popup = event.currentTarget;
+			if (document.activeElement !== popup) return;
+			let preventDefault = false;
+			let pendingHighlighted = null;
+			const items = [...document.querySelectorAll(`[data-menu-item][data-root-id="${root.id}"]:not([data-disabled])`)];
+			const nextKeyName = root.orientation === "horizontal" ? "ArrowRight" : "ArrowDown";
+			const previousKeyName = root.orientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
+			switch (event.key) {
+				case previousKeyName:
+				case "End":
+					pendingHighlighted = items.at(-1)?.dataset.id ?? null;
+					preventDefault = true;
+					break;
+				case nextKeyName:
+				case "Home":
+					pendingHighlighted = items[0]?.dataset.id ?? null;
+					preventDefault = true;
+					break;
+				default: break;
+			}
+			if (pendingHighlighted !== null) {
+				root.highlightedItemId = pendingHighlighted;
+				flushSync();
+				items.find((el) => el.dataset.id === pendingHighlighted)?.focus();
+			}
+			if (preventDefault) {
+				event.stopPropagation();
+				event.preventDefault();
+			}
+		},
+		role: "menu"
+	} };
+}
+//#endregion
+export { createPopup };

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

@@ -0,0 +1,28 @@
+//#region src/menu/root/createRoot.svelte.d.ts
+type Orientation = 'horizontal' | 'vertical';
+interface CreateRootProps {
+  anchorName: string | undefined;
+  id: string | null | undefined;
+  isOpen: boolean | undefined;
+  orientation: Orientation | undefined;
+  shouldHighlightOnHover: boolean | undefined;
+}
+interface RootState {
+  anchorName: string;
+  close: () => void;
+  highlightedItemId: string | null;
+  id: string;
+  isOpen: boolean;
+  open: () => void;
+  orientation: Orientation;
+  popupId: string;
+  shouldHighlightOnHover: boolean;
+  triggerId: string;
+  _propIsOpen: boolean | undefined;
+}
+declare function createRoot(props: CreateRootProps): RootState;
+//#endregion
+//#region src/menu/root/context.d.ts
+declare const getRoot: () => RootState, setRoot: (context: RootState) => RootState;
+//#endregion
+export { CreateRootProps, Orientation, RootState, createRoot, getRoot, setRoot };

package/dist/menu/root/index.mjs

@@ -0,0 +1,69 @@
+import { n as setRoot, t as getRoot } from "../../context-BJAwVB1S.mjs";
+import { uid } from "uid";
+//#region src/menu/root/createRoot.svelte.ts
+function createRoot(props) {
+	const id = $derived(props.id ?? uid());
+	const anchorName = $derived(props.anchorName ?? `--${id}-anchor`);
+	const popupId = $derived(`${id}-popup`);
+	const triggerId = $derived(`${id}-trigger`);
+	const orientation = $derived(props.orientation ?? "vertical");
+	let isOpen = $state(false);
+	let highlightedItemId = $state(null);
+	let open = () => {
+		throw new Error("Attempted to open before popup initialization");
+	};
+	let close = () => {
+		throw new Error("Attempted to close before popup initialization");
+	};
+	const root = {
+		get anchorName() {
+			return anchorName;
+		},
+		get highlightedItemId() {
+			return highlightedItemId;
+		},
+		set highlightedItemId(value) {
+			highlightedItemId = value;
+		},
+		get id() {
+			return id;
+		},
+		get isOpen() {
+			return isOpen;
+		},
+		set isOpen(value) {
+			isOpen = value;
+		},
+		get orientation() {
+			return orientation;
+		},
+		get popupId() {
+			return popupId;
+		},
+		get shouldHighlightOnHover() {
+			return props.shouldHighlightOnHover ?? true;
+		},
+		get _propIsOpen() {
+			return props.isOpen;
+		},
+		get triggerId() {
+			return triggerId;
+		},
+		get close() {
+			return close;
+		},
+		set close(value) {
+			close = value;
+		},
+		get open() {
+			return open;
+		},
+		set open(value) {
+			open = value;
+		}
+	};
+	setRoot(root);
+	return root;
+}
+//#endregion
+export { createRoot, getRoot, setRoot };

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

@@ -0,0 +1,13 @@
+import { Exact } from "@svelte-thing/type-utils";
+import { HTMLButtonAttributes } from "svelte/elements";
+
+//#region src/menu/trigger/createTrigger.svelte.d.ts
+interface CreateTriggerProps {
+  anchorName: string | null | undefined;
+}
+interface TriggerState {
+  props: HTMLButtonAttributes;
+}
+declare function createTrigger<T extends CreateTriggerProps>(props: Exact<CreateTriggerProps, T>): TriggerState;
+//#endregion
+export { CreateTriggerProps, TriggerState, createTrigger };

package/dist/menu/trigger/index.mjs

@@ -0,0 +1,27 @@
+import { t as getRoot } from "../../context-BJAwVB1S.mjs";
+//#region src/menu/trigger/createTrigger.svelte.ts
+function createTrigger(props) {
+	const root = getRoot();
+	return { props: {
+		"data-menu-trigger": "",
+		get "data-root-id"() {
+			return root.id;
+		},
+		get commandfor() {
+			return root.popupId;
+		},
+		get command() {
+			return "toggle-popover";
+		},
+		get id() {
+			return root.triggerId;
+		},
+		get style() {
+			const anchorName = props.anchorName === void 0 ? root.anchorName : props.anchorName;
+			if (anchorName === null) return;
+			return `anchor-name: ${anchorName};`;
+		}
+	} };
+}
+//#endregion
+export { createTrigger };

package/dist/pagination/content/index.d.mts

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from "svelte/elements";
+
+//#region src/pagination/content/createContent.svelte.d.ts
+interface ContentState {
+  props: HTMLAttributes<HTMLUListElement>;
+}
+declare function createContent(): ContentState;
+//#endregion
+export { ContentState, createContent };

package/dist/pagination/content/index.mjs

@@ -0,0 +1,6 @@
+//#region src/pagination/content/createContent.svelte.ts
+function createContent() {
+	return { props: {} };
+}
+//#endregion
+export { createContent };

package/dist/pagination/ellipsis/index.d.mts

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from "svelte/elements";
+
+//#region src/pagination/ellipsis/createEllipsis.svelte.d.ts
+interface EllipsisState {
+  props: HTMLAttributes<HTMLSpanElement>;
+}
+declare function createEllipsis(): EllipsisState;
+//#endregion
+export { EllipsisState, createEllipsis };

package/dist/pagination/ellipsis/index.mjs

@@ -0,0 +1,6 @@
+//#region src/pagination/ellipsis/createEllipsis.svelte.ts
+function createEllipsis() {
+	return { props: { "aria-hidden": true } };
+}
+//#endregion
+export { createEllipsis };

package/dist/pagination/index.d.mts

@@ -0,0 +1,6 @@
+import { ContentState, createContent } from "./content/index.mjs";
+import { EllipsisState, createEllipsis } from "./ellipsis/index.mjs";
+import { ItemState, createItem } from "./item/index.mjs";
+import { CreateLinkProps, LinkState, createLink } from "./link/index.mjs";
+import { RootState, createRoot } from "./root/index.mjs";
+export { ContentState, CreateLinkProps, EllipsisState, ItemState, LinkState, RootState, createContent, createEllipsis, createItem, createLink, createRoot };

package/dist/pagination/index.mjs

@@ -0,0 +1,6 @@
+import { createContent } from "./content/index.mjs";
+import { createEllipsis } from "./ellipsis/index.mjs";
+import { createItem } from "./item/index.mjs";
+import { createLink } from "./link/index.mjs";
+import { createRoot } from "./root/index.mjs";
+export { createContent, createEllipsis, createItem, createLink, createRoot };

package/dist/pagination/item/index.d.mts

@@ -0,0 +1,9 @@
+import { HTMLLiAttributes } from "svelte/elements";
+
+//#region src/pagination/item/createItem.svelte.d.ts
+interface ItemState {
+  props: HTMLLiAttributes;
+}
+declare function createItem(): ItemState;
+//#endregion
+export { ItemState, createItem };

package/dist/pagination/item/index.mjs

@@ -0,0 +1,6 @@
+//#region src/pagination/item/createItem.svelte.ts
+function createItem() {
+	return { props: {} };
+}
+//#endregion
+export { createItem };

package/dist/pagination/link/index.d.mts

@@ -0,0 +1,13 @@
+import { Exact } from "@svelte-thing/type-utils";
+import { HTMLAnchorAttributes } from "svelte/elements";
+
+//#region src/pagination/link/createLink.svelte.d.ts
+interface CreateLinkProps {
+  isActive?: boolean | null | undefined;
+}
+interface LinkState {
+  props: HTMLAnchorAttributes;
+}
+declare function createLink<T extends CreateLinkProps>(props: Exact<CreateLinkProps, T>): LinkState;
+//#endregion
+export { CreateLinkProps, LinkState, createLink };

package/dist/pagination/link/index.mjs

@@ -0,0 +1,13 @@
+//#region src/pagination/link/createLink.svelte.ts
+function createLink(props) {
+	return { props: {
+		get "aria-current"() {
+			return props.isActive ? "page" : void 0;
+		},
+		get "data-active"() {
+			return props.isActive;
+		}
+	} };
+}
+//#endregion
+export { createLink };

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

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from "svelte/elements";
+
+//#region src/pagination/root/createRoot.svelte.d.ts
+interface RootState {
+  props: HTMLAttributes<HTMLElement>;
+}
+declare function createRoot(): RootState;
+//#endregion
+export { RootState, createRoot };

package/dist/pagination/root/index.mjs

@@ -0,0 +1,9 @@
+//#region src/pagination/root/createRoot.svelte.ts
+function createRoot() {
+	return { props: {
+		"aria-label": "pagination",
+		role: "navigation"
+	} };
+}
+//#endregion
+export { createRoot };

package/dist/tab/index.d.mts

@@ -0,0 +1,13 @@
+import { n as createIndicator, t as IndicatorState } from "../index-07sbgO0w.mjs";
+import { n as createList, t as ListState } from "../index-CbchmhrC.mjs";
+import { n as PanelState, r as createPanel, t as CreatePanelProps } from "../index-D2vzMU8o.mjs";
+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 { n as createTitle, t as TitleState } from "../index-DAHEDQQS.mjs";
+import { n as TriggerState, r as createTrigger, t as CreateTriggerProps } from "../index-B-PBb_8h.mjs";
+
+//#region src/tab/index.d.ts
+declare namespace index_d_exports {
+  export { CreatePanelProps, CreateRootProps, CreateTriggerProps, Direction, IndicatorState, ListState, Orientation, PanelState, RootState, TValue, TitleState, TriggerState, createIndicator, createList, createPanel, createRoot, createTitle, createTrigger, getRoot, setRoot };
+}
+//#endregion
+export { CreatePanelProps, CreateRootProps, CreateTriggerProps, Direction, IndicatorState, ListState, Orientation, PanelState, RootState, TValue, TitleState, TriggerState, createIndicator, createList, createPanel, createRoot, createTitle, createTrigger, getRoot, setRoot, index_d_exports as t };

package/dist/tab/index.mjs

@@ -0,0 +1,21 @@
+import { t as __exportAll } from "../chunk-D7D4PA-g.mjs";
+import { n as setRoot, t as getRoot } from "../context-DwEoOJU2.mjs";
+import { createIndicator } from "./indicator/index.mjs";
+import { createList } from "./list/index.mjs";
+import { createPanel } from "./panel/index.mjs";
+import { createRoot } from "./root/index.mjs";
+import { createTitle } from "./title/index.mjs";
+import { createTrigger } from "./trigger/index.mjs";
+//#region src/tab/index.ts
+var tab_exports = /* @__PURE__ */ __exportAll({
+	createIndicator: () => createIndicator,
+	createList: () => createList,
+	createPanel: () => createPanel,
+	createRoot: () => createRoot,
+	createTitle: () => createTitle,
+	createTrigger: () => createTrigger,
+	getRoot: () => getRoot,
+	setRoot: () => setRoot
+});
+//#endregion
+export { createIndicator, createList, createPanel, createRoot, createTitle, createTrigger, getRoot, setRoot, tab_exports as t };

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

@@ -0,0 +1,2 @@
+import { n as createIndicator, t as IndicatorState } from "../../index-07sbgO0w.mjs";
+export { IndicatorState, createIndicator };

package/dist/tab/indicator/index.mjs

@@ -0,0 +1,42 @@
+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
+export { createIndicator };

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

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

package/dist/tab/list/index.mjs

@@ -0,0 +1,20 @@
+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
+export { createList };

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

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

package/dist/tab/panel/index.mjs

@@ -0,0 +1,28 @@
+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
+export { createPanel };

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

@@ -0,0 +1,2 @@
+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";
+export { CreateRootProps, Direction, Orientation, RootState, TValue, createRoot, getRoot, setRoot };