@atom-learning/components 6.0.0-beta.9 → 6.0.3

package/dist/index.js

@@ -1,2 +1,2 @@
-import{Accordion as x}from"./components/accordion/Accordion.js";import{ActionIcon as i}from"./components/action-icon/ActionIcon.js";import{AlertDialog as l}from"./components/alert-dialog/AlertDialog.js";import{AlertProvider as d,useAlert as u}from"./components/alert-dialog/alert-context/AlertContext.js";import{Avatar as c}from"./components/avatar/Avatar.js";import{Badge as g}from"./components/badge/Badge.js";import{BannerRegular as b}from"./components/banner/banner-regular/BannerRegular.js";import{BannerSlim as C}from"./components/banner/banner-slim/BannerSlim.js";import{Box as h}from"./components/box/Box.js";import{Button as D,StyledButton as G}from"./components/button/Button.js";import{Carousel as k,useCarousel as w}from"./components/carousel/Carousel.js";import{Checkbox as A}from"./components/checkbox/Checkbox.js";import{CheckboxGroup as N}from"./components/checkbox-group/CheckboxGroup.js";import{CheckboxTree as y}from"./components/checkbox-tree/CheckboxTree.js";import{CheckboxField as W}from"./components/checkbox-field/CheckboxField.js";import{Chip as E}from"./components/chip/Chip.js";import{ChipGroup as K}from"./components/chip/ChipGroup.js";import{ChipDismissibleGroup as j}from"./components/chip-dismissible-group/index.js";import{ChipToggleGroup as z}from"./components/chip-toggle-group/index.js";import{Combobox as Q}from"./components/combobox/Combobox.js";import{CreatePasswordField as X}from"./components/create-password-field/CreatePasswordField.js";import{useDataTable as Z}from"./components/data-table/DataTableContext.js";import{DataTable as $}from"./components/data-table/DataTable.js";import{DateField as ro}from"./components/date-field/DateField.js";import{DateInput as to}from"./components/date-input/DateInput.js";import{Dialog as mo}from"./components/dialog/Dialog.js";import{Dismissible as fo}from"./components/dismissible/index.js";import{DismissibleGroup as ao}from"./components/dismissible-group/index.js";import{Divider as no}from"./components/divider/Divider.js";import{Drawer as so}from"./components/drawer/Drawer.js";import{DropdownMenu as To}from"./components/dropdown-menu/DropdownMenu.js";import{EmptyState as So}from"./components/empty-state/EmptyState.js";import{FieldWrapper as Fo}from"./components/field-wrapper/FieldWrapper.js";import{InlineFieldWrapper as Io}from"./components/field-wrapper/InlineFieldWrapper.js";import{FileInput as Bo}from"./components/file-input/FileInput.js";import{Flex as Go}from"./components/flex/Flex.js";import{Form as ko}from"./components/form/Form.js";import"dlv";import"react-hook-form";import"./components/form/useFormCustomContext.js";import{Grid as Po}from"./components/grid/Grid.js";import{Heading as Mo}from"./components/heading/Heading.js";import{Icon as Ro}from"./components/icon/Icon.js";import{Image as Lo}from"./components/image/Image.js";import{InlineMessage as Vo}from"./components/inline-message/InlineMessage.js";import{Input as Ho,InputBackground as Ko,InputText as Oo}from"./components/input/Input.js";import{InputField as qo}from"./components/input-field/InputField.js";import{Label as Jo}from"./components/label/Label.js";import{Link as Uo,StyledLink as Xo}from"./components/link/Link.js";import{List as Zo}from"./components/list/List.js";import{Loader as $o}from"./components/loader/Loader.js";import{MarkdownContent as rr}from"./components/markdown-content/MarkdownContent.js";import{NavigationMenu as tr}from"./components/navigation/NavigationMenu.js";import{NavigationMenuVertical as mr}from"./components/navigation-menu-vertical/NavigationMenuVertical.js";import{NotificationBadge as fr}from"./components/notification-badge/NotificationBadge.js";import{NumberInput as ar}from"./components/number-input/NumberInput.js";import{NumberInputField as nr}from"./components/number-input-field/NumberInputField.js";import{Pagination as ur}from"./components/pagination/Pagination.js";import{PasswordField as cr}from"./components/password-field/PasswordField.js";import{PasswordInput as gr}from"./components/password-input/PasswordInput.js";import{Popover as br}from"./components/popover/Popover.js";import{ProgressBar as Cr}from"./components/progress-bar/ProgressBar.js";import{RadioButton as hr}from"./components/radio-button/RadioButton.js";import{RadioButtonGroup as Dr}from"./components/radio-button/RadioButtonGroup.js";import{RadioButtonField as vr}from"./components/radio-button-field/RadioButtonField.js";import{RadioCard as wr}from"./components/radio-card/RadioCard.js";import{RadioCardGroup as Ar}from"./components/radio-card/RadioCardGroup.js";import{SearchField as Nr}from"./components/search-field/SearchField.js";import{SearchInput as yr}from"./components/search-input/SearchInput.js";import{SectionMessage as Wr}from"./components/section-message/SectionMessage.js";import{Select as Er}from"./components/select/Select.js";import{SelectField as Kr}from"./components/select-field/SelectField.js";import{SideBar as jr}from"./components/side-bar/SideBar.js";import{useSidebarState as zr}from"./components/side-bar/SideBarContext.js";import{Slider as Qr}from"./components/slider/Slider.js";import{SliderField as Xr}from"./components/slider-field/SliderField.js";import{Sortable as Zr}from"./components/sortable/index.js";import{Spacer as $r}from"./components/spacer/Spacer.js";import{Stepper as re}from"./components/stepper/Stepper.js";import{Switch as te}from"./components/switch/Switch.js";import{Table as me}from"./components/table/Table.js";import{Tabs as fe}from"./components/tabs/Tabs.js";import{Text as ae}from"./components/text/Text.js";import{Textarea as ne}from"./components/textarea/Textarea.js";import{TextareaField as ue}from"./components/textarea-field/TextareaField.js";import{Tile as ce}from"./components/tile/Tile.js";import{TileGroup as ge}from"./components/tile/TileGroup.js";import{TileInteractive as be}from"./components/tile-interactive/TileInteractive.js";import{TileToggleGroup as Ce}from"./components/tile-toggle-group/index.js";import{Toast as he}from"./components/toast/Toast.js";import{ToastProvider as De}from"./components/toast/ToastProvider.js";import{ToggleGroup as ve}from"./components/toggle-group/index.js";import{Tooltip as we}from"./components/tooltip/Tooltip.js";import{TopBar as Ae}from"./components/top-bar/TopBar.js";import{Tree as Ne}from"./components/tree/Tree.js";import{Video as ye}from"./components/video/Video.js";import{KeyboardShortcut as We}from"./components/keyboard-shortcut/index.js";import{SegmentedControl as Ee}from"./components/segmented-control/SegmentedControl.js";import{FileDrop as Ke}from"./components/file-drop/FileDrop.js";import{useFileDrop as je}from"./components/file-drop/useFileDrop.js";import{Theme as ze,createTheme as Je,styled as Qe}from"./styled.js";import{ColorScheme as Xe}from"./experiments/color-scheme/ColorScheme.js";import"./utilities/css-wrapper/CSSWrapper.js";import{NoOverflowWrapper as Ze}from"./utilities/no-overflow-wrapper/NoOverflowWrapper.js";import{default as $e}from"react-hot-toast";export{x as Accordion,i as ActionIcon,l as AlertDialog,d as AlertProvider,c as Avatar,g as Badge,b as BannerRegular,C as BannerSlim,h as Box,D as Button,k as Carousel,A as Checkbox,W as CheckboxField,N as CheckboxGroup,y as CheckboxTree,E as Chip,j as ChipDismissibleGroup,K as ChipGroup,z as ChipToggleGroup,Xe as ColorScheme,Q as Combobox,X as CreatePasswordField,$ as DataTable,ro as DateField,to as DateInput,mo as Dialog,fo as Dismissible,ao as DismissibleGroup,no as Divider,so as Drawer,To as DropdownMenu,So as EmptyState,Fo as FieldWrapper,Ke as FileDrop,Bo as FileInput,Go as Flex,ko as Form,Po as Grid,Mo as Heading,Ro as Icon,Lo as Image,Io as InlineFieldWrapper,Vo as InlineMessage,Ho as Input,Ko as InputBackground,qo as InputField,Oo as InputText,We as KeyboardShortcut,Jo as Label,Uo as Link,Zo as List,$o as Loader,rr as MarkdownContent,tr as NavigationMenu,mr as NavigationMenuVertical,Ze as NoOverflowWrapper,fr as NotificationBadge,ar as NumberInput,nr as NumberInputField,ur as Pagination,cr as PasswordField,gr as PasswordInput,br as Popover,Cr as ProgressBar,hr as RadioButton,vr as RadioButtonField,Dr as RadioButtonGroup,wr as RadioCard,Ar as RadioCardGroup,Nr as SearchField,yr as SearchInput,Wr as SectionMessage,Ee as SegmentedControl,Er as Select,Kr as SelectField,jr as SideBar,Qr as Slider,Xr as SliderField,Zr as Sortable,$r as Spacer,re as Stepper,G as StyledButton,Xo as StyledLink,te as Switch,me as Table,fe as Tabs,ae as Text,ne as Textarea,ue as TextareaField,ze as Theme,ce as Tile,ge as TileGroup,be as TileInteractive,Ce as TileToggleGroup,he as Toast,De as ToastProvider,ve as ToggleGroup,we as Tooltip,Ae as TopBar,Ne as Tree,ye as Video,Je as createTheme,Qe as styled,$e as toast,u as useAlert,w as useCarousel,Z as useDataTable,je as useFileDrop,zr as useSidebarState};
+import{Accordion as f}from"./components/accordion/Accordion.js";import{ActionIcon as a}from"./components/action-icon/ActionIcon.js";import{AlertDialog as n}from"./components/alert-dialog/AlertDialog.js";import{AlertProvider as u,useAlert as s}from"./components/alert-dialog/alert-context/AlertContext.js";import{Avatar as T}from"./components/avatar/Avatar.js";import{Badge as g}from"./components/badge/Badge.js";import{BannerRegular as F}from"./components/banner/banner-regular/BannerRegular.js";import{BannerSlim as I}from"./components/banner/banner-slim/BannerSlim.js";import{Box as B}from"./components/box/Box.js";import{Button as G,StyledButton as k}from"./components/button/Button.js";import{Carousel as w,useCarousel as P}from"./components/carousel/Carousel.js";import{Checkbox as M}from"./components/checkbox/Checkbox.js";import{CheckboxGroup as R}from"./components/checkbox-group/CheckboxGroup.js";import{CheckboxTree as L}from"./components/checkbox-tree/CheckboxTree.js";import{CheckboxField as V}from"./components/checkbox-field/CheckboxField.js";import{Chip as H}from"./components/chip/Chip.js";import{ChipGroup as O}from"./components/chip/ChipGroup.js";import{ChipDismissibleGroup as q}from"./components/chip-dismissible-group/index.js";import{ChipToggleGroup as J}from"./components/chip-toggle-group/index.js";import{Combobox as U}from"./components/combobox/Combobox.js";import{CreatePasswordField as Y}from"./components/create-password-field/CreatePasswordField.js";import{useDataTable as _}from"./components/data-table/DataTableContext.js";import{DataTable as oo}from"./components/data-table/DataTable.js";import{DateField as eo}from"./components/date-field/DateField.js";import{DateInput as po}from"./components/date-input/DateInput.js";import{Dialog as xo}from"./components/dialog/Dialog.js";import{Dismissible as io}from"./components/dismissible/index.js";import{DismissibleGroup as lo}from"./components/dismissible-group/index.js";import{Divider as uo}from"./components/divider/Divider.js";import{Drawer as co}from"./components/drawer/Drawer.js";import{DropdownMenu as So}from"./components/dropdown-menu/DropdownMenu.js";import{EmptyState as bo}from"./components/empty-state/EmptyState.js";import{FieldWrapper as Co}from"./components/field-wrapper/FieldWrapper.js";import{InlineFieldWrapper as ho}from"./components/field-wrapper/InlineFieldWrapper.js";import{FileInput as Do}from"./components/file-input/FileInput.js";import{Flex as ko}from"./components/flex/Flex.js";import{Form as wo}from"./components/form/Form.js";import"dlv";import"react-hook-form";import"./components/form/useFormCustomContext.js";import{Grid as Ao}from"./components/grid/Grid.js";import{Heading as No}from"./components/heading/Heading.js";import{Icon as yo}from"./components/icon/Icon.js";import{Image as Wo}from"./components/image/Image.js";import{InlineMessage as Eo}from"./components/inline-message/InlineMessage.js";import{Input as Ko,InputBackground as Oo,InputText as jo}from"./components/input/Input.js";import{InputField as zo}from"./components/input-field/InputField.js";import{Label as Qo}from"./components/label/Label.js";import{Link as Xo,StyledLink as Yo}from"./components/link/Link.js";import{List as _o}from"./components/list/List.js";import{Loader as or}from"./components/loader/Loader.js";import{MarkdownContent as er}from"./components/markdown-content/MarkdownContent.js";import{NavigationMenu as pr}from"./components/navigation/NavigationMenu.js";import{NavigationMenuVertical as xr}from"./components/navigation-menu-vertical/NavigationMenuVertical.js";import{NotificationBadge as ir}from"./components/notification-badge/NotificationBadge.js";import{NumberInput as lr}from"./components/number-input/NumberInput.js";import{NumberInputField as dr}from"./components/number-input-field/NumberInputField.js";import{Pagination as sr}from"./components/pagination/Pagination.js";import{PasswordField as Tr}from"./components/password-field/PasswordField.js";import{PasswordInput as gr}from"./components/password-input/PasswordInput.js";import{Popover as Fr}from"./components/popover/Popover.js";import{ProgressBar as Ir}from"./components/progress-bar/ProgressBar.js";import{RadioButton as Br}from"./components/radio-button/RadioButton.js";import{RadioButtonGroup as Gr}from"./components/radio-button/RadioButtonGroup.js";import{RadioButtonField as vr}from"./components/radio-button-field/RadioButtonField.js";import{RadioCard as Pr}from"./components/radio-card/RadioCard.js";import{RadioCardGroup as Mr}from"./components/radio-card/RadioCardGroup.js";import{SearchField as Rr}from"./components/search-field/SearchField.js";import{SearchInput as Lr}from"./components/search-input/SearchInput.js";import{SectionMessage as Vr}from"./components/section-message/SectionMessage.js";import{Select as Hr}from"./components/select/Select.js";import{SelectField as Or}from"./components/select-field/SelectField.js";import{SideBar as qr}from"./components/side-bar/SideBar.js";import{useSidebarState as Jr}from"./components/side-bar/SideBarContext.js";import{Slider as Ur}from"./components/slider/Slider.js";import{SliderField as Yr}from"./components/slider-field/SliderField.js";import*as o from"./components/skeleton-loader/index.js";import{Sortable as _r}from"./components/sortable/index.js";import{Spacer as oe}from"./components/spacer/Spacer.js";import{Stepper as ee}from"./components/stepper/Stepper.js";import{Switch as pe}from"./components/switch/Switch.js";import{Table as xe}from"./components/table/Table.js";import{Tabs as ie}from"./components/tabs/Tabs.js";import{Text as le}from"./components/text/Text.js";import{Textarea as de}from"./components/textarea/Textarea.js";import{TextareaField as se}from"./components/textarea-field/TextareaField.js";import{Tile as Te}from"./components/tile/Tile.js";import{TileGroup as ge}from"./components/tile/TileGroup.js";import{TileInteractive as Fe}from"./components/tile-interactive/TileInteractive.js";import{TileToggleGroup as Ie}from"./components/tile-toggle-group/index.js";import{Toast as Be}from"./components/toast/Toast.js";import{ToastProvider as Ge}from"./components/toast/ToastProvider.js";import{ToggleGroup as ve}from"./components/toggle-group/index.js";import{Tooltip as Pe}from"./components/tooltip/Tooltip.js";import{TopBar as Me}from"./components/top-bar/TopBar.js";import{Tree as Re}from"./components/tree/Tree.js";import{Video as Le}from"./components/video/Video.js";import{KeyboardShortcut as Ve}from"./components/keyboard-shortcut/index.js";import{SegmentedControl as He}from"./components/segmented-control/SegmentedControl.js";import{FileDrop as Oe}from"./components/file-drop/FileDrop.js";import{useFileDrop as qe}from"./components/file-drop/useFileDrop.js";import{Theme as Je,createTheme as Qe,styled as Ue}from"./styled.js";import{ColorScheme as Ye}from"./experiments/color-scheme/ColorScheme.js";import"./utilities/css-wrapper/CSSWrapper.js";import{NoOverflowWrapper as _e}from"./utilities/no-overflow-wrapper/NoOverflowWrapper.js";import{default as ot}from"react-hot-toast";export{f as Accordion,a as ActionIcon,n as AlertDialog,u as AlertProvider,T as Avatar,g as Badge,F as BannerRegular,I as BannerSlim,B as Box,G as Button,w as Carousel,M as Checkbox,V as CheckboxField,R as CheckboxGroup,L as CheckboxTree,H as Chip,q as ChipDismissibleGroup,O as ChipGroup,J as ChipToggleGroup,Ye as ColorScheme,U as Combobox,Y as CreatePasswordField,oo as DataTable,eo as DateField,po as DateInput,xo as Dialog,io as Dismissible,lo as DismissibleGroup,uo as Divider,co as Drawer,So as DropdownMenu,bo as EmptyState,Co as FieldWrapper,Oe as FileDrop,Do as FileInput,ko as Flex,wo as Form,Ao as Grid,No as Heading,yo as Icon,Wo as Image,ho as InlineFieldWrapper,Eo as InlineMessage,Ko as Input,Oo as InputBackground,zo as InputField,jo as InputText,Ve as KeyboardShortcut,Qo as Label,Xo as Link,_o as List,or as Loader,er as MarkdownContent,pr as NavigationMenu,xr as NavigationMenuVertical,_e as NoOverflowWrapper,ir as NotificationBadge,lr as NumberInput,dr as NumberInputField,sr as Pagination,Tr as PasswordField,gr as PasswordInput,Fr as Popover,Ir as ProgressBar,Br as RadioButton,vr as RadioButtonField,Gr as RadioButtonGroup,Pr as RadioCard,Mr as RadioCardGroup,Rr as SearchField,Lr as SearchInput,Vr as SectionMessage,He as SegmentedControl,Hr as Select,Or as SelectField,qr as SideBar,o as Skeleton,Ur as Slider,Yr as SliderField,_r as Sortable,oe as Spacer,ee as Stepper,k as StyledButton,Yo as StyledLink,pe as Switch,xe as Table,ie as Tabs,le as Text,de as Textarea,se as TextareaField,Je as Theme,Te as Tile,ge as TileGroup,Fe as TileInteractive,Ie as TileToggleGroup,Be as Toast,Ge as ToastProvider,ve as ToggleGroup,Pe as Tooltip,Me as TopBar,Re as Tree,Le as Video,Qe as createTheme,Ue as styled,ot as toast,s as useAlert,P as useCarousel,_ as useDataTable,qe as useFileDrop,Jr as useSidebarState};
 //# sourceMappingURL=index.js.map

