@askrjs/themes 0.0.1

package/dist/skeleton/skeleton.js

@@ -0,0 +1,26 @@
+import { mergeProps } from "../_internal/merge-props.js";
+import { jsx } from "@askrjs/askr/jsx-runtime";
+import { Slot } from "@askrjs/askr/foundations";
+//#region src/components/skeleton/skeleton.tsx
+function Skeleton(props) {
+	const { asChild, children, ref, ...rest } = props;
+	const finalProps = mergeProps(rest, {
+		ref,
+		"data-slot": "skeleton",
+		"data-skeleton": "true",
+		"aria-hidden": "true"
+	});
+	if (asChild) return /* @__PURE__ */ jsx(Slot, {
+		asChild: true,
+		...finalProps,
+		children
+	});
+	return /* @__PURE__ */ jsx("div", {
+		...finalProps,
+		children
+	});
+}
+//#endregion
+export { Skeleton };
+
+//# sourceMappingURL=skeleton.js.map

package/dist/skeleton/skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.js","names":[],"sources":["../../src/components/skeleton/skeleton.tsx"],"sourcesContent":["import { Slot } from \"@askrjs/askr/foundations\";\nimport { mergeProps } from \"../_internal/merge-props\";\nimport type { SkeletonAsChildProps, SkeletonProps } from \"./skeleton.types\";\n\nexport function Skeleton(props: SkeletonProps): JSX.Element;\nexport function Skeleton(props: SkeletonAsChildProps): JSX.Element;\nexport function Skeleton(props: SkeletonProps | SkeletonAsChildProps) {\n  const { asChild, children, ref, ...rest } = props;\n  const finalProps = mergeProps(rest, {\n    ref,\n    \"data-slot\": \"skeleton\",\n    \"data-skeleton\": \"true\",\n    \"aria-hidden\": \"true\",\n  });\n\n  if (asChild) {\n    return <Slot asChild {...finalProps} children={children} />;\n  }\n\n  return <div {...finalProps}>{children}</div>;\n}\n"],"mappings":";;;;AAMA,SAAgB,SAAS,OAA6C;CACpE,MAAM,EAAE,SAAS,UAAU,KAAK,GAAG,SAAS;CAC5C,MAAM,aAAa,WAAW,MAAM;EAClC;EACA,aAAa;EACb,iBAAiB;EACjB,eAAe;EAChB,CAAC;AAEF,KAAI,QACF,QAAO,oBAAC,MAAD;EAAM,SAAA;EAAQ,GAAI;EAAsB;EAAY,CAAA;AAG7D,QAAO,oBAAC,OAAD;EAAK,GAAI;EAAa;EAAe,CAAA"}

package/dist/skeleton/skeleton.types.d.ts

@@ -0,0 +1,18 @@
+import { JSXElement, Ref } from "@askrjs/askr/foundations";
+
+//#region src/components/skeleton/skeleton.types.d.ts
+type SkeletonOwnProps = {
+  children?: unknown;
+};
+type SkeletonProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref"> & SkeletonOwnProps & {
+  asChild?: false;
+  ref?: Ref<HTMLDivElement>;
+};
+type SkeletonAsChildProps = SkeletonOwnProps & {
+  asChild: true;
+  children: JSXElement;
+  ref?: Ref<unknown>;
+};
+//#endregion
+export { SkeletonAsChildProps, SkeletonOwnProps, SkeletonProps };
+//# sourceMappingURL=skeleton.types.d.ts.map

package/dist/spacer/index.d.ts

@@ -0,0 +1,2 @@
+import { SpacerAsChildProps, SpacerAxis, SpacerNativeProps, SpacerOwnProps, SpacerProps } from "./spacer.types.js";
+import { Spacer } from "./spacer.js";

package/dist/spacer/spacer.d.ts

@@ -0,0 +1,8 @@
+import { SpacerAsChildProps, SpacerNativeProps } from "./spacer.types.js";
+
+//#region src/components/spacer/spacer.d.ts
+declare function Spacer(props: SpacerNativeProps): JSX.Element;
+declare function Spacer(props: SpacerAsChildProps): JSX.Element;
+//#endregion
+export { Spacer };
+//# sourceMappingURL=spacer.d.ts.map

