npm - next-yak - Versions diffs - 2.0.0 → 2.2.0 - Mend

next-yak 2.0.0 → 2.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/dist/index.cjs +1 -1
package/dist/index.cjs.map +1 -1
package/dist/index.d.cts +5 -1
package/dist/index.d.ts +5 -1
package/dist/index.js +1 -1
package/dist/index.js.map +1 -1
package/dist/internal.cjs +1 -1
package/dist/internal.cjs.map +1 -1
package/dist/internal.js +1 -1
package/dist/internal.js.map +1 -1
package/package.json +2 -2
package/runtime/__tests__/typeTest.tsx +30 -0
package/runtime/styled.tsx +6 -1

package/dist/index.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var w=Object.create;var m=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty;var J=(t,e)=>{for(var s in e)m(t,s,{get:e[s],enumerable:!0})},C=(t,e,s,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of M(e))!E.call(t,n)&&n!==s&&m(t,n,{get:()=>e[n],enumerable:!(r=v(e,n))||r.enumerable});return t};var X=(t,e,s)=>(s=t!=null?w(B(t)):{},C(e||!t||!t.__esModule?m(s,"default",{value:t,enumerable:!0}):s,t)),_=t=>C(m({},"__esModule",{value:!0}),t);var V={};J(V,{YakThemeProvider:()=>c.YakThemeProvider,atoms:()=>Y,css:()=>k,keyframes:()=>O,styled:()=>b,useTheme:()=>c.useTheme});module.exports=_(V);var c=require("next-yak/context");function k(t,...e){let s=[];for(let r of e)typeof r=="function"&&s.push(r);return s.length===0?{className:"",style:void 0}:r=>{for(let n=0;n<s.length;n++)D(r,s[n]);return{className:"",style:void 0}}}function D(t,e){let s=e(t);for(;typeof s=="function";)s=s(t);return s}var y=Symbol("yak");function I(...t){let e=[],s=[],r={};for(let n of t)if(typeof n=="string")e.push(n);else if(typeof n=="function")s.push(n);else if(typeof n=="object"&&"style"in n)for(let o in n.style){let a=n.style[o];typeof a=="function"?s.push(T=>({style:{[o]:String(x(T,a))}})):r[o]=a}if(s.length===0){let n=e.join(" ");return()=>({className:n,style:r})}return n=>{let o=[...e],a={...r};for(let T=0;T<s.length;T++)H(n,s[T],o,a);return{className:o.join(" "),style:a}}}var H=(t,e,s,r)=>{let n=e(t);for(;n;){if(typeof n=="function"){n=n(t);continue}else if(typeof n=="object"&&("className"in n&&n.className&&s.push(n.className),"style"in n&&n.style))for(let o in n.style)r[o]=n.style[o];break}},x=(t,e)=>{let s=e(t);if(typeof s=="function")return x(t,s);if(process.env.NODE_ENV==="development"&&typeof s!="string"&&typeof s!="number"&&!(s instanceof String))throw new Error(`Dynamic CSS functions must return a string or number but returned ${JSON.stringify(s)}`);return s};var g=X(require("react"),1),N=require("next-yak/context"),K={},$=(t,e)=>Object.assign(g.default.forwardRef(t),{[y]:[t,e]}),L=t=>Object.assign(h(t),{attrs:e=>h(t,e)}),h=(t,e)=>{let s=typeof t!="string"&&y in t,[r,n]=s?t[y]:[],o=W(e,n);return(a,...T)=>{let d=I(a,...T);return $((p,A)=>{let l=o||d.length?(0,N.useTheme)():K,u="$__attrs"in p?{theme:l,...p}:f({theme:l,...p,$__attrs:!0},o?.({theme:l,...p})),S=d(u),{theme:R,...j}=u,P=R===l?j:u,i=s?P:U(P);return i.className=F(i.className,S.className),i.style="style"in i?{...i.style,...S.style}:S.style,r?r(i,A):(i.ref=A,g.default.createElement(t,{...i}))},o)}},b=new Proxy(L,{get(t,e){return t(e)}}),U=t=>{let e={};for(let s in t)!s.startsWith("$")&&t[s]!==void 0&&(e[s]=t[s]);return e},F=(t,e)=>{if(!(!t&&!e))return t?e?t+" "+e:t:e},f=(t,e)=>e?(t.className===e.className||!e.className)&&(t.style===e.style||!e.style)?{...t,...e}:{...t,...e,className:F(t.className,e.className),style:{...t.style||{},...e.style||{}}}:t,W=(t,e)=>{let s=t&&(typeof t=="function"?t:()=>t);return s&&e?r=>{let n=e(r);return f(n,s(f(r,n)))}:s||e};var O=(t,...e)=>"";var Y=(...t)=>{let e=t.join(" ");return()=>({className:e})};0&&(module.exports={YakThemeProvider,atoms,css,keyframes,styled,useTheme});
+"use strict";var w=Object.create;var m=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty;var J=(t,e)=>{for(var s in e)m(t,s,{get:e[s],enumerable:!0})},C=(t,e,s,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of M(e))!E.call(t,n)&&n!==s&&m(t,n,{get:()=>e[n],enumerable:!(r=v(e,n))||r.enumerable});return t};var X=(t,e,s)=>(s=t!=null?w(B(t)):{},C(e||!t||!t.__esModule?m(s,"default",{value:t,enumerable:!0}):s,t)),_=t=>C(m({},"__esModule",{value:!0}),t);var V={};J(V,{YakThemeProvider:()=>y.YakThemeProvider,atoms:()=>R,css:()=>k,keyframes:()=>O,styled:()=>b,useTheme:()=>y.useTheme});module.exports=_(V);var y=require("next-yak/context");function k(t,...e){let s=[];for(let r of e)typeof r=="function"&&s.push(r);return s.length===0?{className:"",style:void 0}:r=>{for(let n=0;n<s.length;n++)D(r,s[n]);return{className:"",style:void 0}}}function D(t,e){let s=e(t);for(;typeof s=="function";)s=s(t);return s}var c=Symbol("yak");function I(...t){let e=[],s=[],r={};for(let n of t)if(typeof n=="string")e.push(n);else if(typeof n=="function")s.push(n);else if(typeof n=="object"&&"style"in n)for(let o in n.style){let a=n.style[o];typeof a=="function"?s.push(T=>({style:{[o]:String(x(T,a))}})):r[o]=a}if(s.length===0){let n=e.join(" ");return()=>({className:n,style:r})}return n=>{let o=[...e],a={...r};for(let T=0;T<s.length;T++)H(n,s[T],o,a);return{className:o.join(" "),style:a}}}var H=(t,e,s,r)=>{let n=e(t);for(;n;){if(typeof n=="function"){n=n(t);continue}else if(typeof n=="object"&&("className"in n&&n.className&&s.push(n.className),"style"in n&&n.style))for(let o in n.style)r[o]=n.style[o];break}},x=(t,e)=>{let s=e(t);if(typeof s=="function")return x(t,s);if(process.env.NODE_ENV==="development"&&typeof s!="string"&&typeof s!="number"&&!(s instanceof String))throw new Error(`Dynamic CSS functions must return a string or number but returned ${JSON.stringify(s)}`);return s};var g=X(require("react"),1),N=require("next-yak/context"),K={},$=(t,e)=>Object.assign(g.default.forwardRef(t),{[c]:[t,e]}),L=t=>Object.assign(h(t),{attrs:e=>h(t,e)}),h=(t,e)=>{let s=typeof t!="string"&&c in t,[r,n]=s?t[c]:[],o=W(e,n);return(a,...T)=>{let d=I(a,...T);return $((p,A)=>{let l=o||d.length?(0,N.useTheme)():K,u="$__attrs"in p?{theme:l,...p}:f({theme:l,...p,$__attrs:!0},o?.({theme:l,...p})),S=d(u),{theme:Y,...j}=u,P=Y===l?j:u,i=s?P:U(P);return i.className=F(i.className,S.className),i.style="style"in i?{...i.style,...S.style}:S.style,r?r(i,A):(i.ref=A,g.default.createElement(t,{...i}))},o)}},b=new Proxy(L,{get(t,e){return t(e)}}),U=t=>{let e={};for(let s in t)!s.startsWith("$")&&t[s]!==void 0&&(e[s]=t[s]);return e},F=(t,e)=>{if(!(!t&&!e))return t?e?t+" "+e:t:e},f=(t,e)=>e?(t.className===e.className||!e.className)&&(t.style===e.style||!e.style)?{...t,...e}:{...t,...e,className:F(t.className,e.className),style:{...t.style||{},...e.style||{}}}:t,W=(t,e)=>{let s=t&&(typeof t=="function"?t:()=>t);return s&&e?r=>{let n=e(r);return f(n,s(f(r,n)))}:s||e};var O=(t,...e)=>"";var R=(...t)=>{let e=t.join(" ");return()=>({className:e})};0&&(module.exports={YakThemeProvider,atoms,css,keyframes,styled,useTheme});
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../runtime/index.ts","../runtime/mocks/cssLiteral.ts","../runtime/cssLiteral.tsx","../runtime/styled.tsx","../runtime/mocks/keyframes.ts","../runtime/atoms.tsx"],"sourcesContent":["/*\n This file contains the typings for the public API for next-yak and testing mocks\n \n IMPORTANT: In production builds, imports to this file should be replaced by the Babel plugin.\n * If you're seeing this code in a production environment, your build process may not be configured correctly.\n \n Purpose:\n * 1. Provide a test-friendly version of the next-yak API\n * 2. Offer type definitions for the public API\n \n Usage in tests:\n * - Import from \"next-yak\" as usual in your test files\n * - These mock implementations will be used instead of the actual runtime\n \n Warning for production:\n * - If these exports are used in a production build, styles will not be applied correctly\n * - Ensure your build process is configured to use the next-yak Babel plugin\n \n For maintainers:\n * - Keep this API surface in sync with the actual implementation in next-yak/internal\n * - Ensure mock implementations here are suitable for testing purposes\n /\n\n// the following export is not relative as \"next-yak/context\"\n// links to one file for react server components and\n// to another file for classic react components\nexport { useTheme, YakThemeProvider } from \"next-yak/context\";\nexport type { YakTheme } from \"./context/index.d.ts\";\n\nexport { css } from \"./mocks/cssLiteral.js\";\nexport { styled } from \"./mocks/styled.js\";\nexport { keyframes } from \"./mocks/keyframes.js\";\nexport { atoms } from \"./atoms.js\";\n","import { CSSProperties } from \"react\";\nimport type { YakTheme } from \"../index.d.ts\";\nimport { yakComponentSymbol } from \"../cssLiteral.js\";\n\ntype ComponentStyles<TProps> = (props: TProps) => {\n className: string;\n style?: {\n [key: string]: string;\n };\n};\n\nexport type StaticCSSProp = {\n className: string;\n style?: CSSProperties;\n};\n\nexport type CSSInterpolation<TProps> =\n \| string\n \| number\n \| undefined\n \| null\n \| false\n \| ComponentStyles<TProps>\n \| StaticCSSProp\n \| {\n // type only identifier to allow targeting components\n // e.g. styled.svg`${Button}:hover & { fill: red; }`\n [yakComponentSymbol]: any;\n }\n \| ((props: TProps) => CSSInterpolation<TProps>);\n\ntype CSSStyles<TProps = {}> = {\n style: { [key: string]: string \| ((props: TProps) => string) };\n};\n\ntype CSSFunction = <TProps = {}>(\n styles: TemplateStringsArray,\n ...values: CSSInterpolation<TProps & { theme: YakTheme }>[]\n) => ComponentStyles<TProps>;\n\ntype PropsToClassNameFn = (props: unknown) =>\n \| {\n className?: string;\n style?: Record<string, string>;\n }\n \| PropsToClassNameFn;\n\n/\n Allows to use CSS styles in a styled or css block\n \n e.g.\n \n ```tsx\n * const Component = styled.div`\n * color: black;\n * ${({$active}) => $active && css`color: red;`}\n * `;\n * ```\n /\nexport function css(styles: TemplateStringsArray, ...values: []): StaticCSSProp;\nexport function css<TProps = {}>(\n styles: TemplateStringsArray,\n ...values: CSSInterpolation<TProps & { theme: YakTheme }>[]\n): ComponentStyles<TProps>;\nexport function css<TProps>(\n styles: TemplateStringsArray,\n ...args: CSSInterpolation<TProps & { theme: YakTheme }>[]\n): StaticCSSProp \| ComponentStyles<TProps> {\n const dynamicCssFunctions: PropsToClassNameFn[] = [];\n for (const arg of args as Array<string \| CSSFunction \| CSSStyles<any>>) {\n // Dynamic CSS e.g.\n // css`${props => props.active && css`color: red;`}`\n // compiled -> css((props: { active: boolean }) => props.active && css(\"yak31e4\"))\n if (typeof arg === \"function\") {\n dynamicCssFunctions.push(arg as unknown as PropsToClassNameFn);\n }\n }\n if (dynamicCssFunctions.length === 0) {\n return {\n className: \"\",\n style: undefined,\n };\n }\n return (<T>(props: T) => {\n for (let i = 0; i < dynamicCssFunctions.length; i++) {\n // run the dynamic expressions and ignore the return value\n // the execution is important to ensure that the user code is executed\n // the same way as in the real runtime\n executeDynamicExpressionRecursively(props, dynamicCssFunctions[i]);\n }\n return {\n className: \"\",\n style: undefined,\n };\n }) as ComponentStyles<TProps>;\n}\n\nfunction executeDynamicExpressionRecursively(\n props: unknown,\n expression: PropsToClassNameFn,\n) {\n let result = expression(props);\n while (typeof result === \"function\") {\n result = result(props);\n }\n return result;\n}\n","import { CSSProperties } from \"react\";\nimport type { YakTheme } from \"./index.d.ts\";\n\nexport const yakComponentSymbol = Symbol(\"yak\");\n\ntype ComponentStyles<TProps> = (props: TProps) => {\n className: string;\n style?: {\n [key: string]: string;\n };\n};\n\nexport type StaticCSSProp = {\n className: string;\n style?: CSSProperties;\n};\n\nexport type CSSInterpolation<TProps> =\n \| string\n \| number\n \| undefined\n \| null\n \| false\n \| ComponentStyles<TProps>\n \| StaticCSSProp\n \| {\n // type only identifier to allow targeting components\n // e.g. styled.svg`${Button}:hover & { fill: red; }`\n [yakComponentSymbol]: any;\n }\n \| ((props: TProps) => CSSInterpolation<TProps>);\n\ntype CSSStyles<TProps = {}> = {\n style: { [key: string]: string \| ((props: TProps) => string) };\n};\n\ntype CSSFunction = <TProps = {}>(\n styles: TemplateStringsArray,\n ...values: CSSInterpolation<TProps & { theme: YakTheme }>[]\n) => ComponentStyles<TProps>;\n\ntype PropsToClassNameFn = (props: unknown) =>\n \| {\n className?: string;\n style?: Record<string, string>;\n }\n \| PropsToClassNameFn;\n\n/\n css() runtime factory of css``\n \n /!\\ next-yak transpiles css`` and styled``\n \n This changes the typings of the css`` and styled`` functions.\n * During development the user of next-yak wants to work with the\n * typings BEFORE compilation.\n \n Therefore this is only an internal function only and it must be cast to any\n * before exported to the user.\n /\nexport function css(styles: TemplateStringsArray, ...values: []): StaticCSSProp;\nexport function css<TProps = {}>(\n styles: TemplateStringsArray,\n ...values: CSSInterpolation<TProps & { theme: YakTheme }>[]\n): ComponentStyles<TProps>;\nexport function css<TProps>(\n ...args: Array<any>\n): StaticCSSProp \| ComponentStyles<TProps> {\n const classNames: string[] = [];\n const dynamicCssFunctions: PropsToClassNameFn[] = [];\n const style: Record<string, string> = {};\n for (const arg of args as Array<string \| CSSFunction \| CSSStyles<any>>) {\n // A CSS-module class name which got auto generated during build from static css\n // e.g. css`color: red;`\n // compiled -> css(\"yak31e4\")\n if (typeof arg === \"string\") {\n classNames.push(arg);\n }\n // Dynamic CSS e.g.\n // css`${props => props.active && css`color: red;`}`\n // compiled -> css((props: { active: boolean }) => props.active && css(\"yak31e4\"))\n else if (typeof arg === \"function\") {\n dynamicCssFunctions.push(arg as unknown as PropsToClassNameFn);\n }\n // Dynamic CSS with css variables e.g.\n // css`transform: translate(${props => props.x}, ${props => props.y});`\n // compiled -> css(\"yak31e4\", { style: { \"--yakVarX\": props => props.x }, \"--yakVarY\": props => props.y }})\n else if (typeof arg === \"object\" && \"style\" in arg) {\n for (const key in arg.style) {\n const value = arg.style[key];\n if (typeof value === \"function\") {\n dynamicCssFunctions.push((props: unknown) => ({\n style: {\n [key]: String(\n // The value for a css value can be a theme dependent function e.g.:\n // const borderColor = (props: { theme: { mode: \"dark\" \| \"light\" } }) => props.theme === \"dark\" ? \"black\" : \"white\";\n // css`border-color: ${borderColor};`\n // Therefore the value has to be extracted recursively\n recursivePropExecution(props, value),\n ),\n },\n }));\n } else {\n style[key] = value;\n }\n }\n }\n }\n\n // Non Dynamic CSS\n if (dynamicCssFunctions.length === 0) {\n const className = classNames.join(\" \");\n return () => ({ className, style });\n }\n\n return (props: unknown) => {\n const allClassNames: string[] = [...classNames];\n const allStyles: Record<string, string> = { ...style };\n for (let i = 0; i < dynamicCssFunctions.length; i++) {\n unwrapProps(props, dynamicCssFunctions[i], allClassNames, allStyles);\n }\n return {\n className: allClassNames.join(\" \"),\n style: allStyles,\n };\n };\n}\n\n// Dynamic CSS with runtime logic\nconst unwrapProps = (\n props: unknown,\n fn: PropsToClassNameFn,\n classNames: string[],\n style: Record<string, string>,\n) => {\n let result = fn(props);\n while (result) {\n if (typeof result === \"function\") {\n result = result(props);\n continue;\n } else if (typeof result === \"object\") {\n if (\"className\" in result && result.className) {\n classNames.push(result.className);\n }\n if (\"style\" in result && result.style) {\n for (const key in result.style) {\n style[key] = result.style[key];\n }\n }\n }\n break;\n }\n};\n\nconst recursivePropExecution = (\n props: unknown,\n fn: (props: unknown) => any,\n): string \| number => {\n const result = fn(props);\n if (typeof result === \"function\") {\n return recursivePropExecution(props, result);\n }\n if (process.env.NODE_ENV === \"development\") {\n if (\n typeof result !== \"string\" &&\n typeof result !== \"number\" &&\n !(result instanceof String)\n ) {\n throw new Error(\n `Dynamic CSS functions must return a string or number but returned ${JSON.stringify(\n result,\n )}`,\n );\n }\n }\n return result;\n};\n","import { ForwardRefRenderFunction, FunctionComponent } from \"react\";\nimport { CSSInterpolation, css, yakComponentSymbol } from \"./cssLiteral.js\";\nimport React from \"react\";\n\n// the following export is not relative as \"next-yak/context\"\n// links to one file for react server components and\n// to another file for classic react components\nimport { useTheme } from \"next-yak/context\";\nimport type { YakTheme } from \"./context/index.d.ts\";\n\n/* Symbols /\n\n/\n This Symbol is a fake theme which was used instead of the real one from the context\n * to speed up rendering\n /\nconst noTheme: YakTheme = {};\n\n/\n Hack to hide {[yakComponentSymbol]:[parentComponent, parentAttributeFunction]}\n * from the type definition and to deal with ExoticComponents\n /\nconst yakForwardRef: <\n TProps,\n TAttrsIn extends object,\n TAttrsOut extends AttrsMerged<TProps, TAttrsIn>,\n>(\n component: ForwardRefRenderFunction<any, TProps>,\n attrsFn?: (props: any) => any,\n) => YakComponent<TProps, TAttrsIn, TAttrsOut> = (component, attrsFn) =>\n Object.assign(React.forwardRef(component), {\n [yakComponentSymbol]: [component, attrsFn],\n }) as any;\n\n/\n All valid html tags\n /\ntype HtmlTags = keyof JSX.IntrinsicElements;\n\n/\n Return type of the provided props merged with the initial props\n * where the specified props are optional\n /\ntype AttrsMerged<TBaseProps, TIn extends object = {}> = Substitute<\n TBaseProps & { theme: YakTheme },\n TIn\n>;\n\n/\n The attrs function allows to add additional props in a function that receives\n * the current props as argument.\n /\ntype AttrsFunction<\n TBaseProps,\n TIn extends object,\n TOut extends AttrsMerged<TBaseProps, TIn> = AttrsMerged<TBaseProps, TIn>,\n> = (p: Substitute<TBaseProps & { theme: YakTheme }, TIn>) => Partial<TOut>;\n\n/\n The attrs function allows to add additional props to a styled component.\n * The props can be specified as an object or as a function that receives the\n * current props as argument.\n /\ntype Attrs<\n TBaseProps,\n TIn extends object = {},\n TOut extends AttrsMerged<TBaseProps, TIn> = AttrsMerged<TBaseProps, TIn>,\n> = Partial<TOut> \| AttrsFunction<TBaseProps, TIn, TOut>;\n\n//\n// The `styled()` and `styled.` API\n//\n// The API design is inspired by styled-components:\n// https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/constructors/styled.tsx\n// https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/models/StyledComponent.ts\n//\nconst StyledFactory = <T,>(Component: HtmlTags \| FunctionComponent<T>) =>\n Object.assign(yakStyled(Component), {\n attrs: <\n TAttrsIn extends object = {},\n TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>,\n >(\n attrs: Attrs<T, TAttrsIn, TAttrsOut>,\n ) => yakStyled<T, TAttrsIn, TAttrsOut>(Component, attrs),\n });\n\n/\n A yak component has a special symbol attached to it that allows to\n * target the component from a child component and to correctly handle the attrs function (if any).\n * e.g. styled.svg`${Button}:hover & { fill: red; }` or styled(Button)`color: red;`\n /\ntype YakComponent<\n T,\n TAttrsIn extends object = {},\n TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>,\n> = FunctionComponent<T> & {\n [yakComponentSymbol]: [\n FunctionComponent<T>,\n AttrsFunction<T, TAttrsIn, TAttrsOut>,\n ];\n};\n\nconst yakStyled = <\n T,\n TAttrsIn extends object = {},\n TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>,\n>(\n Component:\n \| FunctionComponent<T>\n \| YakComponent<T, TAttrsIn, TAttrsOut>\n \| HtmlTags,\n attrs?: Attrs<T, TAttrsIn, TAttrsOut>,\n) => {\n const isYakComponent =\n typeof Component !== \"string\" && yakComponentSymbol in Component;\n\n // if the component that is wrapped is a yak component, we can extract it to render the underlying component directly\n // and we can also extract the attrs function to merge it with the current attrs function so that the sequence of\n // the attrs functions is preserved\n const [parentYakComponent, parentAttrsFn] = isYakComponent\n ? Component[yakComponentSymbol]\n : [];\n\n const mergedAttrsFn = buildRuntimeAttrsProcessor(attrs, parentAttrsFn);\n\n return <TCSSProps extends object = {}>(\n styles: TemplateStringsArray,\n ...values: Array<\n CSSInterpolation<T & NoInfer<TCSSProps> & { theme: YakTheme }>\n >\n ) => {\n const getRuntimeStyles = css(styles, ...values);\n const yak = (props: Substitute<TCSSProps & T, TAttrsIn>, ref: unknown) => {\n // if the css component does not require arguments\n // it can be called without arguments and we skip calling useTheme()\n //\n // `attrsFn \|\| getRuntimeStyles.length` is NOT against the rule of hooks as\n // getRuntimeStyles and attrsFn are constants defined outside of the component\n //\n // for example\n //\n // const Button = styled.button`color: red;`\n // ^ does not need to have access to theme, so we skip calling useTheme()\n //\n // const Button = styled.button`${({ theme }) => css`color: ${theme.color};`}`\n // ^ must be have access to theme, so we call useTheme()\n const theme =\n mergedAttrsFn \|\| getRuntimeStyles.length ? useTheme() : noTheme;\n\n // The first components which is not wrapped in a yak component will execute all attrs functions\n // starting from the innermost yak component to the outermost yak component (itself)\n const combinedProps =\n \"$__attrs\" in props\n ? // if the props already contain the $__attrs key, we assume that the props have already been processed\n // and skip processing the attrs again.\n // e.g. const Child = styled(Parent)`color: red;`\n // We process the attrs once in the child (with all attrs functions merged (including the one from the child))\n // and in the subsequent call in the parent we skip processing the attrs again\n {\n theme,\n ...props,\n }\n : // overwrite and merge the current props with the processed attrs\n combineProps(\n {\n theme,\n ...(props as {\n className?: string;\n style?: React.CSSProperties;\n }),\n // mark the props as processed\n $__attrs: true,\n },\n mergedAttrsFn?.({ theme, ...props } as Substitute<\n T & { theme: YakTheme },\n TAttrsIn\n >),\n );\n // execute all functions inside the style literal\n // e.g. styled.button`color: ${props => props.color};`\n const runtimeStyles = getRuntimeStyles(combinedProps as T & TCSSProps);\n\n // delete the yak theme from the props\n // this must happen after the runtimeStyles are calculated\n // prevents passing the theme prop to the DOM element of a styled component\n const { theme: themeAfterAttr, ...combinedPropsWithoutTheme } =\n combinedProps as { theme?: unknown };\n const propsBeforeFiltering =\n themeAfterAttr === theme ? combinedPropsWithoutTheme : combinedProps;\n\n // remove all props that start with a $ sign for string components e.g. \"button\" or \"div\"\n // so that they are not passed to the DOM element\n const filteredProps = !isYakComponent\n ? removeNonDomProperties(propsBeforeFiltering)\n : propsBeforeFiltering;\n\n // yak provides a className and style prop that needs to be merged with the\n // user provided className and style prop\n (filteredProps as { className?: string }).className = mergeClassNames(\n (filteredProps as { className?: string }).className,\n runtimeStyles.className,\n );\n (filteredProps as { style?: React.CSSProperties }).style =\n \"style\" in filteredProps\n ? {\n ...(filteredProps as { style?: React.CSSProperties }).style,\n ...runtimeStyles.style,\n }\n : runtimeStyles.style;\n // if the styled(Component) syntax is used and the component is a yak component\n // we can call the yak function directly to avoid an unnecessary wrapper with an additional\n // forwardRef call\n if (parentYakComponent) {\n return parentYakComponent(filteredProps as T, ref);\n }\n (filteredProps as { ref?: unknown }).ref = ref;\n return <Component {...(filteredProps as any)} />;\n };\n return yakForwardRef(yak, mergedAttrsFn);\n };\n};\n\n/\n Type for the proxy object returned by `styled` that allows to\n * access all html tags as properties.\n /\ntype StyledLiteral<T> = <TCSSProps>(\n styles: TemplateStringsArray,\n ...values: Array<\n CSSInterpolation<\n T &\n // don't allow inference from types in the tagged template literal\n // additional benefit is that destruction is now typed and provides hints\n NoInfer<TCSSProps> & { theme: YakTheme }\n >\n >\n) => YakComponent<TCSSProps & T>;\n\n/\n The `styled` method works perfectly on all of your own or any third-party component,\n * as long as they attach the passed className prop to a DOM element.\n \n @usage\n \n ```tsx\n * const StyledLink = styled(Link)`\n * color: #BF4F74;\n * font-weight: bold;\n * `;\n * ```\n /\nexport const styled = new Proxy(\n StyledFactory as typeof StyledFactory & {\n [Tag in HtmlTags]: StyledLiteral<JSX.IntrinsicElements[Tag]> & {\n attrs: <\n TAttrsIn extends object = {},\n TAttrsOut extends AttrsMerged<\n JSX.IntrinsicElements[Tag],\n TAttrsIn\n > = AttrsMerged<JSX.IntrinsicElements[Tag], TAttrsIn>,\n >(\n attrs: Attrs<JSX.IntrinsicElements[Tag], TAttrsIn, TAttrsOut>,\n ) => StyledLiteral<Substitute<JSX.IntrinsicElements[Tag], TAttrsIn>>;\n };\n },\n {\n get(target, TagName: keyof JSX.IntrinsicElements) {\n return target(TagName);\n },\n },\n);\n\n/\n Remove all entries that start with a $ sign\n \n This allows to have props that are used for internal stylingen purposes\n * but are not be passed to the DOM element\n /\nconst removeNonDomProperties = <T extends Record<string, unknown>>(obj: T) => {\n const result = {} as T;\n for (const key in obj) {\n if (!key.startsWith(\"$\") && obj[key] !== undefined) {\n result[key] = obj[key];\n }\n }\n return result;\n};\n\n// util function to merge class names, as they are concatenated with a space\nconst mergeClassNames = (a?: string, b?: string) => {\n if (!a && !b) return undefined;\n if (!a) return b;\n if (!b) return a;\n return a + \" \" + b;\n};\n\n/\n merge props and processed props (including class names and styles)\n * e.g.:\\\n * `{ className: \"a\", foo: 1 }` and `{ className: \"b\", bar: 2 }` \\\n * => `{ className: \"a b\", foo: 1, bar: 2 }`\n /\nconst combineProps = <\n T extends {\n className?: string;\n style?: React.CSSProperties;\n },\n TOther extends\n \| {\n className?: string;\n style?: React.CSSProperties;\n }\n \| null\n \| undefined,\n>(\n props: T,\n newProps: TOther,\n) =>\n newProps\n ? (props.className === newProps.className \|\| !newProps.className) &&\n (props.style === newProps.style \|\| !newProps.style)\n ? // shortcut if no style and class merging is necessary\n {\n ...props,\n ...newProps,\n }\n : // merge class names and styles\n {\n ...props,\n ...newProps,\n className: mergeClassNames(props.className, newProps.className),\n style: { ...(props.style \|\| {}), ...(newProps.style \|\| {}) },\n }\n : // if no new props are provided, no merging is necessary\n props;\n\n// util type to remove properties from an object\ntype FastOmit<T extends object, U extends string \| number \| symbol> = {\n [K in keyof T as K extends U ? never : K]: T[K];\n};\n\n// util type to merge two objects\n// if a property is present in both objects the property from B is used\nexport type Substitute<A extends object, B extends object> = FastOmit<\n A,\n keyof B\n> &\n B;\n\n/\n Merges the attrs function of the current component with the attrs function of the parent component\n * in order to preserve the sequence of the attrs functions.\n * Note: In theory, the parentAttrsFn can have different types for TAttrsIn and TAttrsOut\n * but as this is only used internally, we can ignore and simplify this case\n * @param attrs The attrs object or function of the current component (if any)\n * @param parentAttrsFn The attrs function of the parent/wrapped component (if any)\n * @returns A function that receives the props and returns the transformed props\n /\nconst buildRuntimeAttrsProcessor = <\n T,\n TAttrsIn extends object,\n TAttrsOut extends AttrsMerged<T, TAttrsIn>,\n>(\n attrs?: Attrs<T, TAttrsIn, TAttrsOut>,\n parentAttrsFn?: AttrsFunction<T, TAttrsIn, TAttrsOut>,\n): AttrsFunction<T, TAttrsIn, TAttrsOut> \| undefined => {\n const ownAttrsFn =\n attrs && (typeof attrs === \"function\" ? attrs : () => attrs);\n\n if (ownAttrsFn && parentAttrsFn) {\n return (props) => {\n const parentProps = parentAttrsFn(props);\n\n // overwrite and merge the parent props with the props received from the attrs function\n // after they went through the parent attrs function.\n //\n // This makes sure the linearity of the attrs functions is preserved and all attrs function receive\n // the whole props object calculated from the previous attrs functions\n return combineProps(\n parentProps,\n ownAttrsFn(combineProps(props, parentProps)),\n );\n };\n }\n\n return ownAttrsFn \|\| parentAttrsFn;\n};\n","/\n Allows to use CSS keyframe animations in a styled or css block\n \n @usage\n \n ```tsx\n * import { styled, keyframes } from \"next-yak\";\n \n const rotate = keyframes`\n * from {\n * transform: rotate(0deg);\n * }\n * to {\n * transform: rotate(360deg);\n * }\n * `;\n \n const Spinner = styled.div`\n * animation: ${rotate} 1s linear infinite;\n * `;\n * ```\n /\nexport const keyframes = (\n styles: TemplateStringsArray,\n ...dynamic: never[]\n): string => {\n // the keyframes function is a no-op in the mock\n // as it has no dynamic runtime behavior but only css\n return \"\";\n};\n","/\n Allows to use atomic CSS classes in a styled or css block\n \n @usage\n \n ```tsx\n * import { styled, atoms } from \"next-yak\";\n \n const Button = styled.button<{ $primary?: boolean }>`\n * ${atoms(\"text-teal-600\", \"text-base\", \"rounded-md\")}\n * ${props => props.$primary && atoms(\"shadow-md\")}\n * `;\n * ```\n */\nexport const atoms = (...atoms: string[]) => {\n const className = atoms.join(\" \");\n return () => ({ className });\n};\n"],"mappings":"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","names":["runtime_exports","__export","atoms","css","keyframes","styled","__toCommonJS","import_context","css","styles","args","dynamicCssFunctions","arg","props","i","executeDynamicExpressionRecursively","expression","result","yakComponentSymbol","css","args","classNames","dynamicCssFunctions","style","arg","key","value","props","recursivePropExecution","className","allClassNames","allStyles","i","unwrapProps","fn","result","import_react","import_context","noTheme","yakForwardRef","component","attrsFn","React","yakComponentSymbol","StyledFactory","Component","yakStyled","attrs","isYakComponent","parentYakComponent","parentAttrsFn","mergedAttrsFn","buildRuntimeAttrsProcessor","styles","values","getRuntimeStyles","css","props","ref","theme","combinedProps","combineProps","runtimeStyles","themeAfterAttr","combinedPropsWithoutTheme","propsBeforeFiltering","filteredProps","removeNonDomProperties","mergeClassNames","styled","target","TagName","obj","result","key","a","b","newProps","ownAttrsFn","parentProps","keyframes","styles","dynamic","atoms","className"]}
1	+ {"version":3,"sources":["../runtime/index.ts","../runtime/mocks/cssLiteral.ts","../runtime/cssLiteral.tsx","../runtime/styled.tsx","../runtime/mocks/keyframes.ts","../runtime/atoms.tsx"],"sourcesContent":["/*\n This file contains the typings for the public API for next-yak and testing mocks\n \n IMPORTANT: In production builds, imports to this file should be replaced by the Babel plugin.\n * If you're seeing this code in a production environment, your build process may not be configured correctly.\n \n Purpose:\n * 1. Provide a test-friendly version of the next-yak API\n * 2. Offer type definitions for the public API\n \n Usage in tests:\n * - Import from \"next-yak\" as usual in your test files\n * - These mock implementations will be used instead of the actual runtime\n \n Warning for production:\n * - If these exports are used in a production build, styles will not be applied correctly\n * - Ensure your build process is configured to use the next-yak Babel plugin\n \n For maintainers:\n * - Keep this API surface in sync with the actual implementation in next-yak/internal\n * - Ensure mock implementations here are suitable for testing purposes\n /\n\n// the following export is not relative as \"next-yak/context\"\n// links to one file for react server components and\n// to another file for classic react components\nexport { useTheme, YakThemeProvider } from \"next-yak/context\";\nexport type { YakTheme } from \"./context/index.d.ts\";\n\nexport { css } from \"./mocks/cssLiteral.js\";\nexport { styled } from \"./mocks/styled.js\";\nexport { keyframes } from \"./mocks/keyframes.js\";\nexport { atoms } from \"./atoms.js\";\n","import { CSSProperties } from \"react\";\nimport type { YakTheme } from \"../index.d.ts\";\nimport { yakComponentSymbol } from \"../cssLiteral.js\";\n\ntype ComponentStyles<TProps> = (props: TProps) => {\n className: string;\n style?: {\n [key: string]: string;\n };\n};\n\nexport type StaticCSSProp = {\n className: string;\n style?: CSSProperties;\n};\n\nexport type CSSInterpolation<TProps> =\n \| string\n \| number\n \| undefined\n \| null\n \| false\n \| ComponentStyles<TProps>\n \| StaticCSSProp\n \| {\n // type only identifier to allow targeting components\n // e.g. styled.svg`${Button}:hover & { fill: red; }`\n [yakComponentSymbol]: any;\n }\n \| ((props: TProps) => CSSInterpolation<TProps>);\n\ntype CSSStyles<TProps = {}> = {\n style: { [key: string]: string \| ((props: TProps) => string) };\n};\n\ntype CSSFunction = <TProps = {}>(\n styles: TemplateStringsArray,\n ...values: CSSInterpolation<TProps & { theme: YakTheme }>[]\n) => ComponentStyles<TProps>;\n\ntype PropsToClassNameFn = (props: unknown) =>\n \| {\n className?: string;\n style?: Record<string, string>;\n }\n \| PropsToClassNameFn;\n\n/\n Allows to use CSS styles in a styled or css block\n \n e.g.\n \n ```tsx\n * const Component = styled.div`\n * color: black;\n * ${({$active}) => $active && css`color: red;`}\n * `;\n * ```\n /\nexport function css(styles: TemplateStringsArray, ...values: []): StaticCSSProp;\nexport function css<TProps = {}>(\n styles: TemplateStringsArray,\n ...values: CSSInterpolation<TProps & { theme: YakTheme }>[]\n): ComponentStyles<TProps>;\nexport function css<TProps>(\n styles: TemplateStringsArray,\n ...args: CSSInterpolation<TProps & { theme: YakTheme }>[]\n): StaticCSSProp \| ComponentStyles<TProps> {\n const dynamicCssFunctions: PropsToClassNameFn[] = [];\n for (const arg of args as Array<string \| CSSFunction \| CSSStyles<any>>) {\n // Dynamic CSS e.g.\n // css`${props => props.active && css`color: red;`}`\n // compiled -> css((props: { active: boolean }) => props.active && css(\"yak31e4\"))\n if (typeof arg === \"function\") {\n dynamicCssFunctions.push(arg as unknown as PropsToClassNameFn);\n }\n }\n if (dynamicCssFunctions.length === 0) {\n return {\n className: \"\",\n style: undefined,\n };\n }\n return (<T>(props: T) => {\n for (let i = 0; i < dynamicCssFunctions.length; i++) {\n // run the dynamic expressions and ignore the return value\n // the execution is important to ensure that the user code is executed\n // the same way as in the real runtime\n executeDynamicExpressionRecursively(props, dynamicCssFunctions[i]);\n }\n return {\n className: \"\",\n style: undefined,\n };\n }) as ComponentStyles<TProps>;\n}\n\nfunction executeDynamicExpressionRecursively(\n props: unknown,\n expression: PropsToClassNameFn,\n) {\n let result = expression(props);\n while (typeof result === \"function\") {\n result = result(props);\n }\n return result;\n}\n","import { CSSProperties } from \"react\";\nimport type { YakTheme } from \"./index.d.ts\";\n\nexport const yakComponentSymbol = Symbol(\"yak\");\n\ntype ComponentStyles<TProps> = (props: TProps) => {\n className: string;\n style?: {\n [key: string]: string;\n };\n};\n\nexport type StaticCSSProp = {\n className: string;\n style?: CSSProperties;\n};\n\nexport type CSSInterpolation<TProps> =\n \| string\n \| number\n \| undefined\n \| null\n \| false\n \| ComponentStyles<TProps>\n \| StaticCSSProp\n \| {\n // type only identifier to allow targeting components\n // e.g. styled.svg`${Button}:hover & { fill: red; }`\n [yakComponentSymbol]: any;\n }\n \| ((props: TProps) => CSSInterpolation<TProps>);\n\ntype CSSStyles<TProps = {}> = {\n style: { [key: string]: string \| ((props: TProps) => string) };\n};\n\ntype CSSFunction = <TProps = {}>(\n styles: TemplateStringsArray,\n ...values: CSSInterpolation<TProps & { theme: YakTheme }>[]\n) => ComponentStyles<TProps>;\n\ntype PropsToClassNameFn = (props: unknown) =>\n \| {\n className?: string;\n style?: Record<string, string>;\n }\n \| PropsToClassNameFn;\n\n/\n css() runtime factory of css``\n \n /!\\ next-yak transpiles css`` and styled``\n \n This changes the typings of the css`` and styled`` functions.\n * During development the user of next-yak wants to work with the\n * typings BEFORE compilation.\n \n Therefore this is only an internal function only and it must be cast to any\n * before exported to the user.\n /\nexport function css(styles: TemplateStringsArray, ...values: []): StaticCSSProp;\nexport function css<TProps = {}>(\n styles: TemplateStringsArray,\n ...values: CSSInterpolation<TProps & { theme: YakTheme }>[]\n): ComponentStyles<TProps>;\nexport function css<TProps>(\n ...args: Array<any>\n): StaticCSSProp \| ComponentStyles<TProps> {\n const classNames: string[] = [];\n const dynamicCssFunctions: PropsToClassNameFn[] = [];\n const style: Record<string, string> = {};\n for (const arg of args as Array<string \| CSSFunction \| CSSStyles<any>>) {\n // A CSS-module class name which got auto generated during build from static css\n // e.g. css`color: red;`\n // compiled -> css(\"yak31e4\")\n if (typeof arg === \"string\") {\n classNames.push(arg);\n }\n // Dynamic CSS e.g.\n // css`${props => props.active && css`color: red;`}`\n // compiled -> css((props: { active: boolean }) => props.active && css(\"yak31e4\"))\n else if (typeof arg === \"function\") {\n dynamicCssFunctions.push(arg as unknown as PropsToClassNameFn);\n }\n // Dynamic CSS with css variables e.g.\n // css`transform: translate(${props => props.x}, ${props => props.y});`\n // compiled -> css(\"yak31e4\", { style: { \"--yakVarX\": props => props.x }, \"--yakVarY\": props => props.y }})\n else if (typeof arg === \"object\" && \"style\" in arg) {\n for (const key in arg.style) {\n const value = arg.style[key];\n if (typeof value === \"function\") {\n dynamicCssFunctions.push((props: unknown) => ({\n style: {\n [key]: String(\n // The value for a css value can be a theme dependent function e.g.:\n // const borderColor = (props: { theme: { mode: \"dark\" \| \"light\" } }) => props.theme === \"dark\" ? \"black\" : \"white\";\n // css`border-color: ${borderColor};`\n // Therefore the value has to be extracted recursively\n recursivePropExecution(props, value),\n ),\n },\n }));\n } else {\n style[key] = value;\n }\n }\n }\n }\n\n // Non Dynamic CSS\n if (dynamicCssFunctions.length === 0) {\n const className = classNames.join(\" \");\n return () => ({ className, style });\n }\n\n return (props: unknown) => {\n const allClassNames: string[] = [...classNames];\n const allStyles: Record<string, string> = { ...style };\n for (let i = 0; i < dynamicCssFunctions.length; i++) {\n unwrapProps(props, dynamicCssFunctions[i], allClassNames, allStyles);\n }\n return {\n className: allClassNames.join(\" \"),\n style: allStyles,\n };\n };\n}\n\n// Dynamic CSS with runtime logic\nconst unwrapProps = (\n props: unknown,\n fn: PropsToClassNameFn,\n classNames: string[],\n style: Record<string, string>,\n) => {\n let result = fn(props);\n while (result) {\n if (typeof result === \"function\") {\n result = result(props);\n continue;\n } else if (typeof result === \"object\") {\n if (\"className\" in result && result.className) {\n classNames.push(result.className);\n }\n if (\"style\" in result && result.style) {\n for (const key in result.style) {\n style[key] = result.style[key];\n }\n }\n }\n break;\n }\n};\n\nconst recursivePropExecution = (\n props: unknown,\n fn: (props: unknown) => any,\n): string \| number => {\n const result = fn(props);\n if (typeof result === \"function\") {\n return recursivePropExecution(props, result);\n }\n if (process.env.NODE_ENV === \"development\") {\n if (\n typeof result !== \"string\" &&\n typeof result !== \"number\" &&\n !(result instanceof String)\n ) {\n throw new Error(\n `Dynamic CSS functions must return a string or number but returned ${JSON.stringify(\n result,\n )}`,\n );\n }\n }\n return result;\n};\n","import { ForwardRefRenderFunction } from \"react\";\nimport { CSSInterpolation, css, yakComponentSymbol } from \"./cssLiteral.js\";\nimport React from \"react\";\n\n// the following export is not relative as \"next-yak/context\"\n// links to one file for react server components and\n// to another file for classic react components\nimport { useTheme } from \"next-yak/context\";\nimport type { YakTheme } from \"./context/index.d.ts\";\n\n/* Symbols /\n\n/\n This Symbol is a fake theme which was used instead of the real one from the context\n * to speed up rendering\n /\nconst noTheme: YakTheme = {};\n\n/\n Hack to hide {[yakComponentSymbol]:[parentComponent, parentAttributeFunction]}\n * from the type definition and to deal with ExoticComponents\n /\nconst yakForwardRef: <\n TProps,\n TAttrsIn extends object,\n TAttrsOut extends AttrsMerged<TProps, TAttrsIn>,\n>(\n component: ForwardRefRenderFunction<any, TProps>,\n attrsFn?: (props: any) => any,\n) => YakComponent<TProps, TAttrsIn, TAttrsOut> = (component, attrsFn) =>\n Object.assign(React.forwardRef(component), {\n [yakComponentSymbol]: [component, attrsFn],\n }) as any;\n\n/\n Minimal type for a function component that works with next-yak\n /\ntype FunctionComponent<T> = (props: T, context?: any) => React.ReactNode;\n\n/\n All valid html tags\n /\ntype HtmlTags = keyof JSX.IntrinsicElements;\n\n/\n Return type of the provided props merged with the initial props\n * where the specified props are optional\n /\ntype AttrsMerged<TBaseProps, TIn extends object = {}> = Substitute<\n TBaseProps & { theme: YakTheme },\n TIn\n>;\n\n/\n The attrs function allows to add additional props in a function that receives\n * the current props as argument.\n /\ntype AttrsFunction<\n TBaseProps,\n TIn extends object,\n TOut extends AttrsMerged<TBaseProps, TIn> = AttrsMerged<TBaseProps, TIn>,\n> = (p: Substitute<TBaseProps & { theme: YakTheme }, TIn>) => Partial<TOut>;\n\n/\n The attrs function allows to add additional props to a styled component.\n * The props can be specified as an object or as a function that receives the\n * current props as argument.\n /\ntype Attrs<\n TBaseProps,\n TIn extends object = {},\n TOut extends AttrsMerged<TBaseProps, TIn> = AttrsMerged<TBaseProps, TIn>,\n> = Partial<TOut> \| AttrsFunction<TBaseProps, TIn, TOut>;\n\n//\n// The `styled()` and `styled.` API\n//\n// The API design is inspired by styled-components:\n// https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/constructors/styled.tsx\n// https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/models/StyledComponent.ts\n//\nconst StyledFactory = <T,>(Component: HtmlTags \| FunctionComponent<T>) =>\n Object.assign(yakStyled(Component), {\n attrs: <\n TAttrsIn extends object = {},\n TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>,\n >(\n attrs: Attrs<T, TAttrsIn, TAttrsOut>,\n ) => yakStyled<T, TAttrsIn, TAttrsOut>(Component, attrs),\n });\n\n/\n A yak component has a special symbol attached to it that allows to\n * target the component from a child component and to correctly handle the attrs function (if any).\n * e.g. styled.svg`${Button}:hover & { fill: red; }` or styled(Button)`color: red;`\n /\ntype YakComponent<\n T,\n TAttrsIn extends object = {},\n TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>,\n> = FunctionComponent<T> & {\n [yakComponentSymbol]: [\n FunctionComponent<T>,\n AttrsFunction<T, TAttrsIn, TAttrsOut>,\n ];\n};\n\nconst yakStyled = <\n T,\n TAttrsIn extends object = {},\n TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>,\n>(\n Component:\n \| FunctionComponent<T>\n \| YakComponent<T, TAttrsIn, TAttrsOut>\n \| HtmlTags,\n attrs?: Attrs<T, TAttrsIn, TAttrsOut>,\n) => {\n const isYakComponent =\n typeof Component !== \"string\" && yakComponentSymbol in Component;\n\n // if the component that is wrapped is a yak component, we can extract it to render the underlying component directly\n // and we can also extract the attrs function to merge it with the current attrs function so that the sequence of\n // the attrs functions is preserved\n const [parentYakComponent, parentAttrsFn] = isYakComponent\n ? Component[yakComponentSymbol]\n : [];\n\n const mergedAttrsFn = buildRuntimeAttrsProcessor(attrs, parentAttrsFn);\n\n return <TCSSProps extends object = {}>(\n styles: TemplateStringsArray,\n ...values: Array<\n CSSInterpolation<T & NoInfer<TCSSProps> & { theme: YakTheme }>\n >\n ) => {\n const getRuntimeStyles = css(styles, ...values);\n const yak = (props: Substitute<TCSSProps & T, TAttrsIn>, ref: unknown) => {\n // if the css component does not require arguments\n // it can be called without arguments and we skip calling useTheme()\n //\n // `attrsFn \|\| getRuntimeStyles.length` is NOT against the rule of hooks as\n // getRuntimeStyles and attrsFn are constants defined outside of the component\n //\n // for example\n //\n // const Button = styled.button`color: red;`\n // ^ does not need to have access to theme, so we skip calling useTheme()\n //\n // const Button = styled.button`${({ theme }) => css`color: ${theme.color};`}`\n // ^ must be have access to theme, so we call useTheme()\n const theme =\n mergedAttrsFn \|\| getRuntimeStyles.length ? useTheme() : noTheme;\n\n // The first components which is not wrapped in a yak component will execute all attrs functions\n // starting from the innermost yak component to the outermost yak component (itself)\n const combinedProps =\n \"$__attrs\" in props\n ? // if the props already contain the $__attrs key, we assume that the props have already been processed\n // and skip processing the attrs again.\n // e.g. const Child = styled(Parent)`color: red;`\n // We process the attrs once in the child (with all attrs functions merged (including the one from the child))\n // and in the subsequent call in the parent we skip processing the attrs again\n {\n theme,\n ...props,\n }\n : // overwrite and merge the current props with the processed attrs\n combineProps(\n {\n theme,\n ...(props as {\n className?: string;\n style?: React.CSSProperties;\n }),\n // mark the props as processed\n $__attrs: true,\n },\n mergedAttrsFn?.({ theme, ...props } as Substitute<\n T & { theme: YakTheme },\n TAttrsIn\n >),\n );\n // execute all functions inside the style literal\n // e.g. styled.button`color: ${props => props.color};`\n const runtimeStyles = getRuntimeStyles(combinedProps as T & TCSSProps);\n\n // delete the yak theme from the props\n // this must happen after the runtimeStyles are calculated\n // prevents passing the theme prop to the DOM element of a styled component\n const { theme: themeAfterAttr, ...combinedPropsWithoutTheme } =\n combinedProps as { theme?: unknown };\n const propsBeforeFiltering =\n themeAfterAttr === theme ? combinedPropsWithoutTheme : combinedProps;\n\n // remove all props that start with a $ sign for string components e.g. \"button\" or \"div\"\n // so that they are not passed to the DOM element\n const filteredProps = !isYakComponent\n ? removeNonDomProperties(propsBeforeFiltering)\n : propsBeforeFiltering;\n\n // yak provides a className and style prop that needs to be merged with the\n // user provided className and style prop\n (filteredProps as { className?: string }).className = mergeClassNames(\n (filteredProps as { className?: string }).className,\n runtimeStyles.className,\n );\n (filteredProps as { style?: React.CSSProperties }).style =\n \"style\" in filteredProps\n ? {\n ...(filteredProps as { style?: React.CSSProperties }).style,\n ...runtimeStyles.style,\n }\n : runtimeStyles.style;\n // if the styled(Component) syntax is used and the component is a yak component\n // we can call the yak function directly to avoid an unnecessary wrapper with an additional\n // forwardRef call\n if (parentYakComponent) {\n return parentYakComponent(filteredProps as T, ref);\n }\n (filteredProps as { ref?: unknown }).ref = ref;\n return <Component {...(filteredProps as any)} />;\n };\n return yakForwardRef(yak, mergedAttrsFn);\n };\n};\n\n/\n Type for the proxy object returned by `styled` that allows to\n * access all html tags as properties.\n /\ntype StyledLiteral<T> = <TCSSProps>(\n styles: TemplateStringsArray,\n ...values: Array<\n CSSInterpolation<\n T &\n // don't allow inference from types in the tagged template literal\n // additional benefit is that destruction is now typed and provides hints\n NoInfer<TCSSProps> & { theme: YakTheme }\n >\n >\n) => YakComponent<TCSSProps & T>;\n\n/\n The `styled` method works perfectly on all of your own or any third-party component,\n * as long as they attach the passed className prop to a DOM element.\n \n @usage\n \n ```tsx\n * const StyledLink = styled(Link)`\n * color: #BF4F74;\n * font-weight: bold;\n * `;\n * ```\n /\nexport const styled = new Proxy(\n StyledFactory as typeof StyledFactory & {\n [Tag in HtmlTags]: StyledLiteral<JSX.IntrinsicElements[Tag]> & {\n attrs: <\n TAttrsIn extends object = {},\n TAttrsOut extends AttrsMerged<\n JSX.IntrinsicElements[Tag],\n TAttrsIn\n > = AttrsMerged<JSX.IntrinsicElements[Tag], TAttrsIn>,\n >(\n attrs: Attrs<JSX.IntrinsicElements[Tag], TAttrsIn, TAttrsOut>,\n ) => StyledLiteral<Substitute<JSX.IntrinsicElements[Tag], TAttrsIn>>;\n };\n },\n {\n get(target, TagName: keyof JSX.IntrinsicElements) {\n return target(TagName);\n },\n },\n);\n\n/\n Remove all entries that start with a $ sign\n \n This allows to have props that are used for internal stylingen purposes\n * but are not be passed to the DOM element\n /\nconst removeNonDomProperties = <T extends Record<string, unknown>>(obj: T) => {\n const result = {} as T;\n for (const key in obj) {\n if (!key.startsWith(\"$\") && obj[key] !== undefined) {\n result[key] = obj[key];\n }\n }\n return result;\n};\n\n// util function to merge class names, as they are concatenated with a space\nconst mergeClassNames = (a?: string, b?: string) => {\n if (!a && !b) return undefined;\n if (!a) return b;\n if (!b) return a;\n return a + \" \" + b;\n};\n\n/\n merge props and processed props (including class names and styles)\n * e.g.:\\\n * `{ className: \"a\", foo: 1 }` and `{ className: \"b\", bar: 2 }` \\\n * => `{ className: \"a b\", foo: 1, bar: 2 }`\n /\nconst combineProps = <\n T extends {\n className?: string;\n style?: React.CSSProperties;\n },\n TOther extends\n \| {\n className?: string;\n style?: React.CSSProperties;\n }\n \| null\n \| undefined,\n>(\n props: T,\n newProps: TOther,\n) =>\n newProps\n ? (props.className === newProps.className \|\| !newProps.className) &&\n (props.style === newProps.style \|\| !newProps.style)\n ? // shortcut if no style and class merging is necessary\n {\n ...props,\n ...newProps,\n }\n : // merge class names and styles\n {\n ...props,\n ...newProps,\n className: mergeClassNames(props.className, newProps.className),\n style: { ...(props.style \|\| {}), ...(newProps.style \|\| {}) },\n }\n : // if no new props are provided, no merging is necessary\n props;\n\n// util type to remove properties from an object\ntype FastOmit<T extends object, U extends string \| number \| symbol> = {\n [K in keyof T as K extends U ? never : K]: T[K];\n};\n\n// util type to merge two objects\n// if a property is present in both objects the property from B is used\nexport type Substitute<A extends object, B extends object> = FastOmit<\n A,\n keyof B\n> &\n B;\n\n/\n Merges the attrs function of the current component with the attrs function of the parent component\n * in order to preserve the sequence of the attrs functions.\n * Note: In theory, the parentAttrsFn can have different types for TAttrsIn and TAttrsOut\n * but as this is only used internally, we can ignore and simplify this case\n * @param attrs The attrs object or function of the current component (if any)\n * @param parentAttrsFn The attrs function of the parent/wrapped component (if any)\n * @returns A function that receives the props and returns the transformed props\n /\nconst buildRuntimeAttrsProcessor = <\n T,\n TAttrsIn extends object,\n TAttrsOut extends AttrsMerged<T, TAttrsIn>,\n>(\n attrs?: Attrs<T, TAttrsIn, TAttrsOut>,\n parentAttrsFn?: AttrsFunction<T, TAttrsIn, TAttrsOut>,\n): AttrsFunction<T, TAttrsIn, TAttrsOut> \| undefined => {\n const ownAttrsFn =\n attrs && (typeof attrs === \"function\" ? attrs : () => attrs);\n\n if (ownAttrsFn && parentAttrsFn) {\n return (props) => {\n const parentProps = parentAttrsFn(props);\n\n // overwrite and merge the parent props with the props received from the attrs function\n // after they went through the parent attrs function.\n //\n // This makes sure the linearity of the attrs functions is preserved and all attrs function receive\n // the whole props object calculated from the previous attrs functions\n return combineProps(\n parentProps,\n ownAttrsFn(combineProps(props, parentProps)),\n );\n };\n }\n\n return ownAttrsFn \|\| parentAttrsFn;\n};\n","/\n Allows to use CSS keyframe animations in a styled or css block\n \n @usage\n \n ```tsx\n * import { styled, keyframes } from \"next-yak\";\n \n const rotate = keyframes`\n * from {\n * transform: rotate(0deg);\n * }\n * to {\n * transform: rotate(360deg);\n * }\n * `;\n \n const Spinner = styled.div`\n * animation: ${rotate} 1s linear infinite;\n * `;\n * ```\n /\nexport const keyframes = (\n styles: TemplateStringsArray,\n ...dynamic: never[]\n): string => {\n // the keyframes function is a no-op in the mock\n // as it has no dynamic runtime behavior but only css\n return \"\";\n};\n","/\n Allows to use atomic CSS classes in a styled or css block\n \n @usage\n \n ```tsx\n * import { styled, atoms } from \"next-yak\";\n \n const Button = styled.button<{ $primary?: boolean }>`\n * ${atoms(\"text-teal-600\", \"text-base\", \"rounded-md\")}\n * ${props => props.$primary && atoms(\"shadow-md\")}\n * `;\n * ```\n */\nexport const atoms = (...atoms: string[]) => {\n const className = atoms.join(\" \");\n return () => ({ className });\n};\n"],"mappings":"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","names":["runtime_exports","__export","atoms","css","keyframes","styled","__toCommonJS","import_context","css","styles","args","dynamicCssFunctions","arg","props","i","executeDynamicExpressionRecursively","expression","result","yakComponentSymbol","css","args","classNames","dynamicCssFunctions","style","arg","key","value","props","recursivePropExecution","className","allClassNames","allStyles","i","unwrapProps","fn","result","import_react","import_context","noTheme","yakForwardRef","component","attrsFn","React","yakComponentSymbol","StyledFactory","Component","yakStyled","attrs","isYakComponent","parentYakComponent","parentAttrsFn","mergedAttrsFn","buildRuntimeAttrsProcessor","styles","values","getRuntimeStyles","css","props","ref","theme","combinedProps","combineProps","runtimeStyles","themeAfterAttr","combinedPropsWithoutTheme","propsBeforeFiltering","filteredProps","removeNonDomProperties","mergeClassNames","styled","target","TagName","obj","result","key","a","b","newProps","ownAttrsFn","parentProps","keyframes","styles","dynamic","atoms","className"]}

