@mks2508/mks-ui 0.2.0 → 0.3.1

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

@@ -0,0 +1,308 @@
+'use client';
+
+import { cn } from "../../lib/utils.js";
+import { Highlight, HighlightItem } from "../../primitives/Highlight/index.js";
+import { AutoHeight } from "../../primitives/AutoHeight/index.js";
+import { getStrictContext } from "../../lib/get-strict-context.js";
+import { useControlledState } from "../../hooks/State/UseControlledState.js";
+import { tabsStyles } from "./Tabs.styles.js";
+import * as React$1 from "react";
+import { AnimatePresence, motion } from "motion/react";
+import { jsx } from "react/jsx-runtime";
+import { Tabs } from "@base-ui/react/tabs";
+
+//#region src/react-ui/ui/Tabs/index.tsx
+/**
+* Tabs component -- animated tab navigation built on base-ui Tabs
+* with motion transitions, highlight tracking, auto-height panels,
+* and the v0.2.0 slot system.
+*
+* Provides sub-components for the tab list, individual tabs, panels,
+* animated highlight indicators, and a panels container with two modes:
+* auto-height (ResizeObserver) and layout (Motion layout animation).
+*
+* @module @mks2508/mks-ui/react/ui/Tabs
+*
+* @example
+* ```tsx
+* <Tabs defaultValue="general" slots={{ list: 'flex gap-1 border-b' }}>
+*   <TabsList>
+*     <TabsHighlight className="rounded-md bg-white/10">
+*       <TabsHighlightItem value="general">
+*         <TabsTab value="general">General</TabsTab>
+*       </TabsHighlightItem>
+*       <TabsHighlightItem value="advanced">
+*         <TabsTab value="advanced">Advanced</TabsTab>
+*       </TabsHighlightItem>
+*     </TabsHighlight>
+*   </TabsList>
+*   <TabsPanels>
+*     <TabsPanel value="general">General content</TabsPanel>
+*     <TabsPanel value="advanced">Advanced content</TabsPanel>
+*   </TabsPanels>
+* </Tabs>
+* ```
+*/
+const [TabsProvider, useTabs] = getStrictContext("TabsContext");
+/**
+* Root Tabs component -- provides active tab value context and
+* controlled/uncontrolled state management.
+*
+* @param value - Controlled active tab value
+* @param defaultValue - Uncontrolled initial active tab value
+* @param onValueChange - Callback when active tab changes
+* @param slots - Partial class overrides per slot
+* @param config - Tabs behavior / animation configuration
+*
+* @example
+* ```tsx
+* <Tabs defaultValue="general" slots={{ root: 'w-full' }}>
+*   <TabsList>...</TabsList>
+*   <TabsPanels>...</TabsPanels>
+* </Tabs>
+* ```
+*/
+function Tabs$1({ slots, config, className, ...props }) {
+	const [value, setValue] = useControlledState({
+		value: props.value,
+		defaultValue: props.defaultValue,
+		onChange: props.onValueChange
+	});
+	return /* @__PURE__ */ jsx(TabsProvider, {
+		value: {
+			value,
+			setValue
+		},
+		children: /* @__PURE__ */ jsx(Tabs.Root, {
+			"data-slot": "tabs",
+			className: cn(tabsStyles.root, slots?.root, className),
+			...props,
+			onValueChange: setValue
+		})
+	});
+}
+/**
+* TabsHighlight -- animated background indicator that follows the active tab.
+* Wraps the Highlight primitive with tab-specific defaults (spring transition,
+* no click activation since tabs manage their own active state).
+*
+* @param transition - Motion transition config (default: spring 200/25)
+* @param slots - Partial class overrides per slot
+* @param className - Additional class names
+*
+* @example
+* ```tsx
+* <TabsHighlight className="rounded-md bg-white/10">
+*   <TabsHighlightItem value="tab1">
+*     <TabsTab value="tab1">Tab 1</TabsTab>
+*   </TabsHighlightItem>
+* </TabsHighlight>
+* ```
+*/
+function TabsHighlight({ transition = {
+	type: "spring",
+	stiffness: 200,
+	damping: 25
+}, slots, className, ...props }) {
+	const { value } = useTabs();
+	return /* @__PURE__ */ jsx(Highlight, {
+		"data-slot": "tabs-highlight",
+		controlledItems: true,
+		value,
+		transition,
+		click: false,
+		className: cn(tabsStyles.highlight, slots?.highlight, className),
+		...props
+	});
+}
+/**
+* TabsList -- the container holding tab trigger buttons.
+* Renders a base-ui Tabs.List with the `list` slot classes.
+*
+* @param slots - Partial class overrides per slot
+* @param className - Additional class names
+*
+* @example
+* ```tsx
+* <TabsList className="flex gap-1 border-b border-white/10 pb-1">
+*   <TabsTab value="general">General</TabsTab>
+*   <TabsTab value="advanced">Advanced</TabsTab>
+* </TabsList>
+* ```
+*/
+function TabsList({ slots, className, ...props }) {
+	return /* @__PURE__ */ jsx(Tabs.List, {
+		"data-slot": "tabs-list",
+		className: cn(tabsStyles.list, slots?.list, className),
+		...props
+	});
+}
+/**
+* TabsHighlightItem -- wraps a TabsTab for highlight position tracking.
+* Must be placed inside a TabsHighlight context. The `value` prop should
+* match the corresponding TabsTab value.
+*
+* @param value - Tab value this highlight item corresponds to
+* @param slots - Partial class overrides per slot
+*
+* @example
+* ```tsx
+* <TabsHighlightItem value="general">
+*   <TabsTab value="general">General</TabsTab>
+* </TabsHighlightItem>
+* ```
+*/
+function TabsHighlightItem({ slots, ...props }) {
+	return /* @__PURE__ */ jsx(HighlightItem, {
+		"data-slot": "tabs-highlight-item",
+		...props
+	});
+}
+/**
+* TabsTab -- a single tab trigger button that activates its panel.
+* Renders a base-ui Tabs.Tab with the `tab` slot classes.
+*
+* @param value - The value this tab represents
+* @param slots - Partial class overrides per slot
+* @param className - Additional class names
+*
+* @example
+* ```tsx
+* <TabsTab value="general" className="px-3 py-1.5 text-sm font-medium">
+*   General
+* </TabsTab>
+* ```
+*/
+function TabsTab({ slots, className, ...props }) {
+	return /* @__PURE__ */ jsx(Tabs.Tab, {
+		"data-slot": "tabs-tab",
+		className: cn(tabsStyles.tab, slots?.tab, className),
+		...props
+	});
+}
+/**
+* TabsPanel -- an animated content panel associated with a tab.
+* Uses Motion for blur + opacity enter/exit transitions wrapped in
+* AnimatePresence for smooth unmount animations.
+*
+* @param value - The tab value this panel corresponds to
+* @param keepMounted - Keep the panel in DOM when inactive
+* @param transition - Motion transition config (default: 0.5s easeInOut)
+* @param slots - Partial class overrides per slot
+* @param className - Additional class names
+*
+* @example
+* ```tsx
+* <TabsPanel value="general" className="p-4">
+*   <h2>General Settings</h2>
+*   <p>Configure your preferences here.</p>
+* </TabsPanel>
+* ```
+*/
+function TabsPanel({ value, keepMounted, transition = {
+	duration: .5,
+	ease: "easeInOut"
+}, slots, className, ...props }) {
+	return /* @__PURE__ */ jsx(AnimatePresence, {
+		mode: "wait",
+		children: /* @__PURE__ */ jsx(Tabs.Panel, {
+			render: /* @__PURE__ */ jsx(motion.div, {
+				"data-slot": "tabs-panel",
+				layout: true,
+				layoutDependency: value,
+				initial: {
+					opacity: 0,
+					filter: "blur(4px)"
+				},
+				animate: {
+					opacity: 1,
+					filter: "blur(0px)"
+				},
+				exit: {
+					opacity: 0,
+					filter: "blur(4px)"
+				},
+				transition,
+				className: cn(tabsStyles.panel, slots?.panel, className),
+				...props
+			}),
+			keepMounted,
+			value
+		})
+	});
+}
+/** Default spring transition for the panels container. */
+const defaultPanelsTransition = {
+	type: "spring",
+	stiffness: 200,
+	damping: 30
+};
+/**
+* Type guard to distinguish auto-height mode from layout mode.
+*
+* @param props - TabsPanels props union
+* @returns True if auto-height mode (default)
+*/
+function isAutoMode(props) {
+	return !props.mode || props.mode === "auto-height";
+}
+/**
+* TabsPanels -- container for tab panels with animated height transitions.
+* Supports two modes:
+*
+* - **auto-height** (default): Uses ResizeObserver to animate container
+*   height when panels have different content sizes.
+* - **layout**: Uses Motion layout animation for size transitions,
+*   with overflow hidden.
+*
+* @param mode - Animation mode: 'auto-height' (default) or 'layout'
+* @param transition - Motion transition config
+* @param slots - Partial class overrides per slot
+* @param className - Additional class names
+*
+* @example
+* ```tsx
+* // Auto-height mode (default)
+* <TabsPanels>
+*   <TabsPanel value="short">Short content</TabsPanel>
+*   <TabsPanel value="long">Much longer content with many paragraphs...</TabsPanel>
+* </TabsPanels>
+*
+* // Layout mode
+* <TabsPanels mode="layout" className="rounded-lg">
+*   <TabsPanel value="a">Content A</TabsPanel>
+*   <TabsPanel value="b">Content B</TabsPanel>
+* </TabsPanels>
+* ```
+*/
+function TabsPanels(props) {
+	const { value } = useTabs();
+	if (isAutoMode(props)) {
+		const { children, transition = defaultPanelsTransition, slots, className, mode: _mode, ...autoProps } = props;
+		return /* @__PURE__ */ jsx(AutoHeight, {
+			"data-slot": "tabs-panels",
+			deps: [value],
+			transition,
+			className: cn(tabsStyles.panels, slots?.panels, className),
+			...autoProps,
+			children: /* @__PURE__ */ jsx(React$1.Fragment, { children }, value)
+		});
+	}
+	const { children, style, transition = defaultPanelsTransition, slots, className, mode: _mode, ...layoutProps } = props;
+	return /* @__PURE__ */ jsx(motion.div, {
+		"data-slot": "tabs-panels",
+		layout: "size",
+		layoutDependency: value,
+		transition: { layout: transition },
+		style: {
+			overflow: "hidden",
+			...style
+		},
+		className: cn(tabsStyles.panels, slots?.panels, className),
+		...layoutProps,
+		children: /* @__PURE__ */ jsx(React$1.Fragment, { children }, value)
+	});
+}
+
+//#endregion
+export { Tabs$1 as Tabs, TabsHighlight, TabsHighlightItem, TabsList, TabsPanel, TabsPanels, TabsTab };