package/dist/spacer/spacer.js

@@ -0,0 +1,47 @@
+import { mergeProps } from "../_internal/merge-props.js";
+import { isCssLength, mergeLayoutStyles } from "../_internal/layout.js";
+import { isJsxElement, toChildArray } from "../_internal/jsx.js";
+import { jsx } from "@askrjs/askr/jsx-runtime";
+import { Slot } from "@askrjs/askr/foundations";
+//#region src/components/spacer/spacer.tsx
+function Spacer(props) {
+	const { asChild, children, grow, shrink, basis, axis, ref, style: userStyle, ...rest } = props;
+	const layoutStyle = {};
+	if (axis === "inline") {
+		if (shrink !== void 0 && shrink !== 0) layoutStyle.flexShrink = shrink;
+		if (isCssLength(basis)) layoutStyle.width = basis;
+	} else if (axis === "block") {
+		if (shrink !== void 0 && shrink !== 0) layoutStyle.flexShrink = shrink;
+		if (isCssLength(basis)) layoutStyle.height = basis;
+	} else {
+		if (grow !== void 0 && grow !== 1) layoutStyle.flexGrow = grow;
+		if (shrink !== void 0 && shrink !== 1) layoutStyle.flexShrink = shrink;
+		if (isCssLength(basis)) layoutStyle.flexBasis = basis;
+	}
+	const finalProps = mergeProps(rest, {
+		ref,
+		"data-slot": "spacer",
+		"data-axis": axis,
+		style: mergeLayoutStyles(layoutStyle, userStyle)
+	});
+	const keyedChildren = toChildArray(children).map((child, index) => {
+		if (!isJsxElement(child) || child.key != null) return child;
+		return {
+			...child,
+			key: `spacer-${index}`
+		};
+	});
+	if (asChild) return /* @__PURE__ */ jsx(Slot, {
+		asChild: true,
+		...finalProps,
+		children
+	});
+	return /* @__PURE__ */ jsx("div", {
+		...finalProps,
+		children: keyedChildren
+	});
+}
+//#endregion
+export { Spacer };
+
+//# sourceMappingURL=spacer.js.map

