@askrjs/themes 0.0.8 → 0.0.10

package/dist/components/spinner/spinner.types.d.ts

@@ -1,10 +1,12 @@
 import { ProgressCircleProps } from "@askrjs/ui";
 
 //#region src/components/spinner/spinner.types.d.ts
+type SpinnerSize = "sm" | "md" | "lg";
 type SpinnerOwnProps = Omit<ProgressCircleProps, "value" | "getValueLabel"> & {
   label?: string;
+  size?: SpinnerSize;
 };
 type SpinnerProps = SpinnerOwnProps;
 //#endregion
-export { SpinnerOwnProps, SpinnerProps };
+export { SpinnerOwnProps, SpinnerProps, SpinnerSize };
 //# sourceMappingURL=spinner.types.d.ts.map

package/dist/components/stat/index.d.ts

@@ -0,0 +1,2 @@
+import { StatDescriptionProps, StatLabelProps, StatProps, StatValueProps } from "./stat.types.js";
+import { Stat, StatDescription, StatLabel, StatValue } from "./stat.js";

package/dist/components/stat/stat.d.ts

@@ -0,0 +1,10 @@
+import { StatDescriptionProps, StatLabelProps, StatProps, StatValueProps } from "./stat.types.js";
+
+//#region src/components/stat/stat.d.ts
+declare function Stat(props: StatProps): JSX.Element;
+declare function StatLabel(props: StatLabelProps): JSX.Element;
+declare function StatValue(props: StatValueProps): JSX.Element;
+declare function StatDescription(props: StatDescriptionProps): JSX.Element;
+//#endregion
+export { Stat, StatDescription, StatLabel, StatValue };
+//# sourceMappingURL=stat.d.ts.map

package/dist/components/stat/stat.js

@@ -0,0 +1,52 @@
+import { classes } from "../_internal/classes.js";
+import { mergeProps } from "../_internal/merge-props.js";
+import { jsx } from "@askrjs/askr/jsx-runtime";
+//#region src/components/stat/stat.tsx
+function Stat(props) {
+	const { children, class: className, ref, ...rest } = props;
+	return /* @__PURE__ */ jsx("div", {
+		...mergeProps(rest, {
+			ref,
+			class: classes("stat", className),
+			"data-slot": "stat"
+		}),
+		children
+	});
+}
+function StatLabel(props) {
+	const { children, class: className, ref, ...rest } = props;
+	return /* @__PURE__ */ jsx("p", {
+		...mergeProps(rest, {
+			ref,
+			class: classes("stat-label", className),
+			"data-slot": "stat-label"
+		}),
+		children
+	});
+}
+function StatValue(props) {
+	const { children, class: className, ref, ...rest } = props;
+	return /* @__PURE__ */ jsx("p", {
+		...mergeProps(rest, {
+			ref,
+			class: classes("stat-value", className),
+			"data-slot": "stat-value"
+		}),
+		children
+	});
+}
+function StatDescription(props) {
+	const { children, class: className, ref, ...rest } = props;
+	return /* @__PURE__ */ jsx("p", {
+		...mergeProps(rest, {
+			ref,
+			class: classes("stat-description", className),
+			"data-slot": "stat-description"
+		}),
+		children
+	});
+}
+//#endregion
+export { Stat, StatDescription, StatLabel, StatValue };
+
+//# sourceMappingURL=stat.js.map

package/dist/components/stat/stat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stat.js","names":[],"sources":["../../../src/components/stat/stat.tsx"],"sourcesContent":["import { classes } from \"../_internal/classes\";\nimport { mergeProps } from \"../_internal/merge-props\";\nimport type { StatDescriptionProps, StatLabelProps, StatProps, StatValueProps } from \"./stat.types\";\n\nexport function Stat(props: StatProps): JSX.Element {\n  const { children, class: className, ref, ...rest } = props;\n  const finalProps = mergeProps(rest, {\n    ref,\n    class: classes(\"stat\", className),\n    \"data-slot\": \"stat\",\n  });\n\n  return <div {...finalProps}>{children}</div>;\n}\n\nexport function StatLabel(props: StatLabelProps): JSX.Element {\n  const { children, class: className, ref, ...rest } = props;\n  const finalProps = mergeProps(rest, {\n    ref,\n    class: classes(\"stat-label\", className),\n    \"data-slot\": \"stat-label\",\n  });\n\n  return <p {...finalProps}>{children}</p>;\n}\n\nexport function StatValue(props: StatValueProps): JSX.Element {\n  const { children, class: className, ref, ...rest } = props;\n  const finalProps = mergeProps(rest, {\n    ref,\n    class: classes(\"stat-value\", className),\n    \"data-slot\": \"stat-value\",\n  });\n\n  return <p {...finalProps}>{children}</p>;\n}\n\nexport function StatDescription(props: StatDescriptionProps): JSX.Element {\n  const { children, class: className, ref, ...rest } = props;\n  const finalProps = mergeProps(rest, {\n    ref,\n    class: classes(\"stat-description\", className),\n    \"data-slot\": \"stat-description\",\n  });\n\n  return <p {...finalProps}>{children}</p>;\n}\n"],"mappings":";;;;AAIA,SAAgB,KAAK,OAA+B;CAClD,MAAM,EAAE,UAAU,OAAO,WAAW,KAAK,GAAG,SAAS;CAOrD,OAAO,oBAAC,OAAD;EAAK,GANO,WAAW,MAAM;GAClC;GACA,OAAO,QAAQ,QAAQ,SAAS;GAChC,aAAa;EACf,CAEyB;EAAI;CAAc,CAAA;AAC7C;AAEA,SAAgB,UAAU,OAAoC;CAC5D,MAAM,EAAE,UAAU,OAAO,WAAW,KAAK,GAAG,SAAS;CAOrD,OAAO,oBAAC,KAAD;EAAG,GANS,WAAW,MAAM;GAClC;GACA,OAAO,QAAQ,cAAc,SAAS;GACtC,aAAa;EACf,CAEuB;EAAI;CAAY,CAAA;AACzC;AAEA,SAAgB,UAAU,OAAoC;CAC5D,MAAM,EAAE,UAAU,OAAO,WAAW,KAAK,GAAG,SAAS;CAOrD,OAAO,oBAAC,KAAD;EAAG,GANS,WAAW,MAAM;GAClC;GACA,OAAO,QAAQ,cAAc,SAAS;GACtC,aAAa;EACf,CAEuB;EAAI;CAAY,CAAA;AACzC;AAEA,SAAgB,gBAAgB,OAA0C;CACxE,MAAM,EAAE,UAAU,OAAO,WAAW,KAAK,GAAG,SAAS;CAOrD,OAAO,oBAAC,KAAD;EAAG,GANS,WAAW,MAAM;GAClC;GACA,OAAO,QAAQ,oBAAoB,SAAS;GAC5C,aAAa;EACf,CAEuB;EAAI;CAAY,CAAA;AACzC"}

