@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
|
@@ -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',
|
|
@@ -4448,9 +4450,13 @@ const SegmentedControl = forwardRef((props, ref) => {
|
|
|
4448
4450
|
if (!isOptionDisabled) {
|
|
4449
4451
|
onChange(option.value);
|
|
4450
4452
|
}
|
|
4451
|
-
}, 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],
|
|
4453
|
+
}, 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],
|
|
4454
|
+
// Full width splits the row equally, so the width comes from the
|
|
4455
|
+
// row, not padding; tight side padding keeps labels on one line
|
|
4456
|
+
// on narrow screens.
|
|
4457
|
+
fullWidth ? 'min-w-0 flex-1 px-1.5' : '', isOptionDisabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer', isSelected
|
|
4452
4458
|
? 'bg-white text-[var(--ui-primary)] dark:bg-gray-700 dark:text-blue-400 shadow-xs font-semibold'
|
|
4453
|
-
: '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 && (jsx("span", { className: buildClassName('shrink-0 inline-flex items-center justify-center', SIZE_ICON_CLASS[size]), children: option.icon })), jsx("span", { children: option.label })] }, option.value));
|
|
4459
|
+
: '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 && (jsx("span", { className: buildClassName('shrink-0 inline-flex items-center justify-center', SIZE_ICON_CLASS[size]), children: option.icon })), jsx("span", { className: "min-w-0 truncate", children: option.label })] }, option.value));
|
|
4454
4460
|
}) }));
|
|
4455
4461
|
});
|
|
4456
4462
|
SegmentedControl.displayName = 'SegmentedControl';
|