@atom-learning/components 6.4.2 → 6.5.1

package/dist/index.js

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

package/dist/styled.js

@@ -1,2 +1,80 @@
-import C from"clsx";import N from"react";import{extendTailwindMerge as M}from"tailwind-merge";import{defaultConfig as x,tv as A}from"tailwind-variants";x.twMerge=!1;const v=s=>/^\[[\d.]+\]$/.test(s)||!Number.isNaN(Number(s)),o=M({extend:{classGroups:{capsize:[{capsize:["none",v]}],"capsize-before":[{"capsize-before":[v]}],"capsize-after":[{"capsize-after":[v]}]},conflictingClassGroups:{capsize:["capsize-before","capsize-after"],"capsize-before":["capsize"],"capsize-after":["capsize"]}}}),$=({children:s,theme:f})=>N.createElement("div",{className:"contents",style:f},s),R=s=>Object.fromEntries(Object.values(s).flatMap(f=>Object.entries(f).map(([_,b])=>[`--${_}`,b])));function T(s,f,_){const b=Object.keys(f.variants||{}),E=(_==null?void 0:_.enabledResponsiveVariants)===!0,g=A(f),z=N.forwardRef((m,d)=>{const w=E?b.map(e=>{const i=m[e],c=f.variants[e];return typeof i=="object"&&i&&!Array.isArray(i)?Object.entries(i).flatMap(([r,p])=>{const l=String(p),n=c&&c[l];return n&&Array.isArray(n)?n.flatMap(y=>r==="@initial"?y:`${r.replace("@","")}:${y}`):[]}):[]}).flat():[],O=b.length>0?Object.fromEntries(Object.entries(m).filter(([e])=>b.includes(e)).map(([e,i])=>{var c;const r=(c=f.variants)==null?void 0:c[e];return r&&"true"in r&&"false"in r?i===!0||i===!1?[e,i]:[e,null]:[e,i]})):{},h=g(O),j=Object.fromEntries(Object.entries(m).filter(([e])=>!b.includes(e)&&e!=="as"&&e!=="__wrapperClasses")),a=C(h,w).trim(),t=m.className,u=m.__wrapperClasses;if(typeof s=="string"||typeof s=="function"||s&&typeof s=="object"){const e=s;if(typeof s=="string"){const{className:p,...l}=j,n=u&&t?o(u,t,a):u?o(u,a,t):t?t.split(" ").some(y=>/^data-\[state=[^\]]+\]:/.test(y))?o(t,a):o(a,t):o(a);return N.createElement(m.as||e,{...l,ref:d,className:n})}const{className:i,...c}=j,r=m.as;if(u){const p=t?o(u,t,a):o(u,a),l=(typeof e=="function"||typeof e=="object")&&e!==null&&e.__isStyledComponent===!0,n={...c,...r?{as:r}:{},ref:d};if(l){const y=o(u,a);n.__wrapperClasses=y,n.className=t||void 0}else n.className=p;return N.createElement(e,n)}else{const p=(typeof e=="function"||typeof e=="object")&&e!==null&&e.__isStyledComponent===!0,l={...c,...r?{as:r}:{},ref:d};if(p){const n=t?t.split(" ").some(S=>/^data-\[state=[^\]]+\]:/.test(S)):!1,y=t?n?o(t,a):o(a,t):a;l.__wrapperClasses=a,l.className=y||void 0}else l.className=o(a,t);return N.createElement(e,l)}}if(N.isValidElement(s)){const e=s,i=e.props.className,c=j.className,r=C(i,c,a).trim(),p={...j,as:m.as||e.props.as,className:o(r)};return d&&(p.ref=d),N.cloneElement(e,p)}throw Error("Something is wrong")});return z.__isStyledComponent=!0,z}export{$ as Theme,R as createTheme,T as styled};
-//# sourceMappingURL=styled.js.map
+import e from "clsx";
+import t from "react";
+import { extendTailwindMerge as n } from "tailwind-merge";
+import { defaultConfig as r, tv as i } from "tailwind-variants";
+//#region src/styled.tsx
+r.twMerge = !1;
+var a = (e) => /^\[[\d.]+\]$/.test(e) || !Number.isNaN(Number(e)), o = n({ extend: {
+	classGroups: {
+		capsize: [{ capsize: ["none", a] }],
+		"capsize-before": [{ "capsize-before": [a] }],
+		"capsize-after": [{ "capsize-after": [a] }]
+	},
+	conflictingClassGroups: {
+		capsize: ["capsize-before", "capsize-after"],
+		"capsize-before": ["capsize"],
+		"capsize-after": ["capsize"]
+	}
+} }), s = ({ children: e, theme: n }) => /* @__PURE__ */ t.createElement("div", {
+	className: "contents",
+	style: n
+}, e), c = (e) => Object.fromEntries(Object.values(e).flatMap((e) => Object.entries(e).map(([e, t]) => [`--${e}`, t])));
+function l(n, r, a) {
+	let s = Object.keys(r.variants || {}), c = a?.enabledResponsiveVariants === !0, l = i(r), u = t.forwardRef((i, a) => {
+		let u = c ? s.map((e) => {
+			let t = i[e], n = r.variants[e];
+			return typeof t == "object" && t && !Array.isArray(t) ? Object.entries(t).flatMap(([e, t]) => {
+				let r = String(t), i = n && n[r];
+				return i && Array.isArray(i) ? i.flatMap((t) => e === "@initial" ? t : `${e.replace("@", "")}:${t}`) : [];
+			}) : [];
+		}).flat() : [], d = l(s.length > 0 ? Object.fromEntries(Object.entries(i).filter(([e]) => s.includes(e)).map(([e, t]) => {
+			let n = r.variants?.[e];
+			return n && "true" in n && "false" in n ? t === !0 || t === !1 ? [e, t] : [e, null] : [e, t];
+		})) : {}), f = Object.fromEntries(Object.entries(i).filter(([e]) => !s.includes(e) && e !== "as" && e !== "__wrapperClasses")), p = e(d, u).trim(), m = i.className, h = i.__wrapperClasses;
+		if (typeof n == "string" || typeof n == "function" || n && typeof n == "object") {
+			let e = n;
+			if (typeof n == "string") {
+				let { className: n, ...r } = f, s = h && m ? o(h, m, p) : h ? o(h, p, m) : m ? m.split(" ").some((e) => /^data-\[state=[^\]]+\]:/.test(e)) ? o(m, p) : o(p, m) : o(p);
+				return t.createElement(i.as || e, {
+					...r,
+					ref: a,
+					className: s
+				});
+			}
+			let { className: r, ...s } = f, c = i.as;
+			if (h) {
+				let n = m ? o(h, m, p) : o(h, p), r = (typeof e == "function" || typeof e == "object") && e !== null && e.__isStyledComponent === !0, i = {
+					...s,
+					...c ? { as: c } : {},
+					ref: a
+				};
+				return r ? (i.__wrapperClasses = o(h, p), i.className = m || void 0) : i.className = n, t.createElement(e, i);
+			} else {
+				let n = (typeof e == "function" || typeof e == "object") && e !== null && e.__isStyledComponent === !0, r = {
+					...s,
+					...c ? { as: c } : {},
+					ref: a
+				};
+				if (n) {
+					let e = m ? m.split(" ").some((e) => /^data-\[state=[^\]]+\]:/.test(e)) : !1, t = m ? e ? o(m, p) : o(p, m) : p;
+					r.__wrapperClasses = p, r.className = t || void 0;
+				} else r.className = o(p, m);
+				return t.createElement(e, r);
+			}
+		}
+		if (t.isValidElement(n)) {
+			let r = n, s = r.props.className, c = f.className, l = e(s, c, p).trim(), u = {
+				...f,
+				as: i.as || r.props.as,
+				className: o(l)
+			};
+			return a && (u.ref = a), t.cloneElement(r, u);
+		}
+		throw Error("Something is wrong");
+	});
+	return u.__isStyledComponent = !0, u;
+}
+//#endregion
+export { s as Theme, c as createTheme, l 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 { extendTailwindMerge } from 'tailwind-merge'\nimport { defaultConfig, tv } from 'tailwind-variants'\n\ndefaultConfig.twMerge = false\n\nconst isArbitraryNumber = (value: string) =>\n  /^\\[[\\d.]+\\]$/.test(value) || !Number.isNaN(Number(value))\n\nconst twMerge = extendTailwindMerge<\n  'capsize' | 'capsize-before' | 'capsize-after'\n>({\n  extend: {\n    classGroups: {\n      capsize: [{ capsize: ['none', isArbitraryNumber] }],\n      'capsize-before': [{ 'capsize-before': [isArbitraryNumber] }],\n      'capsize-after': [{ 'capsize-after': [isArbitraryNumber] }]\n    },\n    conflictingClassGroups: {\n      capsize: ['capsize-before', 'capsize-after'],\n      'capsize-before': ['capsize'],\n      'capsize-after': ['capsize']\n    }\n  }\n})\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","isArbitraryNumber","value","twMerge","extendTailwindMerge","Theme","children","theme","React","createTheme","config","tokens","token","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","asProp","isStyledComponent","propsForComponent","combinedWrapperClasses","hasDataAttributeVariants","mergedPropsAndComponent","element","existingClass","incomingClass","cloneProps"],"mappings":"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"}
+{"version":3,"file":"styled.js","names":[],"sources":["../src/styled.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React, { ElementType, ReactElement } from 'react'\nimport { extendTailwindMerge } from 'tailwind-merge'\nimport { defaultConfig, tv } from 'tailwind-variants'\n\ndefaultConfig.twMerge = false\n\nconst isArbitraryNumber = (value: string) =>\n  /^\\[[\\d.]+\\]$/.test(value) || !Number.isNaN(Number(value))\n\nconst twMerge = extendTailwindMerge<\n  'capsize' | 'capsize-before' | 'capsize-after'\n>({\n  extend: {\n    classGroups: {\n      capsize: [{ capsize: ['none', isArbitraryNumber] }],\n      'capsize-before': [{ 'capsize-before': [isArbitraryNumber] }],\n      'capsize-after': [{ 'capsize-after': [isArbitraryNumber] }]\n    },\n    conflictingClassGroups: {\n      capsize: ['capsize-before', 'capsize-after'],\n      'capsize-before': ['capsize'],\n      'capsize-after': ['capsize']\n    }\n  }\n})\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"],"mappings":"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"}

package/dist/utilities/css-wrapper/CSSWrapper.js

@@ -1,2 +1,8 @@
-import*as e from"react";const l=({className:a,children:r})=>a?e.createElement("div",{className:a},r):e.createElement(e.Fragment,null,r);l.displayName="CSSWrapper";export{l as CSSWrapper};
-//# sourceMappingURL=CSSWrapper.js.map
+import * as e from "react";
+//#region src/utilities/css-wrapper/CSSWrapper.tsx
+var t = ({ className: t, children: n }) => t ? /* @__PURE__ */ e.createElement("div", { className: t }, n) : /* @__PURE__ */ e.createElement(e.Fragment, null, n);
+t.displayName = "CSSWrapper";
+//#endregion
+export { t as CSSWrapper };
+
+//# sourceMappingURL=CSSWrapper.js.map

package/dist/utilities/css-wrapper/CSSWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"CSSWrapper.js","sources":["../../../src/utilities/css-wrapper/CSSWrapper.tsx"],"sourcesContent":["import * as React from 'react'\n\ntype CssWrapperProps = {\n  className?: string\n  children: React.ReactNode\n}\n\nexport const CSSWrapper = ({\n  className,\n  children\n}: CssWrapperProps): React.ReactElement =>\n  className ? (\n    <div className={className}>{children}</div>\n  ) : (\n    // children could be multiple elements/components,\n    // so we need a fragment here.\n    // eslint-disable-next-line react/jsx-no-useless-fragment\n    <>{children}</>\n  )\n\nCSSWrapper.displayName = 'CSSWrapper'\n"],"names":["CSSWrapper","className","children","React"],"mappings":"wBAOO,MAAMA,EAAa,CAAC,CACzB,UAAAC,EACA,SAAAC,CACF,IACED,EACEE,EAAA,cAAC,MAAI,CAAA,UAAWF,CAAYC,EAAAA,CAAS,EAKrCC,EAAA,cAAAA,EAAA,SAAGD,KAAAA,CAAS,EAGhBF,EAAW,YAAc"}
+{"version":3,"file":"CSSWrapper.js","names":[],"sources":["../../../src/utilities/css-wrapper/CSSWrapper.tsx"],"sourcesContent":["import * as React from 'react'\n\ntype CssWrapperProps = {\n  className?: string\n  children: React.ReactNode\n}\n\nexport const CSSWrapper = ({\n  className,\n  children\n}: CssWrapperProps): React.ReactElement =>\n  className ? (\n    <div className={className}>{children}</div>\n  ) : (\n    // children could be multiple elements/components,\n    // so we need a fragment here.\n    // eslint-disable-next-line react/jsx-no-useless-fragment\n    <>{children}</>\n  )\n\nCSSWrapper.displayName = 'CSSWrapper'\n"],"mappings":";;AAOA,IAAa,KAAc,EACzB,cACA,kBAEA,IACE,kBAAA,cAAC,OAAD,EAAgB,cAA2B,EAAf,EAAe,GAK3C,kBAAA,cAAA,EAAA,UAAA,MAAG,EAAY;AAGnB,EAAW,cAAc"}