package/dist/spacer/spacer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacer.js","names":[],"sources":["../../src/components/spacer/spacer.tsx"],"sourcesContent":["import { Slot } from \"@askrjs/askr/foundations\";\nimport { mergeProps } from \"../_internal/merge-props\";\nimport { isCssLength, mergeLayoutStyles } from \"../_internal/layout\";\nimport { isJsxElement, toChildArray } from \"../_internal/jsx\";\nimport type { SpacerAsChildProps, SpacerNativeProps } from \"./spacer.types\";\n\nexport function Spacer(props: SpacerNativeProps): JSX.Element;\nexport function Spacer(props: SpacerAsChildProps): JSX.Element;\nexport function Spacer(props: SpacerNativeProps | SpacerAsChildProps) {\n  const { asChild, children, grow, shrink, basis, axis, ref, style: userStyle, ...rest } = props;\n\n  const layoutStyle: Record<string, string | number> = {};\n\n  if (axis === \"inline\") {\n    if (shrink !== undefined && shrink !== 0) {\n      layoutStyle.flexShrink = shrink;\n    }\n    if (isCssLength(basis)) layoutStyle.width = basis!;\n  } else if (axis === \"block\") {\n    if (shrink !== undefined && shrink !== 0) {\n      layoutStyle.flexShrink = shrink;\n    }\n    if (isCssLength(basis)) layoutStyle.height = basis!;\n  } else {\n    if (grow !== undefined && grow !== 1) {\n      layoutStyle.flexGrow = grow;\n    }\n    if (shrink !== undefined && shrink !== 1) {\n      layoutStyle.flexShrink = shrink;\n    }\n    if (isCssLength(basis)) {\n      layoutStyle.flexBasis = basis!;\n    }\n  }\n\n  const finalProps = mergeProps(rest, {\n    ref,\n    \"data-slot\": \"spacer\",\n    \"data-axis\": axis,\n    style: mergeLayoutStyles(layoutStyle, userStyle),\n  });\n  const keyedChildren = toChildArray(children).map((child, index) => {\n    if (!isJsxElement(child) || child.key != null) {\n      return child;\n    }\n\n    return {\n      ...child,\n      key: `spacer-${index}`,\n    };\n  });\n\n  if (asChild) {\n    return <Slot asChild {...finalProps} children={children} />;\n  }\n\n  return <div {...finalProps}>{keyedChildren}</div>;\n}\n"],"mappings":";;;;;;AAQA,SAAgB,OAAO,OAA+C;CACpE,MAAM,EAAE,SAAS,UAAU,MAAM,QAAQ,OAAO,MAAM,KAAK,OAAO,WAAW,GAAG,SAAS;CAEzF,MAAM,cAA+C,EAAE;AAEvD,KAAI,SAAS,UAAU;AACrB,MAAI,WAAW,KAAA,KAAa,WAAW,EACrC,aAAY,aAAa;AAE3B,MAAI,YAAY,MAAM,CAAE,aAAY,QAAQ;YACnC,SAAS,SAAS;AAC3B,MAAI,WAAW,KAAA,KAAa,WAAW,EACrC,aAAY,aAAa;AAE3B,MAAI,YAAY,MAAM,CAAE,aAAY,SAAS;QACxC;AACL,MAAI,SAAS,KAAA,KAAa,SAAS,EACjC,aAAY,WAAW;AAEzB,MAAI,WAAW,KAAA,KAAa,WAAW,EACrC,aAAY,aAAa;AAE3B,MAAI,YAAY,MAAM,CACpB,aAAY,YAAY;;CAI5B,MAAM,aAAa,WAAW,MAAM;EAClC;EACA,aAAa;EACb,aAAa;EACb,OAAO,kBAAkB,aAAa,UAAU;EACjD,CAAC;CACF,MAAM,gBAAgB,aAAa,SAAS,CAAC,KAAK,OAAO,UAAU;AACjE,MAAI,CAAC,aAAa,MAAM,IAAI,MAAM,OAAO,KACvC,QAAO;AAGT,SAAO;GACL,GAAG;GACH,KAAK,UAAU;GAChB;GACD;AAEF,KAAI,QACF,QAAO,oBAAC,MAAD;EAAM,SAAA;EAAQ,GAAI;EAAsB;EAAY,CAAA;AAG7D,QAAO,oBAAC,OAAD;EAAK,GAAI;YAAa;EAAoB,CAAA"}

package/dist/spacer/spacer.types.d.ts

@@ -0,0 +1,25 @@
+import { JSXElement, Ref } from "@askrjs/askr/foundations";
+
+//#region src/components/spacer/spacer.types.d.ts
+type SpacerAxis = "inline" | "block";
+type SpacerOwnProps = {
+  /** flex-grow factor (default 1 when no axis is set). */grow?: number; /** flex-shrink factor (default 1 when no axis is set, 0 when axis is set). */
+  shrink?: number; /** CSS flex-basis / width (axis=inline) / height (axis=block) value. Applied as inline style only when it is a real CSS length. */
+  basis?: string; /** When set, renders a fixed space along the given axis instead of a flex-grow spacer. */
+  axis?: SpacerAxis;
+  children?: unknown;
+};
+type SpacerNativeProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref"> & SpacerOwnProps & {
+  asChild?: false;
+  ref?: Ref<HTMLDivElement>;
+};
+type SpacerAsChildProps = SpacerOwnProps & {
+  asChild: true;
+  children: JSXElement;
+  ref?: Ref<unknown>;
+  style?: JSX.IntrinsicElements["div"]["style"];
+};
+type SpacerProps = SpacerNativeProps | SpacerAsChildProps;
+//#endregion
+export { SpacerAsChildProps, SpacerAxis, SpacerNativeProps, SpacerOwnProps, SpacerProps };
+//# sourceMappingURL=spacer.types.d.ts.map

package/dist/spinner/index.d.ts

