@janbox/storefront-ui 4.0.17 → 5.0.1

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

@@ -0,0 +1,134 @@
+# Tab
+
+Nút của một tab trong [TabList](../tab-list/README.md). Render `<button type="button">` với `aria-selected` phản ánh trạng thái active, cùng slot cho icon/nội dung phụ ở hai đầu.
+
+`Tab` phải nằm bên trong `TabList` (để lấy index qua `TabIndexContext`) và [Tabs](../README.md) (để lấy `activeIndex` + `focusTab` qua `TabsContext`).
+
+## Import
+
+```tsx
+import { Tab } from '@janbox/storefront-ui';
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+| ------ | ------ | ------- | ----------- |
+| `startIcon` | `IconProps` | - | Icon render trước `children`. Tự động thêm `flexShrink: 0`. |
+| `endIcon` | `IconProps` | - | Icon render sau `children`. Tự động thêm `flexShrink: 0`. |
+| `prefix` | `React.ReactNode` | - | Node render ở đầu, **trước** `startIcon`. Dùng cho badge, dot, counter… |
+| `suffix` | `React.ReactNode` | - | Node render ở cuối, **sau** `endIcon`. |
+| `states` | `{ active?: PropsWithSx }` | Xem [TabList](../tab-list/README.md#default-tabconfig) | `states.active.sx` được apply qua selector `&[aria-selected=true]`. |
+| `onClick` | `React.MouseEventHandler<HTMLButtonElement>` | - | Được gọi **sau** khi tab đã chuyển. Xem [Click handling](#click-handling). |
+| `sx` | `ToResponsiveProps<StyledCSS>` | `{ flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }` | Responsive Emotion CSS overrides. |
+| `children` | `React.ReactNode` | - | Nội dung label của tab. |
+| `ref` | `React.Ref<HTMLButtonElement>` | - | Forwarded ref tới `<button>`. |
+
+Kế thừa toàn bộ `JSX.IntrinsicElements['button']` attributes.
+
+### Click handling
+
+`Tab` tự gắn `onClick` gọi `focusTab(tabIndex)` từ `TabsContext`, rồi mới gọi `onClick` của bạn. Nghĩa là:
+
+- `onClick` của bạn luôn chạy, và chạy **sau** khi state đã cập nhật.
+- `e.preventDefault()` hay `e.stopPropagation()` trong `onClick` **không** ngăn được tab chuyển, vì việc chuyển đã xảy ra trước đó.
+- Nếu `preventActiveTabChange` (trên `Tabs`) là `true` — mặc định — click vào tab đang active không re-fire `onTabChange`, nhưng `onClick` của bạn vẫn được gọi.
+
+### Thứ tự merge props
+
+`Tab` merge theo thứ tự tăng dần độ ưu tiên:
+
+1. `defaultProps` của `Tab` (layout flex cơ bản)
+2. `tabConfig` từ `TabList` (qua `TabListContext`)
+3. Props truyền trực tiếp vào `Tab`
+
+Nên prop trên từng `Tab` luôn thắng `tabConfig`, và cả hai đều là deep merge — chỉ khai báo phần muốn đổi.
+
+### Attributes được render
+
+| Attribute | Giá trị |
+| ------ | ------ |
+| `aria-selected` | `true` khi index của tab bằng `activeIndex` |
+| `type` | Luôn `"button"` để không submit form khi đặt trong `<form>` |
+
+## Examples
+
+### Tab cơ bản
+
+```tsx
+<TabList>
+  <Tab>Overview</Tab>
+  <Tab>Details</Tab>
+</TabList>
+```
+
+### Tab với icon
+
+```tsx
+import HomeIcon from '@/assets/svg/home.svg?raw';
+import ChevronIcon from '@/assets/svg/chevron-down.svg?raw';
+
+<TabList>
+  <Tab startIcon={{ source: HomeIcon, size: 20 }}>Home</Tab>
+  <Tab endIcon={{ source: ChevronIcon, size: 20 }}>More</Tab>
+</TabList>
+```
+
+### Tab với counter ở suffix
+
+```tsx
+<TabList>
+  <Tab suffix={<span>(3)</span>}>Notifications</Tab>
+  <Tab>Settings</Tab>
+</TabList>
+```
+
+### Override style cho một Tab riêng lẻ
+
+```tsx
+<TabList>
+  <Tab>Normal</Tab>
+  <Tab
+    sx={{ color: getColorVar('red.600') }}
+    states={{ active: { sx: { color: getColorVar('red.700') } } }}
+  >
+    Danger
+  </Tab>
+</TabList>
+```
+
+### Disabled tab
+
+```tsx
+<TabList>
+  <Tab>Available</Tab>
+  <Tab disabled sx={{ opacity: 0.5, cursor: 'not-allowed' }}>
+    Coming soon
+  </Tab>
+</TabList>
+```
+
+> ⚠️ `disabled` ngăn tab chuyển vì `<button disabled>` không phát click event — `Tab` không kiểm tra `disabled` trước khi gọi `focusTab`. Style cho trạng thái disabled phải tự khai báo, không có style mặc định.
+
+## Accessibility
+
+- `aria-selected` được set tự động theo trạng thái active.
+- `Tab` render `<button>` nên đã focusable và activate được bằng `Enter`/`Space`.
+- `TabList` set `role="tablist"` trên wrapper, nhưng `Tab` **không** tự set `role="tab"` hay `aria-controls`, và không xử lý điều hướng bằng arrow key. Nếu cần đầy đủ ARIA tabs pattern, truyền `role="tab"` và `aria-controls` thủ công cùng `id` tương ứng trên `TabPanel`.
+
+## Related Components
+
+- [Tabs](../README.md)
+- [TabList](../tab-list/README.md)
+- [Icon](../../icon/README.md)
+- [Primitive](../../primitive/README.md)
+
+## Dependencies
+
+- @emotion/react
+
+## See Also
+
+- [Component Source](./tab.tsx)
+- [Storybook Stories](../tabs.stories.tsx)
+- [Main README](../../../README.md)

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

@@ -1,2 +1,4 @@
+import { TabProps } from './types';
 export declare const TabIndexContext: import('react').Context<number>;
 export declare const useTabIndexContext: () => number;
+export declare const useGetTabProps: () => (extended: TabProps) => TabProps;

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

@@ -1,9 +1,26 @@
+import { mergeComponentProps } from "../../../utils/index.js";
 import { createContext, useContext } from "react";
+import { useTabListContext } from "../tab-list/helpers.js";
 const TabIndexContext = createContext(-1);
 const useTabIndexContext = () => {
   return useContext(TabIndexContext);
 };
+const defaultProps = {
+  sx: {
+    flexShrink: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  }
+};
+const useGetTabProps = () => {
+  const { tabConfig = {} } = useTabListContext();
+  return (extended) => {
+    return mergeComponentProps(defaultProps, tabConfig, extended);
+  };
+};
 export {
   TabIndexContext,
+  useGetTabProps,
   useTabIndexContext
 };

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,90 @@
+# 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`. |
+| `as` | `HTMLElementType` | `'div'` | Tag HTML của container. |
+| `sx` | `ToResponsiveProps<StyledCSS>` | - | Style responsive cho container. |
+| `ref` | `React.Ref<HTMLElement>` | - | Trỏ tới DOM node của container. |
+
+Kiểu prop là `PrimitiveProps<JSX.IntrinsicElements['div'], 'div'>` — kế thừa toàn bộ div attributes cùng `as` và `sx` từ [Primitive](../../primitive/README.md).
+
+> React 19 coi `ref` là prop thường, nên `ref` được `Primitive` spread thẳng vào DOM node của container.
+
+*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,3 @@
-import { PropsWithChildren } from 'react';
-export type TabContentProps = PropsWithChildren<{
-    ref?: React.Ref<HTMLDivElement>;
-}>;
+import { JSX } from 'react';
+import { PrimitiveProps } from '../../primitive';
+export type TabContentProps = PrimitiveProps<JSX.IntrinsicElements['div'], '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();
+import { Stylesheet } from "../../stylesheet/stylesheet.js";
+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>>;