@paganaye/stylets 0.1.0

package/src/CssColor.ts

@@ -0,0 +1,175 @@
+import { type Num } from "./CssNum";
+import { CssExpr, customCss } from "./CssExpr";
+
+type IPropAlteration = Num | { expr?: Num, mul?: Num, add?: Num, min?: Num, max?: Num };
+type IColorAlterations = { l?: IPropAlteration, c?: IPropAlteration, h?: IPropAlteration };
+
+export abstract class CssColor extends CssExpr {
+    abstract toString(): string;
+    static alpha = alpha
+    static contrast = contrast
+    static complement = complement
+    static triadic = triadic
+    static analogous = analogous
+    static alter = alter
+    static lch = lch
+    static mix = mix
+}
+
+class CssColorVar extends CssColor {
+    constructor(public name: string) { super('none', 'color'); }
+    toString(): string { return `var(--${this.name})`; }
+}
+
+class CssCustomColorExpr extends CssColor {
+    constructor(public expr: string) { super('none', 'color'); }
+    toString(): string { return this.expr; }
+}
+
+class LchColor extends CssColor {
+    constructor(public readonly l: number, public readonly c: number, public readonly h: number) { super('none', 'color') }
+    toString(): string { return `oklch(${this.l} ${this.c} ${this.h})`; }
+}
+
+class PropAlteration extends CssColor {
+    constructor(readonly prop: string, readonly alt?: IPropAlteration) { super('none', 'color'); }
+
+    toString(): string {
+        let alt = this.alt;
+        if (!alt) return this.prop;
+
+        if (typeof alt === 'number') return String(alt);
+        if (alt instanceof CssExpr || alt instanceof CssColor) return alt.toString();
+
+        let p = (val?: Num) => {
+            if (val === undefined) return undefined;
+            if (typeof val == 'number') return String(val);
+            return val.toString();
+        }
+
+        let expr = p((alt as any).expr) ?? this.prop;
+
+        const mul = p((alt as any).mul);
+        const add = p((alt as any).add);
+        const min = p((alt as any).min);
+        const max = p((alt as any).max);
+        // Handle multiplication and addition
+        if (mul && add) {
+            expr = `calc((${expr} * ${mul}) + ${add})`;
+        } else if (mul) {
+            expr = `calc(${expr} * ${mul})`;
+        } else if (add) {
+            expr = `calc(${expr} + ${add})`;
+        }
+
+        // Handle clamping
+        if ('min' in (alt as any) && 'max' in (alt as any)) {
+            expr = `clamp(${min}, ${expr}, ${max})`;
+        }
+        else if ('min' in (alt as any)) {
+            expr = `max(${min}, ${expr})`;
+        }
+        else if ('max' in (alt as any)) {
+            expr = `min(${expr}, ${max})`;
+        }
+
+        return expr;
+    }
+}
+
+class AlterColor extends CssColor {
+    l: PropAlteration;
+    c: PropAlteration;
+    h: PropAlteration;
+
+    constructor(public base: CssColor, alterations: IColorAlterations) {
+        super('none', 'color');
+        this.l = new PropAlteration('l', alterations.l);
+        this.c = new PropAlteration('c', alterations.c);
+        this.h = new PropAlteration('h', alterations.h);
+    }
+
+    toString(): string {
+        const l = this.l.toString();
+        const c = this.c.toString();
+        const h = this.h.toString();
+        return `oklch(from ${this.base.toString()} ${l} ${c} ${h})`;
+    }
+}
+
+class MixColor extends CssColor {
+    constructor(public base: CssColor, public other: CssColor, public ratio: number | CssExpr) { super('none', 'color'); }
+
+    toString(): string {
+        let percentA: string;
+        let percentB: string;
+        if (typeof this.ratio === 'number') {
+            if (this.ratio <= 0) return this.base.toString();
+            if (this.ratio >= 1) return this.other.toString();
+            percentA = `${Math.round(100 - this.ratio * 100)}%`;
+            percentB = `${Math.round(this.ratio * 100)}%`;
+        } else {
+            percentA = `calc(100% - ${this.ratio})`;
+            percentB = this.ratio.toString();
+        }
+        return `mix(${this.base.toString()} ${percentA}, ${this.other.toString()}, ${percentB})`;
+    }
+}
+
+class AlphaColor extends CssColor {
+    color: CssColor;
+    opacity: number | CssExpr;
+    constructor(color: CssColor, opacity: number | CssExpr) { super('none', 'color'); this.color = color; this.opacity = opacity; }
+    toString(): string { const op = typeof this.opacity === 'number' ? String(this.opacity) : this.opacity.toString(); return `color(${this.color.toString()} / ${op})`; }
+}
+
+class ContrastColor extends CssColor {
+    color: CssColor;
+    constructor(color: CssColor) { super('none', 'color'); this.color = color; }
+    toString(): string { if (this.color instanceof LchColor) { return this.color.l > 0.5 ? 'black' : 'white'; } return `color-contrast(${this.color.toString()} vs(black, white))`; }
+}
+
+class ComplementColor extends CssColor {
+    color: CssColor;
+    constructor(color: CssColor) { super('none', 'color'); this.color = color; }
+    toString(): string { if (this.color instanceof LchColor) { const newH = (this.color.h + 180) % 360; return lch(this.color.l, this.color.c, newH).toString(); } return `oklch(from ${this.color.toString()} l c calc((h + 180) % 360))`; }
+}
+
+class TriadicColor extends CssColor {
+    color: CssColor;
+    index: 0 | 1 | 2;
+    constructor(color: CssColor, index: 0 | 1 | 2 = 0) { super('none', 'color'); this.color = color; this.index = index; }
+    toString(): string { const offset = this.index === 0 ? 0 : (this.index === 1 ? 120 : 240); if (this.color instanceof LchColor) { const newH = (this.color.h + offset) % 360; return lch(this.color.l, this.color.c, newH).toString(); } return `oklch(from ${this.color.toString()} l c calc((h + ${offset}) % 360))`; }
+}
+
+class AnalogousColor extends CssExpr {
+    color: CssColor;
+    angle: number | CssExpr;
+    constructor(color: CssColor, angle: number | CssExpr = 30) { super('none', 'color'); this.color = color; this.angle = angle; }
+    toString(): string {
+        if (this.color instanceof LchColor) {
+            if (typeof this.angle === 'number') {
+                const h1 = (this.color.h + this.angle) % 360;
+                const h2 = (this.color.h + 360 - this.angle) % 360;
+                return `${lch(this.color.l, this.color.c, h1).toString()}, ${lch(this.color.l, this.color.c, h2).toString()}`;
+            }
+            const aStr = this.angle.toString();
+            return `${this.color.toString()}, oklch(l c calc((h + ${aStr}) % 360)), oklch(l c calc((h - ${aStr} + 360) % 360))`;
+        }
+        const aStr = typeof this.angle === 'number' ? String(this.angle) : this.angle.toString();
+        return `${this.color.toString()}, oklch(l c calc((h + ${aStr}) % 360)), oklch(l c calc((h - ${aStr} + 360) % 360))`;
+    }
+}
+
+export function alpha(color: CssExpr, opacity: number | CssExpr): string { return new AlphaColor(color, opacity).toString(); }
+export function contrast(color: CssExpr): string { return new ContrastColor(color).toString(); }
+export function complement(color: CssExpr): string { return new ComplementColor(color).toString(); }
+export function triadic(color: CssExpr, index: 0 | 1 | 2 = 0): string { return new TriadicColor(color, index).toString(); }
+export function analogous(color: CssExpr, angle: number = 30): string { return new AnalogousColor(color, angle).toString(); }
+export function alter(base: CssExpr, alterations: IColorAlterations): string { return new AlterColor(base, alterations).toString(); }
+export function lch(l: number, c: number, h: number): LchColor { return new LchColor(l, c, h); }
+export function mix(base: CssExpr, other: CssExpr, ratio: number | CssExpr): string { return new MixColor(base, other, ratio).toString(); }
+
+export const l = customCss('l', 'none', 'length');
+export const c = customCss('c', 'none', 'length');
+export const h = customCss('h', 'none', 'angle');

