@pk-design/react-tailwind 1.2.0 → 1.3.0

package/dist/react-tailwind.cjs.js

@@ -1302,35 +1302,48 @@ const SelectBox = React.forwardRef((props, forwardedRef) => {
                                 }, "data-testid": "combobox-input" }), jsxRuntime.jsx(react.ComboboxButton, { className: "group absolute inset-y-0 right-0 px-2.5", "data-testid": "combobox-button", children: jsxRuntime.jsx(SvgChevronDown, { className: chevronIconClass }) })] })) : (jsxRuntime.jsxs("div", { className: "relative", ref: forwardedRef, children: [jsxRuntime.jsx(react.ComboboxInput, { "aria-label": name, displayValue: (option) => (option ? getDisplayValue(option) : null), autoComplete: "off", placeholder: placeholder, onChange: (event) => setQuery(event.target.value), className: inputClass, disabled: disabled, id: id, readOnly: !searchable, ref: inputRef, "data-testid": "combobox-input" }), allowClear && !isEmpty(selected) && (jsxRuntime.jsx(Button, { size: "xs", iconOnly: true, "aria-label": "Clear selection", theme: "secondary", variant: "plain", className: "group absolute inset-y-0 right-8 h-6 top-2", onClick: () => handleOnChangeInternal(multiple ? [] : null), disabled: disabled, "data-testid": "combobox-clear-button", noOutlineOnFocus: true, children: jsxRuntime.jsx(SvgX, { className: "size-4 stroke-gray-500" }) })), jsxRuntime.jsx(react.ComboboxButton, { className: "group absolute inset-y-0 right-0 px-2.5", "data-testid": "combobox-button", children: jsxRuntime.jsx(SvgChevronDown, { className: chevronIconClass }) })] })), jsxRuntime.jsx(react.ComboboxOptions, { anchor: { to: 'bottom', gap: 5 }, as: "div", className: buildClassName('w-[var(--input-width)] rounded-lg border border-gray-200 dark:border-white/5 bg-white dark:bg-gray-800 p-1 [--anchor-gap:var(--spacing-1)]', '[--anchor-max-height:20rem]', 'origin-top border transition duration-200 ease-[cubic-bezier(0.4, 0.0, 0.2, 1)] data-[closed]:translate-y-[-15%] data-[closed]:opacity-0', dropdownContainerClass), transition: true, "data-testid": "combobox-options", children: optionsLoading ? (jsxRuntime.jsx("div", { "data-testid": "options-loading", className: "flex items-center justify-center py-2 px-3 select-none", children: jsxRuntime.jsx(Loader, { size: "sm" }) })) : shouldShowTypeToSearch ? (jsxRuntime.jsx("div", { className: "flex items-center justify-between py-2 px-3 select-none", children: "Type to search..." })) : (jsxRuntime.jsxs("div", { children: [filteredOptions.map((option) => (jsxRuntime.jsx(react.ComboboxOption, { disabled: option.disabled, value: option, className: "group rounded-lg py-1.5 px-3 select-none data-[focus]:bg-black/3 dark:data-[focus]:bg-white/10 data-disabled:opacity-50 cursor-pointer data-disabled:pointer-events-none", children: jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2 dark:text-white group-data-[selected]:text-blue-600", children: [jsxRuntime.jsx("span", { className: "text-sm/6", children: getDisplayValue(option) }), jsxRuntime.jsx(SvgCheck, { className: "invisible size-5 dark:stroke-gray-300 group-data-[selected]:visible" })] }) }, getValue(option)))), filteredOptions.length === 0 && query && !optionsLoading && (jsxRuntime.jsxs("div", { "data-testid": "no-result-found", className: "flex items-center gap-2 py-1.5 px-3 select-none text-gray-500 dark:text-gray-400", children: ["No results found for ", jsxRuntime.jsx("span", { className: "font-semibold", children: query })] })), allowAdd && (jsxRuntime.jsx(react.ComboboxOption, { value: query, className: "group rounded-lg py-1.5 px-3 cursor-pointer text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700", onClick: () => void handleAddAndSelect(query), children: jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx(SvgCirclePlus, { className: "size-4.5" }), jsxRuntime.jsxs(TextContent, { children: [addNewText, " \"", query, "\""] })] }) }))] })) })] }), showErrorMessage && error && (jsxRuntime.jsx("div", { className: "mt-1", children: jsxRuntime.jsx(TextContent, { error: true, small: true, children: error }) }))] }));
 });
 
