@pk-design/react-tailwind 1.11.1 → 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/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/react-tailwind.cjs.js +6 -4
- package/dist/react-tailwind.cjs.js.map +1 -1
- package/dist/react-tailwind.es.js +6 -4
- 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
|
@@ -701,7 +701,7 @@ const BodyText = forwardRef((props, ref) => {
|
|
|
701
701
|
});
|
|
702
702
|
BodyText.displayName = 'BodyText';
|
|
703
703
|
|
|
704
|
-
function BottomNavigation({ items, activeId, onChange, fixed = true, showLabels = 'always', theme = 'light', activeIndicatorStyle = 'line', containerClass = '', itemClass = '', linkAs = 'a', linkHrefProp = 'href', ariaLabel = 'Bottom Navigation', hidden = false, }) {
|
|
704
|
+
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, }) {
|
|
705
705
|
const handleTabClick = (item) => {
|
|
706
706
|
var _a;
|
|
707
707
|
if (item.disabled)
|
|
@@ -717,7 +717,7 @@ function BottomNavigation({ items, activeId, onChange, fixed = true, showLabels
|
|
|
717
717
|
dark: 'bg-gray-900 text-gray-400 border-t border-gray-800',
|
|
718
718
|
primary: 'bg-blue-600 text-blue-100 border-t border-blue-700',
|
|
719
719
|
}[theme];
|
|
720
|
-
return (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) => {
|
|
720
|
+
return (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) => {
|
|
721
721
|
const isActive = item.id === activeId;
|
|
722
722
|
const showLabelText = showLabels === 'always' || (showLabels === 'active' && isActive);
|
|
723
723
|
const activeItemColor = {
|
|
@@ -3495,7 +3495,9 @@ function MobileHeader({ title, subtitle, titleAlign = 'center', onBack, backLabe
|
|
|
3495
3495
|
};
|
|
3496
3496
|
return (jsxs("header", { className: buildClassName('w-full transition-colors select-none z-30', sticky && 'sticky top-0', transparent
|
|
3497
3497
|
? 'bg-white/80 dark:bg-gray-900/80 backdrop-blur-md border-b border-[var(--ui-border-muted)]'
|
|
3498
|
-
: '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: [jsx("div", { className: "h-
|
|
3498
|
+
: '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: [jsx("div", { className: "h-16 px-4 flex items-center justify-between gap-2 relative", children: searchable && isSearchActive ? (jsxs("div", { className: "flex-1 flex items-center gap-2", "data-testid": "mobile-header-search-container", children: [jsxs("div", { className: "relative flex-1 flex items-center", children: [jsx("span", { className: "absolute left-3 pointer-events-none", children: jsx(SearchIcon$1, {}) }), jsx("input", { type: "text", value: searchValue, onChange: handleSearchInput, placeholder: searchPlaceholder, autoFocus: true,
|
|
3499
|
+
// 16px text: iOS zooms the page into any field with smaller text.
|
|
3500
|
+
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 && (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: jsx(ClearIcon, {}) }))] }), 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" })] })) : (jsxs(Fragment, { children: [hasLeadingSlot && (jsx("div", { className: buildClassName('flex items-center gap-1 shrink-0 z-10',
|
|
3499
3501
|
// A Back button is its own 40px target; reserve the width only for other content.
|
|
3500
3502
|
!onBack && 'min-w-[40px]'), "data-testid": "mobile-header-leading", children: onBack ? (jsxs("button", { type: "button", onClick: onBack, "aria-label": backLabel,
|
|
3501
3503
|
// 40px-tall touch target hanging into the row padding: the chevron
|
|
@@ -3506,7 +3508,7 @@ function MobileHeader({ title, subtitle, titleAlign = 'center', onBack, backLabe
|
|
|
3506
3508
|
// a centred title keeps even padding.
|
|
3507
3509
|
titleAlign === 'center' ? 'px-2' : 'pr-2', titleAlign === 'center'
|
|
3508
3510
|
? 'absolute inset-x-12 text-center pointer-events-none flex flex-col items-center justify-center'
|
|
3509
|
-
: 'text-left'), children: [title && (jsx("div", { className: "text-
|
|
3511
|
+
: 'text-left'), children: [title && (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 && (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 }))] }), jsxs("div", { className: "flex items-center gap-1 min-w-[40px] shrink-0 justify-end z-10", children: [searchable && (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: jsx(SearchIcon$1, {}) })), visibleActions.map((action) => {
|
|
3510
3512
|
const badgeColor = {
|
|
3511
3513
|
danger: 'bg-red-500 text-white',
|
|
3512
3514
|
info: 'bg-blue-500 text-white',
|