package/dist/index.d.cts CHANGED Viewed

@@ -1,4 +1,4 @@
-import React, { ReactNode, CSSProperties, FunctionComponent } from 'react';
+import React, { ReactNode, CSSProperties } from 'react';
 interface YakTheme {
 }
@@ -63,6 +63,10 @@ declare function css<TProps = {}>(styles: TemplateStringsArray, ...values: CSSIn
     theme: YakTheme;
 }>[]): ComponentStyles<TProps>;
+/**
+ * Minimal type for a function component that works with next-yak
+ */
+type FunctionComponent<T> = (props: T, context?: any) => React.ReactNode;
 /**
  * All valid html tags
  */

package/dist/index.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import React, { ReactNode, CSSProperties, FunctionComponent } from 'react';
+import React, { ReactNode, CSSProperties } from 'react';
 interface YakTheme {
 }
@@ -63,6 +63,10 @@ declare function css<TProps = {}>(styles: TemplateStringsArray, ...values: CSSIn
     theme: YakTheme;
 }>[]): ComponentStyles<TProps>;
+/**
+ * Minimal type for a function component that works with next-yak
+ */
+type FunctionComponent<T> = (props: T, context?: any) => React.ReactNode;
 /**
  * All valid html tags
  */

package/dist/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{useTheme as G,YakThemeProvider as Q}from"next-yak/context";function h(t,...e){let s=[];for(let r of e)typeof r=="function"&&s.push(r);return s.length===0?{className:"",style:void 0}:r=>{for(let n=0;n<s.length;n++)N(r,s[n]);return{className:"",style:void 0}}}function N(t,e){let s=e(t);for(;typeof s=="function";)s=s(t);return s}var m=Symbol("yak");function d(...t){let e=[],s=[],r={};for(let n of t)if(typeof n=="string")e.push(n);else if(typeof n=="function")s.push(n);else if(typeof n=="object"&&"style"in n)for(let o in n.style){let a=n.style[o];typeof a=="function"?s.push(T=>({style:{[o]:String(A(T,a))}})):r[o]=a}if(s.length===0){let n=e.join(" ");return()=>({className:n,style:r})}return n=>{let o=[...e],a={...r};for(let T=0;T<s.length;T++)b(n,s[T],o,a);return{className:o.join(" "),style:a}}}var b=(t,e,s,r)=>{let n=e(t);for(;n;){if(typeof n=="function"){n=n(t);continue}else if(typeof n=="object"&&("className"in n&&n.className&&s.push(n.className),"style"in n&&n.style))for(let o in n.style)r[o]=n.style[o];break}},A=(t,e)=>{let s=e(t);if(typeof s=="function")return A(t,s);if(process.env.NODE_ENV==="development"&&typeof s!="string"&&typeof s!="number"&&!(s instanceof String))throw new Error(`Dynamic CSS functions must return a string or number but returned ${JSON.stringify(s)}`);return s};import C from"react";import{useTheme as F}from"next-yak/context";var O={},Y=(t,e)=>Object.assign(C.forwardRef(t),{[m]:[t,e]}),R=t=>Object.assign(P(t),{attrs:e=>P(t,e)}),P=(t,e)=>{let s=typeof t!="string"&&m in t,[r,n]=s?t[m]:[],o=v(e,n);return(a,...T)=>{let S=d(a,...T);return Y((p,f)=>{let l=o||S.length?F():O,y="$__attrs"in p?{theme:l,...p}:u({theme:l,...p,$__attrs:!0},o?.({theme:l,...p})),c=S(y),{theme:I,...x}=y,g=I===l?x:y,i=s?g:w(g);return i.className=k(i.className,c.className),i.style="style"in i?{...i.style,...c.style}:c.style,r?r(i,f):(i.ref=f,C.createElement(t,{...i}))},o)}},j=new Proxy(R,{get(t,e){return t(e)}}),w=t=>{let e={};for(let s in t)!s.startsWith("$")&&t[s]!==void 0&&(e[s]=t[s]);return e},k=(t,e)=>{if(!(!t&&!e))return t?e?t+" "+e:t:e},u=(t,e)=>e?(t.className===e.className||!e.className)&&(t.style===e.style||!e.style)?{...t,...e}:{...t,...e,className:k(t.className,e.className),style:{...t.style||{},...e.style||{}}}:t,v=(t,e)=>{let s=t&&(typeof t=="function"?t:()=>t);return s&&e?r=>{let n=e(r);return u(n,s(u(r,n)))}:s||e};var M=(t,...e)=>"";var B=(...t)=>{let e=t.join(" ");return()=>({className:e})};export{Q as YakThemeProvider,B as atoms,h as css,M as keyframes,j as styled,G as useTheme};
+import{useTheme as G,YakThemeProvider as Q}from"next-yak/context";function h(t,...e){let s=[];for(let r of e)typeof r=="function"&&s.push(r);return s.length===0?{className:"",style:void 0}:r=>{for(let n=0;n<s.length;n++)N(r,s[n]);return{className:"",style:void 0}}}function N(t,e){let s=e(t);for(;typeof s=="function";)s=s(t);return s}var m=Symbol("yak");function d(...t){let e=[],s=[],r={};for(let n of t)if(typeof n=="string")e.push(n);else if(typeof n=="function")s.push(n);else if(typeof n=="object"&&"style"in n)for(let o in n.style){let a=n.style[o];typeof a=="function"?s.push(T=>({style:{[o]:String(A(T,a))}})):r[o]=a}if(s.length===0){let n=e.join(" ");return()=>({className:n,style:r})}return n=>{let o=[...e],a={...r};for(let T=0;T<s.length;T++)b(n,s[T],o,a);return{className:o.join(" "),style:a}}}var b=(t,e,s,r)=>{let n=e(t);for(;n;){if(typeof n=="function"){n=n(t);continue}else if(typeof n=="object"&&("className"in n&&n.className&&s.push(n.className),"style"in n&&n.style))for(let o in n.style)r[o]=n.style[o];break}},A=(t,e)=>{let s=e(t);if(typeof s=="function")return A(t,s);if(process.env.NODE_ENV==="development"&&typeof s!="string"&&typeof s!="number"&&!(s instanceof String))throw new Error(`Dynamic CSS functions must return a string or number but returned ${JSON.stringify(s)}`);return s};import C from"react";import{useTheme as F}from"next-yak/context";var O={},R=(t,e)=>Object.assign(C.forwardRef(t),{[m]:[t,e]}),Y=t=>Object.assign(P(t),{attrs:e=>P(t,e)}),P=(t,e)=>{let s=typeof t!="string"&&m in t,[r,n]=s?t[m]:[],o=v(e,n);return(a,...T)=>{let S=d(a,...T);return R((p,f)=>{let l=o||S.length?F():O,c="$__attrs"in p?{theme:l,...p}:u({theme:l,...p,$__attrs:!0},o?.({theme:l,...p})),y=S(c),{theme:I,...x}=c,g=I===l?x:c,i=s?g:w(g);return i.className=k(i.className,y.className),i.style="style"in i?{...i.style,...y.style}:y.style,r?r(i,f):(i.ref=f,C.createElement(t,{...i}))},o)}},j=new Proxy(Y,{get(t,e){return t(e)}}),w=t=>{let e={};for(let s in t)!s.startsWith("$")&&t[s]!==void 0&&(e[s]=t[s]);return e},k=(t,e)=>{if(!(!t&&!e))return t?e?t+" "+e:t:e},u=(t,e)=>e?(t.className===e.className||!e.className)&&(t.style===e.style||!e.style)?{...t,...e}:{...t,...e,className:k(t.className,e.className),style:{...t.style||{},...e.style||{}}}:t,v=(t,e)=>{let s=t&&(typeof t=="function"?t:()=>t);return s&&e?r=>{let n=e(r);return u(n,s(u(r,n)))}:s||e};var M=(t,...e)=>"";var B=(...t)=>{let e=t.join(" ");return()=>({className:e})};export{Q as YakThemeProvider,B as atoms,h as css,M as keyframes,j as styled,G as useTheme};
 //# sourceMappingURL=index.js.map

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../runtime/index.ts","../runtime/mocks/cssLiteral.ts","../runtime/cssLiteral.tsx","../runtime/styled.tsx","../runtime/mocks/keyframes.ts","../runtime/atoms.tsx"],"sourcesContent":["/*\n This file contains the typings for the public API for next-yak and testing mocks\n \n IMPORTANT: In production builds, imports to this file should be replaced by the Babel plugin.\n * If you're seeing this code in a production environment, your build process may not be configured correctly.\n \n Purpose:\n * 1. Provide a test-friendly version of the next-yak API\n * 2. Offer type definitions for the public API\n \n Usage in tests:\n * - Import from \"next-yak\" as usual in your test files\n * - These mock implementations will be used instead of the actual runtime\n \n Warning for production:\n * - If these exports are used in a production build, styles will not be applied correctly\n * - Ensure your build process is configured to use the next-yak Babel plugin\n \n For maintainers:\n * - Keep this API surface in sync with the actual implementation in next-yak/internal\n * - Ensure mock implementations here are suitable for testing purposes\n /\n\n// the following export is not relative as \"next-yak/context\"\n// links to one file for react server components and\n// to another file for classic react components\nexport { useTheme, YakThemeProvider } from \"next-yak/context\";\nexport type { YakTheme } from \"./context/index.d.ts\";\n\nexport { css } from \"./mocks/cssLiteral.js\";\nexport { styled } from \"./mocks/styled.js\";\nexport { keyframes } from \"./mocks/keyframes.js\";\nexport { atoms } from \"./atoms.js\";\n","import { CSSProperties } from \"react\";\nimport type { YakTheme } from \"../index.d.ts\";\nimport { yakComponentSymbol } from \"../cssLiteral.js\";\n\ntype ComponentStyles<TProps> = (props: TProps) => {\n className: string;\n style?: {\n [key: string]: string;\n };\n};\n\nexport type StaticCSSProp = {\n className: string;\n style?: CSSProperties;\n};\n\nexport type CSSInterpolation<TProps> =\n \| string\n \| number\n \| undefined\n \| null\n \| false\n \| ComponentStyles<TProps>\n \| StaticCSSProp\n \| {\n // type only identifier to allow targeting components\n // e.g. styled.svg`${Button}:hover & { fill: red; }`\n [yakComponentSymbol]: any;\n }\n \| ((props: TProps) => CSSInterpolation<TProps>);\n\ntype CSSStyles<TProps = {}> = {\n style: { [key: string]: string \| ((props: TProps) => string) };\n};\n\ntype CSSFunction = <TProps = {}>(\n styles: TemplateStringsArray,\n ...values: CSSInterpolation<TProps & { theme: YakTheme }>[]\n) => ComponentStyles<TProps>;\n\ntype PropsToClassNameFn = (props: unknown) =>\n \| {\n className?: string;\n style?: Record<string, string>;\n }\n \| PropsToClassNameFn;\n\n/\n Allows to use CSS styles in a styled or css block\n \n e.g.\n \n ```tsx\n * const Component = styled.div`\n * color: black;\n * ${({$active}) => $active && css`color: red;`}\n * `;\n * ```\n /\nexport function css(styles: TemplateStringsArray, ...values: []): StaticCSSProp;\nexport function css<TProps = {}>(\n styles: TemplateStringsArray,\n ...values: CSSInterpolation<TProps & { theme: YakTheme }>[]\n): ComponentStyles<TProps>;\nexport function css<TProps>(\n styles: TemplateStringsArray,\n ...args: CSSInterpolation<TProps & { theme: YakTheme }>[]\n): StaticCSSProp \| ComponentStyles<TProps> {\n const dynamicCssFunctions: PropsToClassNameFn[] = [];\n for (const arg of args as Array<string \| CSSFunction \| CSSStyles<any>>) {\n // Dynamic CSS e.g.\n // css`${props => props.active && css`color: red;`}`\n // compiled -> css((props: { active: boolean }) => props.active && css(\"yak31e4\"))\n if (typeof arg === \"function\") {\n dynamicCssFunctions.push(arg as unknown as PropsToClassNameFn);\n }\n }\n if (dynamicCssFunctions.length === 0) {\n return {\n className: \"\",\n style: undefined,\n };\n }\n return (<T>(props: T) => {\n for (let i = 0; i < dynamicCssFunctions.length; i++) {\n // run the dynamic expressions and ignore the return value\n // the execution is important to ensure that the user code is executed\n // the same way as in the real runtime\n executeDynamicExpressionRecursively(props, dynamicCssFunctions[i]);\n }\n return {\n className: \"\",\n style: undefined,\n };\n }) as ComponentStyles<TProps>;\n}\n\nfunction executeDynamicExpressionRecursively(\n props: unknown,\n expression: PropsToClassNameFn,\n) {\n let result = expression(props);\n while (typeof result === \"function\") {\n result = result(props);\n }\n return result;\n}\n","import { CSSProperties } from \"react\";\nimport type { YakTheme } from \"./index.d.ts\";\n\nexport const yakComponentSymbol = Symbol(\"yak\");\n\ntype ComponentStyles<TProps> = (props: TProps) => {\n className: string;\n style?: {\n [key: string]: string;\n };\n};\n\nexport type StaticCSSProp = {\n className: string;\n style?: CSSProperties;\n};\n\nexport type CSSInterpolation<TProps> =\n \| string\n \| number\n \| undefined\n \| null\n \| false\n \| ComponentStyles<TProps>\n \| StaticCSSProp\n \| {\n // type only identifier to allow targeting components\n // e.g. styled.svg`${Button}:hover & { fill: red; }`\n [yakComponentSymbol]: any;\n }\n \| ((props: TProps) => CSSInterpolation<TProps>);\n\ntype CSSStyles<TProps = {}> = {\n style: { [key: string]: string \| ((props: TProps) => string) };\n};\n\ntype CSSFunction = <TProps = {}>(\n styles: TemplateStringsArray,\n ...values: CSSInterpolation<TProps & { theme: YakTheme }>[]\n) => ComponentStyles<TProps>;\n\ntype PropsToClassNameFn = (props: unknown) =>\n \| {\n className?: string;\n style?: Record<string, string>;\n }\n \| PropsToClassNameFn;\n\n/\n css() runtime factory of css``\n \n /!\\ next-yak transpiles css`` and styled``\n \n This changes the typings of the css`` and styled`` functions.\n * During development the user of next-yak wants to work with the\n * typings BEFORE compilation.\n \n Therefore this is only an internal function only and it must be cast to any\n * before exported to the user.\n /\nexport function css(styles: TemplateStringsArray, ...values: []): StaticCSSProp;\nexport function css<TProps = {}>(\n styles: TemplateStringsArray,\n ...values: CSSInterpolation<TProps & { theme: YakTheme }>[]\n): ComponentStyles<TProps>;\nexport function css<TProps>(\n ...args: Array<any>\n): StaticCSSProp \| ComponentStyles<TProps> {\n const classNames: string[] = [];\n const dynamicCssFunctions: PropsToClassNameFn[] = [];\n const style: Record<string, string> = {};\n for (const arg of args as Array<string \| CSSFunction \| CSSStyles<any>>) {\n // A CSS-module class name which got auto generated during build from static css\n // e.g. css`color: red;`\n // compiled -> css(\"yak31e4\")\n if (typeof arg === \"string\") {\n classNames.push(arg);\n }\n // Dynamic CSS e.g.\n // css`${props => props.active && css`color: red;`}`\n // compiled -> css((props: { active: boolean }) => props.active && css(\"yak31e4\"))\n else if (typeof arg === \"function\") {\n dynamicCssFunctions.push(arg as unknown as PropsToClassNameFn);\n }\n // Dynamic CSS with css variables e.g.\n // css`transform: translate(${props => props.x}, ${props => props.y});`\n // compiled -> css(\"yak31e4\", { style: { \"--yakVarX\": props => props.x }, \"--yakVarY\": props => props.y }})\n else if (typeof arg === \"object\" && \"style\" in arg) {\n for (const key in arg.style) {\n const value = arg.style[key];\n if (typeof value === \"function\") {\n dynamicCssFunctions.push((props: unknown) => ({\n style: {\n [key]: String(\n // The value for a css value can be a theme dependent function e.g.:\n // const borderColor = (props: { theme: { mode: \"dark\" \| \"light\" } }) => props.theme === \"dark\" ? \"black\" : \"white\";\n // css`border-color: ${borderColor};`\n // Therefore the value has to be extracted recursively\n recursivePropExecution(props, value),\n ),\n },\n }));\n } else {\n style[key] = value;\n }\n }\n }\n }\n\n // Non Dynamic CSS\n if (dynamicCssFunctions.length === 0) {\n const className = classNames.join(\" \");\n return () => ({ className, style });\n }\n\n return (props: unknown) => {\n const allClassNames: string[] = [...classNames];\n const allStyles: Record<string, string> = { ...style };\n for (let i = 0; i < dynamicCssFunctions.length; i++) {\n unwrapProps(props, dynamicCssFunctions[i], allClassNames, allStyles);\n }\n return {\n className: allClassNames.join(\" \"),\n style: allStyles,\n };\n };\n}\n\n// Dynamic CSS with runtime logic\nconst unwrapProps = (\n props: unknown,\n fn: PropsToClassNameFn,\n classNames: string[],\n style: Record<string, string>,\n) => {\n let result = fn(props);\n while (result) {\n if (typeof result === \"function\") {\n result = result(props);\n continue;\n } else if (typeof result === \"object\") {\n if (\"className\" in result && result.className) {\n classNames.push(result.className);\n }\n if (\"style\" in result && result.style) {\n for (const key in result.style) {\n style[key] = result.style[key];\n }\n }\n }\n break;\n }\n};\n\nconst recursivePropExecution = (\n props: unknown,\n fn: (props: unknown) => any,\n): string \| number => {\n const result = fn(props);\n if (typeof result === \"function\") {\n return recursivePropExecution(props, result);\n }\n if (process.env.NODE_ENV === \"development\") {\n if (\n typeof result !== \"string\" &&\n typeof result !== \"number\" &&\n !(result instanceof String)\n ) {\n throw new Error(\n `Dynamic CSS functions must return a string or number but returned ${JSON.stringify(\n result,\n )}`,\n );\n }\n }\n return result;\n};\n","import { ForwardRefRenderFunction, FunctionComponent } from \"react\";\nimport { CSSInterpolation, css, yakComponentSymbol } from \"./cssLiteral.js\";\nimport React from \"react\";\n\n// the following export is not relative as \"next-yak/context\"\n// links to one file for react server components and\n// to another file for classic react components\nimport { useTheme } from \"next-yak/context\";\nimport type { YakTheme } from \"./context/index.d.ts\";\n\n/* Symbols /\n\n/\n This Symbol is a fake theme which was used instead of the real one from the context\n * to speed up rendering\n /\nconst noTheme: YakTheme = {};\n\n/\n Hack to hide {[yakComponentSymbol]:[parentComponent, parentAttributeFunction]}\n * from the type definition and to deal with ExoticComponents\n /\nconst yakForwardRef: <\n TProps,\n TAttrsIn extends object,\n TAttrsOut extends AttrsMerged<TProps, TAttrsIn>,\n>(\n component: ForwardRefRenderFunction<any, TProps>,\n attrsFn?: (props: any) => any,\n) => YakComponent<TProps, TAttrsIn, TAttrsOut> = (component, attrsFn) =>\n Object.assign(React.forwardRef(component), {\n [yakComponentSymbol]: [component, attrsFn],\n }) as any;\n\n/\n All valid html tags\n /\ntype HtmlTags = keyof JSX.IntrinsicElements;\n\n/\n Return type of the provided props merged with the initial props\n * where the specified props are optional\n /\ntype AttrsMerged<TBaseProps, TIn extends object = {}> = Substitute<\n TBaseProps & { theme: YakTheme },\n TIn\n>;\n\n/\n The attrs function allows to add additional props in a function that receives\n * the current props as argument.\n /\ntype AttrsFunction<\n TBaseProps,\n TIn extends object,\n TOut extends AttrsMerged<TBaseProps, TIn> = AttrsMerged<TBaseProps, TIn>,\n> = (p: Substitute<TBaseProps & { theme: YakTheme }, TIn>) => Partial<TOut>;\n\n/\n The attrs function allows to add additional props to a styled component.\n * The props can be specified as an object or as a function that receives the\n * current props as argument.\n /\ntype Attrs<\n TBaseProps,\n TIn extends object = {},\n TOut extends AttrsMerged<TBaseProps, TIn> = AttrsMerged<TBaseProps, TIn>,\n> = Partial<TOut> \| AttrsFunction<TBaseProps, TIn, TOut>;\n\n//\n// The `styled()` and `styled.` API\n//\n// The API design is inspired by styled-components:\n// https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/constructors/styled.tsx\n// https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/models/StyledComponent.ts\n//\nconst StyledFactory = <T,>(Component: HtmlTags \| FunctionComponent<T>) =>\n Object.assign(yakStyled(Component), {\n attrs: <\n TAttrsIn extends object = {},\n TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>,\n >(\n attrs: Attrs<T, TAttrsIn, TAttrsOut>,\n ) => yakStyled<T, TAttrsIn, TAttrsOut>(Component, attrs),\n });\n\n/\n A yak component has a special symbol attached to it that allows to\n * target the component from a child component and to correctly handle the attrs function (if any).\n * e.g. styled.svg`${Button}:hover & { fill: red; }` or styled(Button)`color: red;`\n /\ntype YakComponent<\n T,\n TAttrsIn extends object = {},\n TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>,\n> = FunctionComponent<T> & {\n [yakComponentSymbol]: [\n FunctionComponent<T>,\n AttrsFunction<T, TAttrsIn, TAttrsOut>,\n ];\n};\n\nconst yakStyled = <\n T,\n TAttrsIn extends object = {},\n TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>,\n>(\n Component:\n \| FunctionComponent<T>\n \| YakComponent<T, TAttrsIn, TAttrsOut>\n \| HtmlTags,\n attrs?: Attrs<T, TAttrsIn, TAttrsOut>,\n) => {\n const isYakComponent =\n typeof Component !== \"string\" && yakComponentSymbol in Component;\n\n // if the component that is wrapped is a yak component, we can extract it to render the underlying component directly\n // and we can also extract the attrs function to merge it with the current attrs function so that the sequence of\n // the attrs functions is preserved\n const [parentYakComponent, parentAttrsFn] = isYakComponent\n ? Component[yakComponentSymbol]\n : [];\n\n const mergedAttrsFn = buildRuntimeAttrsProcessor(attrs, parentAttrsFn);\n\n return <TCSSProps extends object = {}>(\n styles: TemplateStringsArray,\n ...values: Array<\n CSSInterpolation<T & NoInfer<TCSSProps> & { theme: YakTheme }>\n >\n ) => {\n const getRuntimeStyles = css(styles, ...values);\n const yak = (props: Substitute<TCSSProps & T, TAttrsIn>, ref: unknown) => {\n // if the css component does not require arguments\n // it can be called without arguments and we skip calling useTheme()\n //\n // `attrsFn \|\| getRuntimeStyles.length` is NOT against the rule of hooks as\n // getRuntimeStyles and attrsFn are constants defined outside of the component\n //\n // for example\n //\n // const Button = styled.button`color: red;`\n // ^ does not need to have access to theme, so we skip calling useTheme()\n //\n // const Button = styled.button`${({ theme }) => css`color: ${theme.color};`}`\n // ^ must be have access to theme, so we call useTheme()\n const theme =\n mergedAttrsFn \|\| getRuntimeStyles.length ? useTheme() : noTheme;\n\n // The first components which is not wrapped in a yak component will execute all attrs functions\n // starting from the innermost yak component to the outermost yak component (itself)\n const combinedProps =\n \"$__attrs\" in props\n ? // if the props already contain the $__attrs key, we assume that the props have already been processed\n // and skip processing the attrs again.\n // e.g. const Child = styled(Parent)`color: red;`\n // We process the attrs once in the child (with all attrs functions merged (including the one from the child))\n // and in the subsequent call in the parent we skip processing the attrs again\n {\n theme,\n ...props,\n }\n : // overwrite and merge the current props with the processed attrs\n combineProps(\n {\n theme,\n ...(props as {\n className?: string;\n style?: React.CSSProperties;\n }),\n // mark the props as processed\n $__attrs: true,\n },\n mergedAttrsFn?.({ theme, ...props } as Substitute<\n T & { theme: YakTheme },\n TAttrsIn\n >),\n );\n // execute all functions inside the style literal\n // e.g. styled.button`color: ${props => props.color};`\n const runtimeStyles = getRuntimeStyles(combinedProps as T & TCSSProps);\n\n // delete the yak theme from the props\n // this must happen after the runtimeStyles are calculated\n // prevents passing the theme prop to the DOM element of a styled component\n const { theme: themeAfterAttr, ...combinedPropsWithoutTheme } =\n combinedProps as { theme?: unknown };\n const propsBeforeFiltering =\n themeAfterAttr === theme ? combinedPropsWithoutTheme : combinedProps;\n\n // remove all props that start with a $ sign for string components e.g. \"button\" or \"div\"\n // so that they are not passed to the DOM element\n const filteredProps = !isYakComponent\n ? removeNonDomProperties(propsBeforeFiltering)\n : propsBeforeFiltering;\n\n // yak provides a className and style prop that needs to be merged with the\n // user provided className and style prop\n (filteredProps as { className?: string }).className = mergeClassNames(\n (filteredProps as { className?: string }).className,\n runtimeStyles.className,\n );\n (filteredProps as { style?: React.CSSProperties }).style =\n \"style\" in filteredProps\n ? {\n ...(filteredProps as { style?: React.CSSProperties }).style,\n ...runtimeStyles.style,\n }\n : runtimeStyles.style;\n // if the styled(Component) syntax is used and the component is a yak component\n // we can call the yak function directly to avoid an unnecessary wrapper with an additional\n // forwardRef call\n if (parentYakComponent) {\n return parentYakComponent(filteredProps as T, ref);\n }\n (filteredProps as { ref?: unknown }).ref = ref;\n return <Component {...(filteredProps as any)} />;\n };\n return yakForwardRef(yak, mergedAttrsFn);\n };\n};\n\n/\n Type for the proxy object returned by `styled` that allows to\n * access all html tags as properties.\n /\ntype StyledLiteral<T> = <TCSSProps>(\n styles: TemplateStringsArray,\n ...values: Array<\n CSSInterpolation<\n T &\n // don't allow inference from types in the tagged template literal\n // additional benefit is that destruction is now typed and provides hints\n NoInfer<TCSSProps> & { theme: YakTheme }\n >\n >\n) => YakComponent<TCSSProps & T>;\n\n/\n The `styled` method works perfectly on all of your own or any third-party component,\n * as long as they attach the passed className prop to a DOM element.\n \n @usage\n \n ```tsx\n * const StyledLink = styled(Link)`\n * color: #BF4F74;\n * font-weight: bold;\n * `;\n * ```\n /\nexport const styled = new Proxy(\n StyledFactory as typeof StyledFactory & {\n [Tag in HtmlTags]: StyledLiteral<JSX.IntrinsicElements[Tag]> & {\n attrs: <\n TAttrsIn extends object = {},\n TAttrsOut extends AttrsMerged<\n JSX.IntrinsicElements[Tag],\n TAttrsIn\n > = AttrsMerged<JSX.IntrinsicElements[Tag], TAttrsIn>,\n >(\n attrs: Attrs<JSX.IntrinsicElements[Tag], TAttrsIn, TAttrsOut>,\n ) => StyledLiteral<Substitute<JSX.IntrinsicElements[Tag], TAttrsIn>>;\n };\n },\n {\n get(target, TagName: keyof JSX.IntrinsicElements) {\n return target(TagName);\n },\n },\n);\n\n/\n Remove all entries that start with a $ sign\n \n This allows to have props that are used for internal stylingen purposes\n * but are not be passed to the DOM element\n /\nconst removeNonDomProperties = <T extends Record<string, unknown>>(obj: T) => {\n const result = {} as T;\n for (const key in obj) {\n if (!key.startsWith(\"$\") && obj[key] !== undefined) {\n result[key] = obj[key];\n }\n }\n return result;\n};\n\n// util function to merge class names, as they are concatenated with a space\nconst mergeClassNames = (a?: string, b?: string) => {\n if (!a && !b) return undefined;\n if (!a) return b;\n if (!b) return a;\n return a + \" \" + b;\n};\n\n/\n merge props and processed props (including class names and styles)\n * e.g.:\\\n * `{ className: \"a\", foo: 1 }` and `{ className: \"b\", bar: 2 }` \\\n * => `{ className: \"a b\", foo: 1, bar: 2 }`\n /\nconst combineProps = <\n T extends {\n className?: string;\n style?: React.CSSProperties;\n },\n TOther extends\n \| {\n className?: string;\n style?: React.CSSProperties;\n }\n \| null\n \| undefined,\n>(\n props: T,\n newProps: TOther,\n) =>\n newProps\n ? (props.className === newProps.className \|\| !newProps.className) &&\n (props.style === newProps.style \|\| !newProps.style)\n ? // shortcut if no style and class merging is necessary\n {\n ...props,\n ...newProps,\n }\n : // merge class names and styles\n {\n ...props,\n ...newProps,\n className: mergeClassNames(props.className, newProps.className),\n style: { ...(props.style \|\| {}), ...(newProps.style \|\| {}) },\n }\n : // if no new props are provided, no merging is necessary\n props;\n\n// util type to remove properties from an object\ntype FastOmit<T extends object, U extends string \| number \| symbol> = {\n [K in keyof T as K extends U ? never : K]: T[K];\n};\n\n// util type to merge two objects\n// if a property is present in both objects the property from B is used\nexport type Substitute<A extends object, B extends object> = FastOmit<\n A,\n keyof B\n> &\n B;\n\n/\n Merges the attrs function of the current component with the attrs function of the parent component\n * in order to preserve the sequence of the attrs functions.\n * Note: In theory, the parentAttrsFn can have different types for TAttrsIn and TAttrsOut\n * but as this is only used internally, we can ignore and simplify this case\n * @param attrs The attrs object or function of the current component (if any)\n * @param parentAttrsFn The attrs function of the parent/wrapped component (if any)\n * @returns A function that receives the props and returns the transformed props\n /\nconst buildRuntimeAttrsProcessor = <\n T,\n TAttrsIn extends object,\n TAttrsOut extends AttrsMerged<T, TAttrsIn>,\n>(\n attrs?: Attrs<T, TAttrsIn, TAttrsOut>,\n parentAttrsFn?: AttrsFunction<T, TAttrsIn, TAttrsOut>,\n): AttrsFunction<T, TAttrsIn, TAttrsOut> \| undefined => {\n const ownAttrsFn =\n attrs && (typeof attrs === \"function\" ? attrs : () => attrs);\n\n if (ownAttrsFn && parentAttrsFn) {\n return (props) => {\n const parentProps = parentAttrsFn(props);\n\n // overwrite and merge the parent props with the props received from the attrs function\n // after they went through the parent attrs function.\n //\n // This makes sure the linearity of the attrs functions is preserved and all attrs function receive\n // the whole props object calculated from the previous attrs functions\n return combineProps(\n parentProps,\n ownAttrsFn(combineProps(props, parentProps)),\n );\n };\n }\n\n return ownAttrsFn \|\| parentAttrsFn;\n};\n","/\n Allows to use CSS keyframe animations in a styled or css block\n \n @usage\n \n ```tsx\n * import { styled, keyframes } from \"next-yak\";\n \n const rotate = keyframes`\n * from {\n * transform: rotate(0deg);\n * }\n * to {\n * transform: rotate(360deg);\n * }\n * `;\n \n const Spinner = styled.div`\n * animation: ${rotate} 1s linear infinite;\n * `;\n * ```\n /\nexport const keyframes = (\n styles: TemplateStringsArray,\n ...dynamic: never[]\n): string => {\n // the keyframes function is a no-op in the mock\n // as it has no dynamic runtime behavior but only css\n return \"\";\n};\n","/\n Allows to use atomic CSS classes in a styled or css block\n \n @usage\n \n ```tsx\n * import { styled, atoms } from \"next-yak\";\n \n const Button = styled.button<{ $primary?: boolean }>`\n * ${atoms(\"text-teal-600\", \"text-base\", \"rounded-md\")}\n * ${props => props.$primary && atoms(\"shadow-md\")}\n * `;\n * ```\n */\nexport const atoms = (...atoms: string[]) => {\n const className = atoms.join(\" \");\n return () => ({ className });\n};\n"],"mappings":"AA0BA,OAAS,YAAAA,EAAU,oBAAAC,MAAwB,mBCsCpC,SAASC,EACdC,KACGC,EACsC,CACzC,IAAMC,EAA4C,CAAC,EACnD,QAAWC,KAAOF,EAIZ,OAAOE,GAAQ,YACjBD,EAAoB,KAAKC,CAAoC,EAGjE,OAAID,EAAoB,SAAW,EAC1B,CACL,UAAW,GACX,MAAO,MACT,EAEUE,GAAa,CACvB,QAASC,EAAI,EAAGA,EAAIH,EAAoB,OAAQG,IAI9CC,EAAoCF,EAAOF,EAAoBG,CAAC,CAAC,EAEnE,MAAO,CACL,UAAW,GACX,MAAO,MACT,CACF,CACF,CAEA,SAASC,EACPF,EACAG,EACA,CACA,IAAIC,EAASD,EAAWH,CAAK,EAC7B,KAAO,OAAOI,GAAW,YACvBA,EAASA,EAAOJ,CAAK,EAEvB,OAAOI,CACT,CCvGO,IAAMC,EAAqB,OAAO,KAAK,EA8DvC,SAASC,KACXC,EACsC,CACzC,IAAMC,EAAuB,CAAC,EACxBC,EAA4C,CAAC,EAC7CC,EAAgC,CAAC,EACvC,QAAWC,KAAOJ,EAIhB,GAAI,OAAOI,GAAQ,SACjBH,EAAW,KAAKG,CAAG,UAKZ,OAAOA,GAAQ,WACtBF,EAAoB,KAAKE,CAAoC,UAKtD,OAAOA,GAAQ,UAAY,UAAWA,EAC7C,QAAWC,KAAOD,EAAI,MAAO,CAC3B,IAAME,EAAQF,EAAI,MAAMC,CAAG,EACvB,OAAOC,GAAU,WACnBJ,EAAoB,KAAMK,IAAoB,CAC5C,MAAO,CACL,CAACF,CAAG,EAAG,OAKLG,EAAuBD,EAAOD,CAAK,CACrC,CACF,CACF,EAAE,EAEFH,EAAME,CAAG,EAAIC,CAEjB,CAKJ,GAAIJ,EAAoB,SAAW,EAAG,CACpC,IAAMO,EAAYR,EAAW,KAAK,GAAG,EACrC,MAAO,KAAO,CAAE,UAAAQ,EAAW,MAAAN,CAAM,EACnC,CAEA,OAAQI,GAAmB,CACzB,IAAMG,EAA0B,CAAC,GAAGT,CAAU,EACxCU,EAAoC,CAAE,GAAGR,CAAM,EACrD,QAASS,EAAI,EAAGA,EAAIV,EAAoB,OAAQU,IAC9CC,EAAYN,EAAOL,EAAoBU,CAAC,EAAGF,EAAeC,CAAS,EAErE,MAAO,CACL,UAAWD,EAAc,KAAK,GAAG,EACjC,MAAOC,CACT,CACF,CACF,CAGA,IAAME,EAAc,CAClBN,EACAO,EACAb,EACAE,IACG,CACH,IAAIY,EAASD,EAAGP,CAAK,EACrB,KAAOQ,GAAQ,CACb,GAAI,OAAOA,GAAW,WAAY,CAChCA,EAASA,EAAOR,CAAK,EACrB,QACF,SAAW,OAAOQ,GAAW,WACvB,cAAeA,GAAUA,EAAO,WAClCd,EAAW,KAAKc,EAAO,SAAS,EAE9B,UAAWA,GAAUA,EAAO,OAC9B,QAAWV,KAAOU,EAAO,MACvBZ,EAAME,CAAG,EAAIU,EAAO,MAAMV,CAAG,EAInC,KACF,CACF,EAEMG,EAAyB,CAC7BD,EACAO,IACoB,CACpB,IAAMC,EAASD,EAAGP,CAAK,EACvB,GAAI,OAAOQ,GAAW,WACpB,OAAOP,EAAuBD,EAAOQ,CAAM,EAE7C,GAAI,QAAQ,IAAI,WAAa,eAEzB,OAAOA,GAAW,UAClB,OAAOA,GAAW,UAClB,EAAEA,aAAkB,QAEpB,MAAM,IAAI,MACR,qEAAqE,KAAK,UACxEA,CACF,CAAC,EACH,EAGJ,OAAOA,CACT,EC9KA,OAAOC,MAAW,QAKlB,OAAS,YAAAC,MAAgB,mBASzB,IAAMC,EAAoB,CAAC,EAMrBC,EAO2C,CAACC,EAAWC,IAC3D,OAAO,OAAOL,EAAM,WAAWI,CAAS,EAAG,CACzC,CAACE,CAAkB,EAAG,CAACF,EAAWC,CAAO,CAC3C,CAAC,EA4CGE,EAAqBC,GACzB,OAAO,OAAOC,EAAUD,CAAS,EAAG,CAClC,MAIEE,GACGD,EAAkCD,EAAWE,CAAK,CACzD,CAAC,EAkBGD,EAAY,CAKhBD,EAIAE,IACG,CACH,IAAMC,EACJ,OAAOH,GAAc,UAAYF,KAAsBE,EAKnD,CAACI,EAAoBC,CAAa,EAAIF,EACxCH,EAAUF,CAAkB,EAC5B,CAAC,EAECQ,EAAgBC,EAA2BL,EAAOG,CAAa,EAErE,MAAO,CACLG,KACGC,IAGA,CACH,IAAMC,EAAmBC,EAAIH,EAAQ,GAAGC,CAAM,EAuF9C,OAAOd,EAtFK,CAACiB,EAA4CC,IAAiB,CAcxE,IAAMC,EACJR,GAAiBI,EAAiB,OAASjB,EAAS,EAAIC,EAIpDqB,EACJ,aAAcH,EAMV,CACE,MAAAE,EACA,GAAGF,CACL,EAEAI,EACE,CACE,MAAAF,EACA,GAAIF,EAKJ,SAAU,EACZ,EACAN,IAAgB,CAAE,MAAAQ,EAAO,GAAGF,CAAM,CAGjC,CACH,EAGAK,EAAgBP,EAAiBK,CAA8B,EAK/D,CAAE,MAAOG,EAAgB,GAAGC,CAA0B,EAC1DJ,EACIK,EACJF,IAAmBJ,EAAQK,EAA4BJ,EAInDM,EAAiBlB,EAEnBiB,EADAE,EAAuBF,CAAoB,EAmB/C,OAdCC,EAAyC,UAAYE,EACnDF,EAAyC,UAC1CJ,EAAc,SAChB,EACCI,EAAkD,MACjD,UAAWA,EACP,CACE,GAAIA,EAAkD,MACtD,GAAGJ,EAAc,KACnB,EACAA,EAAc,MAIhBb,EACKA,EAAmBiB,EAAoBR,CAAG,GAElDQ,EAAoC,IAAMR,EACpCrB,EAAA,cAACQ,EAAA,CAAW,GAAIqB,EAAuB,EAChD,EAC0Bf,CAAa,CACzC,CACF,EA+BakB,EAAS,IAAI,MACxBzB,EAaA,CACE,IAAI0B,EAAQC,EAAsC,CAChD,OAAOD,EAAOC,CAAO,CACvB,CACF,CACF,EAQMJ,EAA6DK,GAAW,CAC5E,IAAMC,EAAS,CAAC,EAChB,QAAWC,KAAOF,EACZ,CAACE,EAAI,WAAW,GAAG,GAAKF,EAAIE,CAAG,IAAM,SACvCD,EAAOC,CAAG,EAAIF,EAAIE,CAAG,GAGzB,OAAOD,CACT,EAGML,EAAkB,CAACO,EAAYC,IAAe,CAClD,GAAI,GAACD,GAAK,CAACC,GACX,OAAKD,EACAC,EACED,EAAI,IAAMC,EADFD,EADAC,CAGjB,EAQMf,EAAe,CAanBJ,EACAoB,IAEAA,GACKpB,EAAM,YAAcoB,EAAS,WAAa,CAACA,EAAS,aACpDpB,EAAM,QAAUoB,EAAS,OAAS,CAACA,EAAS,OAE3C,CACE,GAAGpB,EACH,GAAGoB,CACL,EAEA,CACE,GAAGpB,EACH,GAAGoB,EACH,UAAWT,EAAgBX,EAAM,UAAWoB,EAAS,SAAS,EAC9D,MAAO,CAAE,GAAIpB,EAAM,OAAS,CAAC,EAAI,GAAIoB,EAAS,OAAS,CAAC,CAAG,CAC7D,EAEFpB,EAwBAL,EAA6B,CAKjCL,EACAG,IACsD,CACtD,IAAM4B,EACJ/B,IAAU,OAAOA,GAAU,WAAaA,EAAQ,IAAMA,GAExD,OAAI+B,GAAc5B,EACRO,GAAU,CAChB,IAAMsB,EAAc7B,EAAcO,CAAK,EAOvC,OAAOI,EACLkB,EACAD,EAAWjB,EAAaJ,EAAOsB,CAAW,CAAC,CAC7C,CACF,EAGKD,GAAc5B,CACvB,EC5WO,IAAM8B,EAAY,CACvBC,KACGC,IAII,GCdF,IAAMC,EAAQ,IAAIA,IAAoB,CAC3C,IAAMC,EAAYD,EAAM,KAAK,GAAG,EAChC,MAAO,KAAO,CAAE,UAAAC,CAAU,EAC5B","names":["useTheme","YakThemeProvider","css","styles","args","dynamicCssFunctions","arg","props","i","executeDynamicExpressionRecursively","expression","result","yakComponentSymbol","css","args","classNames","dynamicCssFunctions","style","arg","key","value","props","recursivePropExecution","className","allClassNames","allStyles","i","unwrapProps","fn","result","React","useTheme","noTheme","yakForwardRef","component","attrsFn","yakComponentSymbol","StyledFactory","Component","yakStyled","attrs","isYakComponent","parentYakComponent","parentAttrsFn","mergedAttrsFn","buildRuntimeAttrsProcessor","styles","values","getRuntimeStyles","css","props","ref","theme","combinedProps","combineProps","runtimeStyles","themeAfterAttr","combinedPropsWithoutTheme","propsBeforeFiltering","filteredProps","removeNonDomProperties","mergeClassNames","styled","target","TagName","obj","result","key","a","b","newProps","ownAttrsFn","parentProps","keyframes","styles","dynamic","atoms","className"]}
1	+ {"version":3,"sources":["../runtime/index.ts","../runtime/mocks/cssLiteral.ts","../runtime/cssLiteral.tsx","../runtime/styled.tsx","../runtime/mocks/keyframes.ts","../runtime/atoms.tsx"],"sourcesContent":["/*\n This file contains the typings for the public API for next-yak and testing mocks\n \n IMPORTANT: In production builds, imports to this file should be replaced by the Babel plugin.\n * If you're seeing this code in a production environment, your build process may not be configured correctly.\n \n Purpose:\n * 1. Provide a test-friendly version of the next-yak API\n * 2. Offer type definitions for the public API\n \n Usage in tests:\n * - Import from \"next-yak\" as usual in your test files\n * - These mock implementations will be used instead of the actual runtime\n \n Warning for production:\n * - If these exports are used in a production build, styles will not be applied correctly\n * - Ensure your build process is configured to use the next-yak Babel plugin\n \n For maintainers:\n * - Keep this API surface in sync with the actual implementation in next-yak/internal\n * - Ensure mock implementations here are suitable for testing purposes\n /\n\n// the following export is not relative as \"next-yak/context\"\n// links to one file for react server components and\n// to another file for classic react components\nexport { useTheme, YakThemeProvider } from \"next-yak/context\";\nexport type { YakTheme } from \"./context/index.d.ts\";\n\nexport { css } from \"./mocks/cssLiteral.js\";\nexport { styled } from \"./mocks/styled.js\";\nexport { keyframes } from \"./mocks/keyframes.js\";\nexport { atoms } from \"./atoms.js\";\n","import { CSSProperties } from \"react\";\nimport type { YakTheme } from \"../index.d.ts\";\nimport { yakComponentSymbol } from \"../cssLiteral.js\";\n\ntype ComponentStyles<TProps> = (props: TProps) => {\n className: string;\n style?: {\n [key: string]: string;\n };\n};\n\nexport type StaticCSSProp = {\n className: string;\n style?: CSSProperties;\n};\n\nexport type CSSInterpolation<TProps> =\n \| string\n \| number\n \| undefined\n \| null\n \| false\n \| ComponentStyles<TProps>\n \| StaticCSSProp\n \| {\n // type only identifier to allow targeting components\n // e.g. styled.svg`${Button}:hover & { fill: red; }`\n [yakComponentSymbol]: any;\n }\n \| ((props: TProps) => CSSInterpolation<TProps>);\n\ntype CSSStyles<TProps = {}> = {\n style: { [key: string]: string \| ((props: TProps) => string) };\n};\n\ntype CSSFunction = <TProps = {}>(\n styles: TemplateStringsArray,\n ...values: CSSInterpolation<TProps & { theme: YakTheme }>[]\n) => ComponentStyles<TProps>;\n\ntype PropsToClassNameFn = (props: unknown) =>\n \| {\n className?: string;\n style?: Record<string, string>;\n }\n \| PropsToClassNameFn;\n\n/\n Allows to use CSS styles in a styled or css block\n \n e.g.\n \n ```tsx\n * const Component = styled.div`\n * color: black;\n * ${({$active}) => $active && css`color: red;`}\n * `;\n * ```\n /\nexport function css(styles: TemplateStringsArray, ...values: []): StaticCSSProp;\nexport function css<TProps = {}>(\n styles: TemplateStringsArray,\n ...values: CSSInterpolation<TProps & { theme: YakTheme }>[]\n): ComponentStyles<TProps>;\nexport function css<TProps>(\n styles: TemplateStringsArray,\n ...args: CSSInterpolation<TProps & { theme: YakTheme }>[]\n): StaticCSSProp \| ComponentStyles<TProps> {\n const dynamicCssFunctions: PropsToClassNameFn[] = [];\n for (const arg of args as Array<string \| CSSFunction \| CSSStyles<any>>) {\n // Dynamic CSS e.g.\n // css`${props => props.active && css`color: red;`}`\n // compiled -> css((props: { active: boolean }) => props.active && css(\"yak31e4\"))\n if (typeof arg === \"function\") {\n dynamicCssFunctions.push(arg as unknown as PropsToClassNameFn);\n }\n }\n if (dynamicCssFunctions.length === 0) {\n return {\n className: \"\",\n style: undefined,\n };\n }\n return (<T>(props: T) => {\n for (let i = 0; i < dynamicCssFunctions.length; i++) {\n // run the dynamic expressions and ignore the return value\n // the execution is important to ensure that the user code is executed\n // the same way as in the real runtime\n executeDynamicExpressionRecursively(props, dynamicCssFunctions[i]);\n }\n return {\n className: \"\",\n style: undefined,\n };\n }) as ComponentStyles<TProps>;\n}\n\nfunction executeDynamicExpressionRecursively(\n props: unknown,\n expression: PropsToClassNameFn,\n) {\n let result = expression(props);\n while (typeof result === \"function\") {\n result = result(props);\n }\n return result;\n}\n","import { CSSProperties } from \"react\";\nimport type { YakTheme } from \"./index.d.ts\";\n\nexport const yakComponentSymbol = Symbol(\"yak\");\n\ntype ComponentStyles<TProps> = (props: TProps) => {\n className: string;\n style?: {\n [key: string]: string;\n };\n};\n\nexport type StaticCSSProp = {\n className: string;\n style?: CSSProperties;\n};\n\nexport type CSSInterpolation<TProps> =\n \| string\n \| number\n \| undefined\n \| null\n \| false\n \| ComponentStyles<TProps>\n \| StaticCSSProp\n \| {\n // type only identifier to allow targeting components\n // e.g. styled.svg`${Button}:hover & { fill: red; }`\n [yakComponentSymbol]: any;\n }\n \| ((props: TProps) => CSSInterpolation<TProps>);\n\ntype CSSStyles<TProps = {}> = {\n style: { [key: string]: string \| ((props: TProps) => string) };\n};\n\ntype CSSFunction = <TProps = {}>(\n styles: TemplateStringsArray,\n ...values: CSSInterpolation<TProps & { theme: YakTheme }>[]\n) => ComponentStyles<TProps>;\n\ntype PropsToClassNameFn = (props: unknown) =>\n \| {\n className?: string;\n style?: Record<string, string>;\n }\n \| PropsToClassNameFn;\n\n/\n css() runtime factory of css``\n \n /!\\ next-yak transpiles css`` and styled``\n \n This changes the typings of the css`` and styled`` functions.\n * During development the user of next-yak wants to work with the\n * typings BEFORE compilation.\n \n Therefore this is only an internal function only and it must be cast to any\n * before exported to the user.\n /\nexport function css(styles: TemplateStringsArray, ...values: []): StaticCSSProp;\nexport function css<TProps = {}>(\n styles: TemplateStringsArray,\n ...values: CSSInterpolation<TProps & { theme: YakTheme }>[]\n): ComponentStyles<TProps>;\nexport function css<TProps>(\n ...args: Array<any>\n): StaticCSSProp \| ComponentStyles<TProps> {\n const classNames: string[] = [];\n const dynamicCssFunctions: PropsToClassNameFn[] = [];\n const style: Record<string, string> = {};\n for (const arg of args as Array<string \| CSSFunction \| CSSStyles<any>>) {\n // A CSS-module class name which got auto generated during build from static css\n // e.g. css`color: red;`\n // compiled -> css(\"yak31e4\")\n if (typeof arg === \"string\") {\n classNames.push(arg);\n }\n // Dynamic CSS e.g.\n // css`${props => props.active && css`color: red;`}`\n // compiled -> css((props: { active: boolean }) => props.active && css(\"yak31e4\"))\n else if (typeof arg === \"function\") {\n dynamicCssFunctions.push(arg as unknown as PropsToClassNameFn);\n }\n // Dynamic CSS with css variables e.g.\n // css`transform: translate(${props => props.x}, ${props => props.y});`\n // compiled -> css(\"yak31e4\", { style: { \"--yakVarX\": props => props.x }, \"--yakVarY\": props => props.y }})\n else if (typeof arg === \"object\" && \"style\" in arg) {\n for (const key in arg.style) {\n const value = arg.style[key];\n if (typeof value === \"function\") {\n dynamicCssFunctions.push((props: unknown) => ({\n style: {\n [key]: String(\n // The value for a css value can be a theme dependent function e.g.:\n // const borderColor = (props: { theme: { mode: \"dark\" \| \"light\" } }) => props.theme === \"dark\" ? \"black\" : \"white\";\n // css`border-color: ${borderColor};`\n // Therefore the value has to be extracted recursively\n recursivePropExecution(props, value),\n ),\n },\n }));\n } else {\n style[key] = value;\n }\n }\n }\n }\n\n // Non Dynamic CSS\n if (dynamicCssFunctions.length === 0) {\n const className = classNames.join(\" \");\n return () => ({ className, style });\n }\n\n return (props: unknown) => {\n const allClassNames: string[] = [...classNames];\n const allStyles: Record<string, string> = { ...style };\n for (let i = 0; i < dynamicCssFunctions.length; i++) {\n unwrapProps(props, dynamicCssFunctions[i], allClassNames, allStyles);\n }\n return {\n className: allClassNames.join(\" \"),\n style: allStyles,\n };\n };\n}\n\n// Dynamic CSS with runtime logic\nconst unwrapProps = (\n props: unknown,\n fn: PropsToClassNameFn,\n classNames: string[],\n style: Record<string, string>,\n) => {\n let result = fn(props);\n while (result) {\n if (typeof result === \"function\") {\n result = result(props);\n continue;\n } else if (typeof result === \"object\") {\n if (\"className\" in result && result.className) {\n classNames.push(result.className);\n }\n if (\"style\" in result && result.style) {\n for (const key in result.style) {\n style[key] = result.style[key];\n }\n }\n }\n break;\n }\n};\n\nconst recursivePropExecution = (\n props: unknown,\n fn: (props: unknown) => any,\n): string \| number => {\n const result = fn(props);\n if (typeof result === \"function\") {\n return recursivePropExecution(props, result);\n }\n if (process.env.NODE_ENV === \"development\") {\n if (\n typeof result !== \"string\" &&\n typeof result !== \"number\" &&\n !(result instanceof String)\n ) {\n throw new Error(\n `Dynamic CSS functions must return a string or number but returned ${JSON.stringify(\n result,\n )}`,\n );\n }\n }\n return result;\n};\n","import { ForwardRefRenderFunction } from \"react\";\nimport { CSSInterpolation, css, yakComponentSymbol } from \"./cssLiteral.js\";\nimport React from \"react\";\n\n// the following export is not relative as \"next-yak/context\"\n// links to one file for react server components and\n// to another file for classic react components\nimport { useTheme } from \"next-yak/context\";\nimport type { YakTheme } from \"./context/index.d.ts\";\n\n/* Symbols /\n\n/\n This Symbol is a fake theme which was used instead of the real one from the context\n * to speed up rendering\n /\nconst noTheme: YakTheme = {};\n\n/\n Hack to hide {[yakComponentSymbol]:[parentComponent, parentAttributeFunction]}\n * from the type definition and to deal with ExoticComponents\n /\nconst yakForwardRef: <\n TProps,\n TAttrsIn extends object,\n TAttrsOut extends AttrsMerged<TProps, TAttrsIn>,\n>(\n component: ForwardRefRenderFunction<any, TProps>,\n attrsFn?: (props: any) => any,\n) => YakComponent<TProps, TAttrsIn, TAttrsOut> = (component, attrsFn) =>\n Object.assign(React.forwardRef(component), {\n [yakComponentSymbol]: [component, attrsFn],\n }) as any;\n\n/\n Minimal type for a function component that works with next-yak\n /\ntype FunctionComponent<T> = (props: T, context?: any) => React.ReactNode;\n\n/\n All valid html tags\n /\ntype HtmlTags = keyof JSX.IntrinsicElements;\n\n/\n Return type of the provided props merged with the initial props\n * where the specified props are optional\n /\ntype AttrsMerged<TBaseProps, TIn extends object = {}> = Substitute<\n TBaseProps & { theme: YakTheme },\n TIn\n>;\n\n/\n The attrs function allows to add additional props in a function that receives\n * the current props as argument.\n /\ntype AttrsFunction<\n TBaseProps,\n TIn extends object,\n TOut extends AttrsMerged<TBaseProps, TIn> = AttrsMerged<TBaseProps, TIn>,\n> = (p: Substitute<TBaseProps & { theme: YakTheme }, TIn>) => Partial<TOut>;\n\n/\n The attrs function allows to add additional props to a styled component.\n * The props can be specified as an object or as a function that receives the\n * current props as argument.\n /\ntype Attrs<\n TBaseProps,\n TIn extends object = {},\n TOut extends AttrsMerged<TBaseProps, TIn> = AttrsMerged<TBaseProps, TIn>,\n> = Partial<TOut> \| AttrsFunction<TBaseProps, TIn, TOut>;\n\n//\n// The `styled()` and `styled.` API\n//\n// The API design is inspired by styled-components:\n// https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/constructors/styled.tsx\n// https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/models/StyledComponent.ts\n//\nconst StyledFactory = <T,>(Component: HtmlTags \| FunctionComponent<T>) =>\n Object.assign(yakStyled(Component), {\n attrs: <\n TAttrsIn extends object = {},\n TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>,\n >(\n attrs: Attrs<T, TAttrsIn, TAttrsOut>,\n ) => yakStyled<T, TAttrsIn, TAttrsOut>(Component, attrs),\n });\n\n/\n A yak component has a special symbol attached to it that allows to\n * target the component from a child component and to correctly handle the attrs function (if any).\n * e.g. styled.svg`${Button}:hover & { fill: red; }` or styled(Button)`color: red;`\n /\ntype YakComponent<\n T,\n TAttrsIn extends object = {},\n TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>,\n> = FunctionComponent<T> & {\n [yakComponentSymbol]: [\n FunctionComponent<T>,\n AttrsFunction<T, TAttrsIn, TAttrsOut>,\n ];\n};\n\nconst yakStyled = <\n T,\n TAttrsIn extends object = {},\n TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>,\n>(\n Component:\n \| FunctionComponent<T>\n \| YakComponent<T, TAttrsIn, TAttrsOut>\n \| HtmlTags,\n attrs?: Attrs<T, TAttrsIn, TAttrsOut>,\n) => {\n const isYakComponent =\n typeof Component !== \"string\" && yakComponentSymbol in Component;\n\n // if the component that is wrapped is a yak component, we can extract it to render the underlying component directly\n // and we can also extract the attrs function to merge it with the current attrs function so that the sequence of\n // the attrs functions is preserved\n const [parentYakComponent, parentAttrsFn] = isYakComponent\n ? Component[yakComponentSymbol]\n : [];\n\n const mergedAttrsFn = buildRuntimeAttrsProcessor(attrs, parentAttrsFn);\n\n return <TCSSProps extends object = {}>(\n styles: TemplateStringsArray,\n ...values: Array<\n CSSInterpolation<T & NoInfer<TCSSProps> & { theme: YakTheme }>\n >\n ) => {\n const getRuntimeStyles = css(styles, ...values);\n const yak = (props: Substitute<TCSSProps & T, TAttrsIn>, ref: unknown) => {\n // if the css component does not require arguments\n // it can be called without arguments and we skip calling useTheme()\n //\n // `attrsFn \|\| getRuntimeStyles.length` is NOT against the rule of hooks as\n // getRuntimeStyles and attrsFn are constants defined outside of the component\n //\n // for example\n //\n // const Button = styled.button`color: red;`\n // ^ does not need to have access to theme, so we skip calling useTheme()\n //\n // const Button = styled.button`${({ theme }) => css`color: ${theme.color};`}`\n // ^ must be have access to theme, so we call useTheme()\n const theme =\n mergedAttrsFn \|\| getRuntimeStyles.length ? useTheme() : noTheme;\n\n // The first components which is not wrapped in a yak component will execute all attrs functions\n // starting from the innermost yak component to the outermost yak component (itself)\n const combinedProps =\n \"$__attrs\" in props\n ? // if the props already contain the $__attrs key, we assume that the props have already been processed\n // and skip processing the attrs again.\n // e.g. const Child = styled(Parent)`color: red;`\n // We process the attrs once in the child (with all attrs functions merged (including the one from the child))\n // and in the subsequent call in the parent we skip processing the attrs again\n {\n theme,\n ...props,\n }\n : // overwrite and merge the current props with the processed attrs\n combineProps(\n {\n theme,\n ...(props as {\n className?: string;\n style?: React.CSSProperties;\n }),\n // mark the props as processed\n $__attrs: true,\n },\n mergedAttrsFn?.({ theme, ...props } as Substitute<\n T & { theme: YakTheme },\n TAttrsIn\n >),\n );\n // execute all functions inside the style literal\n // e.g. styled.button`color: ${props => props.color};`\n const runtimeStyles = getRuntimeStyles(combinedProps as T & TCSSProps);\n\n // delete the yak theme from the props\n // this must happen after the runtimeStyles are calculated\n // prevents passing the theme prop to the DOM element of a styled component\n const { theme: themeAfterAttr, ...combinedPropsWithoutTheme } =\n combinedProps as { theme?: unknown };\n const propsBeforeFiltering =\n themeAfterAttr === theme ? combinedPropsWithoutTheme : combinedProps;\n\n // remove all props that start with a $ sign for string components e.g. \"button\" or \"div\"\n // so that they are not passed to the DOM element\n const filteredProps = !isYakComponent\n ? removeNonDomProperties(propsBeforeFiltering)\n : propsBeforeFiltering;\n\n // yak provides a className and style prop that needs to be merged with the\n // user provided className and style prop\n (filteredProps as { className?: string }).className = mergeClassNames(\n (filteredProps as { className?: string }).className,\n runtimeStyles.className,\n );\n (filteredProps as { style?: React.CSSProperties }).style =\n \"style\" in filteredProps\n ? {\n ...(filteredProps as { style?: React.CSSProperties }).style,\n ...runtimeStyles.style,\n }\n : runtimeStyles.style;\n // if the styled(Component) syntax is used and the component is a yak component\n // we can call the yak function directly to avoid an unnecessary wrapper with an additional\n // forwardRef call\n if (parentYakComponent) {\n return parentYakComponent(filteredProps as T, ref);\n }\n (filteredProps as { ref?: unknown }).ref = ref;\n return <Component {...(filteredProps as any)} />;\n };\n return yakForwardRef(yak, mergedAttrsFn);\n };\n};\n\n/\n Type for the proxy object returned by `styled` that allows to\n * access all html tags as properties.\n /\ntype StyledLiteral<T> = <TCSSProps>(\n styles: TemplateStringsArray,\n ...values: Array<\n CSSInterpolation<\n T &\n // don't allow inference from types in the tagged template literal\n // additional benefit is that destruction is now typed and provides hints\n NoInfer<TCSSProps> & { theme: YakTheme }\n >\n >\n) => YakComponent<TCSSProps & T>;\n\n/\n The `styled` method works perfectly on all of your own or any third-party component,\n * as long as they attach the passed className prop to a DOM element.\n \n @usage\n \n ```tsx\n * const StyledLink = styled(Link)`\n * color: #BF4F74;\n * font-weight: bold;\n * `;\n * ```\n /\nexport const styled = new Proxy(\n StyledFactory as typeof StyledFactory & {\n [Tag in HtmlTags]: StyledLiteral<JSX.IntrinsicElements[Tag]> & {\n attrs: <\n TAttrsIn extends object = {},\n TAttrsOut extends AttrsMerged<\n JSX.IntrinsicElements[Tag],\n TAttrsIn\n > = AttrsMerged<JSX.IntrinsicElements[Tag], TAttrsIn>,\n >(\n attrs: Attrs<JSX.IntrinsicElements[Tag], TAttrsIn, TAttrsOut>,\n ) => StyledLiteral<Substitute<JSX.IntrinsicElements[Tag], TAttrsIn>>;\n };\n },\n {\n get(target, TagName: keyof JSX.IntrinsicElements) {\n return target(TagName);\n },\n },\n);\n\n/\n Remove all entries that start with a $ sign\n \n This allows to have props that are used for internal stylingen purposes\n * but are not be passed to the DOM element\n /\nconst removeNonDomProperties = <T extends Record<string, unknown>>(obj: T) => {\n const result = {} as T;\n for (const key in obj) {\n if (!key.startsWith(\"$\") && obj[key] !== undefined) {\n result[key] = obj[key];\n }\n }\n return result;\n};\n\n// util function to merge class names, as they are concatenated with a space\nconst mergeClassNames = (a?: string, b?: string) => {\n if (!a && !b) return undefined;\n if (!a) return b;\n if (!b) return a;\n return a + \" \" + b;\n};\n\n/\n merge props and processed props (including class names and styles)\n * e.g.:\\\n * `{ className: \"a\", foo: 1 }` and `{ className: \"b\", bar: 2 }` \\\n * => `{ className: \"a b\", foo: 1, bar: 2 }`\n /\nconst combineProps = <\n T extends {\n className?: string;\n style?: React.CSSProperties;\n },\n TOther extends\n \| {\n className?: string;\n style?: React.CSSProperties;\n }\n \| null\n \| undefined,\n>(\n props: T,\n newProps: TOther,\n) =>\n newProps\n ? (props.className === newProps.className \|\| !newProps.className) &&\n (props.style === newProps.style \|\| !newProps.style)\n ? // shortcut if no style and class merging is necessary\n {\n ...props,\n ...newProps,\n }\n : // merge class names and styles\n {\n ...props,\n ...newProps,\n className: mergeClassNames(props.className, newProps.className),\n style: { ...(props.style \|\| {}), ...(newProps.style \|\| {}) },\n }\n : // if no new props are provided, no merging is necessary\n props;\n\n// util type to remove properties from an object\ntype FastOmit<T extends object, U extends string \| number \| symbol> = {\n [K in keyof T as K extends U ? never : K]: T[K];\n};\n\n// util type to merge two objects\n// if a property is present in both objects the property from B is used\nexport type Substitute<A extends object, B extends object> = FastOmit<\n A,\n keyof B\n> &\n B;\n\n/\n Merges the attrs function of the current component with the attrs function of the parent component\n * in order to preserve the sequence of the attrs functions.\n * Note: In theory, the parentAttrsFn can have different types for TAttrsIn and TAttrsOut\n * but as this is only used internally, we can ignore and simplify this case\n * @param attrs The attrs object or function of the current component (if any)\n * @param parentAttrsFn The attrs function of the parent/wrapped component (if any)\n * @returns A function that receives the props and returns the transformed props\n /\nconst buildRuntimeAttrsProcessor = <\n T,\n TAttrsIn extends object,\n TAttrsOut extends AttrsMerged<T, TAttrsIn>,\n>(\n attrs?: Attrs<T, TAttrsIn, TAttrsOut>,\n parentAttrsFn?: AttrsFunction<T, TAttrsIn, TAttrsOut>,\n): AttrsFunction<T, TAttrsIn, TAttrsOut> \| undefined => {\n const ownAttrsFn =\n attrs && (typeof attrs === \"function\" ? attrs : () => attrs);\n\n if (ownAttrsFn && parentAttrsFn) {\n return (props) => {\n const parentProps = parentAttrsFn(props);\n\n // overwrite and merge the parent props with the props received from the attrs function\n // after they went through the parent attrs function.\n //\n // This makes sure the linearity of the attrs functions is preserved and all attrs function receive\n // the whole props object calculated from the previous attrs functions\n return combineProps(\n parentProps,\n ownAttrsFn(combineProps(props, parentProps)),\n );\n };\n }\n\n return ownAttrsFn \|\| parentAttrsFn;\n};\n","/\n Allows to use CSS keyframe animations in a styled or css block\n \n @usage\n \n ```tsx\n * import { styled, keyframes } from \"next-yak\";\n \n const rotate = keyframes`\n * from {\n * transform: rotate(0deg);\n * }\n * to {\n * transform: rotate(360deg);\n * }\n * `;\n \n const Spinner = styled.div`\n * animation: ${rotate} 1s linear infinite;\n * `;\n * ```\n /\nexport const keyframes = (\n styles: TemplateStringsArray,\n ...dynamic: never[]\n): string => {\n // the keyframes function is a no-op in the mock\n // as it has no dynamic runtime behavior but only css\n return \"\";\n};\n","/\n Allows to use atomic CSS classes in a styled or css block\n \n @usage\n \n ```tsx\n * import { styled, atoms } from \"next-yak\";\n \n const Button = styled.button<{ $primary?: boolean }>`\n * ${atoms(\"text-teal-600\", \"text-base\", \"rounded-md\")}\n * ${props => props.$primary && atoms(\"shadow-md\")}\n * `;\n * ```\n */\nexport const atoms = (...atoms: string[]) => {\n const className = atoms.join(\" \");\n return () => ({ className });\n};\n"],"mappings":"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","names":["useTheme","YakThemeProvider","css","styles","args","dynamicCssFunctions","arg","props","i","executeDynamicExpressionRecursively","expression","result","yakComponentSymbol","css","args","classNames","dynamicCssFunctions","style","arg","key","value","props","recursivePropExecution","className","allClassNames","allStyles","i","unwrapProps","fn","result","React","useTheme","noTheme","yakForwardRef","component","attrsFn","yakComponentSymbol","StyledFactory","Component","yakStyled","attrs","isYakComponent","parentYakComponent","parentAttrsFn","mergedAttrsFn","buildRuntimeAttrsProcessor","styles","values","getRuntimeStyles","css","props","ref","theme","combinedProps","combineProps","runtimeStyles","themeAfterAttr","combinedPropsWithoutTheme","propsBeforeFiltering","filteredProps","removeNonDomProperties","mergeClassNames","styled","target","TagName","obj","result","key","a","b","newProps","ownAttrsFn","parentProps","keyframes","styles","dynamic","atoms","className"]}