package/dist/utilities/event/preventEvent.js

@@ -1,2 +1,8 @@
-const t=e=>{e.preventDefault()};export{t as preventEvent};
-//# sourceMappingURL=preventEvent.js.map
+//#region src/utilities/event/preventEvent.ts
+var e = (e) => {
+	e.preventDefault();
+};
+//#endregion
+export { e as preventEvent };
+
+//# sourceMappingURL=preventEvent.js.map

package/dist/utilities/event/preventEvent.js.map

@@ -1 +1 @@
-{"version":3,"file":"preventEvent.js","sources":["../../../src/utilities/event/preventEvent.ts"],"sourcesContent":["/*\nUsed to block default radix hover to open menu behaviour\nProps: https://github.com/radix-ui/primitives/issues/1630\n*/\nexport const preventEvent = (\n  event: React.PointerEvent | Event | React.SyntheticEvent\n): void => {\n  const e = event as Event\n  e.preventDefault()\n}\n"],"names":["preventEvent","event"],"mappings":"AAIO,MAAMA,EACXC,GACS,CACCA,EACR,eACJ,CAAA"}
+{"version":3,"file":"preventEvent.js","names":[],"sources":["../../../src/utilities/event/preventEvent.ts"],"sourcesContent":["/*\nUsed to block default radix hover to open menu behaviour\nProps: https://github.com/radix-ui/primitives/issues/1630\n*/\nexport const preventEvent = (\n  event: React.PointerEvent | Event | React.SyntheticEvent\n): void => {\n  const e = event as Event\n  e.preventDefault()\n}\n"],"mappings":";AAIA,IAAa,KACX,MACS;AACC,GACR,gBAAgB"}

