@janbox/storefront-ui 4.0.17 → 5.0.1

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;

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

@@ -1,8 +1,51 @@
-import { mergeComponentProps } from "../../../utils/index.js";
-const defaultProps = {};
+import { mergeComponentProps, getSizeVariantState } from "../../../utils/index.js";
+import "lodash-es";
+import { getColorVar } from "../../../theme/palette.js";
+import { createContext, useContext } from "react";
+const { inputPaddingInline, inputSize } = getSizeVariantState("md");
+const defaultProps = {
+  indicator: {
+    size: 2,
+    sx: {
+      backgroundColor: getColorVar("primary.600")
+    }
+  },
+  overflowBehavior: "scroll",
+  align: "start",
+  tabConfig: {
+    sx: {
+      columnGap: 8,
+      paddingLeft: inputPaddingInline,
+      paddingRight: inputPaddingInline,
+      color: getColorVar("neutral.600"),
+      height: inputSize,
+      borderTopLeftRadius: 8,
+      borderTopRightRadius: 8,
+      ":hover": {
+        backgroundColor: getColorVar("neutral.100")
+      }
+    },
+    states: {
+      active: {
+        sx: {
+          color: getColorVar("primary.600"),
+          ":hover": {
+            backgroundColor: getColorVar("primary.100")
+          }
+        }
+      }
+    }
+  }
+};
 const getTabListProps = (extended) => {
   return mergeComponentProps(defaultProps, extended);
 };
+const TabListContext = createContext({});
+const useTabListContext = () => {
+  return useContext(TabListContext);
+};
 export {
-  getTabListProps
+  TabListContext,
+  getTabListProps,
+  useTabListContext
 };

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

@@ -1,37 +1,74 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { getTabListProps } from "./helpers.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { getTabListProps, TabListContext } from "./helpers.js";
 import { TabIndexContext } from "../tab/helpers.js";
 import { flattenChildren } from "../../../utils/index.js";
 import { scrollbarNoneStyle } from "../../../constants/emotion.js";
