@pickle-ui/react 1.0.0-beta.6 → 1.0.0-beta.8

package/src/components/form/FormInputGroup.tsx

@@ -2,10 +2,9 @@
 
 import * as React from 'react';
 
-import { InputGroup } from '@/components/form/InputGroup';
-
 import { FormFieldContext, FormInputGroupContext } from './Form.context';
 import { FormInput, type FormInputProps } from './FormInput';
+import { InputGroup } from './InputGroup';
 
 type FormInputGroupProps = React.ComponentProps<typeof InputGroup>;
 

package/src/components/form/FormLabel.tsx

@@ -3,7 +3,7 @@
 import { Field } from '@base-ui/react/field';
 import * as React from 'react';
 
-import { cn } from '@/lib/utils';
+import { cn } from '../../lib/utils';
 
 type FormLabelProps = React.ComponentProps<typeof Field.Label>;
 

package/src/components/form/FormRoot.tsx

@@ -8,7 +8,7 @@ import {
   type UseFormReturn,
 } from 'react-hook-form';
 
-import { cn } from '@/lib/utils';
+import { cn } from '../../lib/utils';
 
 type FormProps<FormValues extends FieldValues = FieldValues> = Omit<
   React.ComponentProps<'form'>,

package/src/components/form/FormSwitch.tsx

@@ -2,14 +2,13 @@
 
 import { useController } from 'react-hook-form';
 
-import { Switch, type SwitchProps } from '@/components/form/Switch';
-
 import {
   useFormControlProps,
   useFormMethods,
   useRequiredFieldName,
   type WithoutAriaInvalid,
 } from './Form.context';
+import { Switch, type SwitchProps } from './Switch';
 
 type FormSwitchProps = WithoutAriaInvalid<SwitchProps>;
 

package/src/components/form/FormTextarea.tsx

@@ -2,14 +2,13 @@
 
 import * as React from 'react';
 
-import { Textarea } from '@/components/form/Textarea';
-
 import {
   useFormControlProps,
   useFormMethods,
   useRequiredFieldName,
   type WithoutAriaInvalid,
 } from './Form.context';
+import { Textarea } from './Textarea';
 
 type FormTextareaProps = WithoutAriaInvalid<
   React.ComponentProps<typeof Textarea>

package/src/components/form/Input.tsx

@@ -3,7 +3,7 @@
 import { Input as InputPrimitive } from '@base-ui/react/input';
 import * as React from 'react';
 
-import { cn, type SlotClassNames } from '@/lib/utils';
+import { cn, type SlotClassNames } from '../../lib/utils';
 
 // Matches the `Button` height for the same size, so they line up side by side.
 const inputControlHeights = {

package/src/components/form/InputGroup.tsx

@@ -3,8 +3,7 @@
 import { cva, type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 
-import { cn } from '@/lib/utils';
-
+import { cn } from '../../lib/utils';
 import { Button, type ButtonProps } from '../Button';
 import { Input, type InputProps } from './Input';
 

package/src/components/form/RadioGroup.tsx

@@ -4,7 +4,7 @@ import { Radio as RadioPrimitive } from '@base-ui/react/radio';
 import { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';
 import * as React from 'react';
 
-import { cn, type SlotClassNames } from '@/lib/utils';
+import { cn, type SlotClassNames } from '../../lib/utils';
 
 type RadioGroupItemProps = React.ComponentProps<typeof RadioPrimitive.Root> & {
   classNames?: SlotClassNames<'indicator' | 'label'>;

package/src/components/form/Select.stories.tsx

@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { cn } from '@/lib/utils';
-
+import { cn } from '../../lib/utils';
 import { type ComponentMatrixCellProps, Story } from '../_internal/Story';
 import { Select } from './Select';
 

package/src/components/form/Select.tsx

@@ -9,7 +9,7 @@ import {
 } from '@tabler/icons-react';
 import * as React from 'react';
 
-import { cn, type SlotClassNames } from '@/lib/utils';
+import { cn, type SlotClassNames } from '../../lib/utils';
 
 type SelectContentProps = Pick<
   React.ComponentProps<typeof SelectPrimitive.Positioner>,

package/src/components/form/Slider.tsx

@@ -2,7 +2,7 @@ import type { CSSProperties, Ref } from 'react';
 
 import { Slider as SliderPrimitive } from '@base-ui/react/slider';
 
-import { cn, type SlotClassNames } from '@/lib/utils';
+import { cn, type SlotClassNames } from '../../lib/utils';
 
 type SliderLabelProps = SliderPrimitive.Label.Props & {
   ref?: Ref<HTMLDivElement>;

package/src/components/form/Switch.tsx

@@ -3,7 +3,7 @@
 import { Switch as SwitchPrimitive } from '@base-ui/react/switch';
 import * as React from 'react';
 
-import { cn, type SlotClassNames } from '@/lib/utils';
+import { cn, type SlotClassNames } from '../../lib/utils';
 
 type SwitchControlProps = React.ComponentProps<typeof SwitchPrimitive.Root> & {
   classNames?: SlotClassNames<'thumb'>;

package/src/components/form/Textarea.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { cn, type SlotClassNames } from '@/lib/utils';
+import { cn, type SlotClassNames } from '../../lib/utils';
 
 type TextareaProps = React.ComponentProps<'textarea'> & {
   /** Class overrides for the inner `textarea`; `className` styles the control wrapper. */

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-as-ref.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { useIsomorphicLayoutEffect } from '@/hooks/use-isomorphic-layout-effect';
+import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect';
 
 function useAsRef<T>(props: T) {
   const ref = React.useRef<T>(props);

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":"AAAA;;;;;GAKG;AAEH,OAAO,EACL,WAAW,EACX,SAAS,EACT,SAAS,EAET,KAAK,EACL,YAAY,GACb,MAAM,QAAQ,CAAC;AA+BhB,MAAM,OAAO,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC;AAEnC,MAAM,gBAAgB,GAAU,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AACpE,MAAM,eAAe,GAAU,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AAE9E;;;;GAIG;AACH,MAAM,UAAU,WAAW,CAAC,OAAqB;IAC/C,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;IACvD,MAAM,WAAW,GAAG,OAAO,CAAC,WAAW;QACrC,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC,WAAW,EAAE,aAAa,CAAC;QAChD,CAAC,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;IAC5B,MAAM,MAAM,GAAG,eAAe,CAAC,OAAO,CAAC,CAAC;IAExC,OAAO;QACL,IAAI,EAAE,EAAE,GAAG,MAAM,EAAE,GAAG,cAAc,CAAC,WAAW,CAAC,EAAE;QACnD,KAAK,EAAE,EAAE,GAAG,MAAM,EAAE,GAAG,cAAc,CAAC,OAAO,CAAC,EAAE;KACjD,CAAC;AACJ,CAAC;AAED,uEAAuE;AACvE,MAAM,UAAU,UAAU,CACxB,KAAY,EACZ,EAAE,YAAY,GAAG,OAAO,EAAE,aAAa,GAAG,OAAO,KAAsB,EAAE;IAEzE,MAAM,KAAK,GAAG,CAAC,QAAgB,EAAE,SAAyB,EAAE,EAAE,CAC5D,GAAG,QAAQ,OAAO,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC;SACxC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,KAAK,IAAI,KAAK,KAAK,GAAG,CAAC;SAC9C,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;IAErB,OAAO,GAAG,KAAK,CAAC,aAAa,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,KAAK,CAAC,YAAY,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC;AACxF,CAAC;AAED,SAAS,cAAc,CAAC,OAAc;IACpC,MAAM,UAAU,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IAE1C,OAAO;QACL,WAAW,EAAE,MAAM,CAAC,OAAO,CAAC;QAC5B,sBAAsB,EAAE,MAAM,CAAC,UAAU,CAAC;QAC1C,QAAQ,EAAE,MAAM,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC,EAAE,OAAO,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC;QACpD,mBAAmB,EAAE,MAAM,CAAC,OAAO,CAAC;QACpC,8BAA8B,EAAE,MAAM,CAAC,UAAU,CAAC;QAClD,gBAAgB,EAAE,MAAM,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC,EAAE,OAAO,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC;KAC7D,CAAC;AACJ,CAAC;AAED,qEAAqE;AACrE,SAAS,aAAa,CAAC,IAAW;IAChC,OAAO,YAAY,CAAC,IAAI,EAAE,gBAAgB,CAAC;QACzC,YAAY,CAAC,IAAI,EAAE,eAAe,CAAC;QACnC,CAAC,CAAC,gBAAgB;QAClB,CAAC,CAAC,eAAe,CAAC;AACtB,CAAC;AAED,SAAS,MAAM,CAAC,KAAY;IAC1B,OAAO,SAAS,CAAC,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC;AAChD,CAAC;AAED,6DAA6D;AAC7D,SAAS,cAAc,CAAC,KAAY;IAClC,OAAO;QACL,GAAG,KAAK;QACR,CAAC,EAAE,KAAK,CAAC,CAAC,GAAG,IAAI;QACjB,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,CAAC,EAAE,IAAI,CAAC;KACjD,CAAC;AACJ,CAAC;AAED,SAAS,UAAU,CAAC,KAAa,EAAE,IAAY;IAC7C,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC;IAE3B,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,MAAM,IAAI,KAAK,CAAC,gBAAgB,IAAI,8BAA8B,KAAK,EAAE,CAAC,CAAC;IAC7E,CAAC;IAED,OAAO,OAAO,CAAC,KAAK,CAAC,CAAC;AACxB,CAAC;AAED,SAAS,eAAe,CAAC,EAAE,KAAK,EAAE,MAAM,EAAgB;IACtD,MAAM,SAAS,GAAmB,EAAE,CAAC;IAErC,IAAI,MAAM;QAAE,SAAS,CAAC,UAAU,CAAC,GAAG,MAAM,CAAC;IAC3C,IAAI,KAAK,EAAE,IAAI;QAAE,SAAS,CAAC,aAAa,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC;IACvD,IAAI,KAAK,EAAE,OAAO;QAAE,SAAS,CAAC,gBAAgB,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC;IAChE,IAAI,KAAK,EAAE,IAAI;QAAE,SAAS,CAAC,aAAa,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC;IAEvD,OAAO,SAAS,CAAC;AACnB,CAAC"}

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"] {');
-  });
-});

package/src/lib/theme.ts

@@ -1,143 +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,
-  type Oklch,
-  parse,
-  wcagContrast,
-} from 'culori';
-
-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>;
-
-const toOklch = converter('oklch');
-
-const LIGHT_FOREGROUND: Oklch = { c: 0, h: 0, l: 1, mode: 'oklch' };
-const DARK_FOREGROUND: Oklch = { 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: ThemeOptions): Theme {
-  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: Theme,
-  { darkSelector = '.dark', lightSelector = ':root' }: ThemeCssOptions = {},
-): string {
-  const block = (selector: string, variables: ThemeVariables) =>
-    `${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: Oklch): ThemeVariables {
-  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: Oklch) {
-  return wcagContrast(fill, LIGHT_FOREGROUND) >=
-    wcagContrast(fill, DARK_FOREGROUND)
-    ? LIGHT_FOREGROUND
-    : DARK_FOREGROUND;
-}
-
-function format(color: Oklch) {
-  return formatCss(clampChroma(color, 'oklch'));
-}
-
-/** Lift a brand color so it stays vivid on dark surfaces. */
-function lightenForDark(color: Oklch): Oklch {
-  return {
-    ...color,
-    c: color.c * 0.92,
-    l: Math.min(Math.max(color.l + 0.12, 0.6), 0.85),
-  };
-}
-
-function parseColor(value: string, name: string): Oklch {
-  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 }: ThemeOptions): ThemeVariables {
-  const variables: ThemeVariables = {};
-
-  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;
-}
-
-export type {
-  Theme,
-  ThemeCssOptions,
-  ThemeFonts,
-  ThemeOptions,
-  ThemeVariables,
-};