@@ -0,0 +1,2 @@
+import { SpinnerOwnProps, SpinnerProps } from "./spinner.types.js";
+import { Spinner } from "./spinner.js";

package/dist/spinner/spinner.d.ts

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

package/dist/spinner/spinner.js

@@ -0,0 +1,16 @@
+import { ProgressCircle } from "@askrjs/ui";
+import { jsx } from "@askrjs/askr/jsx-runtime";
+//#region src/components/spinner/spinner.tsx
+function Spinner(props) {
+	const { label, "aria-label": ariaLabel, ...rest } = props;
+	return /* @__PURE__ */ jsx(ProgressCircle, {
+		...rest,
+		"aria-label": ariaLabel ?? label ?? "Loading",
+		value: null,
+		getValueLabel: () => label ?? "Loading"
+	});
+}
+//#endregion
+export { Spinner };
+
+//# sourceMappingURL=spinner.js.map

package/dist/spinner/spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.js","names":[],"sources":["../../src/components/spinner/spinner.tsx"],"sourcesContent":["import { ProgressCircle } from \"@askrjs/ui\";\nimport type { SpinnerProps } from \"./spinner.types\";\n\nexport function Spinner(props: SpinnerProps): JSX.Element {\n  const {\n    label,\n    \"aria-label\": ariaLabel,\n    ...rest\n  } = props as SpinnerProps & {\n    \"aria-label\"?: string;\n  };\n\n  return (\n    <ProgressCircle\n      {...rest}\n      aria-label={ariaLabel ?? label ?? \"Loading\"}\n      value={null}\n      getValueLabel={() => label ?? \"Loading\"}\n    />\n  );\n}\n"],"mappings":";;;AAGA,SAAgB,QAAQ,OAAkC;CACxD,MAAM,EACJ,OACA,cAAc,WACd,GAAG,SACD;AAIJ,QACE,oBAAC,gBAAD;EACE,GAAI;EACJ,cAAY,aAAa,SAAS;EAClC,OAAO;EACP,qBAAqB,SAAS;EAC9B,CAAA"}

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

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

package/dist/stack/index.d.ts

@@ -0,0 +1,2 @@
+import { StackAsChildProps, StackDivProps, StackOwnProps, StackProps } from "./stack.types.js";
+import { Stack } from "./stack.js";

package/dist/stack/stack.d.ts

@@ -0,0 +1,8 @@
+import { StackAsChildProps, StackDivProps } from "./stack.types.js";
+
+//#region src/components/stack/stack.d.ts
+declare function Stack(props: StackDivProps): JSX.Element;
+declare function Stack(props: StackAsChildProps): JSX.Element;
+//#endregion
+export { Stack };
+//# sourceMappingURL=stack.d.ts.map

package/dist/stack/stack.js

@@ -0,0 +1,16 @@
+import { Flex } from "../flex/flex.js";
+import { jsx } from "@askrjs/askr/jsx-runtime";
+//#region src/components/stack/stack.tsx
+function Stack(props) {
+	const { children, ...rest } = props;
+	return /* @__PURE__ */ jsx(Flex, {
+		...rest,
+		"data-slot": "stack",
+		direction: "column",
+		children
+	});
+}
+//#endregion
+export { Stack };
+
+//# sourceMappingURL=stack.js.map

package/dist/stack/stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack.js","names":[],"sources":["../../src/components/stack/stack.tsx"],"sourcesContent":["import { Flex } from \"../flex\";\nimport type { StackAsChildProps, StackDivProps } from \"./stack.types\";\n\nexport function Stack(props: StackDivProps): JSX.Element;\nexport function Stack(props: StackAsChildProps): JSX.Element;\nexport function Stack(props: StackDivProps | StackAsChildProps) {\n  const { children, ...rest } = props;\n  return (\n    <Flex {...(rest as Record<string, unknown>)} data-slot=\"stack\" direction=\"column\">\n      {children}\n    </Flex>\n  );\n}\n"],"mappings":";;;AAKA,SAAgB,MAAM,OAA0C;CAC9D,MAAM,EAAE,UAAU,GAAG,SAAS;AAC9B,QACE,oBAAC,MAAD;EAAM,GAAK;EAAkC,aAAU;EAAQ,WAAU;EACtE;EACI,CAAA"}

