@yak/solid 0.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Digitec Galaxus AG
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,126 @@
+# @yak/solid
+
+SolidJS runtime for [yak](https://yak.js.org/): styled-components syntax, compiled to plain CSS at build time, with dynamic values driven by Solid's fine-grained reactivity.
+
+> **Status: experimental.** `@yak/solid` targets Solid 2 (currently at RC) and tracks it closely. Expect breaking changes while Solid 2 stabilizes. Solid 1 is not supported. This includes SolidStart v2, which runs on Solid 1.
+
+## How it works
+
+Like `next-yak`, the yak SWC compiler extracts your CSS at build time. At runtime only a tiny layer remains that merges class names and feeds dynamic values through CSS custom properties:
+
+- Static styles become plain CSS classes. A static `styled.div` never subscribes to the theme and adds a single reactive `class` binding.
+- Dynamic interpolations (`${(props) => ...}`) become CSS variables set on the element's inline `style`. Updates flow through one memo per component: the element is never re-created, only its `class`/`style` bindings change, and only props actually used by the CSS re-run the memo.
+
+## Usage
+
+```bash
+pnpm add @yak/solid
+pnpm add -D vite-plugin-solid@next
+```
+
+```ts
+// vite.config.ts
+import { defineConfig } from "vite";
+import solid from "vite-plugin-solid";
+import { yak } from "@yak/solid/vite";
+
+export default defineConfig({
+  plugins: [yak(), solid()],
+});
+```
+
+```tsx
+import { styled, css, keyframes } from "@yak/solid";
+
+const Button = styled.button<{ $primary?: boolean }>`
+  color: #009688;
+  ${(props) =>
+    props.$primary &&
+    css`
+      border-width: 2px;
+    `}
+`;
+
+const Hand = styled.div<{ $angle: number }>`
+  transform: rotate(${(props) => props.$angle}deg);
+`;
+```
+
+Interpolation functions re-run inside the component's style memo, so destructuring their parameter (`${({ $angle }) => ...}`) is also safe. These docs use the `props` style because it matches Solid's conventions.
+
+The `css` prop works on all intrinsic elements (uses Solid's `class` attribute):
+
+```tsx
+<p
+  css={css`
+    color: green;
+  `}
+/>
+```
+
+### Theming
+
+Create a `yak.context.ts` next to your `vite.config.ts` (picked up automatically) and augment the `YakTheme` interface:
+
+```ts
+export function getYakThemeContext() {
+  return { highContrast: false };
+}
+
+declare module "@yak/solid" {
+  export interface YakTheme extends ReturnType<typeof getYakThemeContext> {}
+}
+```
+
+`useTheme()` returns an accessor, like a signal getter. Call it where the value is used. That read subscribes the surrounding scope to theme changes:
+
+```tsx
+import { styled, useTheme, YakThemeProvider } from "@yak/solid";
+
+const Button = styled.button`
+  color: ${(props) => (props.theme().highContrast ? "#000" : "#555")};
+`;
+
+function Toolbar() {
+  const theme = useTheme();
+  return <span>{theme().highContrast ? "High contrast" : "Default"}</span>;
+}
+
+// app root: the theme prop is reactive, signal reads inside it stay live
+<YakThemeProvider theme={{ highContrast: highContrast() }}>
+  <App />
+</YakThemeProvider>;
+```
+
+The package also exports the context itself for native composition, e.g. overriding the theme for a subtree. In Solid 2 a context is its own provider and takes an accessor:
+
+```tsx
+import { createMemo } from "solid-js";
+import { YakThemeContext, useTheme } from "@yak/solid";
+
+function InvertedSection(props) {
+  const parent = useTheme();
+  const inverted = createMemo(() => ({ ...parent(), highContrast: true }));
+  return <YakThemeContext value={inverted}>{props.children}</YakThemeContext>;
+}
+```
+
+## Differences to next-yak (React)
+
+- `useTheme()` returns an accessor: read `theme().highContrast`, not `theme.highContrast`. The same applies to `props.theme()` in interpolations and `.attrs()`.
+- `class` instead of `className` (Solid convention), also inside `.attrs({ ... })`.
+- No jsx-runtime export: Solid compiles JSX natively. The css prop types activate by importing `@yak/solid`.
+- Components run once. Solid's reactivity drives dynamic styles instead of re-renders.
+- `foldStatic` is off by default (see [Static folding](#static-folding-opt-in) below).
+
+## Static folding (opt-in)
+
+`yak({ foldStatic: true })` additionally folds usages of fully static components into plain elements at build time, removing their wrapper components. It is off by default as we didn't test all the edge-cases and can't guarantee it works correctly everywhere.
+
+## Requirements
+
+- `solid-js` >= 2.0.0-rc.0 and `@solidjs/web` >= 2.0.0-rc.0
+- `vite-plugin-solid` >= 3.0.0-next (the Solid 2 line, npm tag `next`)
+- `yak-swc` with yak-package auto-detection (bundled as a dependency, version released together with this package or newer)
+
+See the [`examples/vite-solid`](https://github.com/DigitecGalaxus/next-yak/tree/main/examples/vite-solid) app for a full setup.

package/dist/context/baseContext.d.ts

@@ -0,0 +1,7 @@
+import { YakTheme } from "@yak/solid";
+
+//#region runtime/context/baseContext.d.ts
+declare function getYakThemeContext(): YakTheme | undefined;
+//#endregion
+export { getYakThemeContext };
+//# sourceMappingURL=baseContext.d.ts.map

package/dist/context/baseContext.js

@@ -0,0 +1,8 @@
+//#region runtime/context/baseContext.ts
+function getYakThemeContext() {
+	return {};
+}
+
+//#endregion
+export { getYakThemeContext };
+//# sourceMappingURL=baseContext.js.map

package/dist/context/baseContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"baseContext.js","names":[],"sources":["../../runtime/context/baseContext.ts"],"sourcesContent":["import type { YakTheme } from \"@yak/solid\";\n\nexport function getYakThemeContext() {\n  return {} as YakTheme | undefined;\n}\n"],"mappings":";AAEA,SAAgB,qBAAqB;CACnC,OAAO,CAAC;AACV"}

package/dist/context/index.d.ts

@@ -0,0 +1,29 @@
+import { Accessor } from "solid-js";
+import { JSX } from "@solidjs/web";
+
+//#region runtime/context/index.d.ts
+interface YakTheme {}
+/**
+ * The yak theme context
+ *
+ * @see https://github.com/DigitecGalaxus/next-yak/blob/main/packages/next-yak/runtime/context/README.md
+ */
+declare const YakThemeContext: import("solid-js").Context<Accessor<YakTheme>>;
+/**
+ * Returns an accessor to the current yak theme
+ */
+declare const useTheme: () => Accessor<YakTheme>;
+/**
+ * Yak theme context provider
+ *
+ * ```tsx
+ * <YakThemeProvider theme={{ highContrast: highContrast() }}>
+ * ```
+ */
+declare const YakThemeProvider: (props: {
+  children?: JSX.Element;
+  theme?: YakTheme;
+}) => JSX.Element;
+//#endregion
+export { YakTheme, YakThemeContext, YakThemeProvider, useTheme };
+//# sourceMappingURL=index.d.ts.map

package/dist/context/index.js

@@ -0,0 +1,17 @@
+import { createComponent, createContext, createMemo, useContext } from "solid-js";
+
+//#region runtime/context/index.ts
+const YakThemeContext = /* @__PURE__ */ createContext(() => ({}));
+const useTheme = () => useContext(YakThemeContext);
+const YakThemeProvider = (props) => {
+	return createComponent(YakThemeContext, {
+		value: createMemo(() => props.theme ?? {}),
+		get children() {
+			return props.children;
+		}
+	});
+};
+
+//#endregion
+export { YakThemeContext, YakThemeProvider, useTheme };
+//# sourceMappingURL=index.js.map

package/dist/context/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../runtime/context/index.ts"],"sourcesContent":["import { createComponent, createContext, createMemo, useContext } from \"solid-js\";\nimport type { Accessor } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\n\nexport interface YakTheme {}\n\n/**\n * The yak theme context\n *\n * @see https://github.com/DigitecGalaxus/next-yak/blob/main/packages/next-yak/runtime/context/README.md\n */\nexport const YakThemeContext = /* @__PURE__ */ createContext<Accessor<YakTheme>>(() => ({}));\n\n/**\n * Returns an accessor to the current yak theme\n */\nexport const useTheme = (): Accessor<YakTheme> => useContext(YakThemeContext);\n\n/**\n * Yak theme context provider\n *\n * ```tsx\n * <YakThemeProvider theme={{ highContrast: highContrast() }}>\n * ```\n */\nexport const YakThemeProvider = (props: {\n  children?: JSX.Element;\n  theme?: YakTheme;\n}): JSX.Element => {\n  const theme = createMemo<YakTheme>(() => props.theme ?? {});\n  return createComponent(YakThemeContext, {\n    value: theme,\n    get children() {\n      return props.children;\n    },\n  });\n};\n"],"mappings":";;;AAWA,MAAa,kBAAkC,qCAAyC,CAAC,EAAE;AAK3F,MAAa,iBAAqC,WAAW,eAAe;AAS5E,MAAa,oBAAoB,UAGd;CAEjB,OAAO,gBAAgB,iBAAiB;EACtC,OAFY,iBAA2B,MAAM,SAAS,CAAC,CAE5C;EACX,IAAI,WAAW;GACb,OAAO,MAAM;EACf;CACF,CAAC;AACH"}

package/dist/index.d.ts

@@ -0,0 +1,352 @@
+import { Accessor } from "solid-js";
+import { JSX } from "@solidjs/web";
+
+//#region runtime/context/index.d.ts
+interface YakTheme {}
+/**
+ * The yak theme context
+ *
+ * @see https://github.com/DigitecGalaxus/next-yak/blob/main/packages/next-yak/runtime/context/README.md
+ */
+declare const YakThemeContext: import("solid-js").Context<Accessor<YakTheme>>;
+/**
+ * Returns an accessor to the current yak theme
+ */
+declare const useTheme: () => Accessor<YakTheme>;
+/**
+ * Yak theme context provider
+ *
+ * ```tsx
+ * <YakThemeProvider theme={{ highContrast: highContrast() }}>
+ * ```
+ */
+declare const YakThemeProvider: (props: {
+  children?: JSX.Element;
+  theme?: YakTheme;
+}) => JSX.Element;
+//#endregion
+//#region runtime/publicStyledApi.d.ts
+/**
+ * Component signature accepted and produced by `styled`.
+ *
+ * Intentionally NOT Solid 2's `Component` type: that alias constrains props
+ * to `Record<string, any>` which does not compose with the `object`-based
+ * generics of the styled API (kept in sync with the React runtime).
+ */
+type AnyComponent<T> = (props: T) => JSX.Element;
+/**
+ * Style object the runtime writes CSS custom properties into.
+ * Solid also allows string styles on elements; the runtime normalizes
+ * those to objects before processing (see `unwrapStyle` in styled.ts).
+ */
+type StyleObject = JSX.CSSProperties & Record<`--${string}`, string | number | undefined>;
+/**
+ * Main styled interface that combines HTML tag mappings with the styled function.
+ * This is the primary entry point for creating styled components.
+ */
+interface Styled extends MappedHtmlTags, StyledFn {}
+/**
+ * Function interface for creating styled components from any component or HTML tag.
+ * Supports Solid components, HTML tags, and custom web components.
+ */
+interface StyledFn {
+  <TProps extends object = JSX.ElementAttributes<Element>>(Component: HtmlTags | AnyComponent<TProps> | CustomWebComponentTag): LiteralWithAttrs<TProps>;
+}
+/**
+ * A yak component with a special symbol that allows component targeting
+ * and proper attrs function handling.
+ * @example styled.svg`${Button}:hover & { fill: red; }` or styled(Button)`color: red;`
+ */
+interface YakComponent<T> extends AnyComponent<T> {
+  [yakComponentSymbol]: [unknown, unknown, unknown, unknown];
+}
+/**
+ * Styled component with attrs method for adding default props.
+ * Extends StyledLiteral with the ability to specify default attributes.
+ */
+interface LiteralWithAttrs<T extends object> extends StyledLiteral<T> {
+  attrs: <TAttrsIn extends object = {}, TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>>(attrs: Attrs<T, TAttrsIn, TAttrsOut>) => StyledLiteral<Substitute<T, TAttrsIn>>;
+}
+/**
+ * Template literal function for defining CSS styles with interpolation support.
+ * Accepts CSS template strings and interpolated values with proper typing.
+ */
+interface StyledLiteral<T> {
+  <TCSSProps>(styles: TemplateStringsArray, ...values: Array<CSSInterpolation<T & NoInfer<TCSSProps> & {
+    theme: Accessor<YakTheme>;
+  }>>): YakComponent<TCSSProps & T>;
+}
+/**
+ * Function variant of attrs that receives current props and returns additional props.
+ * Allows for dynamic prop generation based on component state.
+ */
+interface AttrsFunction<TBaseProps, TIn extends object = {}, TOut extends AttrsMerged<TBaseProps, TIn> = AttrsMerged<TBaseProps, TIn>> {
+  (p: Substitute<TBaseProps & {
+    theme: Accessor<YakTheme>;
+  }, TIn>): Partial<TOut>;
+}
+/**
+ * Merges provided props with initial props, making specified props optional.
+ * Includes theme support for styled components.
+ */
+type AttrsMerged<TBaseProps, TIn extends object = {}> = Substitute<TBaseProps & {
+  theme?: Accessor<YakTheme>;
+}, TIn>;
+/**
+ * Maps all HTML tag names to their corresponding styled component types with attributes support.
+ * Provides typed access to all standard HTML elements through the styled interface.
+ */
+type MappedHtmlTags = { [Tag in HtmlTags]: LiteralWithAttrs<JSX.IntrinsicElements[Tag]> };
+/**
+ * The attrs function allows adding additional props to a styled component.
+ * Props can be specified as an object or as a function that receives current props.
+ */
+type Attrs<TBaseProps, TIn extends object = {}, TOut extends AttrsMerged<TBaseProps, TIn> = AttrsMerged<TBaseProps, TIn>> = Partial<TOut> | AttrsFunction<TBaseProps, TIn, TOut>;
+/**
+ * Utility type to merge two object types, with properties from B taking precedence.
+ * If a property exists in both A and B, the property from B is used.
+ */
+type Substitute<A extends object, B extends object> = FastOmit<A, keyof B> & B;
+/**
+ * Union type of all valid HTML element tag names.
+ * Derived from Solid's JSX intrinsic elements.
+ */
+type HtmlTags = keyof JSX.IntrinsicElements;
+/**
+ * Custom web component tag pattern that must contain at least one hyphen.
+ * Follows the web component naming convention.
+ */
+type CustomWebComponentTag = `${string}-${string}`;
+/**
+ * Utility type to efficiently remove properties from an object type.
+ * More performant than the built-in Omit type for large object types.
+ */
+type FastOmit<T extends object, U extends string | number | symbol> = { [K in keyof T as K extends U ? never : K]: T[K] };
+/**
+ * Set-like collector for class names.
+ *
+ * Implemented as a string builder in the runtime (a Set<string>
+ * split → Set → Array.from → join round-trip dominates render cost);
+ * a real Set<string> also satisfies this interface.
+ */
+type ClassCollector = {
+  add(name: string): void;
+  has(name: string): boolean;
+  delete(name: string): void;
+};
+/**
+ * Type of all functions that can be passed to manipulate styles
+ *
+ * `$dynamic` marks processors that execute user functions or write style
+ * values at render time; purely static processors (class names only) can
+ * skip theme lookup and style-object allocation.
+ */
+type RuntimeStyleProcessor<T> = ((props: T, classes: ClassCollector, style: StyleObject) => void) & {
+  $dynamic?: boolean;
+};
+/**
+ * Utility type to keep the generic API of a component while still being able to use it in a selector
+ */
+type GenericYakComponentOf<T, P = {}> = T & YakComponent<P> & {
+  <G = {}>(props: P & G): JSX.Element;
+};
+//#endregion
+//#region runtime/cssLiteral.d.ts
+declare const yakComponentSymbol: unique symbol;
+type ComponentStyles<TProps> = (props: TProps) => {
+  class: string;
+  style?: {
+    [key: string]: string;
+  };
+};
+type CSSInterpolation<TProps> = string | number | undefined | null | false | ComponentStyles<TProps> | {
+  [yakComponentSymbol]: any;
+} | ((props: TProps) => CSSInterpolation<TProps>);
+/**
+ * css() runtime factory of css``
+ *
+ * /!\ @yak/solid transpiles css`` and styled``
+ *
+ * This changes the typings of the css`` and styled`` functions.
+ * During development the user of @yak/solid wants to work with the
+ * typings BEFORE compilation.
+ *
+ * Therefore this is only an internal function only and it must be cast to any
+ * before exported to the user.
+ *
+ * The internal functioning of css`` is to return a single callback function that runs all functions
+ * (or creates new ones if needed) that are passed as arguments. These functions receive the props, classes, and style object as arguments
+ * and operate directly on the classes and style objects.
+ */
+declare function css$1<TProps>(styles: TemplateStringsArray, ...values: CSSInterpolation<NoInfer<TProps> & {
+  theme: Accessor<YakTheme>;
+}>[]): ComponentStyles<TProps>;
+//#endregion
+//#region runtime/cssProp.d.ts
+declare module "@solidjs/web" {
+  namespace JSX {
+    interface ElementAttributes<T> {
+      css?: ComponentStyles<{}>;
+    }
+  }
+}
+//#endregion
+//#region runtime/atoms.d.ts
+/**
+ * Allows to use atomic CSS classes in a styled or css block
+ *
+ * @usage
+ *
+ * ```tsx
+ * import { styled, atoms } from "@yak/solid";
+ *
+ * const Button = styled.button<{ $primary?: boolean }>`
+ *  ${atoms("text-teal-600", "text-base", "rounded-md")}
+ *  ${props => props.$primary && atoms("shadow-md")}
+ * `;
+ * ```
+ */
+declare const atoms: <T>(...atoms: (string | RuntimeStyleProcessor<T> | false)[]) => ComponentStyles<T>;
+//#endregion
+//#region runtime/mocks/cssLiteral.d.ts
+/**
+ * Allows to use CSS styles in a styled or css block
+ *
+ * e.g.
+ *
+ * ```tsx
+ * const Component = styled.div`
+ *  color: black;
+ *  ${({$active}) => $active && css`color: red;`}
+ * `;
+ * ```
+ */
+declare const css: typeof css$1;
+//#endregion
+//#region runtime/keyframes.d.ts
+/**
+ * Allows to use CSS keyframe animations in a styled or css block
+ *
+ * @usage
+ *
+ * ```tsx
+ * import { styled, keyframes } from "@yak/solid";
+ *
+ * const rotate = keyframes`
+ *  from {
+ *   transform: rotate(0deg);
+ *  }
+ *  to {
+ *   transform: rotate(360deg);
+ *  }
+ * `;
+ *
+ * const Spinner = styled.div`
+ *   animation: ${rotate} 1s linear infinite;
+ * `;
+ * ```
+ */
+declare const keyframes$1: <T extends (string | number | bigint)[] = never>(styles: TemplateStringsArray, ..._dynamic: T) => string;
+//#endregion
+//#region runtime/mocks/keyframes.d.ts
+/**
+ * Allows to use CSS keyframe animations in a styled or css block
+ *
+ * @usage
+ *
+ * ```tsx
+ * import { styled, keyframes } from "@yak/solid";
+ *
+ * const rotate = keyframes`
+ *  from {
+ *   transform: rotate(0deg);
+ *  }
+ *  to {
+ *   transform: rotate(360deg);
+ *  }
+ * `;
+ *
+ * const Spinner = styled.div`
+ *   animation: ${rotate} 1s linear infinite;
+ * `;
+ * ```
+ */
+declare const keyframes: typeof keyframes$1;
+//#endregion
+//#region runtime/styled.d.ts
+/**
+ * The `styled` method works perfectly on all of your own or any third-party component,
+ * as long as they attach the passed `class` prop to a DOM element.
+ *
+ * @usage
+ *
+ * ```tsx
+ * const StyledLink = styled(Link)`
+ *  color: #BF4F74;
+ *  font-weight: bold;
+ * `;
+ * ```
+ */
+declare const styled$1: Styled;
+//#endregion
+//#region runtime/mocks/styled.d.ts
+declare const styled: typeof styled$1;
+//#endregion
+//#region runtime/globalStyle.d.ts
+/**
+ * Values that may be interpolated into a `globalStyle` template.
+ *
+ * Only build-time values are allowed: constants, `keyframes` animation names,
+ * static `css` mixins and styled-component selectors. Runtime functions
+ * (`${(props) => ...}`) are intentionally excluded: a global rule has no element
+ * to attach a CSS variable to. Declare a CSS custom property instead and toggle
+ * it via an attribute/class on the root element.
+ */
+type GlobalStyleInterpolation = string | number | ComponentStyles<{}> | YakComponent<any>;
+/**
+ * Declares global, unscoped styles that ride the same zero-runtime extraction
+ * pipeline as `styled` and `keyframes`.
+ *
+ * Global styles are **part of the stylesheet, not part of the render tree**.
+ * They apply exactly when the module declaring them is included in the bundle,
+ * typically by importing it from a layout or entry point. They cannot be
+ * conditionally mounted; express conditions in CSS (`@media`, `@supports`,
+ * `:root[data-theme]`, `:has()`) or through CSS custom properties.
+ *
+ * @usage
+ *
+ * ```tsx
+ * import { globalStyle, keyframes } from "@yak/solid";
+ *
+ * const fadeIn = keyframes`
+ *   from { opacity: 0; }
+ * `;
+ *
+ * globalStyle`
+ *   :root {
+ *     --spacing: 4px;
+ *   }
+ *
+ *   body {
+ *     margin: 0;
+ *   }
+ *
+ *   ::view-transition-new(root) {
+ *     animation: ${fadeIn} 200ms ease;
+ *   }
+ * `;
+ * ```
+ */
+declare const globalStyle$1: (_styles: TemplateStringsArray, ..._values: Array<GlobalStyleInterpolation>) => void;
+//#endregion
+//#region runtime/mocks/globalStyle.d.ts
+/**
+ * Test-friendly mock of `globalStyle`.
+ *
+ * `globalStyle` has no runtime behaviour: the SWC plugin extracts its CSS at
+ * build time and replaces the call with a no-op. The mock mirrors that: it does
+ * nothing so yak files can be imported in Jest/Vitest without the compiler.
+ */
+declare const globalStyle: typeof globalStyle$1;
+//#endregion
+export { type GenericYakComponentOf, type GlobalStyleInterpolation, type YakComponent, type YakTheme, YakThemeContext, YakThemeProvider, atoms, css, globalStyle, keyframes, styled, useTheme };

package/dist/index.js

@@ -0,0 +1,2 @@
+import{YakThemeContext as e,YakThemeProvider as t,useTheme as n,useTheme as r}from"@yak/solid/context";import{createMemo as i,merge as a}from"solid-js";import{Dynamic as o,createComponent as s}from"@solidjs/web";const c=Symbol(`yak`);var l=class{value;constructor(e){this.value=e||``}add(e){this.value?this.has(e)||(this.value+=` `+e):this.value=e}has(e){return(` `+this.value+` `).includes(` `+e+` `)}delete(e){this.has(e)&&(this.value=this.value.split(` `).filter(t=>t!==e).join(` `))}};function u(...e){let t,n=[];for(let r of e)typeof r==`string`?t=r:typeof r==`function`?n.push(r):typeof r==`object`&&`style`in r&&n.push((e,t,n)=>{for(let t in r.style){let i=r.style[t];typeof i==`function`?n[t]=String(f(e,i)):n[t]=String(i)}});return n.length===0?Object.assign((e,n)=>{t&&n.add(t)},{$dynamic:!1}):Object.assign((e,r,i)=>{t&&r.add(t);for(let t=0;t<n.length;t++)d(e,n[t],r,i)},{$dynamic:!0})}const d=(e,t,n,r)=>{let i=t(e,n,r);for(;i;){if(typeof i==`function`){i=i(e,n,r);continue}else if(typeof i==`object`){let e=`class`in i?i.class:void 0;if(e&&n.add(e),`style`in i&&i.style)for(let e in i.style)r[e]=i.style[e]}break}},f=(e,t)=>{let n=t(e);if(typeof n==`function`)return f(e,n);if(typeof n!=`string`&&typeof n!=`number`&&!(n instanceof String)&&process.env.NODE_ENV===`development`)throw Error(`Dynamic CSS functions must return a string or number but returned ${JSON.stringify(n)}\n\nDynamic CSS function: ${t.toString()}\n`);return n},p=(...e)=>{let t=[],n=[];for(let r of e)typeof r==`string`?t.push(...r.split(` `)):typeof r==`function`&&n.push(r);return u(...t.length>0?[(e,n)=>{t.forEach(e=>n.add(e))},...n]:n)},m=(e,...t)=>{if(Array.isArray(e)&&`raw`in e){let n=e[0];for(let r=0;r<t.length;r++){let i=t[r];n+=i&&typeof i==`object`&&`__yak`in i?i.__yak:String(i),n+=e[r+1]}return{__yak:n}}let n=[];for(let e of t)typeof e==`function`&&n.push(e);return n.length===0?{class:``,style:void 0}:(e=>{for(let t=0;t<n.length;t++)h(e,n[t]);return{class:``,style:void 0}})};function h(e,t){let n=new Set,r={},i=t(e,n,r);for(;typeof i==`function`;)i=i(e,n,r);return i}const g=(e,...t)=>``,_=e=>e?typeof e==`string`?e:Array.isArray(e)?e.map(_).filter(Boolean).join(` `):typeof e==`object`?Object.keys(e).filter(t=>e[t]).join(` `):String(e):``,v=e=>s(o,e),y=e=>Object.assign(b(e),{attrs:t=>b(e,t)}),b=(e,t)=>{let n=typeof e==`function`&&e[c]!==void 0,[,o,d,f]=n?e[c]:[],p=n?f:e,m=E(t,o);return(e,...t)=>{let n=D(u(e,...t),d),o=typeof p==`string`,f=o?{component:p}:{},h=o?v:e=>s(p,e),g=!m&&!n.$dynamic?e=>h(C(a(e,f,{get class(){let t=new l(_(e.class));return n(e,t,void 0),t.value||void 0}}))):e=>{let t=r(),o=a({theme:t},e),s=m?i(()=>m(o)):void 0,c=s?a(o,s):o,u=i(()=>{let t=s?.(),r=new l(_(e.class)),i=_(t?.class);i&&r.add(i);let a=n.$dynamic||t?.style?{...x(e.style),...x(t?.style)}:x(e.style);return n(c,r,a),{class:r.value||void 0,style:a&&Object.keys(a).length>0?a:void 0}});return h(C(a(a(e,s??{},{get class(){return u().class},get style(){return u().style}}),f),()=>{let e=s?.();return!!e&&`theme`in e&&e.theme!==t}))};return Object.assign(g,{[c]:[g,m,n,p]})}},x=e=>{if(typeof e!=`string`)return e;let t={};for(let n of e.split(`;`)){let e=n.indexOf(`:`);if(e===-1)continue;let r=n.slice(0,e).trim(),i=n.slice(e+1).trim();r&&i&&(t[r]=i)}return t},S=(e,t)=>typeof e==`string`&&(e.startsWith(`$`)||e===`theme`&&!(t&&t())),C=(e,t)=>new Proxy(e,{get:(e,n)=>S(n,t)?void 0:Reflect.get(e,n),has:(e,n)=>!S(n,t)&&Reflect.has(e,n),ownKeys:e=>Reflect.ownKeys(e).filter(e=>!S(e,t)),getOwnPropertyDescriptor:(e,n)=>S(n,t)?void 0:Reflect.getOwnPropertyDescriptor(e,n)}),w=(e,t)=>{if(!(!e&&!t))return e?t?e+` `+t:e:t},T=(e,t)=>t?(e.class===t.class||!t.class)&&(e.style===t.style||!t.style)?{...e,...t}:{...e,...t,class:w(e.class,t.class),style:{...x(e.style),...x(t.style)}}:e,E=(e,t)=>{let n=e&&(typeof e==`function`?e:()=>e);return n&&t?e=>{let r=t(e);return T(r,n(T(e,r)))}:n||t},D=(e,t)=>e&&t?Object.assign((n,r,i)=>{t(n,r,i),e(n,r,i)},{$dynamic:e.$dynamic||t.$dynamic}):e||t,O=new Proxy(y,{get(e,t){return e(t)}}),k=(e,...t)=>{};export{e as YakThemeContext,t as YakThemeProvider,p as atoms,m as css,k as globalStyle,g as keyframes,O as styled,n as useTheme};
+//# sourceMappingURL=index.js.map