package/dist/internal.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var M=Object.create;var m=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var _=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var J=(t,e)=>{for(var s in e)m(t,s,{get:e[s],enumerable:!0})},k=(t,e,s,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of E(e))!v.call(t,n)&&n!==s&&m(t,n,{get:()=>e[n],enumerable:!(r=B(e,n))||r.enumerable});return t};var X=(t,e,s)=>(s=t!=null?M(_(t)):{},k(e||!t||!t.__esModule?m(s,"default",{value:t,enumerable:!0}):s,t)),$=t=>k(m({},"__esModule",{value:!0}),t);var V={};J(V,{YakThemeProvider:()=>p.YakThemeProvider,__yak_mergeCssProp:()=>j,__yak_unitPostFix:()=>A,atoms:()=>O,css:()=>y,keyframes:()=>R,styled:()=>b,useTheme:()=>p.useTheme});module.exports=$(V);var u=Symbol("yak");function y(...t){let e=[],s=[],r={};for(let n of t)if(typeof n=="string")e.push(n);else if(typeof n=="function")s.push(n);else if(typeof n=="object"&&"style"in n)for(let o in n.style){let a=n.style[o];typeof a=="function"?s.push(T=>({style:{[o]:String(x(T,a))}})):r[o]=a}if(s.length===0){let n=e.join(" ");return()=>({className:n,style:r})}return n=>{let o=[...e],a={...r};for(let T=0;T<s.length;T++)H(n,s[T],o,a);return{className:o.join(" "),style:a}}}var H=(t,e,s,r)=>{let n=e(t);for(;n;){if(typeof n=="function"){n=n(t);continue}else if(typeof n=="object"&&("className"in n&&n.className&&s.push(n.className),"style"in n&&n.style))for(let o in n.style)r[o]=n.style[o];break}},x=(t,e)=>{let s=e(t);if(typeof s=="function")return x(t,s);if(process.env.NODE_ENV==="development"&&typeof s!="string"&&typeof s!="number"&&!(s instanceof String))throw new Error(`Dynamic CSS functions must return a string or number but returned ${JSON.stringify(s)}`);return s};var f=X(require("react"),1),h=require("next-yak/context"),K={},D=(t,e)=>Object.assign(f.default.forwardRef(t),{[u]:[t,e]}),L=t=>Object.assign(N(t),{attrs:e=>N(t,e)}),N=(t,e)=>{let s=typeof t!="string"&&u in t,[r,n]=s?t[u]:[],o=W(e,n);return(a,...T)=>{let P=y(a,...T);return D((c,C)=>{let l=o||P.length?(0,h.useTheme)():K,S="$__attrs"in c?{theme:l,...c}:g({theme:l,...c,$__attrs:!0},o?.({theme:l,...c})),d=P(S),{theme:w,...Y}=S,I=w===l?Y:S,i=s?I:U(I);return i.className=F(i.className,d.className),i.style="style"in i?{...i.style,...d.style}:d.style,r?r(i,C):(i.ref=C,f.default.createElement(t,{...i}))},o)}},b=new Proxy(L,{get(t,e){return t(e)}}),U=t=>{let e={};for(let s in t)!s.startsWith("$")&&t[s]!==void 0&&(e[s]=t[s]);return e},F=(t,e)=>{if(!(!t&&!e))return t?e?t+" "+e:t:e},g=(t,e)=>e?(t.className===e.className||!e.className)&&(t.style===e.style||!e.style)?{...t,...e}:{...t,...e,className:F(t.className,e.className),style:{...t.style||{},...e.style||{}}}:t,W=(t,e)=>{let s=t&&(typeof t=="function"?t:()=>t);return s&&e?r=>{let n=e(r);return g(n,s(g(r,n)))}:s||e};var O=(...t)=>{let e=t.join(" ");return()=>({className:e})};var R=(t,...e)=>t;var p=require("next-yak/context");var A=(t,e)=>{switch(typeof t){case"function":return s=>A(t(s),e);case"number":case"string":return`${t}${e}`;default:return}};var j=(t,e)=>({className:t.className?t.className+" "+e.className:e.className,style:{...t.style??{},...e.style}});0&&(module.exports={YakThemeProvider,__yak_mergeCssProp,__yak_unitPostFix,atoms,css,keyframes,styled,useTheme});
+"use strict";var M=Object.create;var m=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var _=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var J=(t,e)=>{for(var s in e)m(t,s,{get:e[s],enumerable:!0})},k=(t,e,s,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of E(e))!v.call(t,n)&&n!==s&&m(t,n,{get:()=>e[n],enumerable:!(r=B(e,n))||r.enumerable});return t};var X=(t,e,s)=>(s=t!=null?M(_(t)):{},k(e||!t||!t.__esModule?m(s,"default",{value:t,enumerable:!0}):s,t)),$=t=>k(m({},"__esModule",{value:!0}),t);var V={};J(V,{YakThemeProvider:()=>p.YakThemeProvider,__yak_mergeCssProp:()=>j,__yak_unitPostFix:()=>A,atoms:()=>O,css:()=>u,keyframes:()=>R,styled:()=>b,useTheme:()=>p.useTheme});module.exports=$(V);var y=Symbol("yak");function u(...t){let e=[],s=[],r={};for(let n of t)if(typeof n=="string")e.push(n);else if(typeof n=="function")s.push(n);else if(typeof n=="object"&&"style"in n)for(let o in n.style){let a=n.style[o];typeof a=="function"?s.push(T=>({style:{[o]:String(x(T,a))}})):r[o]=a}if(s.length===0){let n=e.join(" ");return()=>({className:n,style:r})}return n=>{let o=[...e],a={...r};for(let T=0;T<s.length;T++)H(n,s[T],o,a);return{className:o.join(" "),style:a}}}var H=(t,e,s,r)=>{let n=e(t);for(;n;){if(typeof n=="function"){n=n(t);continue}else if(typeof n=="object"&&("className"in n&&n.className&&s.push(n.className),"style"in n&&n.style))for(let o in n.style)r[o]=n.style[o];break}},x=(t,e)=>{let s=e(t);if(typeof s=="function")return x(t,s);if(process.env.NODE_ENV==="development"&&typeof s!="string"&&typeof s!="number"&&!(s instanceof String))throw new Error(`Dynamic CSS functions must return a string or number but returned ${JSON.stringify(s)}`);return s};var f=X(require("react"),1),h=require("next-yak/context"),K={},D=(t,e)=>Object.assign(f.default.forwardRef(t),{[y]:[t,e]}),L=t=>Object.assign(N(t),{attrs:e=>N(t,e)}),N=(t,e)=>{let s=typeof t!="string"&&y in t,[r,n]=s?t[y]:[],o=W(e,n);return(a,...T)=>{let P=u(a,...T);return D((c,C)=>{let l=o||P.length?(0,h.useTheme)():K,S="$__attrs"in c?{theme:l,...c}:g({theme:l,...c,$__attrs:!0},o?.({theme:l,...c})),d=P(S),{theme:w,...Y}=S,I=w===l?Y:S,i=s?I:U(I);return i.className=F(i.className,d.className),i.style="style"in i?{...i.style,...d.style}:d.style,r?r(i,C):(i.ref=C,f.default.createElement(t,{...i}))},o)}},b=new Proxy(L,{get(t,e){return t(e)}}),U=t=>{let e={};for(let s in t)!s.startsWith("$")&&t[s]!==void 0&&(e[s]=t[s]);return e},F=(t,e)=>{if(!(!t&&!e))return t?e?t+" "+e:t:e},g=(t,e)=>e?(t.className===e.className||!e.className)&&(t.style===e.style||!e.style)?{...t,...e}:{...t,...e,className:F(t.className,e.className),style:{...t.style||{},...e.style||{}}}:t,W=(t,e)=>{let s=t&&(typeof t=="function"?t:()=>t);return s&&e?r=>{let n=e(r);return g(n,s(g(r,n)))}:s||e};var O=(...t)=>{let e=t.join(" ");return()=>({className:e})};var R=(t,...e)=>t;var p=require("next-yak/context");var A=(t,e)=>{switch(typeof t){case"function":return s=>A(t(s),e);case"number":case"string":return`${t}${e}`;default:return}};var j=(t,e)=>({className:t.className?t.className+" "+e.className:e.className,style:{...t.style??{},...e.style}});0&&(module.exports={YakThemeProvider,__yak_mergeCssProp,__yak_unitPostFix,atoms,css,keyframes,styled,useTheme});
 //# sourceMappingURL=internal.cjs.map

