@voiceflow/style 1.1.0

package/build/esm/styled/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const STYLED_CLASS: unique symbol;
+//# sourceMappingURL=constants.d.ts.map

package/build/esm/styled/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/styled/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,eAAyB,CAAC"}

package/build/esm/styled/constants.js

@@ -0,0 +1 @@
+export const STYLED_CLASS = Symbol('styled_class');

package/build/esm/styled/factory.d.ts

@@ -0,0 +1,180 @@
+import type { StyledFactory } from './types.js';
+export declare const styled: {
+    a: StyledFactory<"a">;
+    abbr: StyledFactory<"abbr">;
+    address: StyledFactory<"address">;
+    area: StyledFactory<"area">;
+    article: StyledFactory<"article">;
+    aside: StyledFactory<"aside">;
+    audio: StyledFactory<"audio">;
+    b: StyledFactory<"b">;
+    base: StyledFactory<"base">;
+    bdi: StyledFactory<"bdi">;
+    bdo: StyledFactory<"bdo">;
+    big: StyledFactory<"big">;
+    blockquote: StyledFactory<"blockquote">;
+    body: StyledFactory<"body">;
+    br: StyledFactory<"br">;
+    button: StyledFactory<"button">;
+    canvas: StyledFactory<"canvas">;
+    caption: StyledFactory<"caption">;
+    center: StyledFactory<"center">;
+    cite: StyledFactory<"cite">;
+    code: StyledFactory<"code">;
+    col: StyledFactory<"col">;
+    colgroup: StyledFactory<"colgroup">;
+    data: StyledFactory<"data">;
+    datalist: StyledFactory<"datalist">;
+    dd: StyledFactory<"dd">;
+    del: StyledFactory<"del">;
+    details: StyledFactory<"details">;
+    dfn: StyledFactory<"dfn">;
+    dialog: StyledFactory<"dialog">;
+    div: StyledFactory<"div">;
+    dl: StyledFactory<"dl">;
+    dt: StyledFactory<"dt">;
+    em: StyledFactory<"em">;
+    embed: StyledFactory<"embed">;
+    fieldset: StyledFactory<"fieldset">;
+    figcaption: StyledFactory<"figcaption">;
+    figure: StyledFactory<"figure">;
+    footer: StyledFactory<"footer">;
+    form: StyledFactory<"form">;
+    h1: StyledFactory<"h1">;
+    h2: StyledFactory<"h2">;
+    h3: StyledFactory<"h3">;
+    h4: StyledFactory<"h4">;
+    h5: StyledFactory<"h5">;
+    h6: StyledFactory<"h6">;
+    head: StyledFactory<"head">;
+    header: StyledFactory<"header">;
+    hgroup: StyledFactory<"hgroup">;
+    hr: StyledFactory<"hr">;
+    html: StyledFactory<"html">;
+    i: StyledFactory<"i">;
+    iframe: StyledFactory<"iframe">;
+    img: StyledFactory<"img">;
+    input: StyledFactory<"input">;
+    ins: StyledFactory<"ins">;
+    kbd: StyledFactory<"kbd">;
+    keygen: StyledFactory<"keygen">;
+    label: StyledFactory<"label">;
+    legend: StyledFactory<"legend">;
+    li: StyledFactory<"li">;
+    link: StyledFactory<"link">;
+    main: StyledFactory<"main">;
+    map: StyledFactory<"map">;
+    mark: StyledFactory<"mark">;
+    menu: StyledFactory<"menu">;
+    menuitem: StyledFactory<"menuitem">;
+    meta: StyledFactory<"meta">;
+    meter: StyledFactory<"meter">;
+    nav: StyledFactory<"nav">;
+    noindex: StyledFactory<"noindex">;
+    noscript: StyledFactory<"noscript">;
+    object: StyledFactory<"object">;
+    ol: StyledFactory<"ol">;
+    optgroup: StyledFactory<"optgroup">;
+    option: StyledFactory<"option">;
+    output: StyledFactory<"output">;
+    p: StyledFactory<"p">;
+    param: StyledFactory<"param">;
+    picture: StyledFactory<"picture">;
+    pre: StyledFactory<"pre">;
+    progress: StyledFactory<"progress">;
+    q: StyledFactory<"q">;
+    rp: StyledFactory<"rp">;
+    rt: StyledFactory<"rt">;
+    ruby: StyledFactory<"ruby">;
+    s: StyledFactory<"s">;
+    samp: StyledFactory<"samp">;
+    slot: StyledFactory<"slot">;
+    script: StyledFactory<"script">;
+    section: StyledFactory<"section">;
+    select: StyledFactory<"select">;
+    small: StyledFactory<"small">;
+    source: StyledFactory<"source">;
+    span: StyledFactory<"span">;
+    strong: StyledFactory<"strong">;
+    style: StyledFactory<"style">;
+    sub: StyledFactory<"sub">;
+    summary: StyledFactory<"summary">;
+    sup: StyledFactory<"sup">;
+    table: StyledFactory<"table">;
+    template: StyledFactory<"template">;
+    tbody: StyledFactory<"tbody">;
+    td: StyledFactory<"td">;
+    textarea: StyledFactory<"textarea">;
+    tfoot: StyledFactory<"tfoot">;
+    th: StyledFactory<"th">;
+    thead: StyledFactory<"thead">;
+    time: StyledFactory<"time">;
+    title: StyledFactory<"title">;
+    tr: StyledFactory<"tr">;
+    track: StyledFactory<"track">;
+    u: StyledFactory<"u">;
+    ul: StyledFactory<"ul">;
+    var: StyledFactory<"var">;
+    video: StyledFactory<"video">;
+    wbr: StyledFactory<"wbr">;
+    webview: StyledFactory<"webview">;
+    svg: StyledFactory<"svg">;
+    animate: StyledFactory<"animate">;
+    animateMotion: StyledFactory<"animateMotion">;
+    animateTransform: StyledFactory<"animateTransform">;
+    circle: StyledFactory<"circle">;
+    clipPath: StyledFactory<"clipPath">;
+    defs: StyledFactory<"defs">;
+    desc: StyledFactory<"desc">;
+    ellipse: StyledFactory<"ellipse">;
+    feBlend: StyledFactory<"feBlend">;
+    feColorMatrix: StyledFactory<"feColorMatrix">;
+    feComponentTransfer: StyledFactory<"feComponentTransfer">;
+    feComposite: StyledFactory<"feComposite">;
+    feConvolveMatrix: StyledFactory<"feConvolveMatrix">;
+    feDiffuseLighting: StyledFactory<"feDiffuseLighting">;
+    feDisplacementMap: StyledFactory<"feDisplacementMap">;
+    feDistantLight: StyledFactory<"feDistantLight">;
+    feDropShadow: StyledFactory<"feDropShadow">;
+    feFlood: StyledFactory<"feFlood">;
+    feFuncA: StyledFactory<"feFuncA">;
+    feFuncB: StyledFactory<"feFuncB">;
+    feFuncG: StyledFactory<"feFuncG">;
+    feFuncR: StyledFactory<"feFuncR">;
+    feGaussianBlur: StyledFactory<"feGaussianBlur">;
+    feImage: StyledFactory<"feImage">;
+    feMerge: StyledFactory<"feMerge">;
+    feMergeNode: StyledFactory<"feMergeNode">;
+    feMorphology: StyledFactory<"feMorphology">;
+    feOffset: StyledFactory<"feOffset">;
+    fePointLight: StyledFactory<"fePointLight">;
+    feSpecularLighting: StyledFactory<"feSpecularLighting">;
+    feSpotLight: StyledFactory<"feSpotLight">;
+    feTile: StyledFactory<"feTile">;
+    feTurbulence: StyledFactory<"feTurbulence">;
+    filter: StyledFactory<"filter">;
+    foreignObject: StyledFactory<"foreignObject">;
+    g: StyledFactory<"g">;
+    image: StyledFactory<"image">;
+    line: StyledFactory<"line">;
+    linearGradient: StyledFactory<"linearGradient">;
+    marker: StyledFactory<"marker">;
+    mask: StyledFactory<"mask">;
+    metadata: StyledFactory<"metadata">;
+    mpath: StyledFactory<"mpath">;
+    path: StyledFactory<"path">;
+    pattern: StyledFactory<"pattern">;
+    polygon: StyledFactory<"polygon">;
+    polyline: StyledFactory<"polyline">;
+    radialGradient: StyledFactory<"radialGradient">;
+    rect: StyledFactory<"rect">;
+    stop: StyledFactory<"stop">;
+    switch: StyledFactory<"switch">;
+    symbol: StyledFactory<"symbol">;
+    text: StyledFactory<"text">;
+    textPath: StyledFactory<"textPath">;
+    tspan: StyledFactory<"tspan">;
+    use: StyledFactory<"use">;
+    view: StyledFactory<"view">;
+};
+//# sourceMappingURL=factory.d.ts.map

