Make typings less strict

packages/example/app/HighContrastToggle.tsx

@@ -1,6 +1,7 @@
 "use client";
 import { css, styled, useTheme } from "next-yak";
 import { useRouter } from "next/navigation";
+import { ReactNode } from "react";
 
 const Button = styled.button<{ $primary?: boolean }>`
   ${({ theme }) =>

packages/next-yak/dist/index.cjs

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

packages/next-yak/dist/index.d.cts

@@ -51,7 +51,7 @@ type Attrs<TBaseProps, TIn extends object = {}, TOut extends AttrsMerged<TBasePr
  * Type for the proxy object returned by `styled` that allows to
  * access all html tags as properties.
  */
-type StyledLiteral<T> = <TCSSProps extends Record<string, unknown> = {}>(styles: TemplateStringsArray, ...values: Array<CSSInterpolation<T & TCSSProps & {
+type StyledLiteral<T> = <TCSSProps = {}>(styles: TemplateStringsArray, ...values: Array<CSSInterpolation<T & TCSSProps & {
     theme: YakTheme;
 }>>) => FunctionComponent<TCSSProps & T> & {
     __yak: true;
@@ -69,12 +69,12 @@ type StyledLiteral<T> = <TCSSProps extends Record<string, unknown> = {}>(styles:
  * `;
  * ```
  */
-declare const styled: (<T>(Component: keyof JSX.IntrinsicElements | FunctionComponent<T>) => (<TCSSProps extends Record<string, unknown> = {}>(styles: TemplateStringsArray, ...values: CSSInterpolation<T & TCSSProps & {
+declare const styled: (<T>(Component: keyof JSX.IntrinsicElements | FunctionComponent<T>) => (<TCSSProps extends object = {}>(styles: TemplateStringsArray, ...values: CSSInterpolation<T & TCSSProps & {
     theme: YakTheme;
 }>[]) => FunctionComponent<FastOmit<TCSSProps & T, never>> & {
     __yak: true;
 }) & {
-    attrs: <TAttrsIn extends object = {}, TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>>(attrs: Attrs<T, TAttrsIn, TAttrsOut>) => <TCSSProps_1 extends Record<string, unknown> = {}>(styles: TemplateStringsArray, ...values: CSSInterpolation<T & TCSSProps_1 & {
+    attrs: <TAttrsIn extends object = {}, TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>>(attrs: Attrs<T, TAttrsIn, TAttrsOut>) => <TCSSProps_1 extends object = {}>(styles: TemplateStringsArray, ...values: CSSInterpolation<T & TCSSProps_1 & {
         theme: YakTheme;
     }>[]) => FunctionComponent<Substitute<TCSSProps_1 & T, TAttrsIn>> & {
         __yak: true;

packages/next-yak/dist/index.d.ts

@@ -51,7 +51,7 @@ type Attrs<TBaseProps, TIn extends object = {}, TOut extends AttrsMerged<TBasePr
  * Type for the proxy object returned by `styled` that allows to
  * access all html tags as properties.
  */
-type StyledLiteral<T> = <TCSSProps extends Record<string, unknown> = {}>(styles: TemplateStringsArray, ...values: Array<CSSInterpolation<T & TCSSProps & {
+type StyledLiteral<T> = <TCSSProps = {}>(styles: TemplateStringsArray, ...values: Array<CSSInterpolation<T & TCSSProps & {
     theme: YakTheme;
 }>>) => FunctionComponent<TCSSProps & T> & {
     __yak: true;
@@ -69,12 +69,12 @@ type StyledLiteral<T> = <TCSSProps extends Record<string, unknown> = {}>(styles:
  * `;
  * ```
  */
-declare const styled: (<T>(Component: keyof JSX.IntrinsicElements | FunctionComponent<T>) => (<TCSSProps extends Record<string, unknown> = {}>(styles: TemplateStringsArray, ...values: CSSInterpolation<T & TCSSProps & {
+declare const styled: (<T>(Component: keyof JSX.IntrinsicElements | FunctionComponent<T>) => (<TCSSProps extends object = {}>(styles: TemplateStringsArray, ...values: CSSInterpolation<T & TCSSProps & {
     theme: YakTheme;
 }>[]) => FunctionComponent<FastOmit<TCSSProps & T, never>> & {
     __yak: true;
 }) & {
-    attrs: <TAttrsIn extends object = {}, TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>>(attrs: Attrs<T, TAttrsIn, TAttrsOut>) => <TCSSProps_1 extends Record<string, unknown> = {}>(styles: TemplateStringsArray, ...values: CSSInterpolation<T & TCSSProps_1 & {
+    attrs: <TAttrsIn extends object = {}, TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>>(attrs: Attrs<T, TAttrsIn, TAttrsOut>) => <TCSSProps_1 extends object = {}>(styles: TemplateStringsArray, ...values: CSSInterpolation<T & TCSSProps_1 & {
         theme: YakTheme;
     }>[]) => FunctionComponent<Substitute<TCSSProps_1 & T, TAttrsIn>> & {
         __yak: true;

packages/next-yak/package.json

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

packages/next-yak/runtime/styled.tsx

@@ -12,7 +12,7 @@ import type { YakTheme } from "./context/index.d.ts";
  * Hack to hide .yak from the type definition and to deal with ExoticComponents
  */
 const yakForwardRef: <TProps>(
-  component: ForwardRefRenderFunction<any, TProps>,
+  component: ForwardRefRenderFunction<any, TProps>
 ) => FunctionComponent<TProps> & {
   // type only identifier to allow targeting components
   // e.g. styled.svg`${Button}:hover & { fill: red; }`
@@ -62,7 +62,7 @@ const StyledFactory = <T,>(Component: HtmlTags | FunctionComponent<T>) =>
       TAttrsIn extends object = {},
       TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>,
     >(
-      attrs: Attrs<T, TAttrsIn, TAttrsOut>,
+      attrs: Attrs<T, TAttrsIn, TAttrsOut>
     ) => yakStyled<T, TAttrsIn, TAttrsOut>(Component, attrs),
   });
 
@@ -72,17 +72,17 @@ const yakStyled = <
   TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>,
 >(
   Component: FunctionComponent<T> | HtmlTags,
-  attrs?: Attrs<T, TAttrsIn, TAttrsOut>,
+  attrs?: Attrs<T, TAttrsIn, TAttrsOut>
 ) => {
-  return <TCSSProps extends Record<string, unknown> = {}>(
+  return <TCSSProps extends object = {}>(
     styles: TemplateStringsArray,
     ...values: Array<CSSInterpolation<T & TCSSProps & { theme: YakTheme }>>
   ) => {
     const getRuntimeStyles = css(styles, ...values);
     const processAttrs = (props: Substitute<TCSSProps & T, TAttrsIn>) =>
       combineProps(
         props,
-        typeof attrs === "function" ? (attrs as Function)(props) : attrs,
+        typeof attrs === "function" ? (attrs as Function)(props) : attrs
       );
     const yak = (props: Substitute<TCSSProps & T, TAttrsIn>, ref: unknown) => {
       /** The combined props are passed into the styled`` literal functions */
@@ -102,8 +102,8 @@ const yakStyled = <
           // const Button = styled.button`${({ theme }) => css`color: ${theme.color};`}`
           //       ^ must be have acces to theme
           attrs || getRuntimeStyles.length ? { theme: useTheme() } : {},
-          props,
-        ) as Substitute<TCSSProps & T, TAttrsIn>,
+          props
+        ) as Substitute<TCSSProps & T, TAttrsIn>
       );
       // execute all functions inside the style literal
       // e.g. styled.button`color: ${props => props.color};`
@@ -120,7 +120,7 @@ const yakStyled = <
       // user provided className and style prop
       (filteredProps as { className?: string }).className = mergeClassNames(
         (combinedProps as { className?: string }).className,
-        runtimeStyles.className as string,
+        runtimeStyles.className as string
       );
       (filteredProps as { style?: React.CSSProperties }).style =
         "style" in combinedProps
@@ -151,7 +151,7 @@ const yakStyled = <
  * Type for the proxy object returned by `styled` that allows to
  * access all html tags as properties.
  */
-type StyledLiteral<T> = <TCSSProps extends Record<string, unknown> = {}>(
+type StyledLiteral<T> = <TCSSProps = {}>(
   styles: TemplateStringsArray,
   ...values: Array<CSSInterpolation<T & TCSSProps & { theme: YakTheme }>>
 ) => FunctionComponent<TCSSProps & T> & {
@@ -184,15 +184,15 @@ export const styled = new Proxy(
           TAttrsIn
         > = AttrsMerged<JSX.IntrinsicElements[Tag], TAttrsIn>,
       >(
-        attrs: Attrs<JSX.IntrinsicElements[Tag], TAttrsIn, TAttrsOut>,
+        attrs: Attrs<JSX.IntrinsicElements[Tag], TAttrsIn, TAttrsOut>
       ) => StyledLiteral<Substitute<JSX.IntrinsicElements[Tag], TAttrsIn>>;
     };
   },
   {
     get(target, TagName: keyof JSX.IntrinsicElements) {
       return target(TagName);
     },
-  },
+  }
 );
 
 // Remove all entries that start with a $ sign
@@ -229,7 +229,7 @@ const combineProps = <
   },
 >(
   props: T,
-  newProps: T,
+  newProps: T
 ) => {
   if (!newProps) return props;
   const combinedProps: T =
@@ -247,7 +247,7 @@ const combineProps = <
     ...combinedProps,
     className: mergeClassNames(
       props.className as string,
-      newProps.className as string,
+      newProps.className as string
     ),
     style: { ...(props.style || {}), ...(newProps.style || {}) },
     $__attrs: true,