package/dist/utilities/hooks/useCallbackRef.js

@@ -1,2 +1,17 @@
-import*as t from"react";const n=()=>{const e=t.useRef(null),u=t.useCallback(l=>{l&&(e.current=l)},[]);return[e,u]},s=()=>{const[e,u]=t.useState(null),l=t.useCallback(a=>{a&&u(a)},[]);return[e,l]};export{n as useCallbackRef,s as useCallbackRefState};
-//# sourceMappingURL=useCallbackRef.js.map
+import * as e from "react";
+//#region src/utilities/hooks/useCallbackRef.ts
+var t = () => {
+	let t = e.useRef(null);
+	return [t, e.useCallback((e) => {
+		e && (t.current = e);
+	}, [])];
+}, n = () => {
+	let [t, n] = e.useState(null);
+	return [t, e.useCallback((e) => {
+		e && n(e);
+	}, [])];
+};
+//#endregion
+export { t as useCallbackRef, n as useCallbackRefState };
+
+//# sourceMappingURL=useCallbackRef.js.map

package/dist/utilities/hooks/useCallbackRef.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCallbackRef.js","sources":["../../../src/utilities/hooks/useCallbackRef.ts"],"sourcesContent":["import * as React from 'react'\n\nexport const useCallbackRef: () => [\n  React.MutableRefObject<HTMLElement | null>,\n  (HTMLElement) => void\n] = () => {\n  const elRef = React.useRef<HTMLElement | null>(null)\n\n  const setElRefCallback = React.useCallback((el) => {\n    if (el) elRef.current = el\n  }, [])\n\n  return [elRef, setElRefCallback]\n}\n\nexport const useCallbackRefState: () => [\n  HTMLElement | null,\n  (HTMLElement) => void\n] = () => {\n  const [elRef, setElRef] = React.useState<HTMLElement | null>(null)\n\n  const setElRefCallback = React.useCallback((el) => {\n    if (el) setElRef(el)\n  }, [])\n\n  return [elRef, setElRefCallback]\n}\n"],"names":["useCallbackRef","elRef","React","setElRefCallback","el","useCallbackRefState","setElRef"],"mappings":"wBAEa,MAAAA,EAGT,IAAM,CACR,MAAMC,EAAQC,EAAM,OAA2B,IAAI,EAE7CC,EAAmBD,EAAM,YAAaE,GAAO,CAC7CA,IAAIH,EAAM,QAAUG,EAC1B,EAAG,CAAA,CAAE,EAEL,MAAO,CAACH,EAAOE,CAAgB,CACjC,EAEaE,EAGT,IAAM,CACR,KAAM,CAACJ,EAAOK,CAAQ,EAAIJ,EAAM,SAA6B,IAAI,EAE3DC,EAAmBD,EAAM,YAAaE,GAAO,CAC7CA,GAAIE,EAASF,CAAE,CACrB,EAAG,CAAA,CAAE,EAEL,MAAO,CAACH,EAAOE,CAAgB,CACjC"}
+{"version":3,"file":"useCallbackRef.js","names":[],"sources":["../../../src/utilities/hooks/useCallbackRef.ts"],"sourcesContent":["import * as React from 'react'\n\nexport const useCallbackRef: () => [\n  React.MutableRefObject<HTMLElement | null>,\n  (HTMLElement) => void\n] = () => {\n  const elRef = React.useRef<HTMLElement | null>(null)\n\n  const setElRefCallback = React.useCallback((el) => {\n    if (el) elRef.current = el\n  }, [])\n\n  return [elRef, setElRefCallback]\n}\n\nexport const useCallbackRefState: () => [\n  HTMLElement | null,\n  (HTMLElement) => void\n] = () => {\n  const [elRef, setElRef] = React.useState<HTMLElement | null>(null)\n\n  const setElRefCallback = React.useCallback((el) => {\n    if (el) setElRef(el)\n  }, [])\n\n  return [elRef, setElRefCallback]\n}\n"],"mappings":";;AAEA,IAAa,UAGH;CACR,IAAM,IAAQ,EAAM,OAA2B,KAAK;AAMpD,QAAO,CAAC,GAJiB,EAAM,aAAa,MAAO;AACjD,EAAI,MAAI,EAAM,UAAU;IACvB,EAAE,CAAC,CAE0B;GAGrB,UAGH;CACR,IAAM,CAAC,GAAO,KAAY,EAAM,SAA6B,KAAK;AAMlE,QAAO,CAAC,GAJiB,EAAM,aAAa,MAAO;AACjD,EAAI,KAAI,EAAS,EAAG;IACnB,EAAE,CAAC,CAE0B"}