package/dist/internal.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../runtime/internal.ts","../runtime/cssLiteral.tsx","../runtime/styled.tsx","../runtime/atoms.tsx","../runtime/keyframes.tsx","../runtime/internals/unitPostFix.ts","../runtime/internals/mergeCssProp.ts"],"sourcesContent":["/*\n IMPORTANT: This file contains the internal implementation of next-yak's core APIs.\n \n Purpose:\n * - Provides the actual runtime implementations for styled, css, keyframes, etc.\n * - Referenced only by the compiled code \"next-yak/internal\"\n \n Usage:\n * - DO NOT import from this file directly in your application code.\n * - Always use `import { ... } from \"next-yak\"` in your source files.\n * - The Babel plugin will automatically transform those imports to use this internal module.\n \n Why this exists:\n * 1. Allows for cleaner separation between the public API and internal implementation\n * 2. Enables better typing for both pre-compilation (user code) and post-compilation scenarios\n * 3. Easier testing and snapshot comparisons without hashes (in index.ts)\n * 4. Makes next-yak work out-of-the-box with testing frameworks like Jest and Vitest\n \n Note for maintainers:\n * - Ensure that types from this file are not published to avoid exposing internal APIs.\n \n @internal This module is not intended for direct usage and may change without notice.\n /\n\nexport { css } from \"./cssLiteral.js\";\nexport { styled } from \"./styled.js\";\nexport { atoms } from \"./atoms.js\";\nexport { keyframes } from \"./keyframes.js\";\n\n// the following export is not relative as \"next-yak/context\"\n// links to one file for react server components and\n// to another file for classic react components\nexport { useTheme, YakThemeProvider } from \"next-yak/context\";\n\n// runtime internals (helpers which get injected by the compiler)\nexport { unitPostFix as __yak_unitPostFix } from \"./internals/unitPostFix.js\";\nexport { mergeCssProp as __yak_mergeCssProp } from \"./internals/mergeCssProp.js\";\n","import { CSSProperties } from \"react\";\nimport type { YakTheme } from \"./index.d.ts\";\n\nexport const yakComponentSymbol = Symbol(\"yak\");\n\ntype ComponentStyles<TProps> = (props: TProps) => {\n className: string;\n style?: {\n [key: string]: string;\n };\n};\n\nexport type StaticCSSProp = {\n className: string;\n style?: CSSProperties;\n};\n\nexport type CSSInterpolation<TProps> =\n \| string\n \| number\n \| undefined\n \| null\n \| false\n \| ComponentStyles<TProps>\n \| StaticCSSProp\n \| {\n // type only identifier to allow targeting components\n // e.g. styled.svg`${Button}:hover & { fill: red; }`\n [yakComponentSymbol]: any;\n }\n \| ((props: TProps) => CSSInterpolation<TProps>);\n\ntype CSSStyles<TProps = {}> = {\n style: { [key: string]: string \| ((props: TProps) => string) };\n};\n\ntype CSSFunction = <TProps = {}>(\n styles: TemplateStringsArray,\n ...values: CSSInterpolation<TProps & { theme: YakTheme }>[]\n) => ComponentStyles<TProps>;\n\ntype PropsToClassNameFn = (props: unknown) =>\n \| {\n className?: string;\n style?: Record<string, string>;\n }\n \| PropsToClassNameFn;\n\n/\n css() runtime factory of css``\n \n /!\\ next-yak transpiles css`` and styled``\n \n This changes the typings of the css`` and styled`` functions.\n * During development the user of next-yak wants to work with the\n * typings BEFORE compilation.\n \n Therefore this is only an internal function only and it must be cast to any\n * before exported to the user.\n /\nexport function css(styles: TemplateStringsArray, ...values: []): StaticCSSProp;\nexport function css<TProps = {}>(\n styles: TemplateStringsArray,\n ...values: CSSInterpolation<TProps & { theme: YakTheme }>[]\n): ComponentStyles<TProps>;\nexport function css<TProps>(\n ...args: Array<any>\n): StaticCSSProp \| ComponentStyles<TProps> {\n const classNames: string[] = [];\n const dynamicCssFunctions: PropsToClassNameFn[] = [];\n const style: Record<string, string> = {};\n for (const arg of args as Array<string \| CSSFunction \| CSSStyles<any>>) {\n // A CSS-module class name which got auto generated during build from static css\n // e.g. css`color: red;`\n // compiled -> css(\"yak31e4\")\n if (typeof arg === \"string\") {\n classNames.push(arg);\n }\n // Dynamic CSS e.g.\n // css`${props => props.active && css`color: red;`}`\n // compiled -> css((props: { active: boolean }) => props.active && css(\"yak31e4\"))\n else if (typeof arg === \"function\") {\n dynamicCssFunctions.push(arg as unknown as PropsToClassNameFn);\n }\n // Dynamic CSS with css variables e.g.\n // css`transform: translate(${props => props.x}, ${props => props.y});`\n // compiled -> css(\"yak31e4\", { style: { \"--yakVarX\": props => props.x }, \"--yakVarY\": props => props.y }})\n else if (typeof arg === \"object\" && \"style\" in arg) {\n for (const key in arg.style) {\n const value = arg.style[key];\n if (typeof value === \"function\") {\n dynamicCssFunctions.push((props: unknown) => ({\n style: {\n [key]: String(\n // The value for a css value can be a theme dependent function e.g.:\n // const borderColor = (props: { theme: { mode: \"dark\" \| \"light\" } }) => props.theme === \"dark\" ? \"black\" : \"white\";\n // css`border-color: ${borderColor};`\n // Therefore the value has to be extracted recursively\n recursivePropExecution(props, value),\n ),\n },\n }));\n } else {\n style[key] = value;\n }\n }\n }\n }\n\n // Non Dynamic CSS\n if (dynamicCssFunctions.length === 0) {\n const className = classNames.join(\" \");\n return () => ({ className, style });\n }\n\n return (props: unknown) => {\n const allClassNames: string[] = [...classNames];\n const allStyles: Record<string, string> = { ...style };\n for (let i = 0; i < dynamicCssFunctions.length; i++) {\n unwrapProps(props, dynamicCssFunctions[i], allClassNames, allStyles);\n }\n return {\n className: allClassNames.join(\" \"),\n style: allStyles,\n };\n };\n}\n\n// Dynamic CSS with runtime logic\nconst unwrapProps = (\n props: unknown,\n fn: PropsToClassNameFn,\n classNames: string[],\n style: Record<string, string>,\n) => {\n let result = fn(props);\n while (result) {\n if (typeof result === \"function\") {\n result = result(props);\n continue;\n } else if (typeof result === \"object\") {\n if (\"className\" in result && result.className) {\n classNames.push(result.className);\n }\n if (\"style\" in result && result.style) {\n for (const key in result.style) {\n style[key] = result.style[key];\n }\n }\n }\n break;\n }\n};\n\nconst recursivePropExecution = (\n props: unknown,\n fn: (props: unknown) => any,\n): string \| number => {\n const result = fn(props);\n if (typeof result === \"function\") {\n return recursivePropExecution(props, result);\n }\n if (process.env.NODE_ENV === \"development\") {\n if (\n typeof result !== \"string\" &&\n typeof result !== \"number\" &&\n !(result instanceof String)\n ) {\n throw new Error(\n `Dynamic CSS functions must return a string or number but returned ${JSON.stringify(\n result,\n )}`,\n );\n }\n }\n return result;\n};\n","import { ForwardRefRenderFunction, FunctionComponent } from \"react\";\nimport { CSSInterpolation, css, yakComponentSymbol } from \"./cssLiteral.js\";\nimport React from \"react\";\n\n// the following export is not relative as \"next-yak/context\"\n// links to one file for react server components and\n// to another file for classic react components\nimport { useTheme } from \"next-yak/context\";\nimport type { YakTheme } from \"./context/index.d.ts\";\n\n/* Symbols /\n\n/\n This Symbol is a fake theme which was used instead of the real one from the context\n * to speed up rendering\n /\nconst noTheme: YakTheme = {};\n\n/\n Hack to hide {[yakComponentSymbol]:[parentComponent, parentAttributeFunction]}\n * from the type definition and to deal with ExoticComponents\n /\nconst yakForwardRef: <\n TProps,\n TAttrsIn extends object,\n TAttrsOut extends AttrsMerged<TProps, TAttrsIn>,\n>(\n component: ForwardRefRenderFunction<any, TProps>,\n attrsFn?: (props: any) => any,\n) => YakComponent<TProps, TAttrsIn, TAttrsOut> = (component, attrsFn) =>\n Object.assign(React.forwardRef(component), {\n [yakComponentSymbol]: [component, attrsFn],\n }) as any;\n\n/\n All valid html tags\n /\ntype HtmlTags = keyof JSX.IntrinsicElements;\n\n/\n Return type of the provided props merged with the initial props\n * where the specified props are optional\n /\ntype AttrsMerged<TBaseProps, TIn extends object = {}> = Substitute<\n TBaseProps & { theme: YakTheme },\n TIn\n>;\n\n/\n The attrs function allows to add additional props in a function that receives\n * the current props as argument.\n /\ntype AttrsFunction<\n TBaseProps,\n TIn extends object,\n TOut extends AttrsMerged<TBaseProps, TIn> = AttrsMerged<TBaseProps, TIn>,\n> = (p: Substitute<TBaseProps & { theme: YakTheme }, TIn>) => Partial<TOut>;\n\n/\n The attrs function allows to add additional props to a styled component.\n * The props can be specified as an object or as a function that receives the\n * current props as argument.\n /\ntype Attrs<\n TBaseProps,\n TIn extends object = {},\n TOut extends AttrsMerged<TBaseProps, TIn> = AttrsMerged<TBaseProps, TIn>,\n> = Partial<TOut> \| AttrsFunction<TBaseProps, TIn, TOut>;\n\n//\n// The `styled()` and `styled.` API\n//\n// The API design is inspired by styled-components:\n// https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/constructors/styled.tsx\n// https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/models/StyledComponent.ts\n//\nconst StyledFactory = <T,>(Component: HtmlTags \| FunctionComponent<T>) =>\n Object.assign(yakStyled(Component), {\n attrs: <\n TAttrsIn extends object = {},\n TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>,\n >(\n attrs: Attrs<T, TAttrsIn, TAttrsOut>,\n ) => yakStyled<T, TAttrsIn, TAttrsOut>(Component, attrs),\n });\n\n/\n A yak component has a special symbol attached to it that allows to\n * target the component from a child component and to correctly handle the attrs function (if any).\n * e.g. styled.svg`${Button}:hover & { fill: red; }` or styled(Button)`color: red;`\n /\ntype YakComponent<\n T,\n TAttrsIn extends object = {},\n TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>,\n> = FunctionComponent<T> & {\n [yakComponentSymbol]: [\n FunctionComponent<T>,\n AttrsFunction<T, TAttrsIn, TAttrsOut>,\n ];\n};\n\nconst yakStyled = <\n T,\n TAttrsIn extends object = {},\n TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>,\n>(\n Component:\n \| FunctionComponent<T>\n \| YakComponent<T, TAttrsIn, TAttrsOut>\n \| HtmlTags,\n attrs?: Attrs<T, TAttrsIn, TAttrsOut>,\n) => {\n const isYakComponent =\n typeof Component !== \"string\" && yakComponentSymbol in Component;\n\n // if the component that is wrapped is a yak component, we can extract it to render the underlying component directly\n // and we can also extract the attrs function to merge it with the current attrs function so that the sequence of\n // the attrs functions is preserved\n const [parentYakComponent, parentAttrsFn] = isYakComponent\n ? Component[yakComponentSymbol]\n : [];\n\n const mergedAttrsFn = buildRuntimeAttrsProcessor(attrs, parentAttrsFn);\n\n return <TCSSProps extends object = {}>(\n styles: TemplateStringsArray,\n ...values: Array<\n CSSInterpolation<T & NoInfer<TCSSProps> & { theme: YakTheme }>\n >\n ) => {\n const getRuntimeStyles = css(styles, ...values);\n const yak = (props: Substitute<TCSSProps & T, TAttrsIn>, ref: unknown) => {\n // if the css component does not require arguments\n // it can be called without arguments and we skip calling useTheme()\n //\n // `attrsFn \|\| getRuntimeStyles.length` is NOT against the rule of hooks as\n // getRuntimeStyles and attrsFn are constants defined outside of the component\n //\n // for example\n //\n // const Button = styled.button`color: red;`\n // ^ does not need to have access to theme, so we skip calling useTheme()\n //\n // const Button = styled.button`${({ theme }) => css`color: ${theme.color};`}`\n // ^ must be have access to theme, so we call useTheme()\n const theme =\n mergedAttrsFn \|\| getRuntimeStyles.length ? useTheme() : noTheme;\n\n // The first components which is not wrapped in a yak component will execute all attrs functions\n // starting from the innermost yak component to the outermost yak component (itself)\n const combinedProps =\n \"$__attrs\" in props\n ? // if the props already contain the $__attrs key, we assume that the props have already been processed\n // and skip processing the attrs again.\n // e.g. const Child = styled(Parent)`color: red;`\n // We process the attrs once in the child (with all attrs functions merged (including the one from the child))\n // and in the subsequent call in the parent we skip processing the attrs again\n {\n theme,\n ...props,\n }\n : // overwrite and merge the current props with the processed attrs\n combineProps(\n {\n theme,\n ...(props as {\n className?: string;\n style?: React.CSSProperties;\n }),\n // mark the props as processed\n $__attrs: true,\n },\n mergedAttrsFn?.({ theme, ...props } as Substitute<\n T & { theme: YakTheme },\n TAttrsIn\n >),\n );\n // execute all functions inside the style literal\n // e.g. styled.button`color: ${props => props.color};`\n const runtimeStyles = getRuntimeStyles(combinedProps as T & TCSSProps);\n\n // delete the yak theme from the props\n // this must happen after the runtimeStyles are calculated\n // prevents passing the theme prop to the DOM element of a styled component\n const { theme: themeAfterAttr, ...combinedPropsWithoutTheme } =\n combinedProps as { theme?: unknown };\n const propsBeforeFiltering =\n themeAfterAttr === theme ? combinedPropsWithoutTheme : combinedProps;\n\n // remove all props that start with a $ sign for string components e.g. \"button\" or \"div\"\n // so that they are not passed to the DOM element\n const filteredProps = !isYakComponent\n ? removeNonDomProperties(propsBeforeFiltering)\n : propsBeforeFiltering;\n\n // yak provides a className and style prop that needs to be merged with the\n // user provided className and style prop\n (filteredProps as { className?: string }).className = mergeClassNames(\n (filteredProps as { className?: string }).className,\n runtimeStyles.className,\n );\n (filteredProps as { style?: React.CSSProperties }).style =\n \"style\" in filteredProps\n ? {\n ...(filteredProps as { style?: React.CSSProperties }).style,\n ...runtimeStyles.style,\n }\n : runtimeStyles.style;\n // if the styled(Component) syntax is used and the component is a yak component\n // we can call the yak function directly to avoid an unnecessary wrapper with an additional\n // forwardRef call\n if (parentYakComponent) {\n return parentYakComponent(filteredProps as T, ref);\n }\n (filteredProps as { ref?: unknown }).ref = ref;\n return <Component {...(filteredProps as any)} />;\n };\n return yakForwardRef(yak, mergedAttrsFn);\n };\n};\n\n/\n Type for the proxy object returned by `styled` that allows to\n * access all html tags as properties.\n /\ntype StyledLiteral<T> = <TCSSProps>(\n styles: TemplateStringsArray,\n ...values: Array<\n CSSInterpolation<\n T &\n // don't allow inference from types in the tagged template literal\n // additional benefit is that destruction is now typed and provides hints\n NoInfer<TCSSProps> & { theme: YakTheme }\n >\n >\n) => YakComponent<TCSSProps & T>;\n\n/\n The `styled` method works perfectly on all of your own or any third-party component,\n * as long as they attach the passed className prop to a DOM element.\n \n @usage\n \n ```tsx\n * const StyledLink = styled(Link)`\n * color: #BF4F74;\n * font-weight: bold;\n * `;\n * ```\n /\nexport const styled = new Proxy(\n StyledFactory as typeof StyledFactory & {\n [Tag in HtmlTags]: StyledLiteral<JSX.IntrinsicElements[Tag]> & {\n attrs: <\n TAttrsIn extends object = {},\n TAttrsOut extends AttrsMerged<\n JSX.IntrinsicElements[Tag],\n TAttrsIn\n > = AttrsMerged<JSX.IntrinsicElements[Tag], TAttrsIn>,\n >(\n attrs: Attrs<JSX.IntrinsicElements[Tag], TAttrsIn, TAttrsOut>,\n ) => StyledLiteral<Substitute<JSX.IntrinsicElements[Tag], TAttrsIn>>;\n };\n },\n {\n get(target, TagName: keyof JSX.IntrinsicElements) {\n return target(TagName);\n },\n },\n);\n\n/\n Remove all entries that start with a $ sign\n \n This allows to have props that are used for internal stylingen purposes\n * but are not be passed to the DOM element\n /\nconst removeNonDomProperties = <T extends Record<string, unknown>>(obj: T) => {\n const result = {} as T;\n for (const key in obj) {\n if (!key.startsWith(\"$\") && obj[key] !== undefined) {\n result[key] = obj[key];\n }\n }\n return result;\n};\n\n// util function to merge class names, as they are concatenated with a space\nconst mergeClassNames = (a?: string, b?: string) => {\n if (!a && !b) return undefined;\n if (!a) return b;\n if (!b) return a;\n return a + \" \" + b;\n};\n\n/\n merge props and processed props (including class names and styles)\n * e.g.:\\\n * `{ className: \"a\", foo: 1 }` and `{ className: \"b\", bar: 2 }` \\\n * => `{ className: \"a b\", foo: 1, bar: 2 }`\n /\nconst combineProps = <\n T extends {\n className?: string;\n style?: React.CSSProperties;\n },\n TOther extends\n \| {\n className?: string;\n style?: React.CSSProperties;\n }\n \| null\n \| undefined,\n>(\n props: T,\n newProps: TOther,\n) =>\n newProps\n ? (props.className === newProps.className \|\| !newProps.className) &&\n (props.style === newProps.style \|\| !newProps.style)\n ? // shortcut if no style and class merging is necessary\n {\n ...props,\n ...newProps,\n }\n : // merge class names and styles\n {\n ...props,\n ...newProps,\n className: mergeClassNames(props.className, newProps.className),\n style: { ...(props.style \|\| {}), ...(newProps.style \|\| {}) },\n }\n : // if no new props are provided, no merging is necessary\n props;\n\n// util type to remove properties from an object\ntype FastOmit<T extends object, U extends string \| number \| symbol> = {\n [K in keyof T as K extends U ? never : K]: T[K];\n};\n\n// util type to merge two objects\n// if a property is present in both objects the property from B is used\nexport type Substitute<A extends object, B extends object> = FastOmit<\n A,\n keyof B\n> &\n B;\n\n/\n Merges the attrs function of the current component with the attrs function of the parent component\n * in order to preserve the sequence of the attrs functions.\n * Note: In theory, the parentAttrsFn can have different types for TAttrsIn and TAttrsOut\n * but as this is only used internally, we can ignore and simplify this case\n * @param attrs The attrs object or function of the current component (if any)\n * @param parentAttrsFn The attrs function of the parent/wrapped component (if any)\n * @returns A function that receives the props and returns the transformed props\n /\nconst buildRuntimeAttrsProcessor = <\n T,\n TAttrsIn extends object,\n TAttrsOut extends AttrsMerged<T, TAttrsIn>,\n>(\n attrs?: Attrs<T, TAttrsIn, TAttrsOut>,\n parentAttrsFn?: AttrsFunction<T, TAttrsIn, TAttrsOut>,\n): AttrsFunction<T, TAttrsIn, TAttrsOut> \| undefined => {\n const ownAttrsFn =\n attrs && (typeof attrs === \"function\" ? attrs : () => attrs);\n\n if (ownAttrsFn && parentAttrsFn) {\n return (props) => {\n const parentProps = parentAttrsFn(props);\n\n // overwrite and merge the parent props with the props received from the attrs function\n // after they went through the parent attrs function.\n //\n // This makes sure the linearity of the attrs functions is preserved and all attrs function receive\n // the whole props object calculated from the previous attrs functions\n return combineProps(\n parentProps,\n ownAttrsFn(combineProps(props, parentProps)),\n );\n };\n }\n\n return ownAttrsFn \|\| parentAttrsFn;\n};\n","/\n Allows to use atomic CSS classes in a styled or css block\n \n @usage\n \n ```tsx\n * import { styled, atoms } from \"next-yak\";\n \n const Button = styled.button<{ $primary?: boolean }>`\n * ${atoms(\"text-teal-600\", \"text-base\", \"rounded-md\")}\n * ${props => props.$primary && atoms(\"shadow-md\")}\n * `;\n * ```\n /\nexport const atoms = (...atoms: string[]) => {\n const className = atoms.join(\" \");\n return () => ({ className });\n};\n","/\n Allows to use CSS keyframe animations in a styled or css block\n \n @usage\n \n ```tsx\n * import { styled, keyframes } from \"next-yak\";\n \n const rotate = keyframes`\n * from {\n * transform: rotate(0deg);\n * }\n * to {\n * transform: rotate(360deg);\n * }\n * `;\n \n const Spinner = styled.div`\n * animation: ${rotate} 1s linear infinite;\n * `;\n * ```\n /\nexport const keyframes = (\n styles: TemplateStringsArray,\n ...dynamic: never[]\n): string => {\n // during compilation all args of keyframe are compiled\n // to a string which references the animation name\n return styles as any as string;\n};\n","/\n Internal helper called by transformed code - Do not use directly\n \n Takes a function and a css unit and returns the result of the function concatenated with the unit\n \n ```tsx\n * import { styled } from \"next-yak\";\n \n const Button = styled.button<{ $width?: boolean }>`\n * width: ${({ $width }) => $width}px;\n * `;\n * ```\n \n Which will be transformed to:\n * ```tsx\n * import { styled } from \"next-yak/internals\";\n \n const Button = styled.button<{ $width?: boolean }>(\n * \"button\", {\n * width: unitPostFix({ $width }) => $width, \"px\")\n * });\n /\nexport const unitPostFix = (arg: unknown, unit: string) => {\n switch (typeof arg) {\n case \"function\":\n return (props: any) => unitPostFix(arg(props), unit);\n case \"number\":\n case \"string\":\n return `${arg}${unit}`;\n // Ignore falsy values\n default:\n return undefined;\n }\n};\n","/\n This is an internal helper function to merge relevant props of a native element with a css prop.\n * It's automatically added when using the `css` prop in a JSX element.\n * e.g.:\n * ```tsx\n * <p\n * className=\"foo\"\n * css={css`\n * color: green;\n * `}\n * {...{ style: { padding: \"30px\" }}}\n * />\n */\nexport const mergeCssProp = (\n relevantProps: Record<string, unknown>,\n cssProp: {\n className: string;\n style?: Record<string, unknown>;\n },\n) => {\n return {\n className: relevantProps.className\n ? relevantProps.className + \" \" + cssProp.className\n : cssProp.className,\n style: { ...(relevantProps.style ?? {}), ...cssProp.style },\n };\n};\n"],"mappings":"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","names":["internal_exports","__export","mergeCssProp","unitPostFix","atoms","css","keyframes","styled","__toCommonJS","yakComponentSymbol","css","args","classNames","dynamicCssFunctions","style","arg","key","value","props","recursivePropExecution","className","allClassNames","allStyles","i","unwrapProps","fn","result","import_react","import_context","noTheme","yakForwardRef","component","attrsFn","React","yakComponentSymbol","StyledFactory","Component","yakStyled","attrs","isYakComponent","parentYakComponent","parentAttrsFn","mergedAttrsFn","buildRuntimeAttrsProcessor","styles","values","getRuntimeStyles","css","props","ref","theme","combinedProps","combineProps","runtimeStyles","themeAfterAttr","combinedPropsWithoutTheme","propsBeforeFiltering","filteredProps","removeNonDomProperties","mergeClassNames","styled","target","TagName","obj","result","key","a","b","newProps","ownAttrsFn","parentProps","atoms","className","keyframes","styles","dynamic","import_context","unitPostFix","arg","unit","props","mergeCssProp","relevantProps","cssProp"]}
1	+ {"version":3,"sources":["../runtime/internal.ts","../runtime/cssLiteral.tsx","../runtime/styled.tsx","../runtime/atoms.tsx","../runtime/keyframes.tsx","../runtime/internals/unitPostFix.ts","../runtime/internals/mergeCssProp.ts"],"sourcesContent":["/*\n IMPORTANT: This file contains the internal implementation of next-yak's core APIs.\n \n Purpose:\n * - Provides the actual runtime implementations for styled, css, keyframes, etc.\n * - Referenced only by the compiled code \"next-yak/internal\"\n \n Usage:\n * - DO NOT import from this file directly in your application code.\n * - Always use `import { ... } from \"next-yak\"` in your source files.\n * - The Babel plugin will automatically transform those imports to use this internal module.\n \n Why this exists:\n * 1. Allows for cleaner separation between the public API and internal implementation\n * 2. Enables better typing for both pre-compilation (user code) and post-compilation scenarios\n * 3. Easier testing and snapshot comparisons without hashes (in index.ts)\n * 4. Makes next-yak work out-of-the-box with testing frameworks like Jest and Vitest\n \n Note for maintainers:\n * - Ensure that types from this file are not published to avoid exposing internal APIs.\n \n @internal This module is not intended for direct usage and may change without notice.\n /\n\nexport { css } from \"./cssLiteral.js\";\nexport { styled } from \"./styled.js\";\nexport { atoms } from \"./atoms.js\";\nexport { keyframes } from \"./keyframes.js\";\n\n// the following export is not relative as \"next-yak/context\"\n// links to one file for react server components and\n// to another file for classic react components\nexport { useTheme, YakThemeProvider } from \"next-yak/context\";\n\n// runtime internals (helpers which get injected by the compiler)\nexport { unitPostFix as __yak_unitPostFix } from \"./internals/unitPostFix.js\";\nexport { mergeCssProp as __yak_mergeCssProp } from \"./internals/mergeCssProp.js\";\n","import { CSSProperties } from \"react\";\nimport type { YakTheme } from \"./index.d.ts\";\n\nexport const yakComponentSymbol = Symbol(\"yak\");\n\ntype ComponentStyles<TProps> = (props: TProps) => {\n className: string;\n style?: {\n [key: string]: string;\n };\n};\n\nexport type StaticCSSProp = {\n className: string;\n style?: CSSProperties;\n};\n\nexport type CSSInterpolation<TProps> =\n \| string\n \| number\n \| undefined\n \| null\n \| false\n \| ComponentStyles<TProps>\n \| StaticCSSProp\n \| {\n // type only identifier to allow targeting components\n // e.g. styled.svg`${Button}:hover & { fill: red; }`\n [yakComponentSymbol]: any;\n }\n \| ((props: TProps) => CSSInterpolation<TProps>);\n\ntype CSSStyles<TProps = {}> = {\n style: { [key: string]: string \| ((props: TProps) => string) };\n};\n\ntype CSSFunction = <TProps = {}>(\n styles: TemplateStringsArray,\n ...values: CSSInterpolation<TProps & { theme: YakTheme }>[]\n) => ComponentStyles<TProps>;\n\ntype PropsToClassNameFn = (props: unknown) =>\n \| {\n className?: string;\n style?: Record<string, string>;\n }\n \| PropsToClassNameFn;\n\n/\n css() runtime factory of css``\n \n /!\\ next-yak transpiles css`` and styled``\n \n This changes the typings of the css`` and styled`` functions.\n * During development the user of next-yak wants to work with the\n * typings BEFORE compilation.\n \n Therefore this is only an internal function only and it must be cast to any\n * before exported to the user.\n /\nexport function css(styles: TemplateStringsArray, ...values: []): StaticCSSProp;\nexport function css<TProps = {}>(\n styles: TemplateStringsArray,\n ...values: CSSInterpolation<TProps & { theme: YakTheme }>[]\n): ComponentStyles<TProps>;\nexport function css<TProps>(\n ...args: Array<any>\n): StaticCSSProp \| ComponentStyles<TProps> {\n const classNames: string[] = [];\n const dynamicCssFunctions: PropsToClassNameFn[] = [];\n const style: Record<string, string> = {};\n for (const arg of args as Array<string \| CSSFunction \| CSSStyles<any>>) {\n // A CSS-module class name which got auto generated during build from static css\n // e.g. css`color: red;`\n // compiled -> css(\"yak31e4\")\n if (typeof arg === \"string\") {\n classNames.push(arg);\n }\n // Dynamic CSS e.g.\n // css`${props => props.active && css`color: red;`}`\n // compiled -> css((props: { active: boolean }) => props.active && css(\"yak31e4\"))\n else if (typeof arg === \"function\") {\n dynamicCssFunctions.push(arg as unknown as PropsToClassNameFn);\n }\n // Dynamic CSS with css variables e.g.\n // css`transform: translate(${props => props.x}, ${props => props.y});`\n // compiled -> css(\"yak31e4\", { style: { \"--yakVarX\": props => props.x }, \"--yakVarY\": props => props.y }})\n else if (typeof arg === \"object\" && \"style\" in arg) {\n for (const key in arg.style) {\n const value = arg.style[key];\n if (typeof value === \"function\") {\n dynamicCssFunctions.push((props: unknown) => ({\n style: {\n [key]: String(\n // The value for a css value can be a theme dependent function e.g.:\n // const borderColor = (props: { theme: { mode: \"dark\" \| \"light\" } }) => props.theme === \"dark\" ? \"black\" : \"white\";\n // css`border-color: ${borderColor};`\n // Therefore the value has to be extracted recursively\n recursivePropExecution(props, value),\n ),\n },\n }));\n } else {\n style[key] = value;\n }\n }\n }\n }\n\n // Non Dynamic CSS\n if (dynamicCssFunctions.length === 0) {\n const className = classNames.join(\" \");\n return () => ({ className, style });\n }\n\n return (props: unknown) => {\n const allClassNames: string[] = [...classNames];\n const allStyles: Record<string, string> = { ...style };\n for (let i = 0; i < dynamicCssFunctions.length; i++) {\n unwrapProps(props, dynamicCssFunctions[i], allClassNames, allStyles);\n }\n return {\n className: allClassNames.join(\" \"),\n style: allStyles,\n };\n };\n}\n\n// Dynamic CSS with runtime logic\nconst unwrapProps = (\n props: unknown,\n fn: PropsToClassNameFn,\n classNames: string[],\n style: Record<string, string>,\n) => {\n let result = fn(props);\n while (result) {\n if (typeof result === \"function\") {\n result = result(props);\n continue;\n } else if (typeof result === \"object\") {\n if (\"className\" in result && result.className) {\n classNames.push(result.className);\n }\n if (\"style\" in result && result.style) {\n for (const key in result.style) {\n style[key] = result.style[key];\n }\n }\n }\n break;\n }\n};\n\nconst recursivePropExecution = (\n props: unknown,\n fn: (props: unknown) => any,\n): string \| number => {\n const result = fn(props);\n if (typeof result === \"function\") {\n return recursivePropExecution(props, result);\n }\n if (process.env.NODE_ENV === \"development\") {\n if (\n typeof result !== \"string\" &&\n typeof result !== \"number\" &&\n !(result instanceof String)\n ) {\n throw new Error(\n `Dynamic CSS functions must return a string or number but returned ${JSON.stringify(\n result,\n )}`,\n );\n }\n }\n return result;\n};\n","import { ForwardRefRenderFunction } from \"react\";\nimport { CSSInterpolation, css, yakComponentSymbol } from \"./cssLiteral.js\";\nimport React from \"react\";\n\n// the following export is not relative as \"next-yak/context\"\n// links to one file for react server components and\n// to another file for classic react components\nimport { useTheme } from \"next-yak/context\";\nimport type { YakTheme } from \"./context/index.d.ts\";\n\n/* Symbols /\n\n/\n This Symbol is a fake theme which was used instead of the real one from the context\n * to speed up rendering\n /\nconst noTheme: YakTheme = {};\n\n/\n Hack to hide {[yakComponentSymbol]:[parentComponent, parentAttributeFunction]}\n * from the type definition and to deal with ExoticComponents\n /\nconst yakForwardRef: <\n TProps,\n TAttrsIn extends object,\n TAttrsOut extends AttrsMerged<TProps, TAttrsIn>,\n>(\n component: ForwardRefRenderFunction<any, TProps>,\n attrsFn?: (props: any) => any,\n) => YakComponent<TProps, TAttrsIn, TAttrsOut> = (component, attrsFn) =>\n Object.assign(React.forwardRef(component), {\n [yakComponentSymbol]: [component, attrsFn],\n }) as any;\n\n/\n Minimal type for a function component that works with next-yak\n /\ntype FunctionComponent<T> = (props: T, context?: any) => React.ReactNode;\n\n/\n All valid html tags\n /\ntype HtmlTags = keyof JSX.IntrinsicElements;\n\n/\n Return type of the provided props merged with the initial props\n * where the specified props are optional\n /\ntype AttrsMerged<TBaseProps, TIn extends object = {}> = Substitute<\n TBaseProps & { theme: YakTheme },\n TIn\n>;\n\n/\n The attrs function allows to add additional props in a function that receives\n * the current props as argument.\n /\ntype AttrsFunction<\n TBaseProps,\n TIn extends object,\n TOut extends AttrsMerged<TBaseProps, TIn> = AttrsMerged<TBaseProps, TIn>,\n> = (p: Substitute<TBaseProps & { theme: YakTheme }, TIn>) => Partial<TOut>;\n\n/\n The attrs function allows to add additional props to a styled component.\n * The props can be specified as an object or as a function that receives the\n * current props as argument.\n /\ntype Attrs<\n TBaseProps,\n TIn extends object = {},\n TOut extends AttrsMerged<TBaseProps, TIn> = AttrsMerged<TBaseProps, TIn>,\n> = Partial<TOut> \| AttrsFunction<TBaseProps, TIn, TOut>;\n\n//\n// The `styled()` and `styled.` API\n//\n// The API design is inspired by styled-components:\n// https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/constructors/styled.tsx\n// https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/models/StyledComponent.ts\n//\nconst StyledFactory = <T,>(Component: HtmlTags \| FunctionComponent<T>) =>\n Object.assign(yakStyled(Component), {\n attrs: <\n TAttrsIn extends object = {},\n TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>,\n >(\n attrs: Attrs<T, TAttrsIn, TAttrsOut>,\n ) => yakStyled<T, TAttrsIn, TAttrsOut>(Component, attrs),\n });\n\n/\n A yak component has a special symbol attached to it that allows to\n * target the component from a child component and to correctly handle the attrs function (if any).\n * e.g. styled.svg`${Button}:hover & { fill: red; }` or styled(Button)`color: red;`\n /\ntype YakComponent<\n T,\n TAttrsIn extends object = {},\n TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>,\n> = FunctionComponent<T> & {\n [yakComponentSymbol]: [\n FunctionComponent<T>,\n AttrsFunction<T, TAttrsIn, TAttrsOut>,\n ];\n};\n\nconst yakStyled = <\n T,\n TAttrsIn extends object = {},\n TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>,\n>(\n Component:\n \| FunctionComponent<T>\n \| YakComponent<T, TAttrsIn, TAttrsOut>\n \| HtmlTags,\n attrs?: Attrs<T, TAttrsIn, TAttrsOut>,\n) => {\n const isYakComponent =\n typeof Component !== \"string\" && yakComponentSymbol in Component;\n\n // if the component that is wrapped is a yak component, we can extract it to render the underlying component directly\n // and we can also extract the attrs function to merge it with the current attrs function so that the sequence of\n // the attrs functions is preserved\n const [parentYakComponent, parentAttrsFn] = isYakComponent\n ? Component[yakComponentSymbol]\n : [];\n\n const mergedAttrsFn = buildRuntimeAttrsProcessor(attrs, parentAttrsFn);\n\n return <TCSSProps extends object = {}>(\n styles: TemplateStringsArray,\n ...values: Array<\n CSSInterpolation<T & NoInfer<TCSSProps> & { theme: YakTheme }>\n >\n ) => {\n const getRuntimeStyles = css(styles, ...values);\n const yak = (props: Substitute<TCSSProps & T, TAttrsIn>, ref: unknown) => {\n // if the css component does not require arguments\n // it can be called without arguments and we skip calling useTheme()\n //\n // `attrsFn \|\| getRuntimeStyles.length` is NOT against the rule of hooks as\n // getRuntimeStyles and attrsFn are constants defined outside of the component\n //\n // for example\n //\n // const Button = styled.button`color: red;`\n // ^ does not need to have access to theme, so we skip calling useTheme()\n //\n // const Button = styled.button`${({ theme }) => css`color: ${theme.color};`}`\n // ^ must be have access to theme, so we call useTheme()\n const theme =\n mergedAttrsFn \|\| getRuntimeStyles.length ? useTheme() : noTheme;\n\n // The first components which is not wrapped in a yak component will execute all attrs functions\n // starting from the innermost yak component to the outermost yak component (itself)\n const combinedProps =\n \"$__attrs\" in props\n ? // if the props already contain the $__attrs key, we assume that the props have already been processed\n // and skip processing the attrs again.\n // e.g. const Child = styled(Parent)`color: red;`\n // We process the attrs once in the child (with all attrs functions merged (including the one from the child))\n // and in the subsequent call in the parent we skip processing the attrs again\n {\n theme,\n ...props,\n }\n : // overwrite and merge the current props with the processed attrs\n combineProps(\n {\n theme,\n ...(props as {\n className?: string;\n style?: React.CSSProperties;\n }),\n // mark the props as processed\n $__attrs: true,\n },\n mergedAttrsFn?.({ theme, ...props } as Substitute<\n T & { theme: YakTheme },\n TAttrsIn\n >),\n );\n // execute all functions inside the style literal\n // e.g. styled.button`color: ${props => props.color};`\n const runtimeStyles = getRuntimeStyles(combinedProps as T & TCSSProps);\n\n // delete the yak theme from the props\n // this must happen after the runtimeStyles are calculated\n // prevents passing the theme prop to the DOM element of a styled component\n const { theme: themeAfterAttr, ...combinedPropsWithoutTheme } =\n combinedProps as { theme?: unknown };\n const propsBeforeFiltering =\n themeAfterAttr === theme ? combinedPropsWithoutTheme : combinedProps;\n\n // remove all props that start with a $ sign for string components e.g. \"button\" or \"div\"\n // so that they are not passed to the DOM element\n const filteredProps = !isYakComponent\n ? removeNonDomProperties(propsBeforeFiltering)\n : propsBeforeFiltering;\n\n // yak provides a className and style prop that needs to be merged with the\n // user provided className and style prop\n (filteredProps as { className?: string }).className = mergeClassNames(\n (filteredProps as { className?: string }).className,\n runtimeStyles.className,\n );\n (filteredProps as { style?: React.CSSProperties }).style =\n \"style\" in filteredProps\n ? {\n ...(filteredProps as { style?: React.CSSProperties }).style,\n ...runtimeStyles.style,\n }\n : runtimeStyles.style;\n // if the styled(Component) syntax is used and the component is a yak component\n // we can call the yak function directly to avoid an unnecessary wrapper with an additional\n // forwardRef call\n if (parentYakComponent) {\n return parentYakComponent(filteredProps as T, ref);\n }\n (filteredProps as { ref?: unknown }).ref = ref;\n return <Component {...(filteredProps as any)} />;\n };\n return yakForwardRef(yak, mergedAttrsFn);\n };\n};\n\n/\n Type for the proxy object returned by `styled` that allows to\n * access all html tags as properties.\n /\ntype StyledLiteral<T> = <TCSSProps>(\n styles: TemplateStringsArray,\n ...values: Array<\n CSSInterpolation<\n T &\n // don't allow inference from types in the tagged template literal\n // additional benefit is that destruction is now typed and provides hints\n NoInfer<TCSSProps> & { theme: YakTheme }\n >\n >\n) => YakComponent<TCSSProps & T>;\n\n/\n The `styled` method works perfectly on all of your own or any third-party component,\n * as long as they attach the passed className prop to a DOM element.\n \n @usage\n \n ```tsx\n * const StyledLink = styled(Link)`\n * color: #BF4F74;\n * font-weight: bold;\n * `;\n * ```\n /\nexport const styled = new Proxy(\n StyledFactory as typeof StyledFactory & {\n [Tag in HtmlTags]: StyledLiteral<JSX.IntrinsicElements[Tag]> & {\n attrs: <\n TAttrsIn extends object = {},\n TAttrsOut extends AttrsMerged<\n JSX.IntrinsicElements[Tag],\n TAttrsIn\n > = AttrsMerged<JSX.IntrinsicElements[Tag], TAttrsIn>,\n >(\n attrs: Attrs<JSX.IntrinsicElements[Tag], TAttrsIn, TAttrsOut>,\n ) => StyledLiteral<Substitute<JSX.IntrinsicElements[Tag], TAttrsIn>>;\n };\n },\n {\n get(target, TagName: keyof JSX.IntrinsicElements) {\n return target(TagName);\n },\n },\n);\n\n/\n Remove all entries that start with a $ sign\n \n This allows to have props that are used for internal stylingen purposes\n * but are not be passed to the DOM element\n /\nconst removeNonDomProperties = <T extends Record<string, unknown>>(obj: T) => {\n const result = {} as T;\n for (const key in obj) {\n if (!key.startsWith(\"$\") && obj[key] !== undefined) {\n result[key] = obj[key];\n }\n }\n return result;\n};\n\n// util function to merge class names, as they are concatenated with a space\nconst mergeClassNames = (a?: string, b?: string) => {\n if (!a && !b) return undefined;\n if (!a) return b;\n if (!b) return a;\n return a + \" \" + b;\n};\n\n/\n merge props and processed props (including class names and styles)\n * e.g.:\\\n * `{ className: \"a\", foo: 1 }` and `{ className: \"b\", bar: 2 }` \\\n * => `{ className: \"a b\", foo: 1, bar: 2 }`\n /\nconst combineProps = <\n T extends {\n className?: string;\n style?: React.CSSProperties;\n },\n TOther extends\n \| {\n className?: string;\n style?: React.CSSProperties;\n }\n \| null\n \| undefined,\n>(\n props: T,\n newProps: TOther,\n) =>\n newProps\n ? (props.className === newProps.className \|\| !newProps.className) &&\n (props.style === newProps.style \|\| !newProps.style)\n ? // shortcut if no style and class merging is necessary\n {\n ...props,\n ...newProps,\n }\n : // merge class names and styles\n {\n ...props,\n ...newProps,\n className: mergeClassNames(props.className, newProps.className),\n style: { ...(props.style \|\| {}), ...(newProps.style \|\| {}) },\n }\n : // if no new props are provided, no merging is necessary\n props;\n\n// util type to remove properties from an object\ntype FastOmit<T extends object, U extends string \| number \| symbol> = {\n [K in keyof T as K extends U ? never : K]: T[K];\n};\n\n// util type to merge two objects\n// if a property is present in both objects the property from B is used\nexport type Substitute<A extends object, B extends object> = FastOmit<\n A,\n keyof B\n> &\n B;\n\n/\n Merges the attrs function of the current component with the attrs function of the parent component\n * in order to preserve the sequence of the attrs functions.\n * Note: In theory, the parentAttrsFn can have different types for TAttrsIn and TAttrsOut\n * but as this is only used internally, we can ignore and simplify this case\n * @param attrs The attrs object or function of the current component (if any)\n * @param parentAttrsFn The attrs function of the parent/wrapped component (if any)\n * @returns A function that receives the props and returns the transformed props\n /\nconst buildRuntimeAttrsProcessor = <\n T,\n TAttrsIn extends object,\n TAttrsOut extends AttrsMerged<T, TAttrsIn>,\n>(\n attrs?: Attrs<T, TAttrsIn, TAttrsOut>,\n parentAttrsFn?: AttrsFunction<T, TAttrsIn, TAttrsOut>,\n): AttrsFunction<T, TAttrsIn, TAttrsOut> \| undefined => {\n const ownAttrsFn =\n attrs && (typeof attrs === \"function\" ? attrs : () => attrs);\n\n if (ownAttrsFn && parentAttrsFn) {\n return (props) => {\n const parentProps = parentAttrsFn(props);\n\n // overwrite and merge the parent props with the props received from the attrs function\n // after they went through the parent attrs function.\n //\n // This makes sure the linearity of the attrs functions is preserved and all attrs function receive\n // the whole props object calculated from the previous attrs functions\n return combineProps(\n parentProps,\n ownAttrsFn(combineProps(props, parentProps)),\n );\n };\n }\n\n return ownAttrsFn \|\| parentAttrsFn;\n};\n","/\n Allows to use atomic CSS classes in a styled or css block\n \n @usage\n \n ```tsx\n * import { styled, atoms } from \"next-yak\";\n \n const Button = styled.button<{ $primary?: boolean }>`\n * ${atoms(\"text-teal-600\", \"text-base\", \"rounded-md\")}\n * ${props => props.$primary && atoms(\"shadow-md\")}\n * `;\n * ```\n /\nexport const atoms = (...atoms: string[]) => {\n const className = atoms.join(\" \");\n return () => ({ className });\n};\n","/\n Allows to use CSS keyframe animations in a styled or css block\n \n @usage\n \n ```tsx\n * import { styled, keyframes } from \"next-yak\";\n \n const rotate = keyframes`\n * from {\n * transform: rotate(0deg);\n * }\n * to {\n * transform: rotate(360deg);\n * }\n * `;\n \n const Spinner = styled.div`\n * animation: ${rotate} 1s linear infinite;\n * `;\n * ```\n /\nexport const keyframes = (\n styles: TemplateStringsArray,\n ...dynamic: never[]\n): string => {\n // during compilation all args of keyframe are compiled\n // to a string which references the animation name\n return styles as any as string;\n};\n","/\n Internal helper called by transformed code - Do not use directly\n \n Takes a function and a css unit and returns the result of the function concatenated with the unit\n \n ```tsx\n * import { styled } from \"next-yak\";\n \n const Button = styled.button<{ $width?: boolean }>`\n * width: ${({ $width }) => $width}px;\n * `;\n * ```\n \n Which will be transformed to:\n * ```tsx\n * import { styled } from \"next-yak/internals\";\n \n const Button = styled.button<{ $width?: boolean }>(\n * \"button\", {\n * width: unitPostFix({ $width }) => $width, \"px\")\n * });\n /\nexport const unitPostFix = (arg: unknown, unit: string) => {\n switch (typeof arg) {\n case \"function\":\n return (props: any) => unitPostFix(arg(props), unit);\n case \"number\":\n case \"string\":\n return `${arg}${unit}`;\n // Ignore falsy values\n default:\n return undefined;\n }\n};\n","/\n This is an internal helper function to merge relevant props of a native element with a css prop.\n * It's automatically added when using the `css` prop in a JSX element.\n * e.g.:\n * ```tsx\n * <p\n * className=\"foo\"\n * css={css`\n * color: green;\n * `}\n * {...{ style: { padding: \"30px\" }}}\n * />\n */\nexport const mergeCssProp = (\n relevantProps: Record<string, unknown>,\n cssProp: {\n className: string;\n style?: Record<string, unknown>;\n },\n) => {\n return {\n className: relevantProps.className\n ? relevantProps.className + \" \" + cssProp.className\n : cssProp.className,\n style: { ...(relevantProps.style ?? {}), ...cssProp.style },\n };\n};\n"],"mappings":"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","names":["internal_exports","__export","mergeCssProp","unitPostFix","atoms","css","keyframes","styled","__toCommonJS","yakComponentSymbol","css","args","classNames","dynamicCssFunctions","style","arg","key","value","props","recursivePropExecution","className","allClassNames","allStyles","i","unwrapProps","fn","result","import_react","import_context","noTheme","yakForwardRef","component","attrsFn","React","yakComponentSymbol","StyledFactory","Component","yakStyled","attrs","isYakComponent","parentYakComponent","parentAttrsFn","mergedAttrsFn","buildRuntimeAttrsProcessor","styles","values","getRuntimeStyles","css","props","ref","theme","combinedProps","combineProps","runtimeStyles","themeAfterAttr","combinedPropsWithoutTheme","propsBeforeFiltering","filteredProps","removeNonDomProperties","mergeClassNames","styled","target","TagName","obj","result","key","a","b","newProps","ownAttrsFn","parentProps","atoms","className","keyframes","styles","dynamic","import_context","unitPostFix","arg","unit","props","mergeCssProp","relevantProps","cssProp"]}

