@pk-design/react-tailwind 1.11.0 → 1.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/BottomNavigation/BottomNavigation.js +2 -2
- package/dist/cjs/components/BottomNavigation/BottomNavigation.js.map +1 -1
- package/dist/cjs/components/MobileHeader/MobileHeader.js +4 -2
- package/dist/cjs/components/MobileHeader/MobileHeader.js.map +1 -1
- package/dist/cjs/components/SegmentedControl/SegmentedControl.js +6 -2
- package/dist/cjs/components/SegmentedControl/SegmentedControl.js.map +1 -1
- package/dist/es/components/BottomNavigation/BottomNavigation.js +2 -2
- package/dist/es/components/BottomNavigation/BottomNavigation.js.map +1 -1
- package/dist/es/components/MobileHeader/MobileHeader.js +4 -2
- package/dist/es/components/MobileHeader/MobileHeader.js.map +1 -1
- package/dist/es/components/SegmentedControl/SegmentedControl.js +6 -2
- package/dist/es/components/SegmentedControl/SegmentedControl.js.map +1 -1
- package/dist/react-tailwind.cjs.js +12 -6
- package/dist/react-tailwind.cjs.js.map +1 -1
- package/dist/react-tailwind.es.js +12 -6
- package/dist/react-tailwind.es.js.map +1 -1
- package/dist/types/components/BottomNavigation/BottomNavigation.d.ts +1 -1
- package/dist/types/components/BottomNavigation/BottomNavigation.types.d.ts +5 -0
- package/package.json +2 -1
|
@@ -721,7 +721,7 @@ const BodyText = React.forwardRef((props, ref) => {
|
|
|
721
721
|
});
|
|
722
722
|
BodyText.displayName = 'BodyText';
|
|
723
723
|
|
|
724
|
-
function BottomNavigation({ items, activeId, onChange, fixed = true, showLabels = 'always', theme = 'light', activeIndicatorStyle = 'line', containerClass = '', itemClass = '', linkAs = 'a', linkHrefProp = 'href', ariaLabel = 'Bottom Navigation', hidden = false, }) {
|
|
724
|
+
function BottomNavigation({ items, activeId, onChange, fixed = true, showLabels = 'always', theme = 'light', activeIndicatorStyle = 'line', containerClass = '', itemClass = '', linkAs = 'a', linkHrefProp = 'href', ariaLabel = 'Bottom Navigation', hidden = false, rounded = false, }) {
|
|
725
725
|
const handleTabClick = (item) => {
|
|
726
726
|
var _a;
|
|
727
727
|
if (item.disabled)
|
|
@@ -737,7 +737,7 @@ function BottomNavigation({ items, activeId, onChange, fixed = true, showLabels
|
|
|
737
737
|
dark: 'bg-gray-900 text-gray-400 border-t border-gray-800',
|
|
738
738
|
primary: 'bg-blue-600 text-blue-100 border-t border-blue-700',
|
|
739
739
|
}[theme];
|
|
740
|
-
return (jsxRuntime.jsx("nav", { "aria-label": ariaLabel, className: buildClassName('w-full flex items-center justify-around select-none shadow-lg transition-colors relative', fixed && 'fixed bottom-0 left-0 right-0 z-40', 'pb-[env(safe-area-inset-bottom,6px)] px-2', themeStyles, containerClass), "data-testid": "bottom-navigation", children: items.map((item) => {
|
|
740
|
+
return (jsxRuntime.jsx("nav", { "aria-label": ariaLabel, className: buildClassName('w-full flex items-center justify-around select-none shadow-lg transition-colors relative', fixed && 'fixed bottom-0 left-0 right-0 z-40', 'pb-[env(safe-area-inset-bottom,6px)] px-2', themeStyles, rounded && 'rounded-t-2xl border-x', containerClass), "data-testid": "bottom-navigation", children: items.map((item) => {
|
|
741
741
|
const isActive = item.id === activeId;
|
|
742
742
|
const showLabelText = showLabels === 'always' || (showLabels === 'active' && isActive);
|
|
743
743
|
const activeItemColor = {
|
|
@@ -3515,7 +3515,9 @@ function MobileHeader({ title, subtitle, titleAlign = 'center', onBack, backLabe
|
|
|
3515
3515
|
};
|
|
3516
3516
|
return (jsxRuntime.jsxs("header", { className: buildClassName('w-full transition-colors select-none z-30', sticky && 'sticky top-0', transparent
|
|
3517
3517
|
? 'bg-white/80 dark:bg-gray-900/80 backdrop-blur-md border-b border-[var(--ui-border-muted)]'
|
|
3518
|
-
: 'bg-white dark:bg-gray-900 border-b border-[var(--ui-border)] shadow-xs', 'pt-[env(safe-area-inset-top,0px)]', className), "data-testid": "mobile-header", children: [jsxRuntime.jsx("div", { className: "h-
|
|
3518
|
+
: 'bg-white dark:bg-gray-900 border-b border-[var(--ui-border)] shadow-xs', 'pt-[env(safe-area-inset-top,0px)]', className), "data-testid": "mobile-header", children: [jsxRuntime.jsx("div", { className: "h-16 px-4 flex items-center justify-between gap-2 relative", children: searchable && isSearchActive ? (jsxRuntime.jsxs("div", { className: "flex-1 flex items-center gap-2", "data-testid": "mobile-header-search-container", children: [jsxRuntime.jsxs("div", { className: "relative flex-1 flex items-center", children: [jsxRuntime.jsx("span", { className: "absolute left-3 pointer-events-none", children: jsxRuntime.jsx(SearchIcon$1, {}) }), jsxRuntime.jsx("input", { type: "text", value: searchValue, onChange: handleSearchInput, placeholder: searchPlaceholder, autoFocus: true,
|
|
3519
|
+
// 16px text: iOS zooms the page into any field with smaller text.
|
|
3520
|
+
className: "w-full pl-9 pr-8 py-2 text-base bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white rounded-full border border-transparent focus:border-blue-500 focus:outline-hidden transition-all", "data-testid": "mobile-header-search-input" }), searchValue && (jsxRuntime.jsx("button", { type: "button", onClick: handleClearSearch, "aria-label": "Clear search", className: "absolute right-2.5 p-0.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 cursor-pointer", children: jsxRuntime.jsx(ClearIcon, {}) }))] }), jsxRuntime.jsx("button", { type: "button", onClick: () => setIsSearchActive(false), className: "text-xs font-semibold text-blue-600 dark:text-blue-400 px-2 py-1.5 rounded-lg hover:bg-blue-50 dark:hover:bg-blue-950/40 cursor-pointer", children: "Cancel" })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hasLeadingSlot && (jsxRuntime.jsx("div", { className: buildClassName('flex items-center gap-1 shrink-0 z-10',
|
|
3519
3521
|
// A Back button is its own 40px target; reserve the width only for other content.
|
|
3520
3522
|
!onBack && 'min-w-[40px]'), "data-testid": "mobile-header-leading", children: onBack ? (jsxRuntime.jsxs("button", { type: "button", onClick: onBack, "aria-label": backLabel,
|
|
3521
3523
|
// 40px-tall touch target hanging into the row padding: the chevron
|
|
@@ -3526,7 +3528,7 @@ function MobileHeader({ title, subtitle, titleAlign = 'center', onBack, backLabe
|
|
|
3526
3528
|
// a centred title keeps even padding.
|
|
3527
3529
|
titleAlign === 'center' ? 'px-2' : 'pr-2', titleAlign === 'center'
|
|
3528
3530
|
? 'absolute inset-x-12 text-center pointer-events-none flex flex-col items-center justify-center'
|
|
3529
|
-
: 'text-left'), children: [title && (jsxRuntime.jsx("div", { className: "text-
|
|
3531
|
+
: 'text-left'), children: [title && (jsxRuntime.jsx("div", { className: "text-lg leading-6 font-semibold text-gray-900 dark:text-white truncate pointer-events-auto", "data-testid": "mobile-header-title", children: title })), subtitle && (jsxRuntime.jsx("div", { className: "text-[13px] leading-5 text-gray-500 dark:text-gray-400 truncate pointer-events-auto", "data-testid": "mobile-header-subtitle", children: subtitle }))] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-1 min-w-[40px] shrink-0 justify-end z-10", children: [searchable && (jsxRuntime.jsx("button", { type: "button", onClick: () => setIsSearchActive(true), "aria-label": "Search", className: "p-2 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-xl transition-colors cursor-pointer", "data-testid": "mobile-header-search-toggle", children: jsxRuntime.jsx(SearchIcon$1, {}) })), visibleActions.map((action) => {
|
|
3530
3532
|
const badgeColor = {
|
|
3531
3533
|
danger: 'bg-red-500 text-white',
|
|
3532
3534
|
info: 'bg-blue-500 text-white',
|
|
@@ -4468,9 +4470,13 @@ const SegmentedControl = React.forwardRef((props, ref) => {
|
|
|
4468
4470
|
if (!isOptionDisabled) {
|
|
4469
4471
|
onChange(option.value);
|
|
4470
4472
|
}
|
|
4471
|
-
}, onKeyDown: (e) => handleKeyDown(e, index), className: buildClassName('inline-flex items-center justify-center gap-1.5 transition-all duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary-ring)]', SIZE_OPTION_CLASS[size],
|
|
4473
|
+
}, onKeyDown: (e) => handleKeyDown(e, index), className: buildClassName('inline-flex items-center justify-center gap-1.5 transition-all duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary-ring)]', SIZE_OPTION_CLASS[size],
|
|
4474
|
+
// Full width splits the row equally, so the width comes from the
|
|
4475
|
+
// row, not padding; tight side padding keeps labels on one line
|
|
4476
|
+
// on narrow screens.
|
|
4477
|
+
fullWidth ? 'min-w-0 flex-1 px-1.5' : '', isOptionDisabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer', isSelected
|
|
4472
4478
|
? 'bg-white text-[var(--ui-primary)] dark:bg-gray-700 dark:text-blue-400 shadow-xs font-semibold'
|
|
4473
|
-
: 'text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100'), "data-testid": `segmented-option-${option.value}`, children: [option.icon && (jsxRuntime.jsx("span", { className: buildClassName('shrink-0 inline-flex items-center justify-center', SIZE_ICON_CLASS[size]), children: option.icon })), jsxRuntime.jsx("span", { children: option.label })] }, option.value));
|
|
4479
|
+
: 'text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100'), "data-testid": `segmented-option-${option.value}`, children: [option.icon && (jsxRuntime.jsx("span", { className: buildClassName('shrink-0 inline-flex items-center justify-center', SIZE_ICON_CLASS[size]), children: option.icon })), jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: option.label })] }, option.value));
|
|
4474
4480
|
}) }));
|
|
4475
4481
|
});
|
|
4476
4482
|
SegmentedControl.displayName = 'SegmentedControl';
|