package/src/CssExpr.ts

@@ -0,0 +1,25 @@
+import { CssUnit, CssType } from "./CssNum";
+
+
+export abstract class CssExpr {
+    constructor(readonly unit: CssUnit, readonly type: CssType) { }
+}
+
+class CssVar extends CssExpr {
+    constructor(readonly varName: string, unit: CssUnit, type: CssType) { super('%', 'unknown'); }
+    toString(): string { return `var(--${this.varName})`; }
+}
+
+class CssCustomExpr extends CssExpr {
+    constructor(public expr: string, unit: CssUnit, type: CssType) { super(unit, type); }
+    toString(): string { return this.expr; }
+}
+
+class CssArg extends CssExpr {
+    constructor(readonly argName: string, unit: CssUnit, type: CssType) { super(unit, type); }
+    toString(): string { return this.argName; }
+}
+
+export function customCss(expr: string, unit: CssUnit = 'unknown', type: CssType = 'unknown'): CssExpr { return new CssCustomExpr(expr, unit, type); }
+export function arg(name: string, unit: CssUnit = 'unknown', type: CssType = 'unknown'): CssExpr { return new CssArg(name, unit, type); }
+export function v(name: string, unit: CssUnit = 'unknown', type: CssType = 'unknown'): CssExpr { return new CssVar(name, unit, type); }