package/dist/react-ui/ui/TextFlow/TextFlow.styles.d.ts

@@ -0,0 +1,16 @@
+import { type VariantProps } from 'class-variance-authority';
+import type { StyleSlots } from '../../../core/types';
+/**
+ * Style slots for TextFlow component
+ */
+export type TextFlowSlot = 'root' | 'token' | 'separator' | 'overflow' | 'placeholder';
+/**
+ * Base styles for TextFlow component
+ */
+export declare const textFlowBaseStyles: StyleSlots<TextFlowSlot>;
+/**
+ * CVA variants for TextFlow root container
+ */
+export declare const textFlowVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export type TextFlowVariants = VariantProps<typeof textFlowVariants>;
+//# sourceMappingURL=TextFlow.styles.d.ts.map

package/dist/react-ui/ui/TextFlow/TextFlow.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextFlow.styles.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/TextFlow/TextFlow.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,OAAO,GAAG,WAAW,GAAG,UAAU,GAAG,aAAa,CAAC;AAEvF;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,UAAU,CAAC,YAAY,CAMvD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,oFAW3B,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC"}

package/dist/react-ui/ui/TextFlow/TextFlow.types.d.ts

@@ -0,0 +1,101 @@
+/**
+ * Token individual para TextFlow
+ */
+export interface IToken {
+    /** Identificador único del token */
+    id: string;
+    /** Texto a mostrar */
+    text: string;
+}
+/**
+ * Modo de transición para cambios de texto en separadores
+ */
+export type SeparatorTransitionMode = 'none' | 'fade' | 'slide';
+/**
+ * Tipos de lista para Intl.ListFormat
+ */
+export type ListFormatType = 'conjunction' | 'disjunction' | 'unit';
+/**
+ * Estilos de lista para Intl.ListFormat
+ */
+export type ListFormatStyle = 'long' | 'short' | 'narrow';
+/**
+ * Configuración de separadores entre tokens
+ */
+export interface ISeparatorConfig {
+    /** Texto del separador. Si se omite, usa Intl.ListFormat */
+    value?: string;
+    /** Locale para Intl.ListFormat */
+    locale?: string;
+    /** Tipo de lista para Intl.ListFormat */
+    listType?: ListFormatType;
+    /** Estilo de lista para Intl.ListFormat */
+    listStyle?: ListFormatStyle;
+    /** Modo de transición cuando el texto del separador cambia */
+    transition?: SeparatorTransitionMode;
+    /** Duración de la transición en ms */
+    duration?: number;
+    /** Clase CSS adicional para separadores */
+    className?: string;
+}
+/**
+ * Configuración del indicador de overflow (+N more)
+ */
+export interface IOverflowConfig {
+    /** Prefijo antes del número */
+    prefix?: string;
+    /** Texto después del número */
+    label?: string;
+    /** Separador mostrado antes del overflow */
+    separator?: string;
+    /** Mostrar separador antes del overflow */
+    showSeparator?: boolean;
+    /** Clase CSS adicional para el overflow */
+    className?: string;
+}
+/**
+ * Configuración de animación de texto
+ */
+export interface ITextAnimationConfig {
+    /** Modo de animación del texto */
+    mode?: 'character' | 'word';
+    /** Dirección de entrada del texto */
+    direction?: 'vertical' | 'horizontal';
+    /** Delay entre caracteres/palabras en ms */
+    stagger?: number;
+    /** Duración de animación en ms */
+    duration?: number;
+    /** Habilitar efecto blur durante animación */
+    blur?: boolean;
+    /** Animar cambios de ancho del contenedor */
+    widthAnimation?: boolean;
+}
+/**
+ * Props for TextFlow component
+ *
+ * TextFlow renders an animated list of tokens with locale-aware separators,
+ * smooth FLIP animations, and overflow handling.
+ */
+export interface ITextFlowProps {
+    /** Array de tokens a mostrar */
+    tokens: IToken[];
+    /** Texto placeholder cuando no hay tokens */
+    placeholder?: string;
+    /** Máximo de tokens visibles. El resto se muestra como "+N" */
+    maxVisible?: number;
+    /** Configuración de separadores */
+    separator?: ISeparatorConfig;
+    /** Configuración del indicador de overflow */
+    overflow?: IOverflowConfig;
+    /** Configuración de animación de texto */
+    animation?: ITextAnimationConfig;
+    /** Modo inline para uso en botones/selects */
+    inline?: boolean;
+    /** Clase CSS para el contenedor principal */
+    className?: string;
+    /** Clase CSS para cada token */
+    tokenClassName?: string;
+    /** Clase CSS para el placeholder */
+    placeholderClassName?: string;
+}
+//# sourceMappingURL=TextFlow.types.d.ts.map

