next-yak 9.4.0 → 9.4.2

package/README.md

@@ -5,328 +5,97 @@
 [![npm version](https://badge.fury.io/js/next-yak.svg)](https://www.npmjs.com/package/next-yak)
 [![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/DigitecGalaxus/next-yak/blob/main/LICENSE)
 
-**next-yak** is a CSS-in-JS solution tailored for [Next.js](https://nextjs.org/) that seamlessly combines the expressive power of styled-components syntax with efficient build-time extraction of CSS using Next.js's built-in CSS configuration.
+**next-yak** is a build-time CSS-in-JS library powered by a Rust SWC plugin. Write styled-components syntax, get zero-runtime CSS extraction and full React Server Components compatibility.
 
+Works with **Next.js** (Webpack & Turbopack), **Vite** (7+, including Vite 8 with OXC), and **Storybook**. Any Vite-based framework works out of the box, including react-router, TanStack Start, and more.
+
+> **Production-proven:** next-yak is sponsored and used in production by [Digitec Galaxus](https://www.galaxus.ch), the largest e-commerce platform in Switzerland, across thousands of styled components, delivering measurable improvements in Core Web Vitals.
 
 ## Features
 
-- **NextJs Compatibility**: Works smoothly with both React Server and Client Components
-- **Build-time CSS**: Reduces load time by handling CSS during the build phase, using Next.js built-in CSS Modules features
-- **Lightweight Runtime**: Operates with minimal impact, simply changing CSS classes without modifying the CSSOM
-- **Standard CSS Syntax**: Write styles in familiar, easy-to-use CSS
-- **Integrates with Atomic CSS**: Easily combines with atomic CSS frameworks like Tailwind CSS for more design options
+- **Multi-Framework**: First-class support for Next.js (Webpack & Turbopack), Vite 7+ (react-router, TanStack Start, ...), and Storybook
+- **Build-Time CSS**: Extracts CSS at compile time with zero runtime overhead
+- **React Server Components**: Works seamlessly with both Server and Client Components
+- **Cross-File Imports**: Import constants, mixins, and selectors from `.yak` files and other modules, works across all bundlers
+- **Standard CSS Syntax**: Write familiar CSS with full nesting, keyframes, and media query support
+- **Integrates with Atomic CSS**: Combines with utility-first frameworks like Tailwind CSS
+- **TypeScript First**: Fully typed props, theme context, and cross-file selectors
+- **Lightweight Runtime**: Minimal footprint, just swaps CSS class names based on props
+- **Minimal Dependencies**: Only 8 dependencies in total (including transitive ones)
+
+## Documentation
+
+Full documentation, guides, and a live playground are available at **[yak.js.org](https://yak.js.org/)**.
 
-[Preview (Video)](https://github.com/DigitecGalaxus/next-yak/assets/4113649/f5a220fc-2a0f-46be-a8e7-c855f7faa337
-)
+- [Getting Started (Next.js)](https://yak.js.org/docs/getting-started)
+- [Vite Setup](https://yak.js.org/docs/vite)
+- [Storybook Setup](https://yak.js.org/docs/storybook)
+- [Migration from styled-components](https://yak.js.org/docs/migration-from-styled-components)
+- [Features](https://yak.js.org/docs/features)
+- [Playground](https://yak.js.org/playground)
 
 ## Compatibility
 
-| next-yak         | Next.js         | react            | swc_core         | 
-|------------------|-----------------|------------------|------------------|
-| 9.x              | >= 16.1.0       | 19.x             | 50.2.3           |
-| 8.x              | >= 16.0.0       | 19.x             | 45.0.1           |
-| 7.x              | >= 15.4.4       | 19.x             | 38.0.1           |
-| 6.x              | >= 15.4.1       | 19.x             | 27.0.6           |
-| 5.x              | >= 15.2.1       | 19.x             | 16.0.0           |
-| 4.x              | >= 15.0.4       | 19.x             | 5.0.1            |
-| 3.x              | 15.x            | 18.x / 19.x      | 3.0.2            |
-| 2.x              | 14.x            | 18.x / 19.x      | 0.279.0          |
+| next-yak | Next.js   | Vite            | react       | swc_core |
+| -------- | --------- | --------------- | ----------- | -------- |
+| 9.x      | >= 16.1.0 | >= 7.0.0 (9.1+) | 19.x        | 56.0.0   |
+| 8.x      | >= 16.0.0 | -               | 19.x        | 45.0.1   |
+| 7.x      | >= 15.4.4 | -               | 19.x        | 38.0.1   |
+| 6.x      | >= 15.4.1 | -               | 19.x        | 27.0.6   |
+| 5.x      | >= 15.2.1 | -               | 19.x        | 16.0.0   |
+| 4.x      | >= 15.0.4 | -               | 19.x        | 5.0.1    |
+| 3.x      | 15.x      | -               | 18.x / 19.x | 3.0.2    |
+| 2.x      | 14.x      | -               | 18.x / 19.x | 0.279.0  |
 
 ## Installation
 
 ```bash
-# For Next.js >= 15.2.1
 npm install next-yak
-
-# For Next.js 14.x 
-npm install next-yak@2
 ```
 
-## Getting Started
-
-See a live [stackblitz demo](https://stackblitz.com/edit/stackblitz-starters-dfykqy?file=app%2Fpage.tsx) or try our **[stackblitz starter kit](https://stackblitz.com/fork/next-yak-starter?file=app%2Fpage.tsx)**
-
-### Locally
+## Quick Start
 
-1. Install **next-yak** in your Next.js project.
-
-2. Add next-yak to your `next.config.mjs`:
+### Next.js
 
 ```js
-// next.config.js
+// next.config.ts
 import { withYak } from "next-yak/withYak";
 
-const nextConfig = {
+export default withYak({
   // your next.js config
-};
-
-export default withYak(nextConfig);
-```
-
-3. Ready to go:
-
-```jsx
-// pages/index.js
-import { styled } from 'next-yak';
-
-const StyledDiv = styled.div`
-  color: #333;
-  padding: 16px;
-  background-color: #f0f0f0;
-`;
-
-function HomePage() {
-  return <StyledDiv>Hello, next-yak!</StyledDiv>;
-}
-
-export default HomePage;
-```
-
-## More Examples
-
-### Dynamic Styles
-
-Dynamic Styles will only toggle the css class during runtime:
-
-```jsx
-import { styled, css } from 'next-yak';
-
-const ToggleButton = styled.button`
-  ${props => props.$active
-     ? css`background-color: green`
-     : css`background-color: lime`
-  };
-  color: white;
-  padding: 10px 20px;
-`;
-```
-
-[Dynamic Styles (Video)](https://github.com/DigitecGalaxus/next-yak/assets/4113649/c5f52846-33e4-4058-9c78-efd98197d75f)
-
-### Dynamic Properties
-
-Dynamic Properties use custom properties ([aka css variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)) under the hood to extract the CSS at built time but modify properties at runtime:
-
-```jsx
-import { styled } from 'next-yak';
-
-const ProgressBar = styled.div`
-  width: ${props => `${props.$percent}%`};
-  height: 20px;
-  background-color: #3498db;
-  transition: width 0.3s ease-in-out;
-`;
-
-const ProgressBarContainer = styled.div`
-  border: 1px solid #ccc;
-`;
-
-const ExampleComponent = () => {
-  const progress = 75; // You can dynamically set this value
-
-  return (
-    <ProgressBarContainer>
-      <ProgressBar $percent={progress} />
-    </ProgressBarContainer>
-  );
-};
-```
-
-[Dynamic Props (video)](https://github.com/DigitecGalaxus/next-yak/assets/4113649/2fa78f82-382c-465f-b294-2504739ea168)
-
-
-### Targeting Components
-
-In next-yak, you can target other components directly using CSS selectors as long as they are **in the same file**:
-
-```jsx
-import { styled, keyframes } from 'next-yak';
-
-const flip = keyframes`
-  from { transform: rotateY(0deg); }
-  to { transform: rotateY(360deg); }
-`;
-
-const Glow = styled.div`
-  /* Add your Glow component styles here */
-`;
-
-const Text = styled.span`
-  display: inline-block;
-  ${Glow}:hover & {
-    animation: 1.5s ${flip} ease-out;
-  }
-`;
-
-const ExampleComponent = () => {
-  return (
-    <Glow>
-      <Text>This text will flip on hover.</Text>
-    </Glow>
-  );
-};
+});
 ```
 
-## Nesting
-
-`next-yak` supports nesting out of the box.  
-[For now](https://github.com/css-modules/postcss-modules-local-by-default/pull/64) Next.js 13 supports nesting only with the `postcss-nested` plugin.  
-Therefore you have to create a `postcss.config.js` file in your project root:
+### Vite
 
 ```js
-// postcss.config.js
-module.exports = {
-  plugins: {
-    'postcss-nested': {},
-  }
-};
-```
-
-[Nesting Example (video)](https://github.com/DigitecGalaxus/next-yak/assets/4113649/33eeeb13-b0cf-499f-a1d3-ba6f51cf4308)
-
-## Motivation
-
-Most of the existing CSS-in-JS libraries are either slow or have a complex api. This project tries to find a middle ground between speed and api complexity.
-
-The goal of this project is to create a proof of concept for a CSS-in-JS library that has the following properties:
-
- - fast
-   - no runtime
-   - can be statically extracted
-   - can be optimized by postcss
-   - no processing during hydration
-   - can make use of [103 early hints](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/103)
- - api
-   - ui colocation (mixing css and jsx)
-   - familiar `styled.div` api
-   - composable `styled(Component)`
-   - allows conditional styles
-   - allow to use props in styles
-   - allow to use a context based theme in styles
-   - typescript support
-
-Optimizations are done by postcss. This allows to use the full power of postcss and its plugins. It also allows to use the same optimizations for css files and css-in-js.
-
-## Performance Gains
-
-[![CSS Extract](https://raw.githubusercontent.com/DigitecGalaxus/next-yak/main/css-extract.gif)](https://raw.githubusercontent.com/DigitecGalaxus/next-yak/main/css-extract.gif)
-
-## How it works
-
-next-yak converts css-in-js into css modules. This allows to use the full power of postcss and its plugins. It also allows to use the same optimizations for css files and css-in-js.
-
-[![Compile Flow](https://raw.githubusercontent.com/DigitecGalaxus/next-yak/main/compile-flow.webp)](https://raw.githubusercontent.com/DigitecGalaxus/next-yak/main/compile-flow.webp)
-
-
-## Atomic CSS
-
-`next-yak` ships with atomic css support  
-So you can use [tailwind](https://tailwindcss.com/) out of the box without additional configuration.
-
-```tsx
-import { styled, atoms } from "next-yak";
-
-// Mixing tailwind with custom styles
-const Icon = styled.p`
- ${atoms("font-bold")}
- @supports (initial-letter: 2) {
-   initial-letter: 2;
- }
-`;
-
-// Apply tailwind classes conditionally
-const Button = styled.button`
-  ${({ $primary }) =>
-    $primary
-      ? atoms(
-          'bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded'
-        )
-      : atoms(
-          'bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded'
-        )}
-`;
+// vite.config.ts
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
+import { viteYak } from "next-yak/vite";
+
+export default defineConfig({
+  plugins: [viteYak(), react()],
+});
 ```
 
-
-## Build Time Constants
-
-The downside of dynamic properties is that they require inline style attributes.  
-While this is not a problem for most cases, we can't use them for media queries.
-
-`next-yak` allows you to define build time constants which can be used in your styles:
+### Usage
 
 ```jsx
-import { styled } from 'next-yak';
-import { breakpoints, spacings } from './constants.yak';
+import { styled } from "next-yak";
 
-const Container = styled.div`
-  padding: ${spacings.md};
-  ${breakpoints.md} {
-    padding: ${spacings.lg};
-  }
+const Button = styled.button`
+  background: #bf4f74;
+  color: white;
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
 `;
 ```
 
-| Feature          | Code                                            | Yak Constant files                             |
-|:-----------------|:------------------------------------------------|:-----------------------------------------------|
-| File Extension   | `.js`, `.jsx`, `.tsx`, etc.                     | `.yak.js`, `.yak.jsx`, `.yak.tsx`, etc.        | 
-| Runs at          |  Runtime (Node or Browser)                      | Compile time (Bundler)                         |
-| Side effects     | ✅                                              | 🚫                                             |
-| Yak Features     | All (`styled`, `css`, ...)                      | 🚫                                             | 
-
-
-[Build time constants (video)](https://github.com/DigitecGalaxus/next-yak/assets/4113649/2c83246c-a03b-4c57-8814-32a7248983ac)
-
-## Yak shaving
-
-While trying to get next-yak to work properly we stumbled across several bugs.
-Thanks for merging our prs fixes in next.js, webpack, postcss and qwik ❤️
-
-<details>
-  <summary>PRS</summary>
-
-  - https://github.com/vercel/next.js/pull/51115
-  - https://github.com/vercel/next.js/pull/53796
-  - https://github.com/css-modules/postcss-modules-local-by-default/pull/64
-  - https://github.com/css-modules/postcss-modules-local-by-default/pull/72
-  - https://github.com/vercel/next.js/pull/62644
-  - https://github.com/vercel/next.js/pull/62639
-  - https://github.com/webpack-contrib/mini-css-extract-plugin/pull/1084
-  - https://github.com/vercel/next.js/pull/62733
-  - https://github.com/vercel/next.js/pull/64551
-  - https://github.com/QwikDev/qwik/pull/8351
-  - https://github.com/vercel/next.js/pull/89600
-  - https://github.com/vercel/next.js/pull/89901
-
-</details>
-
-<details>
-  <summary>Experiments</summary>
-  Incomplete work in progress experiments to test the features and performance of next-yak:
-
-  - https://next-yak-benchmark.vercel.app/
-  - https://yacijs.vercel.app/
-</details>
-
-## Acknowledgments
-
-Massive kudos to:
-
-  - @sokra: For guiding us through webpacks module and loader APIs
-  - @kdy1: For his support while rewriting our Babel plugin as a blazing fast SWC Rust WASM plugin
-
-Special thanks to the contributors and the inspiring projects that influenced next-yak:
-
-  - Styled-Components 💅: For pioneering the styled syntax and redefining styling in the React ecosystem.
-  - Linaria: For its innovative approach to zero-runtime CSS in JS and efficient styling solutions.
-  - Emotion: For pushing the boundaries of CSS-in-JS and providing a high-performance styling experience.
-  - Vanilla Extract: For its focus on type-safe, zero-runtime CSS and contributing to the evolution of styling techniques.
-  - Tailwind CSS: For its exceptional atomic CSS approach, enabling efficient and customizable styling solutions.
-  
 ## License
 
-**next-yak** is licensed under the [MIT License](link/to/LICENSE).
+**next-yak** is licensed under the [MIT License](https://github.com/DigitecGalaxus/next-yak/blob/main/LICENSE).
 
----
+## Contributing
 
-Feel free to reach out with any questions, issues, or suggestions!
+Contributions are welcome! The [contributing guide](https://github.com/DigitecGalaxus/next-yak/blob/main/CONTRIBUTION.md) helps you get started.

package/dist/context/baseContext.cjs

@@ -1,33 +1,10 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-// runtime/context/baseContext.tsx
-var baseContext_exports = {};
-__export(baseContext_exports, {
-  getYakThemeContext: () => getYakThemeContext
-});
-module.exports = __toCommonJS(baseContext_exports);
+//#region runtime/context/baseContext.tsx
 function getYakThemeContext() {
-  return {};
+	return {};
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  getYakThemeContext
-});
+
+//#endregion
+exports.getYakThemeContext = getYakThemeContext;
 //# sourceMappingURL=baseContext.cjs.map

package/dist/context/baseContext.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../runtime/context/baseContext.tsx"],"sourcesContent":["import type { YakTheme } from \"next-yak\";\n\nexport function getYakThemeContext() {\n  return {} as YakTheme | undefined;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEO,SAAS,qBAAqB;AACnC,SAAO,CAAC;AACV;","names":[]}
+{"version":3,"file":"baseContext.cjs","names":[],"sources":["../../runtime/context/baseContext.tsx"],"sourcesContent":["import type { YakTheme } from \"next-yak\";\n\nexport function getYakThemeContext() {\n  return {} as YakTheme | undefined;\n}\n"],"mappings":";;;AAEA,SAAgB,qBAAqB;AACnC,QAAO,EAAE"}

package/dist/context/baseContext.d.cts

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

package/dist/context/baseContext.d.ts

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

package/dist/context/baseContext.js

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

package/dist/context/baseContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../runtime/context/baseContext.tsx"],"sourcesContent":["import type { YakTheme } from \"next-yak\";\n\nexport function getYakThemeContext() {\n  return {} as YakTheme | undefined;\n}\n"],"mappings":";AAEO,SAAS,qBAAqB;AACnC,SAAO,CAAC;AACV;","names":[]}
+{"version":3,"file":"baseContext.js","names":[],"sources":["../../runtime/context/baseContext.tsx"],"sourcesContent":["import type { YakTheme } from \"next-yak\";\n\nexport function getYakThemeContext() {\n  return {} as YakTheme | undefined;\n}\n"],"mappings":";AAEA,SAAgB,qBAAqB;AACnC,QAAO,EAAE"}

package/dist/context/index.cjs

@@ -1,53 +1,45 @@
-"use strict";
 "use client";
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+//#region \0rolldown/runtime.js
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
 var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+			key = keys[i];
+			if (!__hasOwnProp.call(to, key) && key !== except) {
+				__defProp(to, key, {
+					get: ((k) => from[k]).bind(null, key),
+					enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+				});
+			}
+		}
+	}
+	return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
 
-// runtime/context/index.tsx
-var index_exports = {};
-__export(index_exports, {
-  YakThemeProvider: () => YakThemeProvider,
-  useTheme: () => useTheme
-});
-module.exports = __toCommonJS(index_exports);
-var import_react = __toESM(require("react"), 1);
-var YakContext = (0, import_react.createContext)({});
-var useTheme = () => {
-  const context = (0, import_react.use)(YakContext);
-  return context instanceof Promise ? (0, import_react.use)(context) : context;
+//#endregion
+let react = require("react");
+react = __toESM(react);
+
+//#region runtime/context/index.tsx
+const YakContext = (0, react.createContext)({});
+const useTheme = () => {
+	const context = (0, react.use)(YakContext);
+	return context instanceof Promise ? (0, react.use)(context) : context;
 };
-var YakThemeProvider = ({
-  children,
-  theme = {}
-}) => /* @__PURE__ */ import_react.default.createElement(YakContext.Provider, { value: theme }, children);
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  YakThemeProvider,
-  useTheme
-});
+const YakThemeProvider = ({ children, theme = {} }) => /* @__PURE__ */ react.default.createElement(YakContext.Provider, { value: theme }, children);
+
+//#endregion
+exports.YakThemeProvider = YakThemeProvider;
+exports.useTheme = useTheme;
 //# sourceMappingURL=index.cjs.map

package/dist/context/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../runtime/context/index.tsx"],"sourcesContent":["\"use client\";\n//\n// This file is the client component (browser & ssr) version of index.server.tsx\n//\nimport React, { ReactNode, createContext, use } from \"react\";\n\nexport interface YakTheme {}\n\n/**\n * The yak theme context\n * @see https://github.com/DigitecGalaxus/next-yak/blob/main/packages/next-yak/runtime/context/README.md\n */\nconst YakContext = createContext<YakTheme>({});\n\n/**\n * Returns the current yak theme context\n *\n * @see https://github.com/DigitecGalaxus/next-yak/blob/main/packages/next-yak/runtime/context/README.md\n */\nexport const useTheme = (): YakTheme => {\n  const context = use(YakContext);\n  return context instanceof Promise ? use(context) : context;\n};\n\n/**\n * Yak theme context provider\n *\n * @see https://github.com/DigitecGalaxus/next-yak/blob/main/packages/next-yak/runtime/context/README.md\n */\nexport const YakThemeProvider = ({\n  children,\n  theme = {},\n}: {\n  children: ReactNode;\n  theme?: YakTheme;\n}) => <YakContext.Provider value={theme}>{children}</YakContext.Provider>;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,mBAAqD;AAQrD,IAAM,iBAAa,4BAAwB,CAAC,CAAC;AAOtC,IAAM,WAAW,MAAgB;AACtC,QAAM,cAAU,kBAAI,UAAU;AAC9B,SAAO,mBAAmB,cAAU,kBAAI,OAAO,IAAI;AACrD;AAOO,IAAM,mBAAmB,CAAC;AAAA,EAC/B;AAAA,EACA,QAAQ,CAAC;AACX,MAGM,6BAAAA,QAAA,cAAC,WAAW,UAAX,EAAoB,OAAO,SAAQ,QAAS;","names":["React"]}
+{"version":3,"file":"index.cjs","names":[],"sources":["../../runtime/context/index.tsx"],"sourcesContent":["\"use client\";\n//\n// This file is the client component (browser & ssr) version of index.server.tsx\n//\nimport React, { ReactNode, createContext, use } from \"react\";\n\nexport interface YakTheme {}\n\n/**\n * The yak theme context\n * @see https://github.com/DigitecGalaxus/next-yak/blob/main/packages/next-yak/runtime/context/README.md\n */\nconst YakContext = createContext<YakTheme>({});\n\n/**\n * Returns the current yak theme context\n *\n * @see https://github.com/DigitecGalaxus/next-yak/blob/main/packages/next-yak/runtime/context/README.md\n */\nexport const useTheme = (): YakTheme => {\n  const context = use(YakContext);\n  return context instanceof Promise ? use(context) : context;\n};\n\n/**\n * Yak theme context provider\n *\n * @see https://github.com/DigitecGalaxus/next-yak/blob/main/packages/next-yak/runtime/context/README.md\n */\nexport const YakThemeProvider = ({\n  children,\n  theme = {},\n}: {\n  children: ReactNode;\n  theme?: YakTheme;\n}) => <YakContext.Provider value={theme}>{children}</YakContext.Provider>;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,MAAM,sCAAqC,EAAE,CAAC;AAO9C,MAAa,iBAA2B;CACtC,MAAM,yBAAc,WAAW;AAC/B,QAAO,mBAAmB,yBAAc,QAAQ,GAAG;;AAQrD,MAAa,oBAAoB,EAC/B,UACA,QAAQ,EAAE,OAIN,4CAAC,WAAW,UAAZ,EAAqB,OAAO,OAAuC,EAA/B,SAA+B"}

package/dist/context/index.d.cts

@@ -1,7 +1,7 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode } from "react";
 
-interface YakTheme {
-}
+//#region runtime/context/index.d.ts
+interface YakTheme {}
 /**
  * Returns the current yak theme context
  *
@@ -13,9 +13,13 @@ declare const useTheme: () => YakTheme;
  *
  * @see https://github.com/DigitecGalaxus/next-yak/blob/main/packages/next-yak/runtime/context/README.md
  */
-declare const YakThemeProvider: ({ children, theme, }: {
-    children: ReactNode;
-    theme?: YakTheme;
+declare const YakThemeProvider: ({
+  children,
+  theme
+}: {
+  children: ReactNode;
+  theme?: YakTheme;
 }) => React.JSX.Element;
-
-export { type YakTheme, YakThemeProvider, useTheme };
+//#endregion
+export { YakTheme, YakThemeProvider, useTheme };
+//# sourceMappingURL=index.d.cts.map

package/dist/context/index.d.ts

@@ -1,7 +1,7 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode } from "react";
 
-interface YakTheme {
-}
+//#region runtime/context/index.d.ts
+interface YakTheme {}
 /**
  * Returns the current yak theme context
  *
@@ -13,9 +13,13 @@ declare const useTheme: () => YakTheme;
  *
  * @see https://github.com/DigitecGalaxus/next-yak/blob/main/packages/next-yak/runtime/context/README.md
  */
-declare const YakThemeProvider: ({ children, theme, }: {
-    children: ReactNode;
-    theme?: YakTheme;
+declare const YakThemeProvider: ({
+  children,
+  theme
+}: {
+  children: ReactNode;
+  theme?: YakTheme;
 }) => React.JSX.Element;
-
-export { type YakTheme, YakThemeProvider, useTheme };
+//#endregion
+export { YakTheme, YakThemeProvider, useTheme };
+//# sourceMappingURL=index.d.ts.map