package/dist/stack/stack.types.d.ts

@@ -0,0 +1,21 @@
+import { FlexOwnProps } from "../flex/flex.types.js";
+import { JSXElement, Ref } from "@askrjs/askr/foundations";
+
+//#region src/components/stack/stack.types.d.ts
+type StackOwnProps = Omit<FlexOwnProps, "direction" | "as"> & {
+  children?: unknown;
+};
+type StackDivProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref"> & StackOwnProps & {
+  asChild?: false;
+  ref?: Ref<HTMLDivElement>;
+};
+type StackAsChildProps = StackOwnProps & {
+  asChild: true;
+  children: JSXElement;
+  ref?: Ref<unknown>;
+  style?: JSX.IntrinsicElements["div"]["style"];
+};
+type StackProps = StackDivProps | StackAsChildProps;
+//#endregion
+export { StackAsChildProps, StackDivProps, StackOwnProps, StackProps };
+//# sourceMappingURL=stack.types.d.ts.map

package/dist/theme/index.d.ts

@@ -0,0 +1 @@
+import { DEFAULT_THEME_OPTIONS, ThemeContextValue, ThemeName, ThemeOption, ThemePicker, ThemePickerProps, ThemeProvider, ThemeProviderProps, ThemeToggle, ThemeToggleProps, ThemeToggleRenderContext, useTheme } from "./theme.js";

package/dist/theme/theme.d.ts

@@ -0,0 +1,44 @@
+import { ButtonNativeProps, PressEvent } from "@askrjs/ui";
+
+//#region src/components/theme/theme.d.ts
+type ThemeName = "light" | "dark" | "system" | (string & {});
+type ThemeOption = {
+  value: ThemeName;
+  label: string;
+};
+type ThemeContextValue = {
+  theme: () => ThemeName;
+  setTheme: (theme: ThemeName) => void;
+  themes: readonly ThemeOption[];
+  storageKey: string;
+};
+type ThemeProviderProps = {
+  children?: unknown;
+  defaultTheme?: ThemeName;
+  themes?: readonly ThemeOption[];
+  storageKey?: string;
+};
+type ThemePickerProps = Omit<JSX.IntrinsicElements["select"], "children" | "value" | "defaultValue" | "onChange"> & {
+  themes?: readonly ThemeOption[];
+  label?: string;
+};
+type ThemeToggleRenderContext = {
+  theme: ThemeName;
+  nextTheme: ThemeName;
+};
+type ThemeToggleProps = Omit<ButtonNativeProps, "children" | "onPress"> & {
+  children?: unknown | ((context: ThemeToggleRenderContext) => unknown);
+  lightIcon?: unknown;
+  darkIcon?: unknown;
+  systemIcon?: unknown;
+  toggleThemes?: readonly ThemeName[];
+  onPress?: (event: PressEvent) => void;
+};
+declare const DEFAULT_THEME_OPTIONS: readonly ThemeOption[];
+declare function useTheme(): ThemeContextValue;
+declare function ThemeProvider(props: ThemeProviderProps): JSX.Element;
+declare function ThemePicker(props: ThemePickerProps): JSX.Element;
+declare function ThemeToggle(props: ThemeToggleProps): JSX.Element;
+//#endregion
+export { DEFAULT_THEME_OPTIONS, ThemeContextValue, ThemeName, ThemeOption, ThemePicker, ThemePickerProps, ThemeProvider, ThemeProviderProps, ThemeToggle, ThemeToggleProps, ThemeToggleRenderContext, useTheme };
+//# sourceMappingURL=theme.d.ts.map

package/dist/theme/theme.js

