@atom-learning/components 6.0.0-beta.18 → 6.0.0-beta.19

package/dist/styled.js

@@ -1,2 +1,2 @@
-import j from"clsx";import c from"react";import{twMerge as b}from"tailwind-merge";import{tv as w}from"tailwind-variants";const A=({children:e,theme:r})=>c.createElement("div",{className:"contents",style:r},e),M=e=>Object.fromEntries(Object.values(e).flatMap(r=>Object.entries(r).map(([l,i])=>["--".concat(l),i])));function R(e,r,l){const i=Object.keys(r.variants||{}),E=(l==null?void 0:l.enabledResponsiveVariants)===!0,N=w(r);return c.forwardRef((a,m)=>{const v=E?i.map(t=>{const s=a[t],o=r.variants[t];return typeof s=="object"&&s&&!Array.isArray(s)?Object.entries(s).flatMap(([n,p])=>{const h=String(p),u=o&&o[h];return u&&Array.isArray(u)?u.flatMap(d=>n==="@initial"?d:"".concat(n.replace("@",""),":").concat(d)):[]}):[]}).flat():[],O=N(a),f=Object.fromEntries(Object.entries(a).filter(([t])=>!i.includes(t)&&t!=="as")),y=j(O,v).trim(),g=a.className;if(typeof e=="string"||typeof e=="function"||e&&typeof e=="object"){const t=e;if(typeof e=="string"){const{className:o,...n}=f;return c.createElement(a.as||t,{...n,ref:m,className:b(y,g)})}const s={...f,as:a.as,className:b(y,a.className),ref:m};return c.createElement(t,s)}if(c.isValidElement(e)){const t=e,s=t.props.className,o=f.className,n=j(s,o,y).trim(),p={...f,as:a.as||t.props.as,className:b(n)};return m&&(p.ref=m),c.cloneElement(t,p)}throw console.log({el:e,styles:r}),Error("Something is wrong")})}export{A as Theme,M as createTheme,R as styled};
+import g from"clsx";import m from"react";import{twMerge as f}from"tailwind-merge";import{tv as h}from"tailwind-variants";const A=({children:t,theme:a})=>m.createElement("div",{className:"contents",style:a},t),C=t=>Object.fromEntries(Object.values(t).flatMap(a=>Object.entries(a).map(([d,N])=>["--".concat(d),N])));function M(t,a,d){const N=Object.keys(a.variants||{}),v=(d==null?void 0:d.enabledResponsiveVariants)===!0,_=h(a);return m.forwardRef((o,u)=>{const w=v?N.map(e=>{const c=o[e],l=a.variants[e];return typeof c=="object"&&c&&!Array.isArray(c)?Object.entries(c).flatMap(([s,r])=>{const n=String(r),i=l&&l[n];return i&&Array.isArray(i)?i.flatMap(E=>s==="@initial"?E:"".concat(s.replace("@",""),":").concat(E)):[]}):[]}).flat():[],O=_(o),j=Object.fromEntries(Object.entries(o).filter(([e])=>!N.includes(e)&&e!=="as"&&e!=="__wrapperClasses")),p=g(O,w).trim(),y=o.className,b=o.__wrapperClasses;if(typeof t=="string"||typeof t=="function"||t&&typeof t=="object"){const e=t;if(typeof t=="string"){const{className:r,...n}=j,i=b?f(b,p,y):f(p,y);return m.createElement(o.as||e,{...n,ref:u,className:i})}const{className:c,...l}=j,s=o.as;if(b){const r=f(b,p),n=f(b,p),i=f(n,y),E={...l,...s?{as:s}:{},__wrapperClasses:r,className:i,ref:u};return m.createElement(e,E)}else{const r=f(p,y),n={...l,...s?{as:s}:{},className:r,ref:u};return m.createElement(e,n)}}if(m.isValidElement(t)){const e=t,c=e.props.className,l=j.className,s=g(c,l,p).trim(),r={...j,as:o.as||e.props.as,className:f(s)};return u&&(r.ref=u),m.cloneElement(e,r)}throw console.log({el:t,styles:a}),Error("Something is wrong")})}export{A as Theme,C as createTheme,M as styled};
 //# sourceMappingURL=styled.js.map

