@rebasepro/ui 0.24.0 → 0.24.1-canary.gcb918fc

package/dist/hooks/UiLabelsContext.es.js

@@ -0,0 +1,59 @@
+"use client";
+import { createContext, useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/hooks/UiLabelsContext.tsx
+/** The English labels: exactly the strings the kit rendered before it took any. */
+var defaultUiLabels = {
+	errorLoadingData: (message) => `Error loading data: ${message}`,
+	noEntriesFound: "No entries found",
+	allEntriesLoaded: (count) => `All ${count} entries loaded`,
+	error: "Error",
+	search: "Search",
+	clearSearch: "Clear search",
+	select: "Select",
+	openTimePicker: "Open time picker",
+	relativeTime: {
+		justNow: "just now",
+		inAMoment: "in a moment",
+		minutesAgo: (count) => `${count}m ago`,
+		inMinutes: (count) => `in ${count}m`,
+		hoursAgo: (count) => `${count}h ago`,
+		inHours: (count) => `in ${count}h`,
+		daysAgo: (count) => `${count}d ago`,
+		inDays: (count) => `in ${count}d`
+	}
+};
+var UiLabelsContext = createContext(defaultUiLabels);
+/**
+* Gives the kit's own words in another language. `@rebasepro/app` mounts one
+* filled from its translations; without a provider the kit speaks English.
+*
+* @example
+* ```tsx
+* <UiLabelsProvider labels={{ noEntriesFound: "Nessun elemento" }}>
+*   <ListView …/>
+* </UiLabelsProvider>
+* ```
+*/
+function UiLabelsProvider({ labels, children }) {
+	const value = useMemo(() => ({
+		...defaultUiLabels,
+		...labels,
+		relativeTime: {
+			...defaultUiLabels.relativeTime,
+			...labels.relativeTime
+		}
+	}), [labels]);
+	return /* @__PURE__ */ jsx(UiLabelsContext.Provider, {
+		value,
+		children
+	});
+}
+/** The labels in effect: the nearest {@link UiLabelsProvider}'s, or English. */
+function useUiLabels() {
+	return useContext(UiLabelsContext);
+}
+//#endregion
+export { UiLabelsProvider, defaultUiLabels, useUiLabels };
+
+//# sourceMappingURL=UiLabelsContext.es.js.map

package/dist/hooks/UiLabelsContext.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UiLabelsContext.es.js","names":[],"sources":["../../src/hooks/UiLabelsContext.tsx"],"sourcesContent":["\"use client\";\nimport React, { createContext, useContext, useMemo } from \"react\";\n\n/**\n * The words the kit itself puts on screen: the list and card views' notices,\n * the table's error title, the search bar's names, and the relative-time\n * phrases of `formatRelativeTime` (`@rebasepro/utils`).\n *\n * A label that carries a value is a function of it, so a translation can\n * choose its own plural form.\n */\nexport interface UiLabels {\n    /** A list or card view that could not load its first page: \"Error loading data: <message>\". */\n    errorLoadingData: (message: string) => string;\n    /** A list or card view with no rows. */\n    noEntriesFound: string;\n    /** Under the last row of a list or card view: \"All <count> entries loaded\". */\n    allEntriesLoaded: (count: number) => string;\n    /** The title of a table that could not load its rows. */\n    error: string;\n    /** The search bar's name, and its placeholder when none is given. */\n    search: string;\n    /** The search bar's clear button. */\n    clearSearch: string;\n    /** A row's or card's selection checkbox in the collection views. */\n    select: string;\n    /** The button that opens a time-of-day field's picker (`DateTimeField mode=\"time\"`). */\n    openTimePicker: string;\n    /** The phrases `formatRelativeTime` (`@rebasepro/utils`) takes as `labels`. */\n    relativeTime: UiRelativeTimeLabels;\n}\n\n/** Relative-time phrases, as `formatRelativeTime`'s `labels` option takes them. */\nexport interface UiRelativeTimeLabels {\n    justNow: string;\n    inAMoment: string;\n    minutesAgo: (count: number) => string;\n    inMinutes: (count: number) => string;\n    hoursAgo: (count: number) => string;\n    inHours: (count: number) => string;\n    daysAgo: (count: number) => string;\n    inDays: (count: number) => string;\n}\n\n/** The English labels: exactly the strings the kit rendered before it took any. */\nexport const defaultUiLabels: UiLabels = {\n    errorLoadingData: (message) => `Error loading data: ${message}`,\n    noEntriesFound: \"No entries found\",\n    allEntriesLoaded: (count) => `All ${count} entries loaded`,\n    error: \"Error\",\n    search: \"Search\",\n    clearSearch: \"Clear search\",\n    select: \"Select\",\n    openTimePicker: \"Open time picker\",\n    relativeTime: {\n        justNow: \"just now\",\n        inAMoment: \"in a moment\",\n        minutesAgo: (count) => `${count}m ago`,\n        inMinutes: (count) => `in ${count}m`,\n        hoursAgo: (count) => `${count}h ago`,\n        inHours: (count) => `in ${count}h`,\n        daysAgo: (count) => `${count}d ago`,\n        inDays: (count) => `in ${count}d`\n    }\n};\n\nconst UiLabelsContext = createContext<UiLabels>(defaultUiLabels);\n\nexport interface UiLabelsProviderProps {\n    /** The labels to use; any left out keep their English default. */\n    labels: Partial<Omit<UiLabels, \"relativeTime\">> & { relativeTime?: Partial<UiRelativeTimeLabels> };\n    children: React.ReactNode;\n}\n\n/**\n * Gives the kit's own words in another language. `@rebasepro/app` mounts one\n * filled from its translations; without a provider the kit speaks English.\n *\n * @example\n * ```tsx\n * <UiLabelsProvider labels={{ noEntriesFound: \"Nessun elemento\" }}>\n *   <ListView …/>\n * </UiLabelsProvider>\n * ```\n */\nexport function UiLabelsProvider({ labels, children }: UiLabelsProviderProps) {\n    const value = useMemo((): UiLabels => ({\n        ...defaultUiLabels,\n        ...labels,\n        relativeTime: { ...defaultUiLabels.relativeTime, ...labels.relativeTime }\n    }), [labels]);\n    return <UiLabelsContext.Provider value={value}>{children}</UiLabelsContext.Provider>;\n}\n\n/** The labels in effect: the nearest {@link UiLabelsProvider}'s, or English. */\nexport function useUiLabels(): UiLabels {\n    return useContext(UiLabelsContext);\n}\n"],"mappings":";;;;;AA6CA,IAAa,kBAA4B;CACrC,mBAAmB,YAAY,uBAAuB;CACtD,gBAAgB;CAChB,mBAAmB,UAAU,OAAO,MAAM;CAC1C,OAAO;CACP,QAAQ;CACR,aAAa;CACb,QAAQ;CACR,gBAAgB;CAChB,cAAc;EACV,SAAS;EACT,WAAW;EACX,aAAa,UAAU,GAAG,MAAM;EAChC,YAAY,UAAU,MAAM,MAAM;EAClC,WAAW,UAAU,GAAG,MAAM;EAC9B,UAAU,UAAU,MAAM,MAAM;EAChC,UAAU,UAAU,GAAG,MAAM;EAC7B,SAAS,UAAU,MAAM,MAAM;CACnC;AACJ;AAEA,IAAM,kBAAkB,cAAwB,eAAe;;;;;;;;;;;;AAmB/D,SAAgB,iBAAiB,EAAE,QAAQ,YAAmC;CAC1E,MAAM,QAAQ,eAAyB;EACnC,GAAG;EACH,GAAG;EACH,cAAc;GAAE,GAAG,gBAAgB;GAAc,GAAG,OAAO;EAAa;CAC5E,IAAI,CAAC,MAAM,CAAC;CACZ,OAAO,oBAAC,gBAAgB,UAAjB;EAAiC;EAAQ;CAAmC,CAAA;AACvF;;AAGA,SAAgB,cAAwB;CACpC,OAAO,WAAW,eAAe;AACrC"}

