@pk-design/react-tailwind 1.13.1 → 1.14.0

package/dist/react-tailwind.cjs.js

@@ -167,27 +167,36 @@ const THEMED_BTN_CLASS = {
         plain: 'text-[var(--ui-danger-text)] hover:bg-current/10 active:bg-current/15 focus-visible:outline-[var(--ui-danger-ring)]',
     },
     secondary: {
-        default: 'text-gray-700 bg-white border border-[var(--ui-border)] hover:bg-gray-100 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 focus-visible:outline-[var(--ui-focus-ring)]',
-        outlined: 'text-gray-700 hover:text-white border border-[var(--ui-border)] hover:bg-gray-700 dark:text-gray-200 dark:hover:text-white dark:hover:bg-gray-600 focus-visible:outline-[var(--ui-focus-ring)]',
+        default: 'text-gray-800 bg-gray-200 hover:bg-gray-300 active:bg-gray-300 dark:text-white dark:bg-gray-700 dark:hover:bg-gray-600 dark:active:bg-gray-600 focus-visible:outline-[var(--ui-focus-ring)]',
+        outlined: 'text-gray-800 bg-white border border-gray-300 shadow-xs hover:bg-gray-100 active:bg-gray-200 dark:text-gray-100 dark:bg-transparent dark:border-gray-600 dark:shadow-none dark:hover:bg-white/10 dark:active:bg-white/15 focus-visible:outline-[var(--ui-focus-ring)]',
         plain: 'text-gray-700 hover:bg-current/10 active:bg-current/15 dark:text-gray-200 focus-visible:outline-[var(--ui-focus-ring)]',
     },
     success: {
-        default: 'text-white bg-emerald-600 hover:bg-emerald-700 focus-visible:outline-emerald-500',
-        outlined: 'text-emerald-700 hover:text-white border border-emerald-600 hover:bg-emerald-600 dark:text-emerald-400 dark:border-emerald-500 focus-visible:outline-emerald-500',
+        default: 'text-white bg-emerald-700 hover:bg-emerald-800 focus-visible:outline-emerald-500',
+        outlined: 'text-emerald-700 hover:text-white border border-emerald-700 hover:bg-emerald-700 dark:text-emerald-400 dark:border-emerald-500 focus-visible:outline-emerald-500',
         plain: 'text-emerald-700 hover:bg-current/10 active:bg-current/15 dark:text-emerald-400 focus-visible:outline-emerald-500',
     },
     warning: {
-        default: 'text-white bg-amber-500 hover:bg-amber-600 focus-visible:outline-amber-500',
-        outlined: 'text-amber-700 hover:text-white border border-amber-500 hover:bg-amber-500 dark:text-amber-400 dark:border-amber-500 focus-visible:outline-amber-500',
+        default: 'text-gray-900 bg-amber-500 hover:bg-amber-400 focus-visible:outline-amber-500',
+        outlined: 'text-amber-700 hover:text-gray-900 border border-amber-500 hover:bg-amber-500 dark:text-amber-400 dark:border-amber-500 focus-visible:outline-amber-500',
         plain: 'text-amber-700 hover:bg-current/10 active:bg-current/15 dark:text-amber-400 focus-visible:outline-amber-500',
     },
 };
 const SIZE_CLASSES = {
-    xs: { normal: 'h-7 px-2.5 rounded-sm gap-1 text-xs', iconOnly: 'h-7 w-7 p-1 rounded-sm text-xs' },
-    sm: { normal: 'h-8 px-3 rounded gap-1.5 text-sm', iconOnly: 'h-8 w-8 p-1.5 rounded text-sm' },
-    md: { normal: 'h-9 px-4 rounded-md gap-2 text-sm', iconOnly: 'h-9 w-9 p-2 rounded-md text-sm' },
+    xs: {
+        normal: 'min-h-7 px-2.5 py-1 rounded-sm gap-1 text-xs',
+        iconOnly: 'h-7 w-7 p-1 rounded-sm text-xs',
+    },
+    sm: {
+        normal: 'min-h-8 px-3 py-1 rounded gap-1.5 text-sm',
+        iconOnly: 'h-8 w-8 p-1.5 rounded text-sm',
+    },
+    md: {
+        normal: 'min-h-9 px-4 py-1.5 rounded-md gap-2 text-sm',
+        iconOnly: 'h-9 w-9 p-2 rounded-md text-sm',
+    },
     lg: {
-        normal: 'h-10 px-5 rounded-lg gap-2 text-base',
+        normal: 'min-h-10 px-5 py-2 rounded-lg gap-2 text-base',
         iconOnly: 'h-10 w-10 p-2.5 rounded-lg text-base',
     },
 };