@@ -0,0 +1,159 @@
+import { Button } from "@askrjs/ui";
+import { defineContext, readContext, state } from "@askrjs/askr";
+import { resource } from "@askrjs/askr/resources";
+import { jsx, jsxs } from "@askrjs/askr/jsx-runtime";
+//#region src/components/theme/theme.tsx
+const DEFAULT_THEME_OPTIONS = [
+	{
+		value: "system",
+		label: "System"
+	},
+	{
+		value: "light",
+		label: "Light"
+	},
+	{
+		value: "dark",
+		label: "Dark"
+	}
+];
+const DEFAULT_STORAGE_KEY = "askr-theme";
+const ThemeContext = defineContext({
+	theme: () => "system",
+	setTheme: () => void 0,
+	themes: DEFAULT_THEME_OPTIONS,
+	storageKey: DEFAULT_STORAGE_KEY
+});
+function useTheme() {
+	return readContext(ThemeContext);
+}
+function ThemeProvider(props) {
+	const { children, defaultTheme = "system", themes = DEFAULT_THEME_OPTIONS, storageKey = DEFAULT_STORAGE_KEY } = props;
+	const themeState = state(readStoredTheme(storageKey) ?? defaultTheme);
+	const setTheme = (nextTheme) => {
+		themeState.set(nextTheme);
+		writeStoredTheme(storageKey, nextTheme);
+		syncThemeRoot(nextTheme);
+	};
+	const value = {
+		theme: themeState,
+		setTheme,
+		themes,
+		storageKey
+	};
+	const currentTheme = themeState();
+	return /* @__PURE__ */ jsxs(ThemeContext.Scope, {
+		value,
+		children: [/* @__PURE__ */ jsx(ThemeRootSync, { theme: currentTheme }), /* @__PURE__ */ jsx("div", {
+			"data-slot": "theme-provider",
+			children
+		})]
+	});
+}
+function ThemeRootSync(props) {
+	const { theme } = props;
+	resource(({ signal }) => {
+		if (typeof window === "undefined") {
+			syncThemeRoot(theme);
+			return null;
+		}
+		const timeoutId = window.setTimeout(() => {
+			if (!signal.aborted) syncThemeRoot(theme);
+		}, 0);
+		signal.addEventListener("abort", () => {
+			window.clearTimeout(timeoutId);
+		}, { once: true });
+		return null;
+	}, [theme]);
+	return null;
+}
+function ThemePicker(props) {
+	const theme = useTheme();
+	const { themes = theme.themes, label = "Theme", ...rest } = props;
+	return /* @__PURE__ */ jsx("select", {
+		...rest,
+		"aria-label": rest["aria-label"] ?? label,
+		"data-slot": "theme-picker",
+		value: theme.theme(),
+		onChange: (event) => {
+			const target = event.currentTarget;
+			theme.setTheme(target.value);
+		},
+		children: themes.map((option) => /* @__PURE__ */ jsx("option", {
+			value: option.value,
+			children: option.label
+		}, option.value))
+	});
+}
+function ThemeToggle(props) {
+	const theme = useTheme();
+	const { children, lightIcon, darkIcon, systemIcon, toggleThemes = ["light", "dark"], onPress, ...rest } = props;
+	const currentTheme = theme.theme();
+	const nextTheme = getNextTheme(currentTheme, toggleThemes);
+	const renderContext = {
+		theme: currentTheme,
+		nextTheme
+	};
+	const ariaLabel = rest["aria-label"];
+	const themedIcon = resolveThemeToggleIcon(currentTheme, nextTheme, {
+		lightIcon,
+		darkIcon,
+		systemIcon
+	});
+	const content = typeof children === "function" ? children(renderContext) : children ?? themedIcon;
+	return /* @__PURE__ */ jsx(Button, {
+		...rest,
+		"aria-label": typeof ariaLabel === "string" ? ariaLabel : `Switch to ${nextTheme} theme`,
+		"data-theme-control": "toggle",
+		"data-theme-choice": currentTheme,
+		"data-next-theme": nextTheme,
+		onPress: (event) => {
+			onPress?.(event);
+			if (!event.defaultPrevented) theme.setTheme(nextTheme);
+		},
+		children: content
+	});
+}
+function getNextTheme(currentTheme, themes) {
+	if (themes.length === 0) return currentTheme;
+	const index = themes.indexOf(currentTheme);
+	return themes[index >= 0 && index < themes.length - 1 ? index + 1 : 0];
+}
+function getThemeIcon(theme, icons) {
+	if (theme === "light") return icons.lightIcon;
+	if (theme === "dark") return icons.darkIcon;
+	if (theme === "system") return icons.systemIcon;
+}
+function resolveThemeToggleIcon(theme, nextTheme, icons) {
+	return getThemeIcon(theme, icons) ?? getThemeIcon(nextTheme, icons);
+}
+function syncThemeRoot(themeChoice) {
+	if (typeof document === "undefined") return;
+	const html = document.documentElement;
+	if (themeChoice == null) {
+		html.removeAttribute("data-theme");
+		html.removeAttribute("data-theme-choice");
+		return;
+	}
+	html.setAttribute("data-theme-choice", themeChoice);
+	if (themeChoice === "system") html.removeAttribute("data-theme");
+	else html.setAttribute("data-theme", themeChoice);
+}
+function readStoredTheme(storageKey) {
+	if (typeof window === "undefined") return void 0;
+	try {
+		return window.localStorage.getItem(storageKey) ?? void 0;
+	} catch {
+		return;
+	}
+}
+function writeStoredTheme(storageKey, theme) {
+	if (typeof window === "undefined") return;
+	try {
+		window.localStorage.setItem(storageKey, theme);
+	} catch {}
+}
+//#endregion
+export { DEFAULT_THEME_OPTIONS, ThemePicker, ThemeProvider, ThemeToggle, useTheme };
+
+//# sourceMappingURL=theme.js.map

