npm - @atom-learning/components - Versions diffs - 8.0.2 → 9.0.0-beta.0 - Mend

@atom-learning/components 8.0.2 → 9.0.0-beta.0

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

Files changed (932) hide show

package/dist/index.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 export * from './components';
 export * from './styled';
 export type { NavigatorActions } from './types/navigatorActions.types';
-export type { TOptionalTooltipWrapperProps } from './utilities/optional-tooltip-wrapper/OptionalTooltipWrapper';
+export type { OptionalTooltipWrapperProps } from './utilities/optional-tooltip-wrapper/OptionalTooltipWrapper';
 export * from './experiments/color-scheme/ColorScheme';

package/dist/index.js CHANGED Viewed

@@ -1,15 +1,16 @@
 import { Theme, cn, createTheme, styled } from "./styled.js";
-import { ColorScheme } from "./experiments/color-scheme/ColorScheme.js";
-import { Icon } from "./components/icon/Icon.js";
-import { Accordion } from "./components/accordion/Accordion.js";
-import { Tooltip } from "./components/tooltip/Tooltip.js";
-import { ActionIcon } from "./components/action-icon/ActionIcon.js";
-import { AlertDialog } from "./components/alert-dialog/AlertDialog.js";
 import { Loader } from "./components/loader/Loader.js";
 import { Button, StyledButton } from "./components/button/Button.js";
 import { Heading } from "./components/heading/Heading.js";
 import { Text } from "./components/text/Text.js";
-import { AlertProvider, useAlert } from "./components/alert-dialog/alert-context/AlertContext.js";
+import { AlertDialog } from "./components/alert-dialog/AlertDialog.js";
+import { Icon } from "./components/icon/Icon.js";
+import { useAlert } from "./components/alert-dialog/AlertDialog.context.js";
+import { ColorScheme } from "./experiments/color-scheme/ColorScheme.js";
+import { Accordion } from "./components/accordion/Accordion.js";
+import { Tooltip } from "./components/tooltip/Tooltip.js";
+import { ActionIcon } from "./components/action-icon/ActionIcon.js";
+import { Link, StyledLink } from "./components/link/Link.js";
 import { Image } from "./components/image/Image.js";
 import { Avatar } from "./components/avatar/Avatar.js";
 import { Badge } from "./components/badge/Badge.js";
@@ -33,14 +34,13 @@ import { DismissibleGroup } from "./components/dismissible-group/index.js";
 import { ChipDismissibleGroup } from "./components/chip-dismissible-group/index.js";
 import { ChipToggleGroup } from "./components/chip-toggle-group/index.js";
 import { Combobox } from "./components/combobox/Combobox.js";
-import { Link, StyledLink } from "./components/link/Link.js";
 import { FieldWrapper } from "./components/field-wrapper/FieldWrapper.js";
 import { Input, InputBackground, InputText } from "./components/input/Input.js";
 import { PasswordInput } from "./components/password-input/PasswordInput.js";
 import { PasswordField } from "./components/password-field/PasswordField.js";
 import { CreatePasswordField } from "./components/create-password-field/CreatePasswordField.js";
+import { useDataTable } from "./components/data-table/DataTable.context.js";
 import { Table } from "./components/table/Table.js";
-import { useDataTable } from "./components/data-table/DataTableContext.js";
 import { Divider } from "./components/divider/Divider.js";
 import { EmptyState } from "./components/empty-state/EmptyState.js";
 import { SearchInput } from "./components/search-input/SearchInput.js";
@@ -61,7 +61,7 @@ import { InputField } from "./components/input-field/InputField.js";
 import { List } from "./components/list/List.js";
 import { MarkdownContent } from "./components/markdown-content/MarkdownContent.js";
 import { NavigationMenu } from "./components/navigation/NavigationMenu.js";
-import { useSidebarState } from "./components/side-bar/SideBarContext.js";
+import { useSidebarState } from "./components/side-bar/SideBar.context.js";
 import { NavigationMenuVertical } from "./components/navigation-menu-vertical/NavigationMenuVertical.js";
 import { NotificationBadge } from "./components/notification-badge/NotificationBadge.js";
 import { NumberInput } from "./components/number-input/NumberInput.js";
@@ -90,8 +90,8 @@ import { Textarea } from "./components/textarea/Textarea.js";
 import { TextareaField } from "./components/textarea-field/TextareaField.js";
 import { TileInteractive } from "./components/tile-interactive/TileInteractive.js";
 import { TileToggleGroup } from "./components/tile-toggle-group/index.js";
-import { Toast } from "./components/toast/Toast.js";
-import { ToastProvider, toast } from "./components/toast/ToastProvider.js";
+import { toast } from "./components/toast/ToastProvider.js";
+import { Toast } from "./components/toast/index.js";
 import { ToggleGroup } from "./components/toggle-group/index.js";
 import { TopBar } from "./components/top-bar/TopBar.js";
 import { Video } from "./components/video/Video.js";
@@ -99,4 +99,5 @@ import { KeyboardShortcut } from "./components/keyboard-shortcut/index.js";
 import { SegmentedControl } from "./components/segmented-control/SegmentedControl.js";
 import { FileDrop } from "./components/file-drop/FileDrop.js";
 import { useFileDrop } from "./components/file-drop/useFileDrop.js";
-export { Accordion, ActionIcon, AlertDialog, AlertProvider, Avatar, Badge, BannerRegular, BannerSlim, Box, Button, Carousel, Checkbox, CheckboxField, CheckboxGroup, CheckboxTree, Chip, ChipDismissibleGroup, ChipGroup, ChipToggleGroup, ColorScheme, Combobox, CreatePasswordField, DataTable, DateField, DateInput, Dialog, Dismissible, DismissibleGroup, Divider, Drawer, DropdownMenu, EmptyState, FieldWrapper, FileDrop, FileInput, Flex, Form, Grid, Heading, Icon, Image, InlineFieldWrapper, InlineMessage, Input, InputBackground, InputField, InputText, KeyboardShortcut, Label, Link, List, Loader, MarkdownContent, NavigationMenu, NavigationMenuVertical, NotificationBadge, NumberInput, NumberInputField, Pagination, PasswordField, PasswordInput, Popover, ProgressBar, RadioButton, RadioButtonField, RadioButtonGroup, RadioCard, RadioCardGroup, SearchField, SearchInput, SectionMessage, SegmentedControl, Select, SelectField, SelectMenu, SelectMenuField, SideBar, skeleton_loader_exports as Skeleton, Slider, SliderField, sortable_exports as Sortable, Spacer, Stepper, StyledButton, StyledLink, Switch, Table, Tabs, Text, Textarea, TextareaField, Theme, Tile, TileInteractive, TileToggleGroup, Toast, ToastProvider, ToggleGroup, Tooltip, TopBar, Tree, Video, cn, createTheme, styled, toast, useAlert, useCarousel, useDataTable, useFileDrop, useSidebarState };
+import { Alert } from "./components/index.js";
+export { Accordion, ActionIcon, Alert, AlertDialog, Avatar, Badge, BannerRegular, BannerSlim, Box, Button, Carousel, Checkbox, CheckboxField, CheckboxGroup, CheckboxTree, Chip, ChipDismissibleGroup, ChipGroup, ChipToggleGroup, ColorScheme, Combobox, CreatePasswordField, DataTable, DateField, DateInput, Dialog, Dismissible, DismissibleGroup, Divider, Drawer, DropdownMenu, EmptyState, FieldWrapper, FileDrop, FileInput, Flex, Form, Grid, Heading, Icon, Image, InlineFieldWrapper, InlineMessage, Input, InputBackground, InputField, InputText, KeyboardShortcut, Label, Link, List, Loader, MarkdownContent, NavigationMenu, NavigationMenuVertical, NotificationBadge, NumberInput, NumberInputField, Pagination, PasswordField, PasswordInput, Popover, ProgressBar, RadioButton, RadioButtonField, RadioButtonGroup, RadioCard, RadioCardGroup, SearchField, SearchInput, SectionMessage, SegmentedControl, Select, SelectField, SelectMenu, SelectMenuField, SideBar, skeleton_loader_exports as Skeleton, Slider, SliderField, sortable_exports as Sortable, Spacer, Stepper, StyledButton, StyledLink, Switch, Table, Tabs, Text, Textarea, TextareaField, Theme, Tile, TileInteractive, TileToggleGroup, Toast, ToggleGroup, Tooltip, TopBar, Tree, Video, cn, createTheme, styled, toast, useAlert, useCarousel, useDataTable, useFileDrop, useSidebarState };

