@womp/kookie-ui 0.17.0 → 0.18.0

package/src/components/theme.tsx

@@ -6,6 +6,7 @@ import { Direction, Slot, Tooltip as TooltipPrimitive } from 'radix-ui';
 import { useComposedRefs, useLayoutEffect } from 'radix-ui/internal';
 
 import { getMatchingGrayColor } from '../helpers/get-matching-gray-color.js';
+import { ThemeSizeContext } from '../helpers/theme-size.js';
 import { usePropSyncedState } from '../hooks/use-prop-synced-state.js';
 import { themePropDefs } from './theme.props.js';
 
@@ -19,6 +20,7 @@ type ThemeAccentColor = (typeof themePropDefs.accentColor.values)[number];
 type ThemeGrayColor = (typeof themePropDefs.grayColor.values)[number];
 type ThemeRadius = (typeof themePropDefs.radius.values)[number];
 type ThemeFontFamily = (typeof themePropDefs.fontFamily.values)[number];
+type ThemeSize = (typeof themePropDefs.size.values)[number];
 // Headings follow the body font until something sets this, so `undefined` is a
 // meaningful value here rather than a missing one.
 type ThemeHeadingFontFamily = ThemeFontFamily | undefined;
@@ -30,6 +32,7 @@ interface ThemeChangeHandlers {
   onRadiusChange: (radius: ThemeRadius) => void;
   onFontFamilyChange: (fontFamily: ThemeFontFamily) => void;
   onHeadingFontFamilyChange: (headingFontFamily: ThemeHeadingFontFamily) => void;
+  onSizeChange: (size: ThemeSize) => void;
 }
 
 interface ThemeContextValue extends ThemeChangeHandlers {
@@ -40,6 +43,7 @@ interface ThemeContextValue extends ThemeChangeHandlers {
   radius: ThemeRadius;
   fontFamily: ThemeFontFamily;
   headingFontFamily: ThemeHeadingFontFamily;
+  size: ThemeSize;
 }
 // Default theme values used when components render outside a Theme provider
 const defaultThemeContext: ThemeContextValue = {
@@ -50,12 +54,14 @@ const defaultThemeContext: ThemeContextValue = {
   radius: themePropDefs.radius.default,
   fontFamily: themePropDefs.fontFamily.default,
   headingFontFamily: undefined,
+  size: themePropDefs.size.default,
   onAppearanceChange: noop,
   onAccentColorChange: noop,
   onGrayColorChange: noop,
   onRadiusChange: noop,
   onFontFamilyChange: noop,
   onHeadingFontFamilyChange: noop,
+  onSizeChange: noop,
 };
 
 const ThemeContext = React.createContext<ThemeContextValue | undefined>(undefined);
@@ -86,61 +92,61 @@ const Theme = React.forwardRef<ThemeImplElement, ThemeProps>((props, forwardedRe
 });
 Theme.displayName = 'Theme';
 
-const ThemeRoot = React.forwardRef<ThemeImplElement, ThemeImplPublicProps>(
-  (props, forwardedRef) => {
-    const {
-      appearance: appearanceProp = themePropDefs.appearance.default,
-      accentColor: accentColorProp = themePropDefs.accentColor.default,
-      grayColor: grayColorProp = themePropDefs.grayColor.default,
-      radius: radiusProp = themePropDefs.radius.default,
-      fontFamily: fontFamilyProp = themePropDefs.fontFamily.default,
-      headingFontFamily: headingFontFamilyProp,
-      hasBackground = themePropDefs.hasBackground.default,
-      ...rootProps
-    } = props;
+const ThemeRoot = React.forwardRef<ThemeImplElement, ThemeImplPublicProps>((props, forwardedRef) => {
+  const {
+    appearance: appearanceProp = themePropDefs.appearance.default,
+    accentColor: accentColorProp = themePropDefs.accentColor.default,
+    grayColor: grayColorProp = themePropDefs.grayColor.default,
+    radius: radiusProp = themePropDefs.radius.default,
+    fontFamily: fontFamilyProp = themePropDefs.fontFamily.default,
+    headingFontFamily: headingFontFamilyProp,
+    size: sizeProp = themePropDefs.size.default,
+    hasBackground = themePropDefs.hasBackground.default,
+    ...rootProps
+  } = props;
 
-    // Each of these follows its prop but stays independently settable, so
-    // `ThemePanel` can change the theme at runtime. Syncing during render
-    // rather than in an effect matters here: an effect would commit the old
-    // theme first and re-render every consumer of the context a second time.
-    const [appearance, setAppearance] = usePropSyncedState(appearanceProp);
-    const [accentColor, setAccentColor] = usePropSyncedState(accentColorProp);
-    const [grayColor, setGrayColor] = usePropSyncedState(grayColorProp);
-    const [radius, setRadius] = usePropSyncedState(radiusProp);
-    const [fontFamily, setFontFamily] = usePropSyncedState(fontFamilyProp);
-    const [headingFontFamily, setHeadingFontFamily] = usePropSyncedState(headingFontFamilyProp);
+  // Each of these follows its prop but stays independently settable, so
+  // `ThemePanel` can change the theme at runtime. Syncing during render
+  // rather than in an effect matters here: an effect would commit the old
+  // theme first and re-render every consumer of the context a second time.
+  const [appearance, setAppearance] = usePropSyncedState(appearanceProp);
+  const [accentColor, setAccentColor] = usePropSyncedState(accentColorProp);
+  const [grayColor, setGrayColor] = usePropSyncedState(grayColorProp);
+  const [radius, setRadius] = usePropSyncedState(radiusProp);
+  const [fontFamily, setFontFamily] = usePropSyncedState(fontFamilyProp);
+  const [headingFontFamily, setHeadingFontFamily] = usePropSyncedState(headingFontFamilyProp);
+  const [size, setSize] = usePropSyncedState(sizeProp);
 
-    return (
-      <ThemeImpl
-        {...rootProps}
-        ref={forwardedRef}
-        isRoot
-        hasBackground={hasBackground}
-        //
-        appearance={appearance}
-        accentColor={accentColor}
-        grayColor={grayColor}
-        radius={radius}
-        fontFamily={fontFamily}
-        headingFontFamily={headingFontFamily}
-        //
-        onAppearanceChange={setAppearance}
-        onAccentColorChange={setAccentColor}
-        onGrayColorChange={setGrayColor}
-        onRadiusChange={setRadius}
-        onFontFamilyChange={setFontFamily}
-        onHeadingFontFamilyChange={setHeadingFontFamily}
-      />
-    );
-  },
-);
+  return (
+    <ThemeImpl
+      {...rootProps}
+      ref={forwardedRef}
+      isRoot
+      hasBackground={hasBackground}
+      //
+      appearance={appearance}
+      accentColor={accentColor}
+      grayColor={grayColor}
+      radius={radius}
+      fontFamily={fontFamily}
+      headingFontFamily={headingFontFamily}
+      size={size}
+      //
+      onAppearanceChange={setAppearance}
+      onAccentColorChange={setAccentColor}
+      onGrayColorChange={setGrayColor}
+      onRadiusChange={setRadius}
+      onFontFamilyChange={setFontFamily}
+      onHeadingFontFamilyChange={setHeadingFontFamily}
+      onSizeChange={setSize}
+    />
+  );
+});
 ThemeRoot.displayName = 'ThemeRoot';
 
 type ThemeImplElement = React.ElementRef<'div'>;
 interface ThemeImplProps extends ThemeImplPublicProps, ThemeImplPrivateProps {}
-interface ThemeImplPublicProps
-  extends ComponentPropsWithout<'div', RemovedProps | 'dir'>,
-    ThemeOwnProps {}
+interface ThemeImplPublicProps extends ComponentPropsWithout<'div', RemovedProps | 'dir'>, ThemeOwnProps {}
 interface ThemeImplPrivateProps extends Partial<ThemeChangeHandlers> {
   isRoot?: boolean;
 }
@@ -166,6 +172,7 @@ const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, for
     radius = props.radius ?? context?.radius ?? themePropDefs.radius.default,
     fontFamily = props.fontFamily ?? context?.fontFamily ?? themePropDefs.fontFamily.default,
     headingFontFamily = props.headingFontFamily ?? context?.headingFontFamily,
+    size = props.size ?? context?.size ?? themePropDefs.size.default,
     //
     onAppearanceChange = noop,
     onAccentColorChange = noop,
@@ -173,14 +180,14 @@ const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, for
     onRadiusChange = noop,
     onFontFamilyChange = noop,
     onHeadingFontFamilyChange = noop,
+    onSizeChange = noop,
     //
     ...themeProps
   } = props;
   const Comp = asChild ? Slot.Root : 'div';
   const resolvedGrayColor = grayColor === 'auto' ? getMatchingGrayColor(accentColor) : grayColor;
   const isExplicitAppearance = props.appearance === 'light' || props.appearance === 'dark';
-  const hasBackground =
-    hasBackgroundProp === undefined ? isRoot || isExplicitAppearance : hasBackgroundProp;
+  const hasBackground = hasBackgroundProp === undefined ? isRoot || isExplicitAppearance : hasBackgroundProp;
 
   // `data-os` can only be resolved on the client. Writing it straight to the
   // DOM keeps it out of the server markup — so hydration still matches — without
@@ -212,6 +219,7 @@ const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, for
           radius,
           fontFamily,
           headingFontFamily,
+          size,
           //
           onAppearanceChange,
           onAccentColorChange,
@@ -219,6 +227,7 @@ const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, for
           onRadiusChange,
           onFontFamilyChange,
           onHeadingFontFamilyChange,
+          onSizeChange,
         }),
         [
           appearance,
@@ -228,6 +237,7 @@ const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, for
           radius,
           fontFamily,
           headingFontFamily,
+          size,
           //
           onAppearanceChange,
           onAccentColorChange,
@@ -235,29 +245,34 @@ const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, for
           onRadiusChange,
           onFontFamilyChange,
           onHeadingFontFamilyChange,
+          onSizeChange,
         ],
       )}
     >