package/dist/utilities/hooks/useIsMountedRef.js

@@ -1,2 +1,12 @@
-import{useRef as r,useEffect as t}from"react";const u=()=>{const e=r();return t(()=>(e.current=!0,()=>{e.current=!1})),e};export{u as useIsMountedRef};
-//# sourceMappingURL=useIsMountedRef.js.map
+import { useEffect as e, useRef as t } from "react";
+//#region src/utilities/hooks/useIsMountedRef.ts
+var n = () => {
+	let n = t();
+	return e(() => (n.current = !0, () => {
+		n.current = !1;
+	})), n;
+};
+//#endregion
+export { n as useIsMountedRef };
+
+//# sourceMappingURL=useIsMountedRef.js.map

package/dist/utilities/hooks/useIsMountedRef.js.map

@@ -1 +1 @@
-{"version":3,"file":"useIsMountedRef.js","sources":["../../../src/utilities/hooks/useIsMountedRef.ts"],"sourcesContent":["import { useEffect, useRef } from 'react'\n\nexport const useIsMountedRef = () => {\n  const isMountedRef = useRef<boolean>()\n\n  useEffect(() => {\n    isMountedRef.current = true\n    return () => {\n      isMountedRef.current = false\n    }\n  })\n\n  return isMountedRef\n}\n"],"names":["useIsMountedRef","isMountedRef","useRef","useEffect"],"mappings":"8CAEa,MAAAA,EAAkB,IAAM,CACnC,MAAMC,EAAeC,EAAgB,EAErC,OAAAC,EAAU,KACRF,EAAa,QAAU,GAChB,IAAM,CACXA,EAAa,QAAU,EACzB,EACD,EAEMA,CACT"}
+{"version":3,"file":"useIsMountedRef.js","names":[],"sources":["../../../src/utilities/hooks/useIsMountedRef.ts"],"sourcesContent":["import { useEffect, useRef } from 'react'\n\nexport const useIsMountedRef = () => {\n  const isMountedRef = useRef<boolean>()\n\n  useEffect(() => {\n    isMountedRef.current = true\n    return () => {\n      isMountedRef.current = false\n    }\n  })\n\n  return isMountedRef\n}\n"],"mappings":";;AAEA,IAAa,UAAwB;CACnC,IAAM,IAAe,GAAiB;AAStC,QAPA,SACE,EAAa,UAAU,UACV;AACX,IAAa,UAAU;IAEzB,EAEK"}

