@pk-design/react-tailwind 1.6.0 → 1.7.0

package/dist/es/components/SwipeableRow/SwipeableRow.js

@@ -0,0 +1,185 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useMemo, useCallback, useEffect } from 'react';
+import { buildClassName } from '../../utils/build-classname.js';
+
+const themeClasses = {
+    danger: 'bg-red-600 text-white hover:bg-red-700 active:bg-red-800',
+    primary: 'bg-blue-600 text-white hover:bg-blue-700 active:bg-blue-800',
+    success: 'bg-emerald-600 text-white hover:bg-emerald-700 active:bg-emerald-800',
+    warning: 'bg-amber-500 text-white hover:bg-amber-600 active:bg-amber-700',
+    info: 'bg-cyan-600 text-white hover:bg-cyan-700 active:bg-cyan-800',
+    secondary: 'bg-gray-600 text-white hover:bg-gray-700 active:bg-gray-800',
+    gray: 'bg-gray-500 text-white hover:bg-gray-600 active:bg-gray-700',
+};
+const SwipeableRow = ({ children, leftActions = [], rightActions = [], actionWidth = 76, threshold = 40, fullSwipeToExecute = false, fullSwipeThreshold = 180, disabled = false, className = '', contentClassName = '', onOpen, onClose, }) => {
+    const [offset, setOffset] = useState(0);
+    const [isDragging, setIsDragging] = useState(false);
+    const containerRef = useRef(null);
+    const startXRef = useRef(0);
+    const startYRef = useRef(0);
+    const initialOffsetRef = useRef(0);
+    const isHorizontalSwipeRef = useRef(null);
+    const maxLeftWidth = useMemo(() => leftActions.length * actionWidth, [leftActions, actionWidth]);
+    const maxRightWidth = useMemo(() => rightActions.length * actionWidth, [rightActions, actionWidth]);
+    const handleClose = useCallback(() => {
+        setOffset(0);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, [onClose]);
+    const handleOpenLeft = useCallback(() => {
+        if (maxLeftWidth > 0) {
+            setOffset(maxLeftWidth);
+            onOpen === null || onOpen === void 0 ? void 0 : onOpen('left');
+        }
+        else {
+            handleClose();
+        }
+    }, [maxLeftWidth, onOpen, handleClose]);
+    const handleOpenRight = useCallback(() => {
+        if (maxRightWidth > 0) {
+            setOffset(-maxRightWidth);
+            onOpen === null || onOpen === void 0 ? void 0 : onOpen('right');
+        }
+        else {
+            handleClose();
+        }
+    }, [maxRightWidth, onOpen, handleClose]);
+    const handleDragStart = (clientX, clientY) => {
+        if (disabled)
+            return;
+        setIsDragging(true);
+        startXRef.current = clientX;
+        startYRef.current = clientY;
+        initialOffsetRef.current = offset;
+        isHorizontalSwipeRef.current = null;
+    };
+    const handleDragMove = (clientX, clientY) => {
+        if (!isDragging || disabled)
+            return;
+        const deltaX = clientX - startXRef.current;
+        const deltaY = clientY - startYRef.current;
+        // Lock direction once initial movement surpasses 5px
+        if (isHorizontalSwipeRef.current === null) {
+            if (Math.abs(deltaX) > 5 || Math.abs(deltaY) > 5) {
+                isHorizontalSwipeRef.current = Math.abs(deltaX) > Math.abs(deltaY);
+            }
+        }
+        if (isHorizontalSwipeRef.current === false) {
+            return;
+        }
+        let nextOffset = initialOffsetRef.current + deltaX;
+        // Limit drag range with resistance overscroll
+        if (nextOffset > 0) {
+            if (!leftActions.length) {
+                nextOffset = 0;
+            }
+            else if (nextOffset > maxLeftWidth && !fullSwipeToExecute) {
+                const overflow = nextOffset - maxLeftWidth;
+                nextOffset = maxLeftWidth + overflow * 0.2;
+            }
+        }
+        else if (nextOffset < 0) {
+            if (!rightActions.length) {
+                nextOffset = 0;
+            }
+            else if (Math.abs(nextOffset) > maxRightWidth && !fullSwipeToExecute) {
+                const overflow = Math.abs(nextOffset) - maxRightWidth;
+                nextOffset = -(maxRightWidth + overflow * 0.2);
+            }
+        }
+        setOffset(nextOffset);
+    };
+    const handleDragEnd = () => {
+        if (!isDragging)
+            return;
+        setIsDragging(false);
+        if (isHorizontalSwipeRef.current === false) {
+            return;
+        }
+        // Check full swipe auto-execution
+        if (fullSwipeToExecute) {
+            if (offset > fullSwipeThreshold && leftActions.length > 0) {
+                leftActions[0].onClick();
+                handleClose();
+                return;
+            }
+            if (offset < -fullSwipeThreshold && rightActions.length > 0) {
+                rightActions[0].onClick();
+                handleClose();
+                return;
+            }
+        }
+        // Snap logic
+        if (offset > 0) {
+            if (offset > threshold) {
+                handleOpenLeft();
+            }
+            else {
+                handleClose();
+            }
+        }
+        else if (offset < 0) {
+            if (Math.abs(offset) > threshold) {
+                handleOpenRight();
+            }
+            else {
+                handleClose();
+            }
+        }
+    };
+    // Touch Handlers
+    const handleTouchStart = (e) => {
+        const touch = e.touches[0];
+        handleDragStart(touch.clientX, touch.clientY);
+    };
+    const handleTouchMove = (e) => {
+        const touch = e.touches[0];
+        handleDragMove(touch.clientX, touch.clientY);
+    };
+    const handleTouchEnd = () => {
+        handleDragEnd();
+    };
+    // Pointer/Mouse Handlers
+    const handlePointerDown = (e) => {
+        if (e.pointerType === 'mouse' && e.button !== 0)
+            return;
+        handleDragStart(e.clientX, e.clientY);
+    };
+    const handlePointerMove = (e) => {
+        if (!isDragging)
+            return;
+        handleDragMove(e.clientX, e.clientY);
+    };
+    const handlePointerUp = () => {
+        handleDragEnd();
+    };
+    // Close row on click outside if swiped open
+    useEffect(() => {
+        if (offset === 0)
+            return;
+        const handleClickOutside = (e) => {
+            if (containerRef.current && !containerRef.current.contains(e.target)) {
+                handleClose();
+            }
+        };
+        document.addEventListener('click', handleClickOutside);
+        return () => {
+            document.removeEventListener('click', handleClickOutside);
+        };
+    }, [offset, handleClose]);
+    const renderActionButton = (action) => {
+        const themeStyle = themeClasses[action.theme || 'primary'];
+        return (jsxs("button", { type: "button", style: { width: `${actionWidth}px` }, onClick: (e) => {
+                e.stopPropagation();
+                action.onClick();
+                handleClose();
+            }, className: buildClassName('h-full flex flex-col items-center justify-center gap-1 text-xs font-semibold shrink-0 cursor-pointer transition-colors px-2 select-none', themeStyle, action.className), "data-testid": `swipe-action-${action.id}`, children: [action.icon && jsx("span", { className: "shrink-0", children: action.icon }), action.label && jsx("span", { className: "truncate max-w-full", children: action.label })] }, action.id));
+    };
+    return (jsxs("div", { ref: containerRef, className: buildClassName('relative overflow-hidden rounded-xl border border-[var(--ui-border-muted)] bg-white dark:bg-gray-800 select-none touch-pan-y', className), "data-testid": "swipeable-row", children: [leftActions.length > 0 && (jsx("div", { className: "absolute left-0 top-0 bottom-0 flex items-center h-full z-0", style: { width: `${maxLeftWidth}px` }, "data-testid": "swipe-left-actions", children: leftActions.map(renderActionButton) })), rightActions.length > 0 && (jsx("div", { className: "absolute right-0 top-0 bottom-0 flex items-center justify-end h-full z-0", style: { width: `${maxRightWidth}px` }, "data-testid": "swipe-right-actions", children: rightActions.map(renderActionButton) })), jsx("div", { onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, onPointerCancel: handlePointerUp, style: {
+                    transform: `translateX(${offset}px)`,
+                    transition: isDragging ? 'none' : 'transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1)',
+                }, className: buildClassName('relative z-10 w-full bg-white dark:bg-gray-800 shadow-xs cursor-grab active:cursor-grabbing', contentClassName), "data-testid": "swipeable-row-content", children: children })] }));
+};
+SwipeableRow.displayName = 'SwipeableRow';
+
+export { SwipeableRow };
+//# sourceMappingURL=SwipeableRow.js.map

package/dist/es/components/SwipeableRow/SwipeableRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwipeableRow.js","sources":["../../../../../src/components/SwipeableRow/SwipeableRow.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react'\nimport { SwipeableRowProps, SwipeableAction, SwipeableActionTheme } from './SwipeableRow.types'\nimport { buildClassName } from '../../utils/build-classname'\n\nconst themeClasses: Record<SwipeableActionTheme, string> = {\n  danger: 'bg-red-600 text-white hover:bg-red-700 active:bg-red-800',\n  primary: 'bg-blue-600 text-white hover:bg-blue-700 active:bg-blue-800',\n  success: 'bg-emerald-600 text-white hover:bg-emerald-700 active:bg-emerald-800',\n  warning: 'bg-amber-500 text-white hover:bg-amber-600 active:bg-amber-700',\n  info: 'bg-cyan-600 text-white hover:bg-cyan-700 active:bg-cyan-800',\n  secondary: 'bg-gray-600 text-white hover:bg-gray-700 active:bg-gray-800',\n  gray: 'bg-gray-500 text-white hover:bg-gray-600 active:bg-gray-700',\n}\n\nexport const SwipeableRow: React.FC<SwipeableRowProps> = ({\n  children,\n  leftActions = [],\n  rightActions = [],\n  actionWidth = 76,\n  threshold = 40,\n  fullSwipeToExecute = false,\n  fullSwipeThreshold = 180,\n  disabled = false,\n  className = '',\n  contentClassName = '',\n  onOpen,\n  onClose,\n}) => {\n  const [offset, setOffset] = useState(0)\n  const [isDragging, setIsDragging] = useState(false)\n  const containerRef = useRef<HTMLDivElement>(null)\n\n  const startXRef = useRef(0)\n  const startYRef = useRef(0)\n  const initialOffsetRef = useRef(0)\n  const isHorizontalSwipeRef = useRef<boolean | null>(null)\n\n  const maxLeftWidth = useMemo(() => leftActions.length * actionWidth, [leftActions, actionWidth])\n  const maxRightWidth = useMemo(\n    () => rightActions.length * actionWidth,\n    [rightActions, actionWidth],\n  )\n\n  const handleClose = useCallback(() => {\n    setOffset(0)\n    onClose?.()\n  }, [onClose])\n\n  const handleOpenLeft = useCallback(() => {\n    if (maxLeftWidth > 0) {\n      setOffset(maxLeftWidth)\n      onOpen?.('left')\n    } else {\n      handleClose()\n    }\n  }, [maxLeftWidth, onOpen, handleClose])\n\n  const handleOpenRight = useCallback(() => {\n    if (maxRightWidth > 0) {\n      setOffset(-maxRightWidth)\n      onOpen?.('right')\n    } else {\n      handleClose()\n    }\n  }, [maxRightWidth, onOpen, handleClose])\n\n  const handleDragStart = (clientX: number, clientY: number) => {\n    if (disabled) return\n    setIsDragging(true)\n    startXRef.current = clientX\n    startYRef.current = clientY\n    initialOffsetRef.current = offset\n    isHorizontalSwipeRef.current = null\n  }\n\n  const handleDragMove = (clientX: number, clientY: number) => {\n    if (!isDragging || disabled) return\n\n    const deltaX = clientX - startXRef.current\n    const deltaY = clientY - startYRef.current\n\n    // Lock direction once initial movement surpasses 5px\n    if (isHorizontalSwipeRef.current === null) {\n      if (Math.abs(deltaX) > 5 || Math.abs(deltaY) > 5) {\n        isHorizontalSwipeRef.current = Math.abs(deltaX) > Math.abs(deltaY)\n      }\n    }\n\n    if (isHorizontalSwipeRef.current === false) {\n      return\n    }\n\n    let nextOffset = initialOffsetRef.current + deltaX\n\n    // Limit drag range with resistance overscroll\n    if (nextOffset > 0) {\n      if (!leftActions.length) {\n        nextOffset = 0\n      } else if (nextOffset > maxLeftWidth && !fullSwipeToExecute) {\n        const overflow = nextOffset - maxLeftWidth\n        nextOffset = maxLeftWidth + overflow * 0.2\n      }\n    } else if (nextOffset < 0) {\n      if (!rightActions.length) {\n        nextOffset = 0\n      } else if (Math.abs(nextOffset) > maxRightWidth && !fullSwipeToExecute) {\n        const overflow = Math.abs(nextOffset) - maxRightWidth\n        nextOffset = -(maxRightWidth + overflow * 0.2)\n      }\n    }\n\n    setOffset(nextOffset)\n  }\n\n  const handleDragEnd = () => {\n    if (!isDragging) return\n    setIsDragging(false)\n\n    if (isHorizontalSwipeRef.current === false) {\n      return\n    }\n\n    // Check full swipe auto-execution\n    if (fullSwipeToExecute) {\n      if (offset > fullSwipeThreshold && leftActions.length > 0) {\n        leftActions[0].onClick()\n        handleClose()\n        return\n      }\n      if (offset < -fullSwipeThreshold && rightActions.length > 0) {\n        rightActions[0].onClick()\n        handleClose()\n        return\n      }\n    }\n\n    // Snap logic\n    if (offset > 0) {\n      if (offset > threshold) {\n        handleOpenLeft()\n      } else {\n        handleClose()\n      }\n    } else if (offset < 0) {\n      if (Math.abs(offset) > threshold) {\n        handleOpenRight()\n      } else {\n        handleClose()\n      }\n    }\n  }\n\n  // Touch Handlers\n  const handleTouchStart = (e: React.TouchEvent) => {\n    const touch = e.touches[0]\n    handleDragStart(touch.clientX, touch.clientY)\n  }\n\n  const handleTouchMove = (e: React.TouchEvent) => {\n    const touch = e.touches[0]\n    handleDragMove(touch.clientX, touch.clientY)\n  }\n\n  const handleTouchEnd = () => {\n    handleDragEnd()\n  }\n\n  // Pointer/Mouse Handlers\n  const handlePointerDown = (e: React.PointerEvent) => {\n    if (e.pointerType === 'mouse' && e.button !== 0) return\n    handleDragStart(e.clientX, e.clientY)\n  }\n\n  const handlePointerMove = (e: React.PointerEvent) => {\n    if (!isDragging) return\n    handleDragMove(e.clientX, e.clientY)\n  }\n\n  const handlePointerUp = () => {\n    handleDragEnd()\n  }\n\n  // Close row on click outside if swiped open\n  useEffect(() => {\n    if (offset === 0) return\n\n    const handleClickOutside = (e: MouseEvent) => {\n      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {\n        handleClose()\n      }\n    }\n\n    document.addEventListener('click', handleClickOutside)\n    return () => {\n      document.removeEventListener('click', handleClickOutside)\n    }\n  }, [offset, handleClose])\n\n  const renderActionButton = (action: SwipeableAction) => {\n    const themeStyle = themeClasses[action.theme || 'primary']\n    return (\n      <button\n        key={action.id}\n        type=\"button\"\n        style={{ width: `${actionWidth}px` }}\n        onClick={(e) => {\n          e.stopPropagation()\n          action.onClick()\n          handleClose()\n        }}\n        className={buildClassName(\n          'h-full flex flex-col items-center justify-center gap-1 text-xs font-semibold shrink-0 cursor-pointer transition-colors px-2 select-none',\n          themeStyle,\n          action.className,\n        )}\n        data-testid={`swipe-action-${action.id}`}\n      >\n        {action.icon && <span className=\"shrink-0\">{action.icon}</span>}\n        {action.label && <span className=\"truncate max-w-full\">{action.label}</span>}\n      </button>\n    )\n  }\n\n  return (\n    <div\n      ref={containerRef}\n      className={buildClassName(\n        'relative overflow-hidden rounded-xl border border-[var(--ui-border-muted)] bg-white dark:bg-gray-800 select-none touch-pan-y',\n        className,\n      )}\n      data-testid=\"swipeable-row\"\n    >\n      {/* Left Actions Revealed on Right Swipe */}\n      {leftActions.length > 0 && (\n        <div\n          className=\"absolute left-0 top-0 bottom-0 flex items-center h-full z-0\"\n          style={{ width: `${maxLeftWidth}px` }}\n          data-testid=\"swipe-left-actions\"\n        >\n          {leftActions.map(renderActionButton)}\n        </div>\n      )}\n\n      {/* Right Actions Revealed on Left Swipe */}\n      {rightActions.length > 0 && (\n        <div\n          className=\"absolute right-0 top-0 bottom-0 flex items-center justify-end h-full z-0\"\n          style={{ width: `${maxRightWidth}px` }}\n          data-testid=\"swipe-right-actions\"\n        >\n          {rightActions.map(renderActionButton)}\n        </div>\n      )}\n\n      {/* Main Content Surface */}\n      <div\n        onTouchStart={handleTouchStart}\n        onTouchMove={handleTouchMove}\n        onTouchEnd={handleTouchEnd}\n        onPointerDown={handlePointerDown}\n        onPointerMove={handlePointerMove}\n        onPointerUp={handlePointerUp}\n        onPointerCancel={handlePointerUp}\n        style={{\n          transform: `translateX(${offset}px)`,\n          transition: isDragging ? 'none' : 'transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1)',\n        }}\n        className={buildClassName(\n          'relative z-10 w-full bg-white dark:bg-gray-800 shadow-xs cursor-grab active:cursor-grabbing',\n          contentClassName,\n        )}\n        data-testid=\"swipeable-row-content\"\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nSwipeableRow.displayName = 'SwipeableRow'\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/es/components/SwipeableTabs/SwipeableTabs.js