package/dist/hooks/useDebounceCallback.es.js

@@ -0,0 +1,15 @@
+import { useCallback, useRef } from "react";
+//#region src/hooks/useDebounceCallback.tsx
+function useDebounceCallback(callback, delay) {
+	const timeoutRef = useRef(null);
+	return useCallback((...args) => {
+		if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);
+		timeoutRef.current = window.setTimeout(() => {
+			callback?.(...args);
+		}, delay ?? 200);
+	}, [callback, delay]);
+}
+//#endregion
+export { useDebounceCallback };
+
+//# sourceMappingURL=useDebounceCallback.es.js.map

package/dist/hooks/useDebounceCallback.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDebounceCallback.es.js","names":[],"sources":["../../src/hooks/useDebounceCallback.tsx"],"sourcesContent":["import { useCallback, useRef } from \"react\";\n\n\nexport function useDebounceCallback<T extends (...args: any[]) => unknown>(\n    callback?: T,\n    delay?: number\n): T {\n    const timeoutRef = useRef<number | null>(null);\n\n    const debouncedCallback = useCallback((...args: Parameters<T>) => {\n        if (timeoutRef.current !== null) {\n            clearTimeout(timeoutRef.current);\n        }\n\n        timeoutRef.current = window.setTimeout(() => {\n            callback?.(...args);\n        }, delay ?? 200);\n    }, [callback, delay]);\n\n    return debouncedCallback as T;\n}\n"],"mappings":";;AAGA,SAAgB,oBACZ,UACA,OACC;CACD,MAAM,aAAa,OAAsB,IAAI;CAY7C,OAV0B,aAAa,GAAG,SAAwB;EAC9D,IAAI,WAAW,YAAY,MACvB,aAAa,WAAW,OAAO;EAGnC,WAAW,UAAU,OAAO,iBAAiB;GACzC,WAAW,GAAG,IAAI;EACtB,GAAG,SAAS,GAAG;CACnB,GAAG,CAAC,UAAU,KAAK,CAEZ;AACX"}

package/dist/hooks/useDebounceValue.es.js

@@ -0,0 +1,19 @@
+"use client";
+import { useEffect, useState } from "react";
+//#region src/hooks/useDebounceValue.tsx
+function useDebounceValue(value, delay = 300) {
+	const [debouncedValue, setDebouncedValue] = useState(value);
+	useEffect(() => {
+		const handler = setTimeout(() => {
+			setDebouncedValue(value);
+		}, delay);
+		return () => {
+			clearTimeout(handler);
+		};
+	}, [value, delay]);
+	return debouncedValue;
+}
+//#endregion
+export { useDebounceValue };
+
+//# sourceMappingURL=useDebounceValue.es.js.map

package/dist/hooks/useDebounceValue.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDebounceValue.es.js","names":[],"sources":["../../src/hooks/useDebounceValue.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\nexport function useDebounceValue<T>(value: T, delay = 300): T {\n    // State and setters for debounced value\n    const [debouncedValue, setDebouncedValue] = useState(value);\n    useEffect(\n        () => {\n            const handler = setTimeout(() => {\n                setDebouncedValue(value);\n            }, delay);\n            return () => {\n                clearTimeout(handler);\n            };\n        },\n        [value, delay] // Only re-call effect if value or delay changes\n    );\n    return debouncedValue;\n}\n"],"mappings":";;;AAIA,SAAgB,iBAAoB,OAAU,QAAQ,KAAQ;CAE1D,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,KAAK;CAC1D,gBACU;EACF,MAAM,UAAU,iBAAiB;GAC7B,kBAAkB,KAAK;EAC3B,GAAG,KAAK;EACR,aAAa;GACT,aAAa,OAAO;EACxB;CACJ,GACA,CAAC,OAAO,KAAK,CACjB;CACA,OAAO;AACX"}

package/dist/hooks/useDebouncedCallback.es.js

@@ -0,0 +1,36 @@
+import React from "react";
+//#region src/hooks/useDebouncedCallback.ts
+function useDebouncedCallback(value, callback, immediate, timeoutMs = 300) {
+	const pendingUpdate = React.useRef(false);
+	const callbackRef = React.useRef(callback);
+	React.useEffect(() => {
+		callbackRef.current = callback;
+	}, [callback]);
+	const performUpdate = React.useCallback(() => {
+		callbackRef.current();
+		pendingUpdate.current = false;
+	}, []);
+	const handlerRef = React.useRef(void 0);
+	React.useEffect(() => {
+		if (immediate) {
+			clearTimeout(handlerRef.current);
+			if (pendingUpdate.current) performUpdate();
+			return;
+		}
+		pendingUpdate.current = true;
+		clearTimeout(handlerRef.current);
+		handlerRef.current = setTimeout(performUpdate, timeoutMs);
+		return () => {
+			if (immediate) performUpdate();
+		};
+	}, [
+		immediate,
+		value,
+		performUpdate,
+		timeoutMs
+	]);
+}
+//#endregion
+export { useDebouncedCallback };
+
+//# sourceMappingURL=useDebouncedCallback.es.js.map

package/dist/hooks/useDebouncedCallback.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDebouncedCallback.es.js","names":[],"sources":["../../src/hooks/useDebouncedCallback.ts"],"sourcesContent":["import React from \"react\";\n\nexport function useDebouncedCallback<T>(value: T, callback: () => void, immediate: boolean, timeoutMs = 300) {\n\n    const pendingUpdate = React.useRef(false);\n\n    const callbackRef = React.useRef(callback);\n    React.useEffect(() => {\n        callbackRef.current = callback;\n    }, [callback]);\n\n    const performUpdate = React.useCallback(() => {\n        callbackRef.current();\n        pendingUpdate.current = false;\n    }, []);\n\n    const handlerRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n    React.useEffect(\n        () => {\n            if (immediate) {\n                clearTimeout(handlerRef.current);\n                if (pendingUpdate.current) {\n                    performUpdate();\n                }\n                return;\n            }\n\n            pendingUpdate.current = true;\n            clearTimeout(handlerRef.current);\n            handlerRef.current = setTimeout(performUpdate, timeoutMs);\n            return () => {\n                if (immediate)\n                    performUpdate();\n            };\n        },\n        [immediate, value, performUpdate, timeoutMs]\n    );\n}\n"],"mappings":";;AAEA,SAAgB,qBAAwB,OAAU,UAAsB,WAAoB,YAAY,KAAK;CAEzG,MAAM,gBAAgB,MAAM,OAAO,KAAK;CAExC,MAAM,cAAc,MAAM,OAAO,QAAQ;CACzC,MAAM,gBAAgB;EAClB,YAAY,UAAU;CAC1B,GAAG,CAAC,QAAQ,CAAC;CAEb,MAAM,gBAAgB,MAAM,kBAAkB;EAC1C,YAAY,QAAQ;EACpB,cAAc,UAAU;CAC5B,GAAG,CAAC,CAAC;CAEL,MAAM,aAAa,MAAM,OAAkD,KAAA,CAAS;CAEpF,MAAM,gBACI;EACF,IAAI,WAAW;GACX,aAAa,WAAW,OAAO;GAC/B,IAAI,cAAc,SACd,cAAc;GAElB;EACJ;EAEA,cAAc,UAAU;EACxB,aAAa,WAAW,OAAO;EAC/B,WAAW,UAAU,WAAW,eAAe,SAAS;EACxD,aAAa;GACT,IAAI,WACA,cAAc;EACtB;CACJ,GACA;EAAC;EAAW;EAAO;EAAe;CAAS,CAC/C;AACJ"}