package/dist/utilities/hooks/useResizeObserver.js

@@ -1,2 +1,21 @@
-import*as t from"react";import{debounce as u}from"throttle-debounce";const c=o=>{try{return new ResizeObserver(o)}catch{return null}},l=({delay:o=500,elements:n,onResize:s})=>{const e=t.useMemo(()=>c(u(o,s)),[o,s]);return t.useEffect(()=>(n.forEach(r=>{r&&(e==null||e.observe(r))}),()=>{n.forEach(r=>r&&(e==null?void 0:e.unobserve(r)))}),[e,n]),e};export{l as useResizeObserver};
-//# sourceMappingURL=useResizeObserver.js.map
+import * as e from "react";
+import { debounce as t } from "throttle-debounce";
+//#region src/utilities/hooks/useResizeObserver.ts
+var n = (e) => {
+	try {
+		return new ResizeObserver(e);
+	} catch {
+		return null;
+	}
+}, r = ({ delay: r = 500, elements: i, onResize: a }) => {
+	let o = e.useMemo(() => n(t(r, a)), [r, a]);
+	return e.useEffect(() => (i.forEach((e) => {
+		e && o?.observe(e);
+	}), () => {
+		i.forEach((e) => e && o?.unobserve(e));
+	}), [o, i]), o;
+};
+//#endregion
+export { r as useResizeObserver };
+
+//# sourceMappingURL=useResizeObserver.js.map

package/dist/utilities/hooks/useResizeObserver.js.map