package/src/CssFilter.ts

@@ -0,0 +1,44 @@
+import { CssExpr } from "./CssExpr";
+import { Num,numToStr } from "./CssNum";
+
+export class CssFilter extends CssExpr {
+
+    constructor(readonly options: FilterOptions | FilterOptions[]) {
+        super('none', 'filter');
+    }
+    toString(): string {
+        const serializeOne = (opt: FilterOptions) => {
+            const result: string[] = [];
+            if (opt.blur !== undefined) result.push(`blur(${numToStr(opt.blur)})`);
+            if (opt.brightness !== undefined) result.push(`brightness(${numToStr(opt.brightness)})`);
+            if (opt.contrast !== undefined) result.push(`contrast(${numToStr(opt.contrast)})`);
+            if (opt.hueRotate !== undefined) result.push(`hue-rotate(${numToStr(opt.hueRotate)})`);
+            if (opt.saturate !== undefined) result.push(`saturate(${numToStr(opt.saturate)})`);
+            if (opt.invert !== undefined) result.push(`invert(${numToStr(opt.invert)})`);
+            if (opt.grayscale !== undefined) result.push(`grayscale(${numToStr(opt.grayscale)})`);
+            if (opt.sepia !== undefined) result.push(`sepia(${numToStr(opt.sepia)})`);
+            if (opt.opacity !== undefined) result.push(`opacity(${numToStr(opt.opacity)})`);
+            return result.join(' ');
+        }
+        if (Array.isArray(this.options)) {
+            const parts = this.options.map(o => serializeOne(o));
+            return parts.join(' ');
+        } else {
+            return serializeOne(this.options);
+        }
+    }
+}
+
+export type FilterOptions = {
+    blur?: Num;
+    brightness?: Num;
+    contrast?: Num;
+    hueRotate?: Num;
+    saturate?: Num;
+    invert?: Num;
+    grayscale?: Num;
+    sepia?: Num;
+    opacity?: Num;
+}
+
+

package/src/CssNum.test.ts

