@askrjs/themes 0.0.8 → 0.0.10

package/src/components/spinner/spinner.tsx

@@ -1,9 +1,10 @@
-import { ProgressCircle } from "@askrjs/ui";
+import { ProgressCircle, ProgressCircleIndicator } from "@askrjs/ui";
 import type { SpinnerProps } from "./spinner.types";
 
 export function Spinner(props: SpinnerProps): JSX.Element {
   const {
     label,
+    size,
     "aria-label": ariaLabel,
     ...rest
   } = props as SpinnerProps & {
@@ -14,8 +15,12 @@ export function Spinner(props: SpinnerProps): JSX.Element {
     <ProgressCircle
       {...rest}
       aria-label={ariaLabel ?? label ?? "Loading"}
+      data-spinner="true"
+      data-size={size && size !== "md" ? size : undefined}
       value={null}
       getValueLabel={() => label ?? "Loading"}
-    />
+    >
+      <ProgressCircleIndicator />
+    </ProgressCircle>
   );
 }

package/src/components/spinner/spinner.types.ts

@@ -1,7 +1,10 @@
 import type { ProgressCircleProps } from "@askrjs/ui";
 
+export type SpinnerSize = "sm" | "md" | "lg";
+
 export type SpinnerOwnProps = Omit<ProgressCircleProps, "value" | "getValueLabel"> & {
   label?: string;
+  size?: SpinnerSize;
 };
 
 export type SpinnerProps = SpinnerOwnProps;

package/src/components/stat/index.ts

@@ -0,0 +1,2 @@
+export { Stat, StatDescription, StatLabel, StatValue } from "./stat";
+export type * from "./stat.types";

package/src/components/stat/stat.tsx

@@ -0,0 +1,47 @@
+import { classes } from "../_internal/classes";
+import { mergeProps } from "../_internal/merge-props";
+import type { StatDescriptionProps, StatLabelProps, StatProps, StatValueProps } from "./stat.types";
+
+export function Stat(props: StatProps): JSX.Element {
+  const { children, class: className, ref, ...rest } = props;
+  const finalProps = mergeProps(rest, {
+    ref,
+    class: classes("stat", className),
+    "data-slot": "stat",
+  });
+
+  return <div {...finalProps}>{children}</div>;
+}
+
+export function StatLabel(props: StatLabelProps): JSX.Element {
+  const { children, class: className, ref, ...rest } = props;
+  const finalProps = mergeProps(rest, {
+    ref,
+    class: classes("stat-label", className),
+    "data-slot": "stat-label",
+  });
+
+  return <p {...finalProps}>{children}</p>;
+}
+
+export function StatValue(props: StatValueProps): JSX.Element {
+  const { children, class: className, ref, ...rest } = props;
+  const finalProps = mergeProps(rest, {
+    ref,
+    class: classes("stat-value", className),
+    "data-slot": "stat-value",
+  });
+
+  return <p {...finalProps}>{children}</p>;
+}
+
+export function StatDescription(props: StatDescriptionProps): JSX.Element {
+  const { children, class: className, ref, ...rest } = props;
+  const finalProps = mergeProps(rest, {
+    ref,
+    class: classes("stat-description", className),
+    "data-slot": "stat-description",
+  });
+
+  return <p {...finalProps}>{children}</p>;
+}

package/src/components/stat/stat.types.ts

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

package/src/components/text/index.ts

@@ -0,0 +1,2 @@
+export { Text } from "./text";
+export type * from "./text.types";

package/src/components/text/text.tsx

@@ -0,0 +1,39 @@
+import { classes } from "../_internal/classes";
+import { mergeProps } from "../_internal/merge-props";
+import type { TextElement, TextProps } from "./text.types";
+
+const DEFAULT_ELEMENT = "p";
+
+export function Text<TElement extends TextElement = "p">(props: TextProps<TElement>): JSX.Element {
+  const {
+    as,
+    size = "md",
+    tone = "default",
+    weight,
+    font,
+    numeric,
+    wrap,
+    truncate,
+    children,
+    class: classProp,
+    className,
+    ref,
+    ...rest
+  } = props as TextProps<TextElement> & { class?: unknown; className?: unknown };
+
+  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 : undefined,
+    "data-numeric": numeric && numeric !== "normal" ? numeric : undefined,
+    "data-wrap": wrap,
+    "data-truncate": truncate ? "true" : undefined,
+  });
+
+  const Element = (as ?? DEFAULT_ELEMENT) as keyof JSX.IntrinsicElements;
+  return <Element {...finalProps}>{children}</Element>;
+}