package/build/esm/styled/factory.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"factory.d.ts","sourceRoot":"","sources":["../../../src/styled/factory.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAMV,aAAa,EACd,MAAM,SAAS,CAAC;AAGjB,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuBjB,CAAC"}

package/build/esm/styled/factory.js

@@ -0,0 +1,22 @@
+import { clsx } from 'clsx';
+import { createElement } from 'react';
+import { useTheme } from '../ThemeContext.js';
+import { STYLED_CLASS } from './constants.js';
+import { getDynamicOptions, getStaticClass, useDynamicClass, useInlineStyle } from './utils.js';
+export const styled = new Proxy({}, {
+    get: (_target, tag) => (firstArg, secondArg, thirdArg) => {
+        const staticClass = getStaticClass(firstArg, secondArg);
+        const dynamicOptions = getDynamicOptions(secondArg, thirdArg);
+        const StyledComponent = (props) => {
+            const themeClass = useTheme();
+            const dynamicClass = useDynamicClass(firstArg, props);
+            const inlineStyle = useInlineStyle(props, dynamicOptions);
+            return createElement(tag, {
+                ...props,
+                className: clsx(themeClass, staticClass, dynamicClass, props.className),
+                style: { ...inlineStyle, ...props.style },
+            });
+        };
+        return Object.assign(StyledComponent, { [STYLED_CLASS]: staticClass });
+    },
+});

