@akinon/ui-tabs 1.0.0

package/dist/cjs/index.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { ITabsProps, TabItem } from './types';
+/**
+ * Tabs component for Akinon UI.
+ *
+ * This versatile component provides a tabbed interface for organizing and displaying content in separate panels.
+ * It allows users to navigate between different content sections within the same page, enhancing user experience
+ * and content accessibility. Each tab features an icon and label combination with visual feedback for active states.
+ *
+ * The component accepts default <a href="https://react.dev/reference/react-dom/components/common#common-props" target="_blank" rel="noopener noreferrer">React HTML attributes</a>,
+ * as well as attributes specific to <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes" target="_blank" rel="noopener noreferrer">HTMLDivElement</a>,
+ * providing flexible integration within the Akinon design system with support for icon-based navigation and customizable layouts.
+ */
+export declare const Tabs: ({ items, centered, ...restProps }: ITabsProps) => React.JSX.Element;
+export type { ITabsProps, TabItem };
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAE9C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,IAAI,GAAI,mCAIlB,UAAU,sBAiHZ,CAAC;AAEF,YAAY,EAAE,UAAU,EAAE,OAAO,EAAE,CAAC"}

package/dist/cjs/index.js

@@ -0,0 +1,126 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tabs = void 0;
+const icons_1 = require("@akinon/icons");
+const ui_theme_1 = require("@akinon/ui-theme");
+const cssinjs_1 = require("@ant-design/cssinjs");
+const antd_1 = require("antd");
+const React = require("react");
+/**
+ * Tabs component for Akinon UI.
+ *
+ * This versatile component provides a tabbed interface for organizing and displaying content in separate panels.
+ * It allows users to navigate between different content sections within the same page, enhancing user experience
+ * and content accessibility. Each tab features an icon and label combination with visual feedback for active states.
+ *
+ * The component accepts default <a href="https://react.dev/reference/react-dom/components/common#common-props" target="_blank" rel="noopener noreferrer">React HTML attributes</a>,
+ * as well as attributes specific to <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes" target="_blank" rel="noopener noreferrer">HTMLDivElement</a>,
+ * providing flexible integration within the Akinon design system with support for icon-based navigation and customizable layouts.
+ */
+const Tabs = (_a) => {
+    var { items = [], centered = true } = _a, restProps = __rest(_a, ["items", "centered"]);
+    const tabsItemsWithIcons = items.map(item => (Object.assign(Object.assign({}, item), { icon: item.icon ? React.createElement(icons_1.Icon, { icon: item.icon }) : undefined })));
+    const { getPrefixCls, theme } = React.useContext(antd_1.ConfigProvider.ConfigContext);
+    const { token, hashId } = (0, ui_theme_1.useToken)();
+    const prefixClsWithoutHash = `.${getPrefixCls()}-tabs`;
+    const prefixCls = `:where(.${hashId})${prefixClsWithoutHash}`;
+    const customTokens = (0, ui_theme_1.getSafeCustomTokens)(theme);
+    const tabsTokens = token.Tabs;
+    const menuBarTabGap = tabsTokens.menuGap;
+    const useStyle = (0, cssinjs_1.useStyleRegister)({
+        token: token,
+        path: ['Tabs'],
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        theme: theme
+    }, () => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
+        return {
+            [`${prefixCls}`]: {},
+            [`${prefixCls} ${prefixClsWithoutHash}-ink-bar`]: {
+                display: (_a = customTokens === null || customTokens === void 0 ? void 0 : customTokens.layout) === null || _a === void 0 ? void 0 : _a.displayNone
+            },
+            [`${prefixCls} ${prefixClsWithoutHash}-nav`]: {
+                borderBottom: (_b = customTokens === null || customTokens === void 0 ? void 0 : customTokens.border) === null || _b === void 0 ? void 0 : _b.borderNone,
+                ['::before']: {
+                    borderBottom: (_c = customTokens === null || customTokens === void 0 ? void 0 : customTokens.border) === null || _c === void 0 ? void 0 : _c.borderNone
+                },
+                ['&-wrap']: {
+                    padding: tabsTokens.navWrapperPadding
+                },
+                ['&-list']: {
+                    gap: menuBarTabGap
+                },
+                [`${prefixClsWithoutHash}-tab`]: {
+                    margin: (_d = customTokens === null || customTokens === void 0 ? void 0 : customTokens.sizing) === null || _d === void 0 ? void 0 : _d.valueZero,
+                    position: (_e = customTokens === null || customTokens === void 0 ? void 0 : customTokens.layout) === null || _e === void 0 ? void 0 : _e.positionRelative,
+                    color: tabsTokens.textColor,
+                    fontWeight: (_f = customTokens === null || customTokens === void 0 ? void 0 : customTokens.typography) === null || _f === void 0 ? void 0 : _f.fontWeightBold,
+                    [`&-btn`]: {
+                        display: (_g = customTokens === null || customTokens === void 0 ? void 0 : customTokens.layout) === null || _g === void 0 ? void 0 : _g.displayFlex,
+                        flexDirection: (_h = customTokens === null || customTokens === void 0 ? void 0 : customTokens.layout) === null || _h === void 0 ? void 0 : _h.flexDirectionColumn,
+                        alignItems: (_j = customTokens === null || customTokens === void 0 ? void 0 : customTokens.layout) === null || _j === void 0 ? void 0 : _j.flexCenter,
+                        justifyContent: (_k = customTokens === null || customTokens === void 0 ? void 0 : customTokens.layout) === null || _k === void 0 ? void 0 : _k.flexCenter,
+                        position: (_l = customTokens === null || customTokens === void 0 ? void 0 : customTokens.layout) === null || _l === void 0 ? void 0 : _l.positionRelative,
+                        [`${prefixClsWithoutHash}-tab-icon`]: {
+                            background: tabsTokens.tabIconBg,
+                            borderRadius: (_m = customTokens === null || customTokens === void 0 ? void 0 : customTokens.sizing) === null || _m === void 0 ? void 0 : _m.valueHalf,
+                            width: tabsTokens.tabIconWrapperSize,
+                            height: tabsTokens.tabIconWrapperSize,
+                            marginRight: (_o = customTokens === null || customTokens === void 0 ? void 0 : customTokens.sizing) === null || _o === void 0 ? void 0 : _o.valueZero,
+                            transition: tabsTokens.tabIconBgTransition,
+                            display: (_p = customTokens === null || customTokens === void 0 ? void 0 : customTokens.layout) === null || _p === void 0 ? void 0 : _p.displayFlex,
+                            alignItems: (_q = customTokens === null || customTokens === void 0 ? void 0 : customTokens.layout) === null || _q === void 0 ? void 0 : _q.flexCenter,
+                            justifyContent: (_r = customTokens === null || customTokens === void 0 ? void 0 : customTokens.layout) === null || _r === void 0 ? void 0 : _r.flexCenter,
+                            ['svg']: {
+                                width: tabsTokens.tabIconSize,
+                                height: tabsTokens.tabIconSize,
+                                fill: tabsTokens.tabIconFill,
+                                transition: tabsTokens.tabIconFillTransition
+                            },
+                            ['+ span']: {
+                                position: (_s = customTokens === null || customTokens === void 0 ? void 0 : customTokens.layout) === null || _s === void 0 ? void 0 : _s.positionAbsolute,
+                                bottom: (_t = customTokens === null || customTokens === void 0 ? void 0 : customTokens.sizing) === null || _t === void 0 ? void 0 : _t.valueZero,
+                                transform: tabsTokens.tabLabelTransform
+                            }
+                        }
+                    },
+                    [`+ ${prefixClsWithoutHash}-tab::before`]: {
+                        content: (_u = customTokens === null || customTokens === void 0 ? void 0 : customTokens.others) === null || _u === void 0 ? void 0 : _u.emptyContent,
+                        position: (_v = customTokens === null || customTokens === void 0 ? void 0 : customTokens.layout) === null || _v === void 0 ? void 0 : _v.positionAbsolute,
+                        top: (_w = customTokens === null || customTokens === void 0 ? void 0 : customTokens.sizing) === null || _w === void 0 ? void 0 : _w.valueHalf,
+                        left: (_x = customTokens === null || customTokens === void 0 ? void 0 : customTokens.sizing) === null || _x === void 0 ? void 0 : _x.valueZero,
+                        transform: `translate(-${(_y = customTokens === null || customTokens === void 0 ? void 0 : customTokens.sizing) === null || _y === void 0 ? void 0 : _y.valueFull}, -${(_z = customTokens === null || customTokens === void 0 ? void 0 : customTokens.sizing) === null || _z === void 0 ? void 0 : _z.valueHalf})`,
+                        height: tabsTokens.separatorHeight,
+                        width: menuBarTabGap,
+                        backgroundColor: tabsTokens.separatorColor
+                    }
+                }
+            },
+            [`${prefixCls} ${prefixClsWithoutHash}-tab${prefixClsWithoutHash}-tab-active ${prefixClsWithoutHash}-tab-btn`]: {
+                color: tabsTokens.textColor,
+                [`${prefixClsWithoutHash}-tab-icon`]: {
+                    backgroundColor: tabsTokens.tabIconActiveBg,
+                    ['svg']: {
+                        fill: tabsTokens.tabIconActiveFill
+                    }
+                }
+            },
+            [`${prefixCls}${prefixClsWithoutHash}-centered ${prefixClsWithoutHash}-nav-wrap`]: {
+                paddingLeft: (_0 = customTokens === null || customTokens === void 0 ? void 0 : customTokens.sizing) === null || _0 === void 0 ? void 0 : _0.valueZero
+            }
+        };
+    });
+    return useStyle(React.createElement(antd_1.Tabs, Object.assign({}, restProps, { items: tabsItemsWithIcons, centered: centered })));
+};
+exports.Tabs = Tabs;