@@ -0,0 +1,89 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef } from 'react';
+import { buildClassName } from '../../utils/build-classname.js';
+
+function SwipeableTabs({ items, activeId: externalActiveId, defaultActiveId, onChange, swipeable = true, threshold = 50, headerVariant = 'default', containerClass = '', headerClass = '', contentClass = '', }) {
+    var _a;
+    const [internalActiveId, setInternalActiveId] = useState(defaultActiveId || ((_a = items[0]) === null || _a === void 0 ? void 0 : _a.id) || '');
+    const activeId = externalActiveId !== undefined ? externalActiveId : internalActiveId;
+    const activeIndex = Math.max(0, items.findIndex((item) => item.id === activeId));
+    const touchStartX = useRef(0);
+    const touchStartY = useRef(0);
+    const touchDeltaX = useRef(0);
+    const isSwipingHorizontal = useRef(null);
+    const handleTabChange = (item) => {
+        if (item.disabled)
+            return;
+        setInternalActiveId(item.id);
+        onChange === null || onChange === void 0 ? void 0 : onChange(item.id);
+    };
+    const handleTouchStart = (e) => {
+        if (!swipeable)
+            return;
+        touchStartX.current = e.touches[0].clientX;
+        touchStartY.current = e.touches[0].clientY;
+        touchDeltaX.current = 0;
+        isSwipingHorizontal.current = null;
+    };
+    const handleTouchMove = (e) => {
+        if (!swipeable)
+            return;
+        const currentX = e.touches[0].clientX;
+        const currentY = e.touches[0].clientY;
+        const deltaX = currentX - touchStartX.current;
+        const deltaY = currentY - touchStartY.current;
+        if (isSwipingHorizontal.current === null) {
+            if (Math.abs(deltaX) > 8 || Math.abs(deltaY) > 8) {
+                isSwipingHorizontal.current = Math.abs(deltaX) > Math.abs(deltaY);
+            }
+        }
+        if (isSwipingHorizontal.current) {
+            touchDeltaX.current = deltaX;
+        }
+    };
+    const handleTouchEnd = () => {
+        if (!swipeable || !isSwipingHorizontal.current)
+            return;
+        const deltaX = touchDeltaX.current;
+        if (Math.abs(deltaX) >= threshold) {
+            if (deltaX < 0 && activeIndex < items.length - 1) {
+                // Swiped Left -> Go to Next Tab
+                const nextItem = items[activeIndex + 1];
+                if (nextItem && !nextItem.disabled) {
+                    handleTabChange(nextItem);
+                }
+            }
+            else if (deltaX > 0 && activeIndex > 0) {
+                // Swiped Right -> Go to Previous Tab
+                const prevItem = items[activeIndex - 1];
+                if (prevItem && !prevItem.disabled) {
+                    handleTabChange(prevItem);
+                }
+            }
+        }
+        touchDeltaX.current = 0;
+        isSwipingHorizontal.current = null;
+    };
+    return (jsxs("div", { className: buildClassName('w-full flex flex-col', containerClass), "data-testid": "swipeable-tabs", children: [jsx("div", { className: buildClassName('w-full flex items-center gap-1 border-b border-[var(--ui-border)] overflow-x-auto no-scrollbar select-none', headerVariant === 'segmented' &&
+                    'p-1 bg-gray-100 dark:bg-gray-800/80 rounded-2xl border-none gap-0', headerClass), "data-testid": "swipeable-tabs-header", children: items.map((item) => {
+                    const isActive = item.id === activeId;
+                    if (headerVariant === 'segmented') {
+                        return (jsxs("button", { type: "button", disabled: item.disabled, onClick: () => handleTabChange(item), className: buildClassName('flex-1 flex items-center justify-center gap-1.5 py-1.5 px-3 rounded-xl text-xs font-semibold transition-all duration-150 cursor-pointer', item.disabled && 'opacity-40 cursor-not-allowed pointer-events-none', isActive
+                                ? 'bg-white dark:bg-gray-900 text-gray-900 dark:text-white shadow-xs'
+                                : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'), "data-testid": `swipeable-tab-btn-${item.id}`, children: [item.icon && jsx("span", { className: "text-sm", children: item.icon }), jsx("span", { children: item.label }), item.badge !== undefined && (jsx("span", { className: "px-1.5 py-0.5 text-[10px] rounded-full bg-blue-100 dark:bg-blue-950 text-blue-600 dark:text-blue-400 font-bold", children: item.badge }))] }, item.id));
+                    }
+                    if (headerVariant === 'pills') {
+                        return (jsxs("button", { type: "button", disabled: item.disabled, onClick: () => handleTabChange(item), className: buildClassName('flex items-center justify-center gap-1.5 py-1.5 px-3.5 rounded-full text-xs font-semibold transition-all duration-150 cursor-pointer whitespace-nowrap', item.disabled && 'opacity-40 cursor-not-allowed pointer-events-none', isActive
+                                ? 'bg-blue-600 text-white shadow-xs'
+                                : 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'), "data-testid": `swipeable-tab-btn-${item.id}`, children: [item.icon && jsx("span", { className: "text-sm", children: item.icon }), jsx("span", { children: item.label }), item.badge !== undefined && (jsx("span", { className: "px-1.5 py-0.5 text-[10px] rounded-full bg-white/20 text-current font-bold", children: item.badge }))] }, item.id));
+                    }
+                    // Default Underline Tab Header
+                    return (jsxs("button", { type: "button", disabled: item.disabled, onClick: () => handleTabChange(item), className: buildClassName('flex items-center justify-center gap-1.5 py-2.5 px-4 text-xs font-semibold transition-all duration-150 cursor-pointer relative whitespace-nowrap border-b-2 -mb-px', item.disabled && 'opacity-40 cursor-not-allowed pointer-events-none', isActive
+                            ? 'border-blue-600 dark:border-blue-400 text-blue-600 dark:text-blue-400'
+                            : 'border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'), "data-testid": `swipeable-tab-btn-${item.id}`, children: [item.icon && jsx("span", { className: "text-sm", children: item.icon }), jsx("span", { children: item.label }), item.badge !== undefined && (jsx("span", { className: "px-1.5 py-0.5 text-[10px] rounded-full bg-blue-100 dark:bg-blue-950 text-blue-600 dark:text-blue-400 font-bold", children: item.badge }))] }, item.id));
+                }) }), jsx("div", { className: buildClassName('w-full overflow-hidden relative touch-pan-y', contentClass), onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, "data-testid": "swipeable-tabs-viewport", children: jsx("div", { className: "flex w-full transition-transform duration-300 ease-out", style: { transform: `translateX(-${activeIndex * 100}%)` }, "data-testid": "swipeable-tabs-track", children: items.map((item) => (jsx("div", { className: "w-full shrink-0 min-w-full", "data-testid": `swipeable-tab-panel-${item.id}`, children: item.content }, item.id))) }) })] }));
+}
+SwipeableTabs.displayName = 'SwipeableTabs';
+
+export { SwipeableTabs };
+//# sourceMappingURL=SwipeableTabs.js.map

package/dist/es/components/SwipeableTabs/SwipeableTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwipeableTabs.js","sources":["../../../../../src/components/SwipeableTabs/SwipeableTabs.tsx"],"sourcesContent":["import React, { useState, useRef } from 'react'\nimport type { SwipeableTabsProps, SwipeableTabItem } from './SwipeableTabs.types'\nimport { buildClassName } from '../../utils/build-classname'\n\nexport function SwipeableTabs({\n  items,\n  activeId: externalActiveId,\n  defaultActiveId,\n  onChange,\n  swipeable = true,\n  threshold = 50,\n  headerVariant = 'default',\n  containerClass = '',\n  headerClass = '',\n  contentClass = '',\n}: SwipeableTabsProps) {\n  const [internalActiveId, setInternalActiveId] = useState<string>(\n    defaultActiveId || items[0]?.id || '',\n  )\n\n  const activeId = externalActiveId !== undefined ? externalActiveId : internalActiveId\n  const activeIndex = Math.max(\n    0,\n    items.findIndex((item) => item.id === activeId),\n  )\n\n  const touchStartX = useRef<number>(0)\n  const touchStartY = useRef<number>(0)\n  const touchDeltaX = useRef<number>(0)\n  const isSwipingHorizontal = useRef<boolean | null>(null)\n\n  const handleTabChange = (item: SwipeableTabItem) => {\n    if (item.disabled) return\n    setInternalActiveId(item.id)\n    onChange?.(item.id)\n  }\n\n  const handleTouchStart = (e: React.TouchEvent<HTMLDivElement>) => {\n    if (!swipeable) return\n    touchStartX.current = e.touches[0].clientX\n    touchStartY.current = e.touches[0].clientY\n    touchDeltaX.current = 0\n    isSwipingHorizontal.current = null\n  }\n\n  const handleTouchMove = (e: React.TouchEvent<HTMLDivElement>) => {\n    if (!swipeable) return\n    const currentX = e.touches[0].clientX\n    const currentY = e.touches[0].clientY\n    const deltaX = currentX - touchStartX.current\n    const deltaY = currentY - touchStartY.current\n\n    if (isSwipingHorizontal.current === null) {\n      if (Math.abs(deltaX) > 8 || Math.abs(deltaY) > 8) {\n        isSwipingHorizontal.current = Math.abs(deltaX) > Math.abs(deltaY)\n      }\n    }\n\n    if (isSwipingHorizontal.current) {\n      touchDeltaX.current = deltaX\n    }\n  }\n\n  const handleTouchEnd = () => {\n    if (!swipeable || !isSwipingHorizontal.current) return\n\n    const deltaX = touchDeltaX.current\n    if (Math.abs(deltaX) >= threshold) {\n      if (deltaX < 0 && activeIndex < items.length - 1) {\n        // Swiped Left -> Go to Next Tab\n        const nextItem = items[activeIndex + 1]\n        if (nextItem && !nextItem.disabled) {\n          handleTabChange(nextItem)\n        }\n      } else if (deltaX > 0 && activeIndex > 0) {\n        // Swiped Right -> Go to Previous Tab\n        const prevItem = items[activeIndex - 1]\n        if (prevItem && !prevItem.disabled) {\n          handleTabChange(prevItem)\n        }\n      }\n    }\n\n    touchDeltaX.current = 0\n    isSwipingHorizontal.current = null\n  }\n\n  return (\n    <div\n      className={buildClassName('w-full flex flex-col', containerClass)}\n      data-testid=\"swipeable-tabs\"\n    >\n      {/* Header Tabs Navigation Bar */}\n      <div\n        className={buildClassName(\n          'w-full flex items-center gap-1 border-b border-[var(--ui-border)] overflow-x-auto no-scrollbar select-none',\n          headerVariant === 'segmented' &&\n            'p-1 bg-gray-100 dark:bg-gray-800/80 rounded-2xl border-none gap-0',\n          headerClass,\n        )}\n        data-testid=\"swipeable-tabs-header\"\n      >\n        {items.map((item) => {\n          const isActive = item.id === activeId\n\n          if (headerVariant === 'segmented') {\n            return (\n              <button\n                key={item.id}\n                type=\"button\"\n                disabled={item.disabled}\n                onClick={() => handleTabChange(item)}\n                className={buildClassName(\n                  'flex-1 flex items-center justify-center gap-1.5 py-1.5 px-3 rounded-xl text-xs font-semibold transition-all duration-150 cursor-pointer',\n                  item.disabled && 'opacity-40 cursor-not-allowed pointer-events-none',\n                  isActive\n                    ? 'bg-white dark:bg-gray-900 text-gray-900 dark:text-white shadow-xs'\n                    : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white',\n                )}\n                data-testid={`swipeable-tab-btn-${item.id}`}\n              >\n                {item.icon && <span className=\"text-sm\">{item.icon}</span>}\n                <span>{item.label}</span>\n                {item.badge !== undefined && (\n                  <span className=\"px-1.5 py-0.5 text-[10px] rounded-full bg-blue-100 dark:bg-blue-950 text-blue-600 dark:text-blue-400 font-bold\">\n                    {item.badge}\n                  </span>\n                )}\n              </button>\n            )\n          }\n\n          if (headerVariant === 'pills') {\n            return (\n              <button\n                key={item.id}\n                type=\"button\"\n                disabled={item.disabled}\n                onClick={() => handleTabChange(item)}\n                className={buildClassName(\n                  'flex items-center justify-center gap-1.5 py-1.5 px-3.5 rounded-full text-xs font-semibold transition-all duration-150 cursor-pointer whitespace-nowrap',\n                  item.disabled && 'opacity-40 cursor-not-allowed pointer-events-none',\n                  isActive\n                    ? 'bg-blue-600 text-white shadow-xs'\n                    : 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700',\n                )}\n                data-testid={`swipeable-tab-btn-${item.id}`}\n              >\n                {item.icon && <span className=\"text-sm\">{item.icon}</span>}\n                <span>{item.label}</span>\n                {item.badge !== undefined && (\n                  <span className=\"px-1.5 py-0.5 text-[10px] rounded-full bg-white/20 text-current font-bold\">\n                    {item.badge}\n                  </span>\n                )}\n              </button>\n            )\n          }\n\n          // Default Underline Tab Header\n          return (\n            <button\n              key={item.id}\n              type=\"button\"\n              disabled={item.disabled}\n              onClick={() => handleTabChange(item)}\n              className={buildClassName(\n                'flex items-center justify-center gap-1.5 py-2.5 px-4 text-xs font-semibold transition-all duration-150 cursor-pointer relative whitespace-nowrap border-b-2 -mb-px',\n                item.disabled && 'opacity-40 cursor-not-allowed pointer-events-none',\n                isActive\n                  ? 'border-blue-600 dark:border-blue-400 text-blue-600 dark:text-blue-400'\n                  : 'border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white',\n              )}\n              data-testid={`swipeable-tab-btn-${item.id}`}\n            >\n              {item.icon && <span className=\"text-sm\">{item.icon}</span>}\n              <span>{item.label}</span>\n              {item.badge !== undefined && (\n                <span className=\"px-1.5 py-0.5 text-[10px] rounded-full bg-blue-100 dark:bg-blue-950 text-blue-600 dark:text-blue-400 font-bold\">\n                  {item.badge}\n                </span>\n              )}\n            </button>\n          )\n        })}\n      </div>\n\n      {/* Swipeable Viewport Content Area */}\n      <div\n        className={buildClassName('w-full overflow-hidden relative touch-pan-y', contentClass)}\n        onTouchStart={handleTouchStart}\n        onTouchMove={handleTouchMove}\n        onTouchEnd={handleTouchEnd}\n        data-testid=\"swipeable-tabs-viewport\"\n      >\n        <div\n          className=\"flex w-full transition-transform duration-300 ease-out\"\n          style={{ transform: `translateX(-${activeIndex * 100}%)` }}\n          data-testid=\"swipeable-tabs-track\"\n        >\n          {items.map((item) => (\n            <div\n              key={item.id}\n              className=\"w-full shrink-0 min-w-full\"\n              data-testid={`swipeable-tab-panel-${item.id}`}\n            >\n              {item.content}\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nSwipeableTabs.displayName = 'SwipeableTabs'\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/es/components/Table/Table.js

@@ -0,0 +1,48 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { buildClassName } from '../../utils/build-classname.js';
+
+const TEXT_ALIGN = {
+    left: 'text-left',
+    center: 'text-center',
+    right: 'text-right',
+};
+const TABLE_LAYOUT = {
+    fixed: 'table-fixed',
+    auto: 'table-auto',
+};
+/* ----------------------------------------------
+ * Loader Rows
+ * ---------------------------------------------- */
+const TableRowLoader = ({ colSize, rowSize }) => (jsx(Fragment, { children: Array.from({ length: rowSize }).map((_, rowIdx) => (jsx(TableRow, { className: "animate-pulse", children: Array.from({ length: colSize }).map((_, colIdx) => (jsx(TableCell, { children: jsx("div", { className: "flex items-center h-6", children: jsx("div", { className: "h-4 bg-gray-300 dark:bg-gray-700 shimmer rounded w-full" }) }) }, colIdx))) }, rowIdx))) }));
+/* ----------------------------------------------
+ * Table
+ * ---------------------------------------------- */
+const Table = ({ children, layout = 'auto', className = '', caption, }) => (jsxs("table", { className: buildClassName('border-collapse w-full divide-y divide-[var(--ui-border)]', TABLE_LAYOUT[layout], className), children: [caption && (jsx("caption", { className: "mb-2 text-sm text-left text-gray-500 dark:text-gray-400", children: caption })), children] }));
+/* ----------------------------------------------
+ * Head
+ * ---------------------------------------------- */
+const TableHead = ({ children, className = '' }) => (jsx("thead", { className: buildClassName('text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-800 dark:text-gray-300', className), children: jsx("tr", { children: children }) }));
+/* ----------------------------------------------
+ * Body
+ * ---------------------------------------------- */
+const TableBody = ({ children, loading, colSize = 1, rowSize = 5, className, }) => (jsx("tbody", { className: buildClassName('text-sm text-gray-700 dark:text-white divide-y divide-[var(--ui-border)]', className), children: loading ? jsx(TableRowLoader, { colSize: colSize, rowSize: rowSize }) : children }));
+/* ----------------------------------------------
+ * Foot
+ * ---------------------------------------------- */
+const TableFoot = ({ children }) => (jsx("tfoot", { children: jsx("tr", { children: children }) }));
+/* ----------------------------------------------
+ * Rows
+ * ---------------------------------------------- */
+const TableRow = ({ children, hoverable = false, className, ...props }) => (jsx("tr", { ...props, className: buildClassName('last:border-b border-[var(--ui-border)]', hoverable && 'group', className), children: children }));
+/* ----------------------------------------------
+ * Cells
+ * ---------------------------------------------- */
+const TableCell = ({ children, align = 'left', className, ...props }) => (jsx("td", { ...props, className: buildClassName('px-3 py-3 first:pl-4 last:pr-4 bg-white dark:bg-gray-900 group-hover:bg-gray-50 group-hover:dark:bg-gray-800', TEXT_ALIGN[align], className), children: jsx("div", { className: "leading-normal", children: children }) }));
+const TableHeaderCell = ({ children, align = 'left', className, ...props }) => (jsx("th", { ...props, className: buildClassName('px-3 py-3 first:pl-4 last:pr-4 tracking-wider whitespace-nowrap text-gray-800 dark:text-gray-300', TEXT_ALIGN[align], className), children: children }));
+/* ----------------------------------------------
+ * Empty Row
+ * ---------------------------------------------- */
+const EmptyTableRow = ({ children, colSpan = 1, contentClass, }) => (jsx("tr", { className: "bg-white dark:bg-gray-900", children: jsx("td", { colSpan: colSpan, className: "px-4 py-8", children: jsx("div", { className: buildClassName('p-6 text-center space-y-3 flex flex-col items-center justify-center', contentClass), children: children }) }) }));
+
+export { EmptyTableRow, Table, TableBody, TableCell, TableFoot, TableHead, TableHeaderCell, TableRow };
+//# sourceMappingURL=Table.js.map

package/dist/es/components/Table/Table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.js","sources":["../../../../../src/components/Table/Table.tsx"],"sourcesContent":["import React from 'react'\nimport { buildClassName } from '../../utils/build-classname'\nimport type {\n  EmptyTableRowProps,\n  TableProps,\n  TableBodyProps,\n  TableCellProps,\n  TableFootProps,\n  TableHeaderCellProps,\n  TableHeadProps,\n  TableRowLoaderProps,\n  TableRowProps,\n} from './Table.types'\n\nconst TEXT_ALIGN = {\n  left: 'text-left',\n  center: 'text-center',\n  right: 'text-right',\n}\n\nconst TABLE_LAYOUT = {\n  fixed: 'table-fixed',\n  auto: 'table-auto',\n}\n\n/* ----------------------------------------------\n * Loader Rows\n * ---------------------------------------------- */\nconst TableRowLoader: React.FC<TableRowLoaderProps> = ({ colSize, rowSize }) => (\n  <>\n    {Array.from({ length: rowSize }).map((_, rowIdx) => (\n      <TableRow key={rowIdx} className=\"animate-pulse\">\n        {Array.from({ length: colSize }).map((_, colIdx) => (\n          <TableCell key={colIdx}>\n            <div className=\"flex items-center h-6\">\n              <div className=\"h-4 bg-gray-300 dark:bg-gray-700 shimmer rounded w-full\" />\n            </div>\n          </TableCell>\n        ))}\n      </TableRow>\n    ))}\n  </>\n)\n\n/* ----------------------------------------------\n * Table\n * ---------------------------------------------- */\nexport const Table: React.FC<TableProps> = ({\n  children,\n  layout = 'auto',\n  className = '',\n  caption,\n}) => (\n  <table\n    className={buildClassName(\n      'border-collapse w-full divide-y divide-[var(--ui-border)]',\n      TABLE_LAYOUT[layout],\n      className,\n    )}\n  >\n    {caption && (\n      <caption className=\"mb-2 text-sm text-left text-gray-500 dark:text-gray-400\">\n        {caption}\n      </caption>\n    )}\n    {children}\n  </table>\n)\n\n/* ----------------------------------------------\n * Head\n * ---------------------------------------------- */\nexport const TableHead: React.FC<TableHeadProps> = ({ children, className = '' }) => (\n  <thead\n    className={buildClassName(\n      'text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-800 dark:text-gray-300',\n      className,\n    )}\n  >\n    <tr>{children}</tr>\n  </thead>\n)\n\n/* ----------------------------------------------\n * Body\n * ---------------------------------------------- */\nexport const TableBody: React.FC<TableBodyProps> = ({\n  children,\n  loading,\n  colSize = 1,\n  rowSize = 5,\n  className,\n}) => (\n  <tbody\n    className={buildClassName(\n      'text-sm text-gray-700 dark:text-white divide-y divide-[var(--ui-border)]',\n      className,\n    )}\n  >\n    {loading ? <TableRowLoader colSize={colSize} rowSize={rowSize} /> : children}\n  </tbody>\n)\n\n/* ----------------------------------------------\n * Foot\n * ---------------------------------------------- */\nexport const TableFoot: React.FC<TableFootProps> = ({ children }) => (\n  <tfoot>\n    <tr>{children}</tr>\n  </tfoot>\n)\n\n/* ----------------------------------------------\n * Rows\n * ---------------------------------------------- */\nexport const TableRow: React.FC<TableRowProps> = ({\n  children,\n  hoverable = false,\n  className,\n  ...props\n}) => (\n  <tr\n    {...props}\n    className={buildClassName(\n      'last:border-b border-[var(--ui-border)]',\n      hoverable && 'group',\n      className,\n    )}\n  >\n    {children}\n  </tr>\n)\n\n/* ----------------------------------------------\n * Cells\n * ---------------------------------------------- */\nexport const TableCell: React.FC<TableCellProps> = ({\n  children,\n  align = 'left',\n  className,\n  ...props\n}) => (\n  <td\n    {...props}\n    className={buildClassName(\n      'px-3 py-3 first:pl-4 last:pr-4 bg-white dark:bg-gray-900 group-hover:bg-gray-50 group-hover:dark:bg-gray-800',\n      TEXT_ALIGN[align],\n      className,\n    )}\n  >\n    <div className=\"leading-normal\">{children}</div>\n  </td>\n)\n\nexport const TableHeaderCell: React.FC<TableHeaderCellProps> = ({\n  children,\n  align = 'left',\n  className,\n  ...props\n}) => (\n  <th\n    {...props}\n    className={buildClassName(\n      'px-3 py-3 first:pl-4 last:pr-4 tracking-wider whitespace-nowrap text-gray-800 dark:text-gray-300',\n      TEXT_ALIGN[align],\n      className,\n    )}\n  >\n    {children}\n  </th>\n)\n\n/* ----------------------------------------------\n * Empty Row\n * ---------------------------------------------- */\nexport const EmptyTableRow: React.FC<EmptyTableRowProps> = ({\n  children,\n  colSpan = 1,\n  contentClass,\n}) => (\n  <tr className=\"bg-white dark:bg-gray-900\">\n    <td colSpan={colSpan} className=\"px-4 py-8\">\n      <div\n        className={buildClassName(\n          'p-6 text-center space-y-3 flex flex-col items-center justify-center',\n          contentClass,\n        )}\n      >\n        {children}\n      </div>\n    </td>\n  </tr>\n)\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/es/components/Tabs/Tabs.js

@@ -0,0 +1,51 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Fragment } from 'react';
+import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/react';
+import { buildClassName } from '../../utils/build-classname.js';
+
+const Tabs = ({ tabs, defaultIndex = 0, selectedIndex, onChange, variant = 'underline', orientation = 'horizontal', stretch = false, className = '', listClass = '', panelsClass = '', }) => {
+    const isVertical = orientation === 'vertical';
+    return (jsxs(TabGroup, { defaultIndex: defaultIndex, selectedIndex: selectedIndex, onChange: onChange, vertical: isVertical, className: buildClassName(isVertical && 'flex gap-4', stretch && !isVertical && 'w-full', className), children: [jsx(TabList, { className: buildClassName(isVertical ? 'flex flex-col gap-1' : 'flex gap-2', stretch && !isVertical && 'w-full', listClass), children: tabs.map((tab, idx) => {
+                    var _a;
+                    return (jsx(Tab, { disabled: tab.disabled, as: Fragment, children: ({ selected }) => (jsxs("button", { disabled: tab.disabled, className: buildTabClass({
+                                selected,
+                                variant,
+                                stretch,
+                                isVertical,
+                                tabClass: tab.tabClass,
+                            }), children: [tab.icon && jsx("span", { className: "inline-flex shrink-0", children: tab.icon }), tab.label] })) }, (_a = tab.id) !== null && _a !== void 0 ? _a : idx));
+                }) }), jsx(TabPanels, { className: buildClassName(isVertical ? 'flex-1' : 'mt-3', panelsClass), children: tabs.map((tab, idx) => {
+                    var _a;
+                    return (jsx(TabPanel, { className: tab.panelClass !== undefined
+                            ? tab.panelClass
+                            : 'rounded-lg bg-white dark:bg-gray-800 p-4 shadow-sm', children: tab.content }, (_a = tab.id) !== null && _a !== void 0 ? _a : idx));
+                }) })] }));
+};
+function buildTabClass({ selected, variant, stretch, isVertical, tabClass, }) {
+    const base = buildClassName('inline-flex items-center gap-1.5 text-sm font-medium transition focus:outline-none focus-visible:outline-none focus:ring-0 select-none', 'disabled:opacity-40 disabled:cursor-not-allowed disabled:pointer-events-none', stretch && !isVertical && 'flex-1 justify-center');
+    let variantClass;
+    switch (variant) {
+        case 'underline':
+            variantClass = isVertical
+                ? buildClassName('px-3 py-2 w-full text-left border-l-2', selected
+                    ? 'border-[var(--ui-primary)] text-gray-900 dark:text-white'
+                    : 'border-transparent text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:border-[var(--ui-border)]')
+                : buildClassName('px-3 py-1.5 relative text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white', selected &&
+                    'text-gray-900 dark:text-white after:absolute after:z-10 after:left-0 after:right-0 after:-bottom-1 after:h-0.5 after:bg-[var(--ui-primary)]');
+            break;
+        case 'segmented':
+            variantClass = buildClassName('px-3 py-1.5 rounded-lg', selected
+                ? 'bg-[var(--ui-primary)] text-white'
+                : 'text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700');
+            break;
+        case 'solid':
+            variantClass = buildClassName('px-3 py-1.5 rounded-md', selected
+                ? 'bg-gray-900 dark:bg-gray-700 text-white'
+                : 'bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-700');
+            break;
+    }
+    return buildClassName(base, variantClass, tabClass);
+}
+
+export { Tabs };
+//# sourceMappingURL=Tabs.js.map

package/dist/es/components/Tabs/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sources":["../../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import React, { Fragment } from 'react'\nimport { Tab, TabGroup, TabList, TabPanels, TabPanel } from '@headlessui/react'\nimport { buildClassName } from '../../utils/build-classname'\nimport { TabsProps } from './Tabs.types'\n\nexport const Tabs: React.FC<TabsProps> = ({\n  tabs,\n  defaultIndex = 0,\n  selectedIndex,\n  onChange,\n  variant = 'underline',\n  orientation = 'horizontal',\n  stretch = false,\n  className = '',\n  listClass = '',\n  panelsClass = '',\n}) => {\n  const isVertical = orientation === 'vertical'\n\n  return (\n    <TabGroup\n      defaultIndex={defaultIndex}\n      selectedIndex={selectedIndex}\n      onChange={onChange}\n      vertical={isVertical}\n      className={buildClassName(\n        isVertical && 'flex gap-4',\n        stretch && !isVertical && 'w-full',\n        className,\n      )}\n    >\n      <TabList\n        className={buildClassName(\n          isVertical ? 'flex flex-col gap-1' : 'flex gap-2',\n          stretch && !isVertical && 'w-full',\n          listClass,\n        )}\n      >\n        {tabs.map((tab, idx) => (\n          <Tab key={tab.id ?? idx} disabled={tab.disabled} as={Fragment}>\n            {({ selected }) => (\n              <button\n                disabled={tab.disabled}\n                className={buildTabClass({\n                  selected,\n                  variant,\n                  stretch,\n                  isVertical,\n                  tabClass: tab.tabClass,\n                })}\n              >\n                {tab.icon && <span className=\"inline-flex shrink-0\">{tab.icon}</span>}\n                {tab.label}\n              </button>\n            )}\n          </Tab>\n        ))}\n      </TabList>\n\n      <TabPanels className={buildClassName(isVertical ? 'flex-1' : 'mt-3', panelsClass)}>\n        {tabs.map((tab, idx) => (\n          <TabPanel\n            key={tab.id ?? idx}\n            className={\n              tab.panelClass !== undefined\n                ? tab.panelClass\n                : 'rounded-lg bg-white dark:bg-gray-800 p-4 shadow-sm'\n            }\n          >\n            {tab.content}\n          </TabPanel>\n        ))}\n      </TabPanels>\n    </TabGroup>\n  )\n}\n\nfunction buildTabClass({\n  selected,\n  variant,\n  stretch,\n  isVertical,\n  tabClass,\n}: {\n  selected: boolean\n  variant: 'underline' | 'segmented' | 'solid'\n  stretch?: boolean\n  isVertical?: boolean\n  tabClass?: string\n}) {\n  const base = buildClassName(\n    'inline-flex items-center gap-1.5 text-sm font-medium transition focus:outline-none focus-visible:outline-none focus:ring-0 select-none',\n    'disabled:opacity-40 disabled:cursor-not-allowed disabled:pointer-events-none',\n    stretch && !isVertical && 'flex-1 justify-center',\n  )\n\n  let variantClass: string\n\n  switch (variant) {\n    case 'underline':\n      variantClass = isVertical\n        ? buildClassName(\n            'px-3 py-2 w-full text-left border-l-2',\n            selected\n              ? 'border-[var(--ui-primary)] text-gray-900 dark:text-white'\n              : 'border-transparent text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:border-[var(--ui-border)]',\n          )\n        : buildClassName(\n            'px-3 py-1.5 relative text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white',\n            selected &&\n              'text-gray-900 dark:text-white after:absolute after:z-10 after:left-0 after:right-0 after:-bottom-1 after:h-0.5 after:bg-[var(--ui-primary)]',\n          )\n      break\n\n    case 'segmented':\n      variantClass = buildClassName(\n        'px-3 py-1.5 rounded-lg',\n        selected\n          ? 'bg-[var(--ui-primary)] text-white'\n          : 'text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700',\n      )\n      break\n\n    case 'solid':\n      variantClass = buildClassName(\n        'px-3 py-1.5 rounded-md',\n        selected\n          ? 'bg-gray-900 dark:bg-gray-700 text-white'\n          : 'bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-700',\n      )\n      break\n  }\n\n  return buildClassName(base, variantClass, tabClass)\n}\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/es/components/TextContent/TextContent.js

@@ -0,0 +1,45 @@
+import React__default, { forwardRef } from 'react';
+import { buildClassName } from '../../utils/build-classname.js';
+
+const sizeClassMap = {
+    xs: 'text-xs/5',
+    sm: 'text-sm/6',
+    md: 'text-base/7',
+    lg: 'text-lg/8',
+    xl: 'text-xl/9',
+};
+const weightClassMap = {
+    light: 'font-light',
+    normal: 'font-normal',
+    medium: 'font-medium',
+    semibold: 'font-semibold',
+    bold: 'font-bold',
+};
+const TextContent = forwardRef((props, ref) => {
+    const { as = 'span', size, weight, xsmall = false, small = false, strong = false, muted = false, error = false, success = false, warning = false, info = false, invert = false, monospace = false, truncate = false, className, children, ...rest } = props;
+    const textColorClass = error
+        ? 'text-[var(--ui-text-danger)]'
+        : success
+            ? 'text-[var(--ui-success)]'
+            : warning
+                ? 'text-[var(--ui-warning)]'
+                : info
+                    ? 'text-[var(--ui-info)]'
+                    : muted
+                        ? invert
+                            ? 'text-gray-300 dark:text-gray-600'
+                            : 'text-[var(--ui-text-muted)]'
+                        : invert
+                            ? 'text-white dark:text-black'
+                            : 'text-[var(--ui-text)]';
+    return React__default.createElement(as, {
+        ref,
+        className: buildClassName(textColorClass, size ? sizeClassMap[size] : xsmall ? 'text-xs/5' : small ? 'text-sm/6' : undefined, weight ? weightClassMap[weight] : strong ? 'font-semibold' : undefined, monospace && 'font-mono', truncate && 'truncate inline-block max-w-full', className),
+        ...rest,
+        children,
+    });
+});
+TextContent.displayName = 'TextContent';
+
+export { TextContent };
+//# sourceMappingURL=TextContent.js.map

package/dist/es/components/TextContent/TextContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextContent.js","sources":["../../../../../src/components/TextContent/TextContent.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\nimport { buildClassName } from '../../utils/build-classname'\nimport type { TextContentProps, TextContentSize, TextContentWeight } from './TextContent.types'\n\nconst sizeClassMap: Record<TextContentSize, string> = {\n  xs: 'text-xs/5',\n  sm: 'text-sm/6',\n  md: 'text-base/7',\n  lg: 'text-lg/8',\n  xl: 'text-xl/9',\n}\n\nconst weightClassMap: Record<TextContentWeight, string> = {\n  light: 'font-light',\n  normal: 'font-normal',\n  medium: 'font-medium',\n  semibold: 'font-semibold',\n  bold: 'font-bold',\n}\n\nexport const TextContent = forwardRef<HTMLElement, TextContentProps>((props, ref) => {\n  const {\n    as = 'span',\n    size,\n    weight,\n    xsmall = false,\n    small = false,\n    strong = false,\n    muted = false,\n    error = false,\n    success = false,\n    warning = false,\n    info = false,\n    invert = false,\n    monospace = false,\n    truncate = false,\n    className,\n    children,\n    ...rest\n  } = props\n\n  const textColorClass = error\n    ? 'text-[var(--ui-text-danger)]'\n    : success\n      ? 'text-[var(--ui-success)]'\n      : warning\n        ? 'text-[var(--ui-warning)]'\n        : info\n          ? 'text-[var(--ui-info)]'\n          : muted\n            ? invert\n              ? 'text-gray-300 dark:text-gray-600'\n              : 'text-[var(--ui-text-muted)]'\n            : invert\n              ? 'text-white dark:text-black'\n              : 'text-[var(--ui-text)]'\n\n  return React.createElement(as, {\n    ref,\n    className: buildClassName(\n      textColorClass,\n      size ? sizeClassMap[size] : xsmall ? 'text-xs/5' : small ? 'text-sm/6' : undefined,\n      weight ? weightClassMap[weight] : strong ? 'font-semibold' : undefined,\n      monospace && 'font-mono',\n      truncate && 'truncate inline-block max-w-full',\n      className,\n    ),\n    ...rest,\n    children,\n  })\n})\n\nTextContent.displayName = 'TextContent'\n"],"names":["React"],"mappings":";;;AAIA,MAAM,YAAY,GAAoC;AACpD,IAAA,EAAE,EAAE,WAAW;AACf,IAAA,EAAE,EAAE,WAAW;AACf,IAAA,EAAE,EAAE,aAAa;AACjB,IAAA,EAAE,EAAE,WAAW;AACf,IAAA,EAAE,EAAE,WAAW;CAChB;AAED,MAAM,cAAc,GAAsC;AACxD,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,MAAM,EAAE,aAAa;AACrB,IAAA,MAAM,EAAE,aAAa;AACrB,IAAA,QAAQ,EAAE,eAAe;AACzB,IAAA,IAAI,EAAE,WAAW;CAClB;AAEM,MAAM,WAAW,GAAG,UAAU,CAAgC,CAAC,KAAK,EAAE,GAAG,KAAI;AAClF,IAAA,MAAM,EACJ,EAAE,GAAG,MAAM,EACX,IAAI,EACJ,MAAM,EACN,MAAM,GAAG,KAAK,EACd,KAAK,GAAG,KAAK,EACb,MAAM,GAAG,KAAK,EACd,KAAK,GAAG,KAAK,EACb,KAAK,GAAG,KAAK,EACb,OAAO,GAAG,KAAK,EACf,OAAO,GAAG,KAAK,EACf,IAAI,GAAG,KAAK,EACZ,MAAM,GAAG,KAAK,EACd,SAAS,GAAG,KAAK,EACjB,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,GAAG,KAAK;IAET,MAAM,cAAc,GAAG;AACrB,UAAE;AACF,UAAE;AACA,cAAE;AACF,cAAE;AACA,kBAAE;AACF,kBAAE;AACA,sBAAE;AACF,sBAAE;AACA,0BAAE;AACA,8BAAE;AACF,8BAAE;AACJ,0BAAE;AACA,8BAAE;8BACA,uBAAuB;AAErC,IAAA,OAAOA,cAAK,CAAC,aAAa,CAAC,EAAE,EAAE;QAC7B,GAAG;AACH,QAAA,SAAS,EAAE,cAAc,CACvB,cAAc,EACd,IAAI,GAAG,YAAY,CAAC,IAAI,CAAC,GAAG,MAAM,GAAG,WAAW,GAAG,KAAK,GAAG,WAAW,GAAG,SAAS,EAClF,MAAM,GAAG,cAAc,CAAC,MAAM,CAAC,GAAG,MAAM,GAAG,eAAe,GAAG,SAAS,EACtE,SAAS,IAAI,WAAW,EACxB,QAAQ,IAAI,kCAAkC,EAC9C,SAAS,CACV;AACD,QAAA,GAAG,IAAI;QACP,QAAQ;AACT,KAAA,CAAC;AACJ,CAAC;AAED,WAAW,CAAC,WAAW,GAAG,aAAa;;;;"}

package/dist/es/components/Textarea/Textarea.js

@@ -0,0 +1,62 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef, useImperativeHandle, useState, useEffect } from 'react';
+import { Label } from '../Label/Label.js';
+import { isEmpty } from '../../utils/is-empty.js';
+import { buildClassName } from '../../utils/build-classname.js';
+import { TextContent } from '../TextContent/TextContent.js';
+
+const sizeClasses = {
+    sm: {
+        textarea: 'px-2.5 py-1.5 text-xs leading-5 min-h-[60px]',
+        text: 'text-xs',
+    },
+    md: {
+        textarea: 'px-3.5 py-2 text-sm leading-6 min-h-[80px]',
+        text: 'text-sm',
+    },
+    lg: {
+        textarea: 'px-4 py-2.5 text-base leading-7 min-h-[100px]',
+        text: 'text-base',
+    },
+};
+const resizeClasses = {
+    none: 'resize-none',
+    vertical: 'resize-y',
+    horizontal: 'resize-x',
+    both: 'resize',
+};
+const Textarea = forwardRef((props, ref) => {
+    const { name, id = name, label = null, labelHint = null, className = '', labelClass = '', labelWrapperClass = '', containerClass = '', error, showErrorMessage = true, rightGroup = null, leftGroup = null, size = 'md', autoSize = false, showCount = false, helperText, resize = 'vertical', value, defaultValue, onChange, maxLength, ...inputProps } = props;
+    const innerRef = useRef(null);
+    useImperativeHandle(ref, () => innerRef.current);
+    const [uncontrolledValue, setUncontrolledValue] = useState(String(defaultValue !== null && defaultValue !== void 0 ? defaultValue : ''));
+    const isControlled = value !== undefined;
+    const currentVal = isControlled ? String(value !== null && value !== void 0 ? value : '') : uncontrolledValue;
+    const charLength = currentVal.length;
+    // Handle Auto-Resize behavior
+    useEffect(() => {
+        if (autoSize && innerRef.current) {
+            innerRef.current.style.height = 'auto';
+            innerRef.current.style.height = `${innerRef.current.scrollHeight}px`;
+        }
+    }, [autoSize, currentVal]);
+    const handleTextareaChange = (e) => {
+        if (!isControlled) {
+            setUncontrolledValue(e.target.value);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(e);
+    };
+    const hasError = !isEmpty(error);
+    const hasRightGroup = rightGroup != null && rightGroup !== undefined;
+    const hasLeftGroup = leftGroup != null && leftGroup !== undefined;
+    const currentSize = sizeClasses[size] || sizeClasses.md;
+    return (jsxs("div", { className: buildClassName('group', hasError && 'has-error', containerClass), children: [label && (jsxs("div", { className: buildClassName('flex items-center justify-between mb-1.5', labelWrapperClass), children: [jsx(Label, { className: labelClass, htmlFor: id, children: label }), labelHint && jsx(TextContent, { xsmall: true, children: labelHint })] })), jsxs("div", { className: "relative", children: [hasLeftGroup && (jsx("span", { className: "absolute top-2.5 left-3 flex items-center justify-center text-gray-400 dark:text-gray-500", children: leftGroup })), jsx("textarea", { ref: innerRef, autoComplete: "off", ...inputProps, value: value, defaultValue: defaultValue, onChange: handleTextareaChange, maxLength: maxLength, name: name, id: id, className: buildClassName('transition-all duration-150', 'block w-full rounded-lg bg-white', currentSize.textarea, autoSize ? 'resize-none overflow-hidden' : resizeClasses[resize], 'text-gray-900 outline outline-1 -outline-offset-1', hasError
+                            ? '!outline-red-500 !ring-1 !ring-red-500/50 dark:!outline-red-500'
+                            : 'outline-[var(--ui-border)]', 'focus:outline-[var(--ui-focus-ring)] focus:outline-2 focus:-outline-offset-2', 'dark:bg-gray-700 dark:placeholder-gray-400 placeholder:text-gray-400 dark:text-white', 'disabled:pointer-events-none disabled:bg-gray-100 disabled:outline-[var(--ui-border-muted)]', 'dark:disabled:bg-gray-800 dark:disabled:text-gray-600 dark:disabled:placeholder-gray-600 dark:disabled:outline-[var(--ui-border-muted)]', hasRightGroup ? 'pe-10' : '', hasLeftGroup ? 'ps-10' : '', className) }), hasRightGroup && (jsx("span", { className: "absolute end-3 top-2.5 flex items-center justify-center text-gray-400 dark:text-gray-500", children: rightGroup }))] }), (showErrorMessage && error) || helperText || showCount ? (jsxs("div", { className: "mt-1.5 flex items-center justify-between gap-2 text-xs", children: [jsx("div", { className: "min-w-0 flex-1", children: showErrorMessage && error ? (jsx(TextContent, { error: true, small: true, children: error })) : helperText ? (jsx(TextContent, { muted: true, small: true, children: helperText })) : null }), showCount && (jsxs("span", { className: buildClassName('text-[11px] font-medium shrink-0 ml-auto', maxLength && charLength >= maxLength
+                            ? 'text-red-500 font-semibold'
+                            : 'text-gray-400 dark:text-gray-500'), children: [charLength, maxLength ? ` / ${maxLength}` : ''] }))] })) : null] }));
+});
+Textarea.displayName = 'Textarea';
+
+export { Textarea };
+//# sourceMappingURL=Textarea.js.map