package/build/esm/styled/factory.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=factory.test.d.ts.map

package/build/esm/styled/factory.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"factory.test.d.ts","sourceRoot":"","sources":["../../../src/styled/factory.test.tsx"],"names":[],"mappings":""}

package/build/esm/styled/factory.test.js

@@ -0,0 +1,138 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { describe, it } from 'vitest';
+import { Button, InlineThemedButton, InlineVarButton, RecipeButton, ReuseCSS, ReuseStyled, Theme, ThemedButton, VariantButton, } from '../__fixtures__/index.js';
+import { ThemeProvider } from '../ThemeContext.js';
+const BASE_STYLE = {
+    padding: '20px',
+    borderRadius: '10px',
+    margin: '10px',
+};
+describe('styled factory', () => {
+    describe('static styling', () => {
+        it('should inherit styles from static CSS', () => {
+            render(_jsx(Button, {}));
+            const el = screen.getByRole('button');
+            expect(el).toHaveClass(Button.css.base);
+            expect(el).toHaveStyle(BASE_STYLE);
+        });
+    });
+    describe('reusable CSS', () => {
+        it('should extend static CSS with overrides', () => {
+            render(_jsx(ReuseCSS, {}));
+            const el = screen.getByRole('button');
+            expect(el).toHaveClass(Button.css.base, ReuseCSS.css.base);
+            expect(el).toHaveStyle({
+                padding: '20px',
+                margin: '10px',
+                backgroundColor: 'red',
+                borderRadius: '0',
+            });
+        });
+    });
+    describe('reusable styled components', () => {
+        it('should extend styled component with overrides', () => {
+            render(_jsx(ReuseStyled, {}));
+            const el = screen.getByRole('button');
+            expect(el).toHaveClass(Button.css.base, ReuseStyled.css.override);
+            expect(el).toHaveStyle({
+                padding: '20px',
+                border: '1px solid red',
+                margin: '2px',
+            });
+        });
+    });
+    describe('style variants', () => {
+        it('should render the primary style variant', () => {
+            render(_jsx(VariantButton, { variant: "primary" }));
+            const el = screen.getByRole('button');
+            expect(el).toHaveClass(Button.css.base, VariantButton.css.variants.primary);
+            expect(el).toHaveStyle({
+                ...BASE_STYLE,
+                borderWidth: '2px',
+                borderColor: 'pink',
+            });
+        });
+        it('should render the secondary style variant', () => {
+            render(_jsx(VariantButton, { variant: "secondary" }));
+            const el = screen.getByRole('button');
+            expect(el).toHaveClass(Button.css.base, VariantButton.css.variants.secondary);
+            expect(el).toHaveStyle({
+                ...BASE_STYLE,
+                borderWidth: '2px',
+                borderColor: 'blue',
+            });
+        });
+    });
+    describe('style recipes', () => {
+        it('should render a recipe with default variants', () => {
+            render(_jsx(RecipeButton, {}));
+            const el = screen.getByRole('button');
+            expect(el).toHaveClass(Button.css.base);
+            expect(el).toHaveStyle({
+                ...BASE_STYLE,
+                border: '1px dashed black',
+                fontSize: '18px',
+            });
+        });
+        it('should render a recipe with selected variants', () => {
+            render(_jsx(RecipeButton, { fontSize: "sm", color: "warn" }));
+            const el = screen.getByRole('button');
+            expect(el).toHaveClass(Button.css.base);
+            expect(el).toHaveStyle({
+                ...BASE_STYLE,
+                border: '1px dashed black',
+                backgroundColor: 'orange',
+                fontSize: '10px',
+            });
+        });
+    });
+    // unable to test CSS variables fully in JSDOM it seems
+    // https://github.com/jsdom/jsdom/pull/3299
+    describe.skip('themed components', () => {
+        it('should render styles from the provided theme', () => {
+            render(_jsx(ThemeProvider, { theme: Theme.light, children: _jsx(ThemedButton, {}) }));
+            const el = screen.getByRole('button');
+            expect(el).toHaveClass(Button.css.base, ThemedButton.css.themed);
+            expect(el).toHaveStyle({
+                ...BASE_STYLE,
+                color: 'red',
+                borderRadius: '0',
+            });
+        });
+        it('should override styles with contextual themes', () => {
+            render(_jsx(ThemeProvider, { theme: Theme.light, children: _jsx(ThemeProvider, { theme: Theme.dark, children: _jsx(ThemedButton, {}) }) }));
+            const el = screen.getByRole('button');
+            expect(el).toHaveClass(Button.css.base, ThemedButton.css.themed);
+            expect(el).toHaveStyle({
+                ...BASE_STYLE,
+                color: 'blue',
+                borderRadius: '0',
+            });
+        });
+    });
+    describe.skip('inline CSS variables', () => {
+        it('should render style from dynamic values', () => {
+            render(_jsx(InlineVarButton, { brandColor: "green" }));
+            const el = screen.getByRole('button');
+            expect(el).toHaveClass(Button.css.base, InlineVarButton.css.base);
+            expect(el).toHaveStyle({
+                ...BASE_STYLE,
+                color: 'green',
+                borderRadius: '0',
+            });
+        });
+    });
+    describe.skip('inline theme', () => {
+        it('should render style from inline theme', () => {
+            render(_jsx(InlineThemedButton, { brandColor: "green" }));
+            const el = screen.getByRole('button');
+            expect(el).toHaveClass(Button.css.base, InlineThemedButton.css.themed);
+            expect(el).toHaveStyle({
+                ...BASE_STYLE,
+                color: 'green',
+                borderRadius: '0',
+            });
+        });
+    });
+});