package/dist/cjs/types.d.ts

@@ -0,0 +1,124 @@
+import type { IconName } from '@akinon/icons';
+import { type DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE } from '@akinon/ui-theme';
+import { type TabsProps as AntTabsProps } from 'antd';
+import { ReactNode } from 'react';
+
+type SMergedHTMLAttributes = React.HTMLAttributes<HTMLElement> &
+  React.ButtonHTMLAttributes<HTMLButtonElement> &
+  React.AnchorHTMLAttributes<HTMLAnchorElement>;
+
+export type TabBarSize = 'small' | 'middle' | 'large';
+export type Direction = 'left' | 'right' | 'top' | 'bottom';
+
+export type TabItem = {
+  /**
+   * Whether destroy inactive TabPane when change tab.
+   * @default false
+   */
+  destroyOnHidden?: boolean;
+
+  /**
+   * Set TabPane disabled.
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Forced render of content in tabs, not lazy render after clicking on tabs.
+   * @default false
+   */
+  forceRender?: boolean;
+
+  /**
+   * TabPane's key.
+   * @required
+   */
+  key: string;
+
+  /**
+   * Tab header text element.
+   * @required
+   */
+  label: ReactNode;
+
+  /**
+   * Tab content element.
+   */
+  children?: ReactNode;
+
+  /**
+   * Tab header icon element.
+   * @required
+   */
+  icon: IconName;
+};
+
+export interface ITabsProps extends SMergedHTMLAttributes {
+  /**
+   * Current TabPane's key.
+   **/
+  activeKey?: string;
+
+  /**
+   * Initial active TabPane's key, if activeKey is not set.
+   * @default key of tabpane at index 0
+   **/
+  defaultActiveKey?: string;
+
+  /**
+   * Configure tab content.
+   * @default []
+   **/
+  items?: TabItem[];
+
+  /**
+   * Replace the TabBar with a custom one.
+   */
+  renderTabBar?: AntTabsProps['renderTabBar'];
+
+  /**
+   * Preset tab bar size.
+   * @default 'middle'
+   */
+  size?: TabBarSize;
+
+  /**
+   * Whether the tabs should be centered.
+   * @default true
+   */
+
+  centered?: boolean;
+
+  /**
+   * 	Whether destroy inactive TabPane when change tabs.
+   * @default false
+   */
+  destroyOnHidden?: boolean;
+
+  /**
+   * Trigger when Tab is changed.
+   */
+  onChange?: (activeKey: string) => void;
+
+  /**
+   * Callback executed when tab is clicked.
+   */
+  onTabClick?: (key: string, event: MouseEvent) => void;
+
+  /**
+   * Trigger when tab scroll.
+   */
+  onTabScroll?: ({ direction }: { direction: Direction }) => void;
+
+  /**
+   * Never use this prop. Akinon design system does not allow custom styles.
+   * @ignore
+   */
+  tabBarStyle: DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE;
+
+  /**
+   * Never use this prop. Akinon design system does not allow custom styles.
+   * @ignore
+   */
+  style?: DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE;
+}

