@janbox/storefront-ui 4.0.16 → 5.0.0

package/dist/lib/tabs/tab/tab.js

@@ -1,25 +1,62 @@
-import { jsx } from "react/jsx-runtime";
-import { useTabIndexContext } from "./helpers.js";
-import { mergeComponentProps } from "../../../utils/index.js";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useTabIndexContext, useGetTabProps } from "./helpers.js";
+import { createSxStyle } from "../../../utils/stylesheet.js";
 import { useTabsContext } from "../tabs/helpers.js";
-import { Button } from "../../button/button.js";
+import { Primitive } from "../../primitive/primitive.js";
+import { Icon } from "../../icon/icon.js";
 const Tab = ({ children, ref, ..._props }) => {
   var _a;
-  const { focusTab, activeIndex, tabProps: defaultTabProps = {}, preventActiveTabChange } = useTabsContext();
-  const { color, states, ...rest } = mergeComponentProps(defaultTabProps, _props);
+  const { activeIndex, focusTab } = useTabsContext();
   const tabIndex = useTabIndexContext();
+  const getTabProps = useGetTabProps();
+  const { startIcon, endIcon, prefix, suffix, states, ...props } = getTabProps(_props);
   const isTabActive = tabIndex === activeIndex;
   const onClick = (e) => {
     var _a2;
-    e.preventDefault();
-    if (preventActiveTabChange) {
-      !isTabActive && focusTab(tabIndex);
-    } else {
-      focusTab(tabIndex);
-    }
-    (_a2 = rest.onClick) == null ? void 0 : _a2.call(rest, e);
+    focusTab(tabIndex);
+    (_a2 = props.onClick) == null ? void 0 : _a2.call(props, e);
   };
-  return /* @__PURE__ */ jsx(Button, { ...rest, onClick, color: isTabActive ? (_a = states == null ? void 0 : states.active) == null ? void 0 : _a.color : color, ref, children });
+  return /* @__PURE__ */ jsxs(
+    Primitive,
+    {
+      ...props,
+      type: "button",
+      "aria-selected": isTabActive,
+      as: "button",
+      role: "tab",
+      ref,
+      sx: {
+        ...props.sx,
+        "&[aria-selected=true]": createSxStyle((_a = states == null ? void 0 : states.active) == null ? void 0 : _a.sx)
+      },
+      onClick,
+      children: [
+        prefix,
+        !!startIcon && /* @__PURE__ */ jsx(
+          Icon,
+          {
+            ...startIcon,
+            sx: {
+              flexShrink: 0,
+              ...startIcon.sx
+            }
+          }
+        ),
+        children,
+        !!endIcon && /* @__PURE__ */ jsx(
+          Icon,
+          {
+            ...endIcon,
+            sx: {
+              flexShrink: 0,
+              ...endIcon.sx
+            }
+          }
+        ),
+        suffix
+      ]
+    }
+  );
 };
 export {
   Tab

package/dist/lib/tabs/tab/types.d.ts

@@ -1,13 +1,12 @@
-import { ButtonSizeVariant, ButtonProps } from '../../button';
-import { ShallowMerge, ToResponsiveProps } from '../../../types';
-export type TabState = 'active';
-export interface TabResponsiveProps {
-    size?: ButtonSizeVariant;
-}
-export interface TabExtendedProps extends ToResponsiveProps<TabResponsiveProps> {
-    states?: Partial<Record<TabState, {
-        color?: ButtonProps['color'];
-        variant?: ButtonProps['variant'];
-    }>>;
-}
-export type TabProps = ShallowMerge<ButtonProps, TabExtendedProps>;
+import { IconProps } from '../../icon';
+import { PropsWithSx, ShallowMerge } from '../../../types';
+import { JSX } from 'react';
+export type TabProps = PropsWithSx<ShallowMerge<JSX.IntrinsicElements['button'], {
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    startIcon?: IconProps;
+    endIcon?: IconProps;
+    states?: {
+        active?: PropsWithSx;
+    };
+}>>;

package/dist/lib/tabs/tab-content/README.md

@@ -0,0 +1,87 @@
+# TabContent
+
+Container cho các [TabPanel](../tab-panel/README.md). Đọc `activeIndex` từ context của [Tabs](../README.md) và chỉ render đúng một child tại index đó.
+
+## Import
+
+```tsx
+import { TabContent } from '@janbox/storefront-ui';
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+| ------ | ------ | ------- | ----------- |
+| `children` * | `React.ReactNode` | - | Danh sách `TabPanel`, thứ tự phải khớp với thứ tự các `Tab` trong `TabList`. |
+| `className` | `string` | - | Class cho container `div`. |
+
+Kiểu prop là `JSX.IntrinsicElements['div']` — kế thừa toàn bộ div attributes. Component **không** nhận `sx`; dùng `className` hoặc `style` nếu cần style container.
+
+> ⚠️ `TabContent` **không** forward `ref`. `ref` trong props sẽ bị truyền vào `Primitive` như prop thường và không trỏ tới DOM node.
+
+*Required props
+
+## Cách hoạt động
+
+- Children được `flattenChildren` trước khi chọn, nên bọc panel trong Fragment vẫn giữ index đúng.
+- Chỉ child tại `activeIndex` được render — các panel khác **bị unmount**, state nội bộ và scroll position của chúng không được giữ lại. Nếu cần giữ state, lift state lên trên `Tabs` hoặc tự render tất cả panel và điều khiển `display` bằng CSS.
+- Nếu `activeIndex` không khớp child nào (vd: `defaultActiveIndex` vượt số panel), `TabContent` render rỗng.
+
+## Examples
+
+### Cơ bản
+
+```tsx
+<Tabs defaultActiveIndex={0}>
+  <TabList>
+    <Tab>Tab 1</Tab>
+    <Tab>Tab 2</Tab>
+  </TabList>
+  <TabContent>
+    <TabPanel>Content for Tab 1</TabPanel>
+    <TabPanel>Content for Tab 2</TabPanel>
+  </TabContent>
+</Tabs>
+```
+
+### Style container
+
+```tsx
+<TabContent style={{ paddingTop: 16, minHeight: 200 }}>
+  <TabPanel>Panel 1</TabPanel>
+  <TabPanel>Panel 2</TabPanel>
+</TabContent>
+```
+
+### Số panel ít hơn số tab
+
+```tsx
+{/* Tab 3 sẽ hiển thị content rỗng */}
+<Tabs>
+  <TabList>
+    <Tab>Tab 1</Tab>
+    <Tab>Tab 2</Tab>
+    <Tab>Tab 3</Tab>
+  </TabList>
+  <TabContent>
+    <TabPanel>Panel 1</TabPanel>
+    <TabPanel>Panel 2</TabPanel>
+  </TabContent>
+</Tabs>
+```
+
+## Related Components
+
+- [Tabs](../README.md)
+- [TabPanel](../tab-panel/README.md)
+- [Primitive](../../primitive/README.md)
+
+## Dependencies
+
+- @emotion/react
+
+## See Also
+
+- [Component Source](./tab-content.tsx)
+- [Storybook Stories](../tabs.stories.tsx)
+- [Main README](../../../README.md)

package/dist/lib/tabs/tab-content/tab-content.d.ts

@@ -1,2 +1,2 @@
 import { TabContentProps } from './types';
-export declare const TabContent: ({ children, ...rest }: TabContentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TabContent: ({ children, ...props }: TabContentProps) => import("react/jsx-runtime").JSX.Element;

package/dist/lib/tabs/tab-content/tab-content.js

@@ -2,19 +2,10 @@ import { jsx } from "react/jsx-runtime";
 import { flattenChildren } from "../../../utils/index.js";
 import { useTabsContext } from "../tabs/helpers.js";
 import { Primitive } from "../../primitive/primitive.js";
-const TabContent = ({ children, ...rest }) => {
+const TabContent = ({ children, ...props }) => {
   const { activeIndex } = useTabsContext();
   const flattenedChildren = flattenChildren(children);
-  return /* @__PURE__ */ jsx(
-    Primitive,
-    {
-      sx: {
-        display: "contents"
-      },
-      ...rest,
-      children: flattenedChildren.find((_, index) => index === activeIndex)
-    }
-  );
+  return /* @__PURE__ */ jsx(Primitive, { ...props, children: flattenedChildren.find((_, index) => index === activeIndex) });
 };
 export {
   TabContent

package/dist/lib/tabs/tab-content/types.d.ts

@@ -1,4 +1,2 @@
-import { PropsWithChildren } from 'react';
-export type TabContentProps = PropsWithChildren<{
-    ref?: React.Ref<HTMLDivElement>;
-}>;
+import { JSX } from 'react';
+export type TabContentProps = JSX.IntrinsicElements['div'];

package/dist/lib/tabs/tab-indicator/README.md

@@ -0,0 +1,94 @@
+# TabIndicator
+
+Thanh gạch chân chạy theo tab đang active. Được [TabList](../tab-list/README.md) render tự động và animate bằng `motion/react` khi `activeIndex` đổi.
+
+> ℹ️ Đây là component nội bộ — **không** được export từ `@janbox/storefront-ui`. Cấu hình nó qua prop `indicator` của `TabList`.
+
+## Usage
+
+```tsx
+<TabList indicator={{ size: 3, sx: { backgroundColor: getColorVar('green.600') } }}>
+  <Tab>Tab 1</Tab>
+  <Tab>Tab 2</Tab>
+</TabList>
+```
+
+Truyền `indicator={false}` để không render indicator.
+
+## Props
+
+| Prop | Type | Default | Description |
+| ------ | ------ | ------- | ----------- |
+| `size` | `number` | `2` | Độ dày (px) của indicator. Được set qua CSS variable `--indicator-size` nên responsive theo breakpoint hoạt động đúng. |
+| `sm` | `{ size?: number }` | - | Override `size` từ breakpoint sm (≥768px). |
+| `md` | `{ size?: number }` | - | Override `size` từ breakpoint md (≥1280px). |
+| `lg` | `{ size?: number }` | - | Override `size` từ breakpoint lg (≥1680px). |
+| `sx` | `ToResponsiveProps<StyledCSS>` | `{ backgroundColor: getColorVar('primary.600') }` | Emotion CSS overrides. Apply sau `size` nên `height` trong `sx` sẽ thắng `size`. |
+
+## Cách hoạt động
+
+- Indicator định vị `position: absolute` bên trong element chứa các `Tab` của `TabList` (element đó luôn có `position: relative`).
+- Tab đang active được tìm bằng `parentElement.children.item(activeIndex)` — tức là **theo thứ tự DOM**, không qua index từ context. Vì vậy đừng chèn element không phải `Tab` vào giữa các `Tab`, nếu không indicator sẽ trỏ sai.
+- Vị trí (`left`, `top`, `width`) được tính từ `getBoundingClientRect()` của tab active so với container, có bù `scrollLeft`/`scrollTop` để đúng khi tab bar scroll ngang.
+- Một `MutationObserver` theo dõi `childList` của `TabList` để cập nhật khi số lượng `Tab` thay đổi (thêm/bớt tab động).
+- Một `ResizeObserver` observe cả tab active **và** container: resize container không đổi kích thước từng tab nhưng có thể làm tab xuống dòng khác khi `overflowBehavior="wrap"`, nên phải theo dõi cả hai để cập nhật vị trí dòng.
+- `top` được tính là mép dưới của tab trừ đi chiều cao indicator, nên indicator luôn nằm sát đáy tab active — kể cả khi tab wrap sang dòng thứ hai.
+
+## Examples
+
+### Indicator dày hơn, bo góc
+
+```tsx
+<TabList indicator={{ size: 4, sx: { backgroundColor: getColorVar('primary.600'), borderRadius: 2 } }}>
+  <Tab>Tab 1</Tab>
+  <Tab>Tab 2</Tab>
+</TabList>
+```
+
+### Responsive size
+
+```tsx
+<TabList indicator={{ size: 2, md: { size: 3 } }}>
+  <Tab>Tab 1</Tab>
+  <Tab>Tab 2</Tab>
+</TabList>
+```
+
+### Không dùng indicator (dùng pill style cho tab active)
+
+```tsx
+<TabList
+  indicator={false}
+  tabConfig={{
+    sx: { borderRadius: 999 },
+    states: {
+      active: {
+        sx: {
+          backgroundColor: getColorVar('primary.600'),
+          color: getColorVar('primary.contrast'),
+        },
+      },
+    },
+  }}
+>
+  <Tab>All</Tab>
+  <Tab>Active</Tab>
+</TabList>
+```
+
+## Related Components
+
+- [Tabs](../README.md)
+- [TabList](../tab-list/README.md)
+- [Tab](../tab/README.md)
+
+## Dependencies
+
+- motion/react
+- @emotion/react
+
+## See Also
+
+- [Component Source](./tab-indicator.tsx)
+- [Storybook Stories](../tabs.stories.tsx)
+- [Main README](../../../README.md)

package/dist/lib/tabs/tab-indicator/index.d.ts

@@ -1,2 +1 @@
 export * from './tab-indicator';
-export * from './types';

package/dist/lib/tabs/tab-indicator/tab-indicator.d.ts

@@ -1 +1,2 @@
-export declare const TabIndicator: () => import("react/jsx-runtime").JSX.Element;
+import { TabIndicatorProps } from './types';
+export declare const TabIndicator: ({ size, sm, md, lg, ...props }: TabIndicatorProps) => import("react/jsx-runtime").JSX.Element;

package/dist/lib/tabs/tab-indicator/tab-indicator.js

@@ -1,13 +1,18 @@
 import { jsx } from "react/jsx-runtime";
-import { useRef, useState, useEffect } from "react";
+import { useRef, useState, useEffect, useCallback } from "react";
 import { motion } from "motion/react";
 import { Stylesheet } from "../../stylesheet/stylesheet.js";
+import "lodash-es";
+import "../../../theme/palette.js";
+import { isNumber } from "../../../utils/common.js";
 import { useTabsContext } from "../tabs/helpers.js";
-const TabIndicator = () => {
-  const { activeIndex, tabIndicatorProps } = useTabsContext();
+const INDICATOR_SIZE_VAR_NAME = "--indicator-size";
+const TabIndicator = ({ size, sm, md, lg, ...props }) => {
+  const { activeIndex } = useTabsContext();
   const indicatorEl = useRef(null);
   const [indicatorRect, setIndicatorRect] = useState({
     left: 0,
+    top: 0,
     width: 0
   });
   const [activeTabElement, setActiveTabElement] = useState();
@@ -31,50 +36,76 @@ const TabIndicator = () => {
       mutationObserver.disconnect();
     };
   }, [activeIndex]);
-  useEffect(() => {
-    const resizeObserver = new ResizeObserver((entries) => {
-      var _a;
-      const target = (_a = entries.at(0)) == null ? void 0 : _a.target;
-      const parentElement = target == null ? void 0 : target.parentElement;
-      if (!target || !parentElement) {
-        return;
-      }
-      const targetRect = target.getBoundingClientRect();
-      const parentRect = parentElement.getBoundingClientRect();
-      setIndicatorRect({
-        left: targetRect.left - parentRect.left + parentElement.scrollLeft,
-        width: targetRect.width
-      });
+  const syncIndicatorRect = useCallback(() => {
+    const indicator = indicatorEl.current;
+    const parentElement = indicator == null ? void 0 : indicator.parentElement;
+    if (!indicator || !parentElement || !activeTabElement) {
+      return;
+    }
+    const targetRect = activeTabElement.getBoundingClientRect();
+    const parentRect = parentElement.getBoundingClientRect();
+    setIndicatorRect({
+      left: targetRect.left - parentRect.left + parentElement.scrollLeft,
+      top: targetRect.bottom - parentRect.top + parentElement.scrollTop - indicator.offsetHeight,
+      width: targetRect.width
     });
+  }, [activeTabElement]);
+  useEffect(() => {
+    var _a;
+    const resizeObserver = new ResizeObserver(syncIndicatorRect);
+    const parentElement = (_a = indicatorEl.current) == null ? void 0 : _a.parentElement;
     if (activeTabElement) {
       resizeObserver.observe(activeTabElement);
     }
+    if (parentElement) {
+      resizeObserver.observe(parentElement);
+    }
     return () => {
       resizeObserver.disconnect();
     };
-  }, [activeTabElement]);
-  return /* @__PURE__ */ jsx(Stylesheet, { children: ({ css }) => /* @__PURE__ */ jsx(
-    motion.div,
-    {
-      initial: {
-        transform: "translateX(0)",
-        width: 0
-      },
-      animate: {
-        width: indicatorRect.width,
-        transform: `translateX(${indicatorRect.left}px)`
-      },
-      ref: indicatorEl,
-      className: css({
-        position: "absolute",
-        bottom: 0,
-        left: 0,
-        backgroundColor: "currentcolor",
-        borderRadius: 8,
-        ...tabIndicatorProps == null ? void 0 : tabIndicatorProps.sx
-      })
-    }
-  ) });
+  }, [activeTabElement, syncIndicatorRect]);
+  return /* @__PURE__ */ jsx(Stylesheet, { children: ({ css }) => {
+    var _a, _b, _c;
+    return /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: {
+          transform: "translate(0, 0)",
+          width: 0
+        },
+        animate: {
+          width: indicatorRect.width,
+          transform: `translate(${indicatorRect.left}px, ${indicatorRect.top}px)`
+        },
+        ref: indicatorEl,
+        className: css({
+          height: `var(${INDICATOR_SIZE_VAR_NAME})`,
+          position: "absolute",
+          top: 0,
+          left: 0,
+          ...createStyle({ size }),
+          ...props.sx,
+          sm: {
+            ...createStyle(sm),
+            ...(_a = props.sx) == null ? void 0 : _a.sm
+          },
+          md: {
+            ...createStyle(md),
+            ...(_b = props.sx) == null ? void 0 : _b.md
+          },
+          lg: {
+            ...createStyle(lg),
+            ...(_c = props.sx) == null ? void 0 : _c.lg
+          }
+        })
+      }
+    );
+  } });
+};
+const createStyle = ({ size } = {}) => {
+  return isNumber(size) ? {
+    [INDICATOR_SIZE_VAR_NAME]: `${size}px`
+  } : {};
 };
 export {
   TabIndicator

package/dist/lib/tabs/tab-indicator/types.d.ts

@@ -1,2 +1,5 @@
-import { PropsWithSx } from '../../../types';
-export type TabIndicatorProps = PropsWithSx;
+import { PropsWithSx, ToResponsiveProps } from '../../../types';
+export type TabIndicatorResponsiveProps = {
+    size?: number;
+};
+export type TabIndicatorProps = PropsWithSx<ToResponsiveProps<TabIndicatorResponsiveProps>>;

package/dist/lib/tabs/tab-list/README.md

@@ -0,0 +1,164 @@
+# TabList
+
+Container ngang chứa các `Tab`, đồng thời là nơi cấu hình style và hành vi overflow của tab bar. `TabList` gán index cho từng `Tab` con qua `TabIndexContext`, phân phối `tabConfig` xuống mọi `Tab` qua `TabListContext`, và render `TabIndicator` ở cuối.
+
+Phải được dùng bên trong [Tabs](../README.md).
+
+## Import
+
+```tsx
+import { TabList } from '@janbox/storefront-ui';
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+| ------ | ------ | ------- | ----------- |
+| `overflowBehavior` | `'scroll' \| 'wrap'` | `'scroll'` | `'scroll'` cho phép scroll ngang và ẩn scrollbar; `'wrap'` cho tab xuống dòng (`flex-wrap: wrap`). Apply trên inner element. |
+| `align` | `'start' \| 'center' \| 'end'` | `'start'` | Căn tab bar trong outer element qua `justify-content`. Khi tab bar hẹp hơn container, `'center'` sẽ đưa nó vào giữa. |
+| `tabConfig` | `Pick<TabProps, 'sx' \| 'states'>` | Xem [Default tabConfig](#default-tabconfig) | `sx` áp dụng cho mọi `Tab` con. `states.active.sx` override cho tab đang active (match qua `[aria-selected=true]`). |
+| `indicator` | `false \| TabIndicatorProps` | `{ size: 2, sx: { backgroundColor: getColorVar('primary.600') } }` | Cấu hình [TabIndicator](../tab-indicator/README.md). Truyền `false` để không render indicator. |
+| `sx` | `ToResponsiveProps<StyledCSS>` | - | Responsive Emotion CSS overrides cho **inner** element. Merge sau style mặc định nên override được `display`, `width`, v.v. |
+| `as` | `HTMLElementType` | `'div'` | Tag HTML của inner element. |
+| `children` * | `React.ReactNode` | - | Các `Tab`. Fragment được flatten nên index vẫn đúng khi bọc trong `<>…</>`. |
+| `ref` | `React.Ref<HTMLDivElement>` | - | Forwarded ref tới inner element (element chứa các `Tab`). |
+
+Kế thừa toàn bộ `JSX.IntrinsicElements['div']` attributes — tất cả được truyền vào **inner** element, không phải outer.
+
+*Required props
+
+### Cấu trúc DOM
+
+`TabList` render hai element lồng nhau:
+
+```html
+<!-- outer: role=tablist, nhận `align` -->
+<div role="tablist" style="display: flex; justify-content: …">
+  <!-- inner: nhận `sx`, `ref`, `as` và mọi div attribute khác -->
+  <div style="display: flex; width: fit-content; max-width: 100%; position: relative">
+    <button aria-selected="true">…</button>
+    <!-- các Tab -->
+    <div><!-- TabIndicator --></div>
+  </div>
+</div>
+```
+
+Inner element có `width: fit-content` để tab bar chỉ rộng bằng tổng các tab — nhờ đó `align` trên outer mới có tác dụng. Nó cũng có `position: relative` vì `TabIndicator` định vị absolute theo element này.
+
+### Default tabConfig
+
+Định nghĩa trong `tab-list/helpers.ts`, dựa trên `getSizeVariantState('md')`:
+
+```ts
+{
+  sx: {
+    columnGap: 8,
+    paddingLeft: 12,
+    paddingRight: 12,
+    color: getColorVar('neutral.600'),
+    height: 40,
+    borderTopLeftRadius: 8,
+    borderTopRightRadius: 8,
+    ':hover': { backgroundColor: getColorVar('neutral.100') },
+  },
+  states: {
+    active: {
+      sx: {
+        color: getColorVar('primary.600'),
+        ':hover': { backgroundColor: getColorVar('primary.100') },
+      },
+    },
+  },
+}
+```
+
+`tabConfig` bạn truyền vào được **deep merge** với default trên, nên chỉ cần khai báo phần muốn đổi. Muốn xoá hoàn toàn một style mặc định, override nó bằng giá trị khác (vd: `backgroundColor: 'transparent'`) chứ không xoá key được.
+
+## Cách hoạt động
+
+- Mỗi child được bọc trong `TabIndexContext.Provider value={index}` — index dựa trên thứ tự sau khi `flattenChildren`.
+- `TabIndicator` được render như child **cuối cùng** của inner element. Vì `TabIndicator` tìm tab đang active bằng `parentElement.children.item(activeIndex)`, đừng chèn element không phải `Tab` vào giữa các `Tab` — index sẽ lệch.
+- `role="tablist"` được set trên outer element. Nếu bạn truyền `role` qua props, nó vào inner element và **không** override được `role="tablist"` của outer.
+
+> ⚠️ Cả hai element đang có `border` debug (`red 1px solid` ở outer, `blue 1px solid` ở inner) hardcode trong `tab-list.tsx`. Đây là style tạm khi phát triển, cần xoá trước khi release.
+
+## Examples
+
+### Căn giữa và cho tab xuống dòng
+
+```tsx
+<Tabs sx={{ width: 300 }}>
+  <TabList align="center" overflowBehavior="wrap">
+    <Tab>Tab 1</Tab>
+    <Tab>Tab 2</Tab>
+    <Tab>Tab 3</Tab>
+    <Tab>Tab 4</Tab>
+  </TabList>
+  <TabContent>{/* … */}</TabContent>
+</Tabs>
+```
+
+### Custom style cho toàn bộ Tab
+
+```tsx
+<TabList
+  tabConfig={{
+    sx: {
+      height: 36,
+      borderRadius: 999,
+      ':hover': { backgroundColor: getColorVar('neutral.100') },
+    },
+    states: {
+      active: {
+        sx: {
+          color: getColorVar('primary.contrast'),
+          backgroundColor: getColorVar('primary.600'),
+          ':hover': { backgroundColor: getColorVar('primary.700') },
+        },
+      },
+    },
+  }}
+  indicator={false}
+>
+  <Tab>All</Tab>
+  <Tab>Active</Tab>
+  <Tab>Archived</Tab>
+</TabList>
+```
+
+### Indicator dày hơn, màu khác
+
+```tsx
+<TabList indicator={{ size: 3, sx: { backgroundColor: getColorVar('green.600'), borderRadius: 2 } }}>
+  <Tab>Tab 1</Tab>
+  <Tab>Tab 2</Tab>
+</TabList>
+```
+
+### Tab bar full-width, mỗi tab chia đều
+
+`sx` apply lên inner element nên `width: '100%'` sẽ override `width: fit-content` mặc định:
+
+```tsx
+<TabList sx={{ width: '100%' }} tabConfig={{ sx: { flex: 1, flexShrink: 1 } }}>
+  <Tab>Left</Tab>
+  <Tab>Right</Tab>
+</TabList>
+```
+
+## Related Components
+
+- [Tabs](../README.md)
+- [Tab](../tab/README.md)
+- [TabIndicator](../tab-indicator/README.md)
+- [Primitive](../../primitive/README.md)
+
+## Dependencies
+
+- @emotion/react
+
+## See Also
+
+- [Component Source](./tab-list.tsx)
+- [Storybook Stories](../tabs.stories.tsx)
+- [Main README](../../../README.md)

package/dist/lib/tabs/tab-list/helpers.d.ts

@@ -1,2 +1,7 @@
-import { TabListProps } from './types';
+import { TabConfig, TabListProps } from './types';
 export declare const getTabListProps: (extended: TabListProps) => TabListProps;
+export type TabListContextValue = {
+    tabConfig?: TabConfig;
+};
+export declare const TabListContext: import('react').Context<TabListContextValue>;
+export declare const useTabListContext: () => TabListContextValue;