package/src/components/text/text.types.ts

@@ -0,0 +1,35 @@
+import type { Ref } from "@askrjs/askr/foundations/utilities";
+
+export type TextElement = "p" | "span" | "div" | "strong";
+export type TextSize = "sm" | "md" | "lg";
+export type TextTone =
+  | "default"
+  | "muted"
+  | "subtle"
+  | "inverse"
+  | "success"
+  | "warning"
+  | "danger"
+  | "info";
+export type TextWeight = "normal" | "medium" | "semibold" | "bold";
+export type TextFont = "body" | "mono";
+export type TextNumeric = "normal" | "tabular";
+export type TextWrap = "normal" | "nowrap" | "anywhere";
+
+type TextIntrinsicProps<TElement extends TextElement> = Omit<
+  JSX.IntrinsicElements[TElement],
+  "children" | "ref"
+>;
+
+export 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>;
+};

package/src/components/theme/theme.tsx

@@ -1,4 +1,4 @@
-import { defineContext, readContext, state } from "@askrjs/askr";
+import { defineContext, getSignal, readContext, state } from "@askrjs/askr";
 import type { JSXElement } from "@askrjs/askr/foundations/structures";
 import { resource } from "@askrjs/askr/resources";
 import { Button } from "@askrjs/ui";
@@ -65,6 +65,12 @@ export const CAT_THEME_OPTIONS: readonly ThemeOption[] = [
 ];
 
 const DEFAULT_STORAGE_KEY = "askr-theme";