@@ -0,0 +1,37 @@
+import { describe, it, expect } from 'vitest';
+// TODO: Update imports once CssNum is fully integrated
+// import { mul, add, clamp, min, max, num } from './CssNum';
+// import { l, h, c } from './CssColor';
+// import { v, customCss } from './CssExpr';
+
+describe('CssNumUtils', () => {
+    it.skip('numVar creates CSS var string', () => {
+        // expect(v('x').toString()).toBe('var(--x)');
+    });
+
+    it.skip('clamp/min/max produce expected strings', () => {
+        // expect(clamp(0, l, 1).toString()).toBe('clamp(0, l, 1)');
+        // expect(min(0, l, 2).toString()).toBe('min(0, l, 2)');
+        // expect(max(0, l, 2).toString()).toBe('max(0, l, 2)');
+        // expect(max(num(0, 'rem'), l, num(2, 'px')).toString()).toBe('max(0rem, l, 2px)');
+    });
+
+    it.skip('customCssExpr returns custom expression', () => {
+        // expect(customCss('calc(var(--a) + 1)').toString()).toBe('calc(var(--a) + 1)');
+    });
+
+    it.skip('num returns expected string', () => {
+        // expect(num(5, 'px').toString()).toBe('5px');
+    });
+
+    it.skip('min/max accept many args and nested expressions', () => {
+        // const nested = mul(l, 0.5);
+        // expect(clamp(0, nested, 100).toString()).toBe('clamp(0, calc(l * 0.5), 100)');
+
+        // expect(min(0, l, 2, mul(c, 3)).toString())
+        //     .toBe('min(0, l, 2, calc(c * 3))');
+
+        // expect(max(0, l, 2, add(c, 1)).toString())
+        //     .toBe('max(0, l, 2, calc(c + 1))');
+    });
+});

package/src/CssNum.ts

