@pickle-ui/react 1.0.0-beta.7 → 1.0.0-beta.9

package/src/components/Alert.tsx

@@ -82,12 +82,10 @@ function AlertIcon({ className, ...props }: AlertIconProps) {
 }
 
 /**
- * An inline message that draws attention to contextual information.
- *
- * The alert has no live-region role by default, so static notices are not
- * announced on page load. When the alert appears in response to a user action,
- * pass `role="alert"` for urgent messages (failures) or `role="status"` for
- * polite ones (confirmations, info).
+ * No live-region role by default, so static notices are not announced on page
+ * load. When the alert appears in response to a user action, pass
+ * `role="alert"` for urgent messages (failures) or `role="status"` for polite
+ * ones (confirmations, info).
  */
 function AlertRoot({ className, variant = 'default', ...props }: AlertProps) {
   return (

package/src/components/_internal/VisuallyHiddenInput.tsx

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 
-/* eslint-disable react-hooks/refs -- this component intentionally reads prevValueRef.current during render to track the previous value across renders; the ref holds derived bookkeeping state, not render-affecting data. */
+/* eslint-disable react-hooks/refs -- prevValueRef is read during render on purpose: it holds the previous value and never affects the output. */
 
 type InputValue = string | string[];
 
@@ -16,6 +16,36 @@ interface VisuallyHiddenInputProps<T = InputValue> extends Omit<
   value?: T;
 }
 
+const noSize: { height?: number; width?: number } = {};
+
+// The snapshot is a string so React can compare it by value; an object would be
+// a new snapshot on every read and re-render forever.
+function useElementSize(element: HTMLElement | null) {
+  const subscribe = React.useCallback(
+    (onChange: () => void) => {
+      if (!element) return () => {};
+
+      const resizeObserver = new ResizeObserver(onChange);
+      resizeObserver.observe(element, { box: 'border-box' });
+
+      return () => {
+        resizeObserver.disconnect();
+      };
+    },
+    [element],
+  );
+  const getSnapshot = () =>
+    element ? `${element.offsetWidth}x${element.offsetHeight}` : '';
+  const snapshot = React.useSyncExternalStore(subscribe, getSnapshot, () => '');
+
+  return React.useMemo(() => {
+    if (!snapshot) return noSize;
+
+    const [width, height] = snapshot.split('x').map(Number);
+    return { height, width };
+  }, [snapshot]);
+}
+
 function VisuallyHiddenInput<T = InputValue>(
   props: VisuallyHiddenInputProps<T>,
 ) {
@@ -27,7 +57,7 @@ function VisuallyHiddenInput<T = InputValue>(
     type = 'hidden',
     value,
     ...inputProps
-    // react-doctor-disable-next-line react-doctor/no-event-handler -- this hidden input intentionally mirrors value/checked into the native control and dispatches a native input/click event from an effect; the side effect is driven by prop changes, not a user event, so it cannot move into an event handler
+    // react-doctor-disable-next-line react-doctor/no-event-handler -- an effect mirrors value/checked into the native input and dispatches its event: prop changes drive it, not a user event
   } = props;
 
   const isCheckInput = React.useMemo(
@@ -53,55 +83,7 @@ function VisuallyHiddenInput<T = InputValue>(
     return prevValueRef.current.previous;
   }, [isCheckInput, value, checked]);
 
-  const [controlSize, setControlSize] = React.useState<{
-    height?: number;
-    width?: number;
-  }>({});
-
-  // react-doctor-disable-next-line react-doctor/no-cascading-set-state -- this effect measures the control element and only calls setControlSize in mutually exclusive branches (or inside an async ResizeObserver callback), not as a synchronous render cascade
-  React.useLayoutEffect(() => {
-    if (!control) {
-      // eslint-disable-next-line react-hooks/set-state-in-effect -- reset measured size synchronously when the control is removed so the hidden input does not retain a stale size
-      setControlSize({});
-      return;
-    }
-
-    setControlSize({
-      height: control.offsetHeight,
-      width: control.offsetWidth,
-    });
-
-    if (typeof window === 'undefined') return;
-
-    const resizeObserver = new ResizeObserver((entries) => {
-      if (!Array.isArray(entries) || !entries.length) return;
-
-      const entry = entries[0];
-      if (!entry) return;
-
-      let width: number;
-      let height: number;
-
-      if ('borderBoxSize' in entry) {
-        const borderSizeEntry = entry.borderBoxSize;
-        const borderSize = Array.isArray(borderSizeEntry)
-          ? borderSizeEntry[0]
-          : borderSizeEntry;
-        width = borderSize.inlineSize;
-        height = borderSize.blockSize;
-      } else {
-        width = control.offsetWidth;
-        height = control.offsetHeight;
-      }
-
-      setControlSize({ height, width });
-    });
-
-    resizeObserver.observe(control, { box: 'border-box' });
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, [control]);
+  const controlSize = useElementSize(control);
 
   React.useEffect(() => {
     const input = inputRef.current;

package/src/components/form/ColorPickerPrimitive.tsx

@@ -146,7 +146,7 @@ interface ColorPickerFormatSelectProps
     Omit<React.ComponentProps<typeof Select>, 'onValueChange' | 'value'>,
     Pick<React.ComponentProps<typeof SelectTrigger>, 'className'> {}
 
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type -- a named props interface that is intentionally an alias of the Omit below, kept as an interface for naming and future extension
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type -- a named alias of the Omit below
 interface ColorPickerImplProps extends Omit<
   ColorPickerProps,
   | 'defaultFormat'

package/src/components/form/Form.context.ts

@@ -48,9 +48,8 @@ function useFieldName(name: string | undefined) {
   return name ?? field?.name;
 }
 
-// React Hook Form exposes field state, but it does not attach DOM aria/id
-// props to custom controls. This maps the current Form.Field onto the actual
-// visible control.
+// React Hook Form tracks field state but attaches no aria or id props to
+// custom controls: this maps the current Form.Field onto its visible control.
 function useFormControlProps(
   props: FormControlProps = {},
   { enabled = true }: UseFormControlPropsOptions = {},

package/src/components/form/FormField.tsx

@@ -46,8 +46,8 @@ function FormField({
   });
   const fieldError = name ? getFieldState(name, formState).error : undefined;
   const errorMessage = error ?? getErrorMessage(fieldError);
-  // The control id is the focus target for the visible field label.
-  // It is generated by default to avoid duplicate DOM ids across forms/rows.
+  // The label focuses the control by this id; `useId` keeps it unique across
+  // forms and rows.
   const generatedControlId = React.useId();
   const controlId = controlIdProp ?? generatedControlId;
   const nativeLabel = shouldUseNativeFieldLabel(children);

package/src/components/form/Input.tsx

@@ -23,48 +23,85 @@ type InputProps = Omit<
   unstyled?: boolean;
 };
 
-function Input({
+type ResolvedSize = keyof typeof inputControlHeights;
+
+function getControlClassName({
   className,
-  classNames,
-  nativeInput = false,
-  size = 'md',
-  style,
-  unstyled = false,
-  ...props
-}: InputProps) {
-  const resolvedSize = typeof size === 'number' ? 'md' : size;
-  const inputClassName = cn(
+  size,
+  unstyled,
+}: {
+  className: InputProps['className'];
+  size: ResolvedSize;
+  unstyled: boolean;
+}) {
+  return (
+    cn(
+      !unstyled &&
+        cn(
+          inputControlHeights[size],
+          'border-input bg-background text-foreground ring-ring/24 has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 has-aria-invalid:border-destructive/36 has-focus-visible:border-ring has-autofill:bg-foreground/4 dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 relative inline-flex w-full rounded-lg border text-base shadow-xs/5 transition-shadow not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] has-focus-visible:ring-[3px] has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none sm:text-sm dark:not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]',
+        ),
+      className,
+    ) || undefined
+  );
+}
+
+function getInputClassName({
+  inputClassNames,
+  size,
+  type,
+  unstyled,
+}: {
+  inputClassNames: string | undefined;
+  size: ResolvedSize;
+  type: React.HTMLInputTypeAttribute | undefined;
+  unstyled: boolean;
+}) {
+  return cn(
     unstyled
       ? cn(
           'w-full min-w-0 rounded-[inherit] px-[calc(--spacing(3)-1px)] leading-none outline-none [transition:background-color_5000000s_ease-in-out_0s] placeholder:text-muted-foreground/72',
-          inputControlHeights[resolvedSize],
-          resolvedSize === 'sm' && 'px-[calc(--spacing(2.5)-1px)]',
-          resolvedSize === 'lg' && 'px-[calc(--spacing(3.5)-1px)]',
+          inputControlHeights[size],
+          size === 'sm' && 'px-[calc(--spacing(2.5)-1px)]',
+          size === 'lg' && 'px-[calc(--spacing(3.5)-1px)]',
         )
       : cn(
           'h-full min-h-0 w-full rounded-[inherit] px-[calc(--spacing(3)-1px)] leading-none outline-none [transition:background-color_5000000s_ease-in-out_0s] placeholder:text-muted-foreground/72',
-          resolvedSize === 'sm' && 'px-[calc(--spacing(2.5)-1px)]',
-          resolvedSize === 'lg' && 'px-[calc(--spacing(3.5)-1px)]',
+          size === 'sm' && 'px-[calc(--spacing(2.5)-1px)]',
+          size === 'lg' && 'px-[calc(--spacing(3.5)-1px)]',
         ),
-    props.type === 'search' &&
+    type === 'search' &&
       '[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none [&::-webkit-search-results-button]:appearance-none [&::-webkit-search-results-decoration]:appearance-none',
-    props.type === 'file' &&
+    type === 'file' &&
       'text-muted-foreground file:me-3 file:bg-transparent file:font-medium file:text-foreground file:text-sm',
-    classNames?.input,
+    inputClassNames,
   );
+}
+
+function Input({
+  className,
+  classNames,
+  nativeInput = false,
+  size = 'md',
+  style,
+  unstyled = false,
+  ...props
+}: InputProps) {
+  const resolvedSize = typeof size === 'number' ? 'md' : size;
+  const inputClassName = getInputClassName({
+    inputClassNames: classNames?.input,
+    size: resolvedSize,
+    type: props.type,
+    unstyled,
+  });
 
   return (
     <span
-      className={
-        cn(
-          !unstyled &&
-            cn(
-              inputControlHeights[resolvedSize],
-              'border-input bg-background text-foreground ring-ring/24 has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 has-aria-invalid:border-destructive/36 has-focus-visible:border-ring has-autofill:bg-foreground/4 dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 relative inline-flex w-full rounded-lg border text-base shadow-xs/5 transition-shadow not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] has-focus-visible:ring-[3px] has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none sm:text-sm dark:not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]',
-            ),
-          className,
-        ) || undefined
-      }
+      className={getControlClassName({
+        className,
+        size: resolvedSize,
+        unstyled,
+      })}
       data-size={resolvedSize}
       data-slot="input-control"
     >

package/src/components/form/RadioGroup.test.tsx

@@ -109,13 +109,11 @@ describe('RadioGroup', () => {
         <RadioGroup.Item label="Option C" value="c" />
       </RadioGroup>,
     );
-    // All radios in a group are reachable via keyboard.
     const radios = screen.getAllByRole('radio');
     expect(radios).toHaveLength(3);
-    // The group element exists and has roving-tabindex structure (tabIndex 0 on selected).
     const radioA = screen.getByRole('radio', { name: 'Option A' });
     expect(radioA).toHaveAttribute('aria-checked', 'true');
-    // Click directly to simulate selection change (roving focus is a browser behavior).
+    // Arrow-key roving focus is browser behavior jsdom lacks, so click.
     fireEvent.click(screen.getByRole('radio', { name: 'Option C' }));
     expect(screen.getByRole('radio', { name: 'Option C' })).toHaveAttribute(
       'aria-checked',

package/src/components/form/Slider.tsx

@@ -20,7 +20,7 @@ type SliderProps = SliderPrimitive.Root.Props & {
   classNames?: SlotClassNames<'control' | 'indicator' | 'thumb' | 'track'>;
   getAriaLabel?: SliderPrimitive.Thumb.Props['getAriaLabel'];
   getAriaValueText?: SliderPrimitive.Thumb.Props['getAriaValueText'];
-  /** Render the filled indicator. Set to `false` for sliders with a custom track (e.g. color pickers). Defaults to `true`. */
+  /** Draws the filled track. `false` for a custom track, as in the color picker. Defaults to `true`. */
   indicator?: boolean;
   ref?: Ref<HTMLDivElement>;
   trackStyle?: CSSProperties;

package/src/entries/theme.ts

@@ -1,8 +1,8 @@
-export { createTheme, themeToCss } from '../lib/theme';
+export { createTheme, themeToCss } from '@pickle-ui/tokens/theme';
 export type {
   Theme,
   ThemeCssOptions,
   ThemeFonts,
   ThemeOptions,
   ThemeVariables,
-} from '../lib/theme';
+} from '@pickle-ui/tokens/theme';

package/src/hooks/use-lazy-ref.ts

@@ -1,11 +1,9 @@
 import * as React from 'react';
 
 function useLazyRef<T>(fn: () => T) {
-  const ref = React.useRef<null | T>(null);
-
-  if (ref.current === null) {
-    ref.current = fn();
-  }
+  // `useState` runs its initializer once, so `fn` is never called again and the
+  // `{ current }` box stays stable; render itself never writes to a ref.
+  const [ref] = React.useState(() => ({ current: fn() }));
 
   return ref as React.RefObject<T>;
 }

package/src/lib/color.test.ts

@@ -48,9 +48,7 @@ describe('rgb <-> hsv', () => {
     });
   });
 
-  // Documents CURRENT behavior: achromatic colors report hue 0 (red).
-  // Plan 004 changes this to preserve a caller-supplied hue. When 004 lands,
-  // this assertion is expected to be updated there.
+  // Without a fallback hue, an achromatic color reports hue 0.
   it('reports hue 0 for white (achromatic)', () => {
     expect(rgbToHsv({ a: 1, b: 255, g: 255, r: 255 })).toEqual({
       a: 1,

package/src/lib/compose-refs.ts

@@ -2,10 +2,9 @@ import * as React from 'react';
 
 type PossibleRef<T> = React.Ref<T> | undefined;
 
-/**
- * A utility to compose multiple refs together
- * Accepts callback refs and RefObject(s)
- */
+// Radix UI's compose-refs (MIT): callback refs and ref objects merged into one
+// callback ref, with React 19 ref cleanups.
+
 function composeRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> {
   return (node) => {
     let hasCleanup = false;
@@ -17,10 +16,8 @@ function composeRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> {
       return cleanup;
     });
 
-    // React <19 will log an error to the console if a callback ref returns a
-    // value. We don't use ref cleanups internally so this will only happen if a
-    // user's ref callback returns a value, which we only expect if they are
-    // using the cleanup functionality added in React 19.
+    // Only return a cleanup when a ref returned one: React 18 logs an error
+    // for a callback ref that returns a value.
     if (hasCleanup) {
       return () => {
         for (let i = 0; i < cleanups.length; i++) {
@@ -36,10 +33,6 @@ function composeRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> {
   };
 }
 
-/**
- * Set a given ref to a given value
- * This utility takes care of different types of refs: callback refs and RefObject(s)
- */
 function setRef<T>(ref: PossibleRef<T>, value: T) {
   if (typeof ref === 'function') {
     return ref(value);
@@ -50,14 +43,9 @@ function setRef<T>(ref: PossibleRef<T>, value: T) {
   }
 }
 
-/**
- * A custom hook that composes multiple refs
- * Accepts callback refs and RefObject(s)
- */
 function useComposedRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> {
-  // biome-ignore lint/correctness/useExhaustiveDependencies: we want to memoize by all values
-  // eslint-disable-next-line react-hooks/exhaustive-deps, react-hooks/use-memo -- memoize by every ref value; the spread `refs` array is the intended dependency list
-  return React.useCallback(composeRefs(...refs), refs); // react-doctor-disable-line react-doctor/exhaustive-deps -- same intentional memo: the dependency list is the spread `refs` array on purpose
+  // eslint-disable-next-line react-hooks/exhaustive-deps, react-hooks/use-memo -- memoized by every ref: the spread `refs` is the dependency list
+  return React.useCallback(composeRefs(...refs), refs); // react-doctor-disable-line react-doctor/exhaustive-deps -- memoized by every ref: the spread `refs` is the dependency list
 }
 
 export { composeRefs, useComposedRefs };

package/dist/lib/theme.d.ts

@@ -1,40 +0,0 @@
-/**
- * Theme generator: derives Pickle's brand-dependent tokens from a single
- * primary color so consumers can theme the library without hand-writing CSS
- * variables. Tokens that do not depend on the brand (neutrals, status colors)
- * keep the values from `@pickle-ui/react/theme.css`.
- */
-type Theme = {
-    dark: ThemeVariables;
-    light: ThemeVariables;
-};
-type ThemeCssOptions = {
-    darkSelector?: string;
-    lightSelector?: string;
-};
-type ThemeFonts = {
-    heading?: string;
-    mono?: string;
-    sans?: string;
-};
-type ThemeOptions = {
-    /** Font stacks, written to `--font-sans`, `--font-heading` and `--font-mono`. */
-    fonts?: ThemeFonts;
-    /** Brand color in any CSS notation (hex, rgb, hsl, oklch, …). */
-    primary: string;
-    /** Brand color for the dark scheme. Defaults to a lighter version of `primary`. */
-    primaryDark?: string;
-    /** Base radius, e.g. `'0.5rem'`. Every `rounded-*` scale derives from it. */
-    radius?: string;
-};
-type ThemeVariables = Record<`--${string}`, string>;
-/**
- * Build the light and dark token sets for a brand color. Apply the result
- * with `themeToCss` in a stylesheet, or spread `theme.light` / `theme.dark`
- * as the `style` of a wrapper element.
- */
-export declare function createTheme(options: ThemeOptions): Theme;
-/** Serialize a theme as CSS rules for the light and dark selectors. */
-export declare function themeToCss(theme: Theme, { darkSelector, lightSelector }?: ThemeCssOptions): string;
-export type { Theme, ThemeCssOptions, ThemeFonts, ThemeOptions, ThemeVariables, };
-//# sourceMappingURL=theme.d.ts.map

package/dist/lib/theme.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/lib/theme.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAWH,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,cAAc,CAAC;IACrB,KAAK,EAAE,cAAc,CAAC;CACvB,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,KAAK,UAAU,GAAG;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,YAAY,GAAG;IAClB,iFAAiF;IACjF,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,iEAAiE;IACjE,OAAO,EAAE,MAAM,CAAC;IAChB,mFAAmF;IACnF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6EAA6E;IAC7E,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,KAAK,cAAc,GAAG,MAAM,CAAC,KAAK,MAAM,EAAE,EAAE,MAAM,CAAC,CAAC;AAOpD;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,YAAY,GAAG,KAAK,CAWxD;AAED,uEAAuE;AACvE,wBAAgB,UAAU,CACxB,KAAK,EAAE,KAAK,EACZ,EAAE,YAAsB,EAAE,aAAuB,EAAE,GAAE,eAAoB,GACxE,MAAM,CAOR;AAyDD,YAAY,EACV,KAAK,EACL,eAAe,EACf,UAAU,EACV,YAAY,EACZ,cAAc,GACf,CAAC"}

package/dist/lib/theme.js

@@ -1,82 +0,0 @@
-/**
- * Theme generator: derives Pickle's brand-dependent tokens from a single
- * primary color so consumers can theme the library without hand-writing CSS
- * variables. Tokens that do not depend on the brand (neutrals, status colors)
- * keep the values from `@pickle-ui/react/theme.css`.
- */
-import { clampChroma, converter, formatCss, parse, wcagContrast, } from 'culori';
-const toOklch = converter('oklch');
-const LIGHT_FOREGROUND = { c: 0, h: 0, l: 1, mode: 'oklch' };
-const DARK_FOREGROUND = { c: 0.006, h: 285.9, l: 0.21, mode: 'oklch' };
-/**
- * Build the light and dark token sets for a brand color. Apply the result
- * with `themeToCss` in a stylesheet, or spread `theme.light` / `theme.dark`
- * as the `style` of a wrapper element.
- */
-export function createTheme(options) {
-    const primary = parseColor(options.primary, 'primary');
-    const primaryDark = options.primaryDark
-        ? parseColor(options.primaryDark, 'primaryDark')
-        : lightenForDark(primary);
-    const shared = sharedVariables(options);
-    return {
-        dark: { ...shared, ...brandVariables(primaryDark) },
-        light: { ...shared, ...brandVariables(primary) },
-    };
-}
-/** Serialize a theme as CSS rules for the light and dark selectors. */
-export function themeToCss(theme, { darkSelector = '.dark', lightSelector = ':root' } = {}) {
-    const block = (selector, variables) => `${selector} {\n${Object.entries(variables)
-        .map(([name, value]) => `  ${name}: ${value};`)
-        .join('\n')}\n}`;
-    return `${block(lightSelector, theme.light)}\n\n${block(darkSelector, theme.dark)}\n`;
-}
-function brandVariables(primary) {
-    const foreground = foregroundFor(primary);
-    return {
-        '--primary': format(primary),
-        '--primary-foreground': format(foreground),
-        '--ring': format({ ...primary, c: primary.c * 0.6 }),
-        '--sidebar-primary': format(primary),
-        '--sidebar-primary-foreground': format(foreground),
-        '--sidebar-ring': format({ ...primary, c: primary.c * 0.6 }),
-    };
-}
-/** White or near-black, whichever reads better on the given fill. */
-function foregroundFor(fill) {
-    return wcagContrast(fill, LIGHT_FOREGROUND) >=
-        wcagContrast(fill, DARK_FOREGROUND)
-        ? LIGHT_FOREGROUND
-        : DARK_FOREGROUND;
-}
-function format(color) {
-    return formatCss(clampChroma(color, 'oklch'));
-}
-/** Lift a brand color so it stays vivid on dark surfaces. */
-function lightenForDark(color) {
-    return {
-        ...color,
-        c: color.c * 0.92,
-        l: Math.min(Math.max(color.l + 0.12, 0.6), 0.85),
-    };
-}
-function parseColor(value, name) {
-    const color = parse(value);
-    if (!color) {
-        throw new Error(`createTheme: ${name} is not a valid CSS color: ${value}`);
-    }
-    return toOklch(color);
-}
-function sharedVariables({ fonts, radius }) {
-    const variables = {};
-    if (radius)
-        variables['--radius'] = radius;
-    if (fonts?.sans)
-        variables['--font-sans'] = fonts.sans;
-    if (fonts?.heading)
-        variables['--font-heading'] = fonts.heading;
-    if (fonts?.mono)
-        variables['--font-mono'] = fonts.mono;
-    return variables;
-}
-//# sourceMappingURL=theme.js.map

package/dist/lib/theme.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/lib/theme.ts"],"names":[],"mappings":"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"}

package/src/lib/theme.test.ts

@@ -1,64 +0,0 @@
-import { describe, expect, it } from 'vitest';
-
-import { createTheme, themeToCss } from './theme';
-
-describe('createTheme', () => {
-  it('derives primary tokens for both schemes', () => {
-    const theme = createTheme({ primary: '#16a34a' });
-
-    expect(theme.light['--primary']).toMatch(/^oklch\(/);
-    expect(theme.dark['--primary']).toMatch(/^oklch\(/);
-    expect(theme.light['--primary']).not.toBe(theme.dark['--primary']);
-    expect(theme.light['--sidebar-primary']).toBe(theme.light['--primary']);
-  });
-
-  it('picks a readable foreground for light and dark fills', () => {
-    const onDarkFill = createTheme({ primary: '#1e3a8a' });
-    const onLightFill = createTheme({ primary: '#fde047' });
-
-    expect(onDarkFill.light['--primary-foreground']).toBe('oklch(1 0 0)');
-    expect(onLightFill.light['--primary-foreground']).not.toBe('oklch(1 0 0)');
-  });
-
-  it('uses primaryDark as given and passes radius and fonts through', () => {
-    const theme = createTheme({
-      fonts: { mono: 'Menlo', sans: 'Inter' },
-      primary: 'rebeccapurple',
-      primaryDark: 'oklch(0.8 0.1 300)',
-      radius: '1rem',
-    });
-
-    expect(theme.dark['--primary']).toBe('oklch(0.8 0.1 300)');
-    expect(theme.light['--radius']).toBe('1rem');
-    expect(theme.dark['--radius']).toBe('1rem');
-    expect(theme.light['--font-sans']).toBe('Inter');
-    expect(theme.light['--font-mono']).toBe('Menlo');
-    expect(theme.light['--font-heading']).toBeUndefined();
-  });
-
-  it('rejects colors it cannot parse', () => {
-    expect(() => createTheme({ primary: 'not-a-color' })).toThrow(
-      /not a valid CSS color/,
-    );
-  });
-});
-
-describe('themeToCss', () => {
-  it('serializes both schemes under their selectors', () => {
-    const css = themeToCss(createTheme({ primary: '#000', radius: '4px' }));
-
-    expect(css).toMatch(/^:root \{\n {2}--radius: 4px;\n/);
-    expect(css).toContain('\n.dark {\n');
-    expect(css).toContain('--primary-foreground: oklch(1 0 0);');
-  });
-
-  it('accepts custom selectors', () => {
-    const css = themeToCss(createTheme({ primary: '#000' }), {
-      darkSelector: '[data-theme="dark"]',
-      lightSelector: 'html',
-    });
-
-    expect(css.startsWith('html {')).toBe(true);
-    expect(css).toContain('[data-theme="dark"] {');
-  });
-});