package/dist/internal.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var m=Symbol("yak");function p(...t){let e=[],n=[],o={};for(let s of t)if(typeof s=="string")e.push(s);else if(typeof s=="function")n.push(s);else if(typeof s=="object"&&"style"in s)for(let r in s.style){let a=s.style[r];typeof a=="function"?n.push(T=>({style:{[r]:String(A(T,a))}})):o[r]=a}if(n.length===0){let s=e.join(" ");return()=>({className:s,style:o})}return s=>{let r=[...e],a={...o};for(let T=0;T<n.length;T++)h(s,n[T],r,a);return{className:r.join(" "),style:a}}}var h=(t,e,n,o)=>{let s=e(t);for(;s;){if(typeof s=="function"){s=s(t);continue}else if(typeof s=="object"&&("className"in s&&s.className&&n.push(s.className),"style"in s&&s.style))for(let r in s.style)o[r]=s.style[r];break}},A=(t,e)=>{let n=e(t);if(typeof n=="function")return A(t,n);if(process.env.NODE_ENV==="development"&&typeof n!="string"&&typeof n!="number"&&!(n instanceof String))throw new Error(`Dynamic CSS functions must return a string or number but returned ${JSON.stringify(n)}`);return n};import C from"react";import{useTheme as b}from"next-yak/context";var F={},O=(t,e)=>Object.assign(C.forwardRef(t),{[m]:[t,e]}),R=t=>Object.assign(P(t),{attrs:e=>P(t,e)}),P=(t,e)=>{let n=typeof t!="string"&&m in t,[o,s]=n?t[m]:[],r=Y(e,s);return(a,...T)=>{let d=p(a,...T);return O((c,g)=>{let l=r||d.length?b():F,u="$__attrs"in c?{theme:l,...c}:S({theme:l,...c,$__attrs:!0},r?.({theme:l,...c})),y=d(u),{theme:x,...N}=u,f=x===l?N:u,i=n?f:w(f);return i.className=I(i.className,y.className),i.style="style"in i?{...i.style,...y.style}:y.style,o?o(i,g):(i.ref=g,C.createElement(t,{...i}))},r)}},j=new Proxy(R,{get(t,e){return t(e)}}),w=t=>{let e={};for(let n in t)!n.startsWith("$")&&t[n]!==void 0&&(e[n]=t[n]);return e},I=(t,e)=>{if(!(!t&&!e))return t?e?t+" "+e:t:e},S=(t,e)=>e?(t.className===e.className||!e.className)&&(t.style===e.style||!e.style)?{...t,...e}:{...t,...e,className:I(t.className,e.className),style:{...t.style||{},...e.style||{}}}:t,Y=(t,e)=>{let n=t&&(typeof t=="function"?t:()=>t);return n&&e?o=>{let s=e(o);return S(s,n(S(o,s)))}:n||e};var M=(...t)=>{let e=t.join(" ");return()=>({className:e})};var B=(t,...e)=>t;import{useTheme as tt,YakThemeProvider as et}from"next-yak/context";var k=(t,e)=>{switch(typeof t){case"function":return n=>k(t(n),e);case"number":case"string":return`${t}${e}`;default:return}};var E=(t,e)=>({className:t.className?t.className+" "+e.className:e.className,style:{...t.style??{},...e.style}});export{et as YakThemeProvider,E as __yak_mergeCssProp,k as __yak_unitPostFix,M as atoms,p as css,B as keyframes,j as styled,tt as useTheme};
+var m=Symbol("yak");function p(...t){let e=[],n=[],o={};for(let s of t)if(typeof s=="string")e.push(s);else if(typeof s=="function")n.push(s);else if(typeof s=="object"&&"style"in s)for(let r in s.style){let a=s.style[r];typeof a=="function"?n.push(T=>({style:{[r]:String(A(T,a))}})):o[r]=a}if(n.length===0){let s=e.join(" ");return()=>({className:s,style:o})}return s=>{let r=[...e],a={...o};for(let T=0;T<n.length;T++)h(s,n[T],r,a);return{className:r.join(" "),style:a}}}var h=(t,e,n,o)=>{let s=e(t);for(;s;){if(typeof s=="function"){s=s(t);continue}else if(typeof s=="object"&&("className"in s&&s.className&&n.push(s.className),"style"in s&&s.style))for(let r in s.style)o[r]=s.style[r];break}},A=(t,e)=>{let n=e(t);if(typeof n=="function")return A(t,n);if(process.env.NODE_ENV==="development"&&typeof n!="string"&&typeof n!="number"&&!(n instanceof String))throw new Error(`Dynamic CSS functions must return a string or number but returned ${JSON.stringify(n)}`);return n};import C from"react";import{useTheme as b}from"next-yak/context";var F={},O=(t,e)=>Object.assign(C.forwardRef(t),{[m]:[t,e]}),R=t=>Object.assign(P(t),{attrs:e=>P(t,e)}),P=(t,e)=>{let n=typeof t!="string"&&m in t,[o,s]=n?t[m]:[],r=Y(e,s);return(a,...T)=>{let d=p(a,...T);return O((c,g)=>{let l=r||d.length?b():F,y="$__attrs"in c?{theme:l,...c}:S({theme:l,...c,$__attrs:!0},r?.({theme:l,...c})),u=d(y),{theme:x,...N}=y,f=x===l?N:y,i=n?f:w(f);return i.className=I(i.className,u.className),i.style="style"in i?{...i.style,...u.style}:u.style,o?o(i,g):(i.ref=g,C.createElement(t,{...i}))},r)}},j=new Proxy(R,{get(t,e){return t(e)}}),w=t=>{let e={};for(let n in t)!n.startsWith("$")&&t[n]!==void 0&&(e[n]=t[n]);return e},I=(t,e)=>{if(!(!t&&!e))return t?e?t+" "+e:t:e},S=(t,e)=>e?(t.className===e.className||!e.className)&&(t.style===e.style||!e.style)?{...t,...e}:{...t,...e,className:I(t.className,e.className),style:{...t.style||{},...e.style||{}}}:t,Y=(t,e)=>{let n=t&&(typeof t=="function"?t:()=>t);return n&&e?o=>{let s=e(o);return S(s,n(S(o,s)))}:n||e};var M=(...t)=>{let e=t.join(" ");return()=>({className:e})};var B=(t,...e)=>t;import{useTheme as tt,YakThemeProvider as et}from"next-yak/context";var k=(t,e)=>{switch(typeof t){case"function":return n=>k(t(n),e);case"number":case"string":return`${t}${e}`;default:return}};var E=(t,e)=>({className:t.className?t.className+" "+e.className:e.className,style:{...t.style??{},...e.style}});export{et as YakThemeProvider,E as __yak_mergeCssProp,k as __yak_unitPostFix,M as atoms,p as css,B as keyframes,j as styled,tt as useTheme};
 //# sourceMappingURL=internal.js.map