@@ -0,0 +1,93 @@
+import { CssExpr } from "./CssExpr";
+
+export type Num = number | string | CssExpr;
+
+export type ArgVariable = 'l' | 'c' | 'h';
+export type NumberType = 'length' | 'angle' | 'time' | 'frequency' | 'flex' | 'resolution';
+export type LengthUnit = 'px' | 'rem' | 'em' | 'vw' | 'vh' | '%';
+export type AngleUnit = 'deg' | 'rad';
+export type TimeUnit = 's' | 'ms';
+export type FrequencyUnit = 'hz' | 'khz';
+export type FlexUnit = 'fr';
+export type ResolutionUnit = 'dpi' | 'dpcm' | 'dppx';
+export type CssUnit = LengthUnit | AngleUnit | TimeUnit | FrequencyUnit | FlexUnit | ResolutionUnit | 'none' | 'unknown';
+export type CssType = NumberType | 'color' | 'shadow' | 'filter' | 'unknown';
+
+export function numToStr(num: Num): string {
+    if (typeof num === 'number') return String(num);
+    return `${num.toString()}`;
+}
+
+
+// ==== Num ===== //
+
+abstract class NumExpr extends CssExpr {
+    static arg = numArg;
+    static mul = mul;
+    static add = add;
+    static clamp = clamp;
+    static min = min;
+    static max = max;
+    static new = num;
+}
+
+class LitteralNumExpr extends NumExpr {
+    constructor(readonly value: number, readonly unit: CssUnit, type: CssType) { super(unit, type); }
+    toString(): string { return `${this.value}${this.unit ?? ''}`; }
+}
+
+class CssNumArg extends NumExpr {
+    constructor(readonly argName: string, unit: CssUnit, type: CssType) { super(unit, type); }
+    toString(): string { return this.argName; }
+}
+
+
+class MulExpr extends NumExpr {
+    constructor(public expr: NumExpr, public factor: number | NumExpr) { super('unknown', 'unknown'); }
+    toString(): string {
+        const f = numToStr(this.factor);
+        return `calc(${numToStr(this.expr)} * ${f})`;
+    }
+}
+
+class AddExpr extends NumExpr {
+    constructor(public expr: NumExpr, public addend: number | NumExpr) { super('unknown', 'unknown'); }
+    toString(): string {
+        const a = numToStr(this.addend);
+        return `calc(${numToStr(this.expr)} + ${a})`;
+    }
+}
+
+class ClampExpr extends NumExpr {
+    constructor(public min: number | NumExpr, public expr: NumExpr, public max: number | NumExpr) { super('unknown', 'unknown'); }
+    toString(): string {
+        const mn = numToStr(this.min);
+        const ex = numToStr(this.expr);
+        const mx = numToStr(this.max);
+        return `clamp(${mn}, ${ex}, ${mx})`;
+    }
+}
+
+class MinExpr extends NumExpr {
+    constructor(public args: Array<number | NumExpr>) { super('unknown', 'unknown'); }
+    toString(): string {
+        const parts = this.args.map(a => numToStr(a));
+        return `min(${parts.join(', ')})`;
+    }
+}
+
+class MaxExpr extends NumExpr {
+    constructor(public args: Array<number | NumExpr>) { super('unknown', 'unknown'); }
+    toString(): string {
+        const parts = this.args.map(a => numToStr(a));
+        return `max(${parts.join(', ')})`;
+    }
+}
+
+export function numArg(name: string, unit: CssUnit = 'none', type: CssType = 'length'): CssExpr { return new CssNumArg(name, unit, type); }
+export function mul(expr: NumExpr, factor: number | NumExpr): NumExpr { return new MulExpr(expr, factor); }
+export function add(expr: NumExpr, addend: number | NumExpr): NumExpr { return new AddExpr(expr, addend); }
+export function clamp(min: number | NumExpr, expr: NumExpr, max: number | NumExpr): NumExpr { return new ClampExpr(min, expr, max); }
+export function min(...args: Array<number | NumExpr>): NumExpr { return new MinExpr(args); }
+export function max(...args: Array<number | NumExpr>): NumExpr { return new MaxExpr(args); }
+export function num(value: number, unit: CssUnit = 'unknown', type: CssType = 'unknown'): NumExpr { return new LitteralNumExpr(value, unit, type); } 

package/src/CssReset.ts

@@ -0,0 +1,17 @@
+import { addStyles } from "./StyleWriter";
+
+addStyles("css-reset", (builder) => {
+    builder.addLines([`/* John W Comeau Modern CSS Reset */`,
+        `*, *::before, *::after { box-sizing: border-box; }`,
+        `*:not(dialog) { margin: 0; }`,
+        `@media (prefers-reduced-motion: no-preference) { html { interpolate-size: allow-keywords; } }`,
+        `body { line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; }`,
+        `img, picture, video, canvas, svg { display: block; max-width: 100%; }`,
+        `input, button, textarea, select { font: inherit; }`,
+        `p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }`,
+        `p { text-wrap: pretty; }`,
+        `h1, h2, h3, h4, h5, h6 { text-wrap: balance; }`,
+        `#root, #__next { isolation: isolate; }`,
+    ]);
+});
+

package/src/CssShadow.ts