package/dist/components/stat/stat.types.d.ts

@@ -0,0 +1,24 @@
+import { Ref } from "@askrjs/askr/foundations/utilities";
+
+//#region src/components/stat/stat.types.d.ts
+type DivProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref">;
+type ParagraphProps = Omit<JSX.IntrinsicElements["p"], "children" | "ref">;
+type StatProps = DivProps & {
+  children?: unknown;
+  ref?: Ref<HTMLDivElement>;
+};
+type StatLabelProps = ParagraphProps & {
+  children?: unknown;
+  ref?: Ref<HTMLParagraphElement>;
+};
+type StatValueProps = ParagraphProps & {
+  children?: unknown;
+  ref?: Ref<HTMLParagraphElement>;
+};
+type StatDescriptionProps = ParagraphProps & {
+  children?: unknown;
+  ref?: Ref<HTMLParagraphElement>;
+};
+//#endregion
+export { StatDescriptionProps, StatLabelProps, StatProps, StatValueProps };
+//# sourceMappingURL=stat.types.d.ts.map

package/dist/components/text/index.d.ts

@@ -0,0 +1,2 @@
+import { TextElement, TextFont, TextNumeric, TextProps, TextSize, TextTone, TextWeight, TextWrap } from "./text.types.js";
+import { Text } from "./text.js";

package/dist/components/text/text.d.ts

@@ -0,0 +1,7 @@
+import { TextElement, TextProps } from "./text.types.js";
+
+//#region src/components/text/text.d.ts
+declare function Text<TElement extends TextElement = "p">(props: TextProps<TElement>): JSX.Element;
+//#endregion
+export { Text };
+//# sourceMappingURL=text.d.ts.map

package/dist/components/text/text.js

@@ -0,0 +1,28 @@
+import { classes } from "../_internal/classes.js";
+import { mergeProps } from "../_internal/merge-props.js";
+import { jsx } from "@askrjs/askr/jsx-runtime";
+//#region src/components/text/text.tsx
+const DEFAULT_ELEMENT = "p";
+function Text(props) {
+	const { as, size = "md", tone = "default", weight, font, numeric, wrap, truncate, children, class: classProp, className, ref, ...rest } = props;
+	const finalProps = mergeProps(rest, {
+		ref,
+		class: classes("text", classProp, className),
+		"data-slot": "text",
+		"data-size": size,
+		"data-tone": tone,
+		"data-weight": weight,
+		"data-font": font && font !== "body" ? font : void 0,
+		"data-numeric": numeric && numeric !== "normal" ? numeric : void 0,
+		"data-wrap": wrap,
+		"data-truncate": truncate ? "true" : void 0
+	});
+	return /* @__PURE__ */ jsx(as ?? DEFAULT_ELEMENT, {
+		...finalProps,
+		children
+	});
+}
+//#endregion
+export { Text };
+
+//# sourceMappingURL=text.js.map

package/dist/components/text/text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.js","names":[],"sources":["../../../src/components/text/text.tsx"],"sourcesContent":["import { classes } from \"../_internal/classes\";\nimport { mergeProps } from \"../_internal/merge-props\";\nimport type { TextElement, TextProps } from \"./text.types\";\n\nconst DEFAULT_ELEMENT = \"p\";\n\nexport function Text<TElement extends TextElement = \"p\">(props: TextProps<TElement>): JSX.Element {\n  const {\n    as,\n    size = \"md\",\n    tone = \"default\",\n    weight,\n    font,\n    numeric,\n    wrap,\n    truncate,\n    children,\n    class: classProp,\n    className,\n    ref,\n    ...rest\n  } = props as TextProps<TextElement> & { class?: unknown; className?: unknown };\n\n  const finalProps = mergeProps(rest, {\n    ref,\n    class: classes(\"text\", classProp, className),\n    \"data-slot\": \"text\",\n    \"data-size\": size,\n    \"data-tone\": tone,\n    \"data-weight\": weight,\n    \"data-font\": font && font !== \"body\" ? font : undefined,\n    \"data-numeric\": numeric && numeric !== \"normal\" ? numeric : undefined,\n    \"data-wrap\": wrap,\n    \"data-truncate\": truncate ? \"true\" : undefined,\n  });\n\n  const Element = (as ?? DEFAULT_ELEMENT) as keyof JSX.IntrinsicElements;\n  return <Element {...finalProps}>{children}</Element>;\n}\n"],"mappings":";;;;AAIA,MAAM,kBAAkB;AAExB,SAAgB,KAAyC,OAAyC;CAChG,MAAM,EACJ,IACA,OAAO,MACP,OAAO,WACP,QACA,MACA,SACA,MACA,UACA,UACA,OAAO,WACP,WACA,KACA,GAAG,SACD;CAEJ,MAAM,aAAa,WAAW,MAAM;EAClC;EACA,OAAO,QAAQ,QAAQ,WAAW,SAAS;EAC3C,aAAa;EACb,aAAa;EACb,aAAa;EACb,eAAe;EACf,aAAa,QAAQ,SAAS,SAAS,OAAO,KAAA;EAC9C,gBAAgB,WAAW,YAAY,WAAW,UAAU,KAAA;EAC5D,aAAa;EACb,iBAAiB,WAAW,SAAS,KAAA;CACvC,CAAC;CAGD,OAAO,oBADU,MAAM,iBAChB;EAAS,GAAI;EAAa;CAAkB,CAAA;AACrD"}

package/dist/components/text/text.types.d.ts

@@ -0,0 +1,26 @@
+import { Ref } from "@askrjs/askr/foundations/utilities";
+
+//#region src/components/text/text.types.d.ts
+type TextElement = "p" | "span" | "div" | "strong";
+type TextSize = "sm" | "md" | "lg";
+type TextTone = "default" | "muted" | "subtle" | "inverse" | "success" | "warning" | "danger" | "info";
+type TextWeight = "normal" | "medium" | "semibold" | "bold";
+type TextFont = "body" | "mono";
+type TextNumeric = "normal" | "tabular";
+type TextWrap = "normal" | "nowrap" | "anywhere";
+type TextIntrinsicProps<TElement extends TextElement> = Omit<JSX.IntrinsicElements[TElement], "children" | "ref">;
+type TextProps<TElement extends TextElement = "p"> = TextIntrinsicProps<TElement> & {
+  as?: TElement;
+  size?: TextSize;
+  tone?: TextTone;
+  weight?: TextWeight;
+  font?: TextFont;
+  numeric?: TextNumeric;
+  wrap?: TextWrap;
+  truncate?: boolean;
+  children?: unknown;
+  ref?: Ref<HTMLElement>;
+};
+//#endregion
+export { TextElement, TextFont, TextNumeric, TextProps, TextSize, TextTone, TextWeight, TextWrap };
+//# sourceMappingURL=text.types.d.ts.map

