@pk-design/react-tailwind 1.4.0 → 1.4.2

package/dist/react-tailwind.cjs.js

@@ -1,8 +1,8 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var tailwindMerge = require('tailwind-merge');
 var React = require('react');
+var tailwindMerge = require('tailwind-merge');
 var react = require('@headlessui/react');
 var reactWindow = require('react-window');
 
@@ -151,7 +151,7 @@ const TextContent = React.forwardRef((props, ref) => {
     return React.createElement('span', {
         ...rest,
         ref,
-        className: buildClassName(xsmall && 'text-xs/5', small && 'text-sm/6', strong && 'font-semibold', muted && 'text-gray-500', error && 'text-red-500 dark:text-red-500', className),
+        className: buildClassName('text-gray-900 dark:text-gray-100', xsmall && 'text-xs/5', small && 'text-sm/6', strong && 'font-semibold', muted && 'text-gray-500 dark:text-gray-400', error && 'text-red-500 dark:text-red-400', className),
     });
 });
 TextContent.displayName = 'TextContent';
@@ -235,17 +235,18 @@ const AlertTypeIconMap = {
     warning: SvgCircleAlert,
     info: SvgInfo,
 };
-const TypeClassMap = {
+const TypeClassMap$1 = {
     success: 'bg-[var(--ui-success-light)] ring-[var(--ui-success-ring-subtle)] text-[var(--ui-success-text)]',
-    danger: 'bg-[var(--ui-danger-light)]  ring-[var(--ui-danger-ring-subtle)]  text-[var(--ui-danger-text)]',
+    danger: 'bg-[var(--ui-danger-light)] ring-[var(--ui-danger-ring-subtle)] text-[var(--ui-danger-text)]',
     warning: 'bg-[var(--ui-warning-light)] ring-[var(--ui-warning-ring-subtle)] text-[var(--ui-warning-text)]',
-    info: 'bg-[var(--ui-info-light)]    ring-[var(--ui-info-ring-subtle)]    text-[var(--ui-info-text)]',
-};
-const Alert = (props) => {
-    const { type = 'info', className = '', message, children, removable = false, onRemove = () => { }, ...restProps } = props;
-    const Icon = AlertTypeIconMap[type] || SvgInfo;
-    return (jsxRuntime.jsxs("div", { className: buildClassName(className, 'flex items-center justify-between rounded-md p-3 text-sm ring-1 ring-inset gap-2', TypeClassMap[type]), ...restProps, children: [jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-2", children: [jsxRuntime.jsx(Icon, { className: "size-5", "data-testid": `alert-${type}-icon` }), jsxRuntime.jsx("span", { className: "pr-2 inline-flex items-center", children: message || children })] }), removable && (jsxRuntime.jsx(Button, { iconOnly: true, "aria-label": "Dismiss alert", size: "xs", variant: "plain", theme: "secondary", className: "hover:bg-black/5 text-gray-600 dark:hover:bg-black/5 dark:text-gray-600", onClick: () => onRemove(), "data-testid": "alert-remove-btn", children: jsxRuntime.jsx(SvgX, { className: "size-4.5", "data-testid": "alert-remove-icon" }) }))] }));
+    info: 'bg-[var(--ui-info-light)] ring-[var(--ui-info-ring-subtle)] text-[var(--ui-info-text)]',
 };
+const Alert = React.forwardRef((props, ref) => {
+    const { type = 'info', className, message, children, removable = false, onRemove, icon, title, ...restProps } = props;
+    const DefaultIcon = AlertTypeIconMap[type] || SvgInfo;
+    const iconNode = icon !== undefined ? (icon) : (jsxRuntime.jsx(DefaultIcon, { className: "size-5 shrink-0", "data-testid": `alert-${type}-icon` }));
+    return (jsxRuntime.jsxs("div", { ref: ref, className: buildClassName('flex items-center justify-between rounded-md p-3 text-sm ring-1 ring-inset gap-2', TypeClassMap$1[type], className), ...restProps, children: [jsxRuntime.jsxs("span", { className: "inline-flex items-start gap-2 min-w-0", children: [iconNode && jsxRuntime.jsx("span", { className: "shrink-0 inline-flex mt-0.5", children: iconNode }), jsxRuntime.jsxs("span", { className: "inline-flex flex-col gap-0.5 min-w-0", children: [title && jsxRuntime.jsx("span", { className: "font-semibold", children: title }), jsxRuntime.jsx("span", { className: "inline-flex items-center", children: message !== null && message !== void 0 ? message : children })] })] }), removable && (jsxRuntime.jsx(Button, { iconOnly: true, "aria-label": "Dismiss alert", size: "xs", variant: "plain", theme: "secondary", className: "hover:bg-black/10 dark:hover:bg-white/10 shrink-0", onClick: () => onRemove === null || onRemove === void 0 ? void 0 : onRemove(), "data-testid": "alert-remove-btn", children: jsxRuntime.jsx(SvgX, { className: "size-4.5", "data-testid": "alert-remove-icon" }) }))] }));
+});
 Alert.displayName = 'Alert';
 
 const ThemeClassMap = {
@@ -255,14 +256,18 @@ const ThemeClassMap = {
     info: 'bg-[var(--ui-info-light)] text-[var(--ui-info-text)] ring-[var(--ui-info-ring-subtle)]',
     secondary: 'bg-gray-50 dark:bg-gray-700 text-gray-700 dark:text-gray-200 ring-[var(--ui-secondary-ring-subtle)]',
 };
+const SIZE_CLASS = {
+    sm: 'text-xs py-0.5 px-2',
+    md: 'text-xs py-1 px-3',
+};
 const Badge = React.forwardRef((props, ref) => {
-    const { theme = 'info', className = '', children, removable = false, rounded = false, onRemove = () => { }, ...restProps } = props;
-    return (jsxRuntime.jsxs(TextContent, { ref: ref, className: buildClassName(className, 'inline-flex items-center pl-3 py-1 text-xs font-medium ring-1 ring-inset', ThemeClassMap[theme], rounded ? 'rounded-full' : 'rounded-md'), "data-testid": `badge-${theme}`, ...restProps, children: [jsxRuntime.jsx(TextContent, { className: "pr-3 inline-flex items-center", children: children }), removable ? (jsxRuntime.jsx(SvgX, { className: "size-5 px-0.5 mr-1 hover:bg-slate-200 dark:hover:bg-white/10 rounded-sm cursor-pointer text-gray-600 dark:text-gray-300", role: "button", tabIndex: 0, "aria-label": "Remove", onClick: () => onRemove(), onKeyDown: (e) => {
+    const { theme = 'info', className, children, removable = false, rounded = false, onRemove, size = 'md', icon, ...restProps } = props;
+    return (jsxRuntime.jsxs(TextContent, { ref: ref, className: buildClassName('inline-flex items-center gap-1 font-medium ring-1 ring-inset', SIZE_CLASS[size], ThemeClassMap[theme], rounded ? 'rounded-full' : 'rounded-md', icon ? 'pl-2' : '', removable ? 'pr-1' : '', className), "data-testid": `badge-${theme}`, ...restProps, children: [icon && jsxRuntime.jsx("span", { className: "shrink-0 inline-flex", children: icon }), children, removable && (jsxRuntime.jsx(SvgX, { className: "size-4 shrink-0 hover:bg-black/10 dark:hover:bg-white/10 rounded-sm cursor-pointer", role: "button", tabIndex: 0, "aria-label": "Remove", onClick: () => onRemove === null || onRemove === void 0 ? void 0 : onRemove(), onKeyDown: (e) => {
                     if (e.key === 'Enter' || e.key === ' ') {
                         e.preventDefault();
-                        onRemove();
+                        onRemove === null || onRemove === void 0 ? void 0 : onRemove();
                     }
-                } })) : null] }));
+                } }))] }));
 });
 Badge.displayName = 'Badge';
 
@@ -309,13 +314,11 @@ var SvgCircleCheck = function SvgCircleCheck(props) {
 };
 
 const sizeMap = {
-    4: `size-4`,
-    5: `size-5`,
-    6: `size-6`,
-    7: `size-7`,
-    8: `size-8`,
-    9: `size-9`,
-    10: `size-10`,
+    xs: 'size-4',
+    sm: 'size-5',
+    md: 'size-6',
+    lg: 'size-8',
+    xl: 'size-10',
 };
 const IconMap = {
     info: SvgInfo,
@@ -323,14 +326,17 @@ const IconMap = {
     success: SvgCircleCheck,
     warning: SvgTriangleAlert,
 };
+const TypeClassMap = {
+    info: 'bg-[var(--ui-info-light)] ring-[var(--ui-info-ring-subtle)] text-[var(--ui-info-text)]',
+    error: 'bg-[var(--ui-danger-light)] ring-[var(--ui-danger-ring-subtle)] text-[var(--ui-danger-text)]',
+    success: 'bg-[var(--ui-success-light)] ring-[var(--ui-success-ring-subtle)] text-[var(--ui-success-text)]',
+    warning: 'bg-[var(--ui-warning-light)] ring-[var(--ui-warning-ring-subtle)] text-[var(--ui-warning-text)]',
+};
 const Banner = React.forwardRef((props, ref) => {
-    const { type = 'info', iconSize = 5, children, ...restProps } = props;
-    const className = buildClassName('text-sm banner rounded-md flex w-full p-3 items-center', type === 'info' ? 'bg-blue-50 text-blue-700' : '', type === 'error' ? 'bg-red-50 text-red-700' : '', type === 'success' ? 'bg-green-50 text-green-700' : '', type === 'warning' ? 'bg-orange-50 text-orange-700' : '');
-    const renderIcon = () => {
-        const Icon = IconMap[type];
-        return (jsxRuntime.jsx(Icon, { "data-testid": `banner-${type}-icon`, className: buildClassName('ml-1 mr-3', sizeMap[iconSize]) }));
-    };
-    return (jsxRuntime.jsxs("div", { ref: ref, className: className, "data-testid": `banner-${type}`, ...restProps, children: [renderIcon(), jsxRuntime.jsx("div", { className: "flex items-center w-full justify-between", children: children })] }));
+    const { type = 'info', iconSize = 'sm', children, icon, removable = false, onRemove, className, ...restProps } = props;
+    const DefaultIcon = IconMap[type];
+    const iconNode = icon !== undefined ? (icon) : (jsxRuntime.jsx(DefaultIcon, { "data-testid": `banner-${type}-icon`, className: buildClassName('shrink-0', sizeMap[iconSize]) }));
+    return (jsxRuntime.jsxs("div", { ref: ref, className: buildClassName('text-sm rounded-md flex w-full p-3 items-center gap-3 ring-1 ring-inset', TypeClassMap[type], className), "data-testid": `banner-${type}`, ...restProps, children: [iconNode, jsxRuntime.jsx("div", { className: "flex items-center w-full justify-between", children: children }), removable && (jsxRuntime.jsx(Button, { iconOnly: true, "aria-label": "Dismiss banner", size: "xs", variant: "plain", theme: "secondary", className: "hover:bg-black/10 dark:hover:bg-white/10 shrink-0", onClick: () => onRemove === null || onRemove === void 0 ? void 0 : onRemove(), "data-testid": "banner-remove-btn", children: jsxRuntime.jsx(SvgX, { className: "size-4.5", "data-testid": "banner-remove-icon" }) }))] }));
 });
 Banner.displayName = 'Banner';
 
@@ -338,7 +344,7 @@ const BodyText = React.forwardRef((props, ref) => {
     const { as = 'p', small = false, strong = false, muted = false, error = false, inline = false, className, ...rest } = props;
     return React.createElement(as, {
         ref: ref,
-        className: buildClassName(small && 'text-sm/6', strong && 'font-semibold', muted && 'text-gray-500', error && 'text-red-500', inline && 'inline-flex items-center gap-2', className),
+        className: buildClassName('text-gray-900 dark:text-gray-100', small && 'text-sm/6', strong && 'font-semibold', muted && 'text-gray-500 dark:text-gray-400', error && 'text-red-500 dark:text-red-400', inline && 'inline-flex items-center gap-2', className),
         ...rest,
     });
 });