npm - @atom-learning/components - Versions diffs - 6.0.0-beta.20 → 6.0.0-beta.21 - Mend

@atom-learning/components 6.0.0-beta.20 → 6.0.0-beta.21

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

Files changed (50) hide show

package/dist/styled.js CHANGED Viewed

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

package/dist/styled.js.map CHANGED Viewed

	@@ -1 +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]) =>\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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"}
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 { defaultConfig, tv } from 'tailwind-variants'\n\ndefaultConfig.twMerge = false\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 // Filter out variant props that don't belong to this component before calling tvFn\n // This prevents tailwind-variants from processing props meant for wrapped components\n // Only pass props that are in this component's variant keys\n const propsForTv =\n variantKeys.length > 0\n ? Object.fromEntries(\n Object.entries(props).filter(([key]) => variantKeys.includes(key))\n )\n : {}\n\n const cls = tvFn(propsForTv)\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 // This ensures variant classes from this component override base classes from wrapper\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 // Note: __wrapperClasses is already filtered out in filteredProps, so restFilteredProps doesn't include it\n\n // For styled components: Pass wrapper classes via __wrapperClasses so they can merge correctly.\n // Styled components extract __wrapperClasses from props (before filteredProps) and filter it in filteredProps.\n // For regular function components: We merge wrapper classes into className, but also pass __wrapperClasses\n // which they may spread. To prevent it in DOM, we need to ensure it's filtered, but we can't control that.\n // However, styled components that wrap regular components will filter __wrapperClasses in their filteredProps.\n if (wrapperClasses) {\n // We have wrapper classes from parent - this is a nested styled component scenario\n // Merge order: wrapper classes (base) < this component's classes (variants) < user's className\n // This ensures variant classes override base classes via twMerge\n const combinedWrapperClasses = twMerge(\n wrapperClasses,\n mergedClassName\n )\n const finalClassName = twMerge(combinedWrapperClasses, propsClassName)\n\n // Check if the wrapped component is a styled component\n // React.forwardRef components are objects, not functions\n const isStyledComponent =\n (typeof elementType === 'function' \|\|\n typeof elementType === 'object') &&\n elementType !== null &&\n (elementType as any).__isStyledComponent === true\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 // Only pass __wrapperClasses to styled components\n ...(isStyledComponent\n ? { __wrapperClasses: combinedWrapperClasses }\n : {}),\n className: finalClassName, // For all function components (includes user's className)\n ref\n } as any\n return React.createElement(elementType, propsForComponent)\n } else {\n // No wrapper classes from parent - we're top-level\n // For function components: Pass __wrapperClasses so styled components can merge correctly.\n // Styled components extract __wrapperClasses from their props (before filteredProps) and filter it in filteredProps.\n // Regular function components will receive __wrapperClasses but should filter it out themselves.\n // We also merge wrapper classes into className for regular function components.\n // Note: We pass __wrapperClasses in props (not filteredProps) so styled components can access it,\n // but styled components filter it in their filteredProps so it won't go to DOM.\n // Regular function components that spread all props will pass __wrapperClasses to DOM, which is a problem.\n // But we can't distinguish them, so we rely on styled components filtering it.\n // Check if the wrapped component is a styled component\n // elementType is the component itself (e.g., Inner when Outer extends Inner)\n // React.forwardRef components are objects, not functions, but we can still check the flag\n const isStyledComponent =\n (typeof elementType === 'function' \|\|\n typeof elementType === 'object') &&\n elementType !== null &&\n (elementType as any).__isStyledComponent === true\n\n // For styled components: Don't merge wrapper classes into className - they use __wrapperClasses instead\n // This ensures the merge order is: wrapper classes (from __wrapperClasses) < variant classes < user's className\n // For regular function components: Merge wrapper classes into className\n const classNameForComponent = isStyledComponent\n ? propsClassName // Only user's className, not wrapper's classes (styled components use __wrapperClasses)\n : twMerge(mergedClassName, propsClassName) // Merged classes for regular function components\n\n const propsForComponent = {\n ...restFilteredProps, // Filters out __wrapperClasses, variant props, 'as'\n ...(asProp ? { as: asProp } : {}),\n // Only pass __wrapperClasses to styled components\n ...(isStyledComponent ? { __wrapperClasses: mergedClassName } : {}),\n className: classNameForComponent,\n ref\n } as any\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 // Mark the component as a styled component so we can detect it later\n ;(Comp as any).__isStyledComponent = true\n\n return Comp\n}\n"],"names":["defaultConfig","Theme","children","theme","React","createTheme","config","tokens","token","value","styled","el","styles","options","variantKeys","enabledResponsiveVariants","tvFn","tv","Comp","props","ref","additionalStyles","variantKey","responsiveVariantConfig","variantStyles","key","val","valStr","styleArr","cls","propsForTv","filteredProps","mergedClassName","clsx","propsClassName","wrapperClasses","elementType","_","restFilteredProps","finalClassName","twMerge","asProp","combinedWrapperClasses","isStyledComponent","propsForComponent","classNameForComponent","element","existingClass","incomingClass","cloneProps"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -4,7 +4,7 @@
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",
   "module": "dist/index.js",