@@ -0,0 +1,46 @@
+import { CssColor } from "./CssColor";
+import { CssExpr } from "./CssExpr";
+import { Num } from "./CssNum";
+
+export type BoxShadowOptions = {
+    offsetX: Num;
+    offsetY: Num;
+    blur?: Num;
+    spread?: Num;
+    color?: string | CssColor;
+    inset?: boolean;
+}
+
+export class CssShadow extends CssExpr {
+    constructor(readonly kind: 'box' | 'text', public opts: BoxShadowOptions | BoxShadowOptions[]) { super('none', 'shadow'); }
+    toString(): string {
+        let serializeOne = (opt: BoxShadowOptions) => {
+            const { offsetX, offsetY, blur, spread, color, inset } = opt;
+            const parts: string[] = [];
+            // For text shadows, 'inset' and 'spread' are not valid
+            if (inset && this.kind === 'box') parts.push('inset');
+            const sx = typeof offsetX === 'string' ? offsetX : offsetX.toString();
+            const sy = typeof offsetY === 'string' ? offsetY : offsetY.toString();
+            parts.push(sx, sy);
+            if (blur !== undefined) parts.push(typeof blur === 'string' ? blur : blur.toString());
+            if (spread !== undefined && this.kind === 'box') parts.push(typeof spread === 'string' ? spread : spread.toString());
+            if (color) parts.push(typeof color === 'string' ? color : color.toString());
+            return parts.join(' ');
+        };
+
+        if (Array.isArray(this.opts)) {
+            const parts = this.opts.map(o => serializeOne(o));
+            return parts.join(', ');
+        } else {
+            return serializeOne(this.opts);
+        }
+    }
+}
+
+export function textShadow(options: BoxShadowOptions | BoxShadowOptions[]): CssShadow {
+    return new CssShadow('text', options);
+}
+
+export function boxShadow(options: BoxShadowOptions | BoxShadowOptions[]): CssShadow {
+    return new CssShadow('box', options);
+}

package/src/DefaultTheme.ts

@@ -0,0 +1,8 @@
+import { createTheme } from "./Theme";
+
+
+export const theme = createTheme({
+    colors: {
+        primary: '#3498db',
+    }
+});

package/src/HTML.tsx

@@ -0,0 +1,17 @@
+import { prepareProps, completeProps, Elt } from "./props";
+import { CssProperties, ThemeClass, ElementPropsRecord } from "./types";
+import { theme } from "./DefaultTheme";
+
+export interface IDivProps {
+    class?: ThemeClass<typeof theme>;
+    style?: CssProperties;
+    gap?: number;
+}
+
+export function Div(props: IDivProps, children: any[]) {
+    return Elt('div', props, children);
+}
+
+export function P(props: IDivProps, children: any[]) {
+    return Elt('p', props, children);
+}

package/src/ScopeStyles.ts