package/dist/theme/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","names":[],"sources":["../../src/components/theme/theme.tsx"],"sourcesContent":["import { defineContext, readContext, state } from \"@askrjs/askr\";\nimport { resource } from \"@askrjs/askr/resources\";\nimport { Button } from \"@askrjs/ui\";\nimport type { ButtonNativeProps, PressEvent } from \"@askrjs/ui\";\n\nexport type ThemeName = \"light\" | \"dark\" | \"system\" | (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  toggleThemes?: 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\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\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  const currentTheme = themeState();\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    toggleThemes = [\"light\", \"dark\"],\n    onPress,\n    ...rest\n  } = props;\n\n  const currentTheme = theme.theme();\n  const nextTheme = getNextTheme(currentTheme, toggleThemes);\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 content =\n    typeof children === \"function\" ? children(renderContext) : (children ?? themedIcon);\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      {content}\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 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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"}

package/dist/topbar-layout/index.d.ts

@@ -0,0 +1,2 @@
+import { TopbarLayoutProps } from "./topbar-layout.types.js";
+import { TopbarLayout } from "./topbar-layout.js";

package/dist/topbar-layout/topbar-layout.d.ts

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

package/dist/topbar-layout/topbar-layout.js

@@ -0,0 +1,37 @@
+import { isCssLength, mergeLayoutStyles, serializeValueIf } from "../_internal/layout.js";
+import { jsx } from "@askrjs/askr/jsx-runtime";
+//#region src/components/topbar-layout/topbar-layout.tsx
+function isThemeGapToken(value) {
+	return typeof value === "string" && [
+		"sm",
+		"md",
+		"lg",
+		"xl"
+	].includes(value.trim());
+}
+function TopbarLayout(props) {
+	const { topbar, children, topbarHeight, gap, ref, style: userStyle, ...rest } = props;
+	const wrapperStyle = {};
+	if (isCssLength(gap)) wrapperStyle.gap = gap;
+	const navbarStyle = {};
+	if (isCssLength(topbarHeight)) navbarStyle.height = topbarHeight;
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		ref,
+		"data-slot": "topbar-layout",
+		"data-gap": serializeValueIf(gap, isThemeGapToken),
+		style: mergeLayoutStyles(wrapperStyle, userStyle),
+		children: [/* @__PURE__ */ jsx("header", {
+			"data-slot": "navbar",
+			style: mergeLayoutStyles(navbarStyle, void 0),
+			children: topbar
+		}, "topbar-layout-navbar"), /* @__PURE__ */ jsx("main", {
+			"data-slot": "main",
+			children
+		}, "topbar-layout-main")]
+	});
+}
+//#endregion
+export { TopbarLayout };
+
+//# sourceMappingURL=topbar-layout.js.map