@@ -1 +1 @@
-{"version":3,"file":"useResizeObserver.js","sources":["../../../src/utilities/hooks/useResizeObserver.ts"],"sourcesContent":["import * as React from 'react'\nimport { debounce } from 'throttle-debounce'\n\ntype TUseResizeObserverOptions = {\n  elements: (HTMLElement | undefined | null)[]\n  onResize: (entries: ResizeObserverEntry[]) => void\n  delay?: number\n}\n\ntype TUseResizeObserverOutput = ResizeObserver | null\n\nconst createResizeObserver = (\n  callback: (entries: ResizeObserverEntry[]) => void\n) => {\n  try {\n    return new ResizeObserver(callback)\n  } catch {\n    return null\n  }\n}\n\nexport const useResizeObserver = ({\n  delay = 500,\n  elements,\n  onResize\n}: TUseResizeObserverOptions): TUseResizeObserverOutput => {\n  const observer = React.useMemo(\n    () => createResizeObserver(debounce(delay, onResize)),\n    [delay, onResize]\n  )\n\n  React.useEffect(() => {\n    elements.forEach((element) => {\n      if (element) {\n        observer?.observe(element)\n      }\n    })\n\n    return () => {\n      elements.forEach((element) => element && observer?.unobserve(element))\n    }\n  }, [observer, elements])\n\n  return observer\n}\n"],"names":["createResizeObserver","callback","useResizeObserver","delay","elements","onResize","observer","React","debounce","element"],"mappings":"qEAWA,MAAMA,EACJC,GACG,CACH,GAAI,CACF,OAAO,IAAI,eAAeA,CAAQ,CACpC,MAAQ,CACN,OAAO,IACT,CACF,EAEaC,EAAoB,CAAC,CAChC,MAAAC,EAAQ,IACR,SAAAC,EACA,SAAAC,CACF,IAA2D,CACzD,MAAMC,EAAWC,EAAM,QACrB,IAAMP,EAAqBQ,EAASL,EAAOE,CAAQ,CAAC,EACpD,CAACF,EAAOE,CAAQ,CAClB,EAEA,OAAAE,EAAM,UAAU,KACdH,EAAS,QAASK,GAAY,CACxBA,IACFH,GAAA,MAAAA,EAAU,QAAQG,CAEtB,EAAA,CAAC,EAEM,IAAM,CACXL,EAAS,QAASK,GAAYA,IAAWH,GAAA,KAAA,OAAAA,EAAU,UAAUG,CAAAA,EAAQ,CACvE,GACC,CAACH,EAAUF,CAAQ,CAAC,EAEhBE,CACT"}
+{"version":3,"file":"useResizeObserver.js","names":[],"sources":["../../../src/utilities/hooks/useResizeObserver.ts"],"sourcesContent":["import * as React from 'react'\nimport { debounce } from 'throttle-debounce'\n\ntype TUseResizeObserverOptions = {\n  elements: (HTMLElement | undefined | null)[]\n  onResize: (entries: ResizeObserverEntry[]) => void\n  delay?: number\n}\n\ntype TUseResizeObserverOutput = ResizeObserver | null\n\nconst createResizeObserver = (\n  callback: (entries: ResizeObserverEntry[]) => void\n) => {\n  try {\n    return new ResizeObserver(callback)\n  } catch {\n    return null\n  }\n}\n\nexport const useResizeObserver = ({\n  delay = 500,\n  elements,\n  onResize\n}: TUseResizeObserverOptions): TUseResizeObserverOutput => {\n  const observer = React.useMemo(\n    () => createResizeObserver(debounce(delay, onResize)),\n    [delay, onResize]\n  )\n\n  React.useEffect(() => {\n    elements.forEach((element) => {\n      if (element) {\n        observer?.observe(element)\n      }\n    })\n\n    return () => {\n      elements.forEach((element) => element && observer?.unobserve(element))\n    }\n  }, [observer, elements])\n\n  return observer\n}\n"],"mappings":";;;AAWA,IAAM,KACJ,MACG;AACH,KAAI;AACF,SAAO,IAAI,eAAe,EAAS;SAC7B;AACN,SAAO;;GAIE,KAAqB,EAChC,WAAQ,KACR,aACA,kBACyD;CACzD,IAAM,IAAW,EAAM,cACf,EAAqB,EAAS,GAAO,EAAS,CAAC,EACrD,CAAC,GAAO,EAAS,CAClB;AAcD,QAZA,EAAM,iBACJ,EAAS,SAAS,MAAY;AAC5B,EAAI,KACF,GAAU,QAAQ,EAAQ;GAE5B,QAEW;AACX,IAAS,SAAS,MAAY,KAAW,GAAU,UAAU,EAAQ,CAAC;KAEvE,CAAC,GAAU,EAAS,CAAC,EAEjB"}

package/dist/utilities/hooks/useScrollPosition.js

@@ -1,2 +1,29 @@
-import{useState as c,useMemo as u,useEffect as f}from"react";import{debounce as d,throttle as i}from"throttle-debounce";const m=({element:e,delay:t=500,delayMethod:r="throttle"})=>{const[n,s]=c({left:0,top:0}),o=u(()=>r==="debounce"?d:i,[r]);return f(()=>{if(!e)return;const l=o(t,()=>{s({left:e.scrollLeft,top:e.scrollTop})});return e.addEventListener("scroll",l),()=>{e.removeEventListener("scroll",l)}},[e,o,t]),n};export{m as useScrollPosition};
-//# sourceMappingURL=useScrollPosition.js.map
+import { useEffect as e, useMemo as t, useState as n } from "react";
+import { debounce as r, throttle as i } from "throttle-debounce";
+//#region src/utilities/hooks/useScrollPosition.ts
+var a = ({ element: a, delay: o = 500, delayMethod: s = "throttle" }) => {
+	let [c, l] = n({
+		left: 0,
+		top: 0
+	}), u = t(() => s === "debounce" ? r : i, [s]);
+	return e(() => {
+		if (!a) return;
+		let e = u(o, () => {
+			l({
+				left: a.scrollLeft,
+				top: a.scrollTop
+			});
+		});
+		return a.addEventListener("scroll", e), () => {
+			a.removeEventListener("scroll", e);
+		};
+	}, [
+		a,
+		u,
+		o
+	]), c;
+};
+//#endregion
+export { a as useScrollPosition };
+
+//# sourceMappingURL=useScrollPosition.js.map