@@ -202,12 +211,18 @@ const LOADER_SIZE = {
  *
  * Disabled styling is keyed off both the native `disabled` attribute and
  * `aria-disabled`, so non-button elements rendered via `as` look disabled too.
+ *
+ * On touch screens an invisible layer makes the tappable area at least 44px,
+ * whatever the button's size, without changing how it looks.
  */
-const BASE_BTN_CLASS = 'font-medium inline-flex items-center justify-center shrink-0 cursor-pointer select-none ' +
+const BASE_BTN_CLASS = 'relative font-medium inline-flex items-center justify-center text-center shrink-0 cursor-pointer select-none ' +
     'transition-[color,background-color,border-color,box-shadow,opacity,transform] duration-150 ease-out ' +
     'active:scale-[0.98] focus:outline-none ' +
     'disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ' +
-    'aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:shadow-none';
+    'aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:shadow-none ' +
+    'pointer-coarse:after:absolute pointer-coarse:after:top-1/2 pointer-coarse:after:left-1/2 ' +
+    'pointer-coarse:after:-translate-x-1/2 pointer-coarse:after:-translate-y-1/2 ' +
+    'pointer-coarse:after:w-full pointer-coarse:after:min-w-11 pointer-coarse:after:h-full pointer-coarse:after:min-h-11';
 const Button = React.forwardRef(({ as, type, ...props }, ref) => {
     const { className = '', children, theme = 'primary', variant = 'default', size = 'md', leftIcon, rightIcon, fullWidth = false, loading = false, loadingText = '', rounded = false, disabled, iconOnly = false, noOutlineOnFocus = false, active, onClick, ...restProps } = props;
     const Component = as || 'button';
@@ -259,7 +274,10 @@ const Button = React.forwardRef(({ as, type, ...props }, ref) => {
     const elementProps = isNativeButton
         ? {
             type: type !== null && type !== void 0 ? type : 'button',
-            disabled: resolvedDisabled,
+            // Not `disabled` while loading: that would drop keyboard focus from the
+            // button just pressed. handleClick ignores presses until it's done.
+            disabled: Boolean(disabled),
+            'aria-disabled': loading && !disabled ? true : undefined,
             role,
             tabIndex,
             onClick: handleClick,
@@ -289,7 +307,9 @@ const Button = React.forwardRef(({ as, type, ...props }, ref) => {
         return buildClassName(BASE_BTN_CLASS, ((_a = THEMED_BTN_CLASS[theme]) === null || _a === void 0 ? void 0 : _a[variant]) || THEMED_BTN_CLASS.primary.default, iconOnly ? sizeObj.iconOnly : sizeObj.normal, 
         // An outline (not a ring) so the offset gap stays transparent on any surface/mode.
         !noOutlineOnFocus &&
-            'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid', rounded && 'rounded-full', fullWidth && 'w-full', variant === 'default' && 'shadow-xs hover:shadow-none', active && 'ring-2 ring-current', className);
+            'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid', rounded && 'rounded-full', fullWidth && 'w-full', 
+        // Secondary default is a flat grey fill; a shadow would bring back the outlined look.
+        variant === 'default' && theme !== 'secondary' && 'shadow-xs hover:shadow-none', active && 'ring-2 ring-current', className);
     }, [theme, variant, sizeObj, iconOnly, noOutlineOnFocus, rounded, fullWidth, active, className]);
     // The spinner and loading text inherit the button's text colour.
     const loaderIcon = (jsxRuntime.jsx(Loader, { "data-testid": "btn-loader-icon", size: LOADER_SIZE[size] || 'xs', className: "text-current" }));
@@ -380,6 +400,86 @@ const useResponsiveValue = (value) => {
     return value.base;
 };
 
+// history.back() lands later, so a drawer opening meanwhile (one replacing another,
+// or React re-running effects under StrictMode) would have its new entry removed
+// instead, and close at once. Removals are counted, and an opening drawer waits for them.
+let pendingBacks = 0;
+const afterBacks = [];
+function settleBack() {
+    pendingBacks = Math.max(0, pendingBacks - 1);
+    if (pendingBacks === 0)
+        afterBacks.splice(0).forEach((run) => run());
+}
+function removeEntry() {
+    pendingBacks += 1;
+    let settled = false;
+    const settle = () => {
+        if (settled)
+            return;
+        settled = true;
+        window.removeEventListener('popstate', settle);
+        settleBack();
+    };
+    window.addEventListener('popstate', settle);
+    // A back that never reports (nothing to go back to) mustn't hold others up.
+    window.setTimeout(settle, 500);
+    window.history.back();
+}
+/**
+ * While `active`, the browser's back button (and Android's back gesture)
+ * closes the drawer instead of leaving the page: opening adds a history entry
+ * (keeping the current state, so routers see the same location), and back
+ * removes it. Closed any other way, the entry is removed too, but only if it's
+ * still the latest one, so a form that saves and then navigates isn't undone.
+ */
+function useCloseOnBack(active, onClose) {
+    const onCloseRef = React.useRef(onClose);
+    React.useEffect(() => {
+        onCloseRef.current = onClose;
+    });
+    const token = React.useId();
+    React.useEffect(() => {
+        if (!active || typeof window === 'undefined')
+            return;
+        const pushEntry = () => { var _a; return window.history.pushState({ ...((_a = window.history.state) !== null && _a !== void 0 ? _a : {}), drawer: token }, ''); };
+        let entryPresent = false;
+        let disposed = false;
+        const handlePop = () => {
+            var _a;
+            if (((_a = window.history.state) === null || _a === void 0 ? void 0 : _a.drawer) === token)
+                return;
+            entryPresent = false;
+            onCloseRef.current();
+            // onClose may step back within the drawer instead of closing it; if it's
+            // still open afterwards, take back its entry so the next back works too.
+            window.setTimeout(() => {
+                if (disposed)
+                    return;
+                pushEntry();
+                entryPresent = true;
+            }, 0);
+        };
+        const start = () => {
+            if (disposed)
+                return;
+            pushEntry();
+            entryPresent = true;
+            window.addEventListener('popstate', handlePop);
+        };
+        if (pendingBacks > 0)
+            afterBacks.push(start);
+        else
+            start();
+        return () => {
+            var _a;
+            disposed = true;
+            window.removeEventListener('popstate', handlePop);
+            if (entryPresent && ((_a = window.history.state) === null || _a === void 0 ? void 0 : _a.drawer) === token)
+                removeEntry();
+        };
+    }, [active, token]);
+}
+
 const alignmentMap = {
     center: 'items-center justify-center h-full',
     start: 'justify-start h-full',
@@ -478,85 +578,6 @@ const Drawer = ({ isOpen, onClose = () => { }, closeOnOutsideClick = true, align
                             : [panelAlignmentMap[align], panelSizeMap[size], panelClass])), "data-layout": fullscreen ? 'fullscreen' : undefined, children: [shouldShowDragHandle && (jsxRuntime.jsx("div", { className: "w-12 h-1.5 rounded-full bg-gray-300 dark:bg-gray-600 mx-auto my-2.5 shrink-0 cursor-grab", "data-testid": "drawer-drag-handle" })), fullscreen && (jsxRuntime.jsxs("div", { className: "sticky top-0 z-10 flex h-14 shrink-0 items-center gap-1 border-b border-[var(--ui-border)] bg-white pl-1 pr-3 pt-[env(safe-area-inset-top,0px)] box-content dark:bg-gray-800", children: [jsxRuntime.jsx(Button, { iconOnly: true, "aria-label": "Close", variant: "plain", theme: "secondary", onClick: onClose, className: "shrink-0", children: jsxRuntime.jsx(SvgX, { className: "size-5" }) }), title && (jsxRuntime.jsx(react.DialogTitle, { as: "h3", className: "min-w-0 flex-1 truncate text-base font-semibold text-gray-900 dark:text-white", children: title })), headerAction && jsxRuntime.jsx("div", { className: "ml-auto shrink-0", children: headerAction })] })), !fullscreen && showTitleSection && (jsxRuntime.jsxs("div", { className: buildClassName('space-y-1 py-3 px-4 md:px-6 flex flex-col border-b border-[var(--ui-border)] shrink-0', titleSticky && 'sticky top-0 bg-white dark:bg-gray-800 z-10'), children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3 min-w-0", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2 min-w-0 flex-1", children: [showBackButton && (jsxRuntime.jsx(Button, { iconOnly: true, "aria-label": "Back", variant: "plain", theme: "secondary", size: "xs", onClick: onClose, children: jsxRuntime.jsx(SvgChevronLeft, { className: "size-4" }) })), title && (jsxRuntime.jsx(react.DialogTitle, { as: "h3", className: buildClassName('text-lg font-semibold text-gray-900 dark:text-white truncate tracking-tight min-w-0', titleClass), children: title }))] }), showCloseButton && (jsxRuntime.jsx(Button, { iconOnly: true, "aria-label": "Close drawer", variant: "plain", theme: "secondary", size: "xs", onClick: onClose, className: "rounded-full text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 shrink-0", children: jsxRuntime.jsx(SvgX, { className: "size-4" }) }))] }), description && (jsxRuntime.jsx("p", { className: buildClassName('text-sm text-gray-500 dark:text-gray-400 font-normal truncate', descriptionClass), children: description }))] })), jsxRuntime.jsxs("div", { className: buildClassName('flex-1 p-4 md:p-6 space-y-4 min-w-0', contentClass, fullscreen && 'pb-[calc(1rem+env(safe-area-inset-bottom,0px))]'), children: [fullscreen && description && (jsxRuntime.jsx("p", { className: buildClassName('text-sm text-gray-500 dark:text-gray-400', descriptionClass), children: description })), children] }), !fullscreen && footer && (jsxRuntime.jsx("div", { className: buildClassName('p-4 border-t border-[var(--ui-border-muted)] bg-white dark:bg-gray-800 shrink-0 min-w-0', footerSticky && 'sticky bottom-0 z-10'), children: footer }))] }) }) })] }));
 };
 Drawer.displayName = 'Drawer';