package/dist/internal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../runtime/cssLiteral.tsx","../runtime/styled.tsx","../runtime/atoms.tsx","../runtime/keyframes.tsx","../runtime/internal.ts","../runtime/internals/unitPostFix.ts","../runtime/internals/mergeCssProp.ts"],"sourcesContent":["import { CSSProperties } from \"react\";\nimport type { YakTheme } from \"./index.d.ts\";\n\nexport const yakComponentSymbol = Symbol(\"yak\");\n\ntype ComponentStyles<TProps> = (props: TProps) => {\n className: string;\n style?: {\n [key: string]: string;\n };\n};\n\nexport type StaticCSSProp = {\n className: string;\n style?: CSSProperties;\n};\n\nexport type CSSInterpolation<TProps> =\n \| string\n \| number\n \| undefined\n \| null\n \| false\n \| ComponentStyles<TProps>\n \| StaticCSSProp\n \| {\n // type only identifier to allow targeting components\n // e.g. styled.svg`${Button}:hover & { fill: red; }`\n [yakComponentSymbol]: any;\n }\n \| ((props: TProps) => CSSInterpolation<TProps>);\n\ntype CSSStyles<TProps = {}> = {\n style: { [key: string]: string \| ((props: TProps) => string) };\n};\n\ntype CSSFunction = <TProps = {}>(\n styles: TemplateStringsArray,\n ...values: CSSInterpolation<TProps & { theme: YakTheme }>[]\n) => ComponentStyles<TProps>;\n\ntype PropsToClassNameFn = (props: unknown) =>\n \| {\n className?: string;\n style?: Record<string, string>;\n }\n \| PropsToClassNameFn;\n\n/*\n css() runtime factory of css``\n \n /!\\ next-yak transpiles css`` and styled``\n \n This changes the typings of the css`` and styled`` functions.\n * During development the user of next-yak wants to work with the\n * typings BEFORE compilation.\n \n Therefore this is only an internal function only and it must be cast to any\n * before exported to the user.\n /\nexport function css(styles: TemplateStringsArray, ...values: []): StaticCSSProp;\nexport function css<TProps = {}>(\n styles: TemplateStringsArray,\n ...values: CSSInterpolation<TProps & { theme: YakTheme }>[]\n): ComponentStyles<TProps>;\nexport function css<TProps>(\n ...args: Array<any>\n): StaticCSSProp \| ComponentStyles<TProps> {\n const classNames: string[] = [];\n const dynamicCssFunctions: PropsToClassNameFn[] = [];\n const style: Record<string, string> = {};\n for (const arg of args as Array<string \| CSSFunction \| CSSStyles<any>>) {\n // A CSS-module class name which got auto generated during build from static css\n // e.g. css`color: red;`\n // compiled -> css(\"yak31e4\")\n if (typeof arg === \"string\") {\n classNames.push(arg);\n }\n // Dynamic CSS e.g.\n // css`${props => props.active && css`color: red;`}`\n // compiled -> css((props: { active: boolean }) => props.active && css(\"yak31e4\"))\n else if (typeof arg === \"function\") {\n dynamicCssFunctions.push(arg as unknown as PropsToClassNameFn);\n }\n // Dynamic CSS with css variables e.g.\n // css`transform: translate(${props => props.x}, ${props => props.y});`\n // compiled -> css(\"yak31e4\", { style: { \"--yakVarX\": props => props.x }, \"--yakVarY\": props => props.y }})\n else if (typeof arg === \"object\" && \"style\" in arg) {\n for (const key in arg.style) {\n const value = arg.style[key];\n if (typeof value === \"function\") {\n dynamicCssFunctions.push((props: unknown) => ({\n style: {\n [key]: String(\n // The value for a css value can be a theme dependent function e.g.:\n // const borderColor = (props: { theme: { mode: \"dark\" \| \"light\" } }) => props.theme === \"dark\" ? \"black\" : \"white\";\n // css`border-color: ${borderColor};`\n // Therefore the value has to be extracted recursively\n recursivePropExecution(props, value),\n ),\n },\n }));\n } else {\n style[key] = value;\n }\n }\n }\n }\n\n // Non Dynamic CSS\n if (dynamicCssFunctions.length === 0) {\n const className = classNames.join(\" \");\n return () => ({ className, style });\n }\n\n return (props: unknown) => {\n const allClassNames: string[] = [...classNames];\n const allStyles: Record<string, string> = { ...style };\n for (let i = 0; i < dynamicCssFunctions.length; i++) {\n unwrapProps(props, dynamicCssFunctions[i], allClassNames, allStyles);\n }\n return {\n className: allClassNames.join(\" \"),\n style: allStyles,\n };\n };\n}\n\n// Dynamic CSS with runtime logic\nconst unwrapProps = (\n props: unknown,\n fn: PropsToClassNameFn,\n classNames: string[],\n style: Record<string, string>,\n) => {\n let result = fn(props);\n while (result) {\n if (typeof result === \"function\") {\n result = result(props);\n continue;\n } else if (typeof result === \"object\") {\n if (\"className\" in result && result.className) {\n classNames.push(result.className);\n }\n if (\"style\" in result && result.style) {\n for (const key in result.style) {\n style[key] = result.style[key];\n }\n }\n }\n break;\n }\n};\n\nconst recursivePropExecution = (\n props: unknown,\n fn: (props: unknown) => any,\n): string \| number => {\n const result = fn(props);\n if (typeof result === \"function\") {\n return recursivePropExecution(props, result);\n }\n if (process.env.NODE_ENV === \"development\") {\n if (\n typeof result !== \"string\" &&\n typeof result !== \"number\" &&\n !(result instanceof String)\n ) {\n throw new Error(\n `Dynamic CSS functions must return a string or number but returned ${JSON.stringify(\n result,\n )}`,\n );\n }\n }\n return result;\n};\n","import { ForwardRefRenderFunction, FunctionComponent } from \"react\";\nimport { CSSInterpolation, css, yakComponentSymbol } from \"./cssLiteral.js\";\nimport React from \"react\";\n\n// the following export is not relative as \"next-yak/context\"\n// links to one file for react server components and\n// to another file for classic react components\nimport { useTheme } from \"next-yak/context\";\nimport type { YakTheme } from \"./context/index.d.ts\";\n\n/* Symbols /\n\n/\n This Symbol is a fake theme which was used instead of the real one from the context\n * to speed up rendering\n /\nconst noTheme: YakTheme = {};\n\n/\n Hack to hide {[yakComponentSymbol]:[parentComponent, parentAttributeFunction]}\n * from the type definition and to deal with ExoticComponents\n /\nconst yakForwardRef: <\n TProps,\n TAttrsIn extends object,\n TAttrsOut extends AttrsMerged<TProps, TAttrsIn>,\n>(\n component: ForwardRefRenderFunction<any, TProps>,\n attrsFn?: (props: any) => any,\n) => YakComponent<TProps, TAttrsIn, TAttrsOut> = (component, attrsFn) =>\n Object.assign(React.forwardRef(component), {\n [yakComponentSymbol]: [component, attrsFn],\n }) as any;\n\n/\n All valid html tags\n /\ntype HtmlTags = keyof JSX.IntrinsicElements;\n\n/\n Return type of the provided props merged with the initial props\n * where the specified props are optional\n /\ntype AttrsMerged<TBaseProps, TIn extends object = {}> = Substitute<\n TBaseProps & { theme: YakTheme },\n TIn\n>;\n\n/\n The attrs function allows to add additional props in a function that receives\n * the current props as argument.\n /\ntype AttrsFunction<\n TBaseProps,\n TIn extends object,\n TOut extends AttrsMerged<TBaseProps, TIn> = AttrsMerged<TBaseProps, TIn>,\n> = (p: Substitute<TBaseProps & { theme: YakTheme }, TIn>) => Partial<TOut>;\n\n/\n The attrs function allows to add additional props to a styled component.\n * The props can be specified as an object or as a function that receives the\n * current props as argument.\n /\ntype Attrs<\n TBaseProps,\n TIn extends object = {},\n TOut extends AttrsMerged<TBaseProps, TIn> = AttrsMerged<TBaseProps, TIn>,\n> = Partial<TOut> \| AttrsFunction<TBaseProps, TIn, TOut>;\n\n//\n// The `styled()` and `styled.` API\n//\n// The API design is inspired by styled-components:\n// https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/constructors/styled.tsx\n// https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/models/StyledComponent.ts\n//\nconst StyledFactory = <T,>(Component: HtmlTags \| FunctionComponent<T>) =>\n Object.assign(yakStyled(Component), {\n attrs: <\n TAttrsIn extends object = {},\n TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>,\n >(\n attrs: Attrs<T, TAttrsIn, TAttrsOut>,\n ) => yakStyled<T, TAttrsIn, TAttrsOut>(Component, attrs),\n });\n\n/\n A yak component has a special symbol attached to it that allows to\n * target the component from a child component and to correctly handle the attrs function (if any).\n * e.g. styled.svg`${Button}:hover & { fill: red; }` or styled(Button)`color: red;`\n /\ntype YakComponent<\n T,\n TAttrsIn extends object = {},\n TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>,\n> = FunctionComponent<T> & {\n [yakComponentSymbol]: [\n FunctionComponent<T>,\n AttrsFunction<T, TAttrsIn, TAttrsOut>,\n ];\n};\n\nconst yakStyled = <\n T,\n TAttrsIn extends object = {},\n TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>,\n>(\n Component:\n \| FunctionComponent<T>\n \| YakComponent<T, TAttrsIn, TAttrsOut>\n \| HtmlTags,\n attrs?: Attrs<T, TAttrsIn, TAttrsOut>,\n) => {\n const isYakComponent =\n typeof Component !== \"string\" && yakComponentSymbol in Component;\n\n // if the component that is wrapped is a yak component, we can extract it to render the underlying component directly\n // and we can also extract the attrs function to merge it with the current attrs function so that the sequence of\n // the attrs functions is preserved\n const [parentYakComponent, parentAttrsFn] = isYakComponent\n ? Component[yakComponentSymbol]\n : [];\n\n const mergedAttrsFn = buildRuntimeAttrsProcessor(attrs, parentAttrsFn);\n\n return <TCSSProps extends object = {}>(\n styles: TemplateStringsArray,\n ...values: Array<\n CSSInterpolation<T & NoInfer<TCSSProps> & { theme: YakTheme }>\n >\n ) => {\n const getRuntimeStyles = css(styles, ...values);\n const yak = (props: Substitute<TCSSProps & T, TAttrsIn>, ref: unknown) => {\n // if the css component does not require arguments\n // it can be called without arguments and we skip calling useTheme()\n //\n // `attrsFn \|\| getRuntimeStyles.length` is NOT against the rule of hooks as\n // getRuntimeStyles and attrsFn are constants defined outside of the component\n //\n // for example\n //\n // const Button = styled.button`color: red;`\n // ^ does not need to have access to theme, so we skip calling useTheme()\n //\n // const Button = styled.button`${({ theme }) => css`color: ${theme.color};`}`\n // ^ must be have access to theme, so we call useTheme()\n const theme =\n mergedAttrsFn \|\| getRuntimeStyles.length ? useTheme() : noTheme;\n\n // The first components which is not wrapped in a yak component will execute all attrs functions\n // starting from the innermost yak component to the outermost yak component (itself)\n const combinedProps =\n \"$__attrs\" in props\n ? // if the props already contain the $__attrs key, we assume that the props have already been processed\n // and skip processing the attrs again.\n // e.g. const Child = styled(Parent)`color: red;`\n // We process the attrs once in the child (with all attrs functions merged (including the one from the child))\n // and in the subsequent call in the parent we skip processing the attrs again\n {\n theme,\n ...props,\n }\n : // overwrite and merge the current props with the processed attrs\n combineProps(\n {\n theme,\n ...(props as {\n className?: string;\n style?: React.CSSProperties;\n }),\n // mark the props as processed\n $__attrs: true,\n },\n mergedAttrsFn?.({ theme, ...props } as Substitute<\n T & { theme: YakTheme },\n TAttrsIn\n >),\n );\n // execute all functions inside the style literal\n // e.g. styled.button`color: ${props => props.color};`\n const runtimeStyles = getRuntimeStyles(combinedProps as T & TCSSProps);\n\n // delete the yak theme from the props\n // this must happen after the runtimeStyles are calculated\n // prevents passing the theme prop to the DOM element of a styled component\n const { theme: themeAfterAttr, ...combinedPropsWithoutTheme } =\n combinedProps as { theme?: unknown };\n const propsBeforeFiltering =\n themeAfterAttr === theme ? combinedPropsWithoutTheme : combinedProps;\n\n // remove all props that start with a $ sign for string components e.g. \"button\" or \"div\"\n // so that they are not passed to the DOM element\n const filteredProps = !isYakComponent\n ? removeNonDomProperties(propsBeforeFiltering)\n : propsBeforeFiltering;\n\n // yak provides a className and style prop that needs to be merged with the\n // user provided className and style prop\n (filteredProps as { className?: string }).className = mergeClassNames(\n (filteredProps as { className?: string }).className,\n runtimeStyles.className,\n );\n (filteredProps as { style?: React.CSSProperties }).style =\n \"style\" in filteredProps\n ? {\n ...(filteredProps as { style?: React.CSSProperties }).style,\n ...runtimeStyles.style,\n }\n : runtimeStyles.style;\n // if the styled(Component) syntax is used and the component is a yak component\n // we can call the yak function directly to avoid an unnecessary wrapper with an additional\n // forwardRef call\n if (parentYakComponent) {\n return parentYakComponent(filteredProps as T, ref);\n }\n (filteredProps as { ref?: unknown }).ref = ref;\n return <Component {...(filteredProps as any)} />;\n };\n return yakForwardRef(yak, mergedAttrsFn);\n };\n};\n\n/\n Type for the proxy object returned by `styled` that allows to\n * access all html tags as properties.\n /\ntype StyledLiteral<T> = <TCSSProps>(\n styles: TemplateStringsArray,\n ...values: Array<\n CSSInterpolation<\n T &\n // don't allow inference from types in the tagged template literal\n // additional benefit is that destruction is now typed and provides hints\n NoInfer<TCSSProps> & { theme: YakTheme }\n >\n >\n) => YakComponent<TCSSProps & T>;\n\n/\n The `styled` method works perfectly on all of your own or any third-party component,\n * as long as they attach the passed className prop to a DOM element.\n \n @usage\n \n ```tsx\n * const StyledLink = styled(Link)`\n * color: #BF4F74;\n * font-weight: bold;\n * `;\n * ```\n /\nexport const styled = new Proxy(\n StyledFactory as typeof StyledFactory & {\n [Tag in HtmlTags]: StyledLiteral<JSX.IntrinsicElements[Tag]> & {\n attrs: <\n TAttrsIn extends object = {},\n TAttrsOut extends AttrsMerged<\n JSX.IntrinsicElements[Tag],\n TAttrsIn\n > = AttrsMerged<JSX.IntrinsicElements[Tag], TAttrsIn>,\n >(\n attrs: Attrs<JSX.IntrinsicElements[Tag], TAttrsIn, TAttrsOut>,\n ) => StyledLiteral<Substitute<JSX.IntrinsicElements[Tag], TAttrsIn>>;\n };\n },\n {\n get(target, TagName: keyof JSX.IntrinsicElements) {\n return target(TagName);\n },\n },\n);\n\n/\n Remove all entries that start with a $ sign\n \n This allows to have props that are used for internal stylingen purposes\n * but are not be passed to the DOM element\n /\nconst removeNonDomProperties = <T extends Record<string, unknown>>(obj: T) => {\n const result = {} as T;\n for (const key in obj) {\n if (!key.startsWith(\"$\") && obj[key] !== undefined) {\n result[key] = obj[key];\n }\n }\n return result;\n};\n\n// util function to merge class names, as they are concatenated with a space\nconst mergeClassNames = (a?: string, b?: string) => {\n if (!a && !b) return undefined;\n if (!a) return b;\n if (!b) return a;\n return a + \" \" + b;\n};\n\n/\n merge props and processed props (including class names and styles)\n * e.g.:\\\n * `{ className: \"a\", foo: 1 }` and `{ className: \"b\", bar: 2 }` \\\n * => `{ className: \"a b\", foo: 1, bar: 2 }`\n /\nconst combineProps = <\n T extends {\n className?: string;\n style?: React.CSSProperties;\n },\n TOther extends\n \| {\n className?: string;\n style?: React.CSSProperties;\n }\n \| null\n \| undefined,\n>(\n props: T,\n newProps: TOther,\n) =>\n newProps\n ? (props.className === newProps.className \|\| !newProps.className) &&\n (props.style === newProps.style \|\| !newProps.style)\n ? // shortcut if no style and class merging is necessary\n {\n ...props,\n ...newProps,\n }\n : // merge class names and styles\n {\n ...props,\n ...newProps,\n className: mergeClassNames(props.className, newProps.className),\n style: { ...(props.style \|\| {}), ...(newProps.style \|\| {}) },\n }\n : // if no new props are provided, no merging is necessary\n props;\n\n// util type to remove properties from an object\ntype FastOmit<T extends object, U extends string \| number \| symbol> = {\n [K in keyof T as K extends U ? never : K]: T[K];\n};\n\n// util type to merge two objects\n// if a property is present in both objects the property from B is used\nexport type Substitute<A extends object, B extends object> = FastOmit<\n A,\n keyof B\n> &\n B;\n\n/\n Merges the attrs function of the current component with the attrs function of the parent component\n * in order to preserve the sequence of the attrs functions.\n * Note: In theory, the parentAttrsFn can have different types for TAttrsIn and TAttrsOut\n * but as this is only used internally, we can ignore and simplify this case\n * @param attrs The attrs object or function of the current component (if any)\n * @param parentAttrsFn The attrs function of the parent/wrapped component (if any)\n * @returns A function that receives the props and returns the transformed props\n /\nconst buildRuntimeAttrsProcessor = <\n T,\n TAttrsIn extends object,\n TAttrsOut extends AttrsMerged<T, TAttrsIn>,\n>(\n attrs?: Attrs<T, TAttrsIn, TAttrsOut>,\n parentAttrsFn?: AttrsFunction<T, TAttrsIn, TAttrsOut>,\n): AttrsFunction<T, TAttrsIn, TAttrsOut> \| undefined => {\n const ownAttrsFn =\n attrs && (typeof attrs === \"function\" ? attrs : () => attrs);\n\n if (ownAttrsFn && parentAttrsFn) {\n return (props) => {\n const parentProps = parentAttrsFn(props);\n\n // overwrite and merge the parent props with the props received from the attrs function\n // after they went through the parent attrs function.\n //\n // This makes sure the linearity of the attrs functions is preserved and all attrs function receive\n // the whole props object calculated from the previous attrs functions\n return combineProps(\n parentProps,\n ownAttrsFn(combineProps(props, parentProps)),\n );\n };\n }\n\n return ownAttrsFn \|\| parentAttrsFn;\n};\n","/\n Allows to use atomic CSS classes in a styled or css block\n \n @usage\n \n ```tsx\n * import { styled, atoms } from \"next-yak\";\n \n const Button = styled.button<{ $primary?: boolean }>`\n * ${atoms(\"text-teal-600\", \"text-base\", \"rounded-md\")}\n * ${props => props.$primary && atoms(\"shadow-md\")}\n * `;\n * ```\n /\nexport const atoms = (...atoms: string[]) => {\n const className = atoms.join(\" \");\n return () => ({ className });\n};\n","/\n Allows to use CSS keyframe animations in a styled or css block\n \n @usage\n \n ```tsx\n * import { styled, keyframes } from \"next-yak\";\n \n const rotate = keyframes`\n * from {\n * transform: rotate(0deg);\n * }\n * to {\n * transform: rotate(360deg);\n * }\n * `;\n \n const Spinner = styled.div`\n * animation: ${rotate} 1s linear infinite;\n * `;\n * ```\n /\nexport const keyframes = (\n styles: TemplateStringsArray,\n ...dynamic: never[]\n): string => {\n // during compilation all args of keyframe are compiled\n // to a string which references the animation name\n return styles as any as string;\n};\n","/\n IMPORTANT: This file contains the internal implementation of next-yak's core APIs.\n \n Purpose:\n * - Provides the actual runtime implementations for styled, css, keyframes, etc.\n * - Referenced only by the compiled code \"next-yak/internal\"\n \n Usage:\n * - DO NOT import from this file directly in your application code.\n * - Always use `import { ... } from \"next-yak\"` in your source files.\n * - The Babel plugin will automatically transform those imports to use this internal module.\n \n Why this exists:\n * 1. Allows for cleaner separation between the public API and internal implementation\n * 2. Enables better typing for both pre-compilation (user code) and post-compilation scenarios\n * 3. Easier testing and snapshot comparisons without hashes (in index.ts)\n * 4. Makes next-yak work out-of-the-box with testing frameworks like Jest and Vitest\n \n Note for maintainers:\n * - Ensure that types from this file are not published to avoid exposing internal APIs.\n \n @internal This module is not intended for direct usage and may change without notice.\n /\n\nexport { css } from \"./cssLiteral.js\";\nexport { styled } from \"./styled.js\";\nexport { atoms } from \"./atoms.js\";\nexport { keyframes } from \"./keyframes.js\";\n\n// the following export is not relative as \"next-yak/context\"\n// links to one file for react server components and\n// to another file for classic react components\nexport { useTheme, YakThemeProvider } from \"next-yak/context\";\n\n// runtime internals (helpers which get injected by the compiler)\nexport { unitPostFix as __yak_unitPostFix } from \"./internals/unitPostFix.js\";\nexport { mergeCssProp as __yak_mergeCssProp } from \"./internals/mergeCssProp.js\";\n","/\n Internal helper called by transformed code - Do not use directly\n \n Takes a function and a css unit and returns the result of the function concatenated with the unit\n \n ```tsx\n * import { styled } from \"next-yak\";\n \n const Button = styled.button<{ $width?: boolean }>`\n * width: ${({ $width }) => $width}px;\n * `;\n * ```\n \n Which will be transformed to:\n * ```tsx\n * import { styled } from \"next-yak/internals\";\n \n const Button = styled.button<{ $width?: boolean }>(\n * \"button\", {\n * width: unitPostFix({ $width }) => $width, \"px\")\n * });\n /\nexport const unitPostFix = (arg: unknown, unit: string) => {\n switch (typeof arg) {\n case \"function\":\n return (props: any) => unitPostFix(arg(props), unit);\n case \"number\":\n case \"string\":\n return `${arg}${unit}`;\n // Ignore falsy values\n default:\n return undefined;\n }\n};\n","/\n This is an internal helper function to merge relevant props of a native element with a css prop.\n * It's automatically added when using the `css` prop in a JSX element.\n * e.g.:\n * ```tsx\n * <p\n * className=\"foo\"\n * css={css`\n * color: green;\n * `}\n * {...{ style: { padding: \"30px\" }}}\n * />\n */\nexport const mergeCssProp = (\n relevantProps: Record<string, unknown>,\n cssProp: {\n className: string;\n style?: Record<string, unknown>;\n },\n) => {\n return {\n className: relevantProps.className\n ? relevantProps.className + \" \" + cssProp.className\n : cssProp.className,\n style: { ...(relevantProps.style ?? {}), ...cssProp.style },\n };\n};\n"],"mappings":"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","names":["yakComponentSymbol","css","args","classNames","dynamicCssFunctions","style","arg","key","value","props","recursivePropExecution","className","allClassNames","allStyles","i","unwrapProps","fn","result","React","useTheme","noTheme","yakForwardRef","component","attrsFn","yakComponentSymbol","StyledFactory","Component","yakStyled","attrs","isYakComponent","parentYakComponent","parentAttrsFn","mergedAttrsFn","buildRuntimeAttrsProcessor","styles","values","getRuntimeStyles","css","props","ref","theme","combinedProps","combineProps","runtimeStyles","themeAfterAttr","combinedPropsWithoutTheme","propsBeforeFiltering","filteredProps","removeNonDomProperties","mergeClassNames","styled","target","TagName","obj","result","key","a","b","newProps","ownAttrsFn","parentProps","atoms","className","keyframes","styles","dynamic","useTheme","YakThemeProvider","unitPostFix","arg","unit","props","mergeCssProp","relevantProps","cssProp"]}
1	+ {"version":3,"sources":["../runtime/cssLiteral.tsx","../runtime/styled.tsx","../runtime/atoms.tsx","../runtime/keyframes.tsx","../runtime/internal.ts","../runtime/internals/unitPostFix.ts","../runtime/internals/mergeCssProp.ts"],"sourcesContent":["import { CSSProperties } from \"react\";\nimport type { YakTheme } from \"./index.d.ts\";\n\nexport const yakComponentSymbol = Symbol(\"yak\");\n\ntype ComponentStyles<TProps> = (props: TProps) => {\n className: string;\n style?: {\n [key: string]: string;\n };\n};\n\nexport type StaticCSSProp = {\n className: string;\n style?: CSSProperties;\n};\n\nexport type CSSInterpolation<TProps> =\n \| string\n \| number\n \| undefined\n \| null\n \| false\n \| ComponentStyles<TProps>\n \| StaticCSSProp\n \| {\n // type only identifier to allow targeting components\n // e.g. styled.svg`${Button}:hover & { fill: red; }`\n [yakComponentSymbol]: any;\n }\n \| ((props: TProps) => CSSInterpolation<TProps>);\n\ntype CSSStyles<TProps = {}> = {\n style: { [key: string]: string \| ((props: TProps) => string) };\n};\n\ntype CSSFunction = <TProps = {}>(\n styles: TemplateStringsArray,\n ...values: CSSInterpolation<TProps & { theme: YakTheme }>[]\n) => ComponentStyles<TProps>;\n\ntype PropsToClassNameFn = (props: unknown) =>\n \| {\n className?: string;\n style?: Record<string, string>;\n }\n \| PropsToClassNameFn;\n\n/*\n css() runtime factory of css``\n \n /!\\ next-yak transpiles css`` and styled``\n \n This changes the typings of the css`` and styled`` functions.\n * During development the user of next-yak wants to work with the\n * typings BEFORE compilation.\n \n Therefore this is only an internal function only and it must be cast to any\n * before exported to the user.\n /\nexport function css(styles: TemplateStringsArray, ...values: []): StaticCSSProp;\nexport function css<TProps = {}>(\n styles: TemplateStringsArray,\n ...values: CSSInterpolation<TProps & { theme: YakTheme }>[]\n): ComponentStyles<TProps>;\nexport function css<TProps>(\n ...args: Array<any>\n): StaticCSSProp \| ComponentStyles<TProps> {\n const classNames: string[] = [];\n const dynamicCssFunctions: PropsToClassNameFn[] = [];\n const style: Record<string, string> = {};\n for (const arg of args as Array<string \| CSSFunction \| CSSStyles<any>>) {\n // A CSS-module class name which got auto generated during build from static css\n // e.g. css`color: red;`\n // compiled -> css(\"yak31e4\")\n if (typeof arg === \"string\") {\n classNames.push(arg);\n }\n // Dynamic CSS e.g.\n // css`${props => props.active && css`color: red;`}`\n // compiled -> css((props: { active: boolean }) => props.active && css(\"yak31e4\"))\n else if (typeof arg === \"function\") {\n dynamicCssFunctions.push(arg as unknown as PropsToClassNameFn);\n }\n // Dynamic CSS with css variables e.g.\n // css`transform: translate(${props => props.x}, ${props => props.y});`\n // compiled -> css(\"yak31e4\", { style: { \"--yakVarX\": props => props.x }, \"--yakVarY\": props => props.y }})\n else if (typeof arg === \"object\" && \"style\" in arg) {\n for (const key in arg.style) {\n const value = arg.style[key];\n if (typeof value === \"function\") {\n dynamicCssFunctions.push((props: unknown) => ({\n style: {\n [key]: String(\n // The value for a css value can be a theme dependent function e.g.:\n // const borderColor = (props: { theme: { mode: \"dark\" \| \"light\" } }) => props.theme === \"dark\" ? \"black\" : \"white\";\n // css`border-color: ${borderColor};`\n // Therefore the value has to be extracted recursively\n recursivePropExecution(props, value),\n ),\n },\n }));\n } else {\n style[key] = value;\n }\n }\n }\n }\n\n // Non Dynamic CSS\n if (dynamicCssFunctions.length === 0) {\n const className = classNames.join(\" \");\n return () => ({ className, style });\n }\n\n return (props: unknown) => {\n const allClassNames: string[] = [...classNames];\n const allStyles: Record<string, string> = { ...style };\n for (let i = 0; i < dynamicCssFunctions.length; i++) {\n unwrapProps(props, dynamicCssFunctions[i], allClassNames, allStyles);\n }\n return {\n className: allClassNames.join(\" \"),\n style: allStyles,\n };\n };\n}\n\n// Dynamic CSS with runtime logic\nconst unwrapProps = (\n props: unknown,\n fn: PropsToClassNameFn,\n classNames: string[],\n style: Record<string, string>,\n) => {\n let result = fn(props);\n while (result) {\n if (typeof result === \"function\") {\n result = result(props);\n continue;\n } else if (typeof result === \"object\") {\n if (\"className\" in result && result.className) {\n classNames.push(result.className);\n }\n if (\"style\" in result && result.style) {\n for (const key in result.style) {\n style[key] = result.style[key];\n }\n }\n }\n break;\n }\n};\n\nconst recursivePropExecution = (\n props: unknown,\n fn: (props: unknown) => any,\n): string \| number => {\n const result = fn(props);\n if (typeof result === \"function\") {\n return recursivePropExecution(props, result);\n }\n if (process.env.NODE_ENV === \"development\") {\n if (\n typeof result !== \"string\" &&\n typeof result !== \"number\" &&\n !(result instanceof String)\n ) {\n throw new Error(\n `Dynamic CSS functions must return a string or number but returned ${JSON.stringify(\n result,\n )}`,\n );\n }\n }\n return result;\n};\n","import { ForwardRefRenderFunction } from \"react\";\nimport { CSSInterpolation, css, yakComponentSymbol } from \"./cssLiteral.js\";\nimport React from \"react\";\n\n// the following export is not relative as \"next-yak/context\"\n// links to one file for react server components and\n// to another file for classic react components\nimport { useTheme } from \"next-yak/context\";\nimport type { YakTheme } from \"./context/index.d.ts\";\n\n/* Symbols /\n\n/\n This Symbol is a fake theme which was used instead of the real one from the context\n * to speed up rendering\n /\nconst noTheme: YakTheme = {};\n\n/\n Hack to hide {[yakComponentSymbol]:[parentComponent, parentAttributeFunction]}\n * from the type definition and to deal with ExoticComponents\n /\nconst yakForwardRef: <\n TProps,\n TAttrsIn extends object,\n TAttrsOut extends AttrsMerged<TProps, TAttrsIn>,\n>(\n component: ForwardRefRenderFunction<any, TProps>,\n attrsFn?: (props: any) => any,\n) => YakComponent<TProps, TAttrsIn, TAttrsOut> = (component, attrsFn) =>\n Object.assign(React.forwardRef(component), {\n [yakComponentSymbol]: [component, attrsFn],\n }) as any;\n\n/\n Minimal type for a function component that works with next-yak\n /\ntype FunctionComponent<T> = (props: T, context?: any) => React.ReactNode;\n\n/\n All valid html tags\n /\ntype HtmlTags = keyof JSX.IntrinsicElements;\n\n/\n Return type of the provided props merged with the initial props\n * where the specified props are optional\n /\ntype AttrsMerged<TBaseProps, TIn extends object = {}> = Substitute<\n TBaseProps & { theme: YakTheme },\n TIn\n>;\n\n/\n The attrs function allows to add additional props in a function that receives\n * the current props as argument.\n /\ntype AttrsFunction<\n TBaseProps,\n TIn extends object,\n TOut extends AttrsMerged<TBaseProps, TIn> = AttrsMerged<TBaseProps, TIn>,\n> = (p: Substitute<TBaseProps & { theme: YakTheme }, TIn>) => Partial<TOut>;\n\n/\n The attrs function allows to add additional props to a styled component.\n * The props can be specified as an object or as a function that receives the\n * current props as argument.\n /\ntype Attrs<\n TBaseProps,\n TIn extends object = {},\n TOut extends AttrsMerged<TBaseProps, TIn> = AttrsMerged<TBaseProps, TIn>,\n> = Partial<TOut> \| AttrsFunction<TBaseProps, TIn, TOut>;\n\n//\n// The `styled()` and `styled.` API\n//\n// The API design is inspired by styled-components:\n// https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/constructors/styled.tsx\n// https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/models/StyledComponent.ts\n//\nconst StyledFactory = <T,>(Component: HtmlTags \| FunctionComponent<T>) =>\n Object.assign(yakStyled(Component), {\n attrs: <\n TAttrsIn extends object = {},\n TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>,\n >(\n attrs: Attrs<T, TAttrsIn, TAttrsOut>,\n ) => yakStyled<T, TAttrsIn, TAttrsOut>(Component, attrs),\n });\n\n/\n A yak component has a special symbol attached to it that allows to\n * target the component from a child component and to correctly handle the attrs function (if any).\n * e.g. styled.svg`${Button}:hover & { fill: red; }` or styled(Button)`color: red;`\n /\ntype YakComponent<\n T,\n TAttrsIn extends object = {},\n TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>,\n> = FunctionComponent<T> & {\n [yakComponentSymbol]: [\n FunctionComponent<T>,\n AttrsFunction<T, TAttrsIn, TAttrsOut>,\n ];\n};\n\nconst yakStyled = <\n T,\n TAttrsIn extends object = {},\n TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>,\n>(\n Component:\n \| FunctionComponent<T>\n \| YakComponent<T, TAttrsIn, TAttrsOut>\n \| HtmlTags,\n attrs?: Attrs<T, TAttrsIn, TAttrsOut>,\n) => {\n const isYakComponent =\n typeof Component !== \"string\" && yakComponentSymbol in Component;\n\n // if the component that is wrapped is a yak component, we can extract it to render the underlying component directly\n // and we can also extract the attrs function to merge it with the current attrs function so that the sequence of\n // the attrs functions is preserved\n const [parentYakComponent, parentAttrsFn] = isYakComponent\n ? Component[yakComponentSymbol]\n : [];\n\n const mergedAttrsFn = buildRuntimeAttrsProcessor(attrs, parentAttrsFn);\n\n return <TCSSProps extends object = {}>(\n styles: TemplateStringsArray,\n ...values: Array<\n CSSInterpolation<T & NoInfer<TCSSProps> & { theme: YakTheme }>\n >\n ) => {\n const getRuntimeStyles = css(styles, ...values);\n const yak = (props: Substitute<TCSSProps & T, TAttrsIn>, ref: unknown) => {\n // if the css component does not require arguments\n // it can be called without arguments and we skip calling useTheme()\n //\n // `attrsFn \|\| getRuntimeStyles.length` is NOT against the rule of hooks as\n // getRuntimeStyles and attrsFn are constants defined outside of the component\n //\n // for example\n //\n // const Button = styled.button`color: red;`\n // ^ does not need to have access to theme, so we skip calling useTheme()\n //\n // const Button = styled.button`${({ theme }) => css`color: ${theme.color};`}`\n // ^ must be have access to theme, so we call useTheme()\n const theme =\n mergedAttrsFn \|\| getRuntimeStyles.length ? useTheme() : noTheme;\n\n // The first components which is not wrapped in a yak component will execute all attrs functions\n // starting from the innermost yak component to the outermost yak component (itself)\n const combinedProps =\n \"$__attrs\" in props\n ? // if the props already contain the $__attrs key, we assume that the props have already been processed\n // and skip processing the attrs again.\n // e.g. const Child = styled(Parent)`color: red;`\n // We process the attrs once in the child (with all attrs functions merged (including the one from the child))\n // and in the subsequent call in the parent we skip processing the attrs again\n {\n theme,\n ...props,\n }\n : // overwrite and merge the current props with the processed attrs\n combineProps(\n {\n theme,\n ...(props as {\n className?: string;\n style?: React.CSSProperties;\n }),\n // mark the props as processed\n $__attrs: true,\n },\n mergedAttrsFn?.({ theme, ...props } as Substitute<\n T & { theme: YakTheme },\n TAttrsIn\n >),\n );\n // execute all functions inside the style literal\n // e.g. styled.button`color: ${props => props.color};`\n const runtimeStyles = getRuntimeStyles(combinedProps as T & TCSSProps);\n\n // delete the yak theme from the props\n // this must happen after the runtimeStyles are calculated\n // prevents passing the theme prop to the DOM element of a styled component\n const { theme: themeAfterAttr, ...combinedPropsWithoutTheme } =\n combinedProps as { theme?: unknown };\n const propsBeforeFiltering =\n themeAfterAttr === theme ? combinedPropsWithoutTheme : combinedProps;\n\n // remove all props that start with a $ sign for string components e.g. \"button\" or \"div\"\n // so that they are not passed to the DOM element\n const filteredProps = !isYakComponent\n ? removeNonDomProperties(propsBeforeFiltering)\n : propsBeforeFiltering;\n\n // yak provides a className and style prop that needs to be merged with the\n // user provided className and style prop\n (filteredProps as { className?: string }).className = mergeClassNames(\n (filteredProps as { className?: string }).className,\n runtimeStyles.className,\n );\n (filteredProps as { style?: React.CSSProperties }).style =\n \"style\" in filteredProps\n ? {\n ...(filteredProps as { style?: React.CSSProperties }).style,\n ...runtimeStyles.style,\n }\n : runtimeStyles.style;\n // if the styled(Component) syntax is used and the component is a yak component\n // we can call the yak function directly to avoid an unnecessary wrapper with an additional\n // forwardRef call\n if (parentYakComponent) {\n return parentYakComponent(filteredProps as T, ref);\n }\n (filteredProps as { ref?: unknown }).ref = ref;\n return <Component {...(filteredProps as any)} />;\n };\n return yakForwardRef(yak, mergedAttrsFn);\n };\n};\n\n/\n Type for the proxy object returned by `styled` that allows to\n * access all html tags as properties.\n /\ntype StyledLiteral<T> = <TCSSProps>(\n styles: TemplateStringsArray,\n ...values: Array<\n CSSInterpolation<\n T &\n // don't allow inference from types in the tagged template literal\n // additional benefit is that destruction is now typed and provides hints\n NoInfer<TCSSProps> & { theme: YakTheme }\n >\n >\n) => YakComponent<TCSSProps & T>;\n\n/\n The `styled` method works perfectly on all of your own or any third-party component,\n * as long as they attach the passed className prop to a DOM element.\n \n @usage\n \n ```tsx\n * const StyledLink = styled(Link)`\n * color: #BF4F74;\n * font-weight: bold;\n * `;\n * ```\n /\nexport const styled = new Proxy(\n StyledFactory as typeof StyledFactory & {\n [Tag in HtmlTags]: StyledLiteral<JSX.IntrinsicElements[Tag]> & {\n attrs: <\n TAttrsIn extends object = {},\n TAttrsOut extends AttrsMerged<\n JSX.IntrinsicElements[Tag],\n TAttrsIn\n > = AttrsMerged<JSX.IntrinsicElements[Tag], TAttrsIn>,\n >(\n attrs: Attrs<JSX.IntrinsicElements[Tag], TAttrsIn, TAttrsOut>,\n ) => StyledLiteral<Substitute<JSX.IntrinsicElements[Tag], TAttrsIn>>;\n };\n },\n {\n get(target, TagName: keyof JSX.IntrinsicElements) {\n return target(TagName);\n },\n },\n);\n\n/\n Remove all entries that start with a $ sign\n \n This allows to have props that are used for internal stylingen purposes\n * but are not be passed to the DOM element\n /\nconst removeNonDomProperties = <T extends Record<string, unknown>>(obj: T) => {\n const result = {} as T;\n for (const key in obj) {\n if (!key.startsWith(\"$\") && obj[key] !== undefined) {\n result[key] = obj[key];\n }\n }\n return result;\n};\n\n// util function to merge class names, as they are concatenated with a space\nconst mergeClassNames = (a?: string, b?: string) => {\n if (!a && !b) return undefined;\n if (!a) return b;\n if (!b) return a;\n return a + \" \" + b;\n};\n\n/\n merge props and processed props (including class names and styles)\n * e.g.:\\\n * `{ className: \"a\", foo: 1 }` and `{ className: \"b\", bar: 2 }` \\\n * => `{ className: \"a b\", foo: 1, bar: 2 }`\n /\nconst combineProps = <\n T extends {\n className?: string;\n style?: React.CSSProperties;\n },\n TOther extends\n \| {\n className?: string;\n style?: React.CSSProperties;\n }\n \| null\n \| undefined,\n>(\n props: T,\n newProps: TOther,\n) =>\n newProps\n ? (props.className === newProps.className \|\| !newProps.className) &&\n (props.style === newProps.style \|\| !newProps.style)\n ? // shortcut if no style and class merging is necessary\n {\n ...props,\n ...newProps,\n }\n : // merge class names and styles\n {\n ...props,\n ...newProps,\n className: mergeClassNames(props.className, newProps.className),\n style: { ...(props.style \|\| {}), ...(newProps.style \|\| {}) },\n }\n : // if no new props are provided, no merging is necessary\n props;\n\n// util type to remove properties from an object\ntype FastOmit<T extends object, U extends string \| number \| symbol> = {\n [K in keyof T as K extends U ? never : K]: T[K];\n};\n\n// util type to merge two objects\n// if a property is present in both objects the property from B is used\nexport type Substitute<A extends object, B extends object> = FastOmit<\n A,\n keyof B\n> &\n B;\n\n/\n Merges the attrs function of the current component with the attrs function of the parent component\n * in order to preserve the sequence of the attrs functions.\n * Note: In theory, the parentAttrsFn can have different types for TAttrsIn and TAttrsOut\n * but as this is only used internally, we can ignore and simplify this case\n * @param attrs The attrs object or function of the current component (if any)\n * @param parentAttrsFn The attrs function of the parent/wrapped component (if any)\n * @returns A function that receives the props and returns the transformed props\n /\nconst buildRuntimeAttrsProcessor = <\n T,\n TAttrsIn extends object,\n TAttrsOut extends AttrsMerged<T, TAttrsIn>,\n>(\n attrs?: Attrs<T, TAttrsIn, TAttrsOut>,\n parentAttrsFn?: AttrsFunction<T, TAttrsIn, TAttrsOut>,\n): AttrsFunction<T, TAttrsIn, TAttrsOut> \| undefined => {\n const ownAttrsFn =\n attrs && (typeof attrs === \"function\" ? attrs : () => attrs);\n\n if (ownAttrsFn && parentAttrsFn) {\n return (props) => {\n const parentProps = parentAttrsFn(props);\n\n // overwrite and merge the parent props with the props received from the attrs function\n // after they went through the parent attrs function.\n //\n // This makes sure the linearity of the attrs functions is preserved and all attrs function receive\n // the whole props object calculated from the previous attrs functions\n return combineProps(\n parentProps,\n ownAttrsFn(combineProps(props, parentProps)),\n );\n };\n }\n\n return ownAttrsFn \|\| parentAttrsFn;\n};\n","/\n Allows to use atomic CSS classes in a styled or css block\n \n @usage\n \n ```tsx\n * import { styled, atoms } from \"next-yak\";\n \n const Button = styled.button<{ $primary?: boolean }>`\n * ${atoms(\"text-teal-600\", \"text-base\", \"rounded-md\")}\n * ${props => props.$primary && atoms(\"shadow-md\")}\n * `;\n * ```\n /\nexport const atoms = (...atoms: string[]) => {\n const className = atoms.join(\" \");\n return () => ({ className });\n};\n","/\n Allows to use CSS keyframe animations in a styled or css block\n \n @usage\n \n ```tsx\n * import { styled, keyframes } from \"next-yak\";\n \n const rotate = keyframes`\n * from {\n * transform: rotate(0deg);\n * }\n * to {\n * transform: rotate(360deg);\n * }\n * `;\n \n const Spinner = styled.div`\n * animation: ${rotate} 1s linear infinite;\n * `;\n * ```\n /\nexport const keyframes = (\n styles: TemplateStringsArray,\n ...dynamic: never[]\n): string => {\n // during compilation all args of keyframe are compiled\n // to a string which references the animation name\n return styles as any as string;\n};\n","/\n IMPORTANT: This file contains the internal implementation of next-yak's core APIs.\n \n Purpose:\n * - Provides the actual runtime implementations for styled, css, keyframes, etc.\n * - Referenced only by the compiled code \"next-yak/internal\"\n \n Usage:\n * - DO NOT import from this file directly in your application code.\n * - Always use `import { ... } from \"next-yak\"` in your source files.\n * - The Babel plugin will automatically transform those imports to use this internal module.\n \n Why this exists:\n * 1. Allows for cleaner separation between the public API and internal implementation\n * 2. Enables better typing for both pre-compilation (user code) and post-compilation scenarios\n * 3. Easier testing and snapshot comparisons without hashes (in index.ts)\n * 4. Makes next-yak work out-of-the-box with testing frameworks like Jest and Vitest\n \n Note for maintainers:\n * - Ensure that types from this file are not published to avoid exposing internal APIs.\n \n @internal This module is not intended for direct usage and may change without notice.\n /\n\nexport { css } from \"./cssLiteral.js\";\nexport { styled } from \"./styled.js\";\nexport { atoms } from \"./atoms.js\";\nexport { keyframes } from \"./keyframes.js\";\n\n// the following export is not relative as \"next-yak/context\"\n// links to one file for react server components and\n// to another file for classic react components\nexport { useTheme, YakThemeProvider } from \"next-yak/context\";\n\n// runtime internals (helpers which get injected by the compiler)\nexport { unitPostFix as __yak_unitPostFix } from \"./internals/unitPostFix.js\";\nexport { mergeCssProp as __yak_mergeCssProp } from \"./internals/mergeCssProp.js\";\n","/\n Internal helper called by transformed code - Do not use directly\n \n Takes a function and a css unit and returns the result of the function concatenated with the unit\n \n ```tsx\n * import { styled } from \"next-yak\";\n \n const Button = styled.button<{ $width?: boolean }>`\n * width: ${({ $width }) => $width}px;\n * `;\n * ```\n \n Which will be transformed to:\n * ```tsx\n * import { styled } from \"next-yak/internals\";\n \n const Button = styled.button<{ $width?: boolean }>(\n * \"button\", {\n * width: unitPostFix({ $width }) => $width, \"px\")\n * });\n /\nexport const unitPostFix = (arg: unknown, unit: string) => {\n switch (typeof arg) {\n case \"function\":\n return (props: any) => unitPostFix(arg(props), unit);\n case \"number\":\n case \"string\":\n return `${arg}${unit}`;\n // Ignore falsy values\n default:\n return undefined;\n }\n};\n","/\n This is an internal helper function to merge relevant props of a native element with a css prop.\n * It's automatically added when using the `css` prop in a JSX element.\n * e.g.:\n * ```tsx\n * <p\n * className=\"foo\"\n * css={css`\n * color: green;\n * `}\n * {...{ style: { padding: \"30px\" }}}\n * />\n */\nexport const mergeCssProp = (\n relevantProps: Record<string, unknown>,\n cssProp: {\n className: string;\n style?: Record<string, unknown>;\n },\n) => {\n return {\n className: relevantProps.className\n ? relevantProps.className + \" \" + cssProp.className\n : cssProp.className,\n style: { ...(relevantProps.style ?? {}), ...cssProp.style },\n };\n};\n"],"mappings":"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","names":["yakComponentSymbol","css","args","classNames","dynamicCssFunctions","style","arg","key","value","props","recursivePropExecution","className","allClassNames","allStyles","i","unwrapProps","fn","result","React","useTheme","noTheme","yakForwardRef","component","attrsFn","yakComponentSymbol","StyledFactory","Component","yakStyled","attrs","isYakComponent","parentYakComponent","parentAttrsFn","mergedAttrsFn","buildRuntimeAttrsProcessor","styles","values","getRuntimeStyles","css","props","ref","theme","combinedProps","combineProps","runtimeStyles","themeAfterAttr","combinedPropsWithoutTheme","propsBeforeFiltering","filteredProps","removeNonDomProperties","mergeClassNames","styled","target","TagName","obj","result","key","a","b","newProps","ownAttrsFn","parentProps","atoms","className","keyframes","styles","dynamic","useTheme","YakThemeProvider","unitPostFix","arg","unit","props","mergeCssProp","relevantProps","cssProp"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "next-yak",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "type": "module",
   "types": "./dist/",
   "license": "MIT",
@@ -78,7 +78,7 @@
   "dependencies": {
     "@babel/core": "7.23.2",
     "@babel/plugin-syntax-typescript": "7.22.5",
-    "yak-swc": "0.5.0"
+    "yak-swc": "0.6.0"
   },
   "devDependencies": {
     "@types/babel__core": "^7.1.14",

package/runtime/__tests__/typeTest.tsx CHANGED Viewed

@@ -234,3 +234,33 @@ const CompositionOverridingAndMergingTest = () => {
     const _: Equal = true;
   };
 };
+const GenericComponentWorks = () => {
+  interface MyGenericProps<T> {
+    input: T;
+  }
+  type MyGenericComponent<T> = React.ElementType<MyGenericProps<T>> & {
+    <TOther>(props: MyGenericProps<TOther>): React.ReactNode;
+  };
+  type MyDefaultType = {
+    [x: string]: any;
+  };
+  const GenericComponent: MyGenericComponent<MyDefaultType> = () => {
+    return null;
+  };
+  const ConcreteStyledComponent = GenericComponent<"test">;
+  const MyComponent = styled(ConcreteStyledComponent)``;
+  const Test = () => {
+    return (
+      <div>
+        <MyComponent input="test" />
+      </div>
+    );
+  };
+};

package/runtime/styled.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { ForwardRefRenderFunction, FunctionComponent } from "react";
+import { ForwardRefRenderFunction } from "react";
 import { CSSInterpolation, css, yakComponentSymbol } from "./cssLiteral.js";
 import React from "react";
@@ -32,6 +32,11 @@ const yakForwardRef: <
     [yakComponentSymbol]: [component, attrsFn],
   }) as any;
+/**
+ * Minimal type for a function component that works with next-yak
+ */
+type FunctionComponent<T> = (props: T, context?: any) => React.ReactNode;
 /**
  * All valid html tags
  */