@janbox/storefront-ui 3.0.0 → 3.0.1

package/README.md

@@ -250,43 +250,7 @@ const formatted = formatPrice(1000000, 'VND', 'vi-VN'); // "1.000.000 ₫"
 
 ### Component Categories
 
-Thư viện cung cấp 60+ components được tổ chức theo các nhóm:
-
-#### Layout
-
-`Box`, `Flexbox`, `Grid`, `Container`
-
-#### Typography
-
-`Text`, `Link`, `HighlightWords`
-
-#### Form Controls
-
-`Input`, `InputNumber`, `InputRange`, `InputMask`, `Textarea`, `Select`, `MultipleSelect`, `Checkbox`, `RadioButton`, `Switch`, `DatePicker`, `TimePicker`, `PhoneInput`, `OtpInput`, `Cascader`
-
-#### Buttons
-
-`Button`, `IconButton`, `NavLink`
-
-#### Feedback
-
-`Loading`, `Progress`, `LinearProgress`, `Dialog`, `Drawer`, `Tooltip`, `Popover`, `Notifications`
-
-#### Data Display
-
-`Badge`, `Chip`, `Avatar`, `Table`, `Pagination`, `Stepper`, `Tabs`, `Accordion`, `Collapse`, `Breadcrumbs`, `StarRating`, `PriceLabel`, `CountUp`, `CountdownTimer`, `Flag`
-
-#### Media
-
-`Image`, `Video`, `Icon`, `Lightbox`, `Swiper`
-
-#### Navigation
-
-`Menu`, `FilterPanel`
-
-#### Utilities
-
-`Primitive`, `RippleEffect`, `SuspenseQuery`, `Marquee`, `Floating`
+Thư viện cung cấp 60+ components được tổ chức theo các nhóm. Xem danh sách README theo từng component tại [Component Documentation](#component-documentation).
 
 ### Export Paths
 
@@ -491,6 +455,77 @@ export const Xxx = ({ ref, ..._props }: XxxProps) => {
 
 ---
 
+## Component Documentation
+
+Mọi component đều có README riêng với API reference, examples, và usage notes.
+
+- [Accordion](./dist/lib/accordion/README.md)
+- [Avatar](./dist/lib/avatar/README.md)
+- [Badge](./dist/lib/badge/README.md)
+- [Box](./dist/lib/box/README.md)
+- [Breadcrumbs](./dist/lib/breadcrumbs/README.md)
+- [Button](./dist/lib/button/README.md)
+- [Cascader](./dist/lib/cascader/README.md)
+- [Cell](./dist/lib/grid/cell/README.md)
+- [Checkbox](./dist/lib/checkbox/README.md)
+- [Chip](./dist/lib/chip/README.md)
+- [Collapse](./dist/lib/collapse/README.md)
+- [Container](./dist/lib/container/README.md)
+- [CountUp](./dist/lib/count-up/README.md)
+- [CountdownTimer](./dist/lib/countdown-timer/README.md)
+- [DatePicker](./dist/lib/date-picker/README.md)
+- [Dialog](./dist/lib/dialog/README.md)
+- [Drawer](./dist/lib/drawer/README.md)
+- [FilterPanel](./dist/lib/filter-panel/README.md)
+- [Flag](./dist/lib/flag/README.md)
+- [Flexbox](./dist/lib/flexbox/README.md)
+- [Floating](./dist/lib/floating/README.md)
+- [FormHelperText](./dist/lib/form-helper-text/README.md)
+- [FormLabel](./dist/lib/form-label/README.md)
+- [Grid](./dist/lib/grid/grid/README.md)
+- [HighlightWords](./dist/lib/highlight-words/README.md)
+- [Icon](./dist/lib/icon/README.md)
+- [IconButton](./dist/lib/icon-button/README.md)
+- [Image](./dist/lib/image/README.md)
+- [Input](./dist/lib/input/README.md)
+- [InputMask](./dist/lib/input-mask/README.md)
+- [InputNumber](./dist/lib/input-number/README.md)
+- [InputRange](./dist/lib/input-range/README.md)
+- [Lightbox](./dist/lib/lightbox/README.md)
+- [LinearProgress](./dist/lib/linear-progress/README.md)
+- [Link](./dist/lib/link/README.md)
+- [Loading](./dist/lib/loading/README.md)
+- [Marquee](./dist/lib/marquee/README.md)
+- [Menu](./dist/lib/menu/README.md)
+- [MultipleSelect](./dist/lib/multiple-select/README.md)
+- [NavLink](./dist/lib/nav-link/README.md)
+- [Notifications](./dist/lib/notifications/README.md)
+- [OtpInput](./dist/lib/otp-input/README.md)
+- [Pagination](./dist/lib/pagination/README.md)
+- [PhoneInput](./dist/lib/phone-input/README.md)
+- [Popover](./dist/lib/popover/README.md)
+- [PriceLabel](./dist/lib/price-label/README.md)
+- [Primitive](./dist/lib/primitive/README.md)
+- [Progress](./dist/lib/progress/README.md)
+- [RadioButton](./dist/lib/radio-button/README.md)
+- [RippleEffect](./dist/lib/ripple-effect/README.md)
+- [Select](./dist/lib/select/README.md)
+- [StarRating](./dist/lib/star-rating/README.md)
+- [Stepper](./dist/lib/stepper/README.md)
+- [SuspenseQuery](./dist/lib/suspense-query/README.md)
+- [Swiper](./dist/lib/swiper/README.md)
+- [Switch](./dist/lib/switch/README.md)
+- [Table](./dist/lib/table/README.md)
+- [Tabs](./dist/lib/tabs/README.md)
+- [Text](./dist/lib/text/README.md)
+- [Textarea](./dist/lib/textarea/README.md)
+- [TimePicker](./dist/lib/time-picker/README.md)
+- [Tooltip](./dist/lib/tooltip/README.md)
+- [UnorderedList](./dist/lib/unordered-list/README.md)
+- [Video](./dist/lib/video/README.md)
+
+---
+
 ## API Reference
 
 ### Documentation

package/dist/constants/emotion.d.ts

@@ -3,5 +3,3 @@ export declare const scrollbarNoneStyle: StyledCSS;
 export declare const animatePulseStyle: StyledCSS;
 export declare const animateSpinStyle: StyledCSS;
 export declare const truncateStyle: StyledCSS;
-export declare const pointerEventsNone: StyledCSS;
-export declare const containerStyle: StyledCSS;

package/dist/constants/emotion.js

@@ -1,5 +1,4 @@
 import { keyframes } from "@emotion/react";
-import { breakpoint, mediaQuery } from "../theme/screens.js";
 const scrollbarNoneStyle = {
   scrollbarWidth: "none",
   "&::-webkit-scrollbar": { display: "none" }
@@ -21,32 +20,9 @@ const truncateStyle = {
   textOverflow: "ellipsis",
   whiteSpace: "nowrap"
 };
-const containerStyle = {
-  width: "100%",
-  marginLeft: "auto",
-  marginRight: "auto",
-  paddingLeft: `${breakpoint.xs.padding}px`,
-  paddingRight: `${breakpoint.xs.padding}px`,
-  [mediaQuery("sm")]: {
-    maxWidth: `${breakpoint.sm.minWidth}px`,
-    paddingLeft: `${breakpoint.sm.padding}px`,
-    paddingRight: `${breakpoint.sm.padding}px`
-  },
-  [mediaQuery("md")]: {
-    maxWidth: `${breakpoint.md.minWidth}px`,
-    paddingLeft: `${breakpoint.md.padding}px`,
-    paddingRight: `${breakpoint.md.padding}px`
-  },
-  [mediaQuery("lg")]: {
-    maxWidth: `${breakpoint.lg.minWidth}px`,
-    paddingLeft: `${breakpoint.lg.padding}px`,
-    paddingRight: `${breakpoint.lg.padding}px`
-  }
-};
 export {
   animatePulseStyle,
   animateSpinStyle,
-  containerStyle,
   scrollbarNoneStyle,
   truncateStyle
 };

package/dist/lib/accordion/accordion-summary/accordion-summary.d.ts

@@ -1,2 +1,2 @@
 import { AccordionSummaryProps } from './types';
-export declare const AccordionSummary: ({ children, ref, ..._props }: AccordionSummaryProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const AccordionSummary: ({ children, ref, ..._props }: AccordionSummaryProps) => import("react/jsx-runtime").JSX.Element;

package/dist/lib/accordion/accordion-summary/accordion-summary.js

@@ -1,9 +1,9 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { getAccordionSummaryProps } from "./helpers.js";
 import { useAccordionContext } from "../accordion/helpers.js";
 import { Booleanish } from "../../../constants/index.js";
-import { createSxInterpolation } from "../../../utils/stylesheet.js";
 import { useAccordionGroupContext } from "../accordion-group/helpers.js";
+import { Primitive } from "../../primitive/primitive.js";
 import { Icon } from "../../icon/icon.js";
 const AccordionSummary = ({ children, ref, ..._props }) => {
   const { accordionSummaryProps: accordionSummaryPropsByGroup = {} } = useAccordionGroupContext();
@@ -22,18 +22,26 @@ const AccordionSummary = ({ children, ref, ..._props }) => {
     toggle();
     (_b = rest.onClick) == null ? void 0 : _b.call(rest, e);
   };
-  const css = [
+  return /* @__PURE__ */ jsxs(
+    Primitive,
     {
-      display: "flex",
-      cursor: "pointer"
-    },
-    createSxInterpolation(sx)
-  ];
-  return /* @__PURE__ */ jsxs("div", { css, "aria-hidden": true, ...rest, onClick, ref, children: [
-    !!expandIcon && expandIcon.position === "left" && /* @__PURE__ */ jsx(ExpandIcon, { ...expandIcon }),
-    /* @__PURE__ */ jsx("div", { css: { flex: "1 1 0%" }, children }),
-    !!expandIcon && expandIcon.position === "right" && /* @__PURE__ */ jsx(ExpandIcon, { ...expandIcon })
-  ] });
+      as: "div",
+      sx: {
+        display: "flex",
+        cursor: "pointer",
+        ...sx
+      },
+      "aria-hidden": true,
+      ...rest,
+      onClick,
+      ref,
+      children: [
+        !!expandIcon && expandIcon.position === "left" && /* @__PURE__ */ jsx(ExpandIcon, { ...expandIcon }),
+        /* @__PURE__ */ jsx(Primitive, { sx: { flex: "1 1 0%" }, children }),
+        !!expandIcon && expandIcon.position === "right" && /* @__PURE__ */ jsx(ExpandIcon, { ...expandIcon })
+      ]
+    }
+  );
 };
 const ExpandIcon = ({ source, position, size, sm, md, lg, sx }) => {
   const { open } = useAccordionContext();

package/dist/lib/accordion/accordion-summary/types.d.ts

@@ -1,6 +1,7 @@
 import { JSX } from 'react';
 import { IconResponsiveProps } from '../../icon';
 import { PropsWithSx, ShallowMerge, ToResponsiveProps } from '../../../types';
+import { PrimitiveProps } from '../../primitive';
 export declare enum AccordionSummaryVariant {
     EndArrow = "end-arrow",
     EndPlusMinus = "end-plus-minus"
@@ -20,8 +21,8 @@ export type AccordionSummaryExpandIconProps = ToResponsiveProps<IconResponsivePr
     source: Record<AccordionState, string>;
     position: 'left' | 'right';
 } & PropsWithSx;
-type AccordionSummaryExtendedProps = PropsWithSx<{
+type AccordionSummaryExtendedProps = {
     expandIcon?: AccordionSummaryExpandIconProps;
-}>;
-export type AccordionSummaryProps = ShallowMerge<JSX.IntrinsicElements['div'], AccordionSummaryExtendedProps>;
+};
+export type AccordionSummaryProps = PrimitiveProps<ShallowMerge<JSX.IntrinsicElements['div'], AccordionSummaryExtendedProps>>;
 export {};

package/dist/lib/box/README.md

@@ -1,6 +1,6 @@
 # Box
 
-A general-purpose layout primitive that renders a `div` by default. It supports responsive `sx` styling and an optional `container` mode that applies responsive max-width, horizontal centering, and breakpoint-aware padding.
+A general-purpose layout primitive that renders a `div` by default. It supports responsive `sx` styling via the Emotion-powered `sx` prop.
 
 ## Import
 
@@ -12,7 +12,6 @@ import { Box } from '@janbox/storefront-ui';
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `container` | `boolean` | false | When true, applies responsive container styles: full width, auto horizontal margins, and breakpoint-aware max-width and padding (xs → sm → md → lg). |
 | `sx` | `ToResponsiveProps<StyledCSS>` | - | Responsive Emotion CSS overrides. Accepts a base StyledCSS object plus optional `sm`, `md`, and `lg` breakpoint keys for responsive styles. |
 | `as` | `HTMLElementType` | "div" | Override the rendered HTML element (polymorphic). Defaults to `div`. |
 | `children` | `React.ReactNode` | - | Content rendered inside the Box. |
@@ -30,15 +29,6 @@ import { Box } from '@janbox/storefront-ui';
 </Box>
 ```
 
-### Container Box
-
-```tsx
-<Box container>
-  <h1>Page title</h1>
-  <p>Centered, max-width constrained content with responsive padding.</p>
-</Box>
-```
-
 ### Responsive sx styling
 
 ```tsx

package/dist/lib/box/box.js

@@ -1,15 +1,13 @@
 import { jsx } from "react/jsx-runtime";
 import { getBoxProps } from "./helpers.js";
-import { containerStyle } from "../../constants/emotion.js";
 import { Primitive } from "../primitive/primitive.js";
 const Box = ({ children, ref, ..._props }) => {
-  const { sx = {}, container, ...rest } = getBoxProps(_props);
+  const { sx = {}, ...rest } = getBoxProps(_props);
   return /* @__PURE__ */ jsx(
     Primitive,
     {
       ...rest,
       sx: {
-        ...container ? containerStyle : {},
         ...sx,
         sm: { ...sx.sm },
         md: { ...sx.md },

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

@@ -1,7 +1,3 @@
 import { JSX } from 'react';
 import { PrimitiveProps } from '../primitive';
-type BoxExtendedProps = {
-    container?: boolean;
-};
-export type BoxProps = PrimitiveProps<JSX.IntrinsicElements['div']> & BoxExtendedProps;
-export {};
+export type BoxProps = PrimitiveProps<JSX.IntrinsicElements['div']>;

package/dist/lib/cascader/cascader.js

@@ -10,7 +10,7 @@ import { truncateStyle } from "../../constants/emotion.js";
 import { getSizeVariantState } from "../../utils/index.js";
 import { useControllableState } from "../../hooks/use-controllable-state.js";
 import { SvgLoader } from "../../components/svg-loader.js";
-import { createSxInterpolation } from "../../utils/stylesheet.js";
+import { Primitive } from "../primitive/primitive.js";
 import { Floating } from "../floating/floating/floating.js";
 import { FloatingTrigger } from "../floating/floating-trigger/floating-trigger.js";
 import { InputMask as ForwardRefInputMask } from "../input-mask/input-mask.js";
@@ -73,19 +73,16 @@ const Cascader = ({ ref, ..._props }) => {
     if (isNil(textVariant)) return {};
     return getTypographyVar(textVariant);
   };
-  const { sx: containerSx, ...restContainerProps } = containerProps ?? {};
   return /* @__PURE__ */ jsxs(
-    "div",
+    Primitive,
     {
-      ...restContainerProps,
-      css: [
-        {
-          display: "flex",
-          flexDirection: "column",
-          ...fullWidth ? { width: "100%" } : {}
-        },
-        createSxInterpolation(containerSx)
-      ],
+      ...containerProps,
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        ...fullWidth ? { width: "100%" } : {},
+        ...containerProps == null ? void 0 : containerProps.sx
+      },
       children: [
         /* @__PURE__ */ jsxs(
           Floating,

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

@@ -1,8 +1,9 @@
 import { HTMLAttributes, JSX, ReactNode } from 'react';
 import { Placement, UseFloatingOptions } from '@floating-ui/react';
-import { PropsWithSx, ShallowMerge, ToResponsiveProps } from '../../types';
+import { ShallowMerge, ToResponsiveProps } from '../../types';
 import { InputProps } from '../input';
 import { InputMaskProps, InputMaskResponsiveProps } from '../input-mask';
+import { PrimitiveProps } from '../primitive';
 export type CascaderResponsiveProps = InputMaskResponsiveProps;
 export type CascaderOptionValue = string | number;
 export interface CascaderOption {
@@ -47,7 +48,7 @@ interface CascaderExtendedProps extends ToResponsiveProps<CascaderResponsiveProp
     /** Helper text below the input */
     helperText?: string;
     /** Props for the container div */
-    containerProps?: PropsWithSx<JSX.IntrinsicElements['div']>;
+    containerProps?: PrimitiveProps<JSX.IntrinsicElements['div'], 'div'>;
     /** Props for the search input */
     inputProps?: InputProps;
     /** Whether component takes full width */

package/dist/lib/chip/chip.d.ts

@@ -1,2 +1,2 @@
 import { ChipProps } from './types';
-export declare const Chip: ({ children, ..._props }: ChipProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Chip: ({ children, ..._props }: ChipProps) => import("react/jsx-runtime").JSX.Element;

package/dist/lib/chip/chip.js

@@ -1,52 +1,56 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { getChipProps, getChipSizeState } from "./helpers.js";
 import { getColorShadesByVariant } from "../../utils/index.js";
-import { mediaQuery } from "../../theme/screens.js";
+import "lodash-es";
 import "../../theme/palette.js";
 import { getTypographyVar } from "../../theme/typography.js";
-import { createSxInterpolation } from "../../utils/stylesheet.js";
+import { Primitive } from "../primitive/primitive.js";
 const Chip = ({ children, ..._props }) => {
   const { sx, size, sm, md, lg, color = "green", ...rest } = getChipProps(_props);
   const { light, main } = getColorShadesByVariant(color);
   return /* @__PURE__ */ jsx(
-    "div",
+    Primitive,
     {
+      as: "div",
       ...rest,
-      css: [
-        {
-          width: "fit-content",
-          maxWidth: "100%",
-          display: "flex",
-          alignItems: "center",
-          backgroundColor: light,
-          borderWidth: 1,
-          borderColor: main,
-          color: main
+      sx: {
+        width: "fit-content",
+        maxWidth: "100%",
+        display: "flex",
+        alignItems: "center",
+        backgroundColor: light,
+        borderWidth: 1,
+        borderColor: main,
+        color: main,
+        ...createStyle({ size }),
+        ...sx,
+        sm: {
+          ...createStyle(sm),
+          ...sx == null ? void 0 : sx.sm
         },
-        createStyle({ size }),
-        {
-          [mediaQuery("sm")]: createStyle(sm),
-          [mediaQuery("md")]: createStyle(md),
-          [mediaQuery("lg")]: createStyle(lg)
+        md: {
+          ...createStyle(md),
+          ...sx == null ? void 0 : sx.md
         },
-        createSxInterpolation(sx)
-      ],
+        lg: {
+          ...createStyle(lg),
+          ...sx == null ? void 0 : sx.lg
+        }
+      },
       children
     }
   );
 };
 const createStyle = ({ size } = {}) => {
   const { inputSize, inputPaddingX, textVariant, rounded } = getChipSizeState(size);
-  return [
-    {
-      paddingLeft: inputPaddingX,
-      paddingRight: inputPaddingX,
-      minHeight: inputSize,
-      fontSize: textVariant ? getTypographyVar(textVariant).fontSize : void 0,
-      lineHeight: textVariant ? getTypographyVar(textVariant).lineHeight : void 0,
-      borderRadius: rounded
-    }
-  ];
+  return {
+    paddingLeft: inputPaddingX,
+    paddingRight: inputPaddingX,
+    minHeight: inputSize,
+    fontSize: textVariant ? getTypographyVar(textVariant).fontSize : void 0,
+    lineHeight: textVariant ? getTypographyVar(textVariant).lineHeight : void 0,
+    borderRadius: rounded
+  };
 };
 export {
   Chip

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

@@ -1,10 +1,11 @@
 import { JSX } from 'react';
-import { ColorVariant, PropsWithSx, ShallowMerge, SizeVariant, ToResponsiveProps } from '../../types';
+import { ColorVariant, ShallowMerge, SizeVariant, ToResponsiveProps } from '../../types';
+import { PrimitiveProps } from '../primitive';
 export interface ChipResponsiveProps {
     size?: SizeVariant;
 }
-type ChipExtendedProps = PropsWithSx<ToResponsiveProps<ChipResponsiveProps> & {
+type ChipExtendedProps = ToResponsiveProps<ChipResponsiveProps> & {
     color?: ColorVariant;
-}>;
-export type ChipProps = ShallowMerge<JSX.IntrinsicElements['div'], ChipExtendedProps>;
+};
+export type ChipProps = PrimitiveProps<ShallowMerge<JSX.IntrinsicElements['div'], ChipExtendedProps>>;
 export {};

package/dist/lib/container/README.md

@@ -1,6 +1,6 @@
 # Container
 
-Wrapper layout responsive giúp giới hạn chiều rộng nội dung theo breakpoint và tự động xử lý padding ngang. Component căn giữa nội dung trong viewport bằng cách tính padding hai bên theo breakpoint hiện tại, đồng thời hỗ trợ căn chỉnh vị trí để nội dung có thể tràn ra cạnh trái hoặc phải.
+Wrapper layout responsive giúp giới hạn chiều rộng nội dung theo breakpoint và tự động xử lý padding ngang. Component căn giữa nội dung trong viewport theo cấu hình layout nội bộ của design system.
 
 ## Import
 
@@ -12,13 +12,9 @@ import { Container } from '@janbox/storefront-ui';
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `position` | `ContainerPosition` | `"center"` | Kiểm soát căn chỉnh ngang và padding của container. `'center'` áp dụng padding đều hai bên, `'start'` bỏ padding trái (nội dung tràn ra cạnh trái), `'end'` bỏ padding phải (nội dung tràn ra cạnh phải). |
-| `sm` | `{ position?: ContainerPosition }` | - | Responsive override tại breakpoint `sm` (min-width: 768px). Nhận giá trị `position` để thay đổi căn chỉnh ở màn hình tablet. |
-| `md` | `{ position?: ContainerPosition }` | - | Responsive override tại breakpoint `md` (min-width: 1280px). Nhận giá trị `position` để thay đổi căn chỉnh ở màn hình desktop. |
-| `lg` | `{ position?: ContainerPosition }` | - | Responsive override tại breakpoint `lg` (min-width: 1680px). Nhận giá trị `position` để thay đổi căn chỉnh ở màn hình large desktop. |
-| `sx` | `ToResponsiveProps<StyledCSS>` | - | Escape hatch để truyền custom Emotion CSS vào wrapper div ngoài cùng. Hỗ trợ responsive keys (`sm`, `md`, `lg`). |
+| `sx` | `ToResponsiveProps<StyledCSS>` | - | Custom Emotion CSS. Hỗ trợ responsive keys (`sm`, `md`, `lg`). **Không nên override** `width`, `max-width`, `margin-left`, `margin-right`, `padding-left`, `padding-right` — các thuộc tính này do Container quản lý nội bộ. |
 | `children` | `React.ReactNode` | - | Nội dung render bên trong container. |
-| `...rest` | `JSX.IntrinsicElements['div']` | - | Tất cả HTML div attributes tiêu chuẩn (`className`, `style`, `onClick`, v.v.) được forward xuống div ngoài cùng. |
+| `...rest` | `JSX.IntrinsicElements['div']` | - | Tất cả HTML div attributes tiêu chuẩn (`className`, `style`, `onClick`, v.v.). |
 
 ## Examples
 
@@ -30,22 +26,15 @@ import { Container } from '@janbox/storefront-ui';
 </Container>
 ```
 
-### Căn trái (bleed left)
+### Custom style qua sx prop
 
 ```tsx
-<Container position="start">
-  {/* Bỏ padding trái — nội dung kéo dài ra cạnh viewport bên trái */}
-  <HeroImage />
+<Container sx={{ backgroundColor: '#f0f0f0', minHeight: 100 }}>
+  Page content with custom visual styles
 </Container>
 ```
 
-### Responsive position — căn giữa trên mobile, căn trái trên desktop
-
-```tsx
-<Container position="center" md={{ position: 'start' }}>
-  <SidebarPanel />
-</Container>
-```
+> Không dùng `sx` để override layout core của Container như `width`, `max-width`, `margin-left`, `margin-right`, `padding-left`, `padding-right`. Nếu cần layout khác, dùng wrapper component riêng thay vì thay đổi contract của Container.
 
 ## Dependencies
 

package/dist/lib/container/container.d.ts

@@ -1,2 +1,2 @@
 import { ContainerProps } from './types';
-export declare const Container: ({ children, ref, ..._props }: ContainerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Container: ({ children, ref, ..._props }: ContainerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/lib/container/container.js

@@ -1,93 +1,9 @@
-import { jsx } from "@emotion/react/jsx-runtime";
-import { isNil } from "lodash-es";
+import { jsx } from "react/jsx-runtime";
 import { getContainerProps } from "./helpers.js";
-import { breakpoint, mediaQuery } from "../../theme/screens.js";
-import "../../theme/palette.js";
-import { createSxInterpolation } from "../../utils/stylesheet.js";
-const CONTAINER_PADDING_VAR_NAME = "--container-padding";
-const CONTAINER_PADDING_VAR = `var(${CONTAINER_PADDING_VAR_NAME})`;
-const getContainerPaddingCSS = (position) => {
-  return isNil(position) ? {} : {
-    paddingLeft: position === "start" ? 0 : CONTAINER_PADDING_VAR,
-    paddingRight: position === "end" ? 0 : CONTAINER_PADDING_VAR
-  };
-};
-const CONTAINER_CONTENT_PADDING_VAR_NAME = "--container-content-padding";
-const CONTAINER_CONTENT_PADDING_VAR = `var(${CONTAINER_CONTENT_PADDING_VAR_NAME}, 0)`;
-const getContainerContentPaddingCSS = (position) => {
-  return isNil(position) ? {} : {
-    paddingLeft: position === "start" ? 0 : CONTAINER_CONTENT_PADDING_VAR,
-    paddingRight: position === "end" ? 0 : CONTAINER_CONTENT_PADDING_VAR
-  };
-};
+import { Primitive } from "../primitive/primitive.js";
 const Container = ({ children, ref, ..._props }) => {
-  const { position, sm, md, lg, sx, ...rest } = getContainerProps(_props);
-  const css = [
-    {
-      width: "100%"
-    },
-    createSxInterpolation(sx)
-  ];
-  return /* @__PURE__ */ jsx("div", { css, ...rest, ref, children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      css: [
-        {
-          width: "100%",
-          [CONTAINER_PADDING_VAR_NAME]: "0px",
-          ...getContainerPaddingCSS(position)
-        },
-        {
-          [mediaQuery("sm")]: {
-            width: "100%",
-            [CONTAINER_PADDING_VAR_NAME]: `calc((100% - ${breakpoint.sm.minWidth}px) / 2)`,
-            ...getContainerPaddingCSS(sm == null ? void 0 : sm.position)
-          },
-          [mediaQuery("md")]: {
-            [CONTAINER_PADDING_VAR_NAME]: `calc((100% - ${breakpoint.md.minWidth}px) / 2)`,
-            ...getContainerPaddingCSS(md == null ? void 0 : md.position)
-          },
-          [mediaQuery("lg")]: {
-            [CONTAINER_PADDING_VAR_NAME]: `calc((100% - ${breakpoint.lg.minWidth}px) / 2)`,
-            ...getContainerPaddingCSS(lg == null ? void 0 : lg.position)
-          }
-        }
-      ],
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          css: [
-            {
-              width: "100%",
-              [CONTAINER_CONTENT_PADDING_VAR_NAME]: `${breakpoint.xs.padding}px`,
-              ...getContainerContentPaddingCSS(position)
-            },
-            {
-              [mediaQuery("sm")]: [
-                {
-                  [CONTAINER_CONTENT_PADDING_VAR_NAME]: `${breakpoint.sm.padding}px`,
-                  ...getContainerContentPaddingCSS(sm == null ? void 0 : sm.position)
-                }
-              ],
-              [mediaQuery("md")]: [
-                {
-                  [CONTAINER_CONTENT_PADDING_VAR_NAME]: `${breakpoint.md.padding}px`,
-                  ...getContainerContentPaddingCSS(md == null ? void 0 : md.position)
-                }
-              ],
-              [mediaQuery("lg")]: [
-                {
-                  [CONTAINER_CONTENT_PADDING_VAR_NAME]: `${breakpoint.lg.padding}px`,
-                  ...getContainerContentPaddingCSS(lg == null ? void 0 : lg.position)
-                }
-              ]
-            }
-          ],
-          children
-        }
-      )
-    }
-  ) });
+  const props = getContainerProps(_props);
+  return /* @__PURE__ */ jsx(Primitive, { ...props, ref, children });
 };
 export {
   Container

package/dist/lib/container/helpers.js

@@ -1,6 +1,29 @@
+import { breakpoint } from "../../theme/screens.js";
+import "../../theme/palette.js";
 import { mergeComponentProps } from "../../utils/index.js";
 const defaultProps = {
-  position: "center"
+  sx: {
+    width: "100%",
+    marginLeft: "auto",
+    marginRight: "auto",
+    paddingLeft: breakpoint.xs.padding,
+    paddingRight: breakpoint.xs.padding,
+    sm: {
+      maxWidth: breakpoint.sm.minWidth,
+      paddingLeft: breakpoint.sm.padding,
+      paddingRight: breakpoint.sm.padding
+    },
+    md: {
+      maxWidth: breakpoint.md.minWidth,
+      paddingLeft: breakpoint.md.padding,
+      paddingRight: breakpoint.md.padding
+    },
+    lg: {
+      maxWidth: breakpoint.lg.minWidth,
+      paddingLeft: breakpoint.lg.padding,
+      paddingRight: breakpoint.lg.padding
+    }
+  }
 };
 const getContainerProps = (extended) => {
   return mergeComponentProps(defaultProps, extended);

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

@@ -1,9 +1,3 @@
 import { JSX } from 'react';
-import { PropsWithSx, ShallowMerge, ToResponsiveProps } from '../../types';
-export type ContainerPosition = 'center' | 'start' | 'end';
-export type ContainerResponsiveProps = {
-    position?: ContainerPosition;
-};
-type ContainerExtendedProps = PropsWithSx<ToResponsiveProps<ContainerResponsiveProps>>;
-export type ContainerProps = ShallowMerge<JSX.IntrinsicElements['div'], ContainerExtendedProps>;
-export {};
+import { PrimitiveProps } from '../primitive';
+export type ContainerProps = PrimitiveProps<JSX.IntrinsicElements['div'], 'div'>;

package/dist/lib/flexbox/README.md

@@ -1,6 +1,6 @@
 # Flexbox
 
-A layout component that renders a `div` with `display: flex` applied by default. It supports responsive `sx` prop overrides and an optional `container` prop that applies the project's responsive container styles for page-level layout use cases.
+A layout component that renders a `div` with `display: flex` applied by default. It supports responsive `sx` prop overrides.
 
 ## Import
 
@@ -12,7 +12,6 @@ import { Flexbox } from '@janbox/storefront-ui';
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `container` | `boolean` | undefined (false) | When true, applies the global `containerStyle` (responsive padding and max-width) on top of the flex display — useful for page-level section wrappers. |
 | `sx` | `ToResponsiveProps<StyledCSS>` | { flexDirection: 'row', alignItems: 'flex-start', justifyContent: 'flex-start' } | Responsive style overrides via the Emotion-powered sx prop. Supports base styles plus `sm`, `md`, and `lg` breakpoint keys. Merged on top of the component defaults (`flexDirection: 'row'`, `alignItems: 'flex-start'`, `justifyContent: 'flex-start'`). |
 | `children` | `React.ReactNode` | - | Child elements rendered inside the flex container — typically `FlexItem` components. |
 | `ref` | `React.Ref<HTMLDivElement>` | - | Forwarded ref to the underlying `div` element. |

package/dist/lib/flexbox/flexbox/flexbox.d.ts

@@ -1,2 +1,2 @@
 import { FlexboxProps } from './types';
-export declare const Flexbox: ({ children, container, ref, ..._props }: FlexboxProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Flexbox: ({ children, ref, ..._props }: FlexboxProps) => import("react/jsx-runtime").JSX.Element;

package/dist/lib/flexbox/flexbox/flexbox.js

@@ -1,8 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { getFlexboxProps } from "./helpers.js";
-import { containerStyle } from "../../../constants/emotion.js";
 import { Primitive } from "../../primitive/primitive.js";
-const Flexbox = ({ children, container, ref, ..._props }) => {
+const Flexbox = ({ children, ref, ..._props }) => {
   const { sx = {}, ...rest } = getFlexboxProps(_props);
   return /* @__PURE__ */ jsx(
     Primitive,
@@ -10,7 +9,6 @@ const Flexbox = ({ children, container, ref, ..._props }) => {
       ...rest,
       sx: {
         display: "flex",
-        ...container ? containerStyle : {},
         ...sx,
         sm: { ...sx.sm },
         md: { ...sx.md },

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

@@ -1,7 +1,3 @@
 import { JSX } from 'react';
-import { PropsWithSx, ShallowMerge } from '../../../types';
-interface FlexboxExtendedProps {
-    container?: boolean;
-}
-export type FlexboxProps = ShallowMerge<JSX.IntrinsicElements['div'], PropsWithSx<FlexboxExtendedProps>>;
-export {};
+import { PrimitiveProps } from '../../primitive';
+export type FlexboxProps = PrimitiveProps<JSX.IntrinsicElements['div'], 'div'>;

package/dist/lib/grid/cell/README.md

@@ -0,0 +1,66 @@
+# Cell
+
+A CSS Grid child component that supports configurable column spans. It is intended to be used inside Grid.
+
+## Import
+
+```tsx
+import { Cell } from '@janbox/storefront-ui';
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `colSpan` | `number` | - | Number of grid columns the cell should span. Generates `grid-column: span colSpan`. Supports responsive variants via sm/md/lg. |
+| `sm` | `CellResponsiveProps` | - | Responsive overrides applied at the sm breakpoint (≥768px). Accepts `{ colSpan?: number }`. |
+| `md` | `CellResponsiveProps` | - | Responsive overrides applied at the md breakpoint (≥1280px). Accepts `{ colSpan?: number }`. |
+| `lg` | `CellResponsiveProps` | - | Responsive overrides applied at the lg breakpoint (≥1680px). Accepts `{ colSpan?: number }`. |
+| `sx` | `ToResponsiveProps<StyledCSS>` | - | Escape-hatch for inline Emotion styles. Supports responsive keys (sm, md, lg) alongside base styles. |
+| `children` | `React.ReactNode` | - | Cell content. |
+| `ref` | `React.Ref<HTMLDivElement>` | - | Forwarded ref to the underlying div element. |
+
+## Examples
+
+### Span two columns
+
+```tsx
+<Grid cols={3}>
+  <Cell colSpan={2}>Span 2 columns</Cell>
+  <Cell>Cell 2</Cell>
+  <Cell>Cell 3</Cell>
+</Grid>
+```
+
+### Responsive spans
+
+```tsx
+<Grid cols={4}>
+  <Cell colSpan={4} sm={{ colSpan: 2 }} md={{ colSpan: 1 }}>
+    Responsive item
+  </Cell>
+</Grid>
+```
+
+### Custom styles
+
+```tsx
+<Cell colSpan={2} sx={{ padding: 12, backgroundColor: 'var(--color-neutral-100)' }}>
+  Styled cell
+</Cell>
+```
+
+## Related Components
+
+- [Grid](../grid/README.md)
+- [Primitive](../../primitive/README.md)
+
+## Dependencies
+
+- lodash-es
+
+## See Also
+
+- [Component Source](./cell.tsx)
+- [Storybook Stories](./cell.stories.tsx)
+- [Main README](../../../README.md)

package/dist/lib/grid/{README.md → grid/README.md}

@@ -16,7 +16,6 @@ import { Grid } from '@janbox/storefront-ui';
 | `sm` | `GridResponsiveProps` | - | Responsive overrides applied at the sm breakpoint (≥768px). Accepts `{ cols?: number }`. |
 | `md` | `GridResponsiveProps` | - | Responsive overrides applied at the md breakpoint (≥1280px). Accepts `{ cols?: number }`. |
 | `lg` | `GridResponsiveProps` | - | Responsive overrides applied at the lg breakpoint (≥1680px). Accepts `{ cols?: number }`. |
-| `container` | `boolean` | false | When true, applies the shared responsive container styles (padding and max-width) from `containerStyle`. |
 | `sx` | `ToResponsiveProps<StyledCSS>` | - | Escape-hatch for inline Emotion styles. Supports responsive keys (sm, md, lg) alongside base styles. |
 | `children` | `React.ReactNode` | - | Grid children, typically Cell components. |
 | `ref` | `React.Ref<HTMLDivElement>` | - | Forwarded ref to the underlying div element. |
@@ -48,7 +47,7 @@ import { Grid } from '@janbox/storefront-ui';
 ### Responsive columns (1 on mobile, 2 on tablet, 4 on desktop)
 
 ```tsx
-<Grid cols={1} sm={{ cols: 2 }} md={{ cols: 4 }} container>
+<Grid cols={1} sm={{ cols: 2 }} md={{ cols: 4 }}>
   <Cell>Item 1</Cell>
   <Cell>Item 2</Cell>
   <Cell>Item 3</Cell>
@@ -58,8 +57,8 @@ import { Grid } from '@janbox/storefront-ui';
 
 ## Related Components
 
-- [Cell](./cell/README.md)
-- [Primitive](../primitive/README.md)
+- [Cell](../cell/README.md)
+- [Primitive](../../primitive/README.md)
 
 ## Dependencies
 
@@ -67,6 +66,6 @@ import { Grid } from '@janbox/storefront-ui';
 
 ## See Also
 
-- [Component Source](./index.ts)
+- [Component Source](./grid.tsx)
 - [Storybook Stories](./grid.stories.tsx)
-- [Main README](../../README.md)
+- [Main README](../../../README.md)

package/dist/lib/grid/grid/grid.js

@@ -1,18 +1,16 @@
 import { jsx } from "react/jsx-runtime";
 import { isNil } from "lodash-es";
 import { getGridProps } from "./helpers.js";
-import { containerStyle } from "../../../constants/emotion.js";
 import { Primitive } from "../../primitive/primitive.js";
 const GRID_MINIMUM_COLS = 1;
 const GRID_MAXIMUM_COLS = 24;
 const Grid = ({ children, ref, ..._props }) => {
-  const { cols, sm, md, lg, container, sx = {}, ...rest } = getGridProps(_props);
+  const { cols, sm, md, lg, sx = {}, ...rest } = getGridProps(_props);
   return /* @__PURE__ */ jsx(
     Primitive,
     {
       sx: {
         display: "grid",
-        ...container ? containerStyle : {},
         ...createStyle({ cols }),
         ...sx,
         sm: { ...createStyle(sm), ...sx.sm },

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

@@ -1,10 +1,9 @@
 import { JSX } from 'react';
-import { PropsWithSx, ShallowMerge, ToResponsiveProps } from '../../../types';
+import { ShallowMerge, ToResponsiveProps } from '../../../types';
+import { PrimitiveProps } from '../../primitive';
 export interface GridResponsiveProps {
     cols?: number;
 }
-type GridExtendedProps = PropsWithSx<ToResponsiveProps<GridResponsiveProps> & {
-    container?: boolean;
-}>;
-export type GridProps = ShallowMerge<JSX.IntrinsicElements['div'], GridExtendedProps>;
+type GridExtendedProps = ToResponsiveProps<GridResponsiveProps>;
+export type GridProps = PrimitiveProps<ShallowMerge<JSX.IntrinsicElements['div'], GridExtendedProps>>;
 export {};

package/dist/lib/table/table/table.d.ts

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

package/dist/lib/table/table/table.js

@@ -1,20 +1,21 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import "lodash-es";
 import { getColorVar } from "../../../theme/palette.js";
-import { createSxInterpolation } from "../../../utils/stylesheet.js";
+import { Primitive } from "../../primitive/primitive.js";
 const Table = ({ children, sx, ...props }) => {
   return /* @__PURE__ */ jsx(
-    "table",
+    Primitive,
     {
-      css: createSxInterpolation({
+      ...props,
+      sx: {
         width: "100%",
         borderTopLeftRadius: "0.5rem",
         borderTopRightRadius: "0.5rem",
         overflow: "hidden",
         backgroundColor: getColorVar("surface.default"),
         ...sx
-      }),
-      ...props,
+      },
+      as: "table",
       children
     }
   );

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

@@ -1,3 +1,3 @@
 import { JSX } from 'react';
-import { PropsWithSx } from '../../../types';
-export type TableProps = PropsWithSx<JSX.IntrinsicElements['table']>;
+import { PrimitiveProps } from '../../primitive';
+export type TableProps = PrimitiveProps<JSX.IntrinsicElements['table'], 'table'>;

package/dist/lib/table/table-footer/table-footer.d.ts

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

package/dist/lib/table/table-footer/table-footer.js

@@ -1,7 +1,7 @@
-import { jsx } from "@emotion/react/jsx-runtime";
-import { createSxInterpolation } from "../../../utils/stylesheet.js";
-const TableFooter = ({ sx, children, ...props }) => {
-  return /* @__PURE__ */ jsx("tfoot", { css: createSxInterpolation(sx), ...props, children });
+import { jsx } from "react/jsx-runtime";
+import { Primitive } from "../../primitive/primitive.js";
+const TableFooter = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsx(Primitive, { ...props, as: "tfoot", children });
 };
 export {
   TableFooter

package/dist/lib/table/table-footer/types.d.ts

@@ -1,3 +1,3 @@
 import { JSX } from 'react';
-import { PropsWithSx } from '../../../types';
-export type TableFooterProps = PropsWithSx<JSX.IntrinsicElements['tfoot']>;
+import { PrimitiveProps } from '../../primitive';
+export type TableFooterProps = PrimitiveProps<JSX.IntrinsicElements['tfoot'], 'tfoot'>;

package/package.json

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