-      <Comp
-        data-is-root-theme={isRoot ? 'true' : 'false'}
-        data-accent-color={accentColor}
-        data-gray-color={resolvedGrayColor}
-        // for nested `Theme` background
-        data-has-background={hasBackground ? 'true' : 'false'}
-        data-radius={radius}
-        data-font-family={fontFamily}
-        data-heading-font-family={headingFontFamily}
-        ref={composedRef}
-        {...themeProps}
-        className={classNames(
-          'radix-themes',
-          {
-            light: appearance === 'light',
-            dark: appearance === 'dark',
-          },
-          themeProps.className,
-        )}
-      />
+      {/* Size travels on its own context as a bare string, so the components
+          that read it do not re-render when another theme value changes. */}
+      <ThemeSizeContext.Provider value={size}>
+        <Comp
+          data-is-root-theme={isRoot ? 'true' : 'false'}
+          data-accent-color={accentColor}
+          data-gray-color={resolvedGrayColor}
+          // for nested `Theme` background
+          data-has-background={hasBackground ? 'true' : 'false'}
+          data-radius={radius}
+          data-font-family={fontFamily}
+          data-heading-font-family={headingFontFamily}
+          ref={composedRef}
+          {...themeProps}
+          className={classNames(
+            'radix-themes',
+            {
+              light: appearance === 'light',
+              dark: appearance === 'dark',
+            },
+            themeProps.className,
+          )}
+        />
+      </ThemeSizeContext.Provider>
     </ThemeContext.Provider>
   );
 });

