@uxf/ui 11.21.5 → 11.22.1

package/css/tabs.css

@@ -1,107 +1,154 @@
+:root {
+    --uxf-tabs-spacing: theme("spacing.4");
+
+    /** button list */
+    --uxf-tabs-button-list-border-radius: theme("borderRadius.lg");
+    --uxf-tabs-button-list-border-width: 1px;
+    --uxf-tabs-button-list-background-color: unset;
+    --uxf-tabs-button-list-font-size: theme("fontSize.base");
+    --uxf-tabs-button-list-font-weight: theme("fontWeight.semibold");
+    --uxf-tabs-button-list-padding: theme("spacing.1");
+
+    /** button */
+    --uxf-tabs-button-cursor: pointer;
+    --uxf-tabs-button-padding: theme("spacing.3");
+    --uxf-tabs-button-color: theme("colors.lightHigh");
+    --uxf-tabs-button-border: unset;
+    --uxf-tabs-button-border-radius: theme("borderRadius.md");
+
+    /** button active */
+    --uxf-tabs-button-active-color: theme("colors.lightHigh");
+    --uxf-tabs-button-active-border: unset;
+    --uxf-tabs-button-active-background-color: theme("colors.white");
+    --uxf-tabs-button-underline-color: theme("colors.primary.500");
+    --uxf-tabs-button-underline-width: 2px;
+
+    /** button hover */
+    --uxf-tabs-button-hover-color: theme("colors.lightHigh");
+    --uxf-tabs-button-hover-background-color: theme("colors.neutral.100");
+
+    /** button disabled */
+    --uxf-tabs-button-disabled-cursor: not-allowed;
+    --uxf-tabs-button-disabled-color: theme("colors.lightLow");
+    --uxf-tabs-button-disabled-background-color: none;
+}
+
 .uxf-tabs {
-    @apply w-full;
+    display: flex;
+    gap: var(--uxf-tabs-spacing);
 
-    &--grow {
-        .uxf-tabs__tab {
-            @apply grow;
-        }
+    &--variant-segmented {
+        --uxf-tabs-button-list-background-color: theme("colors.neutral.100");
+        --uxf-tabs-button-active-border: 1px solid theme("colors.neutral.200");
+        --uxf-tabs-button-border: 1px solid theme("colors.neutral.100");
     }
 
-    &__tab-list__wrapper {
-        @apply mb-6 w-full overflow-auto;
+    &--horizontal {
+        flex-direction: column;
+    }
 
-        &--default {
-            @apply relative before:pointer-events-none before:absolute before:bottom-0 before:w-full before:border-b-2
-                before:border-b-gray-100;
+    &__button-list {
+        background-color: var(--uxf-tabs-button-list-background-color);
+        display: flex;
+        font-size: var(--uxf-tabs-button-list-font-size);
+        font-weight: var(--uxf-tabs-button-list-font-weight);
+        padding: var(--uxf-tabs-button-list-padding);
+        scrollbar-width: none;
+        white-space: nowrap;
 
-            :root .dark & {
-                @apply before:border-b-gray-800;
-            }
-        }
+        &--variant-default {
+            border-color: theme("colors.neutral.200");
+            border-style: solid;
 
-        &--segmented {
-            @apply rounded-lg bg-gray-100;
+            &.uxf-tabs__button-list--horizontal {
+                border-bottom-width: var(--uxf-tabs-button-list-border-width);
+                overflow-x: auto;
+            }
 
-            :root .dark & {
-                @apply bg-gray-700;
+            &.uxf-tabs__button-list--vertical {
+                border-left-width: var(--uxf-tabs-button-list-border-width);
+                flex-direction: column;
             }
         }
-    }
 
-    &__tab-list {
-        @apply flex w-full items-center overflow-x-auto whitespace-nowrap text-base font-semibold;
+        &--variant-segmented {
+            border: 1px solid theme("colors.neutral.200");
+            border-radius: var(--uxf-tabs-button-list-border-radius);
 
-        scrollbar-width: none;
-
-        &::-webkit-scrollbar {
-            display: none;
-        }
-
-        &--default {
-            @apply space-x-2 px-1 py-1.5;
-        }
+            &.uxf-tabs__button-list--horizontal {
+                overflow-x: auto;
+            }
 
-        &--segmented {
-            @apply space-x-1 p-1;
+            &.uxf-tabs__button-list--vertical {
+                flex-direction: column;
+            }
         }
     }
 
-    &__tab {
-        @apply is-disabled:pointer-events-none inline-flex cursor-pointer items-center justify-center overflow-visible whitespace-nowrap px-2
-            py-2 text-center outline-none
-            transition-colors focus-visible:ring-2 focus-visible:ring-offset-1;
+    &__button {
+        border: var(--uxf-tabs-button-border);
+        border-radius: var(--uxf-tabs-button-border-radius);
+        color: var(--uxf-tabs-button-color);
+        cursor: var(--uxf-tabs-button-cursor);
+        padding: var(--uxf-tabs-button-padding);
 
-        &--default {
-            @apply text-lightMedium focus-visible:ring-primary relative rounded-lg before:absolute before:bottom-[-6px]
-                before:w-full before:border-b-2
-                before:opacity-0 before:transition hover:bg-gray-100;
+        &--vertical {
+            text-align: left;
+        }
 
-            :root .dark & {
-                @apply text-darkMedium focus-visible:ring-primary hover:bg-gray-800
-                    focus-visible:ring-offset-gray-900;
-            }
+        &--variant-default {
+            position: relative;
 
             &.is-active {
-                @apply text-lightHigh before:border-b-primary before:opacity-100 hover:bg-transparent;
+                &::before {
+                    border-color: var(--uxf-tabs-button-underline-color);
+                    content: "";
+                    position: absolute;
+                }
 
-                :root .dark & {
-                    @apply text-darkHigh before:border-b-primary hover:bg-transparent;
+                &.uxf-tabs__button--horizontal {
+                    &::before {
+                        border-bottom-style: solid;
+                        border-bottom-width: var(--uxf-tabs-button-underline-width);
+                        bottom: calc(-1 * var(--uxf-tabs-button-list-padding));
+                        left: 0;
+                        width: 100%;
+                    }
                 }
-            }
 
-            &.is-disabled {
-                @apply text-lightLow;
+                &.uxf-tabs__button--vertical {
+                    text-align: left;
 
-                :root .dark & {
-                    @apply text-darkLow;
+                    &::before {
+                        border-left-style: solid;
+                        border-left-width: var(--uxf-tabs-button-underline-width);
+                        height: 100%;
+                        left: calc(-1 * var(--uxf-tabs-button-list-padding));
+                        top: 0;
+                    }
                 }
             }
         }
 
-        &--segmented {
-            @apply text-lightMedium hover:bg-primary-100 hover:text-primary-600 focus-visible:ring-primary rounded
-                bg-gray-100 focus-visible:ring-offset-gray-100;
-
-            :root .dark & {
-                @apply text-darkMedium focus-visible:ring-primary bg-gray-700 hover:bg-gray-800
-                    focus-visible:ring-offset-gray-700;
-            }
-
-            &.is-active {
-                @apply bg-primary text-white;
+        &:hover {
+            background-color: var(--uxf-tabs-button-hover-background-color);
+        }
 
-                :root .dark & {
-                    @apply bg-primary text-white;
-                }
-            }
+        &.is-active {
+            background-color: var(--uxf-tabs-button-active-background-color);
+            border: var(--uxf-tabs-button-active-border);
+            color: var(--uxf-tabs-button-active-color);
+        }
 
-            &.is-disabled {
-                @apply text-gray-400;
+        &.is-disabled {
+            color: var(--uxf-tabs-button-disabled-color);
+            cursor: var(--uxf-tabs-button-disabled-cursor);
+        }
+    }
 
-                :root .dark & {
-                    @apply text-gray-500;
-                }
-            }
+    &__panel {
+        &--is-hidden {
+            display: none;
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "11.21.5",
+  "version": "11.22.1",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -17,10 +17,10 @@
   "dependencies": {
     "@floating-ui/react": "0.26.9",
     "@headlessui/react": "1.7.14",
-    "@uxf/core": "11.21.5",
-    "@uxf/core-react": "11.21.5",
+    "@uxf/core": "11.22.0",
+    "@uxf/core-react": "11.22.0",
     "@uxf/datepicker": "11.11.3",
-    "@uxf/styles": "11.21.5",
+    "@uxf/styles": "11.22.0",
     "color2k": "2.0.3",
     "dayjs": "1.11.10",
     "jump.js": "1.0.2",

package/tabs/README.md

@@ -3,5 +3,44 @@
 ## CSS dependencies
 
 ```css
-@import url("@uxf/ui/tabs/tabs.css");
+@import url("@uxf/ui/css/tabs.css");
+```
+
+## Usage
+
+### Basic tabs
+
+```tsx
+import { Tabs } from "@uxf/ui/tabs";
+
+function Example() {
+    const [activeTab, setActiveTab] = useState("tab-1");
+    
+    return (
+        <Tabs value={activeTab} onChange={setActiveTab}>
+            <Tabs.Panel name="tab-1" label="Default panel">...</Tabs.Panel>
+            <Tabs.Panel name="tab-2" label="Disabled panel" isDisabled>...</Tabs.Panel>
+            <Tabs.Panel name="tab-3" label="Hidden panel" isHidden>...</Tabs.Panel>
+            <Tabs.Panel name="tab-4" label="Always mounted panel" isAlwaysMounted>...</Tabs.Panel>
+            <Tabs.Panel name="tab-5" label={({isActive}) => <div>custom button</div>}>...</Tabs.Panel>
+        </Tabs>
+    );
+}
+```
+
+### Only buttons
+
+```tsx
+import { Tabs } from "@uxf/ui/tabs";
+
+function Example() {
+    const [activeTab, setActiveTab] = useState("tab-1");
+    
+    return (
+        <Tabs value={activeTab} onChange={setActiveTab}>
+            <Tabs.Panel name="tab-1" label="Tab 1" />
+            <Tabs.Panel name="tab-2" label="Tab 2" />
+        </Tabs>
+    );
+}
 ```

package/tabs/components/tabs-button-list.d.ts

@@ -0,0 +1,12 @@
+import React, { CSSProperties, ForwardedRef, ReactNode } from "react";
+interface TabsButtonListProps {
+    className?: string;
+    isVertical?: boolean;
+    children: ReactNode;
+    onKeyDown: React.KeyboardEventHandler<HTMLDivElement>;
+    variant?: string;
+    style?: CSSProperties;
+}
+export declare function Component(props: TabsButtonListProps, ref: ForwardedRef<HTMLDivElement>): React.JSX.Element;
+export declare const TabsButtonList: React.ForwardRefExoticComponent<TabsButtonListProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/tabs/components/tabs-button-list.js

@@ -0,0 +1,36 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabsButtonList = exports.Component = void 0;
+const cx_1 = require("@uxf/core/utils/cx");
+const react_1 = __importStar(require("react"));
+function Component(props, ref) {
+    var _a;
+    return (
+    // eslint-disable-next-line jsx-a11y/interactive-supports-focus
+    react_1.default.createElement("div", { ref: ref, className: (0, cx_1.cx)("uxf-tabs__button-list", props.isVertical ? "uxf-tabs__button-list--vertical" : "uxf-tabs__button-list--horizontal", `uxf-tabs__button-list--variant-${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"}`, props.className), role: "tablist", onKeyDown: props.onKeyDown, style: props.style }, props.children));
+}
+exports.Component = Component;
+exports.TabsButtonList = (0, react_1.forwardRef)(Component);

package/tabs/components/tabs-button.d.ts

@@ -0,0 +1,17 @@
+import { Nullish } from "@uxf/core/types";
+import { TabsVariant } from "@uxf/ui/tabs/theme";
+import React, { ForwardedRef, ReactNode } from "react";
+interface TabsButtonProps {
+    className?: string;
+    id: string;
+    isActive: boolean;
+    isDisabled: boolean | Nullish;
+    isHidden: boolean | Nullish;
+    isVertical: boolean | Nullish;
+    onClick: () => void;
+    children: ReactNode;
+    variant?: TabsVariant;
+}
+export declare function Component(props: TabsButtonProps, ref: ForwardedRef<HTMLButtonElement>): React.JSX.Element | null;
+export declare const TabsButton: React.ForwardRefExoticComponent<TabsButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/tabs/components/tabs-button.js

@@ -0,0 +1,39 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabsButton = exports.Component = void 0;
+const classes_1 = require("@uxf/core/constants/classes");
+const cx_1 = require("@uxf/core/utils/cx");
+const react_1 = __importStar(require("react"));
+function Component(props, ref) {
+    var _a;
+    if (props.isHidden) {
+        return null;
+    }
+    const className = (0, cx_1.cx)("uxf-tabs__button", `uxf-tabs__button--variant-${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"}`, props.isVertical ? "uxf-tabs__button--vertical" : "uxf-tabs__button--horizontal", props.isActive && `uxf-tabs__button--${classes_1.CLASSES.IS_ACTIVE} ${classes_1.CLASSES.IS_ACTIVE}`, props.isDisabled && `uxf-tabs__button--${classes_1.CLASSES.IS_DISABLED} ${classes_1.CLASSES.IS_DISABLED}`, props.className);
+    return (react_1.default.createElement("button", { id: props.id, ref: ref, className: className, onClick: props.isDisabled ? undefined : props.onClick, role: "tab", tabIndex: props.isActive ? undefined : -1, "aria-selected": props.isActive }, props.children));
+}
+exports.Component = Component;
+exports.TabsButton = (0, react_1.forwardRef)(Component);

package/tabs/components/tabs-panel.d.ts

@@ -0,0 +1,11 @@
+import { Nullish } from "@uxf/core/types";
+import React, { ReactNode } from "react";
+interface TabsButtonProps {
+    className?: string;
+    isActive: boolean;
+    isHidden: boolean | Nullish;
+    isAlwaysMounted: boolean | Nullish;
+    children?: ReactNode;
+}
+export declare function TabsPanel(props: TabsButtonProps): React.JSX.Element | null;
+export {};

package/tabs/components/tabs-panel.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabsPanel = void 0;
+const classes_1 = require("@uxf/core/constants/classes");
+const cx_1 = require("@uxf/core/utils/cx");
+const react_1 = __importDefault(require("react"));
+function TabsPanel(props) {
+    return props.isAlwaysMounted || props.isActive ? (react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-tabs__panel", !props.isActive && `uxf-tabs__panel--${classes_1.CLASSES.IS_HIDDEN} ${classes_1.CLASSES.IS_HIDDEN}`, props.className) }, props.children)) : null;
+}
+exports.TabsPanel = TabsPanel;

package/tabs/components/tabs-panels.d.ts

@@ -0,0 +1,2 @@
+import React, { PropsWithChildren } from "react";
+export declare function TabsPanels(props: PropsWithChildren): React.JSX.Element;

package/tabs/components/tabs-panels.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabsPanels = void 0;
+const react_1 = __importDefault(require("react"));
+function TabsPanels(props) {
+    return react_1.default.createElement("div", { className: "uxf-tabs__panels" }, props.children);
+}
+exports.TabsPanels = TabsPanels;

package/tabs/components/tabs-root.d.ts

@@ -0,0 +1,10 @@
+import { TabsVariant } from "@uxf/ui/tabs/theme";
+import React, { ReactNode } from "react";
+interface TabsRootProps {
+    className?: string;
+    isVertical?: boolean;
+    children: ReactNode;
+    variant?: TabsVariant;
+}
+export declare function TabsRoot(props: TabsRootProps): React.JSX.Element;
+export {};

package/tabs/components/tabs-root.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabsRoot = void 0;
+const cx_1 = require("@uxf/core/utils/cx");
+const react_1 = __importDefault(require("react"));
+function TabsRoot(props) {
+    var _a;
+    return (react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-tabs", `uxf-tabs--variant-${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"}`, props.isVertical ? "uxf-tabs--vertical" : "uxf-tabs--horizontal", props.className) }, props.children));
+}
+exports.TabsRoot = TabsRoot;

package/tabs/index.d.ts

@@ -1,2 +1 @@
-export { Tabs } from "./tabs";
-export type { TabsPanelProps, TabsProps } from "./tabs";
+export * from "./tabs";

package/tabs/index.js

@@ -1,5 +1,17 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tabs = void 0;
-var tabs_1 = require("./tabs");
-Object.defineProperty(exports, "Tabs", { enumerable: true, get: function () { return tabs_1.Tabs; } });
+__exportStar(require("./tabs"), exports);

package/tabs/panel.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from "react";
+type ButtonRendererProps = {
+    isActive: boolean;
+};
+type ButtonRenderer = (props: ButtonRendererProps) => ReactNode;
+export interface PanelProps {
+    label: ReactNode | ButtonRenderer;
+    classNameButton?: string;
+    classNamePanel?: string;
+    name: string;
+    isDisabled?: boolean;
+    isHidden?: boolean;
+    isAlwaysMounted?: boolean;
+    children?: ReactNode;
+}
+export declare function Panel(props: PanelProps): null;
+export declare namespace Panel {
+    var displayName: string;
+}
+export declare const TABS_PANEL_DISPLAY_NAME = "UxfUiTabPanel";
+export {};

package/tabs/panel.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TABS_PANEL_DISPLAY_NAME = exports.Panel = void 0;
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function Panel(props) {
+    // this is never rendered
+    return null;
+}
+exports.Panel = Panel;
+exports.TABS_PANEL_DISPLAY_NAME = "UxfUiTabPanel";
+Panel.displayName = exports.TABS_PANEL_DISPLAY_NAME;

package/tabs/tabs.d.ts

@@ -1,23 +1,20 @@
-import React, { CSSProperties, ReactNode } from "react";
-export interface TabsPanelProps {
+import { TabsVariant } from "@uxf/ui/tabs/theme";
+import React, { ReactNode } from "react";
+import { Panel } from "./panel";
+export interface TabsProps<TValue> {
     className?: string;
-    disabled?: boolean;
-    style?: CSSProperties;
-    title: ReactNode;
-    unmount?: boolean;
+    classNameButtonList?: string;
+    children: ReactNode;
+    value: TValue;
+    onChange: (value: TValue) => void;
+    isVertical?: boolean;
+    variant?: TabsVariant;
 }
-export interface TabsProps {
-    className?: string;
-    customTabListContent?: ReactNode;
-    defaultIndex?: number;
-    grow?: boolean;
-    onChange?: (index: number) => void;
-    selectedIndex?: number;
-    tabListClassName?: string;
-    variant?: "default" | "segmented";
+declare function Root<TValue>(props: TabsProps<TValue>): React.JSX.Element;
+declare namespace Root {
+    var displayName: string;
 }
-export declare const Tabs: React.ForwardRefExoticComponent<TabsProps & {
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLDivElement>> & {
-    Panel: React.FC<React.PropsWithChildren<TabsPanelProps>>;
+export declare const Tabs: typeof Root & {
+    Panel: typeof Panel;
 };
+export {};

package/tabs/tabs.js

@@ -24,47 +24,50 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tabs = void 0;
-const react_1 = require("@headlessui/react");
 const use_mouse_drag_to_scroll_1 = require("@uxf/core-react/hooks/use-mouse-drag-to-scroll");
-const classes_1 = require("@uxf/core/constants/classes");
-const cx_1 = require("@uxf/core/utils/cx");
-const react_2 = __importStar(require("react"));
-const Panel = (props) => (react_2.default.createElement("div", { className: props.className, style: props.style }, props.children));
-Panel.displayName = "UxfUiTabPanel";
-const TabsRoot = (0, react_2.forwardRef)((props, ref) => {
-    var _a, _b;
-    const tabsClassName = (0, cx_1.cx)("uxf-tabs", props.grow && "uxf-tabs--grow", props.className);
-    const containerRef = (0, react_2.useRef)(null);
-    const dragStyle = (0, use_mouse_drag_to_scroll_1.useMouseDragToScroll)(containerRef);
-    const [hasOverflow, setHasOverflow] = (0, react_2.useState)();
-    (0, react_2.useEffect)(() => {
-        const node = containerRef.current;
-        if (!node) {
-            return;
+const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
+const react_1 = __importStar(require("react"));
+const tabs_button_1 = require("./components/tabs-button");
+const tabs_button_list_1 = require("./components/tabs-button-list");
+const tabs_panel_1 = require("./components/tabs-panel");
+const tabs_panels_1 = require("./components/tabs-panels");
+const tabs_root_1 = require("./components/tabs-root");
+const panel_1 = require("./panel");
+function createId(containerId, tabName) {
+    return `${containerId}-${tabName}`;
+}
+function Root(props) {
+    const id = (0, react_1.useId)();
+    const buttonListRef = (0, react_1.useRef)(null);
+    const buttonListStyle = (0, use_mouse_drag_to_scroll_1.useMouseDragToScroll)(buttonListRef);
+    const tabPanels = react_1.Children.toArray(props.children).filter((child) => (0, react_1.isValidElement)(child) && child.type.displayName === panel_1.TABS_PANEL_DISPLAY_NAME);
+    const allowedTabPanels = tabPanels.filter((panel) => !panel.props.isDisabled && !panel.props.isHidden);
+    const tabRefs = (0, react_1.useRef)([]);
+    const getAllowedTabRefs = () => tabRefs.current.filter((_, index) => { var _a, _b; return !((_a = tabPanels.at(index)) === null || _a === void 0 ? void 0 : _a.props.isDisabled) && !((_b = tabPanels.at(index)) === null || _b === void 0 ? void 0 : _b.props.isHidden); });
+    const selectTab = (newTabIndex) => {
+        var _a, _b;
+        const newTabName = (_a = allowedTabPanels.at(newTabIndex)) === null || _a === void 0 ? void 0 : _a.props.name;
+        if ((0, is_not_nil_1.isNotNil)(newTabName)) {
+            props.onChange(newTabName);
+            (_b = getAllowedTabRefs().at(newTabIndex)) === null || _b === void 0 ? void 0 : _b.focus();
         }
-        const handler = () => setHasOverflow(node.scrollWidth > node.clientWidth);
-        handler();
-        window.addEventListener("resize", handler);
-        return () => {
-            window.removeEventListener("resize", handler);
-        };
-    }, []);
-    if (react_2.Children.count(props.children) === 0) {
-        return react_2.default.createElement("div", { className: tabsClassName, ref: ref });
-    }
-    const tabPanels = react_2.Children.toArray(props.children).filter((child) => (0, react_2.isValidElement)(child) && child.props.title);
-    const tabs = tabPanels.map((c) => ({
-        title: c.props.title,
-        disabled: c.props.disabled,
-    }));
-    return (react_2.default.createElement(react_1.Tab.Group, { as: "div", className: tabsClassName, defaultIndex: props.defaultIndex, onChange: props.onChange, ref: ref, selectedIndex: props.selectedIndex },
-        react_2.default.createElement(react_1.Tab.List, { className: (0, cx_1.cx)("uxf-tabs__tab-list__wrapper", `uxf-tabs__tab-list__wrapper--${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"}`, props.tabListClassName) },
-            react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-tabs__tab-list", `uxf-tabs__tab-list--${(_b = props.variant) !== null && _b !== void 0 ? _b : "default"}`), ref: containerRef, style: { justifyContent: hasOverflow ? "flex-start" : undefined, ...dragStyle } }, tabs.map((tab, index) => (react_2.default.createElement(react_1.Tab, { disabled: tab.disabled, className: ({ selected }) => {
-                    var _a;
-                    return (0, cx_1.cx)("uxf-tabs__tab", selected && classes_1.CLASSES.IS_ACTIVE, tab.disabled && classes_1.CLASSES.IS_DISABLED, `uxf-tabs__tab--${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"}`);
-                }, key: `${tab.title}--${index}` }, tab.title)))),
-            props.customTabListContent),
-        react_2.default.createElement(react_1.Tab.Panels, { className: "uxf-tabs__panels" }, tabPanels.map((tabPanel, index) => (react_2.default.createElement(react_1.Tab.Panel, { className: "outline-none", key: `${tabPanel}--${index}`, unmount: tabPanel.props.unmount }, tabPanel))))));
-});
-TabsRoot.displayName = "UxfUiTabs";
-exports.Tabs = Object.assign(TabsRoot, { Panel });
+    };
+    const onKeyDown = (event) => {
+        const currentTabIndex = allowedTabPanels.findIndex((panel) => panel.props.name === props.value);
+        if ((event.code === "ArrowRight" && !props.isVertical) || (event.code === "ArrowDown" && props.isVertical)) {
+            selectTab((currentTabIndex + 1) % allowedTabPanels.length);
+        }
+        else if ((event.code === "ArrowLeft" && !props.isVertical) ||
+            (event.code === "ArrowUp" && props.isVertical)) {
+            selectTab((currentTabIndex - 1) % allowedTabPanels.length);
+        }
+    };
+    const hasPanelWithChildren = (0, is_not_nil_1.isNotNil)(tabPanels.find((panel) => (0, is_not_nil_1.isNotNil)(panel.props.children)));
+    return (react_1.default.createElement(tabs_root_1.TabsRoot, { className: props.className, isVertical: props.isVertical, variant: props.variant },
+        react_1.default.createElement(tabs_button_list_1.TabsButtonList, { isVertical: props.isVertical, variant: props.variant, onKeyDown: onKeyDown, ref: buttonListRef, style: buttonListStyle, className: props.classNameButtonList }, tabPanels.map((panel, index) => (react_1.default.createElement(tabs_button_1.TabsButton, { key: panel.props.name, ref: (ref) => (tabRefs.current[index] = ref), className: panel.props.classNameButton, id: createId(id, panel.props.name), isActive: panel.props.name === props.value, isDisabled: panel.props.isDisabled, isHidden: panel.props.isHidden, isVertical: props.isVertical, onClick: () => props.onChange(panel.props.name), variant: props.variant }, typeof panel.props.label === "function"
+            ? panel.props.label({ isActive: panel.props.name === props.value })
+            : panel.props.label)))),
+        hasPanelWithChildren && (react_1.default.createElement(tabs_panels_1.TabsPanels, null, tabPanels.map((panel) => (react_1.default.createElement(tabs_panel_1.TabsPanel, { key: panel.props.name, className: panel.props.classNamePanel, isActive: panel.props.name === props.value, isHidden: panel.props.isHidden, isAlwaysMounted: panel.props.isAlwaysMounted }, panel.props.children)))))));
+}
+Root.displayName = "UxfUiTabs";
+exports.Tabs = Object.assign(Root, { Panel: panel_1.Panel });

package/tabs/tabs.spec.js

@@ -6,4 +6,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const snap_test_1 = require("../utils/snap-test");
 const tabs_stories_1 = require("./tabs.stories");
-(0, snap_test_1.snapTest)("render stories", react_1.default.createElement(tabs_stories_1.Default, null));
+(0, snap_test_1.snapTest)("render story Default", react_1.default.createElement(tabs_stories_1.Default, null));
+(0, snap_test_1.snapTest)("render story Segmented", react_1.default.createElement(tabs_stories_1.Segmented, null));

package/tabs/tabs.stories.d.ts

@@ -1,11 +1,3 @@
 import React from "react";
-declare const _default: {
-    title: string;
-    component: React.ForwardRefExoticComponent<import("./tabs").TabsProps & {
-        children?: React.ReactNode;
-    } & React.RefAttributes<HTMLDivElement>> & {
-        Panel: React.FC<React.PropsWithChildren<import("./tabs").TabsPanelProps>>;
-    };
-};
-export default _default;
 export declare function Default(): React.JSX.Element;
+export declare function Segmented(): React.JSX.Element;

package/tabs/tabs.stories.js

@@ -1,47 +1,69 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+"use client";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
-const react_1 = __importDefault(require("react"));
+exports.Segmented = exports.Default = void 0;
+const react_1 = __importStar(require("react"));
+const icon_1 = require("../icon");
+const toggle_1 = require("../toggle");
 const tabs_1 = require("./tabs");
-exports.default = {
-    title: "UI/Tabs",
-    component: tabs_1.Tabs,
-};
+var TabEnum;
+(function (TabEnum) {
+    TabEnum["Basic"] = "tab-basic";
+    TabEnum["Disabled"] = "tab-disabled";
+    TabEnum["Hidden"] = "tab-hidden";
+    TabEnum["AlwaysMounted"] = "tab-always-mounted";
+    TabEnum["Custom"] = "tab-custom";
+})(TabEnum || (TabEnum = {}));
 function Default() {
-    const testTabs = (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: "flex items-center gap-6" },
-            react_1.default.createElement("div", null,
-                react_1.default.createElement("p", { className: "mb-4 text-gray-500" }, "Default"),
-                react_1.default.createElement(tabs_1.Tabs, null,
-                    react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 1 title", className: "grid h-12 w-56 place-items-center bg-red-300" }, "content of the Tab 1"),
-                    react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 2 title", className: "grid h-12 w-56 place-items-center bg-green-300" }, "content of the Tab 2"),
-                    react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 3 title", className: "grid h-12 w-56 place-items-center bg-amber-300" }, "content of the Tab 3"),
-                    react_1.default.createElement(tabs_1.Tabs.Panel, { className: "grid h-12 w-56 place-items-center bg-gray-300", disabled: true, title: "Tab 4 title - disabled" }, "content of the Tab 4 which is disabled"))),
-            react_1.default.createElement("div", null,
-                react_1.default.createElement("p", { className: "mb-4 text-gray-500" }, "Segmented"),
-                react_1.default.createElement(tabs_1.Tabs, { variant: "segmented" },
-                    react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 1 title", className: "grid h-12 w-56 place-items-center bg-red-300" }, "content of the Tab 1"),
-                    react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 2 title", className: "grid h-12 w-56 place-items-center bg-green-300" }, "content of the Tab 2"),
-                    react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 3 title", className: "grid h-12 w-56 place-items-center bg-amber-300" }, "content of the Tab 3"),
-                    react_1.default.createElement(tabs_1.Tabs.Panel, { className: "grid h-12 w-56 place-items-center bg-gray-300", disabled: true, title: "Tab 4 title - disabled" }, "content of the Tab 4 which is disabled")))),
-        react_1.default.createElement("div", { className: "w-[600px]" },
-            react_1.default.createElement("p", { className: "mb-4 text-gray-500" }, "Default grow"),
-            react_1.default.createElement(tabs_1.Tabs, { grow: true },
-                react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 1 title", className: "grid h-12 w-56 place-items-center bg-red-300" }, "content of the Tab 1"),
-                react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 2 title", className: "grid h-12 w-56 place-items-center bg-green-300" }, "content of the Tab 2"),
-                react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 3 title", className: "grid h-12 w-56 place-items-center bg-amber-300" }, "content of the Tab 3"),
-                react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 4 title", className: "grid h-12 w-56 place-items-center bg-gray-300" }, "content of the Tab 4"))),
-        react_1.default.createElement("div", { className: "w-[600px]" },
-            react_1.default.createElement("p", { className: "mb-4 text-gray-500" }, "Segmented grow"),
-            react_1.default.createElement(tabs_1.Tabs, { variant: "segmented", grow: true },
-                react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 1 title", className: "grid h-12 w-56 place-items-center bg-red-300" }, "content of the Tab 1"),
-                react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 2 title", className: "grid h-12 w-56 place-items-center bg-green-300" }, "content of the Tab 2"),
-                react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 3 title", className: "grid h-12 w-56 place-items-center bg-amber-300" }, "content of the Tab 3"),
-                react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 4 title", className: "grid h-12 w-56 place-items-center bg-gray-300" }, "content of the Tab 4")))));
+    const [activeTab, setActiveTab] = (0, react_1.useState)(TabEnum.Basic);
+    const [isVertical, setIsVertical] = (0, react_1.useState)(false);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: "rounded p-8" }, testTabs)));
+        react_1.default.createElement(toggle_1.Toggle, { label: "Vertical", value: isVertical, onChange: setIsVertical, name: "isVertical", className: "mb-5" }),
+        react_1.default.createElement(tabs_1.Tabs, { value: activeTab, onChange: setActiveTab, isVertical: isVertical },
+            react_1.default.createElement(tabs_1.Tabs.Panel, { name: TabEnum.Basic, label: "Basic" }, "Basic tab"),
+            react_1.default.createElement(tabs_1.Tabs.Panel, { name: TabEnum.Disabled, label: "Disabled", isDisabled: true }, "Disabled tab"),
+            react_1.default.createElement(tabs_1.Tabs.Panel, { name: TabEnum.Hidden, label: "Hidden", isHidden: true }, "Hidden"),
+            react_1.default.createElement(tabs_1.Tabs.Panel, { name: TabEnum.AlwaysMounted, label: "Always mounted", isAlwaysMounted: true }, "Always mounted tab"),
+            react_1.default.createElement(tabs_1.Tabs.Panel, { name: TabEnum.Custom, label: () => (react_1.default.createElement("span", { className: "flex items-center gap-2" },
+                    react_1.default.createElement(icon_1.Icon, { name: "camera", className: "size-4" }),
+                    " Custom button")) }, "Custom button tab"))));
 }
 exports.Default = Default;
+function Segmented() {
+    const [activeTab, setActiveTab] = (0, react_1.useState)("tab-basic");
+    const [isVertical, setIsVertical] = (0, react_1.useState)(false);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(toggle_1.Toggle, { label: "Vertical", value: isVertical, onChange: setIsVertical, name: "isVertical", className: "mb-5" }),
+        react_1.default.createElement(tabs_1.Tabs, { value: activeTab, onChange: setActiveTab, variant: "segmented", isVertical: isVertical },
+            react_1.default.createElement(tabs_1.Tabs.Panel, { name: "tab-basic", label: "Basic" }, "Basic tab"),
+            react_1.default.createElement(tabs_1.Tabs.Panel, { name: "tab-disabled", label: "Disabled", isDisabled: true }, "Disabled tab"),
+            react_1.default.createElement(tabs_1.Tabs.Panel, { name: "tab-hidden", label: "Hidden", isHidden: true }, "Hidden"),
+            react_1.default.createElement(tabs_1.Tabs.Panel, { name: "tab-always-mounted", label: "Always mounted", isAlwaysMounted: true }, "Always mounted tab"),
+            react_1.default.createElement(tabs_1.Tabs.Panel, { name: "tab-custom", label: () => (react_1.default.createElement("span", { className: "flex items-center gap-2" },
+                    react_1.default.createElement(icon_1.Icon, { name: "camera", className: "size-4" }),
+                    " Custom button")) }, "Custom button tab"))));
+}
+exports.Segmented = Segmented;

package/tabs/theme.d.ts

@@ -0,0 +1,5 @@
+export interface TabsVariants {
+    default: true;
+    segmented: true;
+}
+export type TabsVariant = keyof TabsVariants;

package/tabs/theme.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });