@mks2508/mks-ui 0.2.1 → 0.3.1

package/dist/react-ui/hooks/Animation/UseAutoHeight.js

@@ -1,6 +1,6 @@
 'use client';
 
-import * as React from "react";
+import * as React$1 from "react";
 
 //#region src/react-ui/hooks/Animation/UseAutoHeight.tsx
 /**
@@ -21,10 +21,10 @@ function useAutoHeight(deps = [], options = {
 	includeParentBox: true,
 	includeSelfBox: false
 }) {
-	const ref = React.useRef(null);
-	const roRef = React.useRef(null);
-	const [height, setHeight] = React.useState(0);
-	const measure = React.useCallback(() => {
+	const ref = React$1.useRef(null);
+	const roRef = React$1.useRef(null);
+	const [height, setHeight] = React$1.useState(0);
+	const measure = React$1.useCallback(() => {
 		const el = ref.current;
 		if (!el) return 0;
 		const base = el.getBoundingClientRect().height || 0;
@@ -44,7 +44,7 @@ function useAutoHeight(deps = [], options = {
 		const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
 		return Math.ceil((base + extra) * dpr) / dpr;
 	}, [options.includeParentBox, options.includeSelfBox]);
-	React.useLayoutEffect(() => {
+	React$1.useLayoutEffect(() => {
 		const el = ref.current;
 		if (!el) return;
 		setHeight(measure());
@@ -64,7 +64,7 @@ function useAutoHeight(deps = [], options = {
 			roRef.current = null;
 		};
 	}, deps);
-	React.useLayoutEffect(() => {
+	React$1.useLayoutEffect(() => {
 		if (height === 0) {
 			const next = measure();
 			if (next !== 0) setHeight(next);

package/dist/react-ui/hooks/DOM/UseIsInView.js

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React$1 from "react";
 import { useInView } from "motion/react";
 
 //#region src/react-ui/hooks/DOM/UseIsInView.tsx
@@ -17,8 +17,8 @@ import { useInView } from "motion/react";
 */
 function useIsInView(ref, options = {}) {
 	const { inView, inViewOnce = false, inViewMargin = "0px" } = options;
-	const localRef = React.useRef(null);
-	React.useImperativeHandle(ref, () => localRef.current);
+	const localRef = React$1.useRef(null);
+	React$1.useImperativeHandle(ref, () => localRef.current);
 	const inViewResult = useInView(localRef, {
 		once: inViewOnce,
 		margin: inViewMargin

package/dist/react-ui/hooks/Formatting/UseListFormat.d.ts

@@ -0,0 +1,49 @@
+/** Intl.ListFormat conjunction/disjunction/unit type */
+export type ListFormatType = 'conjunction' | 'disjunction' | 'unit';
+/** Intl.ListFormat style: long, short, or narrow */
+export type ListFormatStyle = 'long' | 'short' | 'narrow';
+/** Options for useListFormat hook */
+export interface IUseListFormatOptions {
+    locale?: string;
+    type?: ListFormatType;
+    style?: ListFormatStyle;
+    separator?: string;
+    /** If true, format as if there's one more item (avoids "and" before overflow counter) */
+    hasOverflow?: boolean;
+}
+/** A single part of a formatted list (element or separator) */
+export interface IListPart {
+    type: 'element' | 'literal';
+    value: string;
+    index: number;
+}
+/**
+ * Hook for locale-aware list formatting using Intl.ListFormat.
+ *
+ * Provides parts that can be rendered individually with animations.
+ * Uses the browser's Intl.ListFormat API for proper locale handling.
+ *
+ * @param items - Array of strings to format
+ * @param options - Locale, type, style, separator override, overflow flag
+ * @returns Array of list parts (elements and literals)
+ *
+ * @example
+ * ```tsx
+ * // Automatic locale detection
+ * const parts = useListFormat(['Apple', 'Banana', 'Cherry']);
+ * // en: [{ type: 'element', value: 'Apple' }, { type: 'literal', value: ', ' }, ...]
+ *
+ * // Spanish
+ * const parts = useListFormat(['Apple', 'Banana'], { locale: 'es' });
+ *
+ * // Disjunction ("or")
+ * const parts = useListFormat(['A', 'B', 'C'], { type: 'disjunction' });
+ * // en: "A, B, or C"
+ *
+ * // Manual separator override
+ * const parts = useListFormat(['A', 'B', 'C'], { separator: ' | ' });
+ * // "A | B | C"
+ * ```
+ */
+export declare function useListFormat(items: string[], options?: IUseListFormatOptions): IListPart[];
+//# sourceMappingURL=UseListFormat.d.ts.map

package/dist/react-ui/hooks/Formatting/UseListFormat.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UseListFormat.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/hooks/Formatting/UseListFormat.ts"],"names":[],"mappings":"AAEA,wDAAwD;AACxD,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG,aAAa,GAAG,MAAM,CAAC;AAEpE,oDAAoD;AACpD,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE1D,qCAAqC;AACrC,MAAM,WAAW,qBAAqB;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yFAAyF;IACzF,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,+DAA+D;AAC/D,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,SAAS,GAAG,SAAS,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AASD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,aAAa,CAC3B,KAAK,EAAE,MAAM,EAAE,EACf,OAAO,GAAE,qBAA0B,GAClC,SAAS,EAAE,CAsEb"}

package/dist/react-ui/hooks/Formatting/UseListFormat.js

@@ -0,0 +1,105 @@
+import { useMemo } from "react";
+
+//#region src/react-ui/hooks/Formatting/UseListFormat.ts
+const getDefaultLocale = () => {
+	if (typeof navigator !== "undefined" && navigator.language) return navigator.language;
+	return "en";
+};
+/**
+* Hook for locale-aware list formatting using Intl.ListFormat.
+*
+* Provides parts that can be rendered individually with animations.
+* Uses the browser's Intl.ListFormat API for proper locale handling.
+*
+* @param items - Array of strings to format
+* @param options - Locale, type, style, separator override, overflow flag
+* @returns Array of list parts (elements and literals)
+*
+* @example
+* ```tsx
+* // Automatic locale detection
+* const parts = useListFormat(['Apple', 'Banana', 'Cherry']);
+* // en: [{ type: 'element', value: 'Apple' }, { type: 'literal', value: ', ' }, ...]
+*
+* // Spanish
+* const parts = useListFormat(['Apple', 'Banana'], { locale: 'es' });
+*
+* // Disjunction ("or")
+* const parts = useListFormat(['A', 'B', 'C'], { type: 'disjunction' });
+* // en: "A, B, or C"
+*
+* // Manual separator override
+* const parts = useListFormat(['A', 'B', 'C'], { separator: ' | ' });
+* // "A | B | C"
+* ```
+*/
+function useListFormat(items, options = {}) {
+	const { locale, type = "conjunction", style = "long", separator, hasOverflow } = options;
+	return useMemo(() => {
+		if (items.length === 0) return [];
+		if (separator !== void 0) {
+			const parts = [];
+			items.forEach((item, i) => {
+				parts.push({
+					type: "element",
+					value: item,
+					index: i
+				});
+				if (i < items.length - 1) parts.push({
+					type: "literal",
+					value: separator,
+					index: i
+				});
+			});
+			return parts;
+		}
+		const resolvedLocale = locale ?? getDefaultLocale();
+		try {
+			const formatter = new Intl.ListFormat(resolvedLocale, {
+				type,
+				style
+			});
+			const itemsToFormat = hasOverflow && items.length > 1 ? [...items, ""] : items;
+			const formatted = formatter.formatToParts(itemsToFormat);
+			const partsToProcess = hasOverflow ? formatted.slice(0, -2) : formatted;
+			let elementIndex = 0;
+			return partsToProcess.map((part) => {
+				if (part.type === "element") return {
+					type: "element",
+					value: part.value,
+					index: elementIndex++
+				};
+				return {
+					type: "literal",
+					value: part.value,
+					index: Math.max(0, elementIndex - 1)
+				};
+			});
+		} catch {
+			const parts = [];
+			items.forEach((item, i) => {
+				parts.push({
+					type: "element",
+					value: item,
+					index: i
+				});
+				if (i < items.length - 1) parts.push({
+					type: "literal",
+					value: ", ",
+					index: i
+				});
+			});
+			return parts;
+		}
+	}, [
+		items,
+		locale,
+		type,
+		style,
+		separator,
+		hasOverflow
+	]);
+}
+
+//#endregion
+export { useListFormat };

package/dist/react-ui/hooks/State/UseControlledState.js

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React$1 from "react";
 
 //#region src/react-ui/hooks/State/UseControlledState.tsx
 /**
@@ -20,11 +20,11 @@ import * as React from "react";
 */
 function useControlledState(props) {
 	const { value, defaultValue, onChange } = props;
-	const [state, setInternalState] = React.useState(value !== void 0 ? value : defaultValue);
-	React.useEffect(() => {
+	const [state, setInternalState] = React$1.useState(value !== void 0 ? value : defaultValue);
+	React$1.useEffect(() => {
 		if (value !== void 0) setInternalState(value);
 	}, [value]);
-	return [state, React.useCallback((next, ...args) => {
+	return [state, React$1.useCallback((next, ...args) => {
 		setInternalState(next);
 		onChange?.(next, ...args);
 	}, [onChange])];

package/dist/react-ui/hooks/State/UseDataState.js

@@ -1,6 +1,6 @@
 'use client';
 
-import * as React from "react";
+import * as React$1 from "react";
 
 //#region src/react-ui/hooks/State/UseDataState.tsx
 /**
@@ -31,8 +31,8 @@ function parseDatasetValue(value) {
 * ```
 */
 function useDataState(key, forwardedRef, onChange) {
-	const localRef = React.useRef(null);
-	React.useImperativeHandle(forwardedRef, () => localRef.current);
+	const localRef = React$1.useRef(null);
+	React$1.useImperativeHandle(forwardedRef, () => localRef.current);
 	const getSnapshot = () => {
 		const el = localRef.current;
 		return el ? parseDatasetValue(el.getAttribute(`data-${key}`)) : null;
@@ -52,8 +52,8 @@ function useDataState(key, forwardedRef, onChange) {
 		});
 		return () => observer.disconnect();
 	};
-	const value = React.useSyncExternalStore(subscribe, getSnapshot);
-	React.useEffect(() => {
+	const value = React$1.useSyncExternalStore(subscribe, getSnapshot);
+	React$1.useEffect(() => {
 		if (onChange) onChange(value);
 	}, [value, onChange]);
 	return [value, localRef];

package/dist/react-ui/hooks/index.d.ts

@@ -11,4 +11,6 @@ export { useDataState } from './State/UseDataState';
 export type { DataStateValue } from './State/UseDataState';
 export { useIsInView } from './DOM/UseIsInView';
 export type { IUseIsInViewOptions } from './DOM/UseIsInView';
+export { useListFormat } from './Formatting/UseListFormat';
+export type { IUseListFormatOptions, IListPart, ListFormatType, ListFormatStyle } from './Formatting/UseListFormat';
 //# sourceMappingURL=index.d.ts.map

package/dist/react-ui/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react-ui/hooks/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,YAAY,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAEpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,YAAY,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAExE,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,YAAY,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,YAAY,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react-ui/hooks/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,YAAY,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAEpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,YAAY,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAExE,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,YAAY,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,YAAY,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAE7D,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,YAAY,EAAE,qBAAqB,EAAE,SAAS,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC"}

package/dist/react-ui/hooks/index.js

@@ -2,3 +2,4 @@ import { useAutoHeight } from "./Animation/UseAutoHeight.js";
 import { useIsInView } from "./DOM/UseIsInView.js";
 import { useControlledState } from "./State/UseControlledState.js";
 import { useDataState } from "./State/UseDataState.js";
+import { useListFormat } from "./Formatting/UseListFormat.js";

package/dist/react-ui/index.js

@@ -5,6 +5,23 @@ import { useAutoHeight } from "./hooks/Animation/UseAutoHeight.js";
 import { AutoHeight } from "./primitives/AutoHeight/index.js";
 import { useIsInView } from "./hooks/DOM/UseIsInView.js";
 import { CountingNumber } from "./primitives/CountingNumber/index.js";
+import { ANIMATION_CONFIGS, ANIMATION_DEFAULTS, EASINGS, EFFECTS, PRESETS, RESPONSIVE_CONFIGS, TIMING, TRANSFORMS, getResponsiveDuration, getResponsiveStagger } from "./primitives/waapi/core/animationConstants.js";
+import { useElementRegistry } from "./primitives/waapi/core/useElementRegistry.js";
+import { usePositionCapture } from "./primitives/waapi/core/usePositionCapture.js";
+import { useFLIPAnimation } from "./primitives/waapi/core/useFLIPAnimation.js";
+import { useAnimationOrchestrator } from "./primitives/waapi/core/useAnimationOrchestrator.js";
+import { SlidingNumber } from "./primitives/waapi/SlidingNumber/index.js";
+import { SlidingText } from "./primitives/waapi/SlidingText/index.js";
+import { useReorder } from "./primitives/waapi/Reorder/useReorder.js";
+import { ReorderRoot } from "./primitives/waapi/Reorder/index.js";
+import { useReorderPresence } from "./primitives/waapi/Reorder/useReorderPresence.js";
+import { calculateSeparatorCoordination, shouldShowSeparator } from "./primitives/waapi/Reorder/utils/separatorCoordination.js";
+import { useMorphContext } from "./primitives/waapi/Morph/MorphContext.js";
+import { useFLIPClipPath } from "./primitives/waapi/Morph/techniques/useFLIPClipPath.js";
+import { useCSSGridMorph } from "./primitives/waapi/Morph/techniques/useCSSGridMorph.js";
+import { useViewTransitions } from "./primitives/waapi/Morph/techniques/useViewTransitions.js";
+import { useMorph } from "./primitives/waapi/Morph/useMorph.js";
+import { Morph } from "./primitives/waapi/Morph/index.js";
 import "./primitives/index.js";
 import { getStrictContext } from "./lib/get-strict-context.js";
 import { useControlledState } from "./hooks/State/UseControlledState.js";
@@ -34,7 +51,6 @@ import { Button } from "./ui/Button/index.js";
 import { cardVariants } from "./ui/Card/Card.styles.js";
 import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./ui/Card/index.js";
 import { Input } from "./ui/Input/index.js";
-import { Textarea } from "./ui/Textarea/index.js";
 import { inputGroupAddonVariants, inputGroupButtonVariants } from "./ui/InputGroup/InputGroup.styles.js";
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from "./ui/InputGroup/index.js";
 import { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor } from "./ui/Combobox/index.js";
@@ -46,6 +62,10 @@ import { Separator } from "./ui/Separator/index.js";
 import { fieldVariants } from "./ui/Field/Field.styles.js";
 import { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle } from "./ui/Field/index.js";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from "./ui/Select/index.js";
+import { dataCardStyles, dataCardVariants } from "./ui/DataCard/DataCard.styles.js";
+import { DataCard, DataCardActions, DataCardBracket, DataCardLabel, DataCardToggle, DataCardValue, useDataCard } from "./ui/DataCard/index.js";
+import { useListFormat } from "./hooks/Formatting/UseListFormat.js";
+import { TextFlow } from "./ui/TextFlow/index.js";
 import "./ui/index.js";
 import { MorphingPopover, MorphingPopoverWithTarget } from "./components/MorphingPopover/index.js";
 import "./components/index.js";
@@ -85,4 +105,4 @@ import { XIcon } from "./icons/lucide-animated/x.js";
 import { HugeIcons } from "./icons/index.js";
 import "./lib/index.js";
 
-export { Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionStyles, AccordionTrigger, ActivityIcon, AlertDialog, AlertDialogBackdrop, AlertDialogClose, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPopup, AlertDialogPortal, AlertDialogStyles, AlertDialogTitle, AlertDialogTrigger, ArrowDownToLineIcon, ArrowUpIcon, AutoHeight, Badge, BellElectricIcon, BellIcon, BotIcon, BoxIcon, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Check, Checkbox, CheckboxIndicator, CircleCheckIcon, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, CornerBracket, CountingNumber, DeleteIcon, Dialog, DialogBackdrop, DialogClose, DialogDescription, DialogFooter, DialogHeader, DialogPopup, DialogPortal, DialogTitle, DialogTrigger, DownloadIcon, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Edit2, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Globe, Highlight, HighlightItem, HomeIcon, HugeIcons, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Label, Layers, LayoutPanelTopIcon, ListIcon, Menu, MenuArrow, MenuCheckboxItem, MenuCheckboxItemIndicator, MenuGroup, MenuGroupLabel, MenuHighlight, MenuHighlightItem, MenuItem, MenuPopup, MenuPortal, MenuPositioner, MenuRadioGroup, MenuRadioItem, MenuRadioItemIndicator, MenuSeparator, MenuShortcut, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, MorphingPopover, MorphingPopoverWithTarget, Package, Palette, PlusIcon, Popover, PopoverArrow, PopoverBackdrop, PopoverClose, PopoverDescription, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverTitle, PopoverTrigger, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, RefreshCw, Rocket, Save, SearchIcon, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SettingsIcon, Slot, Switch, SwitchIcon, SwitchThumb, Tabs, TabsHighlight, TabsHighlightItem, TabsList, TabsPanel, TabsPanels, TabsTab, TerminalIcon, Textarea, Tooltip, TooltipArrow, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipProvider, TooltipTrigger, Trash2, TrendingDownIcon, TrendingUpIcon, Type, Upload, XIcon, accordionVariants, badgeVariants, bracketVariants, buttonStateStyles, buttonVariants, cardVariants, checkboxStyles, cn, dialogStyles, fieldVariants, getStrictContext, inputGroupAddonVariants, inputGroupButtonVariants, popoverStyles, progressStyles, switchStyles, tooltipStyles, useAccordionItem, useAlertDialog, useAutoHeight, useCheckbox, useComboboxAnchor, useControlledState, useDataState, useDialog, useHighlight, useIsInView, useMenu, useMenuActiveValue, usePopover, useProgress, useSwitch, useTooltip };
+export { ANIMATION_CONFIGS, ANIMATION_DEFAULTS, Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionStyles, AccordionTrigger, ActivityIcon, AlertDialog, AlertDialogBackdrop, AlertDialogClose, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPopup, AlertDialogPortal, AlertDialogStyles, AlertDialogTitle, AlertDialogTrigger, ArrowDownToLineIcon, ArrowUpIcon, AutoHeight, Badge, BellElectricIcon, BellIcon, BotIcon, BoxIcon, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Check, Checkbox, CheckboxIndicator, CircleCheckIcon, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, CornerBracket, CountingNumber, DataCard, DataCardActions, DataCardBracket, DataCardLabel, DataCardToggle, DataCardValue, DeleteIcon, Dialog, DialogBackdrop, DialogClose, DialogDescription, DialogFooter, DialogHeader, DialogPopup, DialogPortal, DialogTitle, DialogTrigger, DownloadIcon, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EASINGS, EFFECTS, Edit2, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Globe, Highlight, HighlightItem, HomeIcon, HugeIcons, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Label, Layers, LayoutPanelTopIcon, ListIcon, Menu, MenuArrow, MenuCheckboxItem, MenuCheckboxItemIndicator, MenuGroup, MenuGroupLabel, MenuHighlight, MenuHighlightItem, MenuItem, MenuPopup, MenuPortal, MenuPositioner, MenuRadioGroup, MenuRadioItem, MenuRadioItemIndicator, MenuSeparator, MenuShortcut, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Morph, MorphingPopover, MorphingPopoverWithTarget, PRESETS, Package, Palette, PlusIcon, Popover, PopoverArrow, PopoverBackdrop, PopoverClose, PopoverDescription, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverTitle, PopoverTrigger, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, RESPONSIVE_CONFIGS, RefreshCw, ReorderRoot as Reorder, Rocket, Save, SearchIcon, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SettingsIcon, SlidingNumber, SlidingText, Slot, Switch, SwitchIcon, SwitchThumb, TIMING, TRANSFORMS, Tabs, TabsHighlight, TabsHighlightItem, TabsList, TabsPanel, TabsPanels, TabsTab, TerminalIcon, TextFlow, Tooltip, TooltipArrow, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipProvider, TooltipTrigger, Trash2, TrendingDownIcon, TrendingUpIcon, Type, Upload, XIcon, accordionVariants, badgeVariants, bracketVariants, buttonStateStyles, buttonVariants, calculateSeparatorCoordination, cardVariants, checkboxStyles, cn, dataCardStyles, dataCardVariants, dialogStyles, fieldVariants, getResponsiveDuration, getResponsiveStagger, getStrictContext, inputGroupAddonVariants, inputGroupButtonVariants, popoverStyles, progressStyles, shouldShowSeparator, switchStyles, tooltipStyles, useAccordionItem, useAlertDialog, useAnimationOrchestrator, useAutoHeight, useCSSGridMorph, useCheckbox, useComboboxAnchor, useControlledState, useDataCard, useDataState, useDialog, useElementRegistry, useFLIPAnimation, useFLIPClipPath, useHighlight, useIsInView, useListFormat, useMenu, useMenuActiveValue, useMorph, useMorphContext, usePopover, usePositionCapture, useProgress, useReorder, useReorderPresence, useSwitch, useTooltip, useViewTransitions };

package/dist/react-ui/lib/get-strict-context.js

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/react-ui/lib/get-strict-context.tsx
@@ -23,13 +23,13 @@ import { jsx } from "react/jsx-runtime";
 * ```
 */
 function getStrictContext(name) {
-	const Context = React.createContext(void 0);
+	const Context = React$1.createContext(void 0);
 	const Provider = ({ value, children }) => /* @__PURE__ */ jsx(Context.Provider, {
 		value,
 		children
 	});
 	const useSafeContext = () => {
-		const ctx = React.useContext(Context);
+		const ctx = React$1.useContext(Context);
 		if (ctx === void 0) throw new Error(`useContext must be used within ${name ?? "a Provider"}`);
 		return ctx;
 	};

package/dist/react-ui/primitives/CountingNumber/index.js

@@ -1,7 +1,7 @@
 'use client';
 
 import { useIsInView } from "../../hooks/DOM/UseIsInView.js";
-import * as React from "react";
+import * as React$1 from "react";
 import { useMotionValue, useSpring } from "motion/react";
 import { jsx } from "react/jsx-runtime";
 
@@ -38,7 +38,7 @@ function CountingNumber({ ref, number, fromNumber = 0, padStart = false, inView
 	const decimals = typeof decimalPlaces === "number" ? decimalPlaces : numberStr.includes(".") ? numberStr.split(".")[1]?.length ?? 0 : 0;
 	const motionVal = useMotionValue(initiallyStable ? number : fromNumber);
 	const springVal = useSpring(motionVal, transition);
-	React.useEffect(() => {
+	React$1.useEffect(() => {
 		const timeoutId = setTimeout(() => {
 			if (isInView) motionVal.set(number);
 		}, delay);
@@ -49,7 +49,7 @@ function CountingNumber({ ref, number, fromNumber = 0, padStart = false, inView
 		motionVal,
 		delay
 	]);
-	React.useEffect(() => {
+	React$1.useEffect(() => {
 		const unsubscribe = springVal.on("change", (latest) => {
 			if (localRef.current) {
 				let formatted = decimals > 0 ? latest.toFixed(decimals) : Math.round(latest).toString();

package/dist/react-ui/primitives/Highlight/index.js

@@ -1,7 +1,7 @@
 'use client';
 
 import { cn } from "../../lib/utils.js";
-import * as React from "react";
+import * as React$1 from "react";
 import { AnimatePresence, motion } from "motion/react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
@@ -12,7 +12,7 @@ const DEFAULT_BOUNDS_OFFSET = {
 	width: 0,
 	height: 0
 };
-const HighlightContext = React.createContext(void 0);
+const HighlightContext = React$1.createContext(void 0);
 /**
 * Hook to access the Highlight context.
 * Must be used within a Highlight provider.
@@ -20,7 +20,7 @@ const HighlightContext = React.createContext(void 0);
 * @returns The current highlight context
 */
 function useHighlight() {
-	const context = React.useContext(HighlightContext);
+	const context = React$1.useContext(HighlightContext);
 	if (!context) throw new Error("useHighlight must be used within a HighlightProvider");
 	return context;
 }
@@ -49,20 +49,20 @@ function Highlight({ ref, ...props }) {
 		stiffness: 350,
 		damping: 35
 	}, hover = false, click = true, enabled = true, controlledItems, disabled = false, exitDelay = 200, mode = "children" } = props;
-	const localRef = React.useRef(null);
-	React.useImperativeHandle(ref, () => localRef.current);
+	const localRef = React$1.useRef(null);
+	React$1.useImperativeHandle(ref, () => localRef.current);
 	const boundsOffset = props?.boundsOffset ?? DEFAULT_BOUNDS_OFFSET;
 	const boundsOffsetTop = boundsOffset.top ?? 0;
 	const boundsOffsetLeft = boundsOffset.left ?? 0;
 	const boundsOffsetWidth = boundsOffset.width ?? 0;
 	const boundsOffsetHeight = boundsOffset.height ?? 0;
-	const boundsOffsetRef = React.useRef({
+	const boundsOffsetRef = React$1.useRef({
 		top: boundsOffsetTop,
 		left: boundsOffsetLeft,
 		width: boundsOffsetWidth,
 		height: boundsOffsetHeight
 	});
-	React.useEffect(() => {
+	React$1.useEffect(() => {
 		boundsOffsetRef.current = {
 			top: boundsOffsetTop,
 			left: boundsOffsetLeft,
@@ -75,9 +75,9 @@ function Highlight({ ref, ...props }) {
 		boundsOffsetWidth,
 		boundsOffsetHeight
 	]);
-	const [activeValue, setActiveValue] = React.useState(value ?? defaultValue ?? null);
-	const [boundsState, setBoundsState] = React.useState(null);
-	const [activeClassNameState, setActiveClassNameState] = React.useState("");
+	const [activeValue, setActiveValue] = React$1.useState(value ?? defaultValue ?? null);
+	const [boundsState, setBoundsState] = React$1.useState(null);
+	const [activeClassNameState, setActiveClassNameState] = React$1.useState("");
 	const safeSetActiveValue = (id) => {
 		setActiveValue((prev) => {
 			if (prev !== id) {
@@ -87,8 +87,8 @@ function Highlight({ ref, ...props }) {
 			return prev;
 		});
 	};
-	const safeSetBoundsRef = React.useRef(void 0);
-	React.useEffect(() => {
+	const safeSetBoundsRef = React$1.useRef(void 0);
+	React$1.useEffect(() => {
 		safeSetBoundsRef.current = (bounds) => {
 			if (!localRef.current) return;
 			const containerRect = localRef.current.getBoundingClientRect();
@@ -108,15 +108,15 @@ function Highlight({ ref, ...props }) {
 	const safeSetBounds = (bounds) => {
 		safeSetBoundsRef.current?.(bounds);
 	};
-	const clearBounds = React.useCallback(() => {
+	const clearBounds = React$1.useCallback(() => {
 		setBoundsState((prev) => prev === null ? prev : null);
 	}, []);
-	React.useEffect(() => {
+	React$1.useEffect(() => {
 		if (value !== void 0) setActiveValue(value);
 		else if (defaultValue !== void 0) setActiveValue(defaultValue);
 	}, [value, defaultValue]);
-	const id = React.useId();
-	React.useEffect(() => {
+	const id = React$1.useId();
+	React$1.useEffect(() => {
 		if (mode !== "parent") return;
 		const container = localRef.current;
 		if (!container) return;
@@ -195,7 +195,7 @@ function Highlight({ ref, ...props }) {
 			setActiveClassName: setActiveClassNameState,
 			forceUpdateBounds: props?.forceUpdateBounds
 		},
-		children: enabled ? controlledItems ? render(children) : render(React.Children.map(children, (child, index) => /* @__PURE__ */ jsx(HighlightItem, {
+		children: enabled ? controlledItems ? render(children) : render(React$1.Children.map(children, (child, index) => /* @__PURE__ */ jsx(HighlightItem, {
 			className: props?.itemsClassName,
 			children: child
 		}, index))) : children
@@ -223,7 +223,7 @@ function getNonOverridingDataAttributes(element, dataAttributes) {
 * ```
 */
 function HighlightItem({ ref, as, children, id, value, className, style, transition, disabled = false, activeClassName, exitDelay, asChild = false, forceUpdateBounds, ...props }) {
-	const itemId = React.useId();
+	const itemId = React$1.useId();
 	const { activeValue, setActiveValue, mode, setBounds, clearBounds, hover, click, enabled, className: contextClassName, style: contextStyle, transition: contextTransition, id: contextId, disabled: contextDisabled, exitDelay: contextExitDelay, forceUpdateBounds: contextForceUpdateBounds, setActiveClassName } = useHighlight();
 	const Component = as ?? "div";
 	const element = children;
@@ -231,12 +231,12 @@ function HighlightItem({ ref, as, children, id, value, className, style, transit
 	const isActive = activeValue === childValue;
 	const isDisabled = disabled === void 0 ? contextDisabled : disabled;
 	const itemTransition = transition ?? contextTransition;
-	const localRef = React.useRef(null);
-	React.useImperativeHandle(ref, () => localRef.current);
-	const refCallback = React.useCallback((node) => {
+	const localRef = React$1.useRef(null);
+	React$1.useImperativeHandle(ref, () => localRef.current);
+	const refCallback = React$1.useCallback((node) => {
 		localRef.current = node;
 	}, []);
-	React.useEffect(() => {
+	React$1.useEffect(() => {
 		if (mode !== "parent") return;
 		let rafId;
 		let previousBounds = null;
@@ -270,7 +270,7 @@ function HighlightItem({ ref, as, children, id, value, className, style, transit
 		forceUpdateBounds,
 		contextForceUpdateBounds
 	]);
-	if (!React.isValidElement(children)) return children;
+	if (!React$1.isValidElement(children)) return children;
 	const dataAttributes = {
 		"data-active": isActive ? "true" : "false",
 		"aria-selected": isActive,
@@ -292,7 +292,7 @@ function HighlightItem({ ref, as, children, id, value, className, style, transit
 		element.props.onClick?.(e);
 	} } : {};
 	if (asChild) {
-		if (mode === "children") return React.cloneElement(element, {
+		if (mode === "children") return React$1.cloneElement(element, {
 			key: childValue,
 			ref: refCallback,
 			className: cn("relative", element.props.className),
@@ -337,7 +337,7 @@ function HighlightItem({ ref, as, children, id, value, className, style, transit
 			...dataAttributes,
 			children
 		})] }));
-		return React.cloneElement(element, {
+		return React$1.cloneElement(element, {
 			ref: refCallback,
 			...getNonOverridingDataAttributes(element, {
 				...dataAttributes,
@@ -378,7 +378,7 @@ function HighlightItem({ ref, as, children, id, value, className, style, transit
 				},
 				...dataAttributes
 			})
-		}), React.cloneElement(element, {
+		}), React$1.cloneElement(element, {
 			style: {
 				position: "relative",
 				zIndex: 1

package/dist/react-ui/primitives/Slot/index.js

@@ -1,7 +1,7 @@
 'use client';
 
 import { cn } from "../../lib/utils.js";
-import * as React from "react";
+import * as React$1 from "react";
 import { isMotionComponent, motion } from "motion/react";
 import { jsx } from "react/jsx-runtime";
 
@@ -52,8 +52,8 @@ function mergeProps(childProps, slotProps) {
 */
 function Slot({ children, ref, ...props }) {
 	const isAlreadyMotion = typeof children.type === "object" && children.type !== null && isMotionComponent(children.type);
-	const Base = React.useMemo(() => isAlreadyMotion ? children.type : motion.create(children.type), [isAlreadyMotion, children.type]);
-	if (!React.isValidElement(children)) return null;
+	const Base = React$1.useMemo(() => isAlreadyMotion ? children.type : motion.create(children.type), [isAlreadyMotion, children.type]);
+	if (!React$1.isValidElement(children)) return null;
 	const { ref: childRef, ...childProps } = children.props;
 	return /* @__PURE__ */ jsx(Base, {
 		...mergeProps(childProps, props),

package/dist/react-ui/primitives/index.d.ts

@@ -9,4 +9,5 @@ export * from './Slot';
 export * from './Highlight';
 export * from './AutoHeight';
 export * from './CountingNumber';
+export * from './waapi';
 //# sourceMappingURL=index.d.ts.map

package/dist/react-ui/primitives/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react-ui/primitives/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react-ui/primitives/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AAGjC,cAAc,SAAS,CAAC"}

package/dist/react-ui/primitives/index.js

@@ -2,3 +2,21 @@ import { Slot } from "./Slot/index.js";
 import { Highlight, HighlightItem, useHighlight } from "./Highlight/index.js";
 import { AutoHeight } from "./AutoHeight/index.js";
 import { CountingNumber } from "./CountingNumber/index.js";
+import { ANIMATION_CONFIGS, ANIMATION_DEFAULTS, EASINGS, EFFECTS, PRESETS, RESPONSIVE_CONFIGS, TIMING, TRANSFORMS, getResponsiveDuration, getResponsiveStagger } from "./waapi/core/animationConstants.js";
+import { useElementRegistry } from "./waapi/core/useElementRegistry.js";
+import { usePositionCapture } from "./waapi/core/usePositionCapture.js";
+import { useFLIPAnimation } from "./waapi/core/useFLIPAnimation.js";
+import { useAnimationOrchestrator } from "./waapi/core/useAnimationOrchestrator.js";
+import { SlidingNumber } from "./waapi/SlidingNumber/index.js";
+import { SlidingText } from "./waapi/SlidingText/index.js";
+import { useReorder } from "./waapi/Reorder/useReorder.js";
+import { ReorderRoot } from "./waapi/Reorder/index.js";
+import { useReorderPresence } from "./waapi/Reorder/useReorderPresence.js";
+import { calculateSeparatorCoordination, shouldShowSeparator } from "./waapi/Reorder/utils/separatorCoordination.js";
+import { useMorphContext } from "./waapi/Morph/MorphContext.js";
+import { useFLIPClipPath } from "./waapi/Morph/techniques/useFLIPClipPath.js";
+import { useCSSGridMorph } from "./waapi/Morph/techniques/useCSSGridMorph.js";
+import { useViewTransitions } from "./waapi/Morph/techniques/useViewTransitions.js";
+import { useMorph } from "./waapi/Morph/useMorph.js";
+import { Morph } from "./waapi/Morph/index.js";
+import "./waapi/index.js";