package/dist/hooks/useInjectStyles.es.js

@@ -0,0 +1,27 @@
+"use client";
+import { usePortalContainer } from "./PortalContainerContext.es.js";
+import { useEffect } from "react";
+//#region src/hooks/useInjectStyles.tsx
+/**
+* Use this hook to create a `<style>` element and inject it into the DOM.
+* It checks if the style already exists, and if it does, it does not inject it again.
+* @param key
+* @param styles
+*/
+function useInjectStyles(key, styles) {
+	const portalContainer = usePortalContainer();
+	useEffect(() => {
+		if (typeof document === "undefined") return;
+		const targetContainer = portalContainer ?? document.head;
+		if (!targetContainer.querySelector?.(`#${key}`)) {
+			const style = document.createElement("style");
+			style.id = key;
+			style.innerHTML = styles;
+			(targetContainer || document.head).appendChild(style);
+		}
+	}, []);
+}
+//#endregion
+export { useInjectStyles };
+
+//# sourceMappingURL=useInjectStyles.es.js.map

package/dist/hooks/useInjectStyles.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInjectStyles.es.js","names":[],"sources":["../../src/hooks/useInjectStyles.tsx"],"sourcesContent":["\"use client\";\nimport { useEffect } from \"react\";\nimport { usePortalContainer } from \"./PortalContainerContext\";\n\n/**\n * Use this hook to create a `<style>` element and inject it into the DOM.\n * It checks if the style already exists, and if it does, it does not inject it again.\n * @param key\n * @param styles\n */\nexport function useInjectStyles(key: string, styles: string) {\n\n    const portalContainer = usePortalContainer();\n\n    useEffect(() => {\n        if (typeof document === \"undefined\") return;\n\n        const targetContainer: HTMLElement | null = portalContainer ?? document.head;\n\n        // Try to find an existing style element within the target container first\n        const existingStyle = (targetContainer as HTMLElement).querySelector?.(`#${key}`) as HTMLStyleElement | null;\n\n        if (!existingStyle) {\n            const style = document.createElement(\"style\");\n            style.id = key;\n            style.innerHTML = styles;\n            (targetContainer || document.head).appendChild(style);\n        }\n    }, []);\n\n}\n"],"mappings":";;;;;;;;;;AAUA,SAAgB,gBAAgB,KAAa,QAAgB;CAEzD,MAAM,kBAAkB,mBAAmB;CAE3C,gBAAgB;EACZ,IAAI,OAAO,aAAa,aAAa;EAErC,MAAM,kBAAsC,mBAAmB,SAAS;EAKxE,IAAI,CAFmB,gBAAgC,gBAAgB,IAAI,KAAK,GAE5D;GAChB,MAAM,QAAQ,SAAS,cAAc,OAAO;GAC5C,MAAM,KAAK;GACX,MAAM,YAAY;GAClB,CAAC,mBAAmB,SAAS,KAAA,CAAM,YAAY,KAAK;EACxD;CACJ,GAAG,CAAC,CAAC;AAET"}

package/dist/hooks/useIsDarkMode.es.js

@@ -0,0 +1,61 @@
+import { useSyncExternalStore } from "react";
+//#region src/hooks/useIsDarkMode.ts
+/**
+* Whether the document is in dark mode right now, and re-rendered when that
+* changes.
+*
+* The theme is a class on `<html>` (`dark`, set by the panel's mode
+* controller) or a `data-theme` attribute (the marketing site). Components
+* that pick colours in JS rather than through CSS variables — `Chip` derives
+* its ink per theme — used to read the class once at render and never again,
+* so a theme switch left every chip on screen wearing the other theme's ink
+* until something else happened to re-render it. Subscribing through a
+* `MutationObserver` on the root's attributes makes the read live.
+*/
+function useIsDarkMode() {
+	return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+function getSnapshot() {
+	if (typeof document === "undefined") return false;
+	const root = document.documentElement;
+	return root.classList.contains("dark") || root.getAttribute("data-theme") === "dark";
+}
+function getServerSnapshot() {
+	return false;
+}
+/**
+* Every subscriber shares one observer of `<html>`.
+*
+* `Chip` subscribes, and a table can mount hundreds of chips; an observer per
+* subscriber meant hundreds of observers on one element, rebuilt on every
+* virtualised scroll step. The observer is created with the first subscriber
+* and disconnected with the last. Entries are per subscription, not per
+* callback, so one callback subscribed twice still needs two unsubscribes.
+*/
+var subscribers = /* @__PURE__ */ new Set();
+var observer;
+function subscribe(onChange) {
+	if (typeof document === "undefined" || typeof MutationObserver === "undefined") return () => void 0;
+	const entry = { onChange };
+	subscribers.add(entry);
+	if (!observer) {
+		observer = new MutationObserver(() => {
+			for (const subscriber of [...subscribers]) subscriber.onChange();
+		});
+		observer.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: ["class", "data-theme"]
+		});
+	}
+	return () => {
+		subscribers.delete(entry);
+		if (subscribers.size === 0 && observer) {
+			observer.disconnect();
+			observer = void 0;
+		}
+	};
+}
+//#endregion
+export { useIsDarkMode };
+
+//# sourceMappingURL=useIsDarkMode.es.js.map

