@svelte-thing/primitives 0.0.0 → 0.0.2

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

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

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

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

package/dist/menu/root/index.mjs

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

package/dist/menu/trigger/createTrigger.svelte.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/createTrigger.svelte.mjs

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

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

package/dist/menu/trigger/index.mjs

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

package/dist/pagination/content/createContent.svelte.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/createContent.svelte.mjs

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

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

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

package/dist/pagination/content/index.mjs

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

package/dist/pagination/ellipsis/createEllipsis.svelte.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/createEllipsis.svelte.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/ellipsis/index.d.mts

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

package/dist/pagination/ellipsis/index.mjs

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

package/dist/pagination/index.d.mts

@@ -1,6 +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";
+import { ContentState, createContent } from "./content/createContent.svelte.mjs";
+import { EllipsisState, createEllipsis } from "./ellipsis/createEllipsis.svelte.mjs";
+import { ItemState, createItem } from "./item/createItem.svelte.mjs";
+import { CreateLinkProps, LinkState, createLink } from "./link/createLink.svelte.mjs";
+import { RootState, createRoot } from "./root/createRoot.svelte.mjs";
 export { ContentState, CreateLinkProps, EllipsisState, ItemState, LinkState, RootState, createContent, createEllipsis, createItem, createLink, createRoot };

package/dist/pagination/index.mjs

@@ -1,6 +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";
+import { createContent } from "./content/createContent.svelte.mjs";
+import { createEllipsis } from "./ellipsis/createEllipsis.svelte.mjs";
+import { createItem } from "./item/createItem.svelte.mjs";
+import { createLink } from "./link/createLink.svelte.mjs";
+import { createRoot } from "./root/createRoot.svelte.mjs";
 export { createContent, createEllipsis, createItem, createLink, createRoot };

package/dist/pagination/item/createItem.svelte.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/createItem.svelte.mjs

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

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

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

package/dist/pagination/item/index.mjs

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

package/dist/pagination/link/createLink.svelte.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/createLink.svelte.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/link/index.d.mts

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

package/dist/pagination/link/index.mjs

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

package/dist/pagination/root/createRoot.svelte.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/createRoot.svelte.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/pagination/root/index.d.mts

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

package/dist/pagination/root/index.mjs

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

package/dist/tab/index.d.mts

@@ -1,13 +1,12 @@
-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
+import { IndicatorState, createIndicator } from "./indicator/createIndicator.svelte.mjs";
+import { ListState, createList } from "./list/createList.svelte.mjs";
+import { CreatePanelProps, PanelState, createPanel } from "./panel/createPanel.svelte.mjs";
+import { CreateRootProps, Direction, Orientation, RootState, TValue, createRoot } from "./root/createRoot.svelte.mjs";
+import { getRoot, setRoot } from "./root/context.mjs";
+import { TitleState, createTitle } from "./title/createTitle.svelte.mjs";
+import { CreateTriggerProps, TriggerState, createTrigger } from "./trigger/createTrigger.svelte.mjs";
 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 };
+export { CreatePanelProps, CreateRootProps, CreateTriggerProps, Direction, IndicatorState, ListState, Orientation, PanelState, RootState, TValue, TitleState, TriggerState, createIndicator, createList, createPanel, createRoot, createTitle, createTrigger, getRoot, index_d_exports, setRoot };

package/dist/tab/index.mjs

@@ -1,11 +1,17 @@
-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";
+import { __exportAll } from "../_virtual/_rolldown/runtime.mjs";
+import { getRoot, setRoot } from "./root/context.mjs";
+import { createIndicator } from "./indicator/createIndicator.svelte.mjs";
+import "./indicator/index.mjs";
+import { createList } from "./list/createList.svelte.mjs";
+import "./list/index.mjs";
+import { createPanel } from "./panel/createPanel.svelte.mjs";
+import "./panel/index.mjs";
+import { createRoot } from "./root/createRoot.svelte.mjs";
+import "./root/index.mjs";
+import { createTitle } from "./title/createTitle.svelte.mjs";
+import "./title/index.mjs";
+import { createTrigger } from "./trigger/createTrigger.svelte.mjs";
+import "./trigger/index.mjs";
 //#region src/tab/index.ts
 var tab_exports = /* @__PURE__ */ __exportAll({
 	createIndicator: () => createIndicator,
@@ -18,4 +24,4 @@ var tab_exports = /* @__PURE__ */ __exportAll({
 	setRoot: () => setRoot
 });
 //#endregion
-export { createIndicator, createList, createPanel, createRoot, createTitle, createTrigger, getRoot, setRoot, tab_exports as t };
+export { createIndicator, createList, createPanel, createRoot, createTitle, createTrigger, getRoot, setRoot, tab_exports };

package/dist/{index-07sbgO0w.d.mts → tab/indicator/createIndicator.svelte.d.mts}

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

package/dist/tab/indicator/createIndicator.svelte.mjs

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

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