package/dist/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../src/styled.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React, { ElementType, ReactElement } from 'react'\nimport { twMerge } from 'tailwind-merge'\nimport { tv } from 'tailwind-variants'\n\ntype Breakpoint = '@initial' | '@sm' | '@md' | '@lg' | '@xl'\n\nexport const Theme = ({\n  children,\n  theme\n}: React.PropsWithChildren<{ theme?: Record<string, string> }>) => (\n  <div className=\"contents\" style={theme}>\n    {children}\n  </div>\n)\n\nexport const createTheme = (config: Record<string, Record<string, string>>) =>\n  Object.fromEntries(\n    Object.values(config).flatMap((tokens) =>\n      Object.entries(tokens).map(([token, value]) => [`--${token}`, value])\n    )\n  )\n\n// ---------------------------------------------------------------------------\n// Local typing for styled()\n// ---------------------------------------------------------------------------\n\n// Responsive variant prop: either a single value or a per-breakpoint map\n// Each breakpoint can have a different value from the union type V\ntype ResponsiveVariant<V extends string | number | boolean> =\n  | V\n  | Partial<Record<Breakpoint, V>>\n\n// Helpers to derive value type from variant config keys\ntype Keys<V> = keyof V\ntype StringKeys<V> = Extract<Keys<V>, string>\ntype NumberKeys<V> = Extract<Keys<V>, number>\n// Booleans are represented as string keys \"true\"/\"false\" in our VariantConfig,\n// so we only need to detect those in StringKeys.\ntype BooleanKeys<V> = Extract<StringKeys<V>, 'true' | 'false'>\n\ntype HasBoolLikeKeys<V> =\n  BooleanKeys<V> extends never\n    ? Extract<StringKeys<V>, 'true' | 'false'> extends never\n      ? false\n      : true\n    : true\n\n// If a variant's keys are boolean-like, expose the prop as boolean.\n// If it has numeric keys, allow those numbers and their string forms.\n// Otherwise use a string union of the keys.\ntype VariantValueType<V> =\n  HasBoolLikeKeys<V> extends true\n    ? boolean\n    : [NumberKeys<V>] extends [never]\n      ? StringKeys<V>\n      : NumberKeys<V> | `${NumberKeys<V>}`\n\n// Shape of the `variants` section passed to styled()\ntype VariantConfig = Record<string, Record<string | number, string | string[]>>\n\n// Options for styled() function\ntype StyledOptions = {\n  enabledResponsiveVariants?: boolean\n}\n\n// Helper to check if responsive variants are enabled\ntype AreResponsiveVariantsEnabled<O> = O extends {\n  enabledResponsiveVariants: true\n}\n  ? true\n  : false\n\n// Props derived from a `variants` config\n// If enabledResponsiveVariants is true, all variants support responsive values\n// If enabledResponsiveVariants is not provided or false, variants do not support responsive values\ntype VariantProps<\n  V extends VariantConfig | undefined,\n  R extends boolean = false\n> = V extends VariantConfig\n  ? R extends true\n    ? {\n        [K in keyof V]?: ResponsiveVariant<VariantValueType<V[K]>>\n      }\n    : {\n        [K in keyof V]?: VariantValueType<V[K]>\n      }\n  : unknown\n\n// Typed config for our styled helper.\n// We intentionally *don't* rely on tailwind-variants' TS types here;\n// we only care about enough structure to derive props.\ntype StyledConfig<V extends VariantConfig | undefined = undefined> = {\n  base?: string | string[]\n  variants?: V\n  compoundVariants?: Array<\n    {\n      class?: string | string[]\n    } & (V extends VariantConfig\n      ? {\n          [K in keyof V]?: VariantValueType<V[K]> | VariantValueType<V[K]>[]\n        }\n      : Record<string, never>)\n  >\n  defaultVariants?: V extends VariantConfig\n    ? { [K in keyof V]?: VariantValueType<V[K]> }\n    : Record<string, never>\n}\n\n// Function overloads for better type inference\nexport function styled<TElement extends ElementType, V extends VariantConfig>(\n  el: TElement,\n  styles: StyledConfig<V>,\n  options: { enabledResponsiveVariants: true }\n): React.ForwardRefExoticComponent<\n  Omit<React.ComponentPropsWithRef<TElement>, keyof V> &\n    VariantProps<V, true> & { as?: ElementType }\n>\n\nexport function styled<\n  TElement extends ElementType,\n  V extends VariantConfig | undefined = undefined\n>(\n  el: TElement,\n  styles: StyledConfig<V>\n): React.ForwardRefExoticComponent<\n  Omit<\n    React.ComponentPropsWithRef<TElement>,\n    V extends VariantConfig ? keyof V : never\n  > &\n    VariantProps<V, false> & { as?: ElementType }\n>\n\n// Implementation\nexport function styled<\n  TElement extends ElementType,\n  V extends VariantConfig | undefined = undefined,\n  O extends StyledOptions | undefined = undefined\n>(el: TElement, styles: StyledConfig<V>, options?: O) {\n  const variantKeys = Object.keys(styles.variants || {})\n  const enabledResponsiveVariants = options?.enabledResponsiveVariants === true\n  const tvFn = tv(styles as any)\n\n  type ResponsiveVariantsEnabled = AreResponsiveVariantsEnabled<O>\n  type VariantPropsType = VariantProps<V, ResponsiveVariantsEnabled>\n  type BaseProps = React.ComponentPropsWithRef<TElement>\n  // Extract variant keys to omit from BaseProps so variant props override native HTML attributes\n  type VariantKeys = V extends VariantConfig ? keyof V : never\n  type StyledProps = Omit<BaseProps, VariantKeys> &\n    VariantPropsType & { as?: ElementType }\n\n  const Comp = React.forwardRef<React.ElementRef<TElement>, StyledProps>(\n    (props, ref) => {\n      const additionalStyles = enabledResponsiveVariants\n        ? variantKeys\n            .map((variantKey) => {\n              const responsiveVariantConfig:\n                | Record<Breakpoint, string | number>\n                | undefined = props[variantKey]\n              const variantStyles: Record<string, string | string[]> =\n                styles.variants![variantKey]\n\n              if (\n                typeof responsiveVariantConfig === 'object' &&\n                responsiveVariantConfig &&\n                !Array.isArray(responsiveVariantConfig)\n              ) {\n                return Object.entries(responsiveVariantConfig).flatMap(\n                  ([key, val]: [Breakpoint, string | number]) => {\n                    const valStr = String(val)\n                    const styleArr: string | string[] =\n                      variantStyles && variantStyles[valStr]\n\n                    if (styleArr && Array.isArray(styleArr)) {\n                      return styleArr.flatMap((cls: string) => {\n                        if (key === '@initial') return cls\n                        return `${key.replace('@', '')}:${cls}`\n                      })\n                    }\n                    return []\n                  }\n                )\n              }\n\n              return []\n            })\n            .flat()\n        : []\n\n      const cls = tvFn(props)\n\n      const filteredProps = Object.fromEntries(\n        Object.entries(props).filter(\n          ([key]) => !variantKeys.includes(key) && key !== 'as'\n        )\n      )\n\n      const mergedClassName = clsx(cls, additionalStyles).trim()\n      const propsClassName = (props as any).className\n\n      if (\n        typeof el === 'string' ||\n        typeof el === 'function' ||\n        (el && typeof el === 'object')\n      ) {\n        const elementType = el as ElementType\n\n        // If el is a host string ('div', 'span', etc.) we must not pass variant props to the DOM.\n        if (typeof el === 'string') {\n          const { className: _, ...restFilteredProps } = filteredProps as any\n          return React.createElement(props.as || elementType, {\n            ...restFilteredProps,\n            ref,\n            className: twMerge(mergedClassName, propsClassName)\n          })\n        }\n\n        // If el is a function component (including forwardRef), pass ALL props through\n        // (the wrapped component may expect variant props), but ensure className and ref are forwarded.\n        const propsForComponent = {\n          ...filteredProps, // original props (includes variant keys)\n          as: props.as,\n          className: twMerge(mergedClassName, (props as any).className),\n          ref\n        }\n\n        return React.createElement(elementType, propsForComponent)\n      }\n\n      if (React.isValidElement(el)) {\n        const element = el as ReactElement\n        // Merge existing element className, incoming filteredProps.className and our computed class\n        const existingClass = (element.props as any).className\n        const incomingClass = (filteredProps as any).className\n        const finalClassName = clsx(\n          existingClass,\n          incomingClass,\n          mergedClassName\n        ).trim()\n\n        const cloneProps: any = {\n          // ...element.props,\n          ...filteredProps,\n          as: props.as || element.props.as,\n          className: twMerge(finalClassName)\n        }\n\n        // Forward the ref if provided\n        if (ref) {\n          cloneProps.ref = ref\n        }\n\n        return React.cloneElement(element, cloneProps)\n      }\n\n      console.log({ el, styles })\n      throw Error('Something is wrong')\n    }\n  )\n\n  return Comp\n}\n"],"names":["Theme","children","theme","React","createTheme","config","tokens","token","value","styled","el","styles","options","variantKeys","enabledResponsiveVariants","tvFn","tv","props","ref","additionalStyles","variantKey","responsiveVariantConfig","variantStyles","key","val","valStr","styleArr","cls","filteredProps","mergedClassName","clsx","propsClassName","elementType","_","restFilteredProps","twMerge","propsForComponent","element","existingClass","incomingClass","finalClassName","cloneProps"],"mappings":"+HAOaA,EAAQ,CAAC,CACpB,SAAAC,EACA,MAAAC,CACF,IACEC,EAAA,cAAC,OAAI,UAAU,WAAW,MAAOD,CAC9BD,EAAAA,CACH,EAGWG,EAAeC,GAC1B,OAAO,YACL,OAAO,OAAOA,CAAM,EAAE,QAASC,GAC7B,OAAO,QAAQA,CAAM,EAAE,IAAI,CAAC,CAACC,EAAOC,CAAK,IAAM,CAAC,KAAK,OAAAD,GAASC,CAAK,CAAC,CACtE,CACF,WAiHcC,EAIdC,EAAcC,EAAyBC,EAAa,CACpD,MAAMC,EAAc,OAAO,KAAKF,EAAO,UAAY,CAAA,CAAE,EAC/CG,GAA4BF,GAAA,KAAAA,OAAAA,EAAS,6BAA8B,GACnEG,EAAOC,EAAGL,CAAa,EAuH7B,OA7GaR,EAAM,WACjB,CAACc,EAAOC,IAAQ,CACd,MAAMC,EAAmBL,EACrBD,EACG,IAAKO,GAAe,CACnB,MAAMC,EAEUJ,EAAMG,CAAU,EAC1BE,EACJX,EAAO,SAAUS,CAAU,EAE7B,OACE,OAAOC,GAA4B,UACnCA,GACA,CAAC,MAAM,QAAQA,CAAuB,EAE/B,OAAO,QAAQA,CAAuB,EAAE,QAC7C,CAAC,CAACE,EAAKC,CAAG,IAAqC,CAC7C,MAAMC,EAAS,OAAOD,CAAG,EACnBE,EACJJ,GAAiBA,EAAcG,CAAM,EAEvC,OAAIC,GAAY,MAAM,QAAQA,CAAQ,EAC7BA,EAAS,QAASC,GACnBJ,IAAQ,WAAmBI,EACxB,GAAG,OAAAJ,EAAI,QAAQ,IAAK,EAAE,EAAC,GAAI,EAAA,OAAAI,CACnC,CAAA,EAEI,CAAA,CACT,CACF,EAGK,CACT,CAAA,CAAC,EACA,KAAA,EACH,CAAA,EAEEA,EAAMZ,EAAKE,CAAK,EAEhBW,EAAgB,OAAO,YAC3B,OAAO,QAAQX,CAAK,EAAE,OACpB,CAAC,CAACM,CAAG,IAAM,CAACV,EAAY,SAASU,CAAG,GAAKA,IAAQ,IACnD,CACF,EAEMM,EAAkBC,EAAKH,EAAKR,CAAgB,EAAE,OAC9CY,EAAkBd,EAAc,UAEtC,GACE,OAAOP,GAAO,UACd,OAAOA,GAAO,YACbA,GAAM,OAAOA,GAAO,SACrB,CACA,MAAMsB,EAActB,EAGpB,GAAI,OAAOA,GAAO,SAAU,CAC1B,KAAM,CAAE,UAAWuB,EAAG,GAAGC,CAAkB,EAAIN,EAC/C,OAAOzB,EAAM,cAAcc,EAAM,IAAMe,EAAa,CAClD,GAAGE,EACH,IAAAhB,EACA,UAAWiB,EAAQN,EAAiBE,CAAc,CACpD,CAAC,CACH,CAIA,MAAMK,EAAoB,CACxB,GAAGR,EACH,GAAIX,EAAM,GACV,UAAWkB,EAAQN,EAAkBZ,EAAc,SAAS,EAC5D,IAAAC,CACF,EAEA,OAAOf,EAAM,cAAc6B,EAAaI,CAAiB,CAC3D,CAEA,GAAIjC,EAAM,eAAeO,CAAE,EAAG,CAC5B,MAAM2B,EAAU3B,EAEV4B,EAAiBD,EAAQ,MAAc,UACvCE,EAAiBX,EAAsB,UACvCY,EAAiBV,EACrBQ,EACAC,EACAV,CACF,EAAE,OAEIY,EAAkB,CAEtB,GAAGb,EACH,GAAIX,EAAM,IAAMoB,EAAQ,MAAM,GAC9B,UAAWF,EAAQK,CAAc,CACnC,EAGA,OAAItB,IACFuB,EAAW,IAAMvB,GAGZf,EAAM,aAAakC,EAASI,CAAU,CAC/C,CAEA,MAAA,QAAQ,IAAI,CAAE,GAAA/B,EAAI,OAAAC,CAAO,CAAC,EACpB,MAAM,oBAAoB,CAClC,CACF,CAGF"}
+{"version":3,"file":"styled.js","sources":["../src/styled.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React, { ElementType, ReactElement } from 'react'\nimport { twMerge } from 'tailwind-merge'\nimport { tv } from 'tailwind-variants'\n\ntype Breakpoint = '@initial' | '@sm' | '@md' | '@lg' | '@xl'\n\nexport const Theme = ({\n  children,\n  theme\n}: React.PropsWithChildren<{ theme?: Record<string, string> }>) => (\n  <div className=\"contents\" style={theme}>\n    {children}\n  </div>\n)\n\nexport const createTheme = (config: Record<string, Record<string, string>>) =>\n  Object.fromEntries(\n    Object.values(config).flatMap((tokens) =>\n      Object.entries(tokens).map(([token, value]) => [`--${token}`, value])\n    )\n  )\n\n// ---------------------------------------------------------------------------\n// Local typing for styled()\n// ---------------------------------------------------------------------------\n\n// Responsive variant prop: either a single value or a per-breakpoint map\n// Each breakpoint can have a different value from the union type V\ntype ResponsiveVariant<V extends string | number | boolean> =\n  | V\n  | Partial<Record<Breakpoint, V>>\n\n// Helpers to derive value type from variant config keys\ntype Keys<V> = keyof V\ntype StringKeys<V> = Extract<Keys<V>, string>\ntype NumberKeys<V> = Extract<Keys<V>, number>\n// Booleans are represented as string keys \"true\"/\"false\" in our VariantConfig,\n// so we only need to detect those in StringKeys.\ntype BooleanKeys<V> = Extract<StringKeys<V>, 'true' | 'false'>\n\ntype HasBoolLikeKeys<V> =\n  BooleanKeys<V> extends never\n    ? Extract<StringKeys<V>, 'true' | 'false'> extends never\n      ? false\n      : true\n    : true\n\n// If a variant's keys are boolean-like, expose the prop as boolean.\n// If it has numeric keys, allow those numbers and their string forms.\n// Otherwise use a string union of the keys.\ntype VariantValueType<V> =\n  HasBoolLikeKeys<V> extends true\n    ? boolean\n    : [NumberKeys<V>] extends [never]\n      ? StringKeys<V>\n      : NumberKeys<V> | `${NumberKeys<V>}`\n\n// Shape of the `variants` section passed to styled()\ntype VariantConfig = Record<string, Record<string | number, string | string[]>>\n\n// Options for styled() function\ntype StyledOptions = {\n  enabledResponsiveVariants?: boolean\n}\n\n// Helper to check if responsive variants are enabled\ntype AreResponsiveVariantsEnabled<O> = O extends {\n  enabledResponsiveVariants: true\n}\n  ? true\n  : false\n\n// Props derived from a `variants` config\n// If enabledResponsiveVariants is true, all variants support responsive values\n// If enabledResponsiveVariants is not provided or false, variants do not support responsive values\ntype VariantProps<\n  V extends VariantConfig | undefined,\n  R extends boolean = false\n> = V extends VariantConfig\n  ? R extends true\n    ? {\n        [K in keyof V]?: ResponsiveVariant<VariantValueType<V[K]>>\n      }\n    : {\n        [K in keyof V]?: VariantValueType<V[K]>\n      }\n  : unknown\n\n// Typed config for our styled helper.\n// We intentionally *don't* rely on tailwind-variants' TS types here;\n// we only care about enough structure to derive props.\ntype StyledConfig<V extends VariantConfig | undefined = undefined> = {\n  base?: string | string[]\n  variants?: V\n  compoundVariants?: Array<\n    {\n      class?: string | string[]\n    } & (V extends VariantConfig\n      ? {\n          [K in keyof V]?: VariantValueType<V[K]> | VariantValueType<V[K]>[]\n        }\n      : Record<string, never>)\n  >\n  defaultVariants?: V extends VariantConfig\n    ? { [K in keyof V]?: VariantValueType<V[K]> }\n    : Record<string, never>\n}\n\n// Function overloads for better type inference\nexport function styled<TElement extends ElementType, V extends VariantConfig>(\n  el: TElement,\n  styles: StyledConfig<V>,\n  options: { enabledResponsiveVariants: true }\n): React.ForwardRefExoticComponent<\n  Omit<React.ComponentPropsWithRef<TElement>, keyof V> &\n    VariantProps<V, true> & { as?: ElementType }\n>\n\nexport function styled<\n  TElement extends ElementType,\n  V extends VariantConfig | undefined = undefined\n>(\n  el: TElement,\n  styles: StyledConfig<V>\n): React.ForwardRefExoticComponent<\n  Omit<\n    React.ComponentPropsWithRef<TElement>,\n    V extends VariantConfig ? keyof V : never\n  > &\n    VariantProps<V, false> & { as?: ElementType }\n>\n\n// Implementation\nexport function styled<\n  TElement extends ElementType,\n  V extends VariantConfig | undefined = undefined,\n  O extends StyledOptions | undefined = undefined\n>(el: TElement, styles: StyledConfig<V>, options?: O) {\n  const variantKeys = Object.keys(styles.variants || {})\n  const enabledResponsiveVariants = options?.enabledResponsiveVariants === true\n  const tvFn = tv(styles as any)\n\n  type ResponsiveVariantsEnabled = AreResponsiveVariantsEnabled<O>\n  type VariantPropsType = VariantProps<V, ResponsiveVariantsEnabled>\n  type BaseProps = React.ComponentPropsWithRef<TElement>\n  // Extract variant keys to omit from BaseProps so variant props override native HTML attributes\n  type VariantKeys = V extends VariantConfig ? keyof V : never\n  type StyledProps = Omit<BaseProps, VariantKeys> &\n    VariantPropsType & { as?: ElementType }\n\n  const Comp = React.forwardRef<React.ElementRef<TElement>, StyledProps>(\n    (props, ref) => {\n      const additionalStyles = enabledResponsiveVariants\n        ? variantKeys\n            .map((variantKey) => {\n              const responsiveVariantConfig:\n                | Record<Breakpoint, string | number>\n                | undefined = props[variantKey]\n              const variantStyles: Record<string, string | string[]> =\n                styles.variants![variantKey]\n\n              if (\n                typeof responsiveVariantConfig === 'object' &&\n                responsiveVariantConfig &&\n                !Array.isArray(responsiveVariantConfig)\n              ) {\n                return Object.entries(responsiveVariantConfig).flatMap(\n                  ([key, val]: [Breakpoint, string | number]) => {\n                    const valStr = String(val)\n                    const styleArr: string | string[] =\n                      variantStyles && variantStyles[valStr]\n\n                    if (styleArr && Array.isArray(styleArr)) {\n                      return styleArr.flatMap((cls: string) => {\n                        if (key === '@initial') return cls\n                        return `${key.replace('@', '')}:${cls}`\n                      })\n                    }\n                    return []\n                  }\n                )\n              }\n\n              return []\n            })\n            .flat()\n        : []\n\n      const cls = tvFn(props)\n\n      const filteredProps = Object.fromEntries(\n        Object.entries(props).filter(\n          ([key]) =>\n            !variantKeys.includes(key) &&\n            key !== 'as' &&\n            key !== '__wrapperClasses'\n        )\n      )\n\n      const mergedClassName = clsx(cls, additionalStyles).trim()\n      const propsClassName = (props as any).className\n      // Check for wrapper classes passed from a parent styled component\n      const wrapperClasses = (props as any).__wrapperClasses\n\n      if (\n        typeof el === 'string' ||\n        typeof el === 'function' ||\n        (el && typeof el === 'object')\n      ) {\n        const elementType = el as ElementType\n\n        // If el is a host string ('div', 'span', etc.) we must not pass variant props to the DOM.\n        if (typeof el === 'string') {\n          const { className: _, ...restFilteredProps } = filteredProps as any\n          // Merge order: wrapper classes (lowest priority) < component classes < user's className (highest priority)\n          const finalClassName = wrapperClasses\n            ? twMerge(wrapperClasses, mergedClassName, propsClassName)\n            : twMerge(mergedClassName, propsClassName)\n          return React.createElement(props.as || elementType, {\n            ...restFilteredProps,\n            ref,\n            className: finalClassName\n          })\n        }\n\n        // If el is a function component (including forwardRef), pass ALL props through\n        // (the wrapped component may expect variant props), but ensure className and ref are forwarded.\n        // We need to pass all props (not filteredProps) because the underlying component may have its own variants\n        //\n        // For className merging with wrapped styled components:\n        // Solution: Pass wrapper's classes via __wrapperClasses prop for styled components to merge correctly.\n        // For regular function components, merge wrapper classes with our classes and pass as className.\n        // This ensures:\n        //   - Styled components can merge: wrapper classes < wrapped component classes < user's className\n        //   - Regular components get merged classes directly and don't receive __wrapperClasses\n        // Filter out variant props and __wrapperClasses from props passed to function components\n        // This prevents them from ending up in the DOM.\n        // Note: We filter out variant props that belong to THIS component. Variant props that belong to\n        // the wrapped component will be passed through (they're not in variantKeys), and the wrapped\n        // component will filter them if it's a styled component.\n        // Note: 'as' prop is filtered from filteredProps to prevent it from going to DOM for string elements,\n        // but we add it back for function components since they need it for polymorphism.\n        const { className: _, ...restFilteredProps } = filteredProps as any\n        const asProp = (props as any).as // Extract 'as' prop separately\n\n        // For styled components: Pass wrapper classes via __wrapperClasses so they can merge correctly.\n        // For regular function components: Merge wrapper classes with our classes and pass as className.\n        //\n        // Strategy: Only pass __wrapperClasses when we received it from a parent (indicating nested styled components).\n        // Top-level wrappers should merge classes into className to avoid __wrapperClasses in DOM for regular components.\n        if (wrapperClasses) {\n          // We have wrapper classes from parent - this is a nested styled component scenario\n          // Pass __wrapperClasses for styled components to merge correctly\n          const combinedWrapperClasses = twMerge(\n            wrapperClasses,\n            mergedClassName\n          )\n          const mergedClassNameWithWrapper = twMerge(\n            wrapperClasses,\n            mergedClassName\n          )\n          const finalClassName = twMerge(\n            mergedClassNameWithWrapper,\n            propsClassName\n          )\n\n          const propsForComponent = {\n            ...restFilteredProps, // Base props (filters THIS component's variant props, __wrapperClasses, 'as')\n            ...(asProp ? { as: asProp } : {}), // Add 'as' prop back for function components (polymorphic support)\n            // Note: We don't add variant props back - they're already filtered by filteredProps.\n            // If the wrapped component needs variant props, they should be passed as regular props\n            // (not as variant props for THIS component).\n            __wrapperClasses: combinedWrapperClasses, // For styled components\n            className: finalClassName, // For regular function components\n            ref\n          }\n          return React.createElement(elementType, propsForComponent)\n        } else {\n          // No wrapper classes from parent - we're top-level\n          // Merge our classes and pass as className (don't pass __wrapperClasses to avoid DOM issues)\n          const finalClassName = twMerge(mergedClassName, propsClassName)\n\n          const propsForComponent = {\n            ...restFilteredProps, // Base props (filters THIS component's variant props, __wrapperClasses, 'as')\n            ...(asProp ? { as: asProp } : {}), // Add 'as' prop back for function components (polymorphic support)\n            // Note: We don't add variant props back - they're already filtered by filteredProps.\n            className: finalClassName,\n            ref\n          }\n          return React.createElement(elementType, propsForComponent)\n        }\n      }\n\n      if (React.isValidElement(el)) {\n        const element = el as ReactElement\n        // Merge existing element className, incoming filteredProps.className and our computed class\n        const existingClass = (element.props as any).className\n        const incomingClass = (filteredProps as any).className\n        const finalClassName = clsx(\n          existingClass,\n          incomingClass,\n          mergedClassName\n        ).trim()\n\n        const cloneProps: any = {\n          // ...element.props,\n          ...filteredProps,\n          as: props.as || element.props.as,\n          className: twMerge(finalClassName)\n        }\n\n        // Forward the ref if provided\n        if (ref) {\n          cloneProps.ref = ref\n        }\n\n        return React.cloneElement(element, cloneProps)\n      }\n\n      console.log({ el, styles })\n      throw Error('Something is wrong')\n    }\n  )\n\n  return Comp\n}\n"],"names":["Theme","children","theme","React","createTheme","config","tokens","token","value","styled","el","styles","options","variantKeys","enabledResponsiveVariants","tvFn","tv","props","ref","additionalStyles","variantKey","responsiveVariantConfig","variantStyles","key","val","valStr","styleArr","cls","filteredProps","mergedClassName","clsx","propsClassName","wrapperClasses","elementType","_","restFilteredProps","finalClassName","twMerge","asProp","combinedWrapperClasses","mergedClassNameWithWrapper","propsForComponent","element","existingClass","incomingClass","cloneProps"],"mappings":"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"}

package/package.json

@@ -4,7 +4,7 @@
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",
   "module": "dist/index.js",
-  "version": "6.0.0-beta.18",
+  "version": "6.0.0-beta.19",
   "description": "",
   "files": [
     "dist",
@@ -22,7 +22,8 @@
       "default": "./dist/index.js"
     },
     "./index.css": "./src/index.css",
-    "./vite": "./scripts/vite-plugin-tailwind-responsive-variant-classes.mjs"
+    "./vite": "./scripts/vite-plugin-tailwind-responsive-variant-classes.mjs",
+    "./docgen.json": "./dist/docgen.json"
   },
   "sideEffects": false,
   "scripts": {
@@ -75,7 +76,7 @@
   ],
   "devDependencies": {
     "@atom-learning/icons": "1.20.0",
-    "@atom-learning/theme": "6.0.0-beta.3",
+    "@atom-learning/theme": "6.0.0-beta.8",
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
     "@ianvs/prettier-plugin-sort-imports": "^4.7.0",