package/build/esm/styled/index.d.ts

@@ -0,0 +1,5 @@
+export * from './constants.js';
+export * from './factory.js';
+export * from './types.js';
+export * from './utils.js';
+//# sourceMappingURL=index.d.ts.map

package/build/esm/styled/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/styled/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

package/build/esm/styled/index.js

@@ -0,0 +1,4 @@
+export * from './constants.js';
+export * from './factory.js';
+export * from './types.js';
+export * from './utils.js';

package/build/esm/styled/types.d.ts

@@ -0,0 +1,47 @@
+/// <reference types="react" />
+import type { assignInlineVars } from '@vanilla-extract/dynamic';
+import type { RecipeVariants, RuntimeFn } from '@vanilla-extract/recipes';
+import type { STYLED_CLASS } from './constants.js';
+export type ThemeContract = Parameters<typeof assignInlineVars>[0];
+export interface DynamicOptions<Theme extends ThemeContract | null = ThemeContract, Variables extends Record<string, string> | null = Record<string, string>> {
+    /**
+     * the contract for a theme that can be overridden via a `theme` prop
+     */
+    theme?: Theme;
+    /**
+     * variables that can be overridden via a `vars` prop
+     */
+    vars?: Variables;
+}
+export type DynamicThemeProps<Theme> = Theme extends ThemeContract ? {
+    /**
+     * inline override for the theme used to style this component
+     */
+    theme?: Parameters<typeof assignInlineVars<Theme>>[1];
+} : {};
+export type DynamicVariablesProps<Variables> = Variables extends Record<string, string> ? {
+    /**
+     * inline override for variables used to styled this component
+     */
+    vars?: Partial<{
+        [K in keyof Variables]: string;
+    }>;
+} : {};
+export type StyledComponentProps<Tag extends keyof JSX.IntrinsicElements, Theme, Variables, Extras extends object = {}> = React.ComponentProps<Tag> & DynamicThemeProps<Theme> & DynamicVariablesProps<Variables> & Extras;
+export interface StyledComponent<Props = {}> extends React.FunctionComponent<Props> {
+    (props: Props, context?: any): React.ReactElement<any, any> | null;
+    [STYLED_CLASS]: string | null;
+}
+export type StyleSource = StyledComponent | string;
+export interface StyledFactory<Tag extends keyof JSX.IntrinsicElements> {
+    <Recipe extends RuntimeFn<Record<string, any>>, Theme extends ThemeContract | null = null, Variables extends Record<string, string> | null = null>(recipe: Recipe, sources?: StyleSource[], dynamic?: DynamicOptions<Theme, Variables>): StyledComponent<StyledComponentProps<Tag, Theme, Variables, {
+        variants: RecipeVariants<Recipe>;
+    }>>;
+    <Variant extends string, Theme extends ThemeContract | null = null, Variables extends Record<string, string> | null = null>(variants: Record<Variant, string>, sources?: StyleSource[], dynamic?: DynamicOptions<Theme, Variables>): StyledComponent<StyledComponentProps<Tag, Theme, Variables, {
+        variant: Variant;
+    }>>;
+    <Theme extends ThemeContract | null = null, Variables extends Record<string, string> | null = null>(sources: StyleSource[], dynamic?: DynamicOptions<Theme, Variables>): StyledComponent<StyledComponentProps<Tag, Theme, Variables>>;
+}
+export type FirstStyledArgument<Variants extends {} = any> = RuntimeFn<Variants> | Record<string, string> | StyleSource[];
+export type SecondStyledArgument = StyleSource[] | DynamicOptions;
+//# sourceMappingURL=types.d.ts.map