+import { useMemo } from "react";
 import { TabIndicator } from "../tab-indicator/tab-indicator.js";
 import { Primitive } from "../../primitive/primitive.js";
 const TabList = ({ ref, children, ..._props }) => {
-  const { sx, ...props } = getTabListProps(_props);
-  return /* @__PURE__ */ jsxs(
+  const { tabConfig, overflowBehavior, indicator, align, containerProps, ...props } = getTabListProps(_props);
+  const alignStyle = (() => {
+    switch (align) {
+      case "end":
+        return {
+          justifyContent: "flex-end"
+        };
+      case "start":
+        return {
+          justifyContent: "flex-start"
+        };
+      case "center":
+        return {
+          justifyContent: "center"
+        };
+      default:
+        return {};
+    }
+  })();
+  const contextValue = useMemo(
+    () => ({
+      tabConfig
+    }),
+    [tabConfig]
+  );
+  return /* @__PURE__ */ jsx(TabListContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
     Primitive,
     {
+      ...containerProps,
       sx: {
         display: "flex",
-        width: "fit-content",
-        maxWidth: "100%",
-        alignItems: "center",
-        gap: 16,
-        position: "relative",
-        overflow: "auto",
-        "& > *": {
-          flexShrink: 0
-        },
-        ...scrollbarNoneStyle,
-        ...sx
+        ...alignStyle,
+        ...containerProps == null ? void 0 : containerProps.sx
       },
-      ...props,
-      ref,
-      children: [
-        flattenChildren(children).map((child, index) => /* @__PURE__ */ jsx(TabIndexContext.Provider, { value: index, children: child }, index)),
-        /* @__PURE__ */ jsx(TabIndicator, {})
-      ]
+      children: /* @__PURE__ */ jsxs(
+        Primitive,
+        {
+          ...props,
+          role: "tablist",
+          sx: {
+            display: "flex",
+            width: "fit-content",
+            maxWidth: "100%",
+            alignItems: "center",
+            position: "relative",
+            ...overflowBehavior === "scroll" ? {
+              overflow: "auto",
+              ...scrollbarNoneStyle
+            } : {
+              flexWrap: "wrap"
+            },
+            ...props.sx
+          },
+          ref,
+          children: [
+            flattenChildren(children).map((child, index) => /* @__PURE__ */ jsx(TabIndexContext.Provider, { value: index, children: child }, index)),
+            indicator && /* @__PURE__ */ jsx(TabIndicator, { ...indicator })
+          ]
+        }
+      )
     }
-  );
+  ) });
 };
 export {
   TabList

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

@@ -1,3 +1,13 @@
 import { PrimitiveProps } from '../../primitive';
+import { ShallowMerge } from '../../../types';
 import { JSX } from 'react';
-export type TabListProps = PrimitiveProps<JSX.IntrinsicElements['div']>;
+import { TabIndicatorProps } from '../tab-indicator/types';
+import { TabProps } from '../tab/types';
+export type TabConfig = Pick<TabProps, 'sx' | 'states'>;
+export type TabListProps = PrimitiveProps<ShallowMerge<JSX.IntrinsicElements['div'], {
+    overflowBehavior?: 'scroll' | 'wrap';
+    indicator?: false | TabIndicatorProps;
+    align?: 'start' | 'center' | 'end';
+    tabConfig?: TabConfig;
+    containerProps?: PrimitiveProps<JSX.IntrinsicElements['div'], 'div'>;
+}>, 'div'>;

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

@@ -0,0 +1,86 @@
+# TabPanel
+
+Wrapper cho nội dung của một tab. Là child trực tiếp của [TabContent](../tab-content/README.md), và chỉ được render khi index của nó khớp `activeIndex`.
+
+`TabPanel` không chứa logic — nó chỉ render một `div` với các props bạn truyền vào. Việc chọn panel nào hiển thị do `TabContent` quyết định.
+
+## Import
+
+```tsx
+import { TabPanel } from '@janbox/storefront-ui';
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+| ------ | ------ | ------- | ----------- |
+| `children` | `React.ReactNode` | - | Nội dung của panel. |
+| `className` | `string` | - | Class cho `div`. |
+| `ref` | `React.Ref<HTMLDivElement>` | - | Forwarded ref tới `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 panel.
+
+## Examples
+
+### Cơ bản
+
+```tsx
+<TabContent>
+  <TabPanel>Content for Tab 1</TabPanel>
+  <TabPanel>Content for Tab 2</TabPanel>
+</TabContent>
+```
+
+### Panel với nội dung phức tạp
+
+```tsx
+<TabContent>
+  <TabPanel style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+    <h3>Overview</h3>
+    <p>Mô tả sản phẩm…</p>
+  </TabPanel>
+  <TabPanel>
+    <ul>
+      <li>Review 1</li>
+      <li>Review 2</li>
+    </ul>
+  </TabPanel>
+</TabContent>
+```
+
+### Panel kèm ARIA attributes
+
+```tsx
+<Tabs>
+  <TabList>
+    <Tab role="tab" aria-controls="panel-overview">Overview</Tab>
+    <Tab role="tab" aria-controls="panel-reviews">Reviews</Tab>
+  </TabList>
+  <TabContent>
+    <TabPanel id="panel-overview" role="tabpanel">Overview content</TabPanel>
+    <TabPanel id="panel-reviews" role="tabpanel">Reviews content</TabPanel>
+  </TabContent>
+</Tabs>
+```
+
+> ⚠️ Panel không active bị unmount, không phải ẩn bằng CSS. Mọi state nội bộ (form input, scroll position, data đã fetch) sẽ mất khi đổi tab. Nếu cần giữ, lift state lên component cha của `Tabs`.
+
+## Accessibility
+
+`TabPanel` không tự set `role="tabpanel"` hay `aria-labelledby`. Nếu cần đầy đủ ARIA tabs pattern, truyền các attribute này thủ công và ghép với `id`/`aria-controls` trên [Tab](../tab/README.md) tương ứng.
+
+## Related Components
+
+- [Tabs](../README.md)
+- [TabContent](../tab-content/README.md)
+- [Primitive](../../primitive/README.md)
+
+## Dependencies
+
+- @emotion/react
+
+## See Also
+
+- [Component Source](./tab-panel.tsx)
+- [Storybook Stories](../tabs.stories.tsx)
+- [Main README](../../../README.md)

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

@@ -1,2 +1,2 @@
 import { TabPanelProps } from './types';
-export declare const getTabPanelProps: (extended: TabPanelProps) => TabPanelProps;
+export declare const getTabPanelProps: (extended: TabPanelProps) => import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>;

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

@@ -1,11 +1,9 @@
 import { jsx } from "react/jsx-runtime";
-import { mergeComponentProps } from "../../../utils/index.js";
-import { useTabsContext } from "../tabs/helpers.js";
+import { getTabPanelProps } from "./helpers.js";
 import { Primitive } from "../../primitive/primitive.js";
 const TabPanel = ({ children, ref, ..._props }) => {
-  const { tabPanelProps: defaultTabPanelProps = {} } = useTabsContext();
-  const { ...props } = mergeComponentProps(defaultTabPanelProps, _props);
-  return /* @__PURE__ */ jsx(Primitive, { ...props, ref, children });
+  const { ...props } = getTabPanelProps(_props);
+  return /* @__PURE__ */ jsx(Primitive, { ...props, role: "tabpanel", ref, children });
 };
 export {
   TabPanel

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

@@ -1,3 +1,2 @@
 import { JSX } from 'react';
-import { PrimitiveProps } from '../../primitive';
-export type TabPanelProps = PrimitiveProps<JSX.IntrinsicElements['div']>;
+export type TabPanelProps = JSX.IntrinsicElements['div'];

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

@@ -2,11 +2,7 @@ import { TabsProps } from './types';
 export declare const getTabsProps: (extended: TabsProps) => TabsProps;
 export type TabsContextValue = {
     activeIndex: number;
-    focusTab: (index: number) => void;
-    tabProps?: TabsProps['tabProps'];
-    tabIndicatorProps?: TabsProps['tabIndicatorProps'];
-    tabPanelProps?: TabsProps['tabPanelProps'];
-    preventActiveTabChange: TabsProps['preventActiveTabChange'];
+    focusTab: (nextIndex: number) => void;
 };
 export declare const TabsContext: import('react').Context<TabsContextValue>;
 export declare const useTabsContext: () => TabsContextValue;

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

@@ -1,25 +1,6 @@
 import { createContext, useContext } from "react";
-import "lodash-es";
-import { getColorVar } from "../../../theme/palette.js";
 import { mergeComponentProps } from "../../../utils/index.js";
-const defaultProps = {
-  tabProps: {
-    color: "neutral",
-    variant: "text",
-    states: {
-      active: {
-        color: "primary",
-        variant: "text"
-      }
-    }
-  },
-  tabIndicatorProps: {
-    sx: {
-      height: 2,
-      backgroundColor: getColorVar("primary.600")
-    }
-  }
-};
+const defaultProps = {};
 const getTabsProps = (extended) => {
   return mergeComponentProps(defaultProps, extended);
 };

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

@@ -1,39 +1,35 @@
 import { jsx } from "react/jsx-runtime";
-import { useRef, useMemo } from "react";
+import { useRef, useEffect, useCallback, useMemo } from "react";
 import { getTabsProps, TabsContext } from "./helpers.js";
 import { useControllableState } from "../../../hooks/use-controllable-state.js";
 import { Primitive } from "../../primitive/primitive.js";
 const Tabs = ({ ref, children, ..._props }) => {
-  const {
-    defaultActiveIndex,
-    activeIndex,
-    onTabChange,
-    tabProps,
-    tabIndicatorProps,
-    tabPanelProps,
-    preventActiveTabChange = true,
-    ...rest
-  } = getTabsProps(_props);
+  const { defaultActiveIndex, activeIndex, onTabChange, preventActiveTabChange = true, ...rest } = getTabsProps(_props);
   const [activeTabIndex, setActiveTabIndex] = useControllableState({
     defaultValue: defaultActiveIndex ?? 0,
     value: activeIndex
   });
   const onTabChangeRef = useRef(onTabChange);
-  onTabChangeRef.current = onTabChange;
+  useEffect(() => {
+    onTabChangeRef.current = onTabChange;
+  }, [onTabChange]);
+  const focusTab = useCallback(
+    (nextIndex) => {
+      var _a;
+      const isChanged = preventActiveTabChange ? nextIndex !== activeTabIndex : true;
+      if (isChanged) {
+        setActiveTabIndex(nextIndex);
+        (_a = onTabChangeRef.current) == null ? void 0 : _a.call(onTabChangeRef, nextIndex);
+      }
+    },
+    [activeTabIndex, preventActiveTabChange, setActiveTabIndex]
+  );
   const contextValue = useMemo(() => {
     return {
       activeIndex: activeTabIndex,
-      focusTab: (tabIndex) => {
-        var _a;
-        setActiveTabIndex(tabIndex);
-        (_a = onTabChangeRef.current) == null ? void 0 : _a.call(onTabChangeRef, tabIndex);
-      },
-      tabProps,
-      tabIndicatorProps,
-      tabPanelProps,
-      preventActiveTabChange
+      focusTab
     };
-  }, [activeTabIndex, tabProps, tabIndicatorProps, tabPanelProps, preventActiveTabChange, setActiveTabIndex]);
+  }, [activeTabIndex, focusTab]);
   return /* @__PURE__ */ jsx(TabsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(Primitive, { ...rest, ref, children }) });
 };
 export {

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

@@ -1,15 +1,9 @@
 import { JSX } from 'react';
-import { TabProps } from '../tab';
-import { TabIndicatorProps } from '../tab-indicator';
-import { TabPanelProps } from '../tab-panel';
 import { PropsWithSx, ShallowMerge } from '../../../types';
 export type TabsExtendedProps = PropsWithSx<{
     activeIndex?: number;
     defaultActiveIndex?: number;
-    onTabChange?: (tabIndex: number) => void;
-    tabProps?: Partial<TabProps>;
-    tabIndicatorProps?: TabIndicatorProps;
-    tabPanelProps?: Partial<TabPanelProps>;
+    onTabChange?: (nextIndex: number) => void;
     preventActiveTabChange?: boolean;
 }>;
 export type TabsProps = ShallowMerge<JSX.IntrinsicElements['div'], TabsExtendedProps>;

package/dist/lib/textarea/textarea.js

@@ -162,10 +162,10 @@ const Textarea = ({ ref, ..._props }) => {
   );
 };
 const createStyle = ({ size } = {}) => {
-  const { inputPaddingX, textVariant } = getSizeVariantState(size);
+  const { inputPaddingInline, textVariant } = getSizeVariantState(size);
   return {
-    paddingLeft: inputPaddingX,
-    paddingRight: inputPaddingX,
+    paddingLeft: inputPaddingInline,
+    paddingRight: inputPaddingInline,
     fontSize: textVariant ? getTypographyVar(textVariant).fontSize : void 0,
     lineHeight: textVariant ? getTypographyVar(textVariant).lineHeight : void 0
   };

package/dist/utils/common.d.ts

@@ -16,3 +16,4 @@ export declare const parseNumber: (text?: string | number, type?: "int" | "float
 export declare function omitEmpty<T extends object>(obj?: T): T;
 export declare const getEnumValues: <T extends Dict<string | number>>(enumObject: T) => Array<T[keyof T]>;
 export declare function parseSvgString(source: string, uniqueId: string): ReactElement<import('react').SVGProps<SVGSVGElement>, "svg"> | null;
+export declare const isNumber: (value: any) => value is number;

package/dist/utils/common.js

@@ -108,11 +108,13 @@ function parseSvgString(source, uniqueId) {
   const validType = "svg";
   return isValidElement(parsed) && parsed.type === validType ? parsed : null;
 }
+const isNumber = (value) => typeof value === "number";
 export {
   ensureArray,
   ensureBoolean,
   getDecimalDigits,
   getEnumValues,
+  isNumber,
   matchSearch,
   normalizeSearchText,
   omitEmpty,

package/dist/utils/index.d.ts

@@ -31,7 +31,7 @@ export declare const flattenChildren: (children: React.ReactNode) => ReactElemen
 export type SizeVariantState = Partial<{
     iconSize: number;
     inputSize: number;
-    inputPaddingX: number;
+    inputPaddingInline: number;
     textVariant: TypographySizeVariant;
 }>;
 export declare const getSizeVariantState: (size?: SizeVariant) => SizeVariantState;

package/dist/utils/index.js

@@ -2,7 +2,7 @@ import { Children, isValidElement, Fragment } from "react";
 import { isString, isNumber, isUndefined, mergeWith, get } from "lodash-es";
 import { getSmallerScreens } from "../theme/screens.js";
 import { getColorVar } from "../theme/palette.js";
-import { ensureArray, ensureBoolean, getDecimalDigits, getEnumValues, matchSearch, normalizeSearchText, omitEmpty, parseNumber, parseSvgString } from "./common.js";
+import { ensureArray, ensureBoolean, getDecimalDigits, getEnumValues, isNumber as isNumber2, matchSearch, normalizeSearchText, omitEmpty, parseNumber, parseSvgString } from "./common.js";
 import { ArrayParamParser, BooleanParamParser, DateParamParser, EnumParamParser, NumberParamParser, StringParamParser, simplifyQueryParams } from "./query-params.js";
 import { createUnderlineEffect } from "./stylesheet.js";
 const getColorShadesByVariant = (variant) => {
@@ -127,28 +127,28 @@ const getSizeVariantState = (size) => {
       return {
         iconSize: 20,
         inputSize: 24,
-        inputPaddingX: 8,
+        inputPaddingInline: 8,
         textVariant: "xs"
       };
     case "sm":
       return {
         iconSize: 20,
         inputSize: 32,
-        inputPaddingX: 12,
+        inputPaddingInline: 12,
         textVariant: "sm"
       };
     case "md":
       return {
         iconSize: 24,
         inputSize: 40,
-        inputPaddingX: 12,
+        inputPaddingInline: 12,
         textVariant: "sm"
       };
     case "lg":
       return {
         iconSize: 24,
         inputSize: 48,
-        inputPaddingX: 16,
+        inputPaddingInline: 16,
         textVariant: "base"
       };
     default:
@@ -253,6 +253,7 @@ export {
   getLanguageDisplayName,
   getResponsiveProp,
   getSizeVariantState,
+  isNumber2 as isNumber,
   matchSearch,
   mergeComponentProps,
   normalizeSearchText,