next-yak 0.0.35 → 0.0.36

package/dist/index.cjs

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

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../runtime/index.ts","../runtime/cssLiteral.tsx","../runtime/styled.tsx","../runtime/atoms.tsx","../runtime/keyframes.tsx"],"sourcesContent":["export { 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\nexport type { YakTheme } from \"./context/index.d.ts\";\n","import type { YakTheme } from \"./index.d.ts\";\n\ntype ComponentStyles<TProps = {}> = (props: TProps) => {\n  className: string;\n  style?: {\n    [key: string]: string;\n  };\n};\n\nexport type CSSInterpolation<TProps = {}> =\n  | string\n  | number\n  | undefined\n  | null\n  | false\n  | ComponentStyles<TProps>\n  | {\n      // type only identifier to allow targeting components\n      // e.g. styled.svg`${Button}:hover & { fill: red; }`\n      __yak: true;\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 */\nconst internalCssFactory = (\n  ...args: Array<string | CSSFunction | CSSStyles<any>>\n) => {\n  const classNames: string[] = [];\n  const dynamicCssFunctions: PropsToClassNameFn[] = [];\n  const style: Record<string, string> = {};\n  for (const arg of args) {\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\nexport const css = internalCssFactory as any as CSSFunction;\n","import { ForwardRefRenderFunction, FunctionComponent } from \"react\";\nimport { CSSInterpolation, css } 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/** Symbol */\nconst noTheme = {};\n\n/**\n * Hack to hide .yak from the type definition and to deal with ExoticComponents\n */\nconst yakForwardRef: <TProps>(\n  component: ForwardRefRenderFunction<any, TProps>,\n) => FunctionComponent<TProps> & {\n  // type only identifier to allow targeting components\n  // e.g. styled.svg`${Button}:hover & { fill: red; }`\n  // warning: `__yak` is undefined during runtime\n  __yak: true;\n} = (component) =>\n  Object.assign(React.forwardRef(component), { component }) 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 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> =\n  | Partial<TOut>\n  | ((p: Substitute<TBaseProps & { theme: YakTheme }, TIn>) => Partial<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//\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\nconst yakStyled = <\n  T,\n  TAttrsIn extends object = {},\n  TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>,\n>(\n  Component: FunctionComponent<T> | HtmlTags,\n  attrs?: Attrs<T, TAttrsIn, TAttrsOut>,\n) => {\n  return <TCSSProps extends object = {}>(\n    styles: TemplateStringsArray,\n    ...values: Array<CSSInterpolation<T & TCSSProps & { theme: YakTheme }>>\n  ) => {\n    const getRuntimeStyles = css(styles, ...values);\n    const processAttrs = (props: Substitute<TCSSProps & T, TAttrsIn>) =>\n      combineProps(\n        props,\n        typeof attrs === \"function\" ? (attrs as Function)(props) : attrs,\n      );\n    const yak = (props: Substitute<TCSSProps & T, TAttrsIn>, ref: unknown) => {\n      // if the css component does not require arguments\n      // it can be call without arguments and skip calling useTheme()\n      //\n      // `__yak` is NOT against the rule of hooks as\n      // getRuntimeStyles is a constant 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\n      //\n      // const Button = styled.button`${({ theme }) => css`color: ${theme.color};`}`\n      //       ^ must be have acces to theme\n      const theme = attrs || getRuntimeStyles.length ? useTheme() : noTheme;\n      // execute attrs\n      const combinedProps: Substitute<TCSSProps & T, TAttrsIn> = processAttrs({\n        theme,\n        ...props,\n      } as Substitute<TCSSProps & T, TAttrsIn>);\n      // execute all functions inside the style literal\n      // e.g. styled.button`color: ${props => props.color};`\n      const runtimeStyles = getRuntimeStyles(combinedProps as any);\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\n      const isYakComponent =\n        typeof Component !== \"string\" && \"yak\" in Component;\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        ? removePrefixedProperties(combinedPropsWithoutTheme)\n        : themeAfterAttr === theme\n        ? combinedPropsWithoutTheme\n        : combinedProps;\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 as string,\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 (isYakComponent) {\n        return (\n          Component as typeof Component & {\n            yak: FunctionComponent<typeof filteredProps>;\n          }\n        ).yak(filteredProps, ref);\n      }\n      (filteredProps as { ref?: unknown }).ref = ref;\n      return <Component {...(filteredProps as any)} />;\n    };\n    return yakForwardRef(yak);\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<CSSInterpolation<T & TCSSProps & { theme: YakTheme }>>\n) => FunctionComponent<TCSSProps & T> & {\n  // type only identifier to allow targeting components\n  // e.g. styled.svg`${Button}:hover & { fill: red; }`\n  // warning: this is undefined during runtime\n  __yak: true;\n};\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// Remove all entries that start with a $ sign\nfunction removePrefixedProperties<T extends Record<string, unknown>>(obj: T) {\n  const result = {} as T;\n  for (const key in obj) {\n    if (!key.startsWith(\"$\")) {\n      result[key] = obj[key];\n    }\n  }\n  return result;\n}\n\nconst mergeClassNames = (a?: string, b?: string) => {\n  if (!a) return b;\n  if (!b) return a;\n  return a + \" \" + b;\n};\n\nconst removeUndefined = <T,>(obj: T) => {\n  const result = {} as T;\n  for (const key in obj) {\n    if (obj[key] !== undefined) {\n      result[key] = obj[key];\n    }\n  }\n  return result;\n};\n\nconst combineProps = <\n  T extends {\n    className?: string;\n    style?: React.CSSProperties;\n  },\n>(\n  props: T,\n  newProps: T,\n) => {\n  if (!newProps) return props;\n  const combinedProps: T =\n    \"$__attrs\" in props\n      ? // allow overriding props when attrs was used previously\n        {\n          ...removeUndefined(newProps),\n          ...props,\n        }\n      : {\n          ...props,\n          ...removeUndefined(newProps),\n        };\n  return {\n    ...combinedProps,\n    className: mergeClassNames(\n      props.className as string,\n      newProps.className as string,\n    ),\n    style: { ...(props.style || {}), ...(newProps.style || {}) },\n    $__attrs: true,\n  };\n};\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 * 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"],"mappings":"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","names":["runtime_exports","__export","atoms","css","keyframes","styled","__toCommonJS","internalCssFactory","args","classNames","dynamicCssFunctions","style","arg","key","value","props","recursivePropExecution","className","allClassNames","allStyles","i","unwrapProps","fn","result","css","import_react","import_context","noTheme","yakForwardRef","component","React","StyledFactory","Component","yakStyled","attrs","styles","values","getRuntimeStyles","css","processAttrs","props","combineProps","ref","theme","combinedProps","runtimeStyles","themeAfterAttr","combinedPropsWithoutTheme","isYakComponent","filteredProps","removePrefixedProperties","mergeClassNames","styled","target","TagName","obj","result","key","a","b","removeUndefined","newProps","atoms","className","keyframes","styles","dynamic","import_context"]}
+{"version":3,"sources":["../runtime/index.ts","../runtime/cssLiteral.tsx","../runtime/styled.tsx","../runtime/atoms.tsx","../runtime/keyframes.tsx"],"sourcesContent":["export { 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\nexport type { YakTheme } from \"./context/index.d.ts\";\n","import type { YakTheme } from \"./index.d.ts\";\n\ntype ComponentStyles<TProps = {}> = (props: TProps) => {\n  className: string;\n  style?: {\n    [key: string]: string;\n  };\n};\n\nexport type CSSInterpolation<TProps = {}> =\n  | string\n  | number\n  | undefined\n  | null\n  | false\n  | ComponentStyles<TProps>\n  | {\n      // type only identifier to allow targeting components\n      // e.g. styled.svg`${Button}:hover & { fill: red; }`\n      __yak: true;\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 */\nconst internalCssFactory = (\n  ...args: Array<string | CSSFunction | CSSStyles<any>>\n) => {\n  const classNames: string[] = [];\n  const dynamicCssFunctions: PropsToClassNameFn[] = [];\n  const style: Record<string, string> = {};\n  for (const arg of args) {\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\nexport const css = internalCssFactory as any as CSSFunction;\n","import { ForwardRefRenderFunction, FunctionComponent } from \"react\";\nimport { CSSInterpolation, css } 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/** Symbol */\nconst noTheme = {};\n\n/**\n * Hack to hide .yak from the type definition and to deal with ExoticComponents\n */\nconst yakForwardRef: <TProps>(\n  component: ForwardRefRenderFunction<any, TProps>,\n) => FunctionComponent<TProps> & {\n  // type only identifier to allow targeting components\n  // e.g. styled.svg`${Button}:hover & { fill: red; }`\n  // warning: `__yak` is undefined during runtime\n  __yak: true;\n} = (component) =>\n  Object.assign(React.forwardRef(component), { yak: component }) 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 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> =\n  | Partial<TOut>\n  | ((p: Substitute<TBaseProps & { theme: YakTheme }, TIn>) => Partial<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//\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\nconst yakStyled = <\n  T,\n  TAttrsIn extends object = {},\n  TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>,\n>(\n  Component: FunctionComponent<T> | HtmlTags,\n  attrs?: Attrs<T, TAttrsIn, TAttrsOut>,\n) => {\n  return <TCSSProps extends object = {}>(\n    styles: TemplateStringsArray,\n    ...values: Array<CSSInterpolation<T & TCSSProps & { theme: YakTheme }>>\n  ) => {\n    const getRuntimeStyles = css(styles, ...values);\n    const processAttrs = (props: Substitute<TCSSProps & T, TAttrsIn>) =>\n      combineProps(\n        props,\n        typeof attrs === \"function\" ? (attrs as Function)(props) : attrs,\n      );\n    const yak = (props: Substitute<TCSSProps & T, TAttrsIn>, ref: unknown) => {\n      // if the css component does not require arguments\n      // it can be call without arguments and skip calling useTheme()\n      //\n      // `__yak` is NOT against the rule of hooks as\n      // getRuntimeStyles is a constant 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\n      //\n      // const Button = styled.button`${({ theme }) => css`color: ${theme.color};`}`\n      //       ^ must be have acces to theme\n      const theme = attrs || getRuntimeStyles.length ? useTheme() : noTheme;\n      // execute attrs\n      const combinedProps: Substitute<TCSSProps & T, TAttrsIn> = processAttrs({\n        theme,\n        ...props,\n      } as Substitute<TCSSProps & T, TAttrsIn>);\n      // execute all functions inside the style literal\n      // e.g. styled.button`color: ${props => props.color};`\n      const runtimeStyles = getRuntimeStyles(combinedProps as any);\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      const isYakComponent =\n        typeof Component !== \"string\" && \"yak\" in Component;\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        ? removePrefixedProperties(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 as string,\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 (isYakComponent) {\n        return (\n          Component as typeof Component & {\n            yak: FunctionComponent<typeof filteredProps>;\n          }\n        ).yak(filteredProps, ref);\n      }\n      (filteredProps as { ref?: unknown }).ref = ref;\n      return <Component {...(filteredProps as any)} />;\n    };\n    return yakForwardRef(yak);\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<CSSInterpolation<T & TCSSProps & { theme: YakTheme }>>\n) => FunctionComponent<TCSSProps & T> & {\n  // type only identifier to allow targeting components\n  // e.g. styled.svg`${Button}:hover & { fill: red; }`\n  // warning: this is undefined during runtime\n  __yak: true;\n};\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// Remove all entries that start with a $ sign\nfunction removePrefixedProperties<T extends Record<string, unknown>>(obj: T) {\n  const result = {} as T;\n  for (const key in obj) {\n    if (!key.startsWith(\"$\")) {\n      result[key] = obj[key];\n    }\n  }\n  return result;\n}\n\nconst mergeClassNames = (a?: string, b?: string) => {\n  if (!a) return b;\n  if (!b) return a;\n  return a + \" \" + b;\n};\n\nconst removeUndefined = <T,>(obj: T) => {\n  const result = {} as T;\n  for (const key in obj) {\n    if (obj[key] !== undefined) {\n      result[key] = obj[key];\n    }\n  }\n  return result;\n};\n\nconst combineProps = <\n  T extends {\n    className?: string;\n    style?: React.CSSProperties;\n  },\n>(\n  props: T,\n  newProps: T,\n) => {\n  if (!newProps) return props;\n  const combinedProps: T =\n    \"$__attrs\" in props\n      ? // allow overriding props when attrs was used previously\n        {\n          ...removeUndefined(newProps),\n          ...props,\n        }\n      : {\n          ...props,\n          ...removeUndefined(newProps),\n        };\n  return {\n    ...combinedProps,\n    className: mergeClassNames(\n      props.className as string,\n      newProps.className as string,\n    ),\n    style: { ...(props.style || {}), ...(newProps.style || {}) },\n    $__attrs: true,\n  };\n};\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 * 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"],"mappings":"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","names":["runtime_exports","__export","atoms","css","keyframes","styled","__toCommonJS","internalCssFactory","args","classNames","dynamicCssFunctions","style","arg","key","value","props","recursivePropExecution","className","allClassNames","allStyles","i","unwrapProps","fn","result","css","import_react","import_context","noTheme","yakForwardRef","component","React","StyledFactory","Component","yakStyled","attrs","styles","values","getRuntimeStyles","css","processAttrs","props","combineProps","ref","theme","combinedProps","runtimeStyles","themeAfterAttr","combinedPropsWithoutTheme","propsBeforeFiltering","isYakComponent","filteredProps","removePrefixedProperties","mergeClassNames","styled","target","TagName","obj","result","key","a","b","removeUndefined","newProps","atoms","className","keyframes","styles","dynamic","import_context"]}