-// history.back() lands later, so a drawer opening meanwhile (one replacing another,
-// or React re-running effects under StrictMode) would have its new entry removed
-// instead, and close at once. Removals are counted, and an opening drawer waits for them.
-let pendingBacks = 0;
-const afterBacks = [];
-function settleBack() {
-    pendingBacks = Math.max(0, pendingBacks - 1);
-    if (pendingBacks === 0)
-        afterBacks.splice(0).forEach((run) => run());
-}
-function removeEntry() {
-    pendingBacks += 1;
-    let settled = false;
-    const settle = () => {
-        if (settled)
-            return;
-        settled = true;
-        window.removeEventListener('popstate', settle);
-        settleBack();
-    };
-    window.addEventListener('popstate', settle);
-    // A back that never reports (nothing to go back to) mustn't hold others up.
-    window.setTimeout(settle, 500);
-    window.history.back();
-}
-/**
- * While `active`, the browser's back button (and Android's back gesture)
- * closes the drawer instead of leaving the page: opening adds a history entry
- * (keeping the current state, so routers see the same location), and back
- * removes it. Closed any other way, the entry is removed too, but only if it's
- * still the latest one, so a form that saves and then navigates isn't undone.
- */
-function useCloseOnBack(active, onClose) {
-    const onCloseRef = React.useRef(onClose);
-    React.useEffect(() => {
-        onCloseRef.current = onClose;
-    });
-    const token = React.useId();
-    React.useEffect(() => {
-        if (!active || typeof window === 'undefined')
-            return;
-        const pushEntry = () => { var _a; return window.history.pushState({ ...((_a = window.history.state) !== null && _a !== void 0 ? _a : {}), drawer: token }, ''); };
-        let entryPresent = false;
-        let disposed = false;
-        const handlePop = () => {
-            var _a;
-            if (((_a = window.history.state) === null || _a === void 0 ? void 0 : _a.drawer) === token)
-                return;
-            entryPresent = false;
-            onCloseRef.current();
-            // onClose may step back within the drawer instead of closing it; if it's
-            // still open afterwards, take back its entry so the next back works too.
-            window.setTimeout(() => {
-                if (disposed)
-                    return;
-                pushEntry();
-                entryPresent = true;
-            }, 0);
-        };
-        const start = () => {
-            if (disposed)
-                return;
-            pushEntry();
-            entryPresent = true;
-            window.addEventListener('popstate', handlePop);
-        };
-        if (pendingBacks > 0)
-            afterBacks.push(start);
-        else
-            start();
-        return () => {
-            var _a;
-            disposed = true;
-            window.removeEventListener('popstate', handlePop);
-            if (entryPresent && ((_a = window.history.state) === null || _a === void 0 ? void 0 : _a.drawer) === token)
-                removeEntry();
-        };
-    }, [active, token]);
-}
 
 function ActionSheet({ isOpen, onClose, title, description, actions, showCancelButton = true, cancelLabel = 'Cancel', onCancel, closeOnBackdropClick = true, dragHandle = true, panelClass = '', containerClass = '', }) {
     const handleItemClick = (action) => {
@@ -5332,6 +5353,7 @@ exports.isEmpty = isEmpty;
 exports.nextSortDirection = nextSortDirection;
 exports.updateSortQuery = updateSortQuery;
 exports.useBreakpoint = useBreakpoint;
+exports.useCloseOnBack = useCloseOnBack;
 exports.useDebounce = useDebounce;
 exports.useDebounceFn = useDebounceFn;
 exports.useIsMobile = useIsMobile;