@pk-design/react-tailwind 1.4.0 → 1.4.2

package/dist/react-tailwind.es.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { twMerge } from 'tailwind-merge';
 import * as React from 'react';
 import React__default, { forwardRef, useMemo, useId, useRef, useState, useEffect, Fragment as Fragment$1, useCallback, useImperativeHandle, createContext, useContext } from 'react';
+import { twMerge } from 'tailwind-merge';
 import { Dialog, DialogBackdrop, DialogPanel, DialogTitle, Menu, MenuButton, MenuItems, MenuItem, RadioGroup as RadioGroup$1, Radio as Radio$1, Combobox, ComboboxInput, ComboboxButton, ComboboxOptions, ComboboxOption, TabGroup, TabList, Tab, TabPanels, TabPanel, Transition } from '@headlessui/react';
 import { FixedSizeList } from 'react-window';
 
@@ -131,7 +131,7 @@ const TextContent = forwardRef((props, ref) => {
     return React__default.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';
@@ -215,17 +215,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 (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: [jsxs("span", { className: "inline-flex items-center gap-2", children: [jsx(Icon, { className: "size-5", "data-testid": `alert-${type}-icon` }), jsx("span", { className: "pr-2 inline-flex items-center", children: message || children })] }), removable && (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: 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 = 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) : (jsx(DefaultIcon, { className: "size-5 shrink-0", "data-testid": `alert-${type}-icon` }));
+    return (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: [jsxs("span", { className: "inline-flex items-start gap-2 min-w-0", children: [iconNode && jsx("span", { className: "shrink-0 inline-flex mt-0.5", children: iconNode }), jsxs("span", { className: "inline-flex flex-col gap-0.5 min-w-0", children: [title && jsx("span", { className: "font-semibold", children: title }), jsx("span", { className: "inline-flex items-center", children: message !== null && message !== void 0 ? message : children })] })] }), removable && (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: jsx(SvgX, { className: "size-4.5", "data-testid": "alert-remove-icon" }) }))] }));
+});
 Alert.displayName = 'Alert';
 
 const ThemeClassMap = {
@@ -235,14 +236,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 = forwardRef((props, ref) => {
-    const { theme = 'info', className = '', children, removable = false, rounded = false, onRemove = () => { }, ...restProps } = props;
-    return (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: [jsx(TextContent, { className: "pr-3 inline-flex items-center", children: children }), removable ? (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 (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 && jsx("span", { className: "shrink-0 inline-flex", children: icon }), children, removable && (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';
 
@@ -289,13 +294,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,
@@ -303,14 +306,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 = 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 (jsx(Icon, { "data-testid": `banner-${type}-icon`, className: buildClassName('ml-1 mr-3', sizeMap[iconSize]) }));
-    };
-    return (jsxs("div", { ref: ref, className: className, "data-testid": `banner-${type}`, ...restProps, children: [renderIcon(), 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) : (jsx(DefaultIcon, { "data-testid": `banner-${type}-icon`, className: buildClassName('shrink-0', sizeMap[iconSize]) }));
+    return (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, jsx("div", { className: "flex items-center w-full justify-between", children: children }), removable && (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: jsx(SvgX, { className: "size-4.5", "data-testid": "banner-remove-icon" }) }))] }));
 });
 Banner.displayName = 'Banner';
 
@@ -318,7 +324,7 @@ const BodyText = forwardRef((props, ref) => {
     const { as = 'p', small = false, strong = false, muted = false, error = false, inline = false, className, ...rest } = props;
     return React__default.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,
     });
 });