package/dist/index.js

@@ -1,2 +1,2 @@
-var C=(...t)=>{let e=[],n=[],i={};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 c=s.style[r];typeof c=="function"?n.push(o=>({style:{[r]:String(f(o,c))}})):i[r]=c}if(n.length===0){let s=e.join(" ");return()=>({className:s,style:i})}return s=>{let r=[...e],c={...i};for(let o=0;o<n.length;o++)x(s,n[o],r,c);return{className:r.join(" "),style:c}}},x=(t,e,n,i)=>{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)i[r]=s.style[r];break}},f=(t,e)=>{let n=e(t);if(typeof n=="function")return f(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},y=C;import A from"react";import{useTheme as I}from"next-yak/context";var h={},b=t=>Object.assign(A.forwardRef(t),{component:t}),N=t=>Object.assign(g(t),{attrs:e=>g(t,e)}),g=(t,e)=>(n,...i)=>{let s=y(n,...i),r=o=>O(o,typeof e=="function"?e(o):e);return b((o,m)=>{let u=e||s.length?I():h,T=r({theme:u,...o}),l=s(T),{theme:k,...p}=T,S=typeof t!="string"&&"yak"in t,a=S?k===u?p:T:w(p);return a.className=P(a.className,l.className),a.style="style"in a?{...a.style,...l.style}:l.style,S?t.yak(a,m):(a.ref=m,A.createElement(t,{...a}))})},F=new Proxy(N,{get(t,e){return t(e)}});function w(t){let e={};for(let n in t)n.startsWith("$")||(e[n]=t[n]);return e}var P=(t,e)=>t?e?t+" "+e:t:e,d=t=>{let e={};for(let n in t)t[n]!==void 0&&(e[n]=t[n]);return e},O=(t,e)=>e?{..."$__attrs"in t?{...d(e),...t}:{...t,...d(e)},className:P(t.className,e.className),style:{...t.style||{},...e.style||{}},$__attrs:!0}:t;var R=(...t)=>{let e=t.join(" ");return()=>({className:e})};var j=(t,...e)=>t;import{useTheme as W,YakThemeProvider as V}from"next-yak/context";export{V as YakThemeProvider,R as atoms,y as css,j as keyframes,F as styled,W as useTheme};
+var x=(...t)=>{let e=[],n=[],i={};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 c=s.style[r];typeof c=="function"?n.push(o=>({style:{[r]:String(f(o,c))}})):i[r]=c}if(n.length===0){let s=e.join(" ");return()=>({className:s,style:i})}return s=>{let r=[...e],c={...i};for(let o=0;o<n.length;o++)I(s,n[o],r,c);return{className:r.join(" "),style:c}}},I=(t,e,n,i)=>{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)i[r]=s.style[r];break}},f=(t,e)=>{let n=e(t);if(typeof n=="function")return f(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},y=x;import A from"react";import{useTheme as h}from"next-yak/context";var b={},N=t=>Object.assign(A.forwardRef(t),{yak:t}),F=t=>Object.assign(g(t),{attrs:e=>g(t,e)}),g=(t,e)=>(n,...i)=>{let s=y(n,...i),r=o=>R(o,typeof e=="function"?e(o):e);return N((o,m)=>{let u=e||s.length?h():b,T=r({theme:u,...o}),l=s(T),{theme:k,...C}=T,p=k===u?C:T,S=typeof t!="string"&&"yak"in t,a=S?p:O(p);return a.className=P(a.className,l.className),a.style="style"in a?{...a.style,...l.style}:l.style,S?t.yak(a,m):(a.ref=m,A.createElement(t,{...a}))})},w=new Proxy(F,{get(t,e){return t(e)}});function O(t){let e={};for(let n in t)n.startsWith("$")||(e[n]=t[n]);return e}var P=(t,e)=>t?e?t+" "+e:t:e,d=t=>{let e={};for(let n in t)t[n]!==void 0&&(e[n]=t[n]);return e},R=(t,e)=>e?{..."$__attrs"in t?{...d(e),...t}:{...t,...d(e)},className:P(t.className,e.className),style:{...t.style||{},...e.style||{}},$__attrs:!0}:t;var j=(...t)=>{let e=t.join(" ");return()=>({className:e})};var v=(t,...e)=>t;import{useTheme as V,YakThemeProvider as q}from"next-yak/context";export{q as YakThemeProvider,j as atoms,y as css,v as keyframes,w as styled,V as useTheme};
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../runtime/cssLiteral.tsx","../runtime/styled.tsx","../runtime/atoms.tsx","../runtime/keyframes.tsx","../runtime/index.ts"],"sourcesContent":["import type { YakTheme } from \"./index.d.ts\";\n\ntype ComponentStyles<TProps = {}> = (props: TProps) => {\n  className: string;\n  style?: {\n    [key: string]: string;\n  };\n};\n\nexport type CSSInterpolation<TProps = {}> =\n  | string\n  | number\n  | undefined\n  | null\n  | false\n  | ComponentStyles<TProps>\n  | {\n      // type only identifier to allow targeting components\n      // e.g. styled.svg`${Button}:hover & { fill: red; }`\n      __yak: true;\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 */\nconst internalCssFactory = (\n  ...args: Array<string | CSSFunction | CSSStyles<any>>\n) => {\n  const classNames: string[] = [];\n  const dynamicCssFunctions: PropsToClassNameFn[] = [];\n  const style: Record<string, string> = {};\n  for (const arg of args) {\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\nexport const css = internalCssFactory as any as CSSFunction;\n","import { ForwardRefRenderFunction, FunctionComponent } from \"react\";\nimport { CSSInterpolation, css } 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/** Symbol */\nconst noTheme = {};\n\n/**\n * Hack to hide .yak from the type definition and to deal with ExoticComponents\n */\nconst yakForwardRef: <TProps>(\n  component: ForwardRefRenderFunction<any, TProps>,\n) => FunctionComponent<TProps> & {\n  // type only identifier to allow targeting components\n  // e.g. styled.svg`${Button}:hover & { fill: red; }`\n  // warning: `__yak` is undefined during runtime\n  __yak: true;\n} = (component) =>\n  Object.assign(React.forwardRef(component), { component }) 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 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> =\n  | Partial<TOut>\n  | ((p: Substitute<TBaseProps & { theme: YakTheme }, TIn>) => Partial<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//\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\nconst yakStyled = <\n  T,\n  TAttrsIn extends object = {},\n  TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>,\n>(\n  Component: FunctionComponent<T> | HtmlTags,\n  attrs?: Attrs<T, TAttrsIn, TAttrsOut>,\n) => {\n  return <TCSSProps extends object = {}>(\n    styles: TemplateStringsArray,\n    ...values: Array<CSSInterpolation<T & TCSSProps & { theme: YakTheme }>>\n  ) => {\n    const getRuntimeStyles = css(styles, ...values);\n    const processAttrs = (props: Substitute<TCSSProps & T, TAttrsIn>) =>\n      combineProps(\n        props,\n        typeof attrs === \"function\" ? (attrs as Function)(props) : attrs,\n      );\n    const yak = (props: Substitute<TCSSProps & T, TAttrsIn>, ref: unknown) => {\n      // if the css component does not require arguments\n      // it can be call without arguments and skip calling useTheme()\n      //\n      // `__yak` is NOT against the rule of hooks as\n      // getRuntimeStyles is a constant 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\n      //\n      // const Button = styled.button`${({ theme }) => css`color: ${theme.color};`}`\n      //       ^ must be have acces to theme\n      const theme = attrs || getRuntimeStyles.length ? useTheme() : noTheme;\n      // execute attrs\n      const combinedProps: Substitute<TCSSProps & T, TAttrsIn> = processAttrs({\n        theme,\n        ...props,\n      } as Substitute<TCSSProps & T, TAttrsIn>);\n      // execute all functions inside the style literal\n      // e.g. styled.button`color: ${props => props.color};`\n      const runtimeStyles = getRuntimeStyles(combinedProps as any);\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\n      const isYakComponent =\n        typeof Component !== \"string\" && \"yak\" in Component;\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        ? removePrefixedProperties(combinedPropsWithoutTheme)\n        : themeAfterAttr === theme\n        ? combinedPropsWithoutTheme\n        : combinedProps;\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 as string,\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 (isYakComponent) {\n        return (\n          Component as typeof Component & {\n            yak: FunctionComponent<typeof filteredProps>;\n          }\n        ).yak(filteredProps, ref);\n      }\n      (filteredProps as { ref?: unknown }).ref = ref;\n      return <Component {...(filteredProps as any)} />;\n    };\n    return yakForwardRef(yak);\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<CSSInterpolation<T & TCSSProps & { theme: YakTheme }>>\n) => FunctionComponent<TCSSProps & T> & {\n  // type only identifier to allow targeting components\n  // e.g. styled.svg`${Button}:hover & { fill: red; }`\n  // warning: this is undefined during runtime\n  __yak: true;\n};\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// Remove all entries that start with a $ sign\nfunction removePrefixedProperties<T extends Record<string, unknown>>(obj: T) {\n  const result = {} as T;\n  for (const key in obj) {\n    if (!key.startsWith(\"$\")) {\n      result[key] = obj[key];\n    }\n  }\n  return result;\n}\n\nconst mergeClassNames = (a?: string, b?: string) => {\n  if (!a) return b;\n  if (!b) return a;\n  return a + \" \" + b;\n};\n\nconst removeUndefined = <T,>(obj: T) => {\n  const result = {} as T;\n  for (const key in obj) {\n    if (obj[key] !== undefined) {\n      result[key] = obj[key];\n    }\n  }\n  return result;\n};\n\nconst combineProps = <\n  T extends {\n    className?: string;\n    style?: React.CSSProperties;\n  },\n>(\n  props: T,\n  newProps: T,\n) => {\n  if (!newProps) return props;\n  const combinedProps: T =\n    \"$__attrs\" in props\n      ? // allow overriding props when attrs was used previously\n        {\n          ...removeUndefined(newProps),\n          ...props,\n        }\n      : {\n          ...props,\n          ...removeUndefined(newProps),\n        };\n  return {\n    ...combinedProps,\n    className: mergeClassNames(\n      props.className as string,\n      newProps.className as string,\n    ),\n    style: { ...(props.style || {}), ...(newProps.style || {}) },\n    $__attrs: true,\n  };\n};\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 * 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","export { 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\nexport type { YakTheme } from \"./context/index.d.ts\";\n"],"mappings":"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","names":["internalCssFactory","args","classNames","dynamicCssFunctions","style","arg","key","value","props","recursivePropExecution","className","allClassNames","allStyles","i","unwrapProps","fn","result","css","React","useTheme","noTheme","yakForwardRef","component","StyledFactory","Component","yakStyled","attrs","styles","values","getRuntimeStyles","css","processAttrs","props","combineProps","ref","theme","combinedProps","runtimeStyles","themeAfterAttr","combinedPropsWithoutTheme","isYakComponent","filteredProps","removePrefixedProperties","mergeClassNames","styled","target","TagName","obj","result","key","a","b","removeUndefined","newProps","atoms","className","keyframes","styles","dynamic","useTheme","YakThemeProvider"]}
+{"version":3,"sources":["../runtime/cssLiteral.tsx","../runtime/styled.tsx","../runtime/atoms.tsx","../runtime/keyframes.tsx","../runtime/index.ts"],"sourcesContent":["import type { YakTheme } from \"./index.d.ts\";\n\ntype ComponentStyles<TProps = {}> = (props: TProps) => {\n  className: string;\n  style?: {\n    [key: string]: string;\n  };\n};\n\nexport type CSSInterpolation<TProps = {}> =\n  | string\n  | number\n  | undefined\n  | null\n  | false\n  | ComponentStyles<TProps>\n  | {\n      // type only identifier to allow targeting components\n      // e.g. styled.svg`${Button}:hover & { fill: red; }`\n      __yak: true;\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 */\nconst internalCssFactory = (\n  ...args: Array<string | CSSFunction | CSSStyles<any>>\n) => {\n  const classNames: string[] = [];\n  const dynamicCssFunctions: PropsToClassNameFn[] = [];\n  const style: Record<string, string> = {};\n  for (const arg of args) {\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\nexport const css = internalCssFactory as any as CSSFunction;\n","import { ForwardRefRenderFunction, FunctionComponent } from \"react\";\nimport { CSSInterpolation, css } 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/** Symbol */\nconst noTheme = {};\n\n/**\n * Hack to hide .yak from the type definition and to deal with ExoticComponents\n */\nconst yakForwardRef: <TProps>(\n  component: ForwardRefRenderFunction<any, TProps>,\n) => FunctionComponent<TProps> & {\n  // type only identifier to allow targeting components\n  // e.g. styled.svg`${Button}:hover & { fill: red; }`\n  // warning: `__yak` is undefined during runtime\n  __yak: true;\n} = (component) =>\n  Object.assign(React.forwardRef(component), { yak: component }) 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 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> =\n  | Partial<TOut>\n  | ((p: Substitute<TBaseProps & { theme: YakTheme }, TIn>) => Partial<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//\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\nconst yakStyled = <\n  T,\n  TAttrsIn extends object = {},\n  TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>,\n>(\n  Component: FunctionComponent<T> | HtmlTags,\n  attrs?: Attrs<T, TAttrsIn, TAttrsOut>,\n) => {\n  return <TCSSProps extends object = {}>(\n    styles: TemplateStringsArray,\n    ...values: Array<CSSInterpolation<T & TCSSProps & { theme: YakTheme }>>\n  ) => {\n    const getRuntimeStyles = css(styles, ...values);\n    const processAttrs = (props: Substitute<TCSSProps & T, TAttrsIn>) =>\n      combineProps(\n        props,\n        typeof attrs === \"function\" ? (attrs as Function)(props) : attrs,\n      );\n    const yak = (props: Substitute<TCSSProps & T, TAttrsIn>, ref: unknown) => {\n      // if the css component does not require arguments\n      // it can be call without arguments and skip calling useTheme()\n      //\n      // `__yak` is NOT against the rule of hooks as\n      // getRuntimeStyles is a constant 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\n      //\n      // const Button = styled.button`${({ theme }) => css`color: ${theme.color};`}`\n      //       ^ must be have acces to theme\n      const theme = attrs || getRuntimeStyles.length ? useTheme() : noTheme;\n      // execute attrs\n      const combinedProps: Substitute<TCSSProps & T, TAttrsIn> = processAttrs({\n        theme,\n        ...props,\n      } as Substitute<TCSSProps & T, TAttrsIn>);\n      // execute all functions inside the style literal\n      // e.g. styled.button`color: ${props => props.color};`\n      const runtimeStyles = getRuntimeStyles(combinedProps as any);\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      const isYakComponent =\n        typeof Component !== \"string\" && \"yak\" in Component;\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        ? removePrefixedProperties(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 as string,\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 (isYakComponent) {\n        return (\n          Component as typeof Component & {\n            yak: FunctionComponent<typeof filteredProps>;\n          }\n        ).yak(filteredProps, ref);\n      }\n      (filteredProps as { ref?: unknown }).ref = ref;\n      return <Component {...(filteredProps as any)} />;\n    };\n    return yakForwardRef(yak);\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<CSSInterpolation<T & TCSSProps & { theme: YakTheme }>>\n) => FunctionComponent<TCSSProps & T> & {\n  // type only identifier to allow targeting components\n  // e.g. styled.svg`${Button}:hover & { fill: red; }`\n  // warning: this is undefined during runtime\n  __yak: true;\n};\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// Remove all entries that start with a $ sign\nfunction removePrefixedProperties<T extends Record<string, unknown>>(obj: T) {\n  const result = {} as T;\n  for (const key in obj) {\n    if (!key.startsWith(\"$\")) {\n      result[key] = obj[key];\n    }\n  }\n  return result;\n}\n\nconst mergeClassNames = (a?: string, b?: string) => {\n  if (!a) return b;\n  if (!b) return a;\n  return a + \" \" + b;\n};\n\nconst removeUndefined = <T,>(obj: T) => {\n  const result = {} as T;\n  for (const key in obj) {\n    if (obj[key] !== undefined) {\n      result[key] = obj[key];\n    }\n  }\n  return result;\n};\n\nconst combineProps = <\n  T extends {\n    className?: string;\n    style?: React.CSSProperties;\n  },\n>(\n  props: T,\n  newProps: T,\n) => {\n  if (!newProps) return props;\n  const combinedProps: T =\n    \"$__attrs\" in props\n      ? // allow overriding props when attrs was used previously\n        {\n          ...removeUndefined(newProps),\n          ...props,\n        }\n      : {\n          ...props,\n          ...removeUndefined(newProps),\n        };\n  return {\n    ...combinedProps,\n    className: mergeClassNames(\n      props.className as string,\n      newProps.className as string,\n    ),\n    style: { ...(props.style || {}), ...(newProps.style || {}) },\n    $__attrs: true,\n  };\n};\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 * 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","export { 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\nexport type { YakTheme } from \"./context/index.d.ts\";\n"],"mappings":"AAmDA,IAAMA,EAAqB,IACtBC,IACA,CACH,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,EAGME,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,EAEaC,EAAMjB,EClKnB,OAAOkB,MAAW,QAKlB,OAAS,YAAAC,MAAgB,mBAIzB,IAAMC,EAAU,CAAC,EAKXC,EAODC,GACH,OAAO,OAAOJ,EAAM,WAAWI,CAAS,EAAG,CAAE,IAAKA,CAAU,CAAC,EAqCzDC,EAAqBC,GACzB,OAAO,OAAOC,EAAUD,CAAS,EAAG,CAClC,MAIEE,GACGD,EAAkCD,EAAWE,CAAK,CACzD,CAAC,EAEGD,EAAY,CAKhBD,EACAE,IAEO,CACLC,KACGC,IACA,CACH,IAAMC,EAAmBC,EAAIH,EAAQ,GAAGC,CAAM,EACxCG,EAAgBC,GACpBC,EACED,EACA,OAAON,GAAU,WAAcA,EAAmBM,CAAK,EAAIN,CAC7D,EAoEF,OAAOL,EAnEK,CAACW,EAA4CE,IAAiB,CAcxE,IAAMC,EAAQT,GAASG,EAAiB,OAASV,EAAS,EAAIC,EAExDgB,EAAqDL,EAAa,CACtE,MAAAI,EACA,GAAGH,CACL,CAAwC,EAGlCK,EAAgBR,EAAiBO,CAAoB,EAKrD,CAAE,MAAOE,EAAgB,GAAGC,CAA0B,EAC1DH,EACII,EACJF,IAAmBH,EAAQI,EAA4BH,EAEnDK,EACJ,OAAOjB,GAAc,UAAY,QAASA,EAItCkB,EAAiBD,EAEnBD,EADAG,EAAyBH,CAAoB,EAmBjD,OAdCE,EAAyC,UAAYE,EACnDF,EAAyC,UAC1CL,EAAc,SAChB,EACCK,EAAkD,MACjD,UAAWA,EACP,CACE,GAAIA,EAAkD,MACtD,GAAGL,EAAc,KACnB,EACAA,EAAc,MAIhBI,EAEAjB,EAGA,IAAIkB,EAAeR,CAAG,GAEzBQ,EAAoC,IAAMR,EACpChB,EAAA,cAACM,EAAA,CAAW,GAAIkB,EAAuB,EAChD,CACwB,CAC1B,EA8BWG,EAAS,IAAI,MACxBtB,EAaA,CACE,IAAIuB,EAAQC,EAAsC,CAChD,OAAOD,EAAOC,CAAO,CACvB,CACF,CACF,EAGA,SAASJ,EAA4DK,EAAQ,CAC3E,IAAMC,EAAS,CAAC,EAChB,QAAWC,KAAOF,EACXE,EAAI,WAAW,GAAG,IACrBD,EAAOC,CAAG,EAAIF,EAAIE,CAAG,GAGzB,OAAOD,CACT,CAEA,IAAML,EAAkB,CAACO,EAAYC,IAC9BD,EACAC,EACED,EAAI,IAAMC,EADFD,EADAC,EAKXC,EAAuBL,GAAW,CACtC,IAAMC,EAAS,CAAC,EAChB,QAAWC,KAAOF,EACZA,EAAIE,CAAG,IAAM,SACfD,EAAOC,CAAG,EAAIF,EAAIE,CAAG,GAGzB,OAAOD,CACT,EAEMhB,EAAe,CAMnBD,EACAsB,IAEKA,EAYE,CACL,GAXA,aAActB,EAEV,CACE,GAAGqB,EAAgBC,CAAQ,EAC3B,GAAGtB,CACL,EACA,CACE,GAAGA,EACH,GAAGqB,EAAgBC,CAAQ,CAC7B,EAGJ,UAAWV,EACTZ,EAAM,UACNsB,EAAS,SACX,EACA,MAAO,CAAE,GAAItB,EAAM,OAAS,CAAC,EAAI,GAAIsB,EAAS,OAAS,CAAC,CAAG,EAC3D,SAAU,EACZ,EApBsBtB,ECtOjB,IAAMuB,EAAQ,IAAIA,IAAoB,CAC3C,IAAMC,EAAYD,EAAM,KAAK,GAAG,EAChC,MAAO,KAAO,CAAE,UAAAC,CAAU,EAC5B,ECKO,IAAMC,EAAY,CACvBC,KACGC,IAIID,ECpBT,OAAS,YAAAE,EAAU,oBAAAC,MAAwB","names":["internalCssFactory","args","classNames","dynamicCssFunctions","style","arg","key","value","props","recursivePropExecution","className","allClassNames","allStyles","i","unwrapProps","fn","result","css","React","useTheme","noTheme","yakForwardRef","component","StyledFactory","Component","yakStyled","attrs","styles","values","getRuntimeStyles","css","processAttrs","props","combineProps","ref","theme","combinedProps","runtimeStyles","themeAfterAttr","combinedPropsWithoutTheme","propsBeforeFiltering","isYakComponent","filteredProps","removePrefixedProperties","mergeClassNames","styled","target","TagName","obj","result","key","a","b","removeUndefined","newProps","atoms","className","keyframes","styles","dynamic","useTheme","YakThemeProvider"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-yak",
-  "version": "0.0.35",
+  "version": "0.0.36",
   "type": "module",
   "types": "./dist/",
   "exports": {

package/runtime/__tests__/attrs.test.tsx

@@ -256,18 +256,6 @@ it("should work with data and aria attributes", () => {
   `);
 });
 
-// it("merge attrs", () => {
-//   const Comp = styled.button
-//     .attrs(() => ({
-//       type: "button",
-//       tabIndex: 0,
-//     }))
-//     .attrs(() => ({
-//       type: "submit",
-//     }))``;
-//   expect(TestRenderer.create(<Comp />).toJSON()).toMatchInlineSnapshot();
-// });
-
 it("merge attrs when inheriting SC", () => {
   const Parent = styled.button.attrs(() => ({
     type: "button",
@@ -281,7 +269,7 @@ it("merge attrs when inheriting SC", () => {
       className=""
       style={{}}
       tabIndex={0}
-      type="button"
+      type="submit"
     />
   `);
 });
@@ -531,6 +519,8 @@ it("should pass theme if theme is overwritten", () => {
     <pre
       className=""
       style={{}}
-    />
+    >
+      {"color":"blue"}
+    </pre>
   `);
 });

package/runtime/__tests__/styled.test.tsx

@@ -95,13 +95,28 @@ it("should filter out properties starting with $ when passing to custom", () =>
     return null;
   };
   const StyledComponent = styled(Component)``;
-  const { container } = render(
-    <StyledComponent $forwardedProp="notForwarded" />,
-  );
+  render(<StyledComponent $forwardedProp="notForwarded" />);
 
   expect(forwardedProps).toEqual({});
 });
 
+it("should forward properties to the next yak component", () => {
+  const Component = styled.input.attrs(({ $text }) => ({
+    "aria-label": $text,
+  }))``;
+  const StyledComponent = styled(Component)``;
+  const { container } = render(<StyledComponent $text="hello world" />);
+
+  expect(container).toMatchInlineSnapshot(`
+    <div>
+      <input
+        aria-label="hello world"
+        class=""
+      />
+    </div>
+  `);
+});
+
 it("should concatenate classNames", () => {
   const Component = styled.input("className1");
 
@@ -256,7 +271,7 @@ it("should remove theme if styled element", () => {
   `);
 });
 
-it("should not remove theme if theme is passed to element", () => {
+it("should keep theme if theme is passed to element", () => {
   const ThemePrinter = ({ theme, ...props }: { theme?: unknown }) => (
     <pre {...props}>{JSON.stringify(theme)}</pre>
   );
@@ -272,7 +287,9 @@ it("should not remove theme if theme is passed to element", () => {
     <div>
       <pre
         class="test"
-      />
+      >
+        {"anything":"test"}
+      </pre>
     </div>
   `);
 });
@@ -314,7 +331,9 @@ it("should not remove theme if theme is passed to wrapped element", () => {
     <div>
       <pre
         class="test-wrapper test"
-      />
+      >
+        {"anything":"test"}
+      </pre>
     </div>
   `);
 });

package/runtime/styled.tsx

@@ -22,7 +22,7 @@ const yakForwardRef: <TProps>(
   // warning: `__yak` is undefined during runtime
   __yak: true;
 } = (component) =>
-  Object.assign(React.forwardRef(component), { component }) as any;
+  Object.assign(React.forwardRef(component), { yak: component }) as any;
 
 /**
  * All valid html tags
@@ -116,6 +116,8 @@ const yakStyled = <
       // prevents passing the theme prop to the DOM element of a styled component
       const { theme: themeAfterAttr, ...combinedPropsWithoutTheme } =
         combinedProps as { theme?: unknown };
+      const propsBeforeFiltering =
+        themeAfterAttr === theme ? combinedPropsWithoutTheme : combinedProps;
 
       const isYakComponent =
         typeof Component !== "string" && "yak" in Component;
@@ -123,10 +125,8 @@ const yakStyled = <
       // remove all props that start with a $ sign for string components e.g. "button" or "div"
       // so that they are not passed to the DOM element
       const filteredProps = !isYakComponent
-        ? removePrefixedProperties(combinedPropsWithoutTheme)
-        : themeAfterAttr === theme
-        ? combinedPropsWithoutTheme
-        : combinedProps;
+        ? removePrefixedProperties(propsBeforeFiltering)
+        : propsBeforeFiltering;
 
       // yak provides a className and style prop that needs to be merged with the
       // user provided className and style prop