package/dist/components/theme/theme.js

@@ -1,6 +1,6 @@
 import { Button } from "@askrjs/ui";
 import { jsx, jsxs } from "@askrjs/askr/jsx-runtime";
-import { defineContext, readContext, state } from "@askrjs/askr";
+import { defineContext, getSignal, readContext, state } from "@askrjs/askr";
 import { resource } from "@askrjs/askr/resources";
 //#region src/components/theme/theme.tsx
 const CAT_THEME_NAMES = [
@@ -47,6 +47,11 @@ const CAT_THEME_OPTIONS = [
 	}
 ];
 const DEFAULT_STORAGE_KEY = "askr-theme";
+const STATIC_CHILDREN = Symbol.for("askr.static-children");
+const STATIC_CHILD_SLOTS_CACHE = Symbol.for("__askrStaticChildSlots");
+let rootThemeRevision = 0;
+let explicitRootThemeOwner;
+const registeredProviderSignals = /* @__PURE__ */ new WeakSet();
 const ThemeContext = defineContext({
 	theme: () => "system",
 	setTheme: () => void 0,
@@ -58,11 +63,21 @@ function useTheme() {
 }
 function ThemeProvider(props) {
 	const { children, defaultTheme = "system", themes = DEFAULT_THEME_OPTIONS, storageKey = DEFAULT_STORAGE_KEY } = props;
+	const providerId = state(Symbol("ThemeProvider"))();
+	const providerSignal = getSignal();
 	const themeState = state(readStoredTheme(storageKey) ?? defaultTheme);
 	const currentTheme = themeState();
+	if (!registeredProviderSignals.has(providerSignal)) {
+		registeredProviderSignals.add(providerSignal);
+		providerSignal.addEventListener("abort", () => {
+			if (explicitRootThemeOwner === providerId) explicitRootThemeOwner = void 0;
+		}, { once: true });
+	}
 	const setTheme = (nextTheme) => {
 		themeState.set(nextTheme);
 		writeStoredTheme(storageKey, nextTheme);
+		explicitRootThemeOwner = providerId;
+		rootThemeRevision += 1;
 		syncThemeRoot(nextTheme);
 	};
 	const value = {
@@ -73,21 +88,29 @@ function ThemeProvider(props) {
 	};
 	return /* @__PURE__ */ jsxs(ThemeContext.Scope, {
 		value,
-		children: [/* @__PURE__ */ jsx(ThemeRootSync, { theme: currentTheme }), /* @__PURE__ */ jsx("div", {
+		children: [/* @__PURE__ */ jsx(ThemeRootSync, {
+			providerId,
+			theme: currentTheme
+		}), /* @__PURE__ */ jsx("div", {
 			"data-slot": "theme-provider",
 			children
 		})]
 	});
 }
 function ThemeRootSync(props) {
-	const { theme } = props;
+	const { providerId, theme } = props;
+	const expectedRootThemeRevision = rootThemeRevision;
 	resource(({ signal }) => {
 		if (typeof window === "undefined") {
 			syncThemeRoot(theme);
 			return null;
 		}
 		const timeoutId = window.setTimeout(() => {
-			if (!signal.aborted) syncThemeRoot(theme);
+			if (!signal.aborted) syncThemeRoot(theme, {
+				expectedRevision: expectedRootThemeRevision,
+				passive: true,
+				providerId
+			});
 		}, 0);
 		signal.addEventListener("abort", () => {
 			window.clearTimeout(timeoutId);
@@ -99,26 +122,39 @@ function ThemeRootSync(props) {
 function ThemePicker(props) {
 	const theme = useTheme();
 	const { themes = theme.themes, label = "Theme", ...rest } = props;
+	const currentTheme = theme.theme();
 	return /* @__PURE__ */ jsx("select", {
 		...rest,
 		"aria-label": rest["aria-label"] ?? label,
 		"data-slot": "theme-picker",
-		value: theme.theme(),
+		value: currentTheme,
 		onChange: (event) => {
-			const target = event.currentTarget;
-			theme.setTheme(target.value);
+			const target = getThemePickerTarget(event);
+			if (target) theme.setTheme(target.value);
 		},
 		children: themes.map((option) => /* @__PURE__ */ jsx("option", {
 			value: option.value,
+			selected: option.value === currentTheme,
 			children: option.label
 		}, option.value))
 	});
 }
+function getThemePickerTarget(event) {
+	if (typeof HTMLSelectElement === "undefined") return null;
+	const path = typeof event.composedPath === "function" ? event.composedPath() : [];
+	const candidates = [
+		event.target,
+		event.currentTarget,
+		...path
+	];
+	for (const candidate of candidates) if (candidate instanceof HTMLSelectElement) return candidate;
+	return null;
+}
 function ThemeToggle(props) {
 	const theme = useTheme();
 	const { children, lightIcon, darkIcon, systemIcon, themes = ["light", "dark"], onPress, ...rest } = props;
 	const currentTheme = theme.theme();
-	const nextTheme = getNextTheme(currentTheme, themes);
+	const nextTheme = getNextTheme(currentTheme, themes, getResolvedSystemTheme());
 	const renderContext = {
 		theme: currentTheme,
 		nextTheme
@@ -128,8 +164,13 @@ function ThemeToggle(props) {
 		lightIcon,
 		darkIcon,
 		systemIcon
-	}));
-	const content = typeof children === "function" ? children(renderContext) : children ?? renderedIcon;
+	}), currentTheme);
+	const renderedIconSlots = renderThemeToggleIconSlots(currentTheme, {
+		lightIcon,
+		darkIcon,
+		systemIcon
+	}) ?? renderedIcon;
+	const content = typeof children === "function" ? children(renderContext) : children ?? renderedIconSlots;
 	return /* @__PURE__ */ jsx(Button, {
 		...rest,
 		"aria-label": typeof ariaLabel === "string" ? ariaLabel : `Switch to ${nextTheme} theme`,
@@ -138,7 +179,7 @@ function ThemeToggle(props) {
 		"data-next-theme": nextTheme,
 		onPress: (event) => {
 			onPress?.(event);
-			if (!event.defaultPrevented) theme.setTheme(nextTheme);
+			if (!event.defaultPrevented && !Object.is(nextTheme, currentTheme)) theme.setTheme(nextTheme);
 		},
 		children: /* @__PURE__ */ jsx("span", {
 			"data-slot": "theme-toggle-content",
@@ -146,11 +187,18 @@ function ThemeToggle(props) {
 		})
 	});
 }
-function getNextTheme(currentTheme, themes) {
+function getNextTheme(currentTheme, themes, resolvedSystemTheme = "light") {
 	if (themes.length === 0) return currentTheme;
 	const index = themes.indexOf(currentTheme);
+	if (index < 0 && currentTheme === "system") {
+		if (themes.includes("light") && themes.includes("dark")) return resolvedSystemTheme === "dark" ? "light" : "dark";
+	}
 	return themes[index >= 0 && index < themes.length - 1 ? index + 1 : 0];
 }
+function getResolvedSystemTheme() {
+	if (typeof window === "undefined" || typeof window.matchMedia !== "function") return "light";
+	return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
 function getThemeIcon(theme, icons) {
 	if (theme === "light") return icons.lightIcon;
 	if (theme === "dark") return icons.darkIcon;
@@ -159,21 +207,51 @@ function getThemeIcon(theme, icons) {
 function resolveThemeToggleIcon(theme, nextTheme, icons) {
 	return getThemeIcon(theme, icons) ?? getThemeIcon(nextTheme, icons);
 }
+function renderThemeToggleIconSlots(theme, icons) {
+	if (getThemeIcon(theme, icons) === void 0) return;
+	const availableSlots = [
+		["light", icons.lightIcon],
+		["dark", icons.darkIcon],
+		["system", icons.systemIcon]
+	].filter(([, icon]) => icon !== void 0 && icon !== null);
+	if (availableSlots.length <= 1) return;
+	return availableSlots.map(([slotTheme, icon]) => /* @__PURE__ */ jsx("span", {
+		"data-slot": "theme-toggle-icon",
+		"data-theme-toggle-icon": slotTheme,
+		hidden: slotTheme === theme ? void 0 : true,
+		children: cloneThemeToggleIcon(icon, slotTheme)
+	}, slotTheme));
+}
 function isJSXElement(value) {
 	return typeof value === "object" && value !== null && "$$typeof" in value && "type" in value && "props" in value;
 }
-function cloneThemeToggleIcon(icon) {
+function cloneThemeToggleIcon(icon, key) {
+	if (Array.isArray(icon)) {
+		const clonedChildren = icon.map((child) => cloneThemeToggleIcon(child));
+		if (icon[STATIC_CHILDREN] === true) Object.defineProperty(clonedChildren, STATIC_CHILDREN, {
+			value: true,
+			configurable: true
+		});
+		return clonedChildren;
+	}
 	if (!isJSXElement(icon)) return icon;
 	const props = icon.props;
-	if (!props || Object.keys(props).length === 0) return icon;
-	return {
+	const clonedProps = props ? { ...props } : {};
+	if ("children" in clonedProps) clonedProps.children = cloneThemeToggleIcon(clonedProps.children);
+	const iconKey = icon.key ?? key ?? null;
+	const clonedIcon = {
 		...icon,
-		props: { ...props }
+		key: iconKey,
+		props: clonedProps
 	};
+	delete clonedIcon[STATIC_CHILD_SLOTS_CACHE];
+	return clonedIcon;
 }
-function syncThemeRoot(themeChoice) {
+function syncThemeRoot(themeChoice, options) {
 	if (typeof document === "undefined") return;
 	const html = document.documentElement;
+	if (options?.passive && options.expectedRevision !== void 0 && options.expectedRevision !== rootThemeRevision) return;
+	if (options?.passive && explicitRootThemeOwner !== void 0 && explicitRootThemeOwner !== options.providerId) return;
 	if (themeChoice == null) {
 		html.removeAttribute("data-theme");
 		html.removeAttribute("data-theme-choice");
@@ -186,7 +264,8 @@ function syncThemeRoot(themeChoice) {
 function readStoredTheme(storageKey) {
 	if (typeof window === "undefined") return void 0;
 	try {
-		return window.localStorage.getItem(storageKey) ?? void 0;
+		const storedTheme = window.localStorage.getItem(storageKey);
+		return storedTheme ? storedTheme : void 0;
 	} catch {
 		return;
 	}

package/dist/components/theme/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","names":[],"sources":["../../../src/components/theme/theme.tsx"],"sourcesContent":["import { defineContext, readContext, state } from \"@askrjs/askr\";\nimport type { JSXElement } from \"@askrjs/askr/foundations/structures\";\nimport { resource } from \"@askrjs/askr/resources\";\nimport { Button } from \"@askrjs/ui\";\nimport type { ButtonNativeProps, PressEvent } from \"@askrjs/ui\";\n\nexport const CAT_THEME_NAMES = [\"tabby\", \"ginger\", \"tuxedo\", \"calico\", \"torty\"] as const;\n\nexport type CatThemeName = (typeof CAT_THEME_NAMES)[number];\nexport type ThemeName = \"light\" | \"dark\" | \"system\" | CatThemeName | (string & {});\n\nexport type ThemeOption = {\n  value: ThemeName;\n  label: string;\n};\n\nexport type ThemeContextValue = {\n  theme: () => ThemeName;\n  setTheme: (theme: ThemeName) => void;\n  themes: readonly ThemeOption[];\n  storageKey: string;\n};\n\nexport type ThemeProviderProps = {\n  children?: unknown;\n  defaultTheme?: ThemeName;\n  themes?: readonly ThemeOption[];\n  storageKey?: string;\n};\n\nexport type ThemePickerProps = Omit<\n  JSX.IntrinsicElements[\"select\"],\n  \"children\" | \"value\" | \"defaultValue\" | \"onChange\"\n> & {\n  themes?: readonly ThemeOption[];\n  label?: string;\n};\n\nexport type ThemeToggleRenderContext = {\n  theme: ThemeName;\n  nextTheme: ThemeName;\n};\n\nexport type ThemeToggleProps = Omit<ButtonNativeProps, \"children\" | \"onPress\"> & {\n  children?: unknown | ((context: ThemeToggleRenderContext) => unknown);\n  lightIcon?: unknown;\n  darkIcon?: unknown;\n  systemIcon?: unknown;\n  themes?: readonly ThemeName[];\n  onPress?: (event: PressEvent) => void;\n};\n\nexport const DEFAULT_THEME_OPTIONS: readonly ThemeOption[] = [\n  { value: \"system\", label: \"System\" },\n  { value: \"light\", label: \"Light\" },\n  { value: \"dark\", label: \"Dark\" },\n];\n\nexport const CAT_THEME_OPTIONS: readonly ThemeOption[] = [\n  { value: \"tabby\", label: \"Tabby\" },\n  { value: \"ginger\", label: \"Ginger\" },\n  { value: \"tuxedo\", label: \"Tuxedo\" },\n  { value: \"calico\", label: \"Calico\" },\n  { value: \"torty\", label: \"Torty\" },\n];\n\nconst DEFAULT_STORAGE_KEY = \"askr-theme\";\n\nconst ThemeContext = defineContext<ThemeContextValue>({\n  theme: () => \"system\",\n  setTheme: () => undefined,\n  themes: DEFAULT_THEME_OPTIONS,\n  storageKey: DEFAULT_STORAGE_KEY,\n});\n\nexport function useTheme(): ThemeContextValue {\n  return readContext(ThemeContext);\n}\n\nexport function ThemeProvider(props: ThemeProviderProps): JSX.Element {\n  const {\n    children,\n    defaultTheme = \"system\",\n    themes = DEFAULT_THEME_OPTIONS,\n    storageKey = DEFAULT_STORAGE_KEY,\n  } = props;\n\n  const themeState = state<ThemeName>(readStoredTheme(storageKey) ?? defaultTheme);\n  const currentTheme = themeState();\n\n  const setTheme = (nextTheme: ThemeName) => {\n    themeState.set(nextTheme);\n    writeStoredTheme(storageKey, nextTheme);\n    syncThemeRoot(nextTheme);\n  };\n\n  const value: ThemeContextValue = {\n    theme: themeState,\n    setTheme,\n    themes,\n    storageKey,\n  };\n\n  return (\n    <ThemeContext.Scope value={value}>\n      <ThemeRootSync theme={currentTheme} />\n      <div data-slot=\"theme-provider\">{children}</div>\n    </ThemeContext.Scope>\n  );\n}\n\nfunction ThemeRootSync(props: { theme: ThemeName }): JSX.Element | null {\n  const { theme } = props;\n\n  resource(\n    ({ signal }: { signal: AbortSignal }) => {\n      if (typeof window === \"undefined\") {\n        syncThemeRoot(theme);\n        return null;\n      }\n\n      const timeoutId = window.setTimeout(() => {\n        if (!signal.aborted) {\n          syncThemeRoot(theme);\n        }\n      }, 0);\n\n      signal.addEventListener(\n        \"abort\",\n        () => {\n          window.clearTimeout(timeoutId);\n        },\n        { once: true },\n      );\n\n      return null;\n    },\n    [theme],\n  );\n\n  return null;\n}\n\nexport function ThemePicker(props: ThemePickerProps): JSX.Element {\n  const theme = useTheme();\n  const { themes = theme.themes, label = \"Theme\", ...rest } = props;\n\n  return (\n    <select\n      {...rest}\n      aria-label={rest[\"aria-label\"] ?? label}\n      data-slot=\"theme-picker\"\n      value={theme.theme()}\n      onChange={(event: Event) => {\n        const target = event.currentTarget as HTMLSelectElement;\n        theme.setTheme(target.value as ThemeName);\n      }}\n    >\n      {themes.map((option) => (\n        <option key={option.value} value={option.value}>\n          {option.label}\n        </option>\n      ))}\n    </select>\n  );\n}\n\nexport function ThemeToggle(props: ThemeToggleProps): JSX.Element {\n  const theme = useTheme();\n  const {\n    children,\n    lightIcon,\n    darkIcon,\n    systemIcon,\n    themes = [\"light\", \"dark\"],\n    onPress,\n    ...rest\n  } = props;\n\n  const currentTheme = theme.theme();\n  const nextTheme = getNextTheme(currentTheme, themes);\n  const renderContext = { theme: currentTheme, nextTheme };\n  const ariaLabel = (rest as Record<string, unknown>)[\"aria-label\"];\n  const themedIcon = resolveThemeToggleIcon(currentTheme, nextTheme, {\n    lightIcon,\n    darkIcon,\n    systemIcon,\n  });\n  const renderedIcon = cloneThemeToggleIcon(themedIcon);\n  const content =\n    typeof children === \"function\" ? children(renderContext) : (children ?? renderedIcon);\n\n  return (\n    <Button\n      {...(rest as ButtonNativeProps)}\n      aria-label={typeof ariaLabel === \"string\" ? ariaLabel : `Switch to ${nextTheme} theme`}\n      data-theme-control=\"toggle\"\n      data-theme-choice={currentTheme}\n      data-next-theme={nextTheme}\n      onPress={(event) => {\n        onPress?.(event);\n        if (!event.defaultPrevented) theme.setTheme(nextTheme);\n      }}\n    >\n      <span data-slot=\"theme-toggle-content\">{content}</span>\n    </Button>\n  );\n}\n\nfunction getNextTheme(currentTheme: ThemeName, themes: readonly ThemeName[]): ThemeName {\n  if (themes.length === 0) return currentTheme;\n  const index = themes.indexOf(currentTheme);\n  return themes[index >= 0 && index < themes.length - 1 ? index + 1 : 0]!;\n}\n\nfunction getThemeIcon(\n  theme: ThemeName,\n  icons: Pick<ThemeToggleProps, \"lightIcon\" | \"darkIcon\" | \"systemIcon\">,\n): unknown {\n  if (theme === \"light\") return icons.lightIcon;\n  if (theme === \"dark\") return icons.darkIcon;\n  if (theme === \"system\") return icons.systemIcon;\n  return undefined;\n}\n\nexport function resolveThemeToggleIcon(\n  theme: ThemeName,\n  nextTheme: ThemeName,\n  icons: Pick<ThemeToggleProps, \"lightIcon\" | \"darkIcon\" | \"systemIcon\">,\n): unknown {\n  return getThemeIcon(theme, icons) ?? getThemeIcon(nextTheme, icons);\n}\n\nfunction isJSXElement(value: unknown): value is JSXElement {\n  return (\n    typeof value === \"object\" &&\n    value !== null &&\n    \"$$typeof\" in value &&\n    \"type\" in value &&\n    \"props\" in value\n  );\n}\n\nfunction cloneThemeToggleIcon(icon: unknown): unknown {\n  if (!isJSXElement(icon)) return icon;\n\n  const props = icon.props as Record<string, unknown> | undefined;\n  if (!props || Object.keys(props).length === 0) {\n    return icon;\n  }\n\n  return {\n    ...icon,\n    props: { ...props },\n  };\n}\n\nfunction syncThemeRoot(themeChoice: ThemeName | null | undefined): void {\n  if (typeof document === \"undefined\") {\n    return;\n  }\n\n  const html = document.documentElement;\n\n  if (themeChoice == null) {\n    html.removeAttribute(\"data-theme\");\n    html.removeAttribute(\"data-theme-choice\");\n    return;\n  }\n\n  html.setAttribute(\"data-theme-choice\", themeChoice);\n\n  if (themeChoice === \"system\") {\n    html.removeAttribute(\"data-theme\");\n  } else {\n    html.setAttribute(\"data-theme\", themeChoice);\n  }\n}\n\nfunction readStoredTheme(storageKey: string): ThemeName | undefined {\n  if (typeof window === \"undefined\") return undefined;\n  try {\n    return (window.localStorage.getItem(storageKey) as ThemeName | null) ?? undefined;\n  } catch {\n    return undefined;\n  }\n}\n\nfunction writeStoredTheme(storageKey: string, theme: ThemeName): void {\n  if (typeof window === \"undefined\") return;\n  try {\n    window.localStorage.setItem(storageKey, theme);\n  } catch {\n    // Storage can be unavailable in private or locked-down browser contexts.\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"theme.js","names":[],"sources":["../../../src/components/theme/theme.tsx"],"sourcesContent":["import { defineContext, getSignal, readContext, state } from \"@askrjs/askr\";\nimport type { JSXElement } from \"@askrjs/askr/foundations/structures\";\nimport { resource } from \"@askrjs/askr/resources\";\nimport { Button } from \"@askrjs/ui\";\nimport type { ButtonNativeProps, PressEvent } from \"@askrjs/ui\";\n\nexport const CAT_THEME_NAMES = [\"tabby\", \"ginger\", \"tuxedo\", \"calico\", \"torty\"] as const;\n\nexport type CatThemeName = (typeof CAT_THEME_NAMES)[number];\nexport type ThemeName = \"light\" | \"dark\" | \"system\" | CatThemeName | (string & {});\n\nexport type ThemeOption = {\n  value: ThemeName;\n  label: string;\n};\n\nexport type ThemeContextValue = {\n  theme: () => ThemeName;\n  setTheme: (theme: ThemeName) => void;\n  themes: readonly ThemeOption[];\n  storageKey: string;\n};\n\nexport type ThemeProviderProps = {\n  children?: unknown;\n  defaultTheme?: ThemeName;\n  themes?: readonly ThemeOption[];\n  storageKey?: string;\n};\n\nexport type ThemePickerProps = Omit<\n  JSX.IntrinsicElements[\"select\"],\n  \"children\" | \"value\" | \"defaultValue\" | \"onChange\"\n> & {\n  themes?: readonly ThemeOption[];\n  label?: string;\n};\n\nexport type ThemeToggleRenderContext = {\n  theme: ThemeName;\n  nextTheme: ThemeName;\n};\n\nexport type ThemeToggleProps = Omit<ButtonNativeProps, \"children\" | \"onPress\"> & {\n  children?: unknown | ((context: ThemeToggleRenderContext) => unknown);\n  lightIcon?: unknown;\n  darkIcon?: unknown;\n  systemIcon?: unknown;\n  themes?: readonly ThemeName[];\n  onPress?: (event: PressEvent) => void;\n};\n\nexport const DEFAULT_THEME_OPTIONS: readonly ThemeOption[] = [\n  { value: \"system\", label: \"System\" },\n  { value: \"light\", label: \"Light\" },\n  { value: \"dark\", label: \"Dark\" },\n];\n\nexport const CAT_THEME_OPTIONS: readonly ThemeOption[] = [\n  { value: \"tabby\", label: \"Tabby\" },\n  { value: \"ginger\", label: \"Ginger\" },\n  { value: \"tuxedo\", label: \"Tuxedo\" },\n  { value: \"calico\", label: \"Calico\" },\n  { value: \"torty\", label: \"Torty\" },\n];\n\nconst DEFAULT_STORAGE_KEY = \"askr-theme\";\nconst STATIC_CHILDREN = Symbol.for(\"askr.static-children\");\nconst STATIC_CHILD_SLOTS_CACHE = Symbol.for(\"__askrStaticChildSlots\");\n// Passive mount sync should not overwrite a newer user/provider-initiated change.\nlet rootThemeRevision = 0;\nlet explicitRootThemeOwner: symbol | undefined;\nconst registeredProviderSignals = new WeakSet<AbortSignal>();\n\nconst ThemeContext = defineContext<ThemeContextValue>({\n  theme: () => \"system\",\n  setTheme: () => undefined,\n  themes: DEFAULT_THEME_OPTIONS,\n  storageKey: DEFAULT_STORAGE_KEY,\n});\n\nexport function useTheme(): ThemeContextValue {\n  return readContext(ThemeContext);\n}\n\nexport function ThemeProvider(props: ThemeProviderProps): JSX.Element {\n  const {\n    children,\n    defaultTheme = \"system\",\n    themes = DEFAULT_THEME_OPTIONS,\n    storageKey = DEFAULT_STORAGE_KEY,\n  } = props;\n\n  const providerId = state<symbol>(Symbol(\"ThemeProvider\"))();\n  const providerSignal = getSignal();\n  const themeState = state<ThemeName>(readStoredTheme(storageKey) ?? defaultTheme);\n  const currentTheme = themeState();\n\n  if (!registeredProviderSignals.has(providerSignal)) {\n    registeredProviderSignals.add(providerSignal);\n    providerSignal.addEventListener(\n      \"abort\",\n      () => {\n        if (explicitRootThemeOwner === providerId) {\n          explicitRootThemeOwner = undefined;\n        }\n      },\n      { once: true },\n    );\n  }\n\n  const setTheme = (nextTheme: ThemeName) => {\n    themeState.set(nextTheme);\n    writeStoredTheme(storageKey, nextTheme);\n    explicitRootThemeOwner = providerId;\n    rootThemeRevision += 1;\n    syncThemeRoot(nextTheme);\n  };\n\n  const value: ThemeContextValue = {\n    theme: themeState,\n    setTheme,\n    themes,\n    storageKey,\n  };\n\n  return (\n    <ThemeContext.Scope value={value}>\n      <ThemeRootSync providerId={providerId} theme={currentTheme} />\n      <div data-slot=\"theme-provider\">{children}</div>\n    </ThemeContext.Scope>\n  );\n}\n\nfunction ThemeRootSync(props: { providerId: symbol; theme: ThemeName }): JSX.Element | null {\n  const { providerId, theme } = props;\n  const expectedRootThemeRevision = rootThemeRevision;\n\n  resource(\n    ({ signal }: { signal: AbortSignal }) => {\n      if (typeof window === \"undefined\") {\n        syncThemeRoot(theme);\n        return null;\n      }\n\n      const timeoutId = window.setTimeout(() => {\n        if (!signal.aborted) {\n          syncThemeRoot(theme, {\n            expectedRevision: expectedRootThemeRevision,\n            passive: true,\n            providerId,\n          });\n        }\n      }, 0);\n\n      signal.addEventListener(\n        \"abort\",\n        () => {\n          window.clearTimeout(timeoutId);\n        },\n        { once: true },\n      );\n\n      return null;\n    },\n    [theme],\n  );\n\n  return null;\n}\n\nexport function ThemePicker(props: ThemePickerProps): JSX.Element {\n  const theme = useTheme();\n  const { themes = theme.themes, label = \"Theme\", ...rest } = props;\n  const currentTheme = theme.theme();\n\n  return (\n    <select\n      {...rest}\n      aria-label={rest[\"aria-label\"] ?? label}\n      data-slot=\"theme-picker\"\n      value={currentTheme}\n      onChange={(event: Event) => {\n        const target = getThemePickerTarget(event);\n        if (target) {\n          theme.setTheme(target.value as ThemeName);\n        }\n      }}\n    >\n      {themes.map((option) => (\n        <option key={option.value} value={option.value} selected={option.value === currentTheme}>\n          {option.label}\n        </option>\n      ))}\n    </select>\n  );\n}\n\nfunction getThemePickerTarget(event: Event): HTMLSelectElement | null {\n  if (typeof HTMLSelectElement === \"undefined\") {\n    return null;\n  }\n\n  const path = typeof event.composedPath === \"function\" ? event.composedPath() : [];\n  const candidates = [event.target, event.currentTarget, ...path];\n\n  for (const candidate of candidates) {\n    if (candidate instanceof HTMLSelectElement) {\n      return candidate;\n    }\n  }\n\n  return null;\n}\n\nexport function ThemeToggle(props: ThemeToggleProps): JSX.Element {\n  const theme = useTheme();\n  const {\n    children,\n    lightIcon,\n    darkIcon,\n    systemIcon,\n    themes = [\"light\", \"dark\"],\n    onPress,\n    ...rest\n  } = props;\n\n  const currentTheme = theme.theme();\n  const nextTheme = getNextTheme(currentTheme, themes, getResolvedSystemTheme());\n  const renderContext = { theme: currentTheme, nextTheme };\n  const ariaLabel = (rest as Record<string, unknown>)[\"aria-label\"];\n  const themedIcon = resolveThemeToggleIcon(currentTheme, nextTheme, {\n    lightIcon,\n    darkIcon,\n    systemIcon,\n  });\n  const renderedIcon = cloneThemeToggleIcon(themedIcon, currentTheme);\n  const renderedIconSlots =\n    renderThemeToggleIconSlots(currentTheme, {\n      lightIcon,\n      darkIcon,\n      systemIcon,\n    }) ?? renderedIcon;\n  const content =\n    typeof children === \"function\" ? children(renderContext) : (children ?? renderedIconSlots);\n\n  return (\n    <Button\n      {...(rest as ButtonNativeProps)}\n      aria-label={typeof ariaLabel === \"string\" ? ariaLabel : `Switch to ${nextTheme} theme`}\n      data-theme-control=\"toggle\"\n      data-theme-choice={currentTheme}\n      data-next-theme={nextTheme}\n      onPress={(event) => {\n        onPress?.(event);\n        if (!event.defaultPrevented && !Object.is(nextTheme, currentTheme)) {\n          theme.setTheme(nextTheme);\n        }\n      }}\n    >\n      <span data-slot=\"theme-toggle-content\">{content}</span>\n    </Button>\n  );\n}\n\nfunction getNextTheme(\n  currentTheme: ThemeName,\n  themes: readonly ThemeName[],\n  resolvedSystemTheme: \"light\" | \"dark\" = \"light\",\n): ThemeName {\n  if (themes.length === 0) return currentTheme;\n  const index = themes.indexOf(currentTheme);\n  if (index < 0 && currentTheme === \"system\") {\n    if (themes.includes(\"light\") && themes.includes(\"dark\")) {\n      return resolvedSystemTheme === \"dark\" ? \"light\" : \"dark\";\n    }\n  }\n  return themes[index >= 0 && index < themes.length - 1 ? index + 1 : 0]!;\n}\n\nfunction getResolvedSystemTheme(): \"light\" | \"dark\" {\n  if (typeof window === \"undefined\" || typeof window.matchMedia !== \"function\") {\n    return \"light\";\n  }\n\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches ? \"dark\" : \"light\";\n}\n\nfunction getThemeIcon(\n  theme: ThemeName,\n  icons: Pick<ThemeToggleProps, \"lightIcon\" | \"darkIcon\" | \"systemIcon\">,\n): unknown {\n  if (theme === \"light\") return icons.lightIcon;\n  if (theme === \"dark\") return icons.darkIcon;\n  if (theme === \"system\") return icons.systemIcon;\n  return undefined;\n}\n\nexport function resolveThemeToggleIcon(\n  theme: ThemeName,\n  nextTheme: ThemeName,\n  icons: Pick<ThemeToggleProps, \"lightIcon\" | \"darkIcon\" | \"systemIcon\">,\n): unknown {\n  return getThemeIcon(theme, icons) ?? getThemeIcon(nextTheme, icons);\n}\n\nfunction renderThemeToggleIconSlots(\n  theme: ThemeName,\n  icons: Pick<ThemeToggleProps, \"lightIcon\" | \"darkIcon\" | \"systemIcon\">,\n): unknown {\n  if (getThemeIcon(theme, icons) === undefined) {\n    return undefined;\n  }\n\n  const slots = [\n    [\"light\", icons.lightIcon],\n    [\"dark\", icons.darkIcon],\n    [\"system\", icons.systemIcon],\n  ] as const;\n  const availableSlots = slots.filter(([, icon]) => icon !== undefined && icon !== null);\n\n  if (availableSlots.length <= 1) {\n    return undefined;\n  }\n\n  return availableSlots.map(([slotTheme, icon]) => (\n    <span\n      key={slotTheme}\n      data-slot=\"theme-toggle-icon\"\n      data-theme-toggle-icon={slotTheme}\n      hidden={slotTheme === theme ? undefined : true}\n    >\n      {cloneThemeToggleIcon(icon, slotTheme)}\n    </span>\n  ));\n}\n\nfunction isJSXElement(value: unknown): value is JSXElement {\n  return (\n    typeof value === \"object\" &&\n    value !== null &&\n    \"$$typeof\" in value &&\n    \"type\" in value &&\n    \"props\" in value\n  );\n}\n\nfunction cloneThemeToggleIcon(icon: unknown, key?: string): unknown {\n  if (Array.isArray(icon)) {\n    const clonedChildren = icon.map((child) => cloneThemeToggleIcon(child));\n    if ((icon as Record<symbol, unknown>)[STATIC_CHILDREN] === true) {\n      Object.defineProperty(clonedChildren, STATIC_CHILDREN, {\n        value: true,\n        configurable: true,\n      });\n    }\n    return clonedChildren;\n  }\n\n  if (!isJSXElement(icon)) return icon;\n\n  const props = icon.props as Record<string, unknown> | undefined;\n  const clonedProps = props ? { ...props } : {};\n\n  if (\"children\" in clonedProps) {\n    clonedProps.children = cloneThemeToggleIcon(clonedProps.children);\n  }\n\n  const iconKey = (icon.key ?? key ?? null) as string | number | null;\n  const clonedIcon = {\n    ...icon,\n    key: iconKey,\n    props: clonedProps,\n  };\n\n  delete (clonedIcon as Record<symbol, unknown>)[STATIC_CHILD_SLOTS_CACHE];\n  return clonedIcon;\n}\n\nfunction syncThemeRoot(\n  themeChoice: ThemeName | null | undefined,\n  options?: { expectedRevision?: number; passive?: boolean; providerId?: symbol },\n): void {\n  if (typeof document === \"undefined\") {\n    return;\n  }\n\n  const html = document.documentElement;\n\n  if (\n    options?.passive &&\n    options.expectedRevision !== undefined &&\n    options.expectedRevision !== rootThemeRevision\n  ) {\n    return;\n  }\n\n  if (\n    options?.passive &&\n    explicitRootThemeOwner !== undefined &&\n    explicitRootThemeOwner !== options.providerId\n  ) {\n    return;\n  }\n\n  if (themeChoice == null) {\n    html.removeAttribute(\"data-theme\");\n    html.removeAttribute(\"data-theme-choice\");\n    return;\n  }\n\n  html.setAttribute(\"data-theme-choice\", themeChoice);\n\n  if (themeChoice === \"system\") {\n    html.removeAttribute(\"data-theme\");\n  } else {\n    html.setAttribute(\"data-theme\", themeChoice);\n  }\n}\n\nfunction readStoredTheme(storageKey: string): ThemeName | undefined {\n  if (typeof window === \"undefined\") return undefined;\n  try {\n    const storedTheme = window.localStorage.getItem(storageKey);\n    return storedTheme ? (storedTheme as ThemeName) : undefined;\n  } catch {\n    return undefined;\n  }\n}\n\nfunction writeStoredTheme(storageKey: string, theme: ThemeName): void {\n  if (typeof window === \"undefined\") return;\n  try {\n    window.localStorage.setItem(storageKey, theme);\n  } catch {\n    // Storage can be unavailable in private or locked-down browser contexts.\n  }\n}\n"],"mappings":"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"}

package/dist/components/toolbar/index.d.ts

@@ -0,0 +1,2 @@
+import { ToolbarProps } from "./toolbar.types.js";
+import { Toolbar } from "./toolbar.js";

package/dist/components/toolbar/toolbar.d.ts

@@ -0,0 +1,7 @@
+import { ToolbarProps } from "./toolbar.types.js";
+
+//#region src/components/toolbar/toolbar.d.ts
+declare function Toolbar(props: ToolbarProps): JSX.Element;
+//#endregion
+export { Toolbar };
+//# sourceMappingURL=toolbar.d.ts.map

package/dist/components/toolbar/toolbar.js

@@ -0,0 +1,30 @@
+import { Block } from "../block/block.js";
+import { jsx, jsxs } from "@askrjs/askr/jsx-runtime";
+//#region src/components/toolbar/toolbar.tsx
+function Toolbar(props) {
+	const { title, actions, ...rest } = props;
+	return /* @__PURE__ */ jsxs(Block, {
+		rowFrom: "md",
+		align: {
+			base: "start",
+			md: "center"
+		},
+		justify: "between",
+		gap: "md",
+		...rest,
+		"data-slot": "toolbar",
+		children: [/* @__PURE__ */ jsx("h2", {
+			"data-slot": "toolbar-title",
+			children: title
+		}), actions !== void 0 ? /* @__PURE__ */ jsx(Block, {
+			direction: "row",
+			gap: "sm",
+			"data-slot": "toolbar-actions",
+			children: actions
+		}) : null]
+	});
+}
+//#endregion
+export { Toolbar };
+
+//# sourceMappingURL=toolbar.js.map

package/dist/components/toolbar/toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.js","names":[],"sources":["../../../src/components/toolbar/toolbar.tsx"],"sourcesContent":["import { Block } from \"../block\";\nimport type { ToolbarProps } from \"./toolbar.types\";\n\nexport function Toolbar(props: ToolbarProps): JSX.Element {\n  const { title, actions, ...rest } = props;\n\n  return (\n    <Block\n      rowFrom=\"md\"\n      align={{ base: \"start\", md: \"center\" }}\n      justify=\"between\"\n      gap=\"md\"\n      {...rest}\n      data-slot=\"toolbar\"\n    >\n      <h2 data-slot=\"toolbar-title\">{title}</h2>\n      {actions !== undefined ? (\n        <Block direction=\"row\" gap=\"sm\" data-slot=\"toolbar-actions\">\n          {actions}\n        </Block>\n      ) : null}\n    </Block>\n  );\n}\n"],"mappings":";;;AAGA,SAAgB,QAAQ,OAAkC;CACxD,MAAM,EAAE,OAAO,SAAS,GAAG,SAAS;CAEpC,OACE,qBAAC,OAAD;EACE,SAAQ;EACR,OAAO;GAAE,MAAM;GAAS,IAAI;EAAS;EACrC,SAAQ;EACR,KAAI;EACJ,GAAI;EACJ,aAAU;YANZ,CAQE,oBAAC,MAAD;GAAI,aAAU;aAAiB;EAAU,CAAA,GACxC,YAAY,KAAA,IACX,oBAAC,OAAD;GAAO,WAAU;GAAM,KAAI;GAAK,aAAU;aACvC;EACI,CAAA,IACL,IACC;;AAEX"}

package/dist/components/toolbar/toolbar.types.d.ts

@@ -0,0 +1,9 @@
+import { BlockDivProps } from "../block/block.types.js";
+//#region src/components/toolbar/toolbar.types.d.ts
+type ToolbarProps = BlockDivProps & {
+  title: unknown;
+  actions?: unknown;
+};
+//#endregion
+export { ToolbarProps };
+//# sourceMappingURL=toolbar.types.d.ts.map