@@ -0,0 +1,100 @@
+import { ThemeBuilder } from "./Theme";
+import { BaseStyles } from "./BaseStyles";
+import { IThemeParts, IScopeStylesParts, MergeThemeArgs, ThemeArgs, Identity, Simplify } from "./types";
+
+export class ScopeStylesBuilder<
+    A extends ThemeArgs,
+    V extends A['variants'] = A['variants']
+> extends BaseStyles<A> {
+    readonly class: string;
+    scopeStart: string;
+    scopeEnd: string | undefined;
+
+    parent: ThemeBuilder<any>;
+    constructor(parent: ThemeBuilder<any>, themeParts: IScopeStylesParts<A> & {
+        class: string;
+        scopeStart: string;
+        scopeEnd?: string;
+    }) {
+        // Merge all parent properties into scope
+        const mergedParts = {
+            ...themeParts,
+            name: `@scope ${themeParts.class}`,
+            colors: { ...parent.colors, ...themeParts.colors },
+            vars: { ...parent.vars, ...themeParts.vars },
+            paddings: { ...parent.paddings, ...themeParts.paddings },
+            margins: { ...parent.margins, ...themeParts.margins },
+            borders: { ...parent.borders, ...themeParts.borders },
+            backgrounds: { ...parent.backgrounds, ...themeParts.backgrounds },
+            typography: { ...parent.typography, ...themeParts.typography },
+            layouts: { ...parent.layouts, ...themeParts.layouts },
+            shadows: { ...parent.shadows, ...themeParts.shadows },
+            classes: { ...parent.classes, ...themeParts.classes },
+            variants: { ...parent.variants, ...themeParts.variants }
+        };
+        super(mergedParts as any);
+        this.parent = parent;
+        this.class = themeParts.class ?? '';
+        this.scopeStart = themeParts.scopeStart ?? `.${themeParts.class}`;
+        this.scopeEnd = themeParts.scopeEnd;
+    }
+
+    // overloads to infer Added from literal or callback
+    add<P extends IScopeStylesParts<any>>(parts: P): ScopeStylesBuilder<MergeThemeArgs<A, P>, MergeThemeArgs<A, P>['variants']>;
+    add<P extends (theme: ThemeBuilder<A>) => IScopeStylesParts<any>>(parts: P): ScopeStylesBuilder<MergeThemeArgs<A, ReturnType<P>>, MergeThemeArgs<A, ReturnType<P>>['variants']>;
+
+    add(parts: any): any {
+        if (typeof parts === 'function') parts = parts(this as any);
+        super.add(parts as any);
+        return this;
+    }
+
+    protected override renderHeader(): void {
+        super.renderHeader();
+        this.builder.addLine(`@scope (${this.scopeStart})${this.scopeEnd ? ` to (${this.scopeEnd})` : ''} {`);
+        this.builder.indentLevel += 1;
+    }
+
+    protected renderVariants(): void {
+        if (Object.keys(this._variants).length === 0) return;
+
+        this.builder.addLine(`/* variants */`);
+
+        for (const [variantKey, variantValues] of Object.entries(this._variants)) {
+            for (const [variantName, styles] of Object.entries(variantValues as Record<string, any>)) {
+                const selector = `&[${variantKey}="${variantName}"]`;
+                this.builder.addRule(selector, styles);
+            }
+        }
+    }
+
+    override renderFooter(): void {
+        this.renderVariants();
+        this.builder.indentLevel -= 1;
+        this.builder.addLine(`}`);
+        super.renderFooter();
+    }
+    public render() {
+        super.render();
+        let result = this as unknown as ScopeStylesPublic<A, V>;
+        return result;
+    }
+}
+
+// only for the IDE never instantiated, 
+export type ScopeStylesPublic<
+    A extends ThemeArgs,
+    V extends A['variants'] = A['variants']
+> = {
+    class: string;
+    variants: V;
+}
+
+// only for the IDE never instantiated, kept internal
+class ScopeStyles<
+    A extends ThemeArgs,
+    V extends A['variants'] = A['variants']
+> extends BaseStyles<A> {
+    class!: string;
+}
+

package/src/State.test.ts

@@ -0,0 +1,47 @@
+import { describe, it, expect } from 'vitest';
+// TODO: Update imports once State is fully integrated
+// import { computed, createState } from './State';
+
+describe('State', () => {
+  it.skip('returns initial value and emits on set', async () => {
+    // const s = createState<string>("A");
+    // expect(await s.value).toBe("A");
+
+    // let calls = 0;
+    // let expectedValue = "A";
+    // s.subscribe((v) => {
+    //   calls++;
+    //   expect(v).toBe(expectedValue);
+    // });
+
+    // expectedValue = "B";
+    // s.setValue("B");
+    // expect(calls).toBe(2);
+  });
+
+  it.skip('emits when initialized with a resolving promise', async () => {
+    // const s = createState<number>();
+    // s.setValue(5);
+    // expect(s.value).toBe(5);
+  });
+
+  it.skip('recomputes when dependency changes', () => {
+    // const a = createState(100);
+    // const c = computed([a], () => {
+    //   return (a.value) + 1;
+    // }, 0);
+    // expect(c.value).toBe(101);
+    // a.setValue(200);
+    // expect(c.value).toBe(201);
+  });
+
+  it.skip('recomputes when dependency changes II', () => {
+    // const a = createState(100);
+    // const c = computed([a], () => {
+    //   return (a.value) + 1;
+    // });
+    // expect(c.value).toBe(101);
+    // a.setValue(200);
+    // expect(c.value).toBe(201);
+  });
+});