czero 0.2.0 → 0.2.5

package/dist/react/index.js

@@ -139,12 +139,13 @@ function getElementRef$6(element) {
   return element.props.ref || element.ref;
 }
 
-const Button = React.forwardRef(({ className = "", variant = "primary", size = "md", loading = false, disabled, asChild = false, children, ...props }, ref) => {
+const Button = React.forwardRef(({ className = "", variant = "primary", size = "md", loading = false, fullWidth = false, disabled, asChild = false, children, ...props }, ref) => {
     const classes = [
         "cz-btn",
         `cz-btn-${variant}`,
         `cz-btn-${size}`,
         loading && "cz-btn-loading",
+        fullWidth && "cz-btn-full",
         className,
     ].filter(Boolean).join(" ");
     const Comp = asChild ? Slot$3 : "button";
@@ -153,28 +154,47 @@ const Button = React.forwardRef(({ className = "", variant = "primary", size = "
     if (asChild) {
         return (jsx(Comp, { ref: ref, className: classes, ...props, children: children }));
     }
-    return (jsxs("button", { ref: ref, className: classes, disabled: disabled || loading, ...props, children: [loading && (jsx("svg", { className: "cz-btn-spinner", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeDasharray: "31.416", strokeDashoffset: "10" }) })), jsx("span", { className: loading ? "cz-btn-content" : undefined, children: children })] }));
+    return (jsxs("button", { ref: ref, className: classes, disabled: disabled || loading, ...props, children: [loading && (jsx("svg", { className: "cz-btn-spinner", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeDasharray: "31.416", strokeDashoffset: "10" }) })), children] }));
 });
 Button.displayName = "Button";
 
-const Input = React.forwardRef(({ className = "", label, description, error, size = "md", id, leftIcon, rightIcon, onClear, value, disabled, ...props }, ref) => {
+const cx$1 = (...parts) => parts.filter(Boolean).join(" ");
+const normalizeSize$1 = (size) => {
+    if (size === "small")
+        return "sm";
+    if (size === "large")
+        return "lg";
+    if (size === "medium" || size === undefined)
+        return "md";
+    return size;
+};
+const Input = React.forwardRef(({ className = "", label, description, error, size = "md", variant = "default", id, icon, leftIcon, rightIcon, onClear, type = "text", showPasswordToggle = true, value, disabled, readOnly, ...props }, ref) => {
     const inputId = id || React.useId();
     const hasValue = value !== undefined && value !== "";
+    const resolvedSize = normalizeSize$1(size);
+    const resolvedLeftIcon = leftIcon ?? icon;
+    const isPassword = type === "password";
+    const canTogglePassword = isPassword && showPasswordToggle && !disabled && !readOnly;
+    const [showPassword, setShowPassword] = React.useState(false);
+    const inputType = canTogglePassword ? (showPassword ? "text" : "password") : type;
     const wrapperClasses = [
         "cz-input-wrapper",
-        `cz-input-wrapper-${size}`,
-        leftIcon && "cz-input-has-left-icon",
-        (rightIcon || onClear) && "cz-input-has-right-icon",
+        `cz-input-wrapper-${resolvedSize}`,
+        `cz-input-wrapper-variant-${variant}`,
+        resolvedLeftIcon && "cz-input-has-left-icon",
+        (rightIcon || onClear || canTogglePassword) && "cz-input-has-right-icon",
         error && "cz-input-wrapper-error",
+        readOnly && "cz-input-wrapper-readonly",
         disabled && "cz-disabled",
     ].filter(Boolean).join(" ");
     const inputClasses = [
         "cz-input",
-        `cz-input-${size}`,
+        `cz-input-${resolvedSize}`,
+        `cz-input-variant-${variant}`,
         error && "cz-input-error",
         className,
     ].filter(Boolean).join(" ");
-    return (jsxs("div", { className: "cz-input-field", children: [label && (jsx("label", { htmlFor: inputId, className: "cz-label", children: label })), jsxs("div", { className: wrapperClasses, children: [leftIcon && (jsx("span", { className: "cz-input-icon cz-input-icon-left", children: leftIcon })), jsx("input", { ref: ref, id: inputId, className: inputClasses, value: value, disabled: disabled, ...props }), onClear && hasValue && !disabled && (jsx("button", { type: "button", className: "cz-input-clear", onClick: onClear, tabIndex: -1, "aria-label": "Clear input", children: jsx("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M12 4L4 12M4 4L12 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })), rightIcon && !onClear && (jsx("span", { className: "cz-input-icon cz-input-icon-right", children: rightIcon }))] }), description && !error && (jsx("span", { className: "cz-input-description", children: description })), error && jsx("span", { className: "cz-error", children: error })] }));
+    return (jsxs("div", { className: "cz-input-field", children: [label && (jsx("label", { htmlFor: inputId, className: "cz-label", children: label })), jsxs("div", { className: wrapperClasses, children: [resolvedLeftIcon && (jsx("span", { className: "cz-input-icon cz-input-icon-left", children: resolvedLeftIcon })), jsx("input", { ref: ref, id: inputId, className: inputClasses, type: inputType, value: value, disabled: disabled, readOnly: readOnly, ...props }), canTogglePassword ? (jsx("button", { type: "button", className: cx$1("cz-input-password-toggle", showPassword && "cz-input-password-toggle-active"), onClick: () => setShowPassword((prev) => !prev), tabIndex: -1, "aria-label": showPassword ? "Hide password" : "Show password", children: showPassword ? (jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M3 3L21 21", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M10.58 10.58A2 2 0 0013.41 13.41", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M9.88 5.09A10.94 10.94 0 0112 5c5 0 9.27 3.11 11 7.5a12.3 12.3 0 01-2.87 4.31", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M6.61 6.61A13.53 13.53 0 001 12.5C2.73 16.89 7 20 12 20a10.93 10.93 0 005.39-1.39", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] })) : (jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M1 12.5C2.73 8.11 7 5 12 5s9.27 3.11 11 7.5C21.27 16.89 17 20 12 20S2.73 16.89 1 12.5z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("circle", { cx: "12", cy: "12", r: "3", stroke: "currentColor", strokeWidth: "2" })] })) })) : null, onClear && hasValue && !disabled && !readOnly && (jsx("button", { type: "button", className: "cz-input-clear", onClick: onClear, tabIndex: -1, "aria-label": "Clear input", children: jsx("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M12 4L4 12M4 4L12 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })), rightIcon && !onClear && !canTogglePassword && (jsx("span", { className: "cz-input-icon cz-input-icon-right", children: rightIcon }))] }), description && !error && (jsx("span", { className: "cz-input-description", children: description })), typeof error === "string" && error.length > 0 ? (jsx("span", { className: "cz-error", children: error })) : null] }));
 });
 Input.displayName = "Input";
 
@@ -216,6 +236,77 @@ const Badge = React.forwardRef(({ className = "", variant = "default", size = "m
 });
 Badge.displayName = "Badge";
 
+const STATUS_TONE_MAP = {
+    "checked in": "success",
+    active: "success",
+    present: "success",
+    success: "success",
+    "checked out": "danger",
+    inactive: "danger",
+    absent: "danger",
+    danger: "danger",
+    error: "danger",
+    maintenance: "warning",
+    pending: "warning",
+    warning: "warning",
+};
+const TONE_STYLES = {
+    success: {
+        bg: "var(--cz-status-badge-success-bg, var(--color-success-bg-light, hsl(var(--cz-color-success) / 0.12)))",
+        text: "var(--cz-status-badge-success-text, var(--color-success-dark, hsl(var(--cz-color-success))))",
+        dot: "var(--cz-status-badge-success-dot, var(--color-success, hsl(var(--cz-color-success))))",
+    },
+    danger: {
+        bg: "var(--cz-status-badge-danger-bg, var(--color-danger-bg-light, hsl(var(--cz-color-danger) / 0.12)))",
+        text: "var(--cz-status-badge-danger-text, var(--color-danger-dark, hsl(var(--cz-color-danger))))",
+        dot: "var(--cz-status-badge-danger-dot, var(--color-danger, hsl(var(--cz-color-danger))))",
+    },
+    warning: {
+        bg: "var(--cz-status-badge-warning-bg, var(--color-warning-bg-light, hsl(var(--cz-color-warning) / 0.12)))",
+        text: "var(--cz-status-badge-warning-text, var(--color-warning-dark, hsl(var(--cz-color-warning))))",
+        dot: "var(--cz-status-badge-warning-dot, var(--color-warning, hsl(var(--cz-color-warning))))",
+    },
+    primary: {
+        bg: "var(--cz-status-badge-primary-bg, var(--color-primary-bg, hsl(var(--cz-color-primary) / 0.12)))",
+        text: "var(--cz-status-badge-primary-text, var(--color-primary-dark, hsl(var(--cz-color-primary))))",
+        dot: "var(--cz-status-badge-primary-dot, var(--color-primary, hsl(var(--cz-color-primary))))",
+    },
+};
+function normalizeStatus(status) {
+    if (typeof status === "string")
+        return status.trim().toLowerCase();
+    return String(status ?? "").trim().toLowerCase();
+}
+const StatusBadge = React.forwardRef(({ status, children, tone, showDot = true, className = "", style = {}, ...props }, ref) => {
+    const label = children ?? status;
+    const normalizedStatus = normalizeStatus(status ?? label);
+    const resolvedTone = tone ?? STATUS_TONE_MAP[normalizedStatus] ?? "primary";
+    const colors = TONE_STYLES[resolvedTone];
+    const baseStyles = {
+        display: "inline-flex",
+        alignItems: "center",
+        padding: "var(--cz-status-badge-padding-y, 0.25rem) var(--cz-status-badge-padding-x, 0.625rem)",
+        borderRadius: "var(--cz-status-badge-border-radius, 9999px)",
+        fontSize: "var(--cz-status-badge-font-size, 0.75rem)",
+        lineHeight: "var(--cz-status-badge-line-height, 1rem)",
+        fontWeight: "var(--cz-status-badge-font-weight, var(--font-weight-medium, var(--cz-font-weight-medium)))",
+        backgroundColor: colors.bg,
+        color: colors.text,
+        whiteSpace: "nowrap",
+        ...style,
+    };
+    const dotStyles = {
+        width: "var(--cz-status-badge-dot-size, 0.5rem)",
+        height: "var(--cz-status-badge-dot-size, 0.5rem)",
+        borderRadius: "9999px",
+        marginRight: "var(--cz-status-badge-dot-gap, 0.375rem)",
+        backgroundColor: colors.dot,
+        flexShrink: 0,
+    };
+    return (jsxs(Badge, { ref: ref, variant: "default", size: "md", className: className, style: baseStyles, ...props, children: [showDot && jsx("span", { "aria-hidden": "true", style: dotStyles }), label] }));
+});
+StatusBadge.displayName = "StatusBadge";
+
 const Textarea = React.forwardRef(({ className = "", label, description, error, size = "md", id, autoResize = false, maxRows, disabled, onInput, style, ...props }, ref) => {
     const textareaId = id || React.useId();
     const internalRef = React.useRef(null);
@@ -5675,13 +5766,111 @@ var List = TabsList$1;
 var Trigger$4 = TabsTrigger$1;
 var Content$2 = TabsContent$1;
 
-const TabsRoot = React.forwardRef(({ className = "", ...props }, ref) => (jsx(Root2$4, { ref: ref, className: `cz-tabs ${className}`, ...props })));
+const cx = (...parts) => parts.filter(Boolean).join(" ");
+const toTabKey = (value) => {
+    if (value === undefined)
+        return undefined;
+    return String(value);
+};
+const coerceValueByReference = (value, reference) => {
+    if (typeof reference === "number") {
+        const parsed = Number(value);
+        return Number.isNaN(parsed) ? value : parsed;
+    }
+    if (typeof reference === "boolean") {
+        return value === "true";
+    }
+    return value;
+};
+const normalizeSize = (size) => {
+    if (size === "small")
+        return "sm";
+    if (size === "large")
+        return "lg";
+    if (size === "medium" || size === undefined)
+        return "md";
+    return size;
+};
+const normalizeVariant = (variant) => {
+    if (variant === "pills" || variant === "enclosed")
+        return variant;
+    return "underline";
+};
+const TabsRoot = React.forwardRef(({ className = "", children, defaultValue, value, activeTab, onValueChange, onChange, setActiveTab, items, tabs, renderItem, renderContent, variant, size = "md", fullWidth = false, showBorder = true, disabled = false, listClassName = "", listStyle, triggerClassName = "", triggerStyle, ...props }, ref) => {
+    const dataItems = React.useMemo(() => {
+        if (Array.isArray(items))
+            return items;
+        if (Array.isArray(tabs))
+            return tabs;
+        return undefined;
+    }, [items, tabs]);
+    const hasItems = Boolean(dataItems && dataItems.length > 0);
+    const resolvedVariant = normalizeVariant(variant ?? (hasItems ? "pills" : "underline"));
+    const resolvedSize = normalizeSize(size);
+    const controlledValue = value !== undefined ? value : activeTab;
+    const resolvedDefaultValue = defaultValue !== undefined
+        ? defaultValue
+        : controlledValue === undefined && hasItems
+            ? dataItems?.[0]?.value
+            : undefined;
+    const controlledKey = toTabKey(controlledValue);
+    const defaultKey = toTabKey(resolvedDefaultValue);
+    const [internalActiveKey, setInternalActiveKey] = React.useState(controlledKey ?? defaultKey);
+    React.useEffect(() => {
+        if (controlledKey !== undefined) {
+            setInternalActiveKey(controlledKey);
+        }
+    }, [controlledKey]);
+    const itemValueMap = React.useMemo(() => {
+        const map = new Map();
+        dataItems?.forEach((item) => {
+            map.set(String(item.value), item.value);
+        });
+        return map;
+    }, [dataItems]);
+    const referenceValue = controlledValue !== undefined
+        ? controlledValue
+        : defaultValue !== undefined
+            ? defaultValue
+            : dataItems?.[0]?.value;
+    const handleValueChange = React.useCallback((nextKey) => {
+        setInternalActiveKey(nextKey);
+        onValueChange?.(nextKey);
+        const resolvedValue = itemValueMap.has(nextKey)
+            ? itemValueMap.get(nextKey)
+            : coerceValueByReference(nextKey, referenceValue);
+        onChange?.(resolvedValue);
+        setActiveTab?.(resolvedValue);
+    }, [itemValueMap, onChange, onValueChange, referenceValue, setActiveTab]);
+    const activeKey = controlledKey ?? internalActiveKey;
+    const shouldRenderAutoContent = hasItems &&
+        Boolean(dataItems?.some((item) => item.content !== undefined) || renderContent);
+    return (jsxs(Root2$4, { ref: ref, className: cx("cz-tabs", `cz-tabs--variant-${resolvedVariant}`, `cz-tabs--size-${resolvedSize}`, fullWidth && "cz-tabs--full-width", !showBorder && "cz-tabs--no-border", className), value: controlledKey, defaultValue: controlledKey === undefined ? defaultKey : undefined, onValueChange: handleValueChange, ...props, children: [hasItems ? (jsxs(Fragment, { children: [jsx(TabsList, { className: listClassName, style: listStyle, children: dataItems?.map((item) => {
+                            const itemKey = String(item.value);
+                            const isActive = activeKey === itemKey;
+                            const triggerNode = renderItem
+                                ? renderItem(item, { isActive })
+                                : item.label;
+                            return (jsx(TabsTrigger, { value: item.value, disabled: disabled || item.disabled, icon: item.icon, count: item.count, className: cx(triggerClassName, item.className), style: { ...triggerStyle, ...item.style }, children: triggerNode }, itemKey));
+                        }) }), shouldRenderAutoContent
+                        ? dataItems?.map((item) => {
+                            const itemKey = String(item.value);
+                            const isActive = activeKey === itemKey;
+                            const content = renderContent
+                                ? renderContent(item, { isActive })
+                                : item.content;
+                            if (content === undefined || content === null)
+                                return null;
+                            return (jsx(TabsContent, { value: item.value, children: content }, `content-${itemKey}`));
+                        })
+                        : null] })) : null, children] }));
+});
 TabsRoot.displayName = "Tabs";
-const TabsList = React.forwardRef(({ className = "", ...props }, ref) => (jsx(List, { ref: ref, className: `cz-tabs-list ${className}`, ...props })));
+const TabsList = React.forwardRef(({ className = "", ...props }, ref) => (jsx(List, { ref: ref, className: cx("cz-tabs-list", className), ...props })));
 TabsList.displayName = "Tabs.List";
-const TabsTrigger = React.forwardRef(({ className = "", ...props }, ref) => (jsx(Trigger$4, { ref: ref, className: `cz-tabs-trigger ${className}`, ...props })));
+const TabsTrigger = React.forwardRef(({ className = "", children, value, icon, count, ...props }, ref) => (jsxs(Trigger$4, { ref: ref, className: cx("cz-tabs-trigger", className), value: String(value), ...props, children: [icon ? jsx("span", { className: "cz-tabs-trigger-icon", children: icon }) : null, children, count !== undefined && count !== null ? (jsx("span", { className: "cz-tabs-trigger-count", children: count })) : null] })));
 TabsTrigger.displayName = "Tabs.Trigger";
-const TabsContent = React.forwardRef(({ className = "", ...props }, ref) => (jsx(Content$2, { ref: ref, className: `cz-tabs-content ${className}`, ...props })));
+const TabsContent = React.forwardRef(({ className = "", value, ...props }, ref) => (jsx(Content$2, { ref: ref, className: cx("cz-tabs-content", className), value: String(value), ...props })));
 TabsContent.displayName = "Tabs.Content";
 // ===== Export =====
 const Tabs = Object.assign(TabsRoot, {
@@ -7231,6 +7420,261 @@ const Dialog = Object.assign(DialogRoot, {
     Overlay: DialogOverlay,
 });
 
+const SIZE_WIDTH_MAP = {
+    sm: "28rem",
+    md: "36rem",
+    lg: "48rem",
+    xl: "64rem",
+    full: "min(96vw, 96rem)",
+};
+const MODAL_BASE_Z_INDEX = 60;
+const MODAL_LAYER_STEP = 2;
+let nextModalLayer = 0;
+function toCssDimension(value) {
+    if (value === undefined || value === null)
+        return undefined;
+    return typeof value === "number" ? `${value}px` : value;
+}
+const CloseIcon = () => (jsx("svg", { width: "16", height: "16", viewBox: "0 0 15 15", fill: "none", "aria-hidden": "true", children: jsx("path", { d: "M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z", fill: "currentColor", fillRule: "evenodd", clipRule: "evenodd" }) }));
+const Modal = React.forwardRef(({ open, defaultOpen, onOpenChange, isOpen, onClose, modal = true, trigger, title, description, children, footer, tabs, activeTab, onTabChange, hideTitle = false, size = "md", width, minHeight, fullHeight = false, showCloseButton = true, closeButtonVariant = "icon", closeButtonText = "Close", closeOnOverlay = true, closeOnEsc = true, portalContainer, overlayClassName = "", headerClassName = "", bodyClassName = "", footerClassName = "", className = "", style, onInteractOutside, onEscapeKeyDown, ...props }, ref) => {
+    const resolvedOpen = isOpen ?? open;
+    const isControlled = resolvedOpen !== undefined;
+    const resolvedDefaultOpen = defaultOpen ?? (!isControlled && !trigger ? true : undefined);
+    const [isOpenState, setIsOpenState] = React.useState(() => {
+        if (resolvedOpen !== undefined)
+            return resolvedOpen;
+        if (resolvedDefaultOpen !== undefined)
+            return resolvedDefaultOpen;
+        return false;
+    });
+    const [layerIndex, setLayerIndex] = React.useState(0);
+    const assignedLayerRef = React.useRef(null);
+    React.useEffect(() => {
+        if (resolvedOpen !== undefined) {
+            setIsOpenState(resolvedOpen);
+        }
+    }, [resolvedOpen]);
+    React.useEffect(() => {
+        if (!isOpenState) {
+            assignedLayerRef.current = null;
+            setLayerIndex(0);
+            return;
+        }
+        if (assignedLayerRef.current === null) {
+            assignedLayerRef.current = nextModalLayer++;
+        }
+        setLayerIndex(assignedLayerRef.current);
+    }, [isOpenState]);
+    const handleOpenChange = React.useCallback((nextOpen) => {
+        setIsOpenState(nextOpen);
+        if (!nextOpen) {
+            assignedLayerRef.current = null;
+        }
+        onOpenChange?.(nextOpen);
+        if (!nextOpen) {
+            onClose?.();
+        }
+    }, [onOpenChange, onClose]);
+    const hasOpenHandler = Boolean(onOpenChange || onClose);
+    const resolvedWidth = toCssDimension(width) ?? SIZE_WIDTH_MAP[size];
+    const resolvedMinHeight = toCssDimension(minHeight);
+    const overlayStyles = {
+        position: "fixed",
+        inset: 0,
+        zIndex: MODAL_BASE_Z_INDEX + layerIndex * MODAL_LAYER_STEP,
+        backgroundColor: "var(--cz-modal-overlay-bg, var(--color-bg-modal-overlay, rgba(15, 23, 42, 0.55)))",
+        backdropFilter: "blur(2px)",
+    };
+    const contentStyles = {
+        position: "fixed",
+        left: "50%",
+        top: "50%",
+        transform: "translate(-50%, -50%)",
+        zIndex: MODAL_BASE_Z_INDEX + layerIndex * MODAL_LAYER_STEP + 1,
+        backgroundColor: "var(--cz-modal-content-bg, var(--color-bg-primary, hsl(var(--cz-color-bg))))",
+        borderRadius: "var(--cz-modal-content-border-radius, var(--radius-modal, var(--cz-radius-lg)))",
+        border: "1px solid var(--cz-modal-content-border-color, hsl(var(--cz-color-border)))",
+        boxShadow: "var(--cz-modal-content-shadow, var(--shadow-modal, var(--cz-shadow-lg)))",
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden",
+        width: resolvedWidth,
+        maxWidth: "calc(100% - 2rem)",
+        maxHeight: "calc(100vh - 2rem)",
+        minHeight: resolvedMinHeight,
+        ...(fullHeight ? { height: "calc(100vh - 2rem)" } : null),
+        ...style,
+    };
+    const headerStyles = {
+        display: "flex",
+        alignItems: "flex-start",
+        justifyContent: "space-between",
+        gap: "var(--cz-spacing-md, 0.75rem)",
+        padding: "var(--cz-modal-header-padding, var(--cz-spacing-lg, 1rem) var(--cz-spacing-lg, 1rem) var(--cz-spacing-md, 0.75rem))",
+        borderBottom: "1px solid hsl(var(--cz-color-border))",
+        flexShrink: 0,
+    };
+    const headerTextStyles = {
+        minWidth: 0,
+        display: "flex",
+        flexDirection: "column",
+        gap: "0.25rem",
+    };
+    const titleStyles = {
+        margin: 0,
+        fontSize: "var(--cz-font-size-xl)",
+        fontWeight: "var(--cz-font-weight-semibold)",
+        color: "var(--color-primary, hsl(var(--cz-color-primary)))",
+        lineHeight: "var(--cz-font-lineHeight-tight)",
+    };
+    const descriptionStyles = {
+        margin: 0,
+        fontSize: "var(--cz-font-size-sm)",
+        color: "hsl(var(--cz-color-mutedFg))",
+    };
+    const bodyStyles = {
+        padding: "var(--cz-modal-body-padding, var(--cz-spacing-md, 0.75rem) var(--cz-spacing-lg, 1rem) var(--cz-spacing-lg, 1rem))",
+        overflowY: "auto",
+        flex: 1,
+    };
+    const footerStyles = {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "flex-end",
+        gap: "var(--cz-modal-footer-gap, var(--cz-spacing-md, 0.75rem))",
+        padding: "var(--cz-modal-footer-padding, var(--cz-spacing-md, 0.75rem) var(--cz-spacing-lg, 1rem))",
+        borderTop: "1px solid hsl(var(--cz-color-border))",
+        flexShrink: 0,
+    };
+    const hasTabs = Boolean(tabs && tabs.length > 0);
+    const shouldRenderTitle = Boolean(title) && !(hasTabs && hideTitle);
+    const shouldRenderDescription = Boolean(description) && !(hasTabs && hideTitle);
+    const tabsLayoutStyles = {
+        display: "flex",
+        flexDirection: "column",
+        gap: "var(--cz-spacing-sm, 0.5rem)",
+        width: "100%",
+        minWidth: 0,
+    };
+    const tabsTopRowStyles = {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: "var(--cz-spacing-md, 0.75rem)",
+    };
+    const tabsRowStyles = {
+        display: "flex",
+        alignItems: "center",
+        gap: "var(--cz-spacing-md, 0.75rem)",
+        minWidth: 0,
+    };
+    const tabsNavStyles = {
+        display: "flex",
+        alignItems: "center",
+        gap: 0,
+        overflowX: "auto",
+        overflowY: "hidden",
+        minWidth: 0,
+        flex: 1,
+        scrollbarWidth: "thin",
+        paddingBottom: "0.25rem",
+        marginBottom: "-0.25rem",
+    };
+    const getTabButtonStyles = (isActive, isDisabled) => ({
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "0.375rem",
+        padding: "0.5rem 0.75rem",
+        fontSize: "var(--cz-modal-tab-font-size, 13px)",
+        fontWeight: isActive
+            ? "var(--cz-font-weight-semibold)"
+            : "var(--cz-modal-tab-font-weight, var(--cz-font-weight-medium))",
+        color: isActive
+            ? "var(--cz-modal-tab-active-color, var(--color-primary, hsl(var(--cz-color-primary))))"
+            : "var(--cz-modal-tab-color, var(--color-text-muted, hsl(var(--cz-color-mutedFg))))",
+        backgroundColor: "transparent",
+        border: 0,
+        borderBottom: isActive
+            ? "2px solid var(--cz-modal-tab-active-border-color, var(--color-primary, hsl(var(--cz-color-primary))))"
+            : "2px solid transparent",
+        marginBottom: "-1px",
+        whiteSpace: "nowrap",
+        outline: "none",
+        boxShadow: "none",
+        cursor: isDisabled ? "not-allowed" : "pointer",
+        opacity: isDisabled ? 0.5 : 1,
+        transition: "all var(--cz-transition-fast)",
+    });
+    const contentAriaDescribedBy = shouldRenderDescription
+        ? props["aria-describedby"]
+        : undefined;
+    const contentAriaLabelledBy = shouldRenderTitle
+        ? props["aria-labelledby"]
+        : undefined;
+    const contentAriaLabel = props["aria-label"] ??
+        (typeof title === "string" && !shouldRenderTitle ? title : undefined);
+    const normalizeFooter = () => {
+        if (footer === undefined || footer === null)
+            return footer;
+        const directChildren = React.Children.toArray(footer);
+        if (directChildren.length !== 1) {
+            return footer;
+        }
+        const firstChild = directChildren[0];
+        if (!React.isValidElement(firstChild) || typeof firstChild.type !== "string") {
+            return footer;
+        }
+        const childProps = (firstChild.props ?? {});
+        const nestedChildren = React.Children.toArray(childProps.children);
+        if (nestedChildren.length <= 1) {
+            return footer;
+        }
+        const existingStyle = childProps.style ?? {};
+        return React.cloneElement(firstChild, {
+            style: {
+                display: existingStyle.display ?? "flex",
+                alignItems: existingStyle.alignItems ?? "center",
+                justifyContent: existingStyle.justifyContent ?? "flex-end",
+                gap: existingStyle.gap ??
+                    "var(--cz-modal-footer-gap, var(--cz-spacing-md, 0.75rem))",
+                ...existingStyle,
+            },
+        });
+    };
+    const normalizedFooter = normalizeFooter();
+    const handleInteractOutside = (event) => {
+        if (!closeOnOverlay) {
+            event.preventDefault();
+        }
+        onInteractOutside?.(event);
+    };
+    const handleEscapeKeyDown = (event) => {
+        if (!closeOnEsc) {
+            event.preventDefault();
+        }
+        onEscapeKeyDown?.(event);
+    };
+    const closeButton = showCloseButton ? (jsx(Close, { asChild: true, children: closeButtonVariant === "button" ? (jsx("button", { type: "button", className: "cz-modal-close-btn cz-btn cz-btn-primary cz-btn-sm", children: closeButtonText })) : (jsx("button", { type: "button", className: "cz-modal-close-icon", "aria-label": "Close", children: jsx(CloseIcon, {}) })) })) : null;
+    return (jsxs(Root$5, { open: resolvedOpen, defaultOpen: resolvedDefaultOpen, onOpenChange: hasOpenHandler ? handleOpenChange : onOpenChange, modal: modal, children: [trigger ? jsx(Trigger$3, { asChild: true, children: trigger }) : null, jsxs(Portal$2, { container: portalContainer, children: [jsx(Overlay, { className: `cz-modal-overlay ${overlayClassName}`.trim(), style: overlayStyles }), jsxs(Content$1, { ref: ref, className: `cz-modal-content cz-modal-size-${size} ${fullHeight ? "cz-modal-full-height" : ""} ${className}`.trim(), style: contentStyles, onInteractOutside: handleInteractOutside, onEscapeKeyDown: handleEscapeKeyDown, ...props, "aria-describedby": contentAriaDescribedBy, "aria-labelledby": contentAriaLabelledBy, "aria-label": contentAriaLabel, children: [(hasTabs ||
+                                shouldRenderTitle ||
+                                shouldRenderDescription ||
+                                closeButton) && (jsx("div", { className: `cz-modal-header ${headerClassName}`.trim(), style: headerStyles, children: hasTabs ? (jsxs("div", { className: "cz-modal-tabs-layout", style: tabsLayoutStyles, children: [!hideTitle &&
+                                            (shouldRenderTitle ||
+                                                shouldRenderDescription ||
+                                                closeButton) && (jsxs("div", { className: "cz-modal-tabs-top-row", style: tabsTopRowStyles, children: [(shouldRenderTitle || shouldRenderDescription) && (jsxs("div", { className: "cz-modal-header-text", style: headerTextStyles, children: [shouldRenderTitle ? (jsx(Title, { className: "cz-modal-title", style: titleStyles, children: title })) : null, shouldRenderDescription ? (jsx(Description, { className: "cz-modal-description", style: descriptionStyles, children: description })) : null] })), closeButton] })), jsxs("div", { className: "cz-modal-tabs-row", style: tabsRowStyles, children: [jsx("div", { className: "cz-modal-tabs-nav", style: tabsNavStyles, role: "tablist", "aria-label": "Modal tabs", children: tabs?.map((tab) => {
+                                                        const tabId = String(tab.id);
+                                                        const isActive = activeTab === tabId;
+                                                        const label = tab.label ?? tab.name ?? tabId;
+                                                        const isDisabled = Boolean(tab.disabled);
+                                                        return (jsxs("button", { type: "button", className: "cz-modal-tab-btn", role: "tab", "aria-selected": isActive, tabIndex: isActive ? 0 : -1, disabled: isDisabled, onClick: () => !isDisabled && onTabChange?.(tabId), style: getTabButtonStyles(isActive, isDisabled), children: [tab.icon ? (jsx("span", { style: {
+                                                                        display: "inline-flex",
+                                                                        alignItems: "center",
+                                                                    }, children: tab.icon })) : null, jsx("span", { children: label })] }, tabId));
+                                                    }) }), hideTitle ? closeButton : null] })] })) : (jsxs(Fragment, { children: [(shouldRenderTitle || shouldRenderDescription) && (jsxs("div", { className: "cz-modal-header-text", style: headerTextStyles, children: [shouldRenderTitle ? (jsx(Title, { className: "cz-modal-title", style: titleStyles, children: title })) : null, shouldRenderDescription ? (jsx(Description, { className: "cz-modal-description", style: descriptionStyles, children: description })) : null] })), closeButton] })) })), jsx("div", { className: `cz-modal-body ${bodyClassName}`.trim(), style: bodyStyles, children: children }), footer !== undefined && footer !== null ? (jsx("div", { className: `cz-modal-footer ${footerClassName}`.trim(), style: footerStyles, children: normalizedFooter })) : null] })] })] }));
+});
+Modal.displayName = "Modal";
+
 // packages/core/number/src/number.ts
 function clamp(value, [min, max]) {
   return Math.min(max, Math.max(min, value));
@@ -8824,6 +9268,242 @@ const Table = Object.assign(TableRoot, {
     Cell: TableCell,
 });
 
+const SORT_ICON_STYLE = {
+    opacity: "var(--cz-data-table-sort-icon-opacity, 0.3)",
+};
+const iconStyles = {
+    display: "inline-flex",
+    width: 14,
+    height: 14,
+    flexShrink: 0,
+};
+const SortNeutralIcon = () => (jsxs("svg", { viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", style: { ...iconStyles, ...SORT_ICON_STYLE }, children: [jsx("path", { d: "M4 5L7 2L10 5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M10 9L7 12L4 9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+const SortAscIcon = () => (jsx("svg", { viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", style: iconStyles, children: jsx("path", { d: "M4 8L7 5L10 8", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const SortDescIcon = () => (jsx("svg", { viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", style: iconStyles, children: jsx("path", { d: "M10 6L7 9L4 6", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const LeftChevronIcon = () => (jsx("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", style: { width: 16, height: 16 }, children: jsx("path", { d: "M9.5 3.5L5 8L9.5 12.5", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const RightChevronIcon = () => (jsx("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", style: { width: 16, height: 16 }, children: jsx("path", { d: "M6.5 3.5L11 8L6.5 12.5", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const EmptyStateIcon = () => (jsxs("svg", { viewBox: "0 0 48 48", fill: "none", "aria-hidden": "true", style: { width: 32, height: 32 }, children: [jsx("circle", { cx: "24", cy: "24", r: "16", stroke: "currentColor", strokeWidth: "2", opacity: "0.6" }), jsx("path", { d: "M24 31.5V31.75M24 16.5C21.7 16.5 20 18 20 20C20 21.5 20.9 22.6 22.1 23.3C23.1 23.9 24 24.6 24 26", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+function resolveValue(row, key) {
+    return row[key];
+}
+function compareValues(aVal, bVal) {
+    if (aVal === bVal)
+        return 0;
+    if (aVal === null || aVal === undefined)
+        return 1;
+    if (bVal === null || bVal === undefined)
+        return -1;
+    if (typeof aVal === "number" && typeof bVal === "number") {
+        return aVal < bVal ? -1 : 1;
+    }
+    const aText = String(aVal).toLowerCase();
+    const bText = String(bVal).toLowerCase();
+    if (aText === bText)
+        return 0;
+    return aText < bText ? -1 : 1;
+}
+const DataTable = React.forwardRef(({ data = [], columns = [], selectable = false, selectedRows = [], onSelectionChange, sortable = false, defaultSortKey = null, defaultSortDir = "asc", pagination = false, pageSize = 10, currentPage: controlledPage, onPageChange, loading = false, isLoading = false, emptyState, emptyMessage, onRowClick, getRowId = (row, index) => row.id ??
+    row._id ??
+    index, variant = "default", className = "", style = {}, ...props }, ref) => {
+    const isBusy = loading || isLoading;
+    const [sortKey, setSortKey] = React.useState(defaultSortKey);
+    const [sortDir, setSortDir] = React.useState(defaultSortDir);
+    const [internalPage, setInternalPage] = React.useState(1);
+    const sortedData = React.useMemo(() => {
+        if (!sortKey || !sortable)
+            return data;
+        return [...data].sort((a, b) => {
+            const aVal = resolveValue(a, sortKey);
+            const bVal = resolveValue(b, sortKey);
+            const result = compareValues(aVal, bVal);
+            return sortDir === "asc" ? result : -result;
+        });
+    }, [data, sortKey, sortDir, sortable]);
+    const totalPages = Math.max(1, Math.ceil(sortedData.length / pageSize));
+    const page = controlledPage !== undefined ? controlledPage : internalPage;
+    const paginatedData = React.useMemo(() => {
+        if (!pagination)
+            return sortedData;
+        const start = (page - 1) * pageSize;
+        return sortedData.slice(start, start + pageSize);
+    }, [sortedData, pagination, page, pageSize]);
+    const setPage = (nextPage) => {
+        const clamped = Math.max(1, Math.min(nextPage, totalPages));
+        if (controlledPage !== undefined) {
+            onPageChange?.(clamped);
+        }
+        else {
+            setInternalPage(clamped);
+        }
+    };
+    const getPageRowId = (row, index) => getRowId(row, index);
+    const pageRowIds = paginatedData.map(getPageRowId);
+    const allSelected = pageRowIds.length > 0 && pageRowIds.every((rowId) => selectedRows.includes(rowId));
+    const someSelected = pageRowIds.some((rowId) => selectedRows.includes(rowId));
+    const handleSort = (key) => {
+        if (!sortable)
+            return;
+        if (sortKey === key) {
+            setSortDir(sortDir === "asc" ? "desc" : "asc");
+            return;
+        }
+        setSortKey(key);
+        setSortDir("asc");
+    };
+    const handleSelectAll = (checked) => {
+        if (!onSelectionChange)
+            return;
+        if (checked) {
+            onSelectionChange([...new Set([...selectedRows, ...pageRowIds])]);
+            return;
+        }
+        onSelectionChange(selectedRows.filter((rowId) => !pageRowIds.includes(rowId)));
+    };
+    const handleSelectRow = (rowId, checked) => {
+        if (!onSelectionChange)
+            return;
+        if (checked) {
+            onSelectionChange([...selectedRows, rowId]);
+            return;
+        }
+        onSelectionChange(selectedRows.filter((id) => id !== rowId));
+    };
+    const containerStyles = {
+        display: "flex",
+        flexDirection: "column",
+        background: "var(--cz-data-table-container-bg, var(--color-bg-primary, hsl(var(--cz-color-bg))))",
+        borderRadius: "var(--cz-data-table-container-border-radius, var(--radius-card, var(--cz-radius-lg)))",
+        border: "1px solid var(--cz-data-table-container-border-color, var(--color-border-primary, hsl(var(--cz-color-border))))",
+        boxShadow: "var(--cz-data-table-container-shadow, var(--shadow-card, var(--cz-shadow-sm)))",
+        overflow: "hidden",
+        ["--cz-table-row-hover-bg"]: "var(--cz-data-table-row-hover-bg, var(--color-bg-hover, hsl(var(--cz-color-muted) / 0.5)))",
+        ...style,
+    };
+    const headerCellStyles = (column) => ({
+        padding: "var(--cz-data-table-header-cell-padding, var(--spacing-3, 0.75rem) var(--spacing-4, 1rem))",
+        textAlign: column.align || "left",
+        fontWeight: "var(--cz-data-table-header-font-weight, var(--font-weight-medium, var(--cz-font-weight-medium)))",
+        color: "var(--cz-data-table-header-color, var(--table-header-text, var(--color-text-muted, hsl(var(--cz-color-mutedFg)))))",
+        fontSize: "var(--cz-data-table-header-font-size, var(--font-size-xs, var(--cz-font-size-xs)))",
+        letterSpacing: "var(--cz-data-table-header-letter-spacing, 0.02em)",
+        textTransform: "var(--cz-data-table-header-text-transform, uppercase)",
+        whiteSpace: "nowrap",
+        cursor: sortable && column.sortable !== false ? "pointer" : "default",
+        userSelect: sortable && column.sortable !== false ? "none" : "auto",
+        width: column.width,
+        borderBottom: "1px solid var(--cz-data-table-row-border-color, var(--color-border-primary, var(--cz-table-border-color)))",
+    });
+    const bodyCellStyles = (align = "left") => ({
+        padding: "var(--cz-data-table-body-cell-padding, var(--spacing-3-5, 0.875rem) var(--spacing-4, 1rem))",
+        textAlign: align,
+        color: "var(--cz-data-table-body-color, var(--color-text-body, hsl(var(--cz-color-fg))))",
+        verticalAlign: "middle",
+        lineHeight: "1.5",
+        fontSize: "var(--cz-data-table-body-font-size, var(--font-size-sm, var(--cz-font-size-sm)))",
+        borderBottom: "1px solid var(--cz-data-table-row-border-color, var(--color-border-light, var(--cz-table-border-color)))",
+    });
+    const renderSortIcon = (key) => {
+        if (sortKey !== key)
+            return jsx(SortNeutralIcon, {});
+        if (sortDir === "asc") {
+            return jsx("span", { style: { color: "var(--cz-data-table-sort-active-color, var(--color-primary, hsl(var(--cz-color-primary))))" }, children: jsx(SortAscIcon, {}) });
+        }
+        return jsx("span", { style: { color: "var(--cz-data-table-sort-active-color, var(--color-primary, hsl(var(--cz-color-primary))))" }, children: jsx(SortDescIcon, {}) });
+    };
+    const tableClassName = variant === "striped" ? "cz-table-striped" : "";
+    const pageButtonStyles = (disabled) => ({
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: "var(--cz-data-table-pagination-button-size, 32px)",
+        height: "var(--cz-data-table-pagination-button-size, 32px)",
+        borderRadius: "var(--cz-data-table-pagination-button-radius, var(--radius-md, var(--cz-radius-md)))",
+        background: "transparent",
+        border: "1px solid var(--cz-data-table-pagination-button-border-color, transparent)",
+        color: disabled
+            ? "var(--cz-data-table-pagination-button-disabled-color, var(--color-text-disabled, hsl(var(--cz-color-mutedFg))))"
+            : "var(--cz-data-table-pagination-button-color, var(--color-text-body, hsl(var(--cz-color-fg))))",
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? 0.5 : 1,
+        transition: "all var(--transition-fast, var(--cz-transition-fast))",
+    });
+    if (isBusy) {
+        return (jsx("div", { ref: ref, className: className, style: containerStyles, ...props, children: jsxs(Table, { className: tableClassName, children: [jsx(Table.Header, { children: jsxs(Table.Row, { children: [selectable && jsx(Table.Head, { style: { width: 48 } }), columns.map((column) => (jsx(Table.Head, { style: headerCellStyles(column), children: column.header }, column.key)))] }) }), jsx(Table.Body, { children: Array.from({ length: 5 }).map((_, rowIndex) => (jsxs(Table.Row, { children: [selectable && (jsx(Table.Cell, { style: bodyCellStyles(), children: jsx("div", { style: {
+                                            width: 18,
+                                            height: 18,
+                                            borderRadius: 4,
+                                            background: "linear-gradient(90deg, var(--cz-data-table-loading-shimmer-base, var(--color-bg-tertiary, hsl(var(--cz-color-muted)))) 25%, var(--cz-data-table-loading-shimmer-highlight, var(--color-bg-hover, hsl(var(--cz-color-muted)/0.5))) 50%, var(--cz-data-table-loading-shimmer-base, var(--color-bg-tertiary, hsl(var(--cz-color-muted)))) 75%)",
+                                        }, className: "cz-data-table-shimmer" }) })), columns.map((column, columnIndex) => (jsx(Table.Cell, { style: bodyCellStyles(column.align), children: jsx("div", { style: {
+                                            width: `${40 + ((rowIndex + columnIndex * 7) % 40)}%`,
+                                            height: 16,
+                                            borderRadius: "var(--radius-sm, var(--cz-radius-sm))",
+                                            background: "linear-gradient(90deg, var(--cz-data-table-loading-shimmer-base, var(--color-bg-tertiary, hsl(var(--cz-color-muted)))) 25%, var(--cz-data-table-loading-shimmer-highlight, var(--color-bg-hover, hsl(var(--cz-color-muted)/0.5))) 50%, var(--cz-data-table-loading-shimmer-base, var(--color-bg-tertiary, hsl(var(--cz-color-muted)))) 75%)",
+                                        }, className: "cz-data-table-shimmer" }) }, `${column.key}-${columnIndex}`)))] }, `loading-${rowIndex}`))) })] }) }));
+    }
+    if (data.length === 0) {
+        return (jsx("div", { ref: ref, className: className, style: containerStyles, ...props, children: emptyState || (jsxs("div", { style: {
+                    padding: "var(--spacing-16, 4rem) var(--spacing-6, 1.5rem)",
+                    textAlign: "center",
+                    color: "var(--cz-data-table-empty-state-color, var(--color-text-muted, hsl(var(--cz-color-mutedFg))))",
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    gap: "var(--spacing-4, 1rem)",
+                }, children: [jsx("div", { style: {
+                            width: 64,
+                            height: 64,
+                            borderRadius: "50%",
+                            background: "var(--cz-data-table-empty-state-icon-bg, var(--color-bg-secondary, hsl(var(--cz-color-muted))))",
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            color: "var(--cz-data-table-empty-state-icon-color, var(--color-text-placeholder, hsl(var(--cz-color-mutedFg))))",
+                        }, children: jsx(EmptyStateIcon, {}) }), jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-1, 0.25rem)" }, children: [jsx("span", { style: {
+                                    fontSize: "var(--font-size-md, var(--cz-font-size-md))",
+                                    fontWeight: "var(--font-weight-medium, var(--cz-font-weight-medium))",
+                                    color: "var(--cz-data-table-empty-state-title-color, var(--color-text-secondary, hsl(var(--cz-color-fg))))",
+                                }, children: "No Data Found" }), jsx("span", { style: { fontSize: "var(--font-size-sm, var(--cz-font-size-sm))", maxWidth: 300 }, children: emptyMessage || "There are no records to display at this time." })] })] })) }));
+    }
+    return (jsxs("div", { ref: ref, className: className, style: containerStyles, ...props, children: [jsxs(Table, { className: tableClassName, children: [jsx(Table.Header, { children: jsxs(Table.Row, { children: [selectable && (jsx(Table.Head, { style: { width: 48, ...headerCellStyles({ }) }, children: jsx(Checkbox, { checked: someSelected && !allSelected ? "indeterminate" : allSelected, onCheckedChange: (checked) => handleSelectAll(checked === true) }) })), columns.map((column) => (jsx(Table.Head, { className: column.className, style: headerCellStyles(column), onClick: () => {
+                                        if (sortable && column.sortable !== false) {
+                                            handleSort(column.key);
+                                        }
+                                    }, children: jsxs("div", { style: {
+                                            display: "flex",
+                                            alignItems: "center",
+                                            gap: "var(--spacing-2, 0.5rem)",
+                                            justifyContent: column.align === "right"
+                                                ? "flex-end"
+                                                : column.align === "center"
+                                                    ? "center"
+                                                    : "flex-start",
+                                        }, children: [column.customHeaderRender ? column.customHeaderRender() : column.header, sortable && column.sortable !== false && renderSortIcon(column.key)] }) }, column.key)))] }) }), jsx(Table.Body, { children: paginatedData.map((row, index) => {
+                            const rowId = getPageRowId(row, index);
+                            const isSelected = selectedRows.includes(rowId);
+                            return (jsxs(Table.Row, { onClick: onRowClick ? () => onRowClick(row) : undefined, style: {
+                                    cursor: onRowClick ? "pointer" : "default",
+                                    background: isSelected
+                                        ? "var(--cz-data-table-selected-row-bg, var(--color-primary-bg, hsl(var(--cz-color-primary) / 0.12)))"
+                                        : variant === "striped" && index % 2 === 1
+                                            ? "var(--cz-data-table-striped-row-bg, var(--cz-table-striped-bg))"
+                                            : undefined,
+                                }, children: [selectable && (jsx(Table.Cell, { style: bodyCellStyles(), onClick: (event) => event.stopPropagation(), children: jsx(Checkbox, { checked: isSelected, onCheckedChange: (checked) => handleSelectRow(rowId, checked === true) }) })), columns.map((column) => (jsx(Table.Cell, { className: column.className, style: bodyCellStyles(column.align), children: column.render
+                                            ? column.render(row, resolveValue(row, column.key))
+                                            : resolveValue(row, column.key) }, `${String(rowId)}-${column.key}`)))] }, String(rowId)));
+                        }) })] }), pagination && totalPages > 1 && (jsxs("div", { style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    padding: "var(--cz-data-table-pagination-padding, var(--spacing-3, 0.75rem) var(--spacing-4, 1rem))",
+                    background: "var(--cz-data-table-container-bg, var(--color-bg-primary, hsl(var(--cz-color-bg))))",
+                    borderTop: "1px solid var(--cz-data-table-pagination-border-color, var(--color-border-light, var(--cz-table-border-color)))",
+                    fontSize: "var(--font-size-sm, var(--cz-font-size-sm))",
+                    color: "var(--cz-data-table-pagination-text-color, var(--color-text-muted, hsl(var(--cz-color-mutedFg))))",
+                }, children: [jsxs("span", { style: { color: "var(--cz-data-table-pagination-text-strong-color, var(--color-text-body, hsl(var(--cz-color-fg))))" }, children: ["Showing ", jsx("strong", { children: (page - 1) * pageSize + 1 }), "-", jsx("strong", { children: Math.min(page * pageSize, sortedData.length) }), " of", " ", jsx("strong", { children: sortedData.length })] }), jsxs("div", { style: { display: "flex", alignItems: "center", gap: "var(--cz-data-table-pagination-gap, var(--spacing-2, 0.5rem))" }, children: [jsx("button", { type: "button", className: "cz-data-table-page-btn", style: pageButtonStyles(page <= 1), onClick: () => setPage(page - 1), disabled: page <= 1, "aria-label": "Previous page", children: jsx(LeftChevronIcon, {}) }), jsx("button", { type: "button", className: "cz-data-table-page-btn", style: pageButtonStyles(page >= totalPages), onClick: () => setPage(page + 1), disabled: page >= totalPages, "aria-label": "Next page", children: jsx(RightChevronIcon, {}) })] })] }))] }));
+});
+DataTable.displayName = "DataTable";
+
 var COLLAPSIBLE_NAME = "Collapsible";
 var [createCollapsibleContext, createCollapsibleScope] = createContextScope$2(COLLAPSIBLE_NAME);
 var [CollapsibleProvider, useCollapsibleContext] = createCollapsibleContext(COLLAPSIBLE_NAME);
@@ -11588,5 +12268,5 @@ function useTheme() {
     return context;
 }
 
-export { Accordion, Alert, AspectRatio, Avatar, Badge, Breadcrumb, Button, Card, Checkbox, Code, Container, Dialog, DropdownMenu, Grid, Input, Kbd, Label$1 as Label, Progress, RadioGroup$1 as RadioGroup, ScrollArea, Select, Separator$2 as Separator, Skeleton, Spinner, Stack, Switch, Table, Tabs, Tag, Textarea, ThemeProvider, Toast, ToastProvider, Toaster, Tooltip, TooltipProvider, VisuallyHidden, useTheme, useToast };
+export { Accordion, Alert, AspectRatio, Avatar, Badge, Breadcrumb, Button, Card, Checkbox, Code, Container, DataTable, Dialog, DropdownMenu, Grid, Input, Kbd, Label$1 as Label, Modal, Progress, RadioGroup$1 as RadioGroup, ScrollArea, Select, Separator$2 as Separator, Skeleton, Spinner, Stack, StatusBadge, Switch, Table, Tabs, Tag, Textarea, ThemeProvider, Toast, ToastProvider, Toaster, Tooltip, TooltipProvider, VisuallyHidden, useTheme, useToast };
 //# sourceMappingURL=index.js.map