-const Tabs = ({ tabs, defaultIndex = 0, variant = 'underline', className = '', listClass = '', panelClass = '', }) => {
-    return (jsxRuntime.jsxs(react.TabGroup, { defaultIndex: defaultIndex, className: className, children: [jsxRuntime.jsx(react.TabList, { className: buildClassName('flex gap-2', listClass), children: tabs.map((tab, idx) => (jsxRuntime.jsx(react.Tab, { as: React.Fragment, children: ({ selected }) => (jsxRuntime.jsx("button", { className: buildTabClass({ selected, variant }), children: tab.label })) }, idx))) }), jsxRuntime.jsx(react.TabPanels, { className: buildClassName('mt-3', panelClass), children: tabs.map((tab, idx) => (jsxRuntime.jsx(react.TabPanel, { className: "rounded-lg bg-white dark:bg-gray-800 p-4 shadow-sm", children: tab.content }, idx))) })] }));
+const Tabs = ({ tabs, defaultIndex = 0, selectedIndex, onChange, variant = 'underline', orientation = 'horizontal', stretch = false, className = '', listClass = '', panelsClass = '', }) => {
+    const isVertical = orientation === 'vertical';
+    return (jsxRuntime.jsxs(react.TabGroup, { defaultIndex: defaultIndex, selectedIndex: selectedIndex, onChange: onChange, vertical: isVertical, className: buildClassName(isVertical && 'flex gap-4', stretch && !isVertical && 'w-full', className), children: [jsxRuntime.jsx(react.TabList, { className: buildClassName(isVertical ? 'flex flex-col gap-1' : 'flex gap-2', stretch && !isVertical && 'w-full', listClass), children: tabs.map((tab, idx) => {
+                    var _a;
+                    return (jsxRuntime.jsx(react.Tab, { disabled: tab.disabled, as: React.Fragment, children: ({ selected }) => (jsxRuntime.jsxs("button", { disabled: tab.disabled, className: buildTabClass({
+                                selected,
+                                variant,
+                                stretch,
+                                isVertical,
+                                tabClass: tab.tabClass,
+                            }), children: [tab.icon && jsxRuntime.jsx("span", { className: "inline-flex shrink-0", children: tab.icon }), tab.label] })) }, (_a = tab.id) !== null && _a !== void 0 ? _a : idx));
+                }) }), jsxRuntime.jsx(react.TabPanels, { className: buildClassName(isVertical ? 'flex-1' : 'mt-3', panelsClass), children: tabs.map((tab, idx) => {
+                    var _a;
+                    return (jsxRuntime.jsx(react.TabPanel, { className: tab.panelClass !== undefined
+                            ? tab.panelClass
+                            : 'rounded-lg bg-white dark:bg-gray-800 p-4 shadow-sm', children: tab.content }, (_a = tab.id) !== null && _a !== void 0 ? _a : idx));
+                }) })] }));
 };
-/**
- * Build tab styles based on variant + active state
- */
-function buildTabClass({ selected, variant, }) {
+function buildTabClass({ selected, variant, stretch, isVertical, tabClass, }) {
+    const base = buildClassName('inline-flex items-center gap-1.5 text-sm font-medium transition focus-visible:outline-none', 'disabled:opacity-40 disabled:cursor-not-allowed disabled:pointer-events-none', stretch && !isVertical && 'flex-1 justify-center');
+    let variantClass;
     switch (variant) {
-        /**
-         * UNDERLINE (Default)
-         */
         case 'underline':
-            return buildClassName('px-3 py-1.5 text-sm font-medium transition relative', 'text-gray-600 dark:text-gray-300', 'hover:text-gray-900 dark:hover:text-white', selected &&
-                'text-gray-900 dark:text-white after:absolute after:left-0 after:right-0 after:-bottom-1 after:h-0.5 after:bg-[var(--ui-primary)]');
-        /**
-         * SEGMENTED
-         */
+            variantClass = isVertical
+                ? buildClassName('px-3 py-2 w-full text-left border-l-2', selected
+                    ? 'border-[var(--ui-primary)] text-gray-900 dark:text-white'
+                    : 'border-transparent text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:border-gray-300 dark:hover:border-gray-600')
+                : buildClassName('px-3 py-1.5 relative text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white', selected &&
+                    'text-gray-900 dark:text-white after:absolute after:z-10 after:left-0 after:right-0 after:-bottom-1 after:h-0.5 after:bg-[var(--ui-primary)]');
+            break;
         case 'segmented':
-            return buildClassName('px-3 py-1.5 text-sm font-medium rounded-lg transition', selected
+            variantClass = buildClassName('px-3 py-1.5 rounded-lg', selected
                 ? 'bg-[var(--ui-primary)] text-white'
                 : 'text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700');
-        /**
-         * SOLID
-         */
+            break;
         case 'solid':
-            return buildClassName('px-3 py-1.5 text-sm font-medium rounded-md transition', selected
+            variantClass = buildClassName('px-3 py-1.5 rounded-md', selected
                 ? 'bg-gray-900 dark:bg-gray-700 text-white'
                 : 'bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-700');
+            break;
     }
+    return buildClassName(base, variantClass, tabClass);
 }
 
 const Textarea = React.forwardRef((props, ref) => {