package/build/esm/styled/types.d.ts.map

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

package/build/esm/styled/types.js

@@ -0,0 +1 @@
+export {};

package/build/esm/styled/utils.d.ts

@@ -0,0 +1,9 @@
+import type { DynamicOptions, FirstStyledArgument, SecondStyledArgument, StyledComponentProps, ThemeContract } from './types.js';
+export declare const getStaticClass: (firstArg: FirstStyledArgument, secondArg?: SecondStyledArgument) => string | null;
+export declare const getDynamicOptions: (secondArg?: SecondStyledArgument, thirdArg?: DynamicOptions) => DynamicOptions | null;
+export declare const useDynamicClass: (firstArg: FirstStyledArgument<any>, props: {
+    variant?: string;
+    variants?: Record<string, any>;
+}) => string | null;
+export declare const useInlineStyle: (props: StyledComponentProps<keyof JSX.IntrinsicElements, ThemeContract, Record<string, string>>, dynamicOptions: DynamicOptions | null) => {};
+//# sourceMappingURL=utils.d.ts.map

package/build/esm/styled/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/styled/utils.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EACV,cAAc,EACd,mBAAmB,EACnB,oBAAoB,EACpB,oBAAoB,EACpB,aAAa,EACd,MAAM,SAAS,CAAC;AAEjB,eAAO,MAAM,cAAc,aAAc,mBAAmB,cAAc,oBAAoB,KAAG,MAAM,GAAG,IAOzG,CAAC;AAEF,eAAO,MAAM,iBAAiB,eAAgB,oBAAoB,aAAa,cAAc,KAAG,cAAc,GAAG,IACtD,CAAC;AAE5D,eAAO,MAAM,eAAe,aAChB,oBAAoB,GAAG,CAAC,SAC3B;IAAE,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,MAAM,EAAE,GAAG,CAAC,CAAA;CAAE,kBAOd,CAAC;AAEhD,eAAO,MAAM,cAAc,UAClB,qBAAqB,MAAM,IAAI,iBAAiB,EAAE,aAAa,EAAE,OAAO,MAAM,EAAE,MAAM,CAAC,CAAC,kBAC/E,cAAc,GAAG,IAAI,OAiBtC,CAAC"}