-  "version": "6.0.0-beta.20",
+  "version": "6.0.0-beta.21",
   "description": "",
   "files": [
     "dist",

package/scripts/vite-plugin-tailwind-responsive-variant-classes.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
 import path from 'path'
-import minimatch from 'minimatch'
+import { minimatch } from 'minimatch'
 import { generateResponsiveVariantClassesSafelist } from './generate-responsive-variant-classes.mjs'

package/src/responsive-variant-classes.css CHANGED Viewed

@@ -12,4 +12,4 @@
  * Uses Tailwind v4's @source inline() pattern syntax for efficient class detection.
  */
-@source inline("{,sm:,md:,lg:,xl:}{*:not-last:mr-2,*:not-last:mr-3,[--active:rgba(white,0.25)],[--active:var(--color-danger-dark)],[--active:var(--color-primary-1000)],[--active:var(--color-primary-1100)],[--active:var(--color-primary-1200)],[--active:var(--color-success-dark)],[--active:var(--color-warning-dark)],[--active:var(--color-white)],[--banner-heading-color:var(--color-foreground-7-plus)],[--banner-text-color:var(--color-grey-100)],[--base:var(--color-danger)],[--base:var(--color-grey-700)],[--base:var(--color-primary-1000)],[--base:var(--color-primary-800)],[--base:var(--color-success)],[--base:var(--color-warning)],[--base:var(--color-white)],[--base:white],[--interact:rgba(white,0.1)],[--interact:var(--color-danger-mid)],[--interact:var(--color-primary-1100)],[--interact:var(--color-primary-900)],[--interact:var(--color-success-mid)],[--interact:var(--color-warning-mid)],[--interact:var(--color-white)],[--text:var(--color-primary-800)],[align-items:first baseline],[align-items:inherit],[align-items:initial],[align-items:last baseline],[align-items:normal],[align-items:revert-layer],[align-items:revert],[align-items:safe],[align-items:self-end],[align-items:self-start],[align-items:unsafe],[align-items:unset],[flex-wrap:inherit],[flex-wrap:initial],[flex-wrap:revert-layer],[flex-wrap:revert],[flex-wrap:unset],[justify-content:inherit],[justify-content:initial],[justify-content:left],[justify-content:revert-layer],[justify-content:revert],[justify-content:right],[justify-content:safe],[justify-content:unsafe],[justify-content:unset],absolute,after:hidden!,before:hidden!,bg-(--background-bold),bg-(--background-subtle),bg-(--base),bg-(--base-1),bg-(--base-11),bg-(--base-3),bg-grey-100,bg-grey-400,bg-position-[right_--spacing(2)_top_50%,0_0],bg-position-[right_--spacing(3)_top_50%,0_0],bg-size-[18px_auto,100%],bg-size-[20px_auto,100%],bg-transparent,bg-unset,bg-white,block,border,border-(--base-3),border-b,border-b-(--border-bottom),border-current,border-grey-700,border-none,border-white,capsize-[0.2078],capsize-[0.3864],capsize-after-[0.2405],capsize-after-[0.2634],capsize-after-[0.26],capsize-after-[0.2],capsize-before-[0.1405],capsize-before-[0.16],capsize-before-[0.1],capsize-before-[0.2114],cursor-not-allowed opacity-60 pointer-events-none,cursor-pointer,data-[state=inactive]:hover:bg-marsh-300,data-[state=inactive]:hover:bg-primary-300,direction-[inherit],direction-[initial],direction-[revert-layer],direction-[revert],direction-[unset],disabled:cursor-not-allowed,disabled:opacity-30,flex-1,flex-[unset],flex-col,flex-col-reverse,flex-no-wrap,flex-row,flex-row-reverse,flex-wrap,flex-wrap-reverse,focus-visible:border-marsh-800,focus-visible:border-primary-800,focus:border-primary-800,focus:outline-2,focus:outline-blue-800,focus:outline-none,focus:outline-offset-1,focus:outline-solid,focus:z-1,font-body,font-bold,font-display,font-medium,font-mono,font-normal,font-semibold,gap-0.5,gap-1,gap-10,gap-12,gap-16,gap-2,gap-20,gap-3,gap-4,gap-6,gap-8,h-1,h-10,h-12,h-16,h-2,h-24,h-8,h-auto,h-full,h-px,h-screen,hidden,items-baseline,items-center,items-end,items-start,items-stretch,justify-around,justify-between,justify-center,justify-end,justify-evenly,justify-normal,justify-start,justify-stretch,leading-[1.08],leading-[1.12],leading-[1.14],leading-none,leading-normal,max-h-12,max-h-18,max-h-8,max-h-[142px],max-h-[213px],max-h-none,max-h-screen,max-w-14,max-w-21,max-w-[126px],max-w-[190px],max-w-[285px],max-w-full,max-w-none,max-w-screen,mb-3,mb-4,mb-6,min-h-10,min-h-12,min-h-8,not-disabled:active:bg-(--active),not-disabled:active:text-(--active),not-disabled:focus:bg-(--interact),not-disabled:focus:no-underline,not-disabled:focus:text-(--interact),not-disabled:focus:text-(--text,white),not-disabled:focus:text-white,not-disabled:hover:bg-(--interact),not-disabled:hover:no-underline,not-disabled:hover:text-(--interact),not-disabled:hover:text-(--text,white),not-disabled:hover:text-white,p-10,p-2,p-3,p-4,p-6,p-8,pl-2,pl-3,pr-10,pr-8,px-1,px-2,px-4,px-6,px-8,py-0.5,py-1,py-4,py-6,right-4,rounded-full,rounded-md,rounded-sm,rounded-xl,shadow-[0px_4px_4px_-2px_rgba(31,31,31,0.1)],size-1.5,size-10,size-12,size-3,size-4,size-6,size-8,static,stroke-2,stroke-[1.5],stroke-[1.75],supports-[height:100svh]:h-auto,supports-[height:100svh]:h-svh,supports-[height:100svh]:max-h-none,supports-[height:100svh]:max-h-svh,supports-color-mix:backdrop-blur-sm,supports-color-mix:bg-[color-mix(in_hsl,(--base-1)_70%,transparent)],text-(--base),text-(--foreground-7-plus),text-(--text,white),text-(--text-bold),text-(--text-on-white),text-(--text-subtle),text-2xl,text-3xl,text-4xl,text-danger,text-grey-800,text-info,text-lg,text-md,text-primary-800,text-sm,text-success,text-warning,text-white,text-white!,text-xl,text-xs,top-0,top-2,top-4,tracking-[0.01em],w-120,w-150,w-200,w-275,w-95,w-[unset],w-auto,w-full,w-max,w-px,w-screen}");
+@source inline("{,sm:,md:,lg:,xl:}{*:not-last:mr-2,*:not-last:mr-3,[--active:rgba(255,255,255,0.75)],[--active:var(--color-danger-dark)],[--active:var(--color-primary-1000)],[--active:var(--color-primary-1100)],[--active:var(--color-primary-1200)],[--active:var(--color-success-dark)],[--active:var(--color-warning-dark)],[--active:var(--color-white)],[--banner-heading-color:var(--color-foreground-7-plus)],[--banner-text-color:var(--color-grey-100)],[--base:var(--color-danger)],[--base:var(--color-grey-700)],[--base:var(--color-primary-1000)],[--base:var(--color-primary-800)],[--base:var(--color-success)],[--base:var(--color-warning)],[--base:var(--color-white)],[--base:white],[--interact:rgba(255,255,255,0.9)],[--interact:var(--color-danger-mid)],[--interact:var(--color-primary-1100)],[--interact:var(--color-primary-900)],[--interact:var(--color-success-mid)],[--interact:var(--color-warning-mid)],[--interact:var(--color-white)],[--text:var(--color-primary-800)],[align-items:first baseline],[align-items:inherit],[align-items:initial],[align-items:last baseline],[align-items:normal],[align-items:revert-layer],[align-items:revert],[align-items:safe],[align-items:self-end],[align-items:self-start],[align-items:unsafe],[align-items:unset],[flex-wrap:inherit],[flex-wrap:initial],[flex-wrap:revert-layer],[flex-wrap:revert],[flex-wrap:unset],[justify-content:inherit],[justify-content:initial],[justify-content:left],[justify-content:revert-layer],[justify-content:revert],[justify-content:right],[justify-content:safe],[justify-content:unsafe],[justify-content:unset],absolute,after:hidden!,before:hidden!,bg-(--background-bold),bg-(--background-subtle),bg-(--base),bg-(--base-1),bg-(--base-11),bg-(--base-3),bg-grey-100,bg-grey-400,bg-position-[right_--spacing(2)_top_50%,0_0],bg-position-[right_--spacing(3)_top_50%,0_0],bg-size-[18px_auto,100%],bg-size-[20px_auto,100%],bg-transparent,bg-unset,bg-white,block,border,border-(--base-3),border-b,border-b-(--border-bottom),border-current,border-grey-700,border-none,border-white,capsize-[0.2078],capsize-[0.3864],capsize-after-[0.2405],capsize-after-[0.2634],capsize-after-[0.26],capsize-after-[0.2],capsize-before-[0.1405],capsize-before-[0.16],capsize-before-[0.1],capsize-before-[0.2114],cursor-not-allowed opacity-60 pointer-events-none,cursor-pointer,data-[state=inactive]:hover:bg-marsh-300,data-[state=inactive]:hover:bg-primary-300,direction-[inherit],direction-[initial],direction-[revert-layer],direction-[revert],direction-[unset],disabled:cursor-not-allowed,disabled:opacity-30,flex-1,flex-[unset],flex-col,flex-col-reverse,flex-no-wrap,flex-row,flex-row-reverse,flex-wrap,flex-wrap-reverse,focus-visible:border-marsh-800,focus-visible:border-primary-800,focus:border-primary-800,focus:outline-2,focus:outline-blue-800,focus:outline-none,focus:outline-offset-1,focus:outline-solid,focus:z-1,font-body,font-bold,font-display,font-medium,font-mono,font-normal,font-semibold,gap-0.5,gap-1,gap-10,gap-12,gap-16,gap-2,gap-20,gap-3,gap-4,gap-6,gap-8,h-1,h-10,h-12,h-16,h-2,h-24,h-8,h-auto,h-full,h-px,h-screen,hidden,items-baseline,items-center,items-end,items-start,items-stretch,justify-around,justify-between,justify-center,justify-end,justify-evenly,justify-normal,justify-start,justify-stretch,leading-[1.08],leading-[1.12],leading-[1.14],leading-none,leading-normal,max-h-12,max-h-18,max-h-8,max-h-[142px],max-h-[213px],max-h-none,max-h-screen,max-w-14,max-w-21,max-w-[126px],max-w-[190px],max-w-[285px],max-w-full,max-w-none,max-w-screen,mb-3,mb-4,mb-6,min-h-10,min-h-12,min-h-8,not-disabled:active:bg-(--active),not-disabled:active:text-(--active),not-disabled:focus:bg-(--interact),not-disabled:focus:no-underline,not-disabled:focus:text-(--interact),not-disabled:focus:text-(--text,white),not-disabled:focus:text-white,not-disabled:hover:bg-(--interact),not-disabled:hover:no-underline,not-disabled:hover:text-(--interact),not-disabled:hover:text-(--text,white),not-disabled:hover:text-white,p-10,p-2,p-3,p-4,p-6,p-8,pl-2,pl-3,pr-10,pr-8,px-1,px-2,px-4,px-6,px-8,py-0.5,py-1,py-4,py-6,right-4,rounded-full,rounded-md,rounded-sm,rounded-xl,shadow-[0px_4px_4px_-2px_rgba(31,31,31,0.1)],size-1.5,size-10,size-12,size-3,size-4,size-6,size-8,static,stroke-2,stroke-[1.5],stroke-[1.75],supports-[height:100svh]:h-auto,supports-[height:100svh]:h-svh,supports-[height:100svh]:max-h-none,supports-[height:100svh]:max-h-svh,supports-color-mix:backdrop-blur-sm,supports-color-mix:bg-[color-mix(in_hsl,(--base-1)_70%,transparent)],text-(--base),text-(--foreground-7-plus),text-(--text,white),text-(--text-bold),text-(--text-on-white),text-(--text-subtle),text-2xl,text-3xl,text-4xl,text-danger,text-grey-800,text-info,text-lg,text-md,text-primary-800,text-sm,text-success,text-warning,text-white,text-white!,text-xl,text-xs,top-0,top-2,top-4,tracking-[0.01em],w-120,w-150,w-200,w-275,w-95,w-[unset],w-auto,w-full,w-max,w-px,w-screen}");