package/dist/styled.d.ts

@@ -1,7 +1,7 @@
 import React, { ElementType } from 'react';
 type Breakpoint = '@initial' | '@sm' | '@md' | '@lg' | '@xl';
 export declare const Theme: ({ children, theme }: React.PropsWithChildren<{
-    theme: Record<string, string>;
+    theme?: Record<string, string>;
 }>) => React.JSX.Element;
 export declare const createTheme: (config: Record<string, Record<string, string>>) => {
     [k: string]: string;
@@ -13,10 +13,12 @@ type NumberKeys<V> = Extract<Keys<V>, number>;
 type BooleanKeys<V> = Extract<StringKeys<V>, 'true' | 'false'>;
 type HasBoolLikeKeys<V> = BooleanKeys<V> extends never ? Extract<StringKeys<V>, 'true' | 'false'> extends never ? false : true : true;
 type VariantValueType<V> = HasBoolLikeKeys<V> extends true ? boolean : [NumberKeys<V>] extends [never] ? StringKeys<V> : NumberKeys<V> | `${NumberKeys<V>}`;
-type VariantConfig = Record<string, Record<string | number, string[]>>;
-type VariantProps<V extends VariantConfig | undefined> = V extends VariantConfig ? {
+type VariantConfig = Record<string, Record<string | number, string | string[]>>;
+type VariantProps<V extends VariantConfig | undefined, R extends boolean = false> = V extends VariantConfig ? R extends true ? {
     [K in keyof V]?: ResponsiveVariant<VariantValueType<V[K]>>;
-} : {};
+} : {
+    [K in keyof V]?: VariantValueType<V[K]>;
+} : unknown;
 type StyledConfig<V extends VariantConfig | undefined = undefined> = {
     base?: string | string[];
     variants?: V;
@@ -29,7 +31,12 @@ type StyledConfig<V extends VariantConfig | undefined = undefined> = {
         [K in keyof V]?: VariantValueType<V[K]>;
     } : Record<string, never>;
 };
-export declare const styled: <TElement extends ElementType, V extends VariantConfig | undefined = undefined>(el: TElement, styles: StyledConfig<V>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<React.ComponentPropsWithRef<TElement> & VariantProps<V> & {
+export declare function styled<TElement extends ElementType, V extends VariantConfig>(el: TElement, styles: StyledConfig<V>, options: {
+    enabledResponsiveVariants: true;
+}): React.ForwardRefExoticComponent<Omit<React.ComponentPropsWithRef<TElement>, keyof V> & VariantProps<V, true> & {
     as?: ElementType;
-}> & React.RefAttributes<React.ElementRef<TElement>>>;
+}>;
+export declare function styled<TElement extends ElementType, V extends VariantConfig | undefined = undefined>(el: TElement, styles: StyledConfig<V>): React.ForwardRefExoticComponent<Omit<React.ComponentPropsWithRef<TElement>, V extends VariantConfig ? keyof V : never> & VariantProps<V, false> & {
+    as?: ElementType;
+}>;
 export {};

package/dist/styled.js

@@ -1,2 +1,2 @@
-import y from"clsx";import c from"react";import{tv as N}from"tailwind-variants";const O=({children:e,theme:s})=>c.createElement("div",{className:"contents",style:s},e),h=e=>Object.fromEntries(Object.values(e).flatMap(s=>Object.entries(s).map(([n,p])=>["--".concat(n),p]))),v=(e,s)=>{const n=Object.keys(s.variants||{}),p=N(s);return c.forwardRef((a,o)=>{const E=n.map(t=>{const r=a[t],i=s.variants[t];return typeof r=="object"&&r?Object.entries(r).flatMap(([m,f])=>{const b=i&&i[f];return b?b.flatMap(j=>m==="@initial"?j:"".concat(m.replace("@",""),":").concat(j)):[]}):[]}).flat(),d=p(a),l=Object.fromEntries(Object.entries(a).filter(([t])=>!n.includes(t)&&t!=="as")),u=y(d,E).trim();if(typeof e=="string"||typeof e=="function"||e&&typeof e=="object"){const t=e;if(typeof e=="string")return c.createElement(a.as||t,{...l,ref:o,className:u});const r={...l,as:a.as,className:y(a.className,u).trim(),ref:o};return c.createElement(t,r)}if(c.isValidElement(e)){const t=e,r=t.props.className,i=l.className,m=y(r,i,u).trim(),f={...l,as:a.as||t.props.as,className:m};return o&&(f.ref=o),c.cloneElement(t,f)}throw console.log({el:e,styles:s}),Error("Something is wrong")})};export{O as Theme,h as createTheme,v as styled};
+import E from"clsx";import _ from"react";import{twMerge as l}from"tailwind-merge";import{defaultConfig as A,tv as C}from"tailwind-variants";A.twMerge=!1;const $=({children:a,theme:f})=>_.createElement("div",{className:"contents",style:f},a),R=a=>Object.fromEntries(Object.values(a).flatMap(f=>Object.entries(f).map(([v,b])=>[`--${v}`,b])));function T(a,f,v){const b=Object.keys(f.variants||{}),w=(v==null?void 0:v.enabledResponsiveVariants)===!0,O=C(f),y=_.forwardRef((p,j)=>{const g=w?b.map(e=>{const n=p[e],i=f.variants[e];return typeof n=="object"&&n&&!Array.isArray(n)?Object.entries(n).flatMap(([r,m])=>{const c=String(m),o=i&&i[c];return o&&Array.isArray(o)?o.flatMap(d=>r==="@initial"?d:`${r.replace("@","")}:${d}`):[]}):[]}).flat():[],h=b.length>0?Object.fromEntries(Object.entries(p).filter(([e])=>b.includes(e)).map(([e,n])=>{var i;const r=(i=f.variants)==null?void 0:i[e];return r&&"true"in r&&"false"in r?n===!0||n===!1?[e,n]:[e,null]:[e,n]})):{},S=O(h),N=Object.fromEntries(Object.entries(p).filter(([e])=>!b.includes(e)&&e!=="as"&&e!=="__wrapperClasses")),s=E(S,g).trim(),t=p.className,u=p.__wrapperClasses;if(typeof a=="string"||typeof a=="function"||a&&typeof a=="object"){const e=a;if(typeof a=="string"){const{className:m,...c}=N,o=u&&t?l(u,t,s):u?l(u,s,t):t?t.split(" ").some(d=>/^data-\[state=[^\]]+\]:/.test(d))?l(t,s):l(s,t):l(s);return _.createElement(p.as||e,{...c,ref:j,className:o})}const{className:n,...i}=N,r=p.as;if(u){const m=t?l(u,t,s):l(u,s),c=(typeof e=="function"||typeof e=="object")&&e!==null&&e.__isStyledComponent===!0,o={...i,...r?{as:r}:{},ref:j};if(c){const d=l(u,s);o.__wrapperClasses=d,o.className=t||void 0}else o.className=m;return _.createElement(e,o)}else{const m=(typeof e=="function"||typeof e=="object")&&e!==null&&e.__isStyledComponent===!0,c={...i,...r?{as:r}:{},ref:j};if(m){const o=t?t.split(" ").some(M=>/^data-\[state=[^\]]+\]:/.test(M)):!1,d=t?o?l(t,s):l(s,t):s;c.__wrapperClasses=s,c.className=d||void 0}else c.className=l(s,t);return _.createElement(e,c)}}if(_.isValidElement(a)){const e=a,n=e.props.className,i=N.className,r=E(n,i,s).trim(),m={...N,as:p.as||e.props.as,className:l(r)};return j&&(m.ref=j),_.cloneElement(e,m)}throw Error("Something is wrong")});return y.__isStyledComponent=!0,y}export{$ as Theme,R as createTheme,T 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 { 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\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[]>>\n\n// Props derived from a `variants` config\ntype VariantProps<V extends VariantConfig | undefined> = V extends VariantConfig\n  ? {\n      [K in keyof V]?: ResponsiveVariant<VariantValueType<V[K]>>\n    }\n  : {}\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\nexport const styled = <\n  TElement extends ElementType,\n  V extends VariantConfig | undefined = undefined\n>(\n  el: TElement,\n  styles: StyledConfig<V>\n) => {\n  const variantKeys = Object.keys(styles.variants || {})\n  const tvFn = tv(styles as any)\n\n  type VariantPropsType = VariantProps<V>\n  type BaseProps = React.ComponentPropsWithRef<TElement>\n  type StyledProps = BaseProps & VariantPropsType & { as?: ElementType }\n\n  const Comp = React.forwardRef<React.ElementRef<TElement>, StyledProps>(\n    (props, ref) => {\n      const additionalStyles = variantKeys\n        .map((variantKey) => {\n          const responsiveVariantConfig:\n            | Record<Breakpoint, string>\n            | undefined = props[variantKey]\n          const variantStyles: Record<string, string[]> =\n            styles.variants![variantKey]\n\n          if (\n            typeof responsiveVariantConfig === 'object' &&\n            responsiveVariantConfig\n          ) {\n            return Object.entries(responsiveVariantConfig).flatMap(\n              ([key, val]: [Breakpoint, string]) => {\n                const styleArr: string[] = variantStyles && variantStyles[val]\n\n                if (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      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\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          return React.createElement(props.as || elementType, {\n            ...filteredProps,\n            ref,\n            className: mergedClassName\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: clsx((props as any).className, mergedClassName).trim(),\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: 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","variantKeys","tvFn","tv","props","ref","additionalStyles","variantKey","responsiveVariantConfig","variantStyles","key","val","styleArr","cls","filteredProps","mergedClassName","clsx","elementType","propsForComponent","element","existingClass","incomingClass","finalClassName","cloneProps"],"mappings":"sFAMaA,EAAQ,CAAC,CACpB,SAAAC,EACA,MAAAC,CACF,IACEC,EAAA,cAAC,MAAA,CAAI,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,CAASC,EAAAA,CAAK,CAAC,CACtE,CACF,EAkEWC,EAAS,CAIpBC,EACAC,IACG,CACH,MAAMC,EAAc,OAAO,KAAKD,EAAO,UAAY,CAAE,CAAA,EAC/CE,EAAOC,EAAGH,CAAa,EA4G7B,OAtGaR,EAAM,WACjB,CAACY,EAAOC,IAAQ,CACd,MAAMC,EAAmBL,EACtB,IAAKM,GAAe,CACnB,MAAMC,EAEUJ,EAAMG,CAAU,EAC1BE,EACJT,EAAO,SAAUO,CAAU,EAE7B,OACE,OAAOC,GAA4B,UACnCA,EAEO,OAAO,QAAQA,CAAuB,EAAE,QAC7C,CAAC,CAACE,EAAKC,CAAG,IAA4B,CACpC,MAAMC,EAAqBH,GAAiBA,EAAcE,CAAG,EAE7D,OAAIC,EACKA,EAAS,QAASC,GACnBH,IAAQ,WAAmBG,EACxB,GAAG,OAAAH,EAAI,QAAQ,IAAK,EAAE,EAAC,GAAA,EAAI,OAAAG,CAAAA,CACnC,EAEI,CAAA,CACT,CACF,EAGK,CAAA,CACT,CAAC,EACA,OAEGA,EAAMX,EAAKE,CAAK,EAEhBU,EAAgB,OAAO,YAC3B,OAAO,QAAQV,CAAK,EAAE,OACpB,CAAC,CAACM,CAAG,IAAM,CAACT,EAAY,SAASS,CAAG,GAAKA,IAAQ,IACnD,CACF,EAEMK,EAAkBC,EAAKH,EAAKP,CAAgB,EAAE,KAAK,EAEzD,GACE,OAAOP,GAAO,UACd,OAAOA,GAAO,YACbA,GAAM,OAAOA,GAAO,SACrB,CACA,MAAMkB,EAAclB,EAGpB,GAAI,OAAOA,GAAO,SAChB,OAAOP,EAAM,cAAcY,EAAM,IAAMa,EAAa,CAClD,GAAGH,EACH,IAAAT,EACA,UAAWU,CACb,CAAC,EAKH,MAAMG,EAAoB,CACxB,GAAGJ,EACH,GAAIV,EAAM,GACV,UAAWY,EAAMZ,EAAc,UAAWW,CAAe,EAAE,KAAK,EAChE,IAAAV,CACF,EAEA,OAAOb,EAAM,cAAcyB,EAAaC,CAAiB,CAC3D,CAEA,GAAI1B,EAAM,eAAeO,CAAE,EAAG,CAC5B,MAAMoB,EAAUpB,EAEVqB,EAAiBD,EAAQ,MAAc,UACvCE,EAAiBP,EAAsB,UACvCQ,EAAiBN,EACrBI,EACAC,EACAN,CACF,EAAE,KAAK,EAEDQ,EAAkB,CAEtB,GAAGT,EACH,GAAIV,EAAM,IAAMe,EAAQ,MAAM,GAC9B,UAAWG,CACb,EAGA,OAAIjB,IACFkB,EAAW,IAAMlB,GAGZb,EAAM,aAAa2B,EAASI,CAAU,CAC/C,CAEA,MAAQ,QAAA,IAAI,CAAE,GAAAxB,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 { 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      // For boolean variants, only include them if the value is explicitly true or false (not null/undefined)\n      // Note: tailwind-variants treats null as \"no variant\" but undefined/missing as \"apply false variant\"\n      // So we need to convert undefined to null for boolean variants to prevent default behavior\n      const propsForTv =\n        variantKeys.length > 0\n          ? Object.fromEntries(\n              Object.entries(props)\n                .filter(([key]) => variantKeys.includes(key))\n                .map(([key, value]) => {\n                  // Check if this is a boolean variant (has both 'true' and 'false' keys)\n                  const variantConfig = styles.variants?.[key]\n                  if (\n                    variantConfig &&\n                    'true' in variantConfig &&\n                    'false' in variantConfig\n                  ) {\n                    // For boolean variants, only include if value is explicitly true or false\n                    // Convert undefined to null to prevent tailwind-variants from applying false variant\n                    if (value === true || value === false) {\n                      return [key, value]\n                    }\n                    // For null/undefined, pass null to prevent tailwind-variants from applying defaults\n                    // This ensures that when a boolean prop is explicitly null/undefined, no variant is applied\n                    return [key, null]\n                  }\n                  // For non-boolean variants, pass value as-is (including null/undefined)\n                  return [key, value]\n                })\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          // IMPORTANT: When propsClassName exists (could be from asChild), we need to ensure child's classes win\n          // over parent classes, but user's className should still have highest priority.\n          // Strategy: Only apply special merge when wrapperClasses exist (nested styled component scenario).\n          // For regular cases (no wrapperClasses), use standard merge order so user's className has highest priority.\n          const finalClassName =\n            wrapperClasses && propsClassName\n              ? twMerge(wrapperClasses, propsClassName, mergedClassName) // This component's classes win by being merged last\n              : wrapperClasses\n                ? twMerge(wrapperClasses, mergedClassName, propsClassName) // Standard merge when no propsClassName\n                : propsClassName\n                  ? (() => {\n                      // When propsClassName comes from asChild (Radix), we want this component's classes to win\n                      // When propsClassName is a regular className prop, the user's className should win (highest priority)\n                      // We can detect asChild scenario by checking if propsClassName contains classes that look like they came from a parent component\n                      // (e.g., data attribute variants like data-[state=closed]:rounded-sm)\n                      // If it does, treat it as asChild and let component classes win. Otherwise, let user's className win.\n                      const hasDataAttributeVariants = propsClassName\n                        .split(' ')\n                        .some((cls) => /^data-\\[state=[^\\]]+\\]:/.test(cls))\n\n                      if (hasDataAttributeVariants) {\n                        // This is likely from asChild - component's classes should win\n                        return twMerge(propsClassName, mergedClassName)\n                      } else {\n                        // Regular className prop - user's className should win (highest priority)\n                        return twMerge(mergedClassName, propsClassName)\n                      }\n                    })()\n                  : twMerge(mergedClassName) // Always merge mergedClassName to resolve conflicts within it (e.g., bg-[unset] vs bg-(--base))\n\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          // IMPORTANT: When propsClassName exists (could be from asChild), we need to ensure this component's classes win.\n          // Strategy: Merge wrapperClasses with propsClassName first, then merge with mergedClassName last.\n          // This ensures: wrapperClasses < propsClassName < mergedClassName (this component's classes win)\n          // This is critical when propsClassName contains parent classes from asChild merge.\n          const finalClassName = propsClassName\n            ? twMerge(wrapperClasses, propsClassName, mergedClassName) // This component's classes win by being merged last\n            : twMerge(wrapperClasses, mergedClassName)\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: any = {\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            ref\n          }\n\n          if (isStyledComponent) {\n            // Wrapped component is a styled component - pass __wrapperClasses so variant classes win\n            // IMPORTANT: When propsClassName exists (could be from asChild), it may contain both parent and child classes.\n            // We should NOT merge propsClassName with mergedClassName here, because that would remove child classes.\n            // Instead, pass propsClassName as-is (or merge only wrapperClasses with mergedClassName) so the child\n            // can merge its own classes last. The child will merge: twMerge(__wrapperClasses, propsClassName, child's mergedClassName).\n            // This ensures child's classes win by being merged last.\n            // Merge wrapperClasses with mergedClassName to create the wrapper classes for the child\n            const combinedWrapperClasses = twMerge(\n              wrapperClasses,\n              mergedClassName\n            )\n            propsForComponent.__wrapperClasses = combinedWrapperClasses\n            propsForComponent.className = propsClassName || undefined\n          } else {\n            // Wrapped component is not a styled component - merge wrapper classes into className\n            // and don't pass __wrapperClasses (it would end up in DOM)\n            propsForComponent.className = finalClassName\n          }\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          const propsForComponent: any = {\n            ...restFilteredProps, // Filters out __wrapperClasses, variant props, 'as'\n            ...(asProp ? { as: asProp } : {}),\n            ref\n          }\n\n          if (isStyledComponent) {\n            // Styled component - pass wrapper classes via __wrapperClasses so variant classes can take precedence\n            // IMPORTANT: When propsClassName exists, we need to distinguish between:\n            // 1. User's className (should win - highest priority)\n            // 2. className from asChild/parent component (component's classes should win)\n            // We detect asChild by checking for data attribute variants (e.g., data-[state=closed]:rounded-sm)\n            const hasDataAttributeVariants = propsClassName\n              ? propsClassName\n                  .split(' ')\n                  .some((cls) => /^data-\\[state=[^\\]]+\\]:/.test(cls))\n              : false\n\n            const mergedPropsAndComponent = propsClassName\n              ? hasDataAttributeVariants\n                ? // This is likely from asChild - component's classes should win\n                  twMerge(propsClassName, mergedClassName)\n                : // Regular user className - user's className should win (highest priority)\n                  twMerge(mergedClassName, propsClassName)\n              : mergedClassName\n            propsForComponent.__wrapperClasses = mergedClassName\n            propsForComponent.className = mergedPropsAndComponent || undefined\n          } else {\n            // Regular function component - merge wrapper classes into className\n            // Standard merge order: component classes < user's className (highest priority)\n            propsForComponent.className = twMerge(\n              mergedClassName,\n              propsClassName\n            )\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      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","_a","variantConfig","filteredProps","mergedClassName","clsx","propsClassName","wrapperClasses","elementType","_","restFilteredProps","finalClassName","twMerge","asProp","isStyledComponent","propsForComponent","combinedWrapperClasses","hasDataAttributeVariants","mergedPropsAndComponent","element","existingClass","incomingClass","cloneProps"],"mappings":"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"}

package/dist/utilities/no-overflow-wrapper/NoOverflowWrapper.d.ts

@@ -1,5 +1,5 @@
 export declare const NoOverflowWrapper: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-} & {
+}, never> & {
     as?: import("react").ElementType;
-}, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+}>;