package/dist/hooks/useIsDarkMode.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsDarkMode.es.js","names":[],"sources":["../../src/hooks/useIsDarkMode.ts"],"sourcesContent":["import { useSyncExternalStore } from \"react\";\n\n/**\n * Whether the document is in dark mode right now, and re-rendered when that\n * changes.\n *\n * The theme is a class on `<html>` (`dark`, set by the panel's mode\n * controller) or a `data-theme` attribute (the marketing site). Components\n * that pick colours in JS rather than through CSS variables — `Chip` derives\n * its ink per theme — used to read the class once at render and never again,\n * so a theme switch left every chip on screen wearing the other theme's ink\n * until something else happened to re-render it. Subscribing through a\n * `MutationObserver` on the root's attributes makes the read live.\n */\nexport function useIsDarkMode(): boolean {\n    return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n}\n\nfunction getSnapshot(): boolean {\n    if (typeof document === \"undefined\") return false;\n    const root = document.documentElement;\n    return root.classList.contains(\"dark\") || root.getAttribute(\"data-theme\") === \"dark\";\n}\n\nfunction getServerSnapshot(): boolean {\n    return false;\n}\n\n/**\n * Every subscriber shares one observer of `<html>`.\n *\n * `Chip` subscribes, and a table can mount hundreds of chips; an observer per\n * subscriber meant hundreds of observers on one element, rebuilt on every\n * virtualised scroll step. The observer is created with the first subscriber\n * and disconnected with the last. Entries are per subscription, not per\n * callback, so one callback subscribed twice still needs two unsubscribes.\n */\nconst subscribers = new Set<{ onChange: () => void }>();\nlet observer: MutationObserver | undefined;\n\nfunction subscribe(onChange: () => void): () => void {\n    if (typeof document === \"undefined\" || typeof MutationObserver === \"undefined\") return () => undefined;\n    const entry = { onChange };\n    subscribers.add(entry);\n    if (!observer) {\n        observer = new MutationObserver(() => {\n            for (const subscriber of [...subscribers]) subscriber.onChange();\n        });\n        observer.observe(document.documentElement, {\n            attributes: true,\n            attributeFilter: [\"class\", \"data-theme\"]\n        });\n    }\n    return () => {\n        subscribers.delete(entry);\n        if (subscribers.size === 0 && observer) {\n            observer.disconnect();\n            observer = undefined;\n        }\n    };\n}\n"],"mappings":";;;;;;;;;;;;;;AAcA,SAAgB,gBAAyB;CACrC,OAAO,qBAAqB,WAAW,aAAa,iBAAiB;AACzE;AAEA,SAAS,cAAuB;CAC5B,IAAI,OAAO,aAAa,aAAa,OAAO;CAC5C,MAAM,OAAO,SAAS;CACtB,OAAO,KAAK,UAAU,SAAS,MAAM,KAAK,KAAK,aAAa,YAAY,MAAM;AAClF;AAEA,SAAS,oBAA6B;CAClC,OAAO;AACX;;;;;;;;;;AAWA,IAAM,8BAAc,IAAI,IAA8B;AACtD,IAAI;AAEJ,SAAS,UAAU,UAAkC;CACjD,IAAI,OAAO,aAAa,eAAe,OAAO,qBAAqB,aAAa,aAAa,KAAA;CAC7F,MAAM,QAAQ,EAAE,SAAS;CACzB,YAAY,IAAI,KAAK;CACrB,IAAI,CAAC,UAAU;EACX,WAAW,IAAI,uBAAuB;GAClC,KAAK,MAAM,cAAc,CAAC,GAAG,WAAW,GAAG,WAAW,SAAS;EACnE,CAAC;EACD,SAAS,QAAQ,SAAS,iBAAiB;GACvC,YAAY;GACZ,iBAAiB,CAAC,SAAS,YAAY;EAC3C,CAAC;CACL;CACA,aAAa;EACT,YAAY,OAAO,KAAK;EACxB,IAAI,YAAY,SAAS,KAAK,UAAU;GACpC,SAAS,WAAW;GACpB,WAAW,KAAA;EACf;CACJ;AACJ"}

package/dist/hooks/useModalFocus.es.js

@@ -0,0 +1,81 @@
+"use client";
+import { useCallback, useState } from "react";
+//#region src/hooks/useModalFocus.ts
+function currentFocus() {
+	if (typeof document === "undefined") return null;
+	const active = document.activeElement;
+	if (!(active instanceof HTMLElement) || active === document.body) return null;
+	const layer = active.closest("[role=menu], [role=listbox]");
+	if (layer instanceof HTMLElement && layer.id && layer !== active) {
+		const trigger = Array.from(document.querySelectorAll("[aria-controls]")).find((el) => el.getAttribute("aria-controls") === layer.id);
+		if (trigger instanceof HTMLElement && !layer.contains(trigger)) return trigger;
+	}
+	return active;
+}
+/**
+* Where focus goes when a kit modal (`Dialog`, `Sheet`) opens and closes.
+*
+* Both used to cancel Radix's open-focus and do nothing else, so focus stayed
+* on the trigger behind the modal — which Radix had just hidden from assistive
+* technology with `aria-hidden`. A screen reader announced nothing, and Enter
+* pressed again fired the trigger a second time underneath the open modal.
+*
+* On open, focus moves into the modal: to `initialFocus` when the caller names
+* an element, otherwise to the modal's own container (it carries
+* `tabIndex=-1`). The container rather than the first field, because the first
+* field on a phone raises the keyboard over a form the user has not started,
+* and because the container is what a screen reader announces by its title.
+* The first Tab then lands on the first control.
+*
+* On close, focus goes back to whatever had it when the modal opened. Radix
+* only returns it to a `Dialog.Trigger`, and the kit's modals are controlled —
+* there is no trigger — so focus used to fall to `<body>` and the next Tab
+* started from the top of the page.
+*
+* The origin is read while rendering the open edge, not from the open-focus
+* event: a field with `autoFocus` inside the modal has taken focus by the time
+* any effect runs, and Radix then skips the event altogether. When the origin
+* is an item in a menu, the menu's trigger is recorded instead: the item is
+* gone a moment later, and the menu does not take focus back to its trigger
+* once the modal has it.
+*
+* Internal to the kit's modals — not exported.
+*/
+function useModalFocus({ open, initialFocus, focusContainer = true, onOpenAutoFocus, onCloseAutoFocus }) {
+	const [origin, setOrigin] = useState(() => open ? currentFocus() : null);
+	const [wasOpen, setWasOpen] = useState(open);
+	if (open !== wasOpen) {
+		setWasOpen(open);
+		if (open) setOrigin(currentFocus());
+	}
+	return {
+		onOpenAutoFocus: useCallback((event) => {
+			onOpenAutoFocus?.(event);
+			if (event.defaultPrevented) return;
+			const target = initialFocus?.current;
+			if (target) {
+				event.preventDefault();
+				target.focus({ preventScroll: true });
+				return;
+			}
+			if (!focusContainer) return;
+			event.preventDefault();
+			const container = event.currentTarget;
+			if (container instanceof HTMLElement) container.focus({ preventScroll: true });
+		}, [
+			initialFocus,
+			focusContainer,
+			onOpenAutoFocus
+		]),
+		onCloseAutoFocus: useCallback((event) => {
+			onCloseAutoFocus?.(event);
+			if (event.defaultPrevented) return;
+			event.preventDefault();
+			if (origin?.isConnected) origin.focus({ preventScroll: true });
+		}, [origin, onCloseAutoFocus])
+	};
+}
+//#endregion
+export { useModalFocus };
+
+//# sourceMappingURL=useModalFocus.es.js.map

