@pk-design/react-tailwind 1.6.0 → 1.7.1

package/dist/cjs/components/Textarea/Textarea.js

@@ -0,0 +1,64 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var Label = require('../Label/Label.js');
+var isEmpty = require('../../utils/is-empty.js');
+var buildClassname = require('../../utils/build-classname.js');
+var TextContent = require('../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 = React.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 = React.useRef(null);
+    React.useImperativeHandle(ref, () => innerRef.current);
+    const [uncontrolledValue, setUncontrolledValue] = React.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
+    React.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.isEmpty(error);
+    const hasRightGroup = rightGroup != null && rightGroup !== undefined;
+    const hasLeftGroup = leftGroup != null && leftGroup !== undefined;
+    const currentSize = sizeClasses[size] || sizeClasses.md;
+    return (jsxRuntime.jsxs("div", { className: buildClassname.buildClassName('group', hasError && 'has-error', containerClass), children: [label && (jsxRuntime.jsxs("div", { className: buildClassname.buildClassName('flex items-center justify-between mb-1.5', labelWrapperClass), children: [jsxRuntime.jsx(Label.Label, { className: labelClass, htmlFor: id, children: label }), labelHint && jsxRuntime.jsx(TextContent.TextContent, { xsmall: true, children: labelHint })] })), jsxRuntime.jsxs("div", { className: "relative", children: [hasLeftGroup && (jsxRuntime.jsx("span", { className: "absolute top-2.5 left-3 flex items-center justify-center text-gray-400 dark:text-gray-500", children: leftGroup })), jsxRuntime.jsx("textarea", { ref: innerRef, autoComplete: "off", ...inputProps, value: value, defaultValue: defaultValue, onChange: handleTextareaChange, maxLength: maxLength, name: name, id: id, className: buildClassname.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 && (jsxRuntime.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 ? (jsxRuntime.jsxs("div", { className: "mt-1.5 flex items-center justify-between gap-2 text-xs", children: [jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: showErrorMessage && error ? (jsxRuntime.jsx(TextContent.TextContent, { error: true, small: true, children: error })) : helperText ? (jsxRuntime.jsx(TextContent.TextContent, { muted: true, small: true, children: helperText })) : null }), showCount && (jsxRuntime.jsxs("span", { className: buildClassname.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';
+
+exports.Textarea = Textarea;
+//# sourceMappingURL=Textarea.js.map

package/dist/cjs/components/Textarea/Textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.js","sources":["../../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n  type ChangeEvent,\n} from 'react'\nimport { Label } from '../Label'\nimport { isEmpty } from '../../utils/is-empty'\nimport { buildClassName } from '../../utils/build-classname'\nimport { TextContent } from '../TextContent'\nimport type { TextareaProps, TextareaResize, TextareaSize } from './Textarea.types'\n\nconst sizeClasses: Record<TextareaSize, { textarea: string; text: string }> = {\n  sm: {\n    textarea: 'px-2.5 py-1.5 text-xs leading-5 min-h-[60px]',\n    text: 'text-xs',\n  },\n  md: {\n    textarea: 'px-3.5 py-2 text-sm leading-6 min-h-[80px]',\n    text: 'text-sm',\n  },\n  lg: {\n    textarea: 'px-4 py-2.5 text-base leading-7 min-h-[100px]',\n    text: 'text-base',\n  },\n}\n\nconst resizeClasses: Record<TextareaResize, string> = {\n  none: 'resize-none',\n  vertical: 'resize-y',\n  horizontal: 'resize-x',\n  both: 'resize',\n}\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>((props, ref) => {\n  const {\n    name,\n    id = name,\n    label = null,\n    labelHint = null,\n    className = '',\n    labelClass = '',\n    labelWrapperClass = '',\n    containerClass = '',\n    error,\n    showErrorMessage = true,\n    rightGroup = null,\n    leftGroup = null,\n    size = 'md',\n    autoSize = false,\n    showCount = false,\n    helperText,\n    resize = 'vertical',\n    value,\n    defaultValue,\n    onChange,\n    maxLength,\n    ...inputProps\n  } = props\n\n  const innerRef = useRef<HTMLTextAreaElement>(null)\n  useImperativeHandle(ref, () => innerRef.current as HTMLTextAreaElement)\n\n  const [uncontrolledValue, setUncontrolledValue] = useState<string>(String(defaultValue ?? ''))\n\n  const isControlled = value !== undefined\n  const currentVal = isControlled ? String(value ?? '') : uncontrolledValue\n  const charLength = currentVal.length\n\n  // Handle Auto-Resize behavior\n  useEffect(() => {\n    if (autoSize && innerRef.current) {\n      innerRef.current.style.height = 'auto'\n      innerRef.current.style.height = `${innerRef.current.scrollHeight}px`\n    }\n  }, [autoSize, currentVal])\n\n  const handleTextareaChange = (e: ChangeEvent<HTMLTextAreaElement>) => {\n    if (!isControlled) {\n      setUncontrolledValue(e.target.value)\n    }\n    onChange?.(e)\n  }\n\n  const hasError = !isEmpty(error)\n  const hasRightGroup = rightGroup != null && rightGroup !== undefined\n  const hasLeftGroup = leftGroup != null && leftGroup !== undefined\n  const currentSize = sizeClasses[size] || sizeClasses.md\n\n  return (\n    <div className={buildClassName('group', hasError && 'has-error', containerClass)}>\n      {label && (\n        <div\n          className={buildClassName('flex items-center justify-between mb-1.5', labelWrapperClass)}\n        >\n          <Label className={labelClass} htmlFor={id}>\n            {label}\n          </Label>\n          {labelHint && <TextContent xsmall>{labelHint}</TextContent>}\n        </div>\n      )}\n      <div className=\"relative\">\n        {hasLeftGroup && (\n          <span className=\"absolute top-2.5 left-3 flex items-center justify-center text-gray-400 dark:text-gray-500\">\n            {leftGroup}\n          </span>\n        )}\n        <textarea\n          ref={innerRef}\n          autoComplete=\"off\"\n          {...inputProps}\n          value={value}\n          defaultValue={defaultValue}\n          onChange={handleTextareaChange}\n          maxLength={maxLength}\n          name={name}\n          id={id}\n          className={buildClassName(\n            'transition-all duration-150',\n            'block w-full rounded-lg bg-white',\n            currentSize.textarea,\n            autoSize ? 'resize-none overflow-hidden' : resizeClasses[resize],\n            'text-gray-900 outline outline-1 -outline-offset-1',\n            hasError\n              ? '!outline-red-500 !ring-1 !ring-red-500/50 dark:!outline-red-500'\n              : 'outline-[var(--ui-border)]',\n            'focus:outline-[var(--ui-focus-ring)] focus:outline-2 focus:-outline-offset-2',\n            'dark:bg-gray-700 dark:placeholder-gray-400 placeholder:text-gray-400 dark:text-white',\n            'disabled:pointer-events-none disabled:bg-gray-100 disabled:outline-[var(--ui-border-muted)]',\n            'dark:disabled:bg-gray-800 dark:disabled:text-gray-600 dark:disabled:placeholder-gray-600 dark:disabled:outline-[var(--ui-border-muted)]',\n            hasRightGroup ? 'pe-10' : '',\n            hasLeftGroup ? 'ps-10' : '',\n            className,\n          )}\n        />\n        {hasRightGroup && (\n          <span className=\"absolute end-3 top-2.5 flex items-center justify-center text-gray-400 dark:text-gray-500\">\n            {rightGroup}\n          </span>\n        )}\n      </div>\n\n      {/* Footer Row: Error / Helper Text & Live Character Count */}\n      {(showErrorMessage && error) || helperText || showCount ? (\n        <div className=\"mt-1.5 flex items-center justify-between gap-2 text-xs\">\n          <div className=\"min-w-0 flex-1\">\n            {showErrorMessage && error ? (\n              <TextContent error small>\n                {error}\n              </TextContent>\n            ) : helperText ? (\n              <TextContent muted small>\n                {helperText}\n              </TextContent>\n            ) : null}\n          </div>\n\n          {showCount && (\n            <span\n              className={buildClassName(\n                'text-[11px] font-medium shrink-0 ml-auto',\n                maxLength && charLength >= maxLength\n                  ? 'text-red-500 font-semibold'\n                  : 'text-gray-400 dark:text-gray-500',\n              )}\n            >\n              {charLength}\n              {maxLength ? ` / ${maxLength}` : ''}\n            </span>\n          )}\n        </div>\n      ) : null}\n    </div>\n  )\n})\n\nTextarea.displayName = 'Textarea'\n"],"names":["forwardRef","useRef","useImperativeHandle","useState","useEffect","isEmpty","_jsxs","buildClassName","_jsx","Label","TextContent"],"mappings":"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"}

package/dist/cjs/components/Toast/Toast.js

@@ -0,0 +1,96 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var react = require('@headlessui/react');
+var X = require('../Icons/X.svg.js');
+var CircleCheck = require('../Icons/CircleCheck.svg.js');
+var CircleAlert = require('../Icons/CircleAlert.svg.js');
+var Info = require('../Icons/Info.svg.js');
+var TriangleAlert = require('../Icons/TriangleAlert.svg.js');
+var Button = require('../Button/Button.js');
+var TextContent = require('../TextContent/TextContent.js');
+var buildClassname = require('../../utils/build-classname.js');
+
+/**
+ * Icons for each toast type
+ */
+const iconMap = {
+    success: jsxRuntime.jsx(CircleCheck.default, { className: "size-5 text-[var(--ui-success)]" }),
+    error: jsxRuntime.jsx(CircleAlert.default, { className: "size-5 text-[var(--ui-danger)]" }),
+    info: jsxRuntime.jsx(Info.default, { className: "size-5 text-[var(--ui-info)]" }),
+    warning: jsxRuntime.jsx(TriangleAlert.default, { className: "size-5 text-[var(--ui-warning)]" }),
+};
+const filledIconMap = {
+    success: jsxRuntime.jsx(CircleCheck.default, { className: "size-5 text-white" }),
+    error: jsxRuntime.jsx(CircleAlert.default, { className: "size-5 text-white" }),
+    info: jsxRuntime.jsx(Info.default, { className: "size-5 text-white" }),
+    warning: jsxRuntime.jsx(TriangleAlert.default, { className: "size-5 text-white" }),
+};
+const textColorMap = {
+    success: 'text-[var(--ui-success-text)]',
+    error: 'text-[var(--ui-danger-text)]',
+    info: 'text-[var(--ui-info-text)]',
+    warning: 'text-[var(--ui-warning-text)]',
+};
+const progressBarColorMap = {
+    success: 'bg-[var(--ui-success)]',
+    error: 'bg-[var(--ui-danger)]',
+    info: 'bg-[var(--ui-info)]',
+    warning: 'bg-[var(--ui-warning)]',
+};
+const variantStyleMap = {
+    accent: {
+        success: 'bg-white dark:bg-gray-900 border-l-4 border-[var(--ui-success)] text-gray-900 dark:text-gray-100 shadow-lg border-y border-r border-[var(--ui-border)]',
+        error: 'bg-white dark:bg-gray-900 border-l-4 border-[var(--ui-danger)] text-gray-900 dark:text-gray-100 shadow-lg border-y border-r border-[var(--ui-border)]',
+        info: 'bg-white dark:bg-gray-900 border-l-4 border-[var(--ui-info)] text-gray-900 dark:text-gray-100 shadow-lg border-y border-r border-[var(--ui-border)]',
+        warning: 'bg-white dark:bg-gray-900 border-l-4 border-[var(--ui-warning)] text-gray-900 dark:text-gray-100 shadow-lg border-y border-r border-[var(--ui-border)]',
+    },
+    filled: {
+        success: 'bg-[var(--ui-success)] text-white shadow-lg',
+        error: 'bg-[var(--ui-danger)] text-white shadow-lg',
+        info: 'bg-[var(--ui-info)] text-white shadow-lg',
+        warning: 'bg-[var(--ui-warning)] text-white shadow-lg',
+    },
+    outlined: {
+        success: 'bg-white dark:bg-gray-900 border-2 border-[var(--ui-success)] text-gray-900 dark:text-gray-100 shadow-md',
+        error: 'bg-white dark:bg-gray-900 border-2 border-[var(--ui-danger)] text-gray-900 dark:text-gray-100 shadow-md',
+        info: 'bg-white dark:bg-gray-900 border-2 border-[var(--ui-info)] text-gray-900 dark:text-gray-100 shadow-md',
+        warning: 'bg-white dark:bg-gray-900 border-2 border-[var(--ui-warning)] text-gray-900 dark:text-gray-100 shadow-md',
+    },
+    glass: {
+        success: 'backdrop-blur-md bg-white/85 dark:bg-gray-900/85 border border-emerald-500/30 text-gray-900 dark:text-gray-100 shadow-xl',
+        error: 'backdrop-blur-md bg-white/85 dark:bg-gray-900/85 border border-rose-500/30 text-gray-900 dark:text-gray-100 shadow-xl',
+        info: 'backdrop-blur-md bg-white/85 dark:bg-gray-900/85 border border-blue-500/30 text-gray-900 dark:text-gray-100 shadow-xl',
+        warning: 'backdrop-blur-md bg-white/85 dark:bg-gray-900/85 border border-amber-500/30 text-gray-900 dark:text-gray-100 shadow-xl',
+    },
+};
+const Toast = ({ id, title, message, type, variant = 'accent', action, icon, showProgressBar = true, duration = 4000, isPaused = false, onClose, className, isTop = true, }) => {
+    const [progress, setProgress] = React.useState(100);
+    React.useEffect(() => {
+        if (!showProgressBar || !duration || isPaused)
+            return;
+        const intervalTime = 50;
+        const step = (intervalTime / duration) * 100;
+        const timer = setInterval(() => {
+            setProgress((prev) => {
+                if (prev <= 0) {
+                    clearInterval(timer);
+                    return 0;
+                }
+                return prev - step;
+            });
+        }, intervalTime);
+        return () => clearInterval(timer);
+    }, [showProgressBar, duration, isPaused]);
+    const enterFrom = isTop ? 'opacity-0 -translate-y-3 scale-95' : 'opacity-0 translate-y-3 scale-95';
+    const leaveTo = isTop ? 'opacity-0 -translate-y-2 scale-95' : 'opacity-0 translate-y-2 scale-95';
+    const renderedIcon = icon !== null && icon !== void 0 ? icon : (variant === 'filled' ? filledIconMap[type] : iconMap[type]);
+    return (jsxRuntime.jsx(react.Transition, { appear: true, show: true, enter: "transform transition duration-300 ease-out", enterFrom: enterFrom, enterTo: "opacity-100 translate-y-0 scale-100", leave: "transition duration-200 ease-in", leaveFrom: "opacity-100 translate-y-0 scale-100", leaveTo: leaveTo, children: jsxRuntime.jsxs("div", { role: "status", id: id.toString(), className: buildClassname.buildClassName('relative overflow-hidden flex items-start gap-3 rounded-xl px-4 py-3.5 min-w-[280px] max-w-md transition-all', variantStyleMap[variant][type], className), children: [jsxRuntime.jsx("div", { className: "shrink-0 mt-0.5", children: variant === 'filled' ? (renderedIcon) : (jsxRuntime.jsx(TextContent.TextContent, { className: buildClassname.buildClassName(textColorMap[type]), children: renderedIcon })) }), jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col gap-0.5", children: [title && (jsxRuntime.jsx("div", { className: buildClassname.buildClassName('font-semibold text-sm leading-snug', variant === 'filled' ? 'text-white' : 'text-gray-900 dark:text-gray-100'), children: title })), jsxRuntime.jsx("div", { className: buildClassname.buildClassName('text-sm font-medium leading-relaxed', variant === 'filled' ? 'text-white/95' : 'text-gray-700 dark:text-gray-300'), children: message }), action && (jsxRuntime.jsx("div", { className: "mt-1.5", children: jsxRuntime.jsx("button", { type: "button", onClick: action.onClick, className: buildClassname.buildClassName('text-xs font-semibold underline underline-offset-2 transition-opacity focus:outline-none', variant === 'filled'
+                                    ? 'text-white hover:opacity-85'
+                                    : 'text-[var(--ui-primary)] hover:opacity-80'), children: action.label }) }))] }), jsxRuntime.jsx(Button.Button, { onClick: onClose, "aria-label": "Close toast", className: buildClassname.buildClassName('shrink-0 mt-0.5 opacity-60 hover:opacity-100 transition', variant === 'filled' && 'text-white hover:text-white'), iconOnly: true, size: "xs", variant: "plain", theme: variant === 'filled' ? 'primary' : 'secondary', noOutlineOnFocus: true, children: jsxRuntime.jsx(X.default, { className: "size-4" }) }), showProgressBar && duration > 0 && (jsxRuntime.jsx("div", { className: "absolute bottom-0 left-0 right-0 h-1 bg-black/10 dark:bg-white/10 overflow-hidden", children: jsxRuntime.jsx("div", { className: buildClassname.buildClassName('h-full transition-all duration-75 ease-linear', variant === 'filled' ? 'bg-white/70' : progressBarColorMap[type]), style: { width: `${Math.max(0, progress)}%` } }) }))] }) }));
+};
+Toast.displayName = 'Toast';
+
+exports.Toast = Toast;
+//# sourceMappingURL=Toast.js.map

package/dist/cjs/components/Toast/Toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.js","sources":["../../../../../src/components/Toast/Toast.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react'\nimport { Transition } from '@headlessui/react'\nimport XIcon from '../Icons/X.svg'\nimport CheckCircle from '../Icons/CircleCheck.svg'\nimport AlertCircle from '../Icons/CircleAlert.svg'\nimport Info from '../Icons/Info.svg'\nimport AlertTriangle from '../Icons/TriangleAlert.svg'\n\nimport { Button } from '../Button'\nimport { TextContent } from '../TextContent'\nimport { buildClassName } from '../../utils/build-classname'\n\nimport type { ToastProps, ToastType, ToastVariant } from './Toast.types'\n\n/**\n * Icons for each toast type\n */\nconst iconMap: Record<ToastType, React.ReactNode> = {\n  success: <CheckCircle className=\"size-5 text-[var(--ui-success)]\" />,\n  error: <AlertCircle className=\"size-5 text-[var(--ui-danger)]\" />,\n  info: <Info className=\"size-5 text-[var(--ui-info)]\" />,\n  warning: <AlertTriangle className=\"size-5 text-[var(--ui-warning)]\" />,\n}\n\nconst filledIconMap: Record<ToastType, React.ReactNode> = {\n  success: <CheckCircle className=\"size-5 text-white\" />,\n  error: <AlertCircle className=\"size-5 text-white\" />,\n  info: <Info className=\"size-5 text-white\" />,\n  warning: <AlertTriangle className=\"size-5 text-white\" />,\n}\n\nconst textColorMap: Record<ToastType, string> = {\n  success: 'text-[var(--ui-success-text)]',\n  error: 'text-[var(--ui-danger-text)]',\n  info: 'text-[var(--ui-info-text)]',\n  warning: 'text-[var(--ui-warning-text)]',\n}\n\nconst progressBarColorMap: Record<ToastType, string> = {\n  success: 'bg-[var(--ui-success)]',\n  error: 'bg-[var(--ui-danger)]',\n  info: 'bg-[var(--ui-info)]',\n  warning: 'bg-[var(--ui-warning)]',\n}\n\nconst variantStyleMap: Record<ToastVariant, Record<ToastType, string>> = {\n  accent: {\n    success:\n      'bg-white dark:bg-gray-900 border-l-4 border-[var(--ui-success)] text-gray-900 dark:text-gray-100 shadow-lg border-y border-r border-[var(--ui-border)]',\n    error:\n      'bg-white dark:bg-gray-900 border-l-4 border-[var(--ui-danger)] text-gray-900 dark:text-gray-100 shadow-lg border-y border-r border-[var(--ui-border)]',\n    info: 'bg-white dark:bg-gray-900 border-l-4 border-[var(--ui-info)] text-gray-900 dark:text-gray-100 shadow-lg border-y border-r border-[var(--ui-border)]',\n    warning:\n      'bg-white dark:bg-gray-900 border-l-4 border-[var(--ui-warning)] text-gray-900 dark:text-gray-100 shadow-lg border-y border-r border-[var(--ui-border)]',\n  },\n  filled: {\n    success: 'bg-[var(--ui-success)] text-white shadow-lg',\n    error: 'bg-[var(--ui-danger)] text-white shadow-lg',\n    info: 'bg-[var(--ui-info)] text-white shadow-lg',\n    warning: 'bg-[var(--ui-warning)] text-white shadow-lg',\n  },\n  outlined: {\n    success:\n      'bg-white dark:bg-gray-900 border-2 border-[var(--ui-success)] text-gray-900 dark:text-gray-100 shadow-md',\n    error:\n      'bg-white dark:bg-gray-900 border-2 border-[var(--ui-danger)] text-gray-900 dark:text-gray-100 shadow-md',\n    info: 'bg-white dark:bg-gray-900 border-2 border-[var(--ui-info)] text-gray-900 dark:text-gray-100 shadow-md',\n    warning:\n      'bg-white dark:bg-gray-900 border-2 border-[var(--ui-warning)] text-gray-900 dark:text-gray-100 shadow-md',\n  },\n  glass: {\n    success:\n      'backdrop-blur-md bg-white/85 dark:bg-gray-900/85 border border-emerald-500/30 text-gray-900 dark:text-gray-100 shadow-xl',\n    error:\n      'backdrop-blur-md bg-white/85 dark:bg-gray-900/85 border border-rose-500/30 text-gray-900 dark:text-gray-100 shadow-xl',\n    info: 'backdrop-blur-md bg-white/85 dark:bg-gray-900/85 border border-blue-500/30 text-gray-900 dark:text-gray-100 shadow-xl',\n    warning:\n      'backdrop-blur-md bg-white/85 dark:bg-gray-900/85 border border-amber-500/30 text-gray-900 dark:text-gray-100 shadow-xl',\n  },\n}\n\nexport const Toast: React.FC<ToastProps & { isTop?: boolean }> = ({\n  id,\n  title,\n  message,\n  type,\n  variant = 'accent',\n  action,\n  icon,\n  showProgressBar = true,\n  duration = 4000,\n  isPaused = false,\n  onClose,\n  className,\n  isTop = true,\n}) => {\n  const [progress, setProgress] = useState(100)\n\n  useEffect(() => {\n    if (!showProgressBar || !duration || isPaused) return\n\n    const intervalTime = 50\n    const step = (intervalTime / duration) * 100\n\n    const timer = setInterval(() => {\n      setProgress((prev) => {\n        if (prev <= 0) {\n          clearInterval(timer)\n          return 0\n        }\n        return prev - step\n      })\n    }, intervalTime)\n\n    return () => clearInterval(timer)\n  }, [showProgressBar, duration, isPaused])\n\n  const enterFrom = isTop ? 'opacity-0 -translate-y-3 scale-95' : 'opacity-0 translate-y-3 scale-95'\n  const leaveTo = isTop ? 'opacity-0 -translate-y-2 scale-95' : 'opacity-0 translate-y-2 scale-95'\n\n  const renderedIcon = icon ?? (variant === 'filled' ? filledIconMap[type] : iconMap[type])\n\n  return (\n    <Transition\n      appear\n      show\n      enter=\"transform transition duration-300 ease-out\"\n      enterFrom={enterFrom}\n      enterTo=\"opacity-100 translate-y-0 scale-100\"\n      leave=\"transition duration-200 ease-in\"\n      leaveFrom=\"opacity-100 translate-y-0 scale-100\"\n      leaveTo={leaveTo}\n    >\n      <div\n        role=\"status\"\n        id={id.toString()}\n        className={buildClassName(\n          'relative overflow-hidden flex items-start gap-3 rounded-xl px-4 py-3.5 min-w-[280px] max-w-md transition-all',\n          variantStyleMap[variant][type],\n          className,\n        )}\n      >\n        {/* Icon */}\n        <div className=\"shrink-0 mt-0.5\">\n          {variant === 'filled' ? (\n            renderedIcon\n          ) : (\n            <TextContent className={buildClassName(textColorMap[type])}>{renderedIcon}</TextContent>\n          )}\n        </div>\n\n        {/* Content Body */}\n        <div className=\"flex-1 flex flex-col gap-0.5\">\n          {title && (\n            <div\n              className={buildClassName(\n                'font-semibold text-sm leading-snug',\n                variant === 'filled' ? 'text-white' : 'text-gray-900 dark:text-gray-100',\n              )}\n            >\n              {title}\n            </div>\n          )}\n          <div\n            className={buildClassName(\n              'text-sm font-medium leading-relaxed',\n              variant === 'filled' ? 'text-white/95' : 'text-gray-700 dark:text-gray-300',\n            )}\n          >\n            {message}\n          </div>\n\n          {/* Action Button */}\n          {action && (\n            <div className=\"mt-1.5\">\n              <button\n                type=\"button\"\n                onClick={action.onClick}\n                className={buildClassName(\n                  'text-xs font-semibold underline underline-offset-2 transition-opacity focus:outline-none',\n                  variant === 'filled'\n                    ? 'text-white hover:opacity-85'\n                    : 'text-[var(--ui-primary)] hover:opacity-80',\n                )}\n              >\n                {action.label}\n              </button>\n            </div>\n          )}\n        </div>\n\n        {/* Close button */}\n        <Button\n          onClick={onClose}\n          aria-label=\"Close toast\"\n          className={buildClassName(\n            'shrink-0 mt-0.5 opacity-60 hover:opacity-100 transition',\n            variant === 'filled' && 'text-white hover:text-white',\n          )}\n          iconOnly\n          size=\"xs\"\n          variant=\"plain\"\n          theme={variant === 'filled' ? 'primary' : 'secondary'}\n          noOutlineOnFocus\n        >\n          <XIcon className=\"size-4\" />\n        </Button>\n\n        {/* Progress Bar Countdown */}\n        {showProgressBar && duration > 0 && (\n          <div className=\"absolute bottom-0 left-0 right-0 h-1 bg-black/10 dark:bg-white/10 overflow-hidden\">\n            <div\n              className={buildClassName(\n                'h-full transition-all duration-75 ease-linear',\n                variant === 'filled' ? 'bg-white/70' : progressBarColorMap[type],\n              )}\n              style={{ width: `${Math.max(0, progress)}%` }}\n            />\n          </div>\n        )}\n      </div>\n    </Transition>\n  )\n}\n\nToast.displayName = 'Toast'\n"],"names":["_jsx","CheckCircle","AlertCircle","Info","AlertTriangle","useState","useEffect","Transition","_jsxs","buildClassName","TextContent","Button","XIcon"],"mappings":";;;;;;;;;;;;;;AAcA;;AAEG;AACH,MAAM,OAAO,GAAuC;AAClD,IAAA,OAAO,EAAEA,cAAA,CAACC,mBAAW,IAAC,SAAS,EAAC,iCAAiC,EAAA,CAAG;AACpE,IAAA,KAAK,EAAED,cAAA,CAACE,mBAAW,IAAC,SAAS,EAAC,gCAAgC,EAAA,CAAG;AACjE,IAAA,IAAI,EAAEF,cAAA,CAACG,YAAI,IAAC,SAAS,EAAC,8BAA8B,EAAA,CAAG;AACvD,IAAA,OAAO,EAAEH,cAAA,CAACI,qBAAa,IAAC,SAAS,EAAC,iCAAiC,EAAA,CAAG;CACvE;AAED,MAAM,aAAa,GAAuC;AACxD,IAAA,OAAO,EAAEJ,cAAA,CAACC,mBAAW,IAAC,SAAS,EAAC,mBAAmB,EAAA,CAAG;AACtD,IAAA,KAAK,EAAED,cAAA,CAACE,mBAAW,IAAC,SAAS,EAAC,mBAAmB,EAAA,CAAG;AACpD,IAAA,IAAI,EAAEF,cAAA,CAACG,YAAI,IAAC,SAAS,EAAC,mBAAmB,EAAA,CAAG;AAC5C,IAAA,OAAO,EAAEH,cAAA,CAACI,qBAAa,IAAC,SAAS,EAAC,mBAAmB,EAAA,CAAG;CACzD;AAED,MAAM,YAAY,GAA8B;AAC9C,IAAA,OAAO,EAAE,+BAA+B;AACxC,IAAA,KAAK,EAAE,8BAA8B;AACrC,IAAA,IAAI,EAAE,4BAA4B;AAClC,IAAA,OAAO,EAAE,+BAA+B;CACzC;AAED,MAAM,mBAAmB,GAA8B;AACrD,IAAA,OAAO,EAAE,wBAAwB;AACjC,IAAA,KAAK,EAAE,uBAAuB;AAC9B,IAAA,IAAI,EAAE,qBAAqB;AAC3B,IAAA,OAAO,EAAE,wBAAwB;CAClC;AAED,MAAM,eAAe,GAAoD;AACvE,IAAA,MAAM,EAAE;AACN,QAAA,OAAO,EACL,wJAAwJ;AAC1J,QAAA,KAAK,EACH,uJAAuJ;AACzJ,QAAA,IAAI,EAAE,qJAAqJ;AAC3J,QAAA,OAAO,EACL,wJAAwJ;AAC3J,KAAA;AACD,IAAA,MAAM,EAAE;AACN,QAAA,OAAO,EAAE,6CAA6C;AACtD,QAAA,KAAK,EAAE,4CAA4C;AACnD,QAAA,IAAI,EAAE,0CAA0C;AAChD,QAAA,OAAO,EAAE,6CAA6C;AACvD,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EACL,0GAA0G;AAC5G,QAAA,KAAK,EACH,yGAAyG;AAC3G,QAAA,IAAI,EAAE,uGAAuG;AAC7G,QAAA,OAAO,EACL,0GAA0G;AAC7G,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,OAAO,EACL,0HAA0H;AAC5H,QAAA,KAAK,EACH,uHAAuH;AACzH,QAAA,IAAI,EAAE,uHAAuH;AAC7H,QAAA,OAAO,EACL,wHAAwH;AAC3H,KAAA;CACF;AAEM,MAAM,KAAK,GAA+C,CAAC,EAChE,EAAE,EACF,KAAK,EACL,OAAO,EACP,IAAI,EACJ,OAAO,GAAG,QAAQ,EAClB,MAAM,EACN,IAAI,EACJ,eAAe,GAAG,IAAI,EACtB,QAAQ,GAAG,IAAI,EACf,QAAQ,GAAG,KAAK,EAChB,OAAO,EACP,SAAS,EACT,KAAK,GAAG,IAAI,GACb,KAAI;IACH,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAGC,cAAQ,CAAC,GAAG,CAAC;IAE7CC,eAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,eAAe,IAAI,CAAC,QAAQ,IAAI,QAAQ;YAAE;QAE/C,MAAM,YAAY,GAAG,EAAE;QACvB,MAAM,IAAI,GAAG,CAAC,YAAY,GAAG,QAAQ,IAAI,GAAG;AAE5C,QAAA,MAAM,KAAK,GAAG,WAAW,CAAC,MAAK;AAC7B,YAAA,WAAW,CAAC,CAAC,IAAI,KAAI;AACnB,gBAAA,IAAI,IAAI,IAAI,CAAC,EAAE;oBACb,aAAa,CAAC,KAAK,CAAC;AACpB,oBAAA,OAAO,CAAC;gBACV;gBACA,OAAO,IAAI,GAAG,IAAI;AACpB,YAAA,CAAC,CAAC;QACJ,CAAC,EAAE,YAAY,CAAC;AAEhB,QAAA,OAAO,MAAM,aAAa,CAAC,KAAK,CAAC;IACnC,CAAC,EAAE,CAAC,eAAe,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAEzC,MAAM,SAAS,GAAG,KAAK,GAAG,mCAAmC,GAAG,kCAAkC;IAClG,MAAM,OAAO,GAAG,KAAK,GAAG,mCAAmC,GAAG,kCAAkC;IAEhG,MAAM,YAAY,GAAG,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAJ,IAAI,IAAK,OAAO,KAAK,QAAQ,GAAG,aAAa,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;AAEzF,IAAA,QACEN,cAAA,CAACO,gBAAU,IACT,MAAM,EAAA,IAAA,EACN,IAAI,EAAA,IAAA,EACJ,KAAK,EAAC,4CAA4C,EAClD,SAAS,EAAE,SAAS,EACpB,OAAO,EAAC,qCAAqC,EAC7C,KAAK,EAAC,iCAAiC,EACvC,SAAS,EAAC,qCAAqC,EAC/C,OAAO,EAAE,OAAO,YAEhBC,eAAA,CAAA,KAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,EAAE,CAAC,QAAQ,EAAE,EACjB,SAAS,EAAEC,6BAAc,CACvB,8GAA8G,EAC9G,eAAe,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,EAC9B,SAAS,CACV,aAGDT,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,iBAAiB,EAAA,QAAA,EAC7B,OAAO,KAAK,QAAQ,IACnB,YAAY,KAEZA,cAAA,CAACU,uBAAW,EAAA,EAAC,SAAS,EAAED,6BAAc,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,YAAG,YAAY,EAAA,CAAe,CACzF,EAAA,CACG,EAGND,yBAAK,SAAS,EAAC,8BAA8B,EAAA,QAAA,EAAA,CAC1C,KAAK,KACJR,cAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAES,6BAAc,CACvB,oCAAoC,EACpC,OAAO,KAAK,QAAQ,GAAG,YAAY,GAAG,kCAAkC,CACzE,EAAA,QAAA,EAEA,KAAK,GACF,CACP,EACDT,wBACE,SAAS,EAAES,6BAAc,CACvB,qCAAqC,EACrC,OAAO,KAAK,QAAQ,GAAG,eAAe,GAAG,kCAAkC,CAC5E,EAAA,QAAA,EAEA,OAAO,EAAA,CACJ,EAGL,MAAM,KACLT,wBAAK,SAAS,EAAC,QAAQ,EAAA,QAAA,EACrBA,2BACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,MAAM,CAAC,OAAO,EACvB,SAAS,EAAES,6BAAc,CACvB,0FAA0F,EAC1F,OAAO,KAAK;AACV,sCAAE;AACF,sCAAE,2CAA2C,CAChD,EAAA,QAAA,EAEA,MAAM,CAAC,KAAK,EAAA,CACN,EAAA,CACL,CACP,CAAA,EAAA,CACG,EAGNT,cAAA,CAACW,aAAM,EAAA,EACL,OAAO,EAAE,OAAO,EAAA,YAAA,EACL,aAAa,EACxB,SAAS,EAAEF,6BAAc,CACvB,yDAAyD,EACzD,OAAO,KAAK,QAAQ,IAAI,6BAA6B,CACtD,EACD,QAAQ,EAAA,IAAA,EACR,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,OAAO,EACf,KAAK,EAAE,OAAO,KAAK,QAAQ,GAAG,SAAS,GAAG,WAAW,EACrD,gBAAgB,EAAA,IAAA,EAAA,QAAA,EAEhBT,eAACY,SAAK,EAAA,EAAC,SAAS,EAAC,QAAQ,EAAA,CAAG,EAAA,CACrB,EAGR,eAAe,IAAI,QAAQ,GAAG,CAAC,KAC9BZ,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mFAAmF,EAAA,QAAA,EAChGA,cAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAES,6BAAc,CACvB,+CAA+C,EAC/C,OAAO,KAAK,QAAQ,GAAG,aAAa,GAAG,mBAAmB,CAAC,IAAI,CAAC,CACjE,EACD,KAAK,EAAE,EAAE,KAAK,EAAE,CAAA,EAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAA,CAAA,CAAG,EAAE,EAAA,CAC7C,EAAA,CACE,CACP,CAAA,EAAA,CACG,EAAA,CACK;AAEjB;AAEA,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}

package/dist/cjs/components/Toast/ToastProvider.js

@@ -0,0 +1,151 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var Toast = require('./Toast.js');
+var buildClassname = require('../../utils/build-classname.js');
+
+const ToastContext = React.createContext(undefined);
+let toastCounter = 0;
+const useToast = () => {
+    const context = React.useContext(ToastContext);
+    if (!context)
+        throw new Error('useToast must be used within ToastProvider');
+    return context;
+};
+const placementClass = {
+    'top-right': 'top-20 right-6 items-end',
+    'top-left': 'top-20 left-6 items-start',
+    'top-center': 'top-20 left-1/2 -translate-x-1/2 items-center',
+    'bottom-right': 'bottom-6 right-6 items-end',
+    'bottom-left': 'bottom-6 left-6 items-start',
+    'bottom-center': 'bottom-6 left-1/2 -translate-x-1/2 items-center',
+};
+const ToastProvider = ({ children, placement = 'top-right', maxToasts = 5, className, }) => {
+    const [toasts, setToasts] = React.useState([]);
+    const [pausedIds, setPausedIds] = React.useState(new Set());
+    const metaRefs = React.useRef(new Map());
+    const clearTimer = (id) => {
+        const meta = metaRefs.current.get(id);
+        if (meta === null || meta === void 0 ? void 0 : meta.timerId) {
+            clearTimeout(meta.timerId);
+            meta.timerId = null;
+        }
+    };
+    const closeToast = React.useCallback((id) => {
+        clearTimer(id);
+        metaRefs.current.delete(id);
+        setPausedIds((prev) => {
+            const next = new Set(prev);
+            next.delete(id);
+            return next;
+        });
+        setToasts((prev) => prev.filter((t) => t.id !== id));
+    }, []);
+    const dismissAll = React.useCallback(() => {
+        metaRefs.current.forEach((meta) => {
+            if (meta.timerId)
+                clearTimeout(meta.timerId);
+        });
+        metaRefs.current.clear();
+        setPausedIds(new Set());
+        setToasts([]);
+    }, []);
+    const startAutoClose = React.useCallback((toastId, delay) => {
+        clearTimer(toastId);
+        const timerId = setTimeout(() => {
+            closeToast(toastId);
+        }, delay);
+        const meta = metaRefs.current.get(toastId);
+        if (meta) {
+            meta.timerId = timerId;
+            meta.startTime = Date.now();
+            meta.remainingTime = delay;
+        }
+        else {
+            metaRefs.current.set(toastId, {
+                timerId,
+                startTime: Date.now(),
+                remainingTime: delay,
+            });
+        }
+    }, [closeToast]);
+    React.useEffect(() => {
+        const refs = metaRefs.current;
+        return () => refs.forEach((meta) => {
+            if (meta.timerId)
+                clearTimeout(meta.timerId);
+        });
+    }, []);
+    const showToast = React.useCallback((message, options) => {
+        var _a, _b, _c, _d, _e, _f;
+        const id = ++toastCounter;
+        const newToast = {
+            id,
+            title: options === null || options === void 0 ? void 0 : options.title,
+            message,
+            type: (_a = options === null || options === void 0 ? void 0 : options.type) !== null && _a !== void 0 ? _a : 'info',
+            variant: (_b = options === null || options === void 0 ? void 0 : options.variant) !== null && _b !== void 0 ? _b : 'accent',
+            duration: (_c = options === null || options === void 0 ? void 0 : options.duration) !== null && _c !== void 0 ? _c : 4000,
+            autoClose: (_d = options === null || options === void 0 ? void 0 : options.autoClose) !== null && _d !== void 0 ? _d : true,
+            pauseOnHover: (_e = options === null || options === void 0 ? void 0 : options.pauseOnHover) !== null && _e !== void 0 ? _e : true,
+            showProgressBar: (_f = options === null || options === void 0 ? void 0 : options.showProgressBar) !== null && _f !== void 0 ? _f : (options === null || options === void 0 ? void 0 : options.autoClose) !== false,
+            action: options === null || options === void 0 ? void 0 : options.action,
+            icon: options === null || options === void 0 ? void 0 : options.icon,
+        };
+        setToasts((prev) => {
+            const updated = [...prev, newToast];
+            if (updated.length > maxToasts)
+                updated.shift();
+            return updated;
+        });
+        if (newToast.autoClose) {
+            startAutoClose(id, newToast.duration);
+        }
+        return id;
+    }, [maxToasts, startAutoClose]);
+    // Hover pauses timer and tracks exact remaining milliseconds
+    const handleMouseEnter = (toast) => {
+        if (!toast.pauseOnHover || !toast.autoClose)
+            return;
+        const meta = metaRefs.current.get(toast.id);
+        if (meta) {
+            const elapsed = Date.now() - meta.startTime;
+            meta.remainingTime = Math.max(0, meta.remainingTime - elapsed);
+            clearTimer(toast.id);
+            setPausedIds((prev) => new Set(prev).add(toast.id));
+        }
+    };
+    // Mouse leave resumes timer with exact remaining milliseconds
+    const handleMouseLeave = (toast) => {
+        if (!toast.pauseOnHover || !toast.autoClose)
+            return;
+        setPausedIds((prev) => {
+            const next = new Set(prev);
+            next.delete(toast.id);
+            return next;
+        });
+        const meta = metaRefs.current.get(toast.id);
+        if (meta && meta.remainingTime > 0) {
+            startAutoClose(toast.id, meta.remainingTime);
+        }
+        else if (meta && meta.remainingTime <= 0) {
+            closeToast(toast.id);
+        }
+    };
+    const toastHelpers = React.useMemo(() => ({
+        show: (message, options) => showToast(message, options),
+        success: (message, options) => showToast(message, { ...options, type: 'success' }),
+        error: (message, options) => showToast(message, { ...options, type: 'error' }),
+        info: (message, options) => showToast(message, { ...options, type: 'info' }),
+        warning: (message, options) => showToast(message, { ...options, type: 'warning' }),
+        dismiss: (id) => closeToast(id),
+        dismissAll: () => dismissAll(),
+    }), [showToast, closeToast, dismissAll]);
+    return (jsxRuntime.jsxs(ToastContext.Provider, { value: { showToast, closeToast, toast: toastHelpers }, children: [children, jsxRuntime.jsx("div", { className: buildClassname.buildClassName('fixed z-[9999] flex flex-col gap-3 pointer-events-none', placementClass[placement], className), children: toasts.map((toastItem) => (jsxRuntime.jsx("div", { className: "pointer-events-auto", onMouseEnter: () => handleMouseEnter(toastItem), onMouseLeave: () => handleMouseLeave(toastItem), children: jsxRuntime.jsx(Toast.Toast, { ...toastItem, isPaused: pausedIds.has(toastItem.id), isTop: placement.startsWith('top'), onClose: () => closeToast(toastItem.id) }) }, toastItem.id))) })] }));
+};
+ToastProvider.displayName = 'ToastProvider';
+
+exports.ToastProvider = ToastProvider;
+exports.useToast = useToast;
+//# sourceMappingURL=ToastProvider.js.map

package/dist/cjs/components/Toast/ToastProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastProvider.js","sources":["../../../../../src/components/Toast/ToastProvider.tsx"],"sourcesContent":["import React, {\n  createContext,\n  useContext,\n  useEffect,\n  useState,\n  type ReactNode,\n  useRef,\n  useCallback,\n  useMemo,\n} from 'react'\nimport { Toast } from './Toast'\nimport type {\n  IToast,\n  ToastContextType,\n  ToastOptions,\n  ToastPlacement,\n  ToastProviderProps,\n} from './Toast.types'\nimport { buildClassName } from '../../utils/build-classname'\n\nconst ToastContext = createContext<ToastContextType | undefined>(undefined)\nlet toastCounter = 0\n\nexport const useToast = (): ToastContextType => {\n  const context = useContext(ToastContext)\n  if (!context) throw new Error('useToast must be used within ToastProvider')\n  return context\n}\n\nconst placementClass: Record<ToastPlacement, string> = {\n  'top-right': 'top-20 right-6 items-end',\n  'top-left': 'top-20 left-6 items-start',\n  'top-center': 'top-20 left-1/2 -translate-x-1/2 items-center',\n\n  'bottom-right': 'bottom-6 right-6 items-end',\n  'bottom-left': 'bottom-6 left-6 items-start',\n  'bottom-center': 'bottom-6 left-1/2 -translate-x-1/2 items-center',\n}\n\ninterface ToastMeta {\n  timerId: any\n  startTime: number\n  remainingTime: number\n}\n\nexport const ToastProvider: React.FC<ToastProviderProps> = ({\n  children,\n  placement = 'top-right',\n  maxToasts = 5,\n  className,\n}) => {\n  const [toasts, setToasts] = useState<IToast[]>([])\n  const [pausedIds, setPausedIds] = useState<Set<number>>(new Set())\n  const metaRefs = useRef<Map<number, ToastMeta>>(new Map())\n\n  const clearTimer = (id: number) => {\n    const meta = metaRefs.current.get(id)\n    if (meta?.timerId) {\n      clearTimeout(meta.timerId)\n      meta.timerId = null\n    }\n  }\n\n  const closeToast = useCallback((id: number) => {\n    clearTimer(id)\n    metaRefs.current.delete(id)\n    setPausedIds((prev) => {\n      const next = new Set(prev)\n      next.delete(id)\n      return next\n    })\n    setToasts((prev) => prev.filter((t) => t.id !== id))\n  }, [])\n\n  const dismissAll = useCallback(() => {\n    metaRefs.current.forEach((meta) => {\n      if (meta.timerId) clearTimeout(meta.timerId)\n    })\n    metaRefs.current.clear()\n    setPausedIds(new Set())\n    setToasts([])\n  }, [])\n\n  const startAutoClose = useCallback(\n    (toastId: number, delay: number) => {\n      clearTimer(toastId)\n\n      const timerId = setTimeout(() => {\n        closeToast(toastId)\n      }, delay)\n\n      const meta = metaRefs.current.get(toastId)\n      if (meta) {\n        meta.timerId = timerId\n        meta.startTime = Date.now()\n        meta.remainingTime = delay\n      } else {\n        metaRefs.current.set(toastId, {\n          timerId,\n          startTime: Date.now(),\n          remainingTime: delay,\n        })\n      }\n    },\n    [closeToast],\n  )\n\n  useEffect(() => {\n    const refs = metaRefs.current\n    return () =>\n      refs.forEach((meta) => {\n        if (meta.timerId) clearTimeout(meta.timerId)\n      })\n  }, [])\n\n  const showToast = useCallback(\n    (message: ReactNode, options?: ToastOptions): number => {\n      const id = ++toastCounter\n\n      const newToast: IToast = {\n        id,\n        title: options?.title,\n        message,\n        type: options?.type ?? 'info',\n        variant: options?.variant ?? 'accent',\n        duration: options?.duration ?? 4000,\n        autoClose: options?.autoClose ?? true,\n        pauseOnHover: options?.pauseOnHover ?? true,\n        showProgressBar: options?.showProgressBar ?? options?.autoClose !== false,\n        action: options?.action,\n        icon: options?.icon,\n      }\n\n      setToasts((prev) => {\n        const updated = [...prev, newToast]\n        if (updated.length > maxToasts) updated.shift()\n        return updated\n      })\n\n      if (newToast.autoClose) {\n        startAutoClose(id, newToast.duration)\n      }\n\n      return id\n    },\n    [maxToasts, startAutoClose],\n  )\n\n  // Hover pauses timer and tracks exact remaining milliseconds\n  const handleMouseEnter = (toast: IToast) => {\n    if (!toast.pauseOnHover || !toast.autoClose) return\n\n    const meta = metaRefs.current.get(toast.id)\n    if (meta) {\n      const elapsed = Date.now() - meta.startTime\n      meta.remainingTime = Math.max(0, meta.remainingTime - elapsed)\n      clearTimer(toast.id)\n      setPausedIds((prev) => new Set(prev).add(toast.id))\n    }\n  }\n\n  // Mouse leave resumes timer with exact remaining milliseconds\n  const handleMouseLeave = (toast: IToast) => {\n    if (!toast.pauseOnHover || !toast.autoClose) return\n\n    setPausedIds((prev) => {\n      const next = new Set(prev)\n      next.delete(toast.id)\n      return next\n    })\n\n    const meta = metaRefs.current.get(toast.id)\n    if (meta && meta.remainingTime > 0) {\n      startAutoClose(toast.id, meta.remainingTime)\n    } else if (meta && meta.remainingTime <= 0) {\n      closeToast(toast.id)\n    }\n  }\n\n  const toastHelpers = useMemo(\n    () => ({\n      show: (message: ReactNode, options?: ToastOptions) => showToast(message, options),\n      success: (message: ReactNode, options?: ToastOptions) =>\n        showToast(message, { ...options, type: 'success' }),\n      error: (message: ReactNode, options?: ToastOptions) =>\n        showToast(message, { ...options, type: 'error' }),\n      info: (message: ReactNode, options?: ToastOptions) =>\n        showToast(message, { ...options, type: 'info' }),\n      warning: (message: ReactNode, options?: ToastOptions) =>\n        showToast(message, { ...options, type: 'warning' }),\n      dismiss: (id: number) => closeToast(id),\n      dismissAll: () => dismissAll(),\n    }),\n    [showToast, closeToast, dismissAll],\n  )\n\n  return (\n    <ToastContext.Provider value={{ showToast, closeToast, toast: toastHelpers }}>\n      {children}\n\n      {/* Toast Container */}\n      <div\n        className={buildClassName(\n          'fixed z-[9999] flex flex-col gap-3 pointer-events-none',\n          placementClass[placement],\n          className,\n        )}\n      >\n        {toasts.map((toastItem) => (\n          <div\n            key={toastItem.id}\n            className=\"pointer-events-auto\"\n            onMouseEnter={() => handleMouseEnter(toastItem)}\n            onMouseLeave={() => handleMouseLeave(toastItem)}\n          >\n            <Toast\n              {...toastItem}\n              isPaused={pausedIds.has(toastItem.id)}\n              isTop={placement.startsWith('top')}\n              onClose={() => closeToast(toastItem.id)}\n            />\n          </div>\n        ))}\n      </div>\n    </ToastContext.Provider>\n  )\n}\n\nToastProvider.displayName = 'ToastProvider'\n"],"names":["createContext","useContext","useState","useRef","useCallback","useEffect","useMemo","_jsxs","_jsx","buildClassName","Toast"],"mappings":"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"}

package/dist/cjs/components/VirtualizedDataTable/VirtualizedDataTable.js

@@ -0,0 +1,122 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var reactWindow = require('react-window');
+var buildClassname = require('../../utils/build-classname.js');
+var TextContent = require('../TextContent/TextContent.js');
+var Checkbox = require('../Checkbox/Checkbox.js');
+var VirtualizedRow = require('./VirtualizedRow.js');
+require('../DataTable/DataTable.js');
+var DataTable_utils = require('../DataTable/DataTable.utils.js');
+var DataTable_icons = require('../DataTable/DataTable.icons.js');
+
+const SELECTION_COLUMN_WIDTH = '44px';
+const DENSITY_CELL_CLASS = {
+    compact: 'px-2 py-1.5',
+    default: 'px-3 py-3',
+    spacious: 'px-4 py-4',
+};
+const columnWidth = (col) => {
+    if (!col.width)
+        return '1fr';
+    if (typeof col.width === 'number')
+        return `${col.width}px`;
+    return col.width;
+};
+function VirtualizedDataTable({ items, columns, sorting = {}, onSort, loading = false, emptyMessage = 'No data available', containerClass = '', wrapperClass = '', onRowClick, rowClass, density = 'default', striped = false, rowHeight = 48, maxHeight = 400, overscanCount = 3, rowKey = 'id', selectable = false, selectedRowKeys, defaultSelectedRowKeys, onSelectionChange, isRowSelectable, }) {
+    const scrollRef = React.useRef(null);
+    const outerRef = React.useRef(null);
+    const headerRef = React.useRef(null);
+    const getKey = React.useCallback((item, idx) => {
+        var _a;
+        if (typeof rowKey === 'function')
+            return rowKey(item);
+        return (_a = item[rowKey]) !== null && _a !== void 0 ? _a : idx;
+    }, [rowKey]);
+    const { isSelected, toggleRow, toggleAll, allSelected, someSelected } = DataTable_utils.useRowSelection({
+        items,
+        getKey,
+        selectedRowKeys,
+        defaultSelectedRowKeys,
+        onSelectionChange,
+        isRowSelectable,
+    });
+    const gridTemplate = React.useMemo(() => {
+        const widths = columns.map((col) => columnWidth(col));
+        return selectable ? [SELECTION_COLUMN_WIDTH, ...widths].join(' ') : widths.join(' ');
+    }, [columns, selectable]);
+    const densityCellClass = DENSITY_CELL_CLASS[density];
+    const skeletonRows = Math.max(1, Math.floor(maxHeight / rowHeight));
+    React.useEffect(() => {
+        const el = outerRef.current;
+        if (!el)
+            return;
+        const handler = () => {
+            if (headerRef.current)
+                headerRef.current.scrollLeft = el.scrollLeft;
+        };
+        el.addEventListener('scroll', handler);
+        return () => el.removeEventListener('scroll', handler);
+    }, []);
+    const handleSort = React.useCallback((column) => {
+        if (column.sortable)
+            onSort === null || onSort === void 0 ? void 0 : onSort(column);
+    }, [onSort]);
+    const itemData = React.useMemo(() => ({
+        items,
+        columns,
+        gridTemplate,
+        onRowClick,
+        rowClass,
+        density,
+        striped,
+        selectable,
+        getKey,
+        isSelected,
+        toggleRow,
+        isRowSelectable,
+    }), [
+        items,
+        columns,
+        gridTemplate,
+        onRowClick,
+        rowClass,
+        density,
+        striped,
+        selectable,
+        getKey,
+        isSelected,
+        toggleRow,
+        isRowSelectable,
+    ]);
+    /* -------------------------------------------------------
+     * Header
+     * ------------------------------------------------------- */
+    const Header = (jsxRuntime.jsx("div", { ref: headerRef, className: "overflow-hidden w-full", children: jsxRuntime.jsxs("div", { className: "grid bg-gray-50 dark:bg-gray-800 border-b border-[var(--ui-border)]", style: { gridTemplateColumns: gridTemplate, minWidth: 'fit-content' }, children: [selectable && (jsxRuntime.jsx("div", { role: "columnheader", className: buildClassname.buildClassName('flex items-center border-r last:border-r-0 border-[var(--ui-border)]', densityCellClass), children: jsxRuntime.jsx(Checkbox.Checkbox, { "aria-label": "Select all rows", checked: allSelected, ref: (el) => {
+                            if (el)
+                                el.indeterminate = someSelected;
+                        }, onChange: toggleAll }) })), columns.map((col) => (jsxRuntime.jsx("div", { role: "columnheader", className: buildClassname.buildClassName('font-semibold text-sm whitespace-nowrap flex items-center', densityCellClass, 'border-r last:border-r-0 border-[var(--ui-border)]', col.sticky === 'left' &&
+                        'sticky left-0 z-20 bg-gray-50 dark:bg-gray-800 shadow-[2px_0_4px_rgba(0,0,0,0.05)]', col.sticky === 'right' &&
+                        'sticky right-0 z-20 bg-gray-50 dark:bg-gray-800 shadow-[-2px_0_4px_rgba(0,0,0,0.05)]', col.headerClass), children: jsxRuntime.jsxs(TextContent.TextContent, { role: col.sortable ? 'button' : undefined, className: buildClassname.buildClassName(col.sortable && 'inline-flex items-center gap-2 cursor-pointer select-none'), onClick: () => handleSort(col), children: [col.label, col.sortable ? DataTable_icons.getSortIcon(sorting[col.name]) : null] }) }, col.name)))] }) }));
+    const wrapperCls = buildClassname.buildClassName('rounded-lg border border-[var(--ui-border)] overflow-hidden', wrapperClass);
+    /* -------------------------------------------------------
+     * Loading state
+     * ------------------------------------------------------- */
+    if (loading) {
+        return (jsxRuntime.jsx("div", { className: buildClassname.buildClassName('w-full rounded-lg relative', containerClass), children: jsxRuntime.jsxs("div", { className: wrapperCls, children: [Header, jsxRuntime.jsx("div", { style: { height: maxHeight }, className: "flex flex-col", children: Array.from({ length: skeletonRows }).map((_, idx) => (jsxRuntime.jsxs("div", { "data-testid": "skeleton-row", className: "grid animate-pulse bg-white dark:bg-gray-900 border-b border-[var(--ui-border-muted)]", style: { gridTemplateColumns: gridTemplate, height: rowHeight }, children: [selectable && jsxRuntime.jsx("div", { className: densityCellClass }), columns.map((col) => (jsxRuntime.jsx("div", { className: densityCellClass, children: jsxRuntime.jsx("div", { className: "h-4 w-3/4 bg-gray-300 dark:bg-gray-700 rounded" }) }, col.name)))] }, idx))) })] }) }));
+    }
+    /* -------------------------------------------------------
+     * Empty state
+     * ------------------------------------------------------- */
+    if (items.length === 0) {
+        return (jsxRuntime.jsx("div", { className: buildClassname.buildClassName('w-full rounded-lg relative', containerClass), children: jsxRuntime.jsxs("div", { className: wrapperCls, children: [Header, jsxRuntime.jsx("div", { className: "flex items-center justify-center text-gray-500 dark:text-gray-300", style: { height: maxHeight }, children: emptyMessage })] }) }));
+    }
+    /* -------------------------------------------------------
+     * Virtualized body
+     * ------------------------------------------------------- */
+    return (jsxRuntime.jsx("div", { className: buildClassname.buildClassName('w-full rounded-lg relative', containerClass), children: jsxRuntime.jsxs("div", { className: wrapperCls, children: [Header, jsxRuntime.jsx(reactWindow.FixedSizeList, { ref: scrollRef, outerRef: outerRef, height: maxHeight, width: "100%", itemCount: items.length, itemSize: rowHeight, itemData: itemData, overscanCount: overscanCount, children: VirtualizedRow.VirtualizedRow })] }) }));
+}
+
+exports.VirtualizedDataTable = VirtualizedDataTable;
+//# sourceMappingURL=VirtualizedDataTable.js.map

package/dist/cjs/components/VirtualizedDataTable/VirtualizedDataTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VirtualizedDataTable.js","sources":["../../../../../src/components/VirtualizedDataTable/VirtualizedDataTable.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useRef } from 'react'\nimport { FixedSizeList as List } from 'react-window'\nimport { buildClassName } from '../../utils/build-classname'\nimport { TextContent } from '../TextContent'\nimport { Checkbox } from '../Checkbox'\nimport { VirtualizedRow } from './VirtualizedRow'\nimport {\n  type DataTableColumn,\n  type DataTableDensity,\n  getSortIcon,\n  useRowSelection,\n} from '../DataTable'\nimport type { VirtualizedDataTableProps } from './VirtualizedDataTable.types'\n\nconst SELECTION_COLUMN_WIDTH = '44px'\n\nconst DENSITY_CELL_CLASS: Record<DataTableDensity, string> = {\n  compact: 'px-2 py-1.5',\n  default: 'px-3 py-3',\n  spacious: 'px-4 py-4',\n}\n\nconst columnWidth = (col: DataTableColumn): string => {\n  if (!col.width) return '1fr'\n  if (typeof col.width === 'number') return `${col.width}px`\n  return col.width\n}\n\nexport function VirtualizedDataTable<T extends Record<string, any> = Record<string, any>>({\n  items,\n  columns,\n  sorting = {},\n  onSort,\n  loading = false,\n  emptyMessage = 'No data available',\n  containerClass = '',\n  wrapperClass = '',\n  onRowClick,\n  rowClass,\n  density = 'default',\n  striped = false,\n  rowHeight = 48,\n  maxHeight = 400,\n  overscanCount = 3,\n  rowKey = 'id',\n  selectable = false,\n  selectedRowKeys,\n  defaultSelectedRowKeys,\n  onSelectionChange,\n  isRowSelectable,\n}: VirtualizedDataTableProps<T>) {\n  const scrollRef = useRef<any>(null)\n  const outerRef = useRef<HTMLDivElement>(null)\n  const headerRef = useRef<HTMLDivElement | null>(null)\n\n  const getKey = useCallback(\n    (item: T, idx: number): string | number => {\n      if (typeof rowKey === 'function') return rowKey(item)\n      return (item as any)[rowKey] ?? idx\n    },\n    [rowKey],\n  )\n\n  const { isSelected, toggleRow, toggleAll, allSelected, someSelected } = useRowSelection({\n    items,\n    getKey,\n    selectedRowKeys,\n    defaultSelectedRowKeys,\n    onSelectionChange,\n    isRowSelectable,\n  })\n\n  const gridTemplate = useMemo(() => {\n    const widths = columns.map((col) => columnWidth(col))\n    return selectable ? [SELECTION_COLUMN_WIDTH, ...widths].join(' ') : widths.join(' ')\n  }, [columns, selectable])\n\n  const densityCellClass = DENSITY_CELL_CLASS[density]\n\n  const skeletonRows = Math.max(1, Math.floor(maxHeight / rowHeight))\n\n  useEffect(() => {\n    const el = outerRef.current\n    if (!el) return\n    const handler = () => {\n      if (headerRef.current) headerRef.current.scrollLeft = el.scrollLeft\n    }\n    el.addEventListener('scroll', handler)\n    return () => el.removeEventListener('scroll', handler)\n  }, [])\n\n  const handleSort = useCallback(\n    (column: DataTableColumn) => {\n      if (column.sortable) onSort?.(column as DataTableColumn<T>)\n    },\n    [onSort],\n  )\n\n  const itemData = useMemo(\n    () => ({\n      items,\n      columns,\n      gridTemplate,\n      onRowClick,\n      rowClass,\n      density,\n      striped,\n      selectable,\n      getKey,\n      isSelected,\n      toggleRow,\n      isRowSelectable,\n    }),\n    [\n      items,\n      columns,\n      gridTemplate,\n      onRowClick,\n      rowClass,\n      density,\n      striped,\n      selectable,\n      getKey,\n      isSelected,\n      toggleRow,\n      isRowSelectable,\n    ],\n  )\n\n  /* -------------------------------------------------------\n   * Header\n   * ------------------------------------------------------- */\n  const Header = (\n    <div ref={headerRef} className=\"overflow-hidden w-full\">\n      <div\n        className=\"grid bg-gray-50 dark:bg-gray-800 border-b border-[var(--ui-border)]\"\n        style={{ gridTemplateColumns: gridTemplate, minWidth: 'fit-content' }}\n      >\n        {selectable && (\n          <div\n            role=\"columnheader\"\n            className={buildClassName(\n              'flex items-center border-r last:border-r-0 border-[var(--ui-border)]',\n              densityCellClass,\n            )}\n          >\n            <Checkbox\n              aria-label=\"Select all rows\"\n              checked={allSelected}\n              ref={(el) => {\n                if (el) el.indeterminate = someSelected\n              }}\n              onChange={toggleAll}\n            />\n          </div>\n        )}\n        {columns.map((col) => (\n          <div\n            key={col.name}\n            role=\"columnheader\"\n            className={buildClassName(\n              'font-semibold text-sm whitespace-nowrap flex items-center',\n              densityCellClass,\n              'border-r last:border-r-0 border-[var(--ui-border)]',\n              col.sticky === 'left' &&\n                'sticky left-0 z-20 bg-gray-50 dark:bg-gray-800 shadow-[2px_0_4px_rgba(0,0,0,0.05)]',\n              col.sticky === 'right' &&\n                'sticky right-0 z-20 bg-gray-50 dark:bg-gray-800 shadow-[-2px_0_4px_rgba(0,0,0,0.05)]',\n              col.headerClass,\n            )}\n          >\n            <TextContent\n              role={col.sortable ? 'button' : undefined}\n              className={buildClassName(\n                col.sortable && 'inline-flex items-center gap-2 cursor-pointer select-none',\n              )}\n              onClick={() => handleSort(col)}\n            >\n              {col.label}\n              {col.sortable ? getSortIcon(sorting[col.name]) : null}\n            </TextContent>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n\n  const wrapperCls = buildClassName(\n    'rounded-lg border border-[var(--ui-border)] overflow-hidden',\n    wrapperClass,\n  )\n\n  /* -------------------------------------------------------\n   * Loading state\n   * ------------------------------------------------------- */\n  if (loading) {\n    return (\n      <div className={buildClassName('w-full rounded-lg relative', containerClass)}>\n        <div className={wrapperCls}>\n          {Header}\n          <div style={{ height: maxHeight }} className=\"flex flex-col\">\n            {Array.from({ length: skeletonRows }).map((_, idx) => (\n              <div\n                key={idx}\n                data-testid=\"skeleton-row\"\n                className=\"grid animate-pulse bg-white dark:bg-gray-900 border-b border-[var(--ui-border-muted)]\"\n                style={{ gridTemplateColumns: gridTemplate, height: rowHeight }}\n              >\n                {selectable && <div className={densityCellClass} />}\n                {columns.map((col) => (\n                  <div key={col.name} className={densityCellClass}>\n                    <div className=\"h-4 w-3/4 bg-gray-300 dark:bg-gray-700 rounded\" />\n                  </div>\n                ))}\n              </div>\n            ))}\n          </div>\n        </div>\n      </div>\n    )\n  }\n\n  /* -------------------------------------------------------\n   * Empty state\n   * ------------------------------------------------------- */\n  if (items.length === 0) {\n    return (\n      <div className={buildClassName('w-full rounded-lg relative', containerClass)}>\n        <div className={wrapperCls}>\n          {Header}\n          <div\n            className=\"flex items-center justify-center text-gray-500 dark:text-gray-300\"\n            style={{ height: maxHeight }}\n          >\n            {emptyMessage}\n          </div>\n        </div>\n      </div>\n    )\n  }\n\n  /* -------------------------------------------------------\n   * Virtualized body\n   * ------------------------------------------------------- */\n  return (\n    <div className={buildClassName('w-full rounded-lg relative', containerClass)}>\n      <div className={wrapperCls}>\n        {Header}\n        <List\n          ref={scrollRef}\n          outerRef={outerRef}\n          height={maxHeight}\n          width=\"100%\"\n          itemCount={items.length}\n          itemSize={rowHeight}\n          itemData={itemData}\n          overscanCount={overscanCount}\n        >\n          {VirtualizedRow}\n        </List>\n      </div>\n    </div>\n  )\n}\n"],"names":["useRef","useCallback","useRowSelection","useMemo","useEffect","_jsx","_jsxs","buildClassName","Checkbox","TextContent","getSortIcon","List","VirtualizedRow"],"mappings":"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"}

package/dist/cjs/components/VirtualizedDataTable/VirtualizedRow.js

@@ -0,0 +1,48 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var buildClassname = require('../../utils/build-classname.js');
+var get = require('../../utils/get.js');
+var Checkbox = require('../Checkbox/Checkbox.js');
+
+const DENSITY_CELL_CLASS = {
+    compact: 'px-2 py-1.5',
+    default: 'px-3 py-3',
+    spacious: 'px-4 py-4',
+};
+const VirtualizedRow = ({ index, style, data, }) => {
+    var _a, _b;
+    const { items, columns, gridTemplate, onRowClick, rowClass, density = 'default', striped, selectable, getKey, isSelected, toggleRow, isRowSelectable, } = data;
+    const item = items[index];
+    const isStriped = striped && index % 2 === 1;
+    const key = (_a = getKey === null || getKey === void 0 ? void 0 : getKey(item, index)) !== null && _a !== void 0 ? _a : index;
+    const rowSelectable = !isRowSelectable || isRowSelectable(item);
+    const resolvedRowClass = !rowClass
+        ? ''
+        : typeof rowClass === 'function'
+            ? rowClass(item, index)
+            : rowClass;
+    const getCellClass = (col) => {
+        if (!col.cellClass)
+            return '';
+        if (typeof col.cellClass === 'function')
+            return col.cellClass(item);
+        return col.cellClass;
+    };
+    const densityCellClass = DENSITY_CELL_CLASS[density];
+    return (jsxRuntime.jsxs("div", { role: "row", className: buildClassname.buildClassName('grid border-b border-[var(--ui-border)] bg-white dark:bg-gray-900 group', onRowClick && 'cursor-pointer', isStriped && 'bg-gray-50 dark:bg-gray-800/40', resolvedRowClass), style: {
+            ...style,
+            display: 'grid',
+            gridTemplateColumns: gridTemplate,
+            minWidth: 'fit-content',
+        }, onClick: onRowClick ? () => onRowClick(item, index) : undefined, children: [selectable && (jsxRuntime.jsx("div", { role: "cell", className: buildClassname.buildClassName('flex items-center whitespace-nowrap border-r last:border-r-0 border-[var(--ui-border)]', densityCellClass, isStriped && 'bg-gray-50 dark:bg-gray-800/40'), onClick: (e) => e.stopPropagation(), children: jsxRuntime.jsx(Checkbox.Checkbox, { "aria-label": "Select row", checked: (_b = isSelected === null || isSelected === void 0 ? void 0 : isSelected(key)) !== null && _b !== void 0 ? _b : false, disabled: !rowSelectable, onChange: () => toggleRow === null || toggleRow === void 0 ? void 0 : toggleRow(key) }) })), columns.map((col) => {
+                var _a;
+                const content = col.render ? col.render(item) : ((_a = get.get(item, col.name)) !== null && _a !== void 0 ? _a : 'Not set');
+                return (jsxRuntime.jsx("div", { role: "cell", className: buildClassname.buildClassName('whitespace-nowrap border-r last:border-r-0 border-[var(--ui-border)]', densityCellClass, col.align === 'center' && 'text-center', col.align === 'right' && 'text-right', col.sticky === 'left' &&
+                        'sticky left-0 z-10 bg-white dark:bg-gray-900 shadow-[2px_0_4px_rgba(0,0,0,0.05)]', col.sticky === 'right' &&
+                        'sticky right-0 z-10 bg-white dark:bg-gray-900 shadow-[-2px_0_4px_rgba(0,0,0,0.05)]', isStriped && 'bg-gray-50 dark:bg-gray-800/40', getCellClass(col)), children: content }, col.name));
+            })] }));
+};
+
+exports.VirtualizedRow = VirtualizedRow;
+//# sourceMappingURL=VirtualizedRow.js.map