package/dist/react-ui/ui/TextFlow/TextFlow.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextFlow.types.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/TextFlow/TextFlow.types.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,WAAW,MAAM;IACrB,oCAAoC;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,sBAAsB;IACtB,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;GAEG;AACH,MAAM,MAAM,uBAAuB,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAEhE;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG,aAAa,GAAG,MAAM,CAAC;AAEpE;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE1D;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,2CAA2C;IAC3C,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,8DAA8D;IAC9D,UAAU,CAAC,EAAE,uBAAuB,CAAC;IACrC,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,+BAA+B;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,kCAAkC;IAClC,IAAI,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IAC5B,qCAAqC;IACrC,SAAS,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACtC,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6CAA6C;IAC7C,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED;;;;;GAKG;AACH,MAAM,WAAW,cAAc;IAC7B,gCAAgC;IAChC,MAAM,EAAE,MAAM,EAAE,CAAC;IAEjB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,+DAA+D;IAC/D,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,mCAAmC;IACnC,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAE7B,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,eAAe,CAAC;IAE3B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,oBAAoB,CAAC;IAEjC,8CAA8C;IAC9C,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,gCAAgC;IAChC,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,oCAAoC;IACpC,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B"}

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { ITextFlowProps, IToken, ISeparatorConfig, IOverflowConfig, ITextAnimationConfig, SeparatorTransitionMode } from './TextFlow.types';
+/**
+ * TextFlow - Locale-aware animated token list component
+ *
+ * Built on the Reorder primitive, provides smooth FLIP animations for token lists
+ * with proper locale-aware separators using Intl.ListFormat.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <TextFlow tokens={tokens} />
+ *
+ * // Spanish multiselect with transition
+ * <TextFlow
+ *   tokens={tokens}
+ *   maxVisible={2}
+ *   inline
+ *   separator={{ locale: 'es', transition: 'fade' }}
+ *   overflow={{ prefix: '+', label: ' más' }}
+ * />
+ * ```
+ */
+export declare const TextFlow: React.FC<ITextFlowProps>;
+export type { ITextFlowProps, IToken, ISeparatorConfig, IOverflowConfig, ITextAnimationConfig, SeparatorTransitionMode, };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/TextFlow/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAIpD,OAAO,KAAK,EACV,cAAc,EACd,MAAM,EACN,gBAAgB,EAChB,eAAe,EACf,oBAAoB,EACpB,uBAAuB,EAGxB,MAAM,kBAAkB,CAAC;AA0B1B;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA0M7C,CAAC;AAIF,YAAY,EACV,cAAc,EACd,MAAM,EACN,gBAAgB,EAChB,eAAe,EACf,oBAAoB,EACpB,uBAAuB,GACxB,CAAC"}

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