package/package.json

@@ -4,20 +4,31 @@
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",
   "module": "dist/index.js",
-  "version": "6.0.0-beta.9",
+  "version": "6.0.3",
   "description": "",
   "files": [
     "dist",
-    "src/index.css"
+    "src/index.css",
+    "src/responsive-variant-classes.css",
+    "scripts/vite-plugin-tailwind-responsive-variant-classes.mjs",
+    "scripts/generate-responsive-variant-classes.mjs"
   ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
+      "style": "./src/index.css",
       "require": "./dist/index.cjs.js",
       "default": "./dist/index.js"
     },
-    "./index.css": "./src/index.css"
+    "./index.css": "./src/index.css",
+    "./vite": "./scripts/vite-plugin-tailwind-responsive-variant-classes.mjs",
+    "./docgen": {
+      "types": "./dist/docgen.d.ts",
+      "import": "./dist/docgen.json",
+      "require": "./dist/docgen.json",
+      "default": "./dist/docgen.json"
+    }
   },
   "sideEffects": false,
   "scripts": {
@@ -25,9 +36,10 @@
     "build:lib": "NODE_ENV=production rollup -c",
     "build:types": "NODE_ENV=production tsc --project tsconfig.build.json --emitDeclarationOnly && tsc-alias",
     "build:proptypes": "node ./scripts/generate-component-props.mjs",
+    "build:responsive-variant-classes": "node ./scripts/generate-responsive-variant-classes.mjs",
     "start:sandbox": "vite -c ./sandbox/vite.config.js",
     "add-component": "node ./scripts/add-component.mjs",
-    "prepublishOnly": "run-s clean build:lib build:types build:proptypes",
+    "prepublishOnly": "run-s clean build:responsive-variant-classes build:lib build:types build:proptypes",
     "clean": "del ./dist/",
     "format": "prettier 'src/**/*.{js,ts,tsx}' --write",
     "lint": "eslint 'src/**/*.{js,ts,tsx}' --fix",
@@ -52,24 +64,24 @@
   "homepage": "https://github.com/Atom-Learning/components#readme",
   "size-limit": [
     {
-      "limit": "10kb",
+      "limit": "15kb",
       "path": "dist/index.js",
       "import": "{ Box }"
     },
     {
-      "limit": "16kb",
+      "limit": "20kb",
       "path": "dist/index.js",
       "import": "{ Button }"
     },
     {
-      "limit": "75kb",
+      "limit": "50kb",
       "path": "dist/index.js",
       "import": "{  useAlert, AlertProvider }"
     }
   ],
   "devDependencies": {
     "@atom-learning/icons": "1.20.0",
-    "@atom-learning/theme": "6.0.0-beta.1",
+    "@atom-learning/theme": "^6.0.0",
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
     "@ianvs/prettier-plugin-sort-imports": "^4.7.0",
@@ -78,6 +90,7 @@
     "@rollup/plugin-commonjs": "^17.1.0",
     "@rollup/plugin-node-resolve": "^11.2.0",
     "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/exec": "^7.0.0",
     "@semantic-release/release-notes-generator": "^14.0.1",
     "@size-limit/preset-small-lib": "^7.0.5",
     "@testing-library/dom": "^7.28.1",
@@ -111,7 +124,6 @@
     "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-simple-import-sort": "^7.0.0",
-    "glob": "^7.1.6",
     "husky": "^4.3.8",
     "jest": "^27.0.6",
     "jest-axe": "^4.1.0",
@@ -129,9 +141,8 @@
     "rollup-plugin-summary": "^1.3.0",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-visualizer": "^4.2.2",
-    "semantic-release": "^24.1.0",
+    "semantic-release": "^25.0.0",
     "semantic-release-slack-bot": "^4.0.2",
-    "semantic-release-yarn": "^3.0.2",
     "size-limit": "^7.0.5",
     "tsc-alias": "^1.8.10",
     "typescript": "^5.5.4",
@@ -140,7 +151,7 @@
   },
   "peerDependencies": {
     "@atom-learning/icons": "^1.0.0",
-    "@atom-learning/theme": "^6",
+    "@atom-learning/theme": "^6.0.0",
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
@@ -168,16 +179,18 @@
     "@radix-ui/react-tooltip": "^1.0.7",
     "@radix-ui/react-visually-hidden": "^1.0.3",
     "@reach/combobox": "^0.16.1",
-    "@tailwindcss/vite": "^4.1.17",
+    "@tailwindcss/vite": "^4.1.18",
     "@tanstack/react-table": "^8.5.11",
     "clsx": "^2.1.1",
     "dayjs": "^1.10.7",
     "dayzed": "^3.2.2",
     "dlv": "^1.1.3",
+    "glob": "^7.1.6",
     "invariant": "^2.2.4",
     "mdast-util-directive": "1.0.1",
     "mdast-util-from-markdown": "0.8.5",
     "micromark-extension-directive": "1.4.0",
+    "minimatch": "^10.0.0",
     "prop-types": "^15.8.1",
     "pure-react-carousel": "^1.27.6",
     "react-aria": "^3.29.1",
@@ -187,8 +200,9 @@
     "react-player": "^2.9.0",
     "tailwind-merge": "^3.4.0",
     "tailwind-variants": "^3.2.2",
-    "tailwindcss": "^4.1.17",
+    "tailwindcss": "^4.1.18",
     "throttle-debounce": "^3.0.1",
+    "ts-morph": "^25.0.1",
     "uid": "^2.0.0",
     "use-deep-compare-effect": "^1.8.1"
   },
@@ -222,7 +236,13 @@
       "@semantic-release/commit-analyzer",
       "@semantic-release/release-notes-generator",
       "@semantic-release/changelog",
-      "semantic-release-yarn",
+      [
+        "@semantic-release/exec",
+        {
+          "prepareCmd": "npm pkg set version=${nextRelease.version}",
+          "publishCmd": "npm publish --access public"
+        }
+      ],
       [
         "semantic-release-slack-bot",
         {