@janbox/storefront-ui 4.0.17 → 5.0.0

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,

package/dist/utils/stylesheet.d.ts

@@ -1,5 +1,5 @@
 import { PropsWithSx, StyledCSS } from '../types';
-export declare const createSxInterpolation: (sx?: PropsWithSx["sx"]) => StyledCSS[];
+export declare const createSxStyle: (sx?: PropsWithSx["sx"]) => StyledCSS[];
 type CreateUnderlineEffectOptions = {
     color?: string;
     duration?: number;

package/dist/utils/stylesheet.js

@@ -1,7 +1,7 @@
 import { isNumber } from "lodash-es";
 import { mediaQuery } from "../theme/screens.js";
 import "../theme/palette.js";
-const createSxInterpolation = (sx = {}) => {
+const createSxStyle = (sx = {}) => {
   const { sm, md, lg, ...rest } = sx;
   return [
     rest,
@@ -35,6 +35,6 @@ const createUnderlineEffect = (options = {}) => {
   };
 };
 export {
-  createSxInterpolation,
+  createSxStyle,
   createUnderlineEffect
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@janbox/storefront-ui",
-  "version": "4.0.17",
+  "version": "5.0.0",
   "description": "Storefront UI component library for Janbox",
   "author": "Janbox",
   "keywords": [