package/src/components/toolbar.tsx

@@ -9,6 +9,7 @@ import { Button } from './button.js';
 import { IconButton } from './icon-button.js';
 import { Text } from './text.js';
 import { extractProps } from '../helpers/extract-props.js';
+import { useThemeSize } from '../helpers/theme-size.js';
 import { marginPropDefs } from '../props/margin.props.js';
 import { usePaneBandSize } from './_internal/pane-chrome.js';
 
@@ -91,7 +92,8 @@ interface ToolbarProps
 const ToolbarRoot = React.forwardRef<HTMLDivElement, ToolbarProps>((props, forwardedRef) => {
   // In a Shell pane's header or footer, a toolbar with no size rests one step above the Shell's.
   const band = usePaneBandSize();
-  const size: ToolbarSize = props.size ?? band ?? toolbarRootPropDefs.size.default;
+  // Elsewhere it takes the nearest Theme's size.
+  const size: ToolbarSize = useThemeSize(props.size ?? band ?? undefined, toolbarRootPropDefs.size);
   const orientation: ToolbarOrientation = props.orientation ?? toolbarRootPropDefs.orientation.default;
   const { className, orientation: _orientation, backdrop = false, children, ...rootProps } = extractProps(
     { ...props, size },

package/src/helpers/index.ts

@@ -13,3 +13,4 @@ export * from './map-prop-values.js';
 export * from './merge-styles.js';
 export * from './normalize-to-px.js';
 export * from './require-react-element.js';
+export * from './theme-size.js';

package/src/helpers/map-prop-values.ts

@@ -1,5 +1,3 @@
-import type { baseButtonPropDefs } from '../components/_internal/base-button.props.js';
-import type { spinnerPropDefs } from '../components/spinner.props.js';
 import type { textPropDefs } from '../components/text.props.js';
 import type { Responsive } from '../props/prop-def.js';
 
@@ -16,19 +14,4 @@ function mapResponsiveProp<Input extends string, Output>(
   );
 }
 
-
-function mapButtonSizeToSpinnerSize(
-  size: (typeof baseButtonPropDefs.size.values)[number]
-): (typeof spinnerPropDefs.size.values)[number] {
-  switch (size) {
-    case '1':
-      return '1';
-    case '2':
-    case '3':
-      return '2';
-    case '4':
-      return '3';
-  }
-}
-
-export { mapResponsiveProp, mapButtonSizeToSpinnerSize };
+export { mapResponsiveProp };

package/src/helpers/theme-size.ts

@@ -0,0 +1,73 @@
+'use client';
+
+import * as React from 'react';
+
+type ThemeSize = '1' | '2' | '3' | '4';
+
+/** The rest of the 1-4 index when no Theme states a size. */
+const THEME_SIZE_DEFAULT: ThemeSize = '2';
+
+/**
+ * The app-wide size index, provided by `Theme` beside `ThemeContext`.
+ *
+ * It is its own context, holding one string, so a component that only needs
+ * the size does not re-render when the accent colour or appearance changes.
+ */
+const ThemeSizeContext = React.createContext<ThemeSize>(THEME_SIZE_DEFAULT);
+ThemeSizeContext.displayName = 'ThemeSizeContext';
+
+interface SizePropDef {
+  values: readonly string[];
+  default?: string;
+}
+
+/**
+ * Maps the theme size onto a component's own range: the value itself when the
+ * component has it, otherwise the nearest end of the range (`4` on a 1-3 scale
+ * is `3`, on a 1-2 scale it is `2`).
+ */
+function clampSize(size: ThemeSize, values: readonly string[]): string {
+  if (values.includes(size)) return size;
+  const n = Number(size);
+  let nearest = values[0];
+  let distance = Infinity;
+  for (let i = 0; i < values.length; i++) {
+    const d = Math.abs(Number(values[i]) - n);
+    if (d < distance) {
+      distance = d;
+      nearest = values[i];
+    }
+  }
+  return nearest;
+}
+
+/**
+ * The size a component on the 1-4 index takes: what the caller said, else the
+ * nearest Theme's size, mapped into the component's range.
+ */
+function useThemeSize<V>(explicit: V | undefined, propDef: SizePropDef): V {
+  const themeSize = React.useContext(ThemeSizeContext);
+  if (explicit !== undefined) return explicit;
+  // The clamped value is one of `propDef.values`, which is what `V` ranges over.
+  return clampSize(themeSize, propDef.values) as V;
+}
+
+/**
+ * Fills `size` from the nearest Theme when the caller left it unset, so the
+ * result can go straight into `extractProps`. An explicit size, responsive
+ * object included, wins.
+ *
+ * Returns the same props object when there is nothing to fill: when a size is
+ * set, or when the theme size resolves to the prop def's own default (the
+ * common case, a Theme with no size), so `extractProps` applies it as before.
+ */
+function useThemeSizeProps<P extends { size?: unknown }>(props: P, propDef: SizePropDef): P {
+  const themeSize = React.useContext(ThemeSizeContext);
+  if (props.size !== undefined) return props;
+  const size = clampSize(themeSize, propDef.values);
+  if (size === propDef.default) return props;
+  return { ...props, size };
+}
+
+export { ThemeSizeContext, THEME_SIZE_DEFAULT, clampSize, useThemeSize, useThemeSizeProps };
+export type { ThemeSize };

package/src/styles/tokens/constants.css

@@ -4,6 +4,10 @@
   /* Standard border width constants */
   --border-width-standard: 1px;
 
+  /* One focus ring: outline var(--focus-ring-width) solid var(--focus-8), offset var(--focus-ring-offset) */
+  --focus-ring-width: 2px;
+  --focus-ring-offset: 2px;
+
   /* Raised variant 3D effect constants - simplified for button-like components */
   --raised-elevation-offset: -0.02em;
   --raised-active-padding-offset-1: 0.5px;

package/src/styles/tokens/space.css

@@ -86,6 +86,22 @@
   --slot-inset-3: calc(4px * var(--scale));
   --slot-inset-4: calc(4px * var(--scale));
 
+  /* Marks: the box of a checkbox or radio by index, and the switch and slider tracks. */
+  --mark-1: calc(16px * var(--scale));
+  --mark-2: calc(20px * var(--scale));
+  --mark-3: calc(24px * var(--scale));
+  --mark-4: calc(26px * var(--scale));
+  --mark-5: calc(28px * var(--scale));
+  --switch-w-1: calc(34px * var(--scale));
+  --switch-w-2: calc(40px * var(--scale));
+  --switch-w-3: calc(44px * var(--scale));
+  --switch-w-4: calc(48px * var(--scale));
+  --switch-inset: calc(2px * var(--scale));
+  --slider-track-1: calc(4px * var(--scale));
+  --slider-track-2: calc(5px * var(--scale));
+  --slider-track-3: calc(6px * var(--scale));
+  --slider-track-4: calc(7px * var(--scale));
+
   /* Overlay widths by index. */
   --overlay-w-1: calc(360px * var(--scale));
   --overlay-w-2: calc(440px * var(--scale));