package/build/esm/styled/utils.js

@@ -0,0 +1,30 @@
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { clsx } from 'clsx';
+import { useMemo } from 'react';
+import { STYLED_CLASS } from './constants.js';
+export const getStaticClass = (firstArg, secondArg) => {
+    // eslint-disable-next-line no-nested-ternary
+    const classNames = (Array.isArray(firstArg) ? firstArg : Array.isArray(secondArg) ? secondArg : []).map((source) => typeof source === 'string' ? source : source[STYLED_CLASS]);
+    return classNames.length ? clsx(classNames) : null;
+};
+export const getDynamicOptions = (secondArg, thirdArg) => (Array.isArray(secondArg) ? thirdArg : secondArg) ?? null;
+export const useDynamicClass = (firstArg, props) => useMemo(() => {
+    if (typeof firstArg === 'function')
+        return firstArg(props.variants);
+    if (Array.isArray(firstArg) || !props.variant)
+        return null;
+    return firstArg[props.variant];
+}, [firstArg, props.variants, props.variant]);
+export const useInlineStyle = (props, dynamicOptions) => {
+    const { theme, vars } = dynamicOptions ?? {};
+    return useMemo(() => {
+        const style = {};
+        if (theme && props.theme) {
+            Object.assign(style, assignInlineVars(theme, props.theme));
+        }
+        if (vars && props.vars) {
+            Object.assign(style, assignInlineVars(props.vars));
+        }
+        return style;
+    }, [props.theme, props.vars]);
+};

package/config/test/setup.js

@@ -0,0 +1,9 @@
+import matchers from '@testing-library/jest-dom/matchers';
+import { cleanup } from '@testing-library/react';
+import { afterEach, expect } from 'vitest';
+
+expect.extend(matchers);
+
+afterEach(() => {
+  cleanup();
+});

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@voiceflow/style",
+  "version": "1.1.0",
+  "exports": {
+    ".": {
+      "types": "./build/cjs/main.d.ts",
+      "import": "./build/esm/main.js",
+      "default": "./build/cjs/main.js"
+    }
+  },
+  "main": "build/cjs/main.js",
+  "types": "build/cjs/main.d.ts",
+  "scripts": {
+    "build": "yarn g:run-p build:cjs build:esm",
+    "prebuild:cjs": "yarn g:rimraf build/cjs",
+    "build:cjs": "yarn prebuild:cjs && yarn g:tsc -p tsconfig.build.cjs.json && yarn g:tsc-alias -p tsconfig.build.cjs.json && yarn postbuild:cjs",
+    "postbuild:cjs": "touch build/cjs/package.json && echo '{ \"type\": \"commonjs\" }' > build/cjs/package.json",
+    "prebuild:esm": "yarn g:rimraf build/esm",
+    "build:esm": "yarn prebuild:esm && yarn g:tsc -p tsconfig.build.esm.json && yarn g:tsc-alias -p tsconfig.build.esm.json && yarn postbuild:esm",
+    "postbuild:esm": "touch build/esm/package.json && echo '{ \"type\": \"module\" }' > build/esm/package.json",
+    "lint": "yarn g:run-p lint:eslint \"lint:prettier --check\"",
+    "lint:eslint": "yarn g:eslint \"src/**/*.{js,ts}\"",
+    "lint:fix": "yarn g:run-p \"lint:eslint --fix\" \"lint:prettier --write\"",
+    "lint:prettier": "yarn g:prettier . \"!**/*.{js,ts}\"",
+    "lint:report": "yarn g:eslint-output --quiet './src/**/*.{js,ts}'",
+    "test": "yarn g:vitest",
+    "test:check": "yarn g:tsc --noEmit",
+    "test:dependencies": "yarn g:depcheck",
+    "test:unit": "yarn g:vitest run"
+  },
+  "prettier": "@voiceflow-meta/prettier-config",
+  "eslintConfig": {
+    "extends": "@voiceflow-meta/eslint-config"
+  },
+  "dependencies": {
+    "@vanilla-extract/css": "1.11.0",
+    "@vanilla-extract/dynamic": "2.0.3",
+    "@vanilla-extract/recipes": "0.4.0",
+    "clsx": "1.2.1"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "5.16.5",
+    "@testing-library/react": "14.0.0",
+    "@types/react": "18.0.35",
+    "@vanilla-extract/vite-plugin": "3.8.0",
+    "@voiceflow-meta/eslint-config": "1.1.0",
+    "@voiceflow-meta/prettier-config": "1.1.0",
+    "@voiceflow-meta/typescript-config": "1.0.1",
+    "jsdom": "21.1.1",
+    "react": "18.2.0",
+    "vite-tsconfig-paths": "4.2.0"
+  },
+  "peerDependencies": {
+    "react": "^18"
+  },
+  "gitHead": "cbbe7c7411c63b020c868304395a085d097268be"
+}