package/dist/hooks/useModalFocus.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useModalFocus.es.js","names":[],"sources":["../../src/hooks/useModalFocus.ts"],"sourcesContent":["\"use client\";\nimport React, { useCallback, useState } from \"react\";\n\nexport type ModalFocusOptions = {\n    /** Whether the modal is open. Focus is recorded on the closed → open edge. */\n    open: boolean;\n    /**\n     * The element to focus when the modal opens. Without it the modal focuses\n     * itself (see {@link useModalFocus}).\n     */\n    initialFocus?: React.RefObject<HTMLElement | null>;\n    /**\n     * `false` hands the choice back to Radix: the first focusable element\n     * inside the modal takes focus. `true` (the default) focuses the modal's\n     * own container.\n     */\n    focusContainer?: boolean;\n    onOpenAutoFocus?: (event: Event) => void;\n    onCloseAutoFocus?: (event: Event) => void;\n};\n\nfunction currentFocus(): HTMLElement | null {\n    if (typeof document === \"undefined\") return null;\n    const active = document.activeElement;\n    if (!(active instanceof HTMLElement) || active === document.body) return null;\n    // A modal opened from a menu item: the item leaves the document as the menu\n    // closes, so the place to come back to is the menu's trigger — the element\n    // whose `aria-controls` names the open menu (Radix sets it on every trigger).\n    const layer = active.closest(\"[role=menu], [role=listbox]\");\n    if (layer instanceof HTMLElement && layer.id && layer !== active) {\n        const trigger = Array.from(document.querySelectorAll(\"[aria-controls]\"))\n            .find((el) => el.getAttribute(\"aria-controls\") === layer.id);\n        if (trigger instanceof HTMLElement && !layer.contains(trigger)) return trigger;\n    }\n    return active;\n}\n\n/**\n * Where focus goes when a kit modal (`Dialog`, `Sheet`) opens and closes.\n *\n * Both used to cancel Radix's open-focus and do nothing else, so focus stayed\n * on the trigger behind the modal — which Radix had just hidden from assistive\n * technology with `aria-hidden`. A screen reader announced nothing, and Enter\n * pressed again fired the trigger a second time underneath the open modal.\n *\n * On open, focus moves into the modal: to `initialFocus` when the caller names\n * an element, otherwise to the modal's own container (it carries\n * `tabIndex=-1`). The container rather than the first field, because the first\n * field on a phone raises the keyboard over a form the user has not started,\n * and because the container is what a screen reader announces by its title.\n * The first Tab then lands on the first control.\n *\n * On close, focus goes back to whatever had it when the modal opened. Radix\n * only returns it to a `Dialog.Trigger`, and the kit's modals are controlled —\n * there is no trigger — so focus used to fall to `<body>` and the next Tab\n * started from the top of the page.\n *\n * The origin is read while rendering the open edge, not from the open-focus\n * event: a field with `autoFocus` inside the modal has taken focus by the time\n * any effect runs, and Radix then skips the event altogether. When the origin\n * is an item in a menu, the menu's trigger is recorded instead: the item is\n * gone a moment later, and the menu does not take focus back to its trigger\n * once the modal has it.\n *\n * Internal to the kit's modals — not exported.\n */\nexport function useModalFocus({\n                                  open,\n                                  initialFocus,\n                                  focusContainer = true,\n                                  onOpenAutoFocus,\n                                  onCloseAutoFocus\n                              }: ModalFocusOptions) {\n    const [origin, setOrigin] = useState<HTMLElement | null>(() => open ? currentFocus() : null);\n    const [wasOpen, setWasOpen] = useState(open);\n    if (open !== wasOpen) {\n        setWasOpen(open);\n        if (open) setOrigin(currentFocus());\n    }\n\n    const handleOpenAutoFocus = useCallback((event: Event) => {\n        onOpenAutoFocus?.(event);\n        if (event.defaultPrevented) return;\n\n        const target = initialFocus?.current;\n        if (target) {\n            event.preventDefault();\n            target.focus({ preventScroll: true });\n            return;\n        }\n        if (!focusContainer) return; // Radix focuses the first focusable element\n        event.preventDefault();\n        // The event is dispatched on the focus scope's container: the content.\n        const container = event.currentTarget;\n        if (container instanceof HTMLElement) container.focus({ preventScroll: true });\n    }, [initialFocus, focusContainer, onOpenAutoFocus]);\n\n    const handleCloseAutoFocus = useCallback((event: Event) => {\n        onCloseAutoFocus?.(event);\n        if (event.defaultPrevented) return;\n        event.preventDefault();\n        if (origin?.isConnected) origin.focus({ preventScroll: true });\n    }, [origin, onCloseAutoFocus]);\n\n    return { onOpenAutoFocus: handleOpenAutoFocus, onCloseAutoFocus: handleCloseAutoFocus };\n}\n"],"mappings":";;;AAqBA,SAAS,eAAmC;CACxC,IAAI,OAAO,aAAa,aAAa,OAAO;CAC5C,MAAM,SAAS,SAAS;CACxB,IAAI,EAAE,kBAAkB,gBAAgB,WAAW,SAAS,MAAM,OAAO;CAIzE,MAAM,QAAQ,OAAO,QAAQ,6BAA6B;CAC1D,IAAI,iBAAiB,eAAe,MAAM,MAAM,UAAU,QAAQ;EAC9D,MAAM,UAAU,MAAM,KAAK,SAAS,iBAAiB,iBAAiB,CAAC,CAAC,CACnE,MAAM,OAAO,GAAG,aAAa,eAAe,MAAM,MAAM,EAAE;EAC/D,IAAI,mBAAmB,eAAe,CAAC,MAAM,SAAS,OAAO,GAAG,OAAO;CAC3E;CACA,OAAO;AACX;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,SAAgB,cAAc,EACI,MACA,cACA,iBAAiB,MACjB,iBACA,oBACkB;CAChD,MAAM,CAAC,QAAQ,aAAa,eAAmC,OAAO,aAAa,IAAI,IAAI;CAC3F,MAAM,CAAC,SAAS,cAAc,SAAS,IAAI;CAC3C,IAAI,SAAS,SAAS;EAClB,WAAW,IAAI;EACf,IAAI,MAAM,UAAU,aAAa,CAAC;CACtC;CA0BA,OAAO;EAAE,iBAxBmB,aAAa,UAAiB;GACtD,kBAAkB,KAAK;GACvB,IAAI,MAAM,kBAAkB;GAE5B,MAAM,SAAS,cAAc;GAC7B,IAAI,QAAQ;IACR,MAAM,eAAe;IACrB,OAAO,MAAM,EAAE,eAAe,KAAK,CAAC;IACpC;GACJ;GACA,IAAI,CAAC,gBAAgB;GACrB,MAAM,eAAe;GAErB,MAAM,YAAY,MAAM;GACxB,IAAI,qBAAqB,aAAa,UAAU,MAAM,EAAE,eAAe,KAAK,CAAC;EACjF,GAAG;GAAC;GAAc;GAAgB;EAAe,CASvB;EAAqB,kBAPlB,aAAa,UAAiB;GACvD,mBAAmB,KAAK;GACxB,IAAI,MAAM,kBAAkB;GAC5B,MAAM,eAAe;GACrB,IAAI,QAAQ,aAAa,OAAO,MAAM,EAAE,eAAe,KAAK,CAAC;EACjE,GAAG,CAAC,QAAQ,gBAAgB,CAEqC;CAAqB;AAC1F"}

package/dist/hooks/useOutsideAlerter.es.js

@@ -0,0 +1,41 @@
+"use client";
+import { useEffect } from "react";
+//#region src/hooks/useOutsideAlerter.tsx
+/**
+* Hook that alerts clicks outside the passed ref
+*/
+function useOutsideAlerter(ref, onOutsideClick, active = true) {
+	useEffect(() => {
+		if (!active) return;
+		/**
+		* Alert if clicked on outside of element
+		*/
+		function handleClickOutside(event) {
+			if (isInPresentationLayer(event.target)) return;
+			if (ref.current && !ref.current.contains(event.target)) onOutsideClick();
+		}
+		document.addEventListener("mousedown", handleClickOutside);
+		return () => {
+			document.removeEventListener("mousedown", handleClickOutside);
+		};
+	}, [
+		ref,
+		active,
+		onOutsideClick
+	]);
+}
+/**
+* Check if any parent of the node is a presentation node
+* @param node
+*/
+function isInPresentationLayer(node) {
+	if (node instanceof HTMLElement) {
+		if (node.getAttribute("role") === "presentation") return true;
+		return isInPresentationLayer(node.parentNode);
+	}
+	return false;
+}
+//#endregion
+export { useOutsideAlerter };
+
+//# sourceMappingURL=useOutsideAlerter.es.js.map

package/dist/hooks/useOutsideAlerter.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOutsideAlerter.es.js","names":[],"sources":["../../src/hooks/useOutsideAlerter.tsx"],"sourcesContent":["\"use client\";\n\nimport { RefObject, useEffect } from \"react\";\n\n/**\n * Hook that alerts clicks outside the passed ref\n */\nexport function useOutsideAlerter(ref: RefObject<HTMLElement | null>, onOutsideClick: () => void, active = true): void {\n    useEffect(() => {\n        if (!active)\n            return;\n\n        /**\n         * Alert if clicked on outside of element\n         */\n        function handleClickOutside(event: Event) {\n            if (isInPresentationLayer(event.target as Node)) {\n                return;\n            }\n\n            if (ref.current && !ref.current.contains(event.target as Node)) {\n                onOutsideClick();\n            }\n        }\n\n        // Bind the event listener\n        document.addEventListener(\"mousedown\", handleClickOutside);\n        return () => {\n            // Unbind the event listener on clean up\n            document.removeEventListener(\"mousedown\", handleClickOutside);\n        };\n    }, [ref, active, onOutsideClick]);\n}\n\n/**\n * Check if any parent of the node is a presentation node\n * @param node\n */\nfunction isInPresentationLayer(node: Node | null): boolean {\n    if (node instanceof HTMLElement) {\n        if (node.getAttribute(\"role\") === \"presentation\")\n            return true;\n        return isInPresentationLayer(node.parentNode);\n    }\n    return false;\n}\n"],"mappings":";;;;;;AAOA,SAAgB,kBAAkB,KAAoC,gBAA4B,SAAS,MAAY;CACnH,gBAAgB;EACZ,IAAI,CAAC,QACD;;;;EAKJ,SAAS,mBAAmB,OAAc;GACtC,IAAI,sBAAsB,MAAM,MAAc,GAC1C;GAGJ,IAAI,IAAI,WAAW,CAAC,IAAI,QAAQ,SAAS,MAAM,MAAc,GACzD,eAAe;EAEvB;EAGA,SAAS,iBAAiB,aAAa,kBAAkB;EACzD,aAAa;GAET,SAAS,oBAAoB,aAAa,kBAAkB;EAChE;CACJ,GAAG;EAAC;EAAK;EAAQ;CAAc,CAAC;AACpC;;;;;AAMA,SAAS,sBAAsB,MAA4B;CACvD,IAAI,gBAAgB,aAAa;EAC7B,IAAI,KAAK,aAAa,MAAM,MAAM,gBAC9B,OAAO;EACX,OAAO,sBAAsB,KAAK,UAAU;CAChD;CACA,OAAO;AACX"}

package/dist/hooks/useRestoreInterruptedFocus.es.js

@@ -0,0 +1,61 @@
+"use client";
+import { useEffect } from "react";
+//#region src/hooks/useRestoreInterruptedFocus.ts
+/**
+* Finish a focus move that a modal's focus trap interrupted.
+*
+* Radix's `FocusScope` watches a modal for removed nodes, and when one goes
+* while `document.activeElement` is `body` it concludes the focused element was
+* deleted and focuses the modal itself. But `body` is also what `activeElement`
+* reads *during* an ordinary focus move: the browser fires `focusout` before it
+* lands on the next element. Anything that unmounts in response — a tooltip that
+* opened on focus closing on blur, above all — is removed inside that window.
+* The scope focuses the container, the browser abandons the move it was making,
+* and Tab from one field lands on the dialog, so the next Tab starts again from
+* the header. Shift+Tab the same.
+*
+* So remember where each move inside the container was going, and if the
+* container takes focus before the move lands, send it on. A move that nothing
+* interrupts lands on its target and clears the note; a note nobody used is
+* dropped by the next task.
+*
+* The note is taken on `window`, in the capture phase — before any other
+* listener for the event runs. The scope's correction arrives in the microtask
+* checkpoint after whichever listener removed the node, so a note taken any
+* later (on the container, bubbling) is taken after focus has already been
+* moved: a field that drops something from its own `focusout` handler beat it.
+*
+* Internal to the kit's modals — not exported.
+*/
+function useRestoreInterruptedFocus(container) {
+	useEffect(() => {
+		if (!container) return;
+		let intended = null;
+		let expiry;
+		const onFocusOut = (event) => {
+			if (!(event.target instanceof Node) || !container.contains(event.target)) return;
+			const next = event.relatedTarget;
+			intended = next instanceof HTMLElement && next !== container && container.contains(next) ? next : null;
+			clearTimeout(expiry);
+			if (intended) expiry = setTimeout(() => {
+				intended = null;
+			}, 0);
+		};
+		const onFocusIn = (event) => {
+			const target = intended;
+			intended = null;
+			if (event.target === container && target?.isConnected && container.contains(target)) target.focus();
+		};
+		window.addEventListener("focusout", onFocusOut, true);
+		container.addEventListener("focusin", onFocusIn);
+		return () => {
+			clearTimeout(expiry);
+			window.removeEventListener("focusout", onFocusOut, true);
+			container.removeEventListener("focusin", onFocusIn);
+		};
+	}, [container]);
+}
+//#endregion
+export { useRestoreInterruptedFocus };
+
+//# sourceMappingURL=useRestoreInterruptedFocus.es.js.map