package/dist/utilities/hooks/useScrollPosition.js.map

@@ -1 +1 @@
-{"version":3,"file":"useScrollPosition.js","sources":["../../../src/utilities/hooks/useScrollPosition.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react'\nimport { debounce, throttle } from 'throttle-debounce'\n\ntype TUseScrollPositionOptions = {\n  element?: HTMLElement | null\n  delay?: number\n  delayMethod?: 'throttle' | 'debounce'\n}\n\ntype TUseScrollPositionOutput = {\n  left: number\n  top: number\n}\n\nexport const useScrollPosition = ({\n  element,\n  delay = 500,\n  delayMethod = 'throttle'\n}: TUseScrollPositionOptions): TUseScrollPositionOutput => {\n  const [scrollPosition, setScrollPosition] = useState({ left: 0, top: 0 })\n\n  const delayMethodFn = useMemo(\n    () => (delayMethod === 'debounce' ? debounce : throttle),\n    [delayMethod]\n  )\n\n  useEffect(() => {\n    if (!element) return\n\n    const handleScroll = delayMethodFn(delay, () => {\n      setScrollPosition({ left: element.scrollLeft, top: element.scrollTop })\n    })\n\n    element.addEventListener('scroll', handleScroll)\n\n    return () => {\n      element.removeEventListener('scroll', handleScroll)\n    }\n  }, [element, delayMethodFn, delay])\n\n  return scrollPosition\n}\n"],"names":["useScrollPosition","element","delay","delayMethod","scrollPosition","setScrollPosition","useState","delayMethodFn","useMemo","debounce","throttle","useEffect","handleScroll"],"mappings":"8HAcaA,EAAoB,CAAC,CAChC,QAAAC,EACA,MAAAC,EAAQ,IACR,YAAAC,EAAc,UAChB,IAA2D,CACzD,KAAM,CAACC,EAAgBC,CAAiB,EAAIC,EAAS,CAAE,KAAM,EAAG,IAAK,CAAE,CAAC,EAElEC,EAAgBC,EACpB,IAAOL,IAAgB,WAAaM,EAAWC,EAC/C,CAACP,CAAW,CACd,EAEA,OAAAQ,EAAU,IAAM,CACd,GAAI,CAACV,EAAS,OAEd,MAAMW,EAAeL,EAAcL,EAAO,IAAM,CAC9CG,EAAkB,CAAE,KAAMJ,EAAQ,WAAY,IAAKA,EAAQ,SAAU,CAAC,CACxE,CAAC,EAED,OAAAA,EAAQ,iBAAiB,SAAUW,CAAY,EAExC,IAAM,CACXX,EAAQ,oBAAoB,SAAUW,CAAY,CACpD,CACF,EAAG,CAACX,EAASM,EAAeL,CAAK,CAAC,EAE3BE,CACT"}
+{"version":3,"file":"useScrollPosition.js","names":[],"sources":["../../../src/utilities/hooks/useScrollPosition.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react'\nimport { debounce, throttle } from 'throttle-debounce'\n\ntype TUseScrollPositionOptions = {\n  element?: HTMLElement | null\n  delay?: number\n  delayMethod?: 'throttle' | 'debounce'\n}\n\ntype TUseScrollPositionOutput = {\n  left: number\n  top: number\n}\n\nexport const useScrollPosition = ({\n  element,\n  delay = 500,\n  delayMethod = 'throttle'\n}: TUseScrollPositionOptions): TUseScrollPositionOutput => {\n  const [scrollPosition, setScrollPosition] = useState({ left: 0, top: 0 })\n\n  const delayMethodFn = useMemo(\n    () => (delayMethod === 'debounce' ? debounce : throttle),\n    [delayMethod]\n  )\n\n  useEffect(() => {\n    if (!element) return\n\n    const handleScroll = delayMethodFn(delay, () => {\n      setScrollPosition({ left: element.scrollLeft, top: element.scrollTop })\n    })\n\n    element.addEventListener('scroll', handleScroll)\n\n    return () => {\n      element.removeEventListener('scroll', handleScroll)\n    }\n  }, [element, delayMethodFn, delay])\n\n  return scrollPosition\n}\n"],"mappings":";;;AAcA,IAAa,KAAqB,EAChC,YACA,WAAQ,KACR,iBAAc,iBAC2C;CACzD,IAAM,CAAC,GAAgB,KAAqB,EAAS;EAAE,MAAM;EAAG,KAAK;EAAG,CAAC,EAEnE,IAAgB,QACb,MAAgB,aAAa,IAAW,GAC/C,CAAC,EAAY,CACd;AAgBD,QAdA,QAAgB;AACd,MAAI,CAAC,EAAS;EAEd,IAAM,IAAe,EAAc,SAAa;AAC9C,KAAkB;IAAE,MAAM,EAAQ;IAAY,KAAK,EAAQ;IAAW,CAAC;IACvE;AAIF,SAFA,EAAQ,iBAAiB,UAAU,EAAa,QAEnC;AACX,KAAQ,oBAAoB,UAAU,EAAa;;IAEpD;EAAC;EAAS;EAAe;EAAM,CAAC,EAE5B"}

package/dist/utilities/hooks/useSize.js

@@ -1,2 +1,23 @@
-import{useState as n,useCallback as d,useMemo as r}from"react";import{useResizeObserver as h}from"./useResizeObserver.js";const u=({element:e,delay:t=500})=>{const[o,l]=n({width:void 0,height:void 0}),s=d(()=>{l({width:e==null?void 0:e.clientWidth,height:e==null?void 0:e.clientHeight})},[e]),i=r(()=>[e],[e]);return h({delay:t,elements:i,onResize:s}),o};export{u as useSize};
-//# sourceMappingURL=useSize.js.map
+import { useResizeObserver as e } from "./useResizeObserver.js";
+import { useCallback as t, useMemo as n, useState as r } from "react";
+//#region src/utilities/hooks/useSize.ts
+var i = ({ element: i, delay: a = 500 }) => {
+	let [o, s] = r({
+		width: void 0,
+		height: void 0
+	}), c = t(() => {
+		s({
+			width: i?.clientWidth,
+			height: i?.clientHeight
+		});
+	}, [i]);
+	return e({
+		delay: a,
+		elements: n(() => [i], [i]),
+		onResize: c
+	}), o;
+};
+//#endregion
+export { i as useSize };
+
+//# sourceMappingURL=useSize.js.map

package/dist/utilities/hooks/useSize.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSize.js","sources":["../../../src/utilities/hooks/useSize.ts"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react'\n\nimport { useResizeObserver } from './useResizeObserver'\n\ninterface Size {\n  width: number | undefined\n  height: number | undefined\n}\n\nexport const useSize = ({\n  element,\n  delay = 500\n}: {\n  element?: HTMLElement | null\n  delay?: number\n}): Size => {\n  const [size, setSize] = useState<Size>({\n    width: undefined,\n    height: undefined\n  })\n\n  const handleResize = useCallback(() => {\n    setSize({\n      width: element?.clientWidth,\n      height: element?.clientHeight\n    })\n  }, [element])\n\n  const elements = useMemo(() => [element], [element])\n\n  useResizeObserver({\n    delay,\n    elements: elements,\n    onResize: handleResize\n  })\n\n  return size\n}\n"],"names":["useSize","element","delay","size","setSize","useState","handleResize","useCallback","elements","useMemo","useResizeObserver"],"mappings":"0HASa,MAAAA,EAAU,CAAC,CACtB,QAAAC,EACA,MAAAC,EAAQ,GACV,IAGY,CACV,KAAM,CAACC,EAAMC,CAAO,EAAIC,EAAe,CACrC,MAAO,OACP,OAAQ,MACV,CAAC,EAEKC,EAAeC,EAAY,IAAM,CACrCH,EAAQ,CACN,MAAOH,GAAA,KAAA,OAAAA,EAAS,YAChB,OAAQA,GAAA,KAAA,OAAAA,EAAS,YACnB,CAAC,CACH,EAAG,CAACA,CAAO,CAAC,EAENO,EAAWC,EAAQ,IAAM,CAACR,CAAO,EAAG,CAACA,CAAO,CAAC,EAEnD,OAAAS,EAAkB,CAChB,MAAAR,EACA,SAAUM,EACV,SAAUF,CACZ,CAAC,EAEMH,CACT"}
+{"version":3,"file":"useSize.js","names":[],"sources":["../../../src/utilities/hooks/useSize.ts"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react'\n\nimport { useResizeObserver } from './useResizeObserver'\n\ninterface Size {\n  width: number | undefined\n  height: number | undefined\n}\n\nexport const useSize = ({\n  element,\n  delay = 500\n}: {\n  element?: HTMLElement | null\n  delay?: number\n}): Size => {\n  const [size, setSize] = useState<Size>({\n    width: undefined,\n    height: undefined\n  })\n\n  const handleResize = useCallback(() => {\n    setSize({\n      width: element?.clientWidth,\n      height: element?.clientHeight\n    })\n  }, [element])\n\n  const elements = useMemo(() => [element], [element])\n\n  useResizeObserver({\n    delay,\n    elements: elements,\n    onResize: handleResize\n  })\n\n  return size\n}\n"],"mappings":";;;AASA,IAAa,KAAW,EACtB,YACA,WAAQ,UAIE;CACV,IAAM,CAAC,GAAM,KAAW,EAAe;EACrC,OAAO,KAAA;EACP,QAAQ,KAAA;EACT,CAAC,EAEI,IAAe,QAAkB;AACrC,IAAQ;GACN,OAAO,GAAS;GAChB,QAAQ,GAAS;GAClB,CAAC;IACD,CAAC,EAAQ,CAAC;AAUb,QANA,EAAkB;EAChB;EACU,UAJK,QAAc,CAAC,EAAQ,EAAE,CAAC,EAAQ,CAAC;EAKlD,UAAU;EACX,CAAC,EAEK"}