+const STATIC_CHILDREN = Symbol.for("askr.static-children");
+const STATIC_CHILD_SLOTS_CACHE = Symbol.for("__askrStaticChildSlots");
+// Passive mount sync should not overwrite a newer user/provider-initiated change.
+let rootThemeRevision = 0;
+let explicitRootThemeOwner: symbol | undefined;
+const registeredProviderSignals = new WeakSet<AbortSignal>();
 
 const ThemeContext = defineContext<ThemeContextValue>({
   theme: () => "system",
@@ -85,12 +91,29 @@ export function ThemeProvider(props: ThemeProviderProps): JSX.Element {
     storageKey = DEFAULT_STORAGE_KEY,
   } = props;
 
+  const providerId = state<symbol>(Symbol("ThemeProvider"))();
+  const providerSignal = getSignal();
   const themeState = state<ThemeName>(readStoredTheme(storageKey) ?? defaultTheme);
   const currentTheme = themeState();
 
+  if (!registeredProviderSignals.has(providerSignal)) {
+    registeredProviderSignals.add(providerSignal);
+    providerSignal.addEventListener(
+      "abort",
+      () => {
+        if (explicitRootThemeOwner === providerId) {
+          explicitRootThemeOwner = undefined;
+        }
+      },
+      { once: true },
+    );
+  }
+
   const setTheme = (nextTheme: ThemeName) => {
     themeState.set(nextTheme);
     writeStoredTheme(storageKey, nextTheme);
+    explicitRootThemeOwner = providerId;
+    rootThemeRevision += 1;
     syncThemeRoot(nextTheme);
   };
 
@@ -103,14 +126,15 @@ export function ThemeProvider(props: ThemeProviderProps): JSX.Element {
 
   return (
     <ThemeContext.Scope value={value}>
-      <ThemeRootSync theme={currentTheme} />
+      <ThemeRootSync providerId={providerId} theme={currentTheme} />
       <div data-slot="theme-provider">{children}</div>
     </ThemeContext.Scope>
   );
 }
 
-function ThemeRootSync(props: { theme: ThemeName }): JSX.Element | null {
-  const { theme } = props;
+function ThemeRootSync(props: { providerId: symbol; theme: ThemeName }): JSX.Element | null {
+  const { providerId, theme } = props;
+  const expectedRootThemeRevision = rootThemeRevision;
 
   resource(
     ({ signal }: { signal: AbortSignal }) => {
@@ -121,7 +145,11 @@ function ThemeRootSync(props: { theme: ThemeName }): JSX.Element | null {
 
       const timeoutId = window.setTimeout(() => {
         if (!signal.aborted) {
-          syncThemeRoot(theme);
+          syncThemeRoot(theme, {
+            expectedRevision: expectedRootThemeRevision,
+            passive: true,
+            providerId,
+          });
         }
       }, 0);
 
@@ -144,20 +172,23 @@ function ThemeRootSync(props: { theme: ThemeName }): JSX.Element | null {
 export function ThemePicker(props: ThemePickerProps): JSX.Element {
   const theme = useTheme();
   const { themes = theme.themes, label = "Theme", ...rest } = props;
+  const currentTheme = theme.theme();
 
   return (
     <select
       {...rest}
       aria-label={rest["aria-label"] ?? label}
       data-slot="theme-picker"
-      value={theme.theme()}
+      value={currentTheme}
       onChange={(event: Event) => {
-        const target = event.currentTarget as HTMLSelectElement;
-        theme.setTheme(target.value as ThemeName);
+        const target = getThemePickerTarget(event);
+        if (target) {
+          theme.setTheme(target.value as ThemeName);
+        }
       }}
     >
       {themes.map((option) => (
-        <option key={option.value} value={option.value}>
+        <option key={option.value} value={option.value} selected={option.value === currentTheme}>
           {option.label}
         </option>
       ))}
@@ -165,6 +196,23 @@ export function ThemePicker(props: ThemePickerProps): JSX.Element {
   );
 }
 
+function getThemePickerTarget(event: Event): HTMLSelectElement | null {
+  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;
+}
+
 export function ThemeToggle(props: ThemeToggleProps): JSX.Element {
   const theme = useTheme();
   const {
@@ -178,7 +226,7 @@ export function ThemeToggle(props: ThemeToggleProps): JSX.Element {
   } = props;
 
   const currentTheme = theme.theme();
-  const nextTheme = getNextTheme(currentTheme, themes);
+  const nextTheme = getNextTheme(currentTheme, themes, getResolvedSystemTheme());
   const renderContext = { theme: currentTheme, nextTheme };
   const ariaLabel = (rest as Record<string, unknown>)["aria-label"];
   const themedIcon = resolveThemeToggleIcon(currentTheme, nextTheme, {
@@ -186,9 +234,15 @@ export function ThemeToggle(props: ThemeToggleProps): JSX.Element {
     darkIcon,
     systemIcon,
   });
-  const renderedIcon = cloneThemeToggleIcon(themedIcon);
+  const renderedIcon = cloneThemeToggleIcon(themedIcon, currentTheme);
+  const renderedIconSlots =
+    renderThemeToggleIconSlots(currentTheme, {
+      lightIcon,
+      darkIcon,
+      systemIcon,
+    }) ?? renderedIcon;
   const content =
-    typeof children === "function" ? children(renderContext) : (children ?? renderedIcon);
+    typeof children === "function" ? children(renderContext) : (children ?? renderedIconSlots);
 
   return (
     <Button
@@ -199,7 +253,9 @@ export function ThemeToggle(props: ThemeToggleProps): JSX.Element {
       data-next-theme={nextTheme}
       onPress={(event) => {
         onPress?.(event);
-        if (!event.defaultPrevented) theme.setTheme(nextTheme);
+        if (!event.defaultPrevented && !Object.is(nextTheme, currentTheme)) {
+          theme.setTheme(nextTheme);
+        }
       }}
     >
       <span data-slot="theme-toggle-content">{content}</span>
@@ -207,12 +263,29 @@ export function ThemeToggle(props: ThemeToggleProps): JSX.Element {
   );
 }
 
-function getNextTheme(currentTheme: ThemeName, themes: readonly ThemeName[]): ThemeName {
+function getNextTheme(
+  currentTheme: ThemeName,
+  themes: readonly ThemeName[],
+  resolvedSystemTheme: "light" | "dark" = "light",
+): ThemeName {
   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(): "light" | "dark" {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return "light";
+  }
+
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+
 function getThemeIcon(
   theme: ThemeName,
   icons: Pick<ThemeToggleProps, "lightIcon" | "darkIcon" | "systemIcon">,
@@ -231,6 +304,37 @@ export function resolveThemeToggleIcon(
   return getThemeIcon(theme, icons) ?? getThemeIcon(nextTheme, icons);
 }
 
+function renderThemeToggleIconSlots(
+  theme: ThemeName,
+  icons: Pick<ThemeToggleProps, "lightIcon" | "darkIcon" | "systemIcon">,
+): unknown {
+  if (getThemeIcon(theme, icons) === undefined) {
+    return undefined;
+  }
+
+  const slots = [
+    ["light", icons.lightIcon],
+    ["dark", icons.darkIcon],
+    ["system", icons.systemIcon],
+  ] as const;
+  const availableSlots = slots.filter(([, icon]) => icon !== undefined && icon !== null);
+
+  if (availableSlots.length <= 1) {
+    return undefined;
+  }
+
+  return availableSlots.map(([slotTheme, icon]) => (
+    <span
+      key={slotTheme}
+      data-slot="theme-toggle-icon"
+      data-theme-toggle-icon={slotTheme}
+      hidden={slotTheme === theme ? undefined : true}
+    >
+      {cloneThemeToggleIcon(icon, slotTheme)}
+    </span>
+  ));
+}
+
 function isJSXElement(value: unknown): value is JSXElement {
   return (
     typeof value === "object" &&
@@ -241,27 +345,64 @@ function isJSXElement(value: unknown): value is JSXElement {
   );
 }
 
-function cloneThemeToggleIcon(icon: unknown): unknown {
+function cloneThemeToggleIcon(icon: unknown, key?: string): unknown {
+  if (Array.isArray(icon)) {
+    const clonedChildren = icon.map((child) => cloneThemeToggleIcon(child));
+    if ((icon as Record<symbol, unknown>)[STATIC_CHILDREN] === true) {
+      Object.defineProperty(clonedChildren, STATIC_CHILDREN, {
+        value: true,
+        configurable: true,
+      });
+    }
+    return clonedChildren;
+  }
+
   if (!isJSXElement(icon)) return icon;
 
   const props = icon.props as Record<string, unknown> | undefined;
-  if (!props || Object.keys(props).length === 0) {
-    return icon;
+  const clonedProps = props ? { ...props } : {};
+
+  if ("children" in clonedProps) {
+    clonedProps.children = cloneThemeToggleIcon(clonedProps.children);
   }
 
-  return {
+  const iconKey = (icon.key ?? key ?? null) as string | number | null;
+  const clonedIcon = {
     ...icon,
-    props: { ...props },
+    key: iconKey,
+    props: clonedProps,
   };
+
+  delete (clonedIcon as Record<symbol, unknown>)[STATIC_CHILD_SLOTS_CACHE];
+  return clonedIcon;
 }
 
-function syncThemeRoot(themeChoice: ThemeName | null | undefined): void {
+function syncThemeRoot(
+  themeChoice: ThemeName | null | undefined,
+  options?: { expectedRevision?: number; passive?: boolean; providerId?: symbol },
+): void {
   if (typeof document === "undefined") {
     return;
   }
 
   const html = document.documentElement;
 
+  if (
+    options?.passive &&
+    options.expectedRevision !== undefined &&
+    options.expectedRevision !== rootThemeRevision
+  ) {
+    return;
+  }
+
+  if (
+    options?.passive &&
+    explicitRootThemeOwner !== undefined &&
+    explicitRootThemeOwner !== options.providerId
+  ) {
+    return;
+  }
+
   if (themeChoice == null) {
     html.removeAttribute("data-theme");
     html.removeAttribute("data-theme-choice");
@@ -280,7 +421,8 @@ function syncThemeRoot(themeChoice: ThemeName | null | undefined): void {
 function readStoredTheme(storageKey: string): ThemeName | undefined {
   if (typeof window === "undefined") return undefined;
   try {
-    return (window.localStorage.getItem(storageKey) as ThemeName | null) ?? undefined;
+    const storedTheme = window.localStorage.getItem(storageKey);
+    return storedTheme ? (storedTheme as ThemeName) : undefined;
   } catch {
     return undefined;
   }

package/src/components/toolbar/index.ts

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

package/src/components/toolbar/toolbar.tsx

@@ -0,0 +1,24 @@
+import { Block } from "../block";
+import type { ToolbarProps } from "./toolbar.types";
+
+export function Toolbar(props: ToolbarProps): JSX.Element {
+  const { title, actions, ...rest } = props;
+
+  return (
+    <Block
+      rowFrom="md"
+      align={{ base: "start", md: "center" }}
+      justify="between"
+      gap="md"
+      {...rest}
+      data-slot="toolbar"
+    >
+      <h2 data-slot="toolbar-title">{title}</h2>
+      {actions !== undefined ? (
+        <Block direction="row" gap="sm" data-slot="toolbar-actions">
+          {actions}
+        </Block>
+      ) : null}
+    </Block>
+  );
+}

package/src/components/toolbar/toolbar.types.ts

@@ -0,0 +1,6 @@
+import type { BlockDivProps } from "../block";
+
+export type ToolbarProps = BlockDivProps & {
+  title: unknown;
+  actions?: unknown;
+};