package/dist/styled.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { type ClassValue } from 'clsx';
-import React, { ElementType } from 'react';
+import React, { type ElementType } from 'react';
 export declare const cn: (...inputs: ClassValue[]) => string;
 type Breakpoint = '@initial' | '@sm' | '@md' | '@lg' | '@xl';
 export declare const Theme: ({ children, theme }: React.PropsWithChildren<{
@@ -33,12 +33,46 @@ type StyledConfig<V extends VariantConfig | undefined = undefined> = {
         [K in keyof V]?: VariantValueType<V[K]>;
     } : Record<string, never>;
 };
-export declare function styled<TElement extends ElementType, V extends VariantConfig>(el: TElement, styles: StyledConfig<V>, options: {
-    enabledResponsiveVariants: true;
-}): React.ForwardRefExoticComponent<Omit<React.ComponentPropsWithRef<TElement>, keyof V> & VariantProps<V, true> & {
-    as?: ElementType;
-}>;
-export declare function styled<TElement extends ElementType, V extends VariantConfig | undefined = undefined>(el: TElement, styles: StyledConfig<V>): React.ForwardRefExoticComponent<Omit<React.ComponentPropsWithRef<TElement>, V extends VariantConfig ? keyof V : never> & VariantProps<V, false> & {
-    as?: ElementType;
-}>;
+type DefaultElementProps<TDefaultElement extends ElementType, OwnProps> = OwnProps & {
+    as?: never;
+} & Omit<React.ComponentPropsWithRef<TDefaultElement>, keyof OwnProps | 'as'>;
+export interface PolymorphicComponent<TDefaultElement extends ElementType, OwnProps> {
+    (props: DefaultElementProps<TDefaultElement, OwnProps>): React.ReactElement | null;
+    <TAs extends ElementType = TDefaultElement>(props: OwnProps & {
+        as?: TAs;
+    } & Omit<React.ComponentPropsWithRef<TAs>, keyof OwnProps | 'as'>): React.ReactElement | null;
+    (props: DefaultElementProps<TDefaultElement, OwnProps>): React.ReactElement | null;
+    displayName?: string;
+    __isStyledComponent?: boolean;
+}
+export interface StyledComponent<TDefaultElement extends ElementType, OwnProps> {
+    (props: OwnProps & Omit<React.ComponentPropsWithRef<TDefaultElement>, keyof OwnProps | 'as'>): React.ReactElement | null;
+    displayName?: string;
+    __isStyledComponent?: boolean;
+}
+type PolymorphicElementProps<E extends ElementType, OwnProps> = OwnProps & {
+    as?: E;
+} & Omit<React.ComponentPropsWithRef<E>, keyof OwnProps | 'as'>;
+/**
+ * Extract the props a styled component accepts, optionally for a specific
+ * `as` element. `React.ComponentProps<typeof Box>` only describes the default
+ * element (with `as` unusable); use this to retarget or to build wrappers
+ * that re-expose polymorphism:
+ *
+ * ```tsx
+ * type AnchorBoxProps = StyledComponentProps<typeof Box, 'a'> // href, anchor ref…
+ * ```
+ */
+export type StyledComponentProps<C, TAs extends ElementType = never> = C extends PolymorphicComponent<infer TDefault extends ElementType, infer OwnProps> ? PolymorphicElementProps<[TAs] extends [never] ? TDefault : TAs, OwnProps> : C extends ElementType ? React.ComponentPropsWithRef<[TAs] extends [never] ? C : TAs> : never;
+export declare function styled<TElement extends ElementType, V extends VariantConfig | undefined = undefined>(el: TElement, styles: StyledConfig<V>, options: {
+    enablePolymorphism: false;
+    enableResponsiveVariants: true;
+}): StyledComponent<TElement, VariantProps<V, true>>;
+export declare function styled<TElement extends ElementType, V extends VariantConfig | undefined = undefined>(el: TElement, styles: StyledConfig<V>, options: {
+    enablePolymorphism: false;
+}): StyledComponent<TElement, VariantProps<V, false>>;
+export declare function styled<TElement extends ElementType, V extends VariantConfig | undefined = undefined>(el: TElement, styles: StyledConfig<V>, options: {
+    enableResponsiveVariants: true;
+}): PolymorphicComponent<TElement, VariantProps<V, true>>;
+export declare function styled<TElement extends ElementType, V extends VariantConfig | undefined = undefined>(el: TElement, styles: StyledConfig<V>): PolymorphicComponent<TElement, VariantProps<V, false>>;
 export {};

package/dist/styled.js CHANGED Viewed

@@ -27,15 +27,15 @@ var Theme = ({ children, theme }) => /* @__PURE__ */ jsx("div", {
 var createTheme = (config) => Object.fromEntries(Object.values(config).flatMap((tokens) => Object.entries(tokens).map(([token, value]) => [`--${token}`, value])));
 function styled(el, styles, options) {
 	const variantKeys = Object.keys(styles.variants || {});
-	const enabledResponsiveVariants = options?.enabledResponsiveVariants === true;
+	const enableResponsiveVariants = options?.enableResponsiveVariants === true;
 	const tvFn = tv(styles);
-	const Comp = React.forwardRef((props, ref) => {
-		const additionalStyles = enabledResponsiveVariants ? variantKeys.map((variantKey) => {
+	const Comp = (props) => {
+		const { ref, ...propsWithoutRef } = props;
+		const additionalStyles = enableResponsiveVariants ? variantKeys.map((variantKey) => {
 			const responsiveVariantConfig = props[variantKey];
 			const variantStyles = styles.variants[variantKey];
 			if (typeof responsiveVariantConfig === "object" && responsiveVariantConfig && !Array.isArray(responsiveVariantConfig)) return Object.entries(responsiveVariantConfig).flatMap(([key, val]) => {
-				const valStr = String(val);
-				const styleArr = variantStyles && variantStyles[valStr];
+				const styleArr = variantStyles && variantStyles[String(val)];
 				if (styleArr && Array.isArray(styleArr)) return styleArr.flatMap((cls) => {
 					if (key === "@initial") return cls;
 					return `${key.replace("@", "")}:${cls}`;
@@ -60,7 +60,7 @@ function styled(el, styles, options) {
 			const elementType = el;
 			if (typeof el === "string") {
 				const { className: _, ...restFilteredProps } = filteredProps;
-				const finalClassName = wrapperClasses && propsClassName ? twMerge(wrapperClasses, propsClassName, mergedClassName) : wrapperClasses ? twMerge(wrapperClasses, mergedClassName, propsClassName) : propsClassName ? (() => {
+				const finalClassName = wrapperClasses && propsClassName ? twMerge(mergedClassName, wrapperClasses, propsClassName) : wrapperClasses ? twMerge(mergedClassName, wrapperClasses) : propsClassName ? (() => {
 					if (propsClassName.split(" ").some((cls) => /^data-\[state=[^\]]+\]:/.test(cls))) return twMerge(propsClassName, mergedClassName);
 					else return twMerge(mergedClassName, propsClassName);
 				})() : twMerge(mergedClassName);
@@ -115,8 +115,10 @@ function styled(el, styles, options) {
 			return React.cloneElement(element, cloneProps);
 		}
 		throw Error("Something is wrong");
-	});
+	};
 	Comp.__isStyledComponent = true;
+	const baseName = typeof el === "string" ? el : el.displayName || el.name || "Component";
+	Comp.displayName = baseName.startsWith("styled.") ? baseName : `styled.${baseName}`;
 	return Comp;
 }
 //#endregion

package/dist/styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"styled.js","names":[],"sources":["../src/styled.tsx"],"sourcesContent":["import clsx, { type ClassValue } 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\nexport const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs))\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.ComponentRef<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(\n (props as { as?: ElementType }).as \|\| elementType,\n {\n ...restFilteredProps,\n ref,\n className: finalClassName\n }\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<unknown>\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 = cn(\n existingClass,\n incomingClass,\n mergedClassName\n ).trim()\n\n const cloneProps: any = {\n // ...element.props,\n ...filteredProps,\n as:\n (props as { as?: ElementType }).as \|\|\n (element.props as { as?: ElementType }).as,\n className: finalClassName\n }\n\n // Forward the ref if provided\n if (ref) {\n cloneProps.ref = ref\n }\n\n return React.cloneElement(element, cloneProps)\n }\n\n 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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"}
1	+ {"version":3,"file":"styled.js","names":[],"sources":["../src/styled.tsx"],"sourcesContent":["import clsx, { type ClassValue } from 'clsx'\nimport React, { type ElementType, type 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\nexport const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs))\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 enableResponsiveVariants?: boolean\n enablePolymorphism?: boolean\n}\n\n// Helper to check if responsive variants are enabled\ntype AreResponsiveVariantsEnabled<O> = O extends {\n enableResponsiveVariants: true\n}\n ? true\n : false\n\n// Props derived from a `variants` config\n// If enableResponsiveVariants is true, all variants support responsive values\n// If enableResponsiveVariants 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// Props of the default element. `as` is typed `never` so JSX usage with `as`\n// can only resolve through the generic polymorphic signature — signatures\n// built from this can never accept calls the generic one would reject.\ntype DefaultElementProps<\n TDefaultElement extends ElementType,\n OwnProps\n> = OwnProps & { as?: never } & Omit<\n React.ComponentPropsWithRef<TDefaultElement>,\n keyof OwnProps \| 'as'\n >\n\n// Polymorphic component type: `as` prop narrows accepted props and ref type.\n//\n// The non-generic default-element signature appears twice on purpose. Tooling\n// that inspects call signatures disagrees on which one to read: props-table\n// generation (react-docgen-typescript) reads the FIRST, while type-level\n// inference (React.ComponentProps and friends) reads the LAST. If either\n// tool lands on the generic signature instead, TAs erases to its ElementType\n// constraint and the props collapse to `any` (docgen then also loses every\n// element-specific prop, e.g. Radix's asChild).\nexport interface PolymorphicComponent<\n TDefaultElement extends ElementType,\n OwnProps\n> {\n (\n props: DefaultElementProps<TDefaultElement, OwnProps>\n ): React.ReactElement \| null\n <TAs extends ElementType = TDefaultElement>(\n props: OwnProps & { as?: TAs } & Omit<\n React.ComponentPropsWithRef<TAs>,\n keyof OwnProps \| 'as'\n >\n ): React.ReactElement \| null\n (\n props: DefaultElementProps<TDefaultElement, OwnProps>\n ): React.ReactElement \| null\n displayName?: string\n __isStyledComponent?: boolean\n}\n\n// Non-polymorphic component type: no `as` prop. Single concrete call\n// signature, so React.ComponentProps and react-docgen-typescript both read\n// it directly — no sandwich needed.\nexport interface StyledComponent<\n TDefaultElement extends ElementType,\n OwnProps\n> {\n (\n props: OwnProps &\n Omit<React.ComponentPropsWithRef<TDefaultElement>, keyof OwnProps \| 'as'>\n ): React.ReactElement \| null\n displayName?: string\n __isStyledComponent?: boolean\n}\n\ntype PolymorphicElementProps<E extends ElementType, OwnProps> = OwnProps & {\n as?: E\n} & Omit<React.ComponentPropsWithRef<E>, keyof OwnProps \| 'as'>\n\n/*\n Extract the props a styled component accepts, optionally for a specific\n * `as` element. `React.ComponentProps<typeof Box>` only describes the default\n * element (with `as` unusable); use this to retarget or to build wrappers\n * that re-expose polymorphism:\n \n ```tsx\n * type AnchorBoxProps = StyledComponentProps<typeof Box, 'a'> // href, anchor ref…\n * ```\n /\nexport type StyledComponentProps<C, TAs extends ElementType = never> =\n C extends PolymorphicComponent<\n infer TDefault extends ElementType,\n infer OwnProps\n >\n ? PolymorphicElementProps<[TAs] extends [never] ? TDefault : TAs, OwnProps>\n : C extends ElementType\n ? React.ComponentPropsWithRef<[TAs] extends [never] ? C : TAs>\n : never\n\n// Function overloads for better type inference\n\n// enablePolymorphism: false — no `as` prop\nexport function styled<\n TElement extends ElementType,\n V extends VariantConfig \| undefined = undefined\n>(\n el: TElement,\n styles: StyledConfig<V>,\n options: { enablePolymorphism: false; enableResponsiveVariants: true }\n): StyledComponent<TElement, VariantProps<V, true>>\n\nexport function styled<\n TElement extends ElementType,\n V extends VariantConfig \| undefined = undefined\n>(\n el: TElement,\n styles: StyledConfig<V>,\n options: { enablePolymorphism: false }\n): StyledComponent<TElement, VariantProps<V, false>>\n\n// enablePolymorphism: true (default) — `as` prop available\nexport function styled<\n TElement extends ElementType,\n V extends VariantConfig \| undefined = undefined\n>(\n el: TElement,\n styles: StyledConfig<V>,\n options: { enableResponsiveVariants: true }\n): PolymorphicComponent<TElement, VariantProps<V, true>>\n\nexport function styled<\n TElement extends ElementType,\n V extends VariantConfig \| undefined = undefined\n>(\n el: TElement,\n styles: StyledConfig<V>\n): PolymorphicComponent<TElement, VariantProps<V, false>>\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 enableResponsiveVariants = options?.enableResponsiveVariants === 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 & {\n as?: ElementType\n ref?: React.Ref<React.ComponentRef<TElement>>\n className?: string\n /* @internal wrapper classes passed between nested styled components */\n __wrapperClasses?: string\n }\n\n const Comp = (props: StyledProps) => {\n const { ref, ...propsWithoutRef } = props\n const additionalStyles = enableResponsiveVariants\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]) => {\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 as Record<string, unknown>)\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.className\n // Check for wrapper classes passed from a parent styled component\n const wrapperClasses = props.__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(mergedClassName, wrapperClasses, propsClassName) // wrapper overrides base, user className wins\n : wrapperClasses\n ? twMerge(mergedClassName, wrapperClasses) // wrapper overrides base\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 // 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(mergedClassName, propsClassName)\n }\n return React.createElement(elementType, propsForComponent)\n }\n }\n\n if (React.isValidElement(el)) {\n const element = el as ReactElement<unknown>\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 = cn(\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 { as?: ElementType }).as,\n className: finalClassName\n }\n\n // Forward the ref if provided\n if (ref) {\n cloneProps.ref = ref\n }\n\n return React.cloneElement(element, cloneProps)\n }\n\n throw Error('Something is wrong')\n }\n\n // Mark the component as a styled component so we can detect it later\n ;(Comp as any).__isStyledComponent = true\n\n // Name the component for DevTools and error component stacks — without\n // this every styled component reads as the inner function name, \"Comp\"\n const baseName =\n typeof el === 'string'\n ? el\n : (el as any).displayName \|\| (el as any).name \|\| 'Component'\n Comp.displayName = baseName.startsWith('styled.')\n ? baseName\n : `styled.${baseName}`\n\n return Comp\n}\n"],"mappings":"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"}

package/dist/types/navigatorActions.types.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import React from 'react';
+import type * as React from 'react';
 export type NavigatorActions = {
     onClick?: React.MouseEventHandler<HTMLElement>;
     href?: string;

package/dist/types/polymorphicComponentProp.types.d.ts CHANGED Viewed

@@ -9,51 +9,34 @@
  * If you pass `as="button"` instead, it should not accept `href` and the `ref`
  * should be of type `HTMLButtonElement`.
  *
- *
- * Taken from:
- * https://blog.logrocket.com/build-strongly-typed-polymorphic-components-react-typescript/
- */
-/**
- * A generic that is used to capture the `as` prop value
- */
-type AsProp<C extends React.ElementType> = {
-    as?: C;
-};
-/**
- * A type of the `as` prop, plus any custom defined props.
- */
-type PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);
-/**
- * Adds a typed `as` prop to a list of props.
+ * React 19: ref is a regular prop included in ComponentProps, so we use
+ * ComponentProps directly instead of the old ComponentPropsWithoutRef + manual ref.
  */
-type PolymorphicComponentProp<C extends React.ElementType, Props = Record<string, unknown>> = React.PropsWithChildren<Props & AsProp<C>> & Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;
 /**
  * Type to capture the `ref` prop type from the element type
  * passed into the `as` prop.
  */
 export type PolymorphicRef<C extends React.ElementType> = React.ComponentPropsWithRef<C>['ref'];
 /**
+ * Polymorphic component props that include the `as` prop, element-specific
+ * props (including ref), and any custom props.
+ *
  * Usage example:
  *
  * ```tsx
- * type MyComponentProps<C extends React.ElementType> = PolymorphicComponentPropWithRef<
+ * type MyComponentProps<C extends React.ElementType> = PolymorphicComponentProps<
  *   C,
  *   { myProp: string }
  * >
  *
- * const MyComponent: <C extends React.ElementType = 'span'>(
- *   props: MyComponentProps<C>
- * ) => React.ReactElement | null = React.forwardRef(
- *   <C extends React.ElementType = 'span'>(
- *     { children, as, myProp }: MyComponentProps<C>,
- *     ref?: MyComponentProps<C>['ref']
- *   ) => {
- *     ...
- *   }
- * )
+ * const MyComponent = <C extends React.ElementType = 'span'>(
+ *   { children, as, myProp, ref, ...rest }: MyComponentProps<C>
+ * ) => {
+ *   const Component = as || 'span'
+ *   return <Component ref={ref} {...rest}>{children}</Component>
+ * }
  * ```
  */
-export type PolymorphicComponentPropWithRef<C extends React.ElementType, Props = Record<string, unknown>> = PolymorphicComponentProp<C, Props> & {
-    ref?: PolymorphicRef<C>;
-};
-export {};
+export type PolymorphicComponentProps<C extends React.ElementType, Props = Record<string, unknown>> = React.PropsWithChildren<Props & {
+    as?: C;
+}> & Omit<React.ComponentProps<C>, keyof Props | 'as'>;

package/dist/utilities/css-wrapper/CSSWrapper.d.ts CHANGED Viewed

@@ -3,8 +3,8 @@ type CssWrapperProps = {
     className?: string;
     children: React.ReactNode;
 };
-export declare const CSSWrapper: {
-    ({ className, children }: CssWrapperProps): React.ReactElement<unknown>;
-    displayName: string;
-};
+export declare function CSSWrapper({ className, children }: CssWrapperProps): React.ReactElement<unknown>;
+export declare namespace CSSWrapper {
+    var displayName: string;
+}
 export {};

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

	@@ -1 +1 @@
1	- {"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<unknown> =>\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,cAAc,EACzB,WACA,eAEA,YACE,oBAAC,OAAD;CAAgB;CAAY;~~CAAe~~,CAAA,~~GAK3C~~,oBAAA,UAAA,EAAG,~~UAAY~~,CAAA;~~AAGnB~~,WAAW,cAAc"}
1	+ {"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<unknown> =>\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,cAAc,EACzB,WACA,eAEA,YACE,oBAAC,OAAD;CAAgB;CAAY;AAAc,CAAA,IAK1C,oBAAA,UAAA,EAAG,SAAW,CAAA;AAGlB,WAAW,cAAc"}

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

	@@ -1 +1 @@
1	- {"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,gBACX,UACS;~~AACC~~,~~OACR~~,~~gBAAgB~~"}
1	+ {"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,gBACX,UACS;CAET,MAAE,eAAe;AACnB"}

package/dist/utilities/hooks/useCallbackRef.js CHANGED Viewed

@@ -8,8 +8,12 @@ var useCallbackRef = () => {
 };
 var useCallbackRefState = () => {
 	const [elRef, setElRef] = React$1.useState(null);
+	const hasElement = React$1.useRef(false);
 	return [elRef, React$1.useCallback((el) => {
-		if (el) setElRef((prev) => prev === el ? prev : el);
+		if (el && !hasElement.current) {
+			hasElement.current = true;
+			setElRef(el);
+		}
 	}, [])];
 };
 //#endregion

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

	@@ -1 +1 @@
1	- {"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((prev)~~ => (prev === el ? prev : el))\n }, [])\n\n return [elRef, setElRefCallback]\n}\n"],"mappings":";;AAEA,IAAa,uBAGH;CACR,MAAM,QAAQ,QAAM,OAA2B,~~KAAK~~;~~AAMpD~~,~~QAAO~~,CAAC,OAJiB,QAAM,aAAa,OAAO;~~AACjD~~,~~MAAI~~,~~GAAI~~,~~OAAM~~,UAAU;~~IACvB~~,~~EAAE~~,CAAC,~~CAE0B;;AAGlC~~,IAAa,4BAGH;CACR,MAAM,CAAC,OAAO,YAAY,QAAM,SAA6B,KAAK;~~AAMlE~~,~~QAAO~~,CAAC,~~OAJiB~~,QAAM,aAAa,OAAO;~~AACjD~~,~~MAAI~~,~~GAAI~~,~~WAAU~~,~~SAAU~~,SAAS,~~KAAK~~,~~OAAO,GAAI~~;~~IACpD~~,EAAE,CAAC,~~CAE0B~~"}
1	+ {"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 const hasElement = React.useRef(false)\n\n const setElRefCallback = React.useCallback((el) => {\n // Commit the attached node to state exactly once — the first time one\n // becomes available — and never again. Under React 19 concurrent rendering\n // with heavy CPU contention, renders get interrupted and re-run, so the DOM\n // node attached via the callback ref churns: React commits and replaces the\n // node, firing this callback with a fresh identity each time. The previous\n // `prev === el ? prev : el` guard couldn't catch that — a new identity is\n // never `=== prev` — so every churn scheduled another render, which churned\n // the node again: an unbounded \"Maximum update depth exceeded\" loop.\n //\n // A one-shot setState makes the returned element reference stable and the\n // loop structurally impossible (later invocations are no-ops). All consumers\n // attach this to a single, always-mounted element, so the first node is the\n // node — there is no element swap to miss.\n if (el && !hasElement.current) {\n hasElement.current = true\n setElRef(el)\n }\n }, [])\n\n return [elRef, setElRefCallback]\n}\n"],"mappings":";;AAEA,IAAa,uBAGH;CACR,MAAM,QAAQ,QAAM,OAA2B,IAAI;CAMnD,OAAO,CAAC,OAJiB,QAAM,aAAa,OAAO;EACjD,IAAI,IAAI,MAAM,UAAU;CAC1B,GAAG,CAAC,CAEW,CAAgB;AACjC;AAEA,IAAa,4BAGH;CACR,MAAM,CAAC,OAAO,YAAY,QAAM,SAA6B,IAAI;CACjE,MAAM,aAAa,QAAM,OAAO,KAAK;CAsBrC,OAAO,CAAC,OApBiB,QAAM,aAAa,OAAO;EAcjD,IAAI,MAAM,CAAC,WAAW,SAAS;GAC7B,WAAW,UAAU;GACrB,SAAS,EAAE;EACb;CACF,GAAG,CAAC,CAEW,CAAgB;AACjC"}

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

	@@ -1 +1 @@
1	- {"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 \| undefined>(undefined)\n\n useEffect(() => {\n isMountedRef.current = true\n return () => {\n isMountedRef.current = false\n }\n })\n\n return isMountedRef\n}\n"],"mappings":";;AAEA,IAAa,wBAAwB;CACnC,MAAM,eAAe,OAA4B,KAAA,~~EAAU~~;~~AAE3D~~,~~iBAAgB~~;~~AACd~~,~~eAAa~~,UAAU;~~AACvB~~,~~eAAa~~;~~AACX~~,~~gBAAa~~,UAAU~~;;GAEzB~~;~~AAEF~~,~~QAAO~~"}
1	+ {"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 \| undefined>(undefined)\n\n useEffect(() => {\n isMountedRef.current = true\n return () => {\n isMountedRef.current = false\n }\n })\n\n return isMountedRef\n}\n"],"mappings":";;AAEA,IAAa,wBAAwB;CACnC,MAAM,eAAe,OAA4B,KAAA,CAAS;CAE1D,gBAAgB;EACd,aAAa,UAAU;EACvB,aAAa;GACX,aAAa,UAAU;EACzB;CACF,CAAC;CAED,OAAO;AACT"}

package/dist/utilities/hooks/useResizeObserver.d.ts CHANGED Viewed

@@ -1,8 +1,8 @@
-type TUseResizeObserverOptions = {
+type UseResizeObserverOptions = {
     elements: (HTMLElement | undefined | null)[];
     onResize: (entries: ResizeObserverEntry[]) => void;
     delay?: number;
 };
-type TUseResizeObserverOutput = ResizeObserver | null;
-export declare const useResizeObserver: ({ delay, elements, onResize }: TUseResizeObserverOptions) => TUseResizeObserverOutput;
+type UseResizeObserverOutput = ResizeObserver | null;
+export declare const useResizeObserver: ({ delay, elements, onResize }: UseResizeObserverOptions) => UseResizeObserverOutput;
 export {};

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

	@@ -1 +1 @@
1	- {"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 // Keep the latest `onResize` in a ref so the observer is only recreated when\n // `delay` changes. Otherwise a callback whose identity changes on render (e.g.\n // `useSize`'s `handleResize`, which depends on `element`) would recreate and\n // re-subscribe the observer, and `ResizeObserver` fires its initial callback\n // on every `observe()` — a measure → setState → re-render → re-subscribe loop\n // that surfaces as \"Maximum update depth exceeded\".\n const onResizeRef = React.useRef(onResize)\n React.useLayoutEffect(() => {\n onResizeRef.current = onResize\n })\n\n const observer = React.useMemo(\n () =>\n createResizeObserver(\n debounce(delay, (entries: ResizeObserverEntry[]) =>\n onResizeRef.current(entries)\n )\n ),\n [delay]\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,wBACJ,aACG;~~AACH~~,~~KAAI~~;~~AACF~~,~~SAAO~~,IAAI,eAAe,~~SAAS~~;~~SAC7B~~;~~AACN~~,~~SAAO;;;AAIX~~,IAAa,qBAAqB,EAChC,QAAQ,KACR,UACA,~~eACyD~~;~~CAOzD~~,MAAM,cAAc,QAAM,OAAO,~~SAAS~~;~~AAC1C~~,~~SAAM~~,sBAAsB;~~AAC1B~~,~~cAAY~~,UAAU;~~GACtB~~;~~CAEF~~,MAAM,WAAW,QAAM,cAEnB,qBACE,SAAS,QAAQ,YACf,YAAY,QAAQ,~~QAAQ~~,CAC7B,CACF,~~EACH~~,CAAC,~~MAAM~~,CACR;~~AAED~~,~~SAAM~~,gBAAgB;~~AACpB~~,~~WAAS~~,SAAS,YAAY;~~AAC5B~~,~~OAAI~~,~~QACF~~,~~WAAU~~,QAAQ,~~QAAQ~~;~~IAE5B~~;~~AAEF~~,~~eAAa~~;~~AACX~~,~~YAAS~~,SAAS,YAAY,WAAW,UAAU,UAAU,~~QAAQ~~,CAAC~~;;IAEvE~~,CAAC,UAAU,~~SAAS~~,CAAC;~~AAExB~~,~~QAAO~~"}
1	+ {"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 UseResizeObserverOptions = {\n elements: (HTMLElement \| undefined \| null)[]\n onResize: (entries: ResizeObserverEntry[]) => void\n delay?: number\n}\n\ntype UseResizeObserverOutput = 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}: UseResizeObserverOptions): UseResizeObserverOutput => {\n // Keep the latest `onResize` in a ref so the observer is only recreated when\n // `delay` changes. Otherwise a callback whose identity changes on render (e.g.\n // `useSize`'s `handleResize`, which depends on `element`) would recreate and\n // re-subscribe the observer, and `ResizeObserver` fires its initial callback\n // on every `observe()` — a measure → setState → re-render → re-subscribe loop\n // that surfaces as \"Maximum update depth exceeded\".\n const onResizeRef = React.useRef(onResize)\n React.useLayoutEffect(() => {\n onResizeRef.current = onResize\n })\n\n const observer = React.useMemo(\n () =>\n createResizeObserver(\n debounce(delay, (entries: ResizeObserverEntry[]) =>\n onResizeRef.current(entries)\n )\n ),\n [delay]\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,wBACJ,aACG;CACH,IAAI;EACF,OAAO,IAAI,eAAe,QAAQ;CACpC,QAAQ;EACN,OAAO;CACT;AACF;AAEA,IAAa,qBAAqB,EAChC,QAAQ,KACR,UACA,eACuD;CAOvD,MAAM,cAAc,QAAM,OAAO,QAAQ;CACzC,QAAM,sBAAsB;EAC1B,YAAY,UAAU;CACxB,CAAC;CAED,MAAM,WAAW,QAAM,cAEnB,qBACE,SAAS,QAAQ,YACf,YAAY,QAAQ,OAAO,CAC7B,CACF,GACF,CAAC,KAAK,CACR;CAEA,QAAM,gBAAgB;EACpB,SAAS,SAAS,YAAY;GAC5B,IAAI,SACF,UAAU,QAAQ,OAAO;EAE7B,CAAC;EAED,aAAa;GACX,SAAS,SAAS,YAAY,WAAW,UAAU,UAAU,OAAO,CAAC;EACvE;CACF,GAAG,CAAC,UAAU,QAAQ,CAAC;CAEvB,OAAO;AACT"}

package/dist/utilities/hooks/useScrollPosition.d.ts CHANGED Viewed

@@ -1,11 +1,11 @@
-type TUseScrollPositionOptions = {
+type UseScrollPositionOptions = {
     element?: HTMLElement | null;
     delay?: number;
     delayMethod?: 'throttle' | 'debounce';
 };
-type TUseScrollPositionOutput = {
+type UseScrollPositionOutput = {
     left: number;
     top: number;
 };
-export declare const useScrollPosition: ({ element, delay, delayMethod }: TUseScrollPositionOptions) => TUseScrollPositionOutput;
+export declare const useScrollPosition: ({ element, delay, delayMethod }: UseScrollPositionOptions) => UseScrollPositionOutput;
 export {};

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

	@@ -1 +1 @@
1	- {"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((prev) =>\n prev.left === element.scrollLeft && prev.top === element.scrollTop\n ? prev\n : { left: element.scrollLeft, top: element.scrollTop }\n )\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,qBAAqB,EAChC,SACA,QAAQ,KACR,cAAc,~~iBAC2C~~;~~CACzD~~,MAAM,CAAC,gBAAgB,qBAAqB,SAAS;EAAE,MAAM;EAAG,KAAK;~~EAAG~~,CAAC;~~CAEzE~~,MAAM,gBAAgB,cACb,gBAAgB,aAAa,WAAW,UAC/C,CAAC,~~YAAY~~,CACd;~~AAED~~,~~iBAAgB~~;~~AACd~~,~~MAAI~~,CAAC,~~QAAS~~;EAEd,MAAM,eAAe,cAAc,aAAa;~~AAC9C~~,~~sBAAmB~~,SACjB,KAAK,SAAS,QAAQ,cAAc,KAAK,QAAQ,QAAQ,YACrD,OACA;IAAE,MAAM,QAAQ;IAAY,KAAK,QAAQ;~~IAAW~~,CACzD;~~IACD~~;~~AAEF~~,~~UAAQ~~,iBAAiB,UAAU,~~aAAa~~;~~AAEhD~~,~~eAAa~~;~~AACX~~,~~WAAQ~~,oBAAoB,UAAU,~~aAAa;;IAEpD~~;EAAC;EAAS;EAAe;~~EAAM~~,CAAC;~~AAEnC~~,~~QAAO~~"}
1	+ {"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 UseScrollPositionOptions = {\n element?: HTMLElement \| null\n delay?: number\n delayMethod?: 'throttle' \| 'debounce'\n}\n\ntype UseScrollPositionOutput = {\n left: number\n top: number\n}\n\nexport const useScrollPosition = ({\n element,\n delay = 500,\n delayMethod = 'throttle'\n}: UseScrollPositionOptions): UseScrollPositionOutput => {\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((prev) =>\n prev.left === element.scrollLeft && prev.top === element.scrollTop\n ? prev\n : { left: element.scrollLeft, top: element.scrollTop }\n )\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,qBAAqB,EAChC,SACA,QAAQ,KACR,cAAc,iBACyC;CACvD,MAAM,CAAC,gBAAgB,qBAAqB,SAAS;EAAE,MAAM;EAAG,KAAK;CAAE,CAAC;CAExE,MAAM,gBAAgB,cACb,gBAAgB,aAAa,WAAW,UAC/C,CAAC,WAAW,CACd;CAEA,gBAAgB;EACd,IAAI,CAAC,SAAS;EAEd,MAAM,eAAe,cAAc,aAAa;GAC9C,mBAAmB,SACjB,KAAK,SAAS,QAAQ,cAAc,KAAK,QAAQ,QAAQ,YACrD,OACA;IAAE,MAAM,QAAQ;IAAY,KAAK,QAAQ;GAAU,CACzD;EACF,CAAC;EAED,QAAQ,iBAAiB,UAAU,YAAY;EAE/C,aAAa;GACX,QAAQ,oBAAoB,UAAU,YAAY;EACpD;CACF,GAAG;EAAC;EAAS;EAAe;CAAK,CAAC;CAElC,OAAO;AACT"}

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

	@@ -1 +1 @@
1	- {"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 const width = element?.clientWidth\n const height = element?.clientHeight\n setSize((prev) =>\n prev.width === width && prev.height === height ? prev : { width, height }\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,WAAW,EACtB,SACA,QAAQ,UAIE;CACV,MAAM,CAAC,MAAM,WAAW,SAAe;EACrC,OAAO,KAAA;EACP,QAAQ,KAAA;~~EACT~~,CAAC;~~CAEF~~,MAAM,eAAe,kBAAkB;EACrC,MAAM,QAAQ,SAAS;EACvB,MAAM,SAAS,SAAS;~~AACxB~~,~~WAAS~~,SACP,KAAK,UAAU,SAAS,KAAK,WAAW,SAAS,OAAO;GAAE;GAAO;~~GAAQ~~,CAC1E;~~IACA~~,CAAC,~~QAAQ~~,CAAC;~~AAIb~~,~~mBAAkB~~;EAChB;EACU,UAJK,cAAc,CAAC,~~QAAQ~~,~~EAAE~~,CAAC,~~QAAQ~~,~~CAAC~~;~~EAKlD~~,UAAU;~~EACX~~,CAAC;~~AAEF~~,~~QAAO~~"}
1	+ {"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 const width = element?.clientWidth\n const height = element?.clientHeight\n setSize((prev) =>\n prev.width === width && prev.height === height ? prev : { width, height }\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,WAAW,EACtB,SACA,QAAQ,UAIE;CACV,MAAM,CAAC,MAAM,WAAW,SAAe;EACrC,OAAO,KAAA;EACP,QAAQ,KAAA;CACV,CAAC;CAED,MAAM,eAAe,kBAAkB;EACrC,MAAM,QAAQ,SAAS;EACvB,MAAM,SAAS,SAAS;EACxB,SAAS,SACP,KAAK,UAAU,SAAS,KAAK,WAAW,SAAS,OAAO;GAAE;GAAO;EAAO,CAC1E;CACF,GAAG,CAAC,OAAO,CAAC;CAIZ,kBAAkB;EAChB;EACU,UAJK,cAAc,CAAC,OAAO,GAAG,CAAC,OAAO,CAItC;EACV,UAAU;CACZ,CAAC;CAED,OAAO;AACT"}

package/dist/utilities/hooks/useWindowScrollPosition.d.ts CHANGED Viewed

@@ -1,10 +1,10 @@
-type TUseWindowScrollPositionOptions = {
+type UseWindowScrollPositionOptions = {
     delay?: number;
     delayMethod?: 'throttle' | 'debounce';
 };
-type TUseWindowScrollPositionOutput = {
+type UseWindowScrollPositionOutput = {
     x: number;
     y: number;
 };
-export declare const useWindowScrollPosition: ({ delay, delayMethod }?: TUseWindowScrollPositionOptions) => TUseWindowScrollPositionOutput;
+export declare const useWindowScrollPosition: ({ delay, delayMethod }?: UseWindowScrollPositionOptions) => UseWindowScrollPositionOutput;
 export {};

package/dist/utilities/hooks/useWindowScrollPosition.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useWindowScrollPosition.js","names":[],"sources":["../../../src/utilities/hooks/useWindowScrollPosition.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react'\nimport { debounce, throttle } from 'throttle-debounce'\n\ntype ~~TUseWindowScrollPositionOptions~~ = {\n delay?: number\n delayMethod?: 'throttle' \| 'debounce'\n}\n\ntype ~~TUseWindowScrollPositionOutput~~ = {\n x: number\n y: number\n}\n\nexport const useWindowScrollPosition = ({\n delay = 500,\n delayMethod = 'throttle'\n}: ~~TUseWindowScrollPositionOptions~~ = {}): ~~TUseWindowScrollPositionOutput~~ => {\n const [scrollPosition, setScrollPosition] = useState({ x: 0, y: 0 })\n\n const delayMethodFn = useMemo(\n () => (delayMethod === 'debounce' ? debounce : throttle),\n [delayMethod]\n )\n\n useEffect(() => {\n const handleScroll = delayMethodFn(delay, () => {\n setScrollPosition({ x: window.scrollX, y: window.scrollY })\n })\n\n window.addEventListener('scroll', handleScroll)\n\n return () => {\n window.removeEventListener('scroll', handleScroll)\n }\n }, [delayMethodFn, delay])\n\n return scrollPosition\n}\n"],"mappings":";;;AAaA,IAAa,2BAA2B,EACtC,QAAQ,KACR,cAAc,~~eACqB~~,~~EAAE~~,~~KAAqC~~;~~CAC1E~~,MAAM,CAAC,gBAAgB,qBAAqB,SAAS;EAAE,GAAG;EAAG,GAAG;~~EAAG~~,CAAC;~~CAEpE~~,MAAM,gBAAgB,cACb,gBAAgB,aAAa,WAAW,UAC/C,CAAC,~~YAAY~~,CACd;~~AAED~~,~~iBAAgB~~;EACd,MAAM,eAAe,cAAc,aAAa;~~AAC9C~~,~~qBAAkB~~;IAAE,GAAG,OAAO;IAAS,GAAG,OAAO;~~IAAS~~,CAAC;~~IAC3D~~;~~AAEF~~,~~SAAO~~,iBAAiB,UAAU,~~aAAa~~;~~AAE/C~~,~~eAAa~~;~~AACX~~,~~UAAO~~,oBAAoB,UAAU,~~aAAa;;IAEnD~~,CAAC,eAAe,~~MAAM~~,CAAC;~~AAE1B~~,~~QAAO~~"}
1	+ {"version":3,"file":"useWindowScrollPosition.js","names":[],"sources":["../../../src/utilities/hooks/useWindowScrollPosition.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react'\nimport { debounce, throttle } from 'throttle-debounce'\n\ntype UseWindowScrollPositionOptions = {\n delay?: number\n delayMethod?: 'throttle' \| 'debounce'\n}\n\ntype UseWindowScrollPositionOutput = {\n x: number\n y: number\n}\n\nexport const useWindowScrollPosition = ({\n delay = 500,\n delayMethod = 'throttle'\n}: UseWindowScrollPositionOptions = {}): UseWindowScrollPositionOutput => {\n const [scrollPosition, setScrollPosition] = useState({ x: 0, y: 0 })\n\n const delayMethodFn = useMemo(\n () => (delayMethod === 'debounce' ? debounce : throttle),\n [delayMethod]\n )\n\n useEffect(() => {\n const handleScroll = delayMethodFn(delay, () => {\n setScrollPosition({ x: window.scrollX, y: window.scrollY })\n })\n\n window.addEventListener('scroll', handleScroll)\n\n return () => {\n window.removeEventListener('scroll', handleScroll)\n }\n }, [delayMethodFn, delay])\n\n return scrollPosition\n}\n"],"mappings":";;;AAaA,IAAa,2BAA2B,EACtC,QAAQ,KACR,cAAc,eACoB,CAAC,MAAqC;CACxE,MAAM,CAAC,gBAAgB,qBAAqB,SAAS;EAAE,GAAG;EAAG,GAAG;CAAE,CAAC;CAEnE,MAAM,gBAAgB,cACb,gBAAgB,aAAa,WAAW,UAC/C,CAAC,WAAW,CACd;CAEA,gBAAgB;EACd,MAAM,eAAe,cAAc,aAAa;GAC9C,kBAAkB;IAAE,GAAG,OAAO;IAAS,GAAG,OAAO;GAAQ,CAAC;EAC5D,CAAC;EAED,OAAO,iBAAiB,UAAU,YAAY;EAE9C,aAAa;GACX,OAAO,oBAAoB,UAAU,YAAY;EACnD;CACF,GAAG,CAAC,eAAe,KAAK,CAAC;CAEzB,OAAO;AACT"}

package/dist/utilities/optional-tooltip-wrapper/OptionalTooltipWrapper.d.ts CHANGED Viewed

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { Tooltip } from '../../components/tooltip/Tooltip';
-export type TOptionalTooltipWrapperProps = {
+export type OptionalTooltipWrapperProps = {
     hasTooltip?: boolean;
     label?: React.ReactNode;
     tooltipSide?: React.ComponentProps<typeof Tooltip.Content>['side'];
 };
-export declare const OptionalTooltipWrapper: {
-    ({ hasTooltip, label, tooltipSide, children }: React.PropsWithChildren<TOptionalTooltipWrapperProps>): React.JSX.Element;
-    displayName: string;
-};
+export declare function OptionalTooltipWrapper({ hasTooltip, label, tooltipSide, children }: React.PropsWithChildren<OptionalTooltipWrapperProps>): React.JSX.Element;
+export declare namespace OptionalTooltipWrapper {
+    var displayName: string;
+}