package/dist/esm/index.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { ITabsProps, TabItem } from './types';
+/**
+ * Tabs component for Akinon UI.
+ *
+ * This versatile component provides a tabbed interface for organizing and displaying content in separate panels.
+ * It allows users to navigate between different content sections within the same page, enhancing user experience
+ * and content accessibility. Each tab features an icon and label combination with visual feedback for active states.
+ *
+ * The component accepts default <a href="https://react.dev/reference/react-dom/components/common#common-props" target="_blank" rel="noopener noreferrer">React HTML attributes</a>,
+ * as well as attributes specific to <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes" target="_blank" rel="noopener noreferrer">HTMLDivElement</a>,
+ * providing flexible integration within the Akinon design system with support for icon-based navigation and customizable layouts.
+ */
+export declare const Tabs: ({ items, centered, ...restProps }: ITabsProps) => React.JSX.Element;
+export type { ITabsProps, TabItem };
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAE9C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,IAAI,GAAI,mCAIlB,UAAU,sBAiHZ,CAAC;AAEF,YAAY,EAAE,UAAU,EAAE,OAAO,EAAE,CAAC"}

package/dist/esm/index.js

@@ -0,0 +1,122 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { Icon } from '@akinon/icons';
+import { getSafeCustomTokens, useToken } from '@akinon/ui-theme';
+import { useStyleRegister } from '@ant-design/cssinjs';
+import { ConfigProvider, Tabs as AntTabs } from 'antd';
+import * as React from 'react';
+/**
+ * Tabs component for Akinon UI.
+ *
+ * This versatile component provides a tabbed interface for organizing and displaying content in separate panels.
+ * It allows users to navigate between different content sections within the same page, enhancing user experience
+ * and content accessibility. Each tab features an icon and label combination with visual feedback for active states.
+ *
+ * The component accepts default <a href="https://react.dev/reference/react-dom/components/common#common-props" target="_blank" rel="noopener noreferrer">React HTML attributes</a>,
+ * as well as attributes specific to <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes" target="_blank" rel="noopener noreferrer">HTMLDivElement</a>,
+ * providing flexible integration within the Akinon design system with support for icon-based navigation and customizable layouts.
+ */
+export const Tabs = (_a) => {
+    var { items = [], centered = true } = _a, restProps = __rest(_a, ["items", "centered"]);
+    const tabsItemsWithIcons = items.map(item => (Object.assign(Object.assign({}, item), { icon: item.icon ? React.createElement(Icon, { icon: item.icon }) : undefined })));
+    const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
+    const { token, hashId } = useToken();
+    const prefixClsWithoutHash = `.${getPrefixCls()}-tabs`;
+    const prefixCls = `:where(.${hashId})${prefixClsWithoutHash}`;
+    const customTokens = getSafeCustomTokens(theme);
+    const tabsTokens = token.Tabs;
+    const menuBarTabGap = tabsTokens.menuGap;
+    const useStyle = useStyleRegister({
+        token: token,
+        path: ['Tabs'],
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        theme: theme
+    }, () => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
+        return {
+            [`${prefixCls}`]: {},
+            [`${prefixCls} ${prefixClsWithoutHash}-ink-bar`]: {
+                display: (_a = customTokens === null || customTokens === void 0 ? void 0 : customTokens.layout) === null || _a === void 0 ? void 0 : _a.displayNone
+            },
+            [`${prefixCls} ${prefixClsWithoutHash}-nav`]: {
+                borderBottom: (_b = customTokens === null || customTokens === void 0 ? void 0 : customTokens.border) === null || _b === void 0 ? void 0 : _b.borderNone,
+                ['::before']: {
+                    borderBottom: (_c = customTokens === null || customTokens === void 0 ? void 0 : customTokens.border) === null || _c === void 0 ? void 0 : _c.borderNone
+                },
+                ['&-wrap']: {
+                    padding: tabsTokens.navWrapperPadding
+                },
+                ['&-list']: {
+                    gap: menuBarTabGap
+                },
+                [`${prefixClsWithoutHash}-tab`]: {
+                    margin: (_d = customTokens === null || customTokens === void 0 ? void 0 : customTokens.sizing) === null || _d === void 0 ? void 0 : _d.valueZero,
+                    position: (_e = customTokens === null || customTokens === void 0 ? void 0 : customTokens.layout) === null || _e === void 0 ? void 0 : _e.positionRelative,
+                    color: tabsTokens.textColor,
+                    fontWeight: (_f = customTokens === null || customTokens === void 0 ? void 0 : customTokens.typography) === null || _f === void 0 ? void 0 : _f.fontWeightBold,
+                    [`&-btn`]: {
+                        display: (_g = customTokens === null || customTokens === void 0 ? void 0 : customTokens.layout) === null || _g === void 0 ? void 0 : _g.displayFlex,
+                        flexDirection: (_h = customTokens === null || customTokens === void 0 ? void 0 : customTokens.layout) === null || _h === void 0 ? void 0 : _h.flexDirectionColumn,
+                        alignItems: (_j = customTokens === null || customTokens === void 0 ? void 0 : customTokens.layout) === null || _j === void 0 ? void 0 : _j.flexCenter,
+                        justifyContent: (_k = customTokens === null || customTokens === void 0 ? void 0 : customTokens.layout) === null || _k === void 0 ? void 0 : _k.flexCenter,
+                        position: (_l = customTokens === null || customTokens === void 0 ? void 0 : customTokens.layout) === null || _l === void 0 ? void 0 : _l.positionRelative,
+                        [`${prefixClsWithoutHash}-tab-icon`]: {
+                            background: tabsTokens.tabIconBg,
+                            borderRadius: (_m = customTokens === null || customTokens === void 0 ? void 0 : customTokens.sizing) === null || _m === void 0 ? void 0 : _m.valueHalf,
+                            width: tabsTokens.tabIconWrapperSize,
+                            height: tabsTokens.tabIconWrapperSize,
+                            marginRight: (_o = customTokens === null || customTokens === void 0 ? void 0 : customTokens.sizing) === null || _o === void 0 ? void 0 : _o.valueZero,
+                            transition: tabsTokens.tabIconBgTransition,
+                            display: (_p = customTokens === null || customTokens === void 0 ? void 0 : customTokens.layout) === null || _p === void 0 ? void 0 : _p.displayFlex,
+                            alignItems: (_q = customTokens === null || customTokens === void 0 ? void 0 : customTokens.layout) === null || _q === void 0 ? void 0 : _q.flexCenter,
+                            justifyContent: (_r = customTokens === null || customTokens === void 0 ? void 0 : customTokens.layout) === null || _r === void 0 ? void 0 : _r.flexCenter,
+                            ['svg']: {
+                                width: tabsTokens.tabIconSize,
+                                height: tabsTokens.tabIconSize,
+                                fill: tabsTokens.tabIconFill,
+                                transition: tabsTokens.tabIconFillTransition
+                            },
+                            ['+ span']: {
+                                position: (_s = customTokens === null || customTokens === void 0 ? void 0 : customTokens.layout) === null || _s === void 0 ? void 0 : _s.positionAbsolute,
+                                bottom: (_t = customTokens === null || customTokens === void 0 ? void 0 : customTokens.sizing) === null || _t === void 0 ? void 0 : _t.valueZero,
+                                transform: tabsTokens.tabLabelTransform
+                            }
+                        }
+                    },
+                    [`+ ${prefixClsWithoutHash}-tab::before`]: {
+                        content: (_u = customTokens === null || customTokens === void 0 ? void 0 : customTokens.others) === null || _u === void 0 ? void 0 : _u.emptyContent,
+                        position: (_v = customTokens === null || customTokens === void 0 ? void 0 : customTokens.layout) === null || _v === void 0 ? void 0 : _v.positionAbsolute,
+                        top: (_w = customTokens === null || customTokens === void 0 ? void 0 : customTokens.sizing) === null || _w === void 0 ? void 0 : _w.valueHalf,
+                        left: (_x = customTokens === null || customTokens === void 0 ? void 0 : customTokens.sizing) === null || _x === void 0 ? void 0 : _x.valueZero,
+                        transform: `translate(-${(_y = customTokens === null || customTokens === void 0 ? void 0 : customTokens.sizing) === null || _y === void 0 ? void 0 : _y.valueFull}, -${(_z = customTokens === null || customTokens === void 0 ? void 0 : customTokens.sizing) === null || _z === void 0 ? void 0 : _z.valueHalf})`,
+                        height: tabsTokens.separatorHeight,
+                        width: menuBarTabGap,
+                        backgroundColor: tabsTokens.separatorColor
+                    }
+                }
+            },
+            [`${prefixCls} ${prefixClsWithoutHash}-tab${prefixClsWithoutHash}-tab-active ${prefixClsWithoutHash}-tab-btn`]: {
+                color: tabsTokens.textColor,
+                [`${prefixClsWithoutHash}-tab-icon`]: {
+                    backgroundColor: tabsTokens.tabIconActiveBg,
+                    ['svg']: {
+                        fill: tabsTokens.tabIconActiveFill
+                    }
+                }
+            },
+            [`${prefixCls}${prefixClsWithoutHash}-centered ${prefixClsWithoutHash}-nav-wrap`]: {
+                paddingLeft: (_0 = customTokens === null || customTokens === void 0 ? void 0 : customTokens.sizing) === null || _0 === void 0 ? void 0 : _0.valueZero
+            }
+        };
+    });
+    return useStyle(React.createElement(AntTabs, Object.assign({}, restProps, { items: tabsItemsWithIcons, centered: centered })));
+};