package/dist/topbar-layout/topbar-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"topbar-layout.js","names":[],"sources":["../../src/components/topbar-layout/topbar-layout.tsx"],"sourcesContent":["import { isCssLength, mergeLayoutStyles, serializeValueIf } from \"../_internal/layout\";\nimport type { TopbarLayoutProps } from \"./topbar-layout.types\";\n\nfunction isThemeGapToken(value: unknown): value is string {\n  return typeof value === \"string\" && [\"sm\", \"md\", \"lg\", \"xl\"].includes(value.trim());\n}\n\nexport function TopbarLayout(props: TopbarLayoutProps): JSX.Element {\n  const { topbar, children, topbarHeight, gap, ref, style: userStyle, ...rest } = props;\n\n  const wrapperStyle: Record<string, string | number> = {};\n  if (isCssLength(gap)) wrapperStyle.gap = gap!;\n\n  const navbarStyle: Record<string, string | number> = {};\n  if (isCssLength(topbarHeight)) navbarStyle.height = topbarHeight!;\n\n  return (\n    <div\n      {...rest}\n      ref={ref}\n      data-slot=\"topbar-layout\"\n      data-gap={serializeValueIf(gap, isThemeGapToken)}\n      style={mergeLayoutStyles(wrapperStyle, userStyle)}\n    >\n      {[\n        <header\n          key=\"topbar-layout-navbar\"\n          data-slot=\"navbar\"\n          style={mergeLayoutStyles(navbarStyle, undefined)}\n        >\n          {topbar}\n        </header>,\n        <main key=\"topbar-layout-main\" data-slot=\"main\">\n          {children}\n        </main>,\n      ]}\n    </div>\n  );\n}\n"],"mappings":";;;AAGA,SAAS,gBAAgB,OAAiC;AACxD,QAAO,OAAO,UAAU,YAAY;EAAC;EAAM;EAAM;EAAM;EAAK,CAAC,SAAS,MAAM,MAAM,CAAC;;AAGrF,SAAgB,aAAa,OAAuC;CAClE,MAAM,EAAE,QAAQ,UAAU,cAAc,KAAK,KAAK,OAAO,WAAW,GAAG,SAAS;CAEhF,MAAM,eAAgD,EAAE;AACxD,KAAI,YAAY,IAAI,CAAE,cAAa,MAAM;CAEzC,MAAM,cAA+C,EAAE;AACvD,KAAI,YAAY,aAAa,CAAE,aAAY,SAAS;AAEpD,QACE,oBAAC,OAAD;EACE,GAAI;EACC;EACL,aAAU;EACV,YAAU,iBAAiB,KAAK,gBAAgB;EAChD,OAAO,kBAAkB,cAAc,UAAU;YAEhD,CACC,oBAAC,UAAD;GAEE,aAAU;GACV,OAAO,kBAAkB,aAAa,KAAA,EAAU;aAE/C;GACM,EALH,uBAKG,EACT,oBAAC,QAAD;GAA+B,aAAU;GACtC;GACI,EAFG,qBAEH,CACR;EACG,CAAA"}

package/dist/topbar-layout/topbar-layout.types.d.ts

@@ -0,0 +1,13 @@
+import { Ref } from "@askrjs/askr/foundations";
+
+//#region src/components/topbar-layout/topbar-layout.types.d.ts
+type TopbarLayoutProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref"> & {
+  /** Content rendered into the topbar/navbar slot (header). */topbar?: unknown; /** Content rendered into the main slot. */
+  children?: unknown; /** CSS height for the topbar. Applied as inline style only when it is a real CSS length. */
+  topbarHeight?: string; /** CSS gap between topbar and main. Applied as inline style only when it is a real CSS length. */
+  gap?: string;
+  ref?: Ref<HTMLDivElement>;
+};
+//#endregion
+export { TopbarLayoutProps };
+//# sourceMappingURL=topbar-layout.types.d.ts.map