@@ -0,0 +1,187 @@
+"use client";
+
+import { cn } from "../../lib/utils.js";
+import { SlidingText } from "../../primitives/waapi/SlidingText/index.js";
+import { ReorderRoot } from "../../primitives/waapi/Reorder/index.js";
+import { useListFormat } from "../../hooks/Formatting/UseListFormat.js";
+import React, { useCallback, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/ui/TextFlow/index.tsx
+const DEFAULT_SEPARATOR = {
+	listType: "conjunction",
+	listStyle: "long",
+	transition: "none",
+	duration: 200
+};
+const DEFAULT_OVERFLOW = {
+	prefix: "+",
+	label: " more",
+	showSeparator: true
+};
+const DEFAULT_ANIMATION = {
+	mode: "character",
+	direction: "vertical",
+	stagger: 15,
+	duration: 200,
+	blur: true,
+	widthAnimation: false
+};
+/**
+* TextFlow - Locale-aware animated token list component
+*
+* Built on the Reorder primitive, provides smooth FLIP animations for token lists
+* with proper locale-aware separators using Intl.ListFormat.
+*
+* @example
+* ```tsx
+* // Basic usage
+* <TextFlow tokens={tokens} />
+*
+* // Spanish multiselect with transition
+* <TextFlow
+*   tokens={tokens}
+*   maxVisible={2}
+*   inline
+*   separator={{ locale: 'es', transition: 'fade' }}
+*   overflow={{ prefix: '+', label: ' más' }}
+* />
+* ```
+*/
+const TextFlow = ({ tokens, placeholder = "No tokens", maxVisible, separator: separatorConfig, overflow: overflowConfig, animation: animationConfig, inline = false, className = "", tokenClassName = "", placeholderClassName = "" }) => {
+	const separator = {
+		...DEFAULT_SEPARATOR,
+		...separatorConfig
+	};
+	const overflow = {
+		...DEFAULT_OVERFLOW,
+		...overflowConfig
+	};
+	const animation = {
+		...DEFAULT_ANIMATION,
+		...animationConfig
+	};
+	const exitingIdsRef = React.useRef(/* @__PURE__ */ new Set());
+	const visibleTokens = useMemo(() => maxVisible ? tokens.slice(0, maxVisible) : tokens, [tokens, maxVisible]);
+	const overflowCount = useMemo(() => maxVisible ? Math.max(0, tokens.length - maxVisible) : 0, [tokens.length, maxVisible]);
+	const listParts = useListFormat(visibleTokens.map((t) => t.text), {
+		locale: separator.locale,
+		type: separator.listType,
+		style: separator.listStyle,
+		separator: separator.value,
+		hasOverflow: overflowCount > 0
+	});
+	const shouldShowSeparator = useCallback((tokenIndex) => {
+		return !(tokenIndex >= visibleTokens.length - 1);
+	}, [visibleTokens.length]);
+	const handleItemExit = useCallback((id) => {
+		exitingIdsRef.current.add(id);
+	}, []);
+	const handleItemEnter = useCallback((id) => {}, []);
+	const showPlaceholder = tokens.length === 0 && !!placeholder;
+	const tokenElements = useMemo(() => {
+		let elementIndex = 0;
+		return listParts.map((part, partIndex) => {
+			if (part.type === "element") {
+				const token = visibleTokens[part.index];
+				if (!token) return null;
+				const isExiting = exitingIdsRef.current.has(token.id);
+				elementIndex++;
+				return /* @__PURE__ */ jsx("span", {
+					className: cn("waapi-token-wrapper", tokenClassName),
+					"data-reorder-id": token.id,
+					children: /* @__PURE__ */ jsx(SlidingText, {
+						text: token.text,
+						mode: isExiting ? "none" : animation.mode,
+						direction: animation.direction,
+						staggerDelay: animation.stagger,
+						duration: animation.duration,
+						blur: animation.blur,
+						widthAnimation: !isExiting && animation.widthAnimation,
+						initial: isExiting ? false : "initial",
+						animate: "animate"
+					})
+				}, token.id);
+			}
+			const prevToken = visibleTokens[part.index];
+			if (!prevToken) return null;
+			const tokenIndex = part.index;
+			if (!shouldShowSeparator(tokenIndex)) return null;
+			const separatorKey = `sep-${prevToken.id}`;
+			return /* @__PURE__ */ jsx("span", {
+				className: cn("waapi-token-separator", separator.className ?? ""),
+				children: part.value
+			}, separatorKey);
+		}).filter(Boolean);
+	}, [
+		listParts,
+		visibleTokens,
+		tokenClassName,
+		animation,
+		separator,
+		shouldShowSeparator
+	]);
+	const overflowElement = useMemo(() => {
+		if (overflowCount === 0) return null;
+		return /* @__PURE__ */ jsxs("div", {
+			"data-reorder-id": "overflow-counter",
+			className: cn("waapi-token-overflow", overflow.className ?? ""),
+			children: [
+				overflow.showSeparator && overflow.separator && /* @__PURE__ */ jsx("span", {
+					className: cn("waapi-token-separator", separator.className ?? ""),
+					children: overflow.separator
+				}),
+				overflow.prefix !== "" && /* @__PURE__ */ jsx("span", {
+					className: cn("waapi-token-separator", separator.className ?? ""),
+					children: overflow.prefix
+				}),
+				/* @__PURE__ */ jsx(SlidingText, {
+					text: String(overflowCount),
+					mode: "character",
+					duration: animation.duration,
+					blur: animation.blur,
+					initial: "initial",
+					animate: "animate"
+				}),
+				overflow.label && overflow.label !== "" && /* @__PURE__ */ jsx(SlidingText, {
+					text: overflow.label,
+					mode: animation.mode,
+					direction: animation.direction,
+					staggerDelay: animation.stagger,
+					duration: animation.duration,
+					blur: animation.blur,
+					initial: "initial",
+					animate: "animate"
+				})
+			]
+		}, "overflow-counter");
+	}, [
+		overflowCount,
+		overflow,
+		separator,
+		animation
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		role: "text",
+		className: cn("waapi-animated-tokens-container", inline && "waapi-animated-tokens-container--inline", className),
+		children: [showPlaceholder && /* @__PURE__ */ jsx(SlidingText, {
+			text: placeholder,
+			mode: "word",
+			direction: "vertical",
+			blur: true,
+			duration: 150,
+			initial: "initial",
+			animate: "animate",
+			className: cn("waapi-token-placeholder", placeholderClassName)
+		}, "placeholder"), /* @__PURE__ */ jsxs(ReorderRoot, {
+			layout: inline ? "inline-horizontal" : "horizontal",
+			onItemExit: handleItemExit,
+			onItemEnter: handleItemEnter,
+			children: [tokenElements, overflowElement]
+		})]
+	});
+};
+TextFlow.displayName = "TextFlow";
+
+//#endregion
+export { TextFlow };

package/dist/react-ui/ui/Textarea/Textarea.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.styles.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/Textarea/Textarea.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,KAAK,YAAY,GAAG,MAAM,CAAC;AAE3B,QAAA,MAAM,cAAc,EAAE,UAAU,CAAC,YAAY,CAE5C,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC;AAC1B,YAAY,EAAE,YAAY,EAAE,CAAC"}

package/dist/react-ui/ui/Textarea/Textarea.styles.js

@@ -0,0 +1,5 @@
+//#region src/react-ui/ui/Textarea/Textarea.styles.ts
+const textareaStyles = { root: "border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:ring-3 aria-invalid:ring-3 md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50" };
+
+//#endregion
+export { textareaStyles };

package/dist/react-ui/ui/Textarea/Textarea.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.types.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/Textarea/Textarea.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEtD,wCAAwC;AACxC,UAAU,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC;IAC/D,KAAK,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;CACrC;AAED,YAAY,EAAE,cAAc,EAAE,CAAC"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/Textarea/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEvD;;;;;;;GAOG;AACH,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,2CAQ/D;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC;AACpB,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,YAAY,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC"}