package/dist/esm/types.d.ts

@@ -0,0 +1,124 @@
+import type { IconName } from '@akinon/icons';
+import { type DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE } from '@akinon/ui-theme';
+import { type TabsProps as AntTabsProps } from 'antd';
+import { ReactNode } from 'react';
+
+type SMergedHTMLAttributes = React.HTMLAttributes<HTMLElement> &
+  React.ButtonHTMLAttributes<HTMLButtonElement> &
+  React.AnchorHTMLAttributes<HTMLAnchorElement>;
+
+export type TabBarSize = 'small' | 'middle' | 'large';
+export type Direction = 'left' | 'right' | 'top' | 'bottom';
+
+export type TabItem = {
+  /**
+   * Whether destroy inactive TabPane when change tab.
+   * @default false
+   */
+  destroyOnHidden?: boolean;
+
+  /**
+   * Set TabPane disabled.
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Forced render of content in tabs, not lazy render after clicking on tabs.
+   * @default false
+   */
+  forceRender?: boolean;
+
+  /**
+   * TabPane's key.
+   * @required
+   */
+  key: string;
+
+  /**
+   * Tab header text element.
+   * @required
+   */
+  label: ReactNode;
+
+  /**
+   * Tab content element.
+   */
+  children?: ReactNode;
+
+  /**
+   * Tab header icon element.
+   * @required
+   */
+  icon: IconName;
+};
+
+export interface ITabsProps extends SMergedHTMLAttributes {
+  /**
+   * Current TabPane's key.
+   **/
+  activeKey?: string;
+
+  /**
+   * Initial active TabPane's key, if activeKey is not set.
+   * @default key of tabpane at index 0
+   **/
+  defaultActiveKey?: string;
+
+  /**
+   * Configure tab content.
+   * @default []
+   **/
+  items?: TabItem[];
+
+  /**
+   * Replace the TabBar with a custom one.
+   */
+  renderTabBar?: AntTabsProps['renderTabBar'];
+
+  /**
+   * Preset tab bar size.
+   * @default 'middle'
+   */
+  size?: TabBarSize;
+
+  /**
+   * Whether the tabs should be centered.
+   * @default true
+   */
+
+  centered?: boolean;
+
+  /**
+   * 	Whether destroy inactive TabPane when change tabs.
+   * @default false
+   */
+  destroyOnHidden?: boolean;
+
+  /**
+   * Trigger when Tab is changed.
+   */
+  onChange?: (activeKey: string) => void;
+
+  /**
+   * Callback executed when tab is clicked.
+   */
+  onTabClick?: (key: string, event: MouseEvent) => void;
+
+  /**
+   * Trigger when tab scroll.
+   */
+  onTabScroll?: ({ direction }: { direction: Direction }) => void;
+
+  /**
+   * Never use this prop. Akinon design system does not allow custom styles.
+   * @ignore
+   */
+  tabBarStyle: DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE;
+
+  /**
+   * Never use this prop. Akinon design system does not allow custom styles.
+   * @ignore
+   */
+  style?: DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE;
+}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@akinon/ui-tabs",
+  "version": "1.0.0",
+  "private": false,
+  "type": "module",
+  "main": "dist/esm/index.js",
+  "module": "dist/esm/index.js",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@ant-design/cssinjs": "^1.24.0",
+    "antd": "^5.27.0",
+    "@akinon/icons": "1.2.1",
+    "@akinon/ui-theme": "1.2.0"
+  },
+  "devDependencies": {
+    "clean-package": "2.2.0",
+    "copyfiles": "^2.4.1",
+    "rimraf": "^5.0.5",
+    "typescript": "*",
+    "@akinon/typescript-config": "1.1.1"
+  },
+  "peerDependencies": {
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
+  },
+  "clean-package": "../../../clean-package.config.json",
+  "types": "dist/esm/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/esm/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "pnpm run build:esm && pnpm run build:commonjs && pnpm run copy:files",
+    "build:commonjs": "tsc --module commonjs --outDir dist/cjs",
+    "build:esm": "tsc --outDir dist/esm",
+    "clean": "rimraf dist/",
+    "copy:files": "copyfiles -u 1 \"src/**/*.!(ts|tsx)\" dist/esm && copyfiles -u 1 \"src/**/*.!(ts|tsx)\" dist/cjs",
+    "typecheck": "tsc --noEmit"
+  }
+}