package/dist/hooks/useRestoreInterruptedFocus.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRestoreInterruptedFocus.es.js","names":[],"sources":["../../src/hooks/useRestoreInterruptedFocus.ts"],"sourcesContent":["\"use client\";\nimport { useEffect } from \"react\";\n\n/**\n * Finish a focus move that a modal's focus trap interrupted.\n *\n * Radix's `FocusScope` watches a modal for removed nodes, and when one goes\n * while `document.activeElement` is `body` it concludes the focused element was\n * deleted and focuses the modal itself. But `body` is also what `activeElement`\n * reads *during* an ordinary focus move: the browser fires `focusout` before it\n * lands on the next element. Anything that unmounts in response — a tooltip that\n * opened on focus closing on blur, above all — is removed inside that window.\n * The scope focuses the container, the browser abandons the move it was making,\n * and Tab from one field lands on the dialog, so the next Tab starts again from\n * the header. Shift+Tab the same.\n *\n * So remember where each move inside the container was going, and if the\n * container takes focus before the move lands, send it on. A move that nothing\n * interrupts lands on its target and clears the note; a note nobody used is\n * dropped by the next task.\n *\n * The note is taken on `window`, in the capture phase — before any other\n * listener for the event runs. The scope's correction arrives in the microtask\n * checkpoint after whichever listener removed the node, so a note taken any\n * later (on the container, bubbling) is taken after focus has already been\n * moved: a field that drops something from its own `focusout` handler beat it.\n *\n * Internal to the kit's modals — not exported.\n */\nexport function useRestoreInterruptedFocus(container: HTMLElement | null) {\n    useEffect(() => {\n        if (!container) return;\n\n        let intended: HTMLElement | null = null;\n        let expiry: ReturnType<typeof setTimeout> | undefined;\n\n        const onFocusOut = (event: FocusEvent) => {\n            if (!(event.target instanceof Node) || !container.contains(event.target)) return;\n            const next = event.relatedTarget;\n            intended = next instanceof HTMLElement && next !== container && container.contains(next)\n                ? next\n                : null;\n            clearTimeout(expiry);\n            if (intended) expiry = setTimeout(() => {\n                intended = null;\n            }, 0);\n        };\n\n        const onFocusIn = (event: FocusEvent) => {\n            const target = intended;\n            intended = null;\n            if (event.target === container && target?.isConnected && container.contains(target)) {\n                target.focus();\n            }\n        };\n\n        window.addEventListener(\"focusout\", onFocusOut, true);\n        container.addEventListener(\"focusin\", onFocusIn);\n        return () => {\n            clearTimeout(expiry);\n            window.removeEventListener(\"focusout\", onFocusOut, true);\n            container.removeEventListener(\"focusin\", onFocusIn);\n        };\n    }, [container]);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,SAAgB,2BAA2B,WAA+B;CACtE,gBAAgB;EACZ,IAAI,CAAC,WAAW;EAEhB,IAAI,WAA+B;EACnC,IAAI;EAEJ,MAAM,cAAc,UAAsB;GACtC,IAAI,EAAE,MAAM,kBAAkB,SAAS,CAAC,UAAU,SAAS,MAAM,MAAM,GAAG;GAC1E,MAAM,OAAO,MAAM;GACnB,WAAW,gBAAgB,eAAe,SAAS,aAAa,UAAU,SAAS,IAAI,IACjF,OACA;GACN,aAAa,MAAM;GACnB,IAAI,UAAU,SAAS,iBAAiB;IACpC,WAAW;GACf,GAAG,CAAC;EACR;EAEA,MAAM,aAAa,UAAsB;GACrC,MAAM,SAAS;GACf,WAAW;GACX,IAAI,MAAM,WAAW,aAAa,QAAQ,eAAe,UAAU,SAAS,MAAM,GAC9E,OAAO,MAAM;EAErB;EAEA,OAAO,iBAAiB,YAAY,YAAY,IAAI;EACpD,UAAU,iBAAiB,WAAW,SAAS;EAC/C,aAAa;GACT,aAAa,MAAM;GACnB,OAAO,oBAAoB,YAAY,YAAY,IAAI;GACvD,UAAU,oBAAoB,WAAW,SAAS;EACtD;CACJ,GAAG,CAAC,SAAS,CAAC;AAClB"}

package/dist/icons/GitHubIcon.es.js

@@ -0,0 +1,23 @@
+import { cls } from "../util/cls.es.js";
+import { colorClassesMapping, iconSize } from "./Icon.es.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/icons/GitHubIcon.tsx
+function GitHubIcon({ size = 24, color, className, onClick, style }) {
+	const px = typeof size === "number" ? size : iconSize[size];
+	return /* @__PURE__ */ jsx("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		className: cls(color ? colorClassesMapping[color] : "", className),
+		onClick,
+		style,
+		fill: "currentColor",
+		width: px,
+		height: px,
+		viewBox: "0 0 24 24",
+		children: /* @__PURE__ */ jsx("path", { d: "M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" })
+	});
+}
+//#endregion
+export { GitHubIcon };
+
+//# sourceMappingURL=GitHubIcon.es.js.map

package/dist/icons/GitHubIcon.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GitHubIcon.es.js","names":[],"sources":["../../src/icons/GitHubIcon.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { colorClassesMapping, IconProps, iconSize } from \"./Icon\";\nimport { cls } from \"../util\";\n\nexport function GitHubIcon({ size = 24, color, className, onClick, style }: IconProps) {\n    // `size` is `IconSize | number` — resolve the keyword, or an SVG attribute\n    // of width=\"small\" is emitted and the icon renders at its intrinsic size.\n    const px = typeof size === \"number\" ? size : iconSize[size];\n    return <svg xmlns=\"http://www.w3.org/2000/svg\"\n                className={cls(color ? colorClassesMapping[color] : \"\", className)}\n                onClick={onClick}\n                style={style}\n                fill={\"currentColor\"}\n                width={px}\n                height={px}\n                viewBox=\"0 0 24 24\">\n        <path\n            d=\"M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z\"/>\n    </svg>;\n}\n"],"mappings":";;;;;AAKA,SAAgB,WAAW,EAAE,OAAO,IAAI,OAAO,WAAW,SAAS,SAAoB;CAGnF,MAAM,KAAK,OAAO,SAAS,WAAW,OAAO,SAAS;CACtD,OAAO,oBAAC,OAAD;EAAK,OAAM;EACN,WAAW,IAAI,QAAQ,oBAAoB,SAAS,IAAI,SAAS;EACxD;EACF;EACP,MAAM;EACN,OAAO;EACP,QAAQ;EACR,SAAQ;YAChB,oBAAC,QAAD,EACI,GAAE,4sBAA4sB,CAAA;CACjtB,CAAA;AACT"}

package/dist/icons/HandleIcon.es.js

@@ -0,0 +1,60 @@
+import { cls } from "../util/cls.es.js";
+import { colorClassesMapping, iconSize } from "./Icon.es.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/icons/HandleIcon.tsx
+function HandleIcon({ size = 24, color, className, onClick, style }) {
+	const px = typeof size === "number" ? size : iconSize[size];
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		className: cls(color ? colorClassesMapping[color] : "", className),
+		onClick,
+		style,
+		width: px,
+		height: px,
+		viewBox: "0 0 100 100",
+		fill: "none",
+		children: [
+			/* @__PURE__ */ jsx("circle", {
+				cx: "28",
+				cy: "50",
+				r: "9",
+				fill: "currentColor"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "28",
+				cy: "21",
+				r: "9",
+				fill: "currentColor"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "71",
+				cy: "21",
+				r: "9",
+				fill: "currentColor"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "71",
+				cy: "50",
+				r: "9",
+				fill: "currentColor"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "71",
+				cy: "78",
+				r: "9",
+				fill: "currentColor"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "28",
+				cy: "78",
+				r: "9",
+				fill: "currentColor"
+			})
+		]
+	});
+}
+//#endregion
+export { HandleIcon };
+
+//# sourceMappingURL=HandleIcon.es.js.map

package/dist/icons/HandleIcon.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HandleIcon.es.js","names":[],"sources":["../../src/icons/HandleIcon.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { colorClassesMapping, IconProps, iconSize } from \"./Icon\";\nimport { cls } from \"../util\";\n\nexport function HandleIcon({ size = 24, color, className, onClick, style }: IconProps) {\n    const px = typeof size === \"number\" ? size : iconSize[size];\n    return <svg xmlns=\"http://www.w3.org/2000/svg\"\n                className={cls(color ? colorClassesMapping[color] : \"\", className)}\n                onClick={onClick}\n                style={style}\n                width={px}\n                height={px}\n                viewBox=\"0 0 100 100\"\n                fill=\"none\">\n        <circle cx=\"28\" cy=\"50\" r=\"9\" fill={\"currentColor\"}/>\n        <circle cx=\"28\" cy=\"21\" r=\"9\" fill={\"currentColor\"}/>\n        <circle cx=\"71\" cy=\"21\" r=\"9\" fill={\"currentColor\"}/>\n        <circle cx=\"71\" cy=\"50\" r=\"9\" fill={\"currentColor\"}/>\n        <circle cx=\"71\" cy=\"78\" r=\"9\" fill={\"currentColor\"}/>\n        <circle cx=\"28\" cy=\"78\" r=\"9\" fill={\"currentColor\"}/>\n    </svg>;\n}\n"],"mappings":";;;;;AAKA,SAAgB,WAAW,EAAE,OAAO,IAAI,OAAO,WAAW,SAAS,SAAoB;CACnF,MAAM,KAAK,OAAO,SAAS,WAAW,OAAO,SAAS;CACtD,OAAO,qBAAC,OAAD;EAAK,OAAM;EACN,WAAW,IAAI,QAAQ,oBAAoB,SAAS,IAAI,SAAS;EACxD;EACF;EACP,OAAO;EACP,QAAQ;EACR,SAAQ;EACR,MAAK;YAPV;GAQH,oBAAC,UAAD;IAAQ,IAAG;IAAK,IAAG;IAAK,GAAE;IAAI,MAAM;GAAgB,CAAA;GACpD,oBAAC,UAAD;IAAQ,IAAG;IAAK,IAAG;IAAK,GAAE;IAAI,MAAM;GAAgB,CAAA;GACpD,oBAAC,UAAD;IAAQ,IAAG;IAAK,IAAG;IAAK,GAAE;IAAI,MAAM;GAAgB,CAAA;GACpD,oBAAC,UAAD;IAAQ,IAAG;IAAK,IAAG;IAAK,GAAE;IAAI,MAAM;GAAgB,CAAA;GACpD,oBAAC,UAAD;IAAQ,IAAG;IAAK,IAAG;IAAK,GAAE;IAAI,MAAM;GAAgB,CAAA;GACpD,oBAAC,UAAD;IAAQ,IAAG;IAAK,IAAG;IAAK,GAAE;IAAI,MAAM;GAAgB,CAAA;EACnD;;AACT"}

package/dist/icons/Icon.es.js

@@ -0,0 +1,25 @@
+"use client";
+//#region src/icons/Icon.tsx
+/**
+* Standardized icon size map in px.
+* Use with direct Lucide imports: `<Database size={iconSize.small} />`
+*/
+var iconSize = {
+	smallest: 16,
+	small: 20,
+	medium: 24,
+	large: 28
+};
+var colorClassesMapping = {
+	inherit: "",
+	primary: "text-primary",
+	success: "text-green-500",
+	warning: "text-yellow-500",
+	secondary: "text-secondary",
+	disabled: "text-text-disabled dark:text-text-disabled-dark",
+	error: "text-red-500"
+};
+//#endregion
+export { colorClassesMapping, iconSize };
+
+//# sourceMappingURL=Icon.es.js.map

package/dist/icons/Icon.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.es.js","names":[],"sources":["../../src/icons/Icon.tsx"],"sourcesContent":["\"use client\";\n\nexport type IconColor = \"inherit\" | \"primary\" | \"secondary\" | \"disabled\" | \"error\" | \"success\" | \"warning\";\nexport type IconSize = \"smallest\" | \"small\" | \"medium\" | \"large\";\n\n/**\n * Standardized icon size map in px.\n * Use with direct Lucide imports: `<Database size={iconSize.small} />`\n */\nexport const iconSize = {\n    smallest: 16,\n    small: 20,\n    medium: 24,\n    large: 28\n} as const satisfies Record<IconSize, number>;\n\nexport type IconProps = {\n    size?: IconSize | number,\n    color?: IconColor,\n    className?: string,\n    onClick?: (e: React.SyntheticEvent) => void,\n    style?: React.CSSProperties,\n}\n\nexport const colorClassesMapping: Record<IconColor, string> = {\n    inherit: \"\",\n    primary: \"text-primary\",\n    success: \"text-green-500\",\n    warning: \"text-yellow-500\",\n    secondary: \"text-secondary\",\n    disabled: \"text-text-disabled dark:text-text-disabled-dark\",\n    error: \"text-red-500\"\n}\n"],"mappings":";;;;;;AASA,IAAa,WAAW;CACpB,UAAU;CACV,OAAO;CACP,QAAQ;CACR,OAAO;AACX;AAUA,IAAa,sBAAiD;CAC1D,SAAS;CACT,SAAS;CACT,SAAS;CACT,SAAS;CACT,WAAW;CACX,UAAU;CACV,OAAO;AACX"}