package/sonar-project.properties

@@ -0,0 +1,10 @@
+sonar.projectName=design-style
+sonar.sources=src/
+sonar.tests=src/
+sonar.exclusions=src/**/*.test.ts,src/**/test-utils/
+sonar.test.inclusions=src/**/*.test.ts,src/**/test-utils/
+sonar.cpd.exclusions=src/**/*.test.ts,src/**/test-utils/
+sonar.coverage.exclusions=**/**
+sonar.eslint.reportPaths=sonar/report.json
+sonar.typescript.tsconfigPath=./tsconfig.json
+#sonar.javascript.lcov.reportPaths=nyc_coverage_unit/lcov.info

package/src/ThemeContext.tsx

@@ -0,0 +1,14 @@
+import { createContext, useContext } from 'react';
+
+export const ThemeContext = createContext<string | null>(null);
+export const { Consumer: ThemeConsumer } = ThemeContext;
+
+export interface ThemeProviderProps extends React.PropsWithChildren {
+  theme: string;
+}
+
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({ theme, children }) => (
+  <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
+);
+
+export const useTheme = () => useContext(ThemeContext);

package/src/__fixtures__/Button/Button.component.tsx

@@ -0,0 +1,7 @@
+import * as S from './Button.styled';
+
+export interface ButtonProps extends React.PropsWithChildren {
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}
+
+export const Button: React.FC<ButtonProps> = ({ onClick, children }) => <S.Base onClick={onClick}>{children}</S.Base>;

package/src/__fixtures__/Button/Button.css.ts

@@ -0,0 +1,7 @@
+import { style } from '@/main';
+
+export const base = style({
+  padding: 20,
+  borderRadius: 10,
+  margin: 10,
+});

package/src/__fixtures__/Button/Button.styled.ts

@@ -0,0 +1,5 @@
+import { styled } from '@/main';
+
+import { base } from './Button.css';
+
+export const Base = styled.button([base]);

package/src/__fixtures__/Button/index.ts

@@ -0,0 +1,7 @@
+import { Button as ButtonComponent } from './Button.component';
+import * as css from './Button.css';
+import * as styled from './Button.styled';
+
+export type { ButtonProps } from './Button.component';
+
+export const Button = Object.assign(ButtonComponent, styled, { css });

package/src/__fixtures__/InlineThemedButton/InlineThemedButton.component.tsx

@@ -0,0 +1,13 @@
+import type { ButtonProps } from '../Button';
+import * as Theme from '../theme.css';
+import * as S from './InlineThemedButton.styled';
+
+export interface InlineThemedButtonProps extends ButtonProps {
+  brandColor: string;
+}
+
+export const InlineThemedButton: React.FC<InlineThemedButtonProps> = ({ brandColor, onClick, children }) => (
+  <S.Base onClick={onClick} theme={{ color: { brand: brandColor }, spacing: Theme.spacing }}>
+    {children}
+  </S.Base>
+);

package/src/__fixtures__/InlineThemedButton/InlineThemedButton.css.ts

@@ -0,0 +1,8 @@
+import { style } from '@/main';
+
+import * as Theme from '../theme.css';
+
+export const themed = style({
+  color: Theme.vars.color.brand,
+  borderRadius: 0,
+});

package/src/__fixtures__/InlineThemedButton/InlineThemedButton.styled.ts

@@ -0,0 +1,7 @@
+import { styled } from '@/main';
+
+import { Button } from '../Button';
+import * as Theme from '../theme.css';
+import { themed } from './InlineThemedButton.css';
+
+export const Base = styled.button([Button.Base, themed], { theme: Theme.vars });