@janbox/storefront-ui 3.0.0 → 3.0.2

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/components/svg-loader.d.ts

@@ -1,5 +1,6 @@
 import { JSX } from 'react';
-export type SvgLoaderProps = JSX.IntrinsicElements['svg'] & {
+import { PropsWithSx } from '../types';
+export type SvgLoaderProps = PropsWithSx<JSX.IntrinsicElements['svg'] & {
     source: string;
-};
-export declare const SvgLoader: import('react').ForwardRefExoticComponent<Omit<SvgLoaderProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+}>;
+export declare const SvgLoader: ({ sx, source, ref, ...props }: SvgLoaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/svg-loader.js

@@ -1,14 +1,19 @@
 import { jsx, Fragment } from "react/jsx-runtime";
-import { forwardRef, useId, useMemo, cloneElement } from "react";
+import { useId, useMemo, cloneElement } from "react";
 import { parseSvgString } from "../utils/common.js";
-const SvgLoader = forwardRef(({ source, ...props }, ref) => {
+import { Stylesheet } from "../lib/stylesheet/stylesheet.js";
+const SvgLoader = ({ sx, source, ref, ...props }) => {
   const uniqueId = useId();
   const jsxSvg = useMemo(() => parseSvgString(source, uniqueId), [source, uniqueId]);
-  return /* @__PURE__ */ jsx(Fragment, { children: !!jsxSvg && cloneElement(jsxSvg, {
-    ...props,
-    ref
-  }) });
-});
+  return /* @__PURE__ */ jsx(Stylesheet, { children: ({ cx, css }) => {
+    if (!jsxSvg) return /* @__PURE__ */ jsx(Fragment, {});
+    return cloneElement(jsxSvg, {
+      ...props,
+      className: cx(css(sx), props.className),
+      ref
+    });
+  } });
+};
 export {
   SvgLoader
 };

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/index.js

@@ -82,6 +82,7 @@ import { Select } from "./lib/select/select.js";
 import { StarRating } from "./lib/star-rating/star-rating.js";
 import { Step } from "./lib/stepper/step.js";
 import { Stepper } from "./lib/stepper/stepper.js";
+import { Stylesheet } from "./lib/stylesheet/stylesheet.js";
 import { SuspenseQuery } from "./lib/suspense-query/suspense-query.js";
 import { Swiper } from "./lib/swiper/swiper/swiper.js";
 import { SwiperSlide } from "./lib/swiper/swiper-slide/swiper-slide.js";
@@ -229,6 +230,7 @@ export {
   StarRating,
   Step,
   Stepper,
+  Stylesheet,
   SuspenseQuery,
   Swiper,
   SwiperSlide,

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

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

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

@@ -1,34 +1,45 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useRef } from "react";
 import { motion } from "motion/react";
 import { getAccordionContentProps } from "./helpers.js";
 import { useAccordionContext } from "../accordion/helpers.js";
-import { createSxInterpolation } from "../../../utils/stylesheet.js";
+import { Stylesheet } from "../../stylesheet/stylesheet.js";
 import { useAccordionGroupContext } from "../accordion-group/helpers.js";
+import { Primitive } from "../../primitive/primitive.js";
 const AccordionContent = ({ children, ref, ..._props }) => {
   const { accordionContentProps: accordionContentPropsByGroup = {} } = useAccordionGroupContext();
-  const { sx, containerProps, ...props } = getAccordionContentProps(accordionContentPropsByGroup, _props);
+  const { containerProps, ...props } = getAccordionContentProps(accordionContentPropsByGroup, _props);
   const { open } = useAccordionContext();
   const defaultOpenRef = useRef(open);
-  const css = [
-    {
-      width: "100%"
-    },
-    createSxInterpolation(sx)
-  ];
   const initial = defaultOpenRef.current ? { height: "auto", opacity: 1 } : { height: 0, opacity: 0 };
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Stylesheet, { children: ({ cx, css }) => /* @__PURE__ */ jsx(
     motion.div,
     {
       initial,
       animate: open ? { height: "auto", opacity: 1 } : { height: 0, opacity: 0 },
       transition: { duration: 0.3 },
-      css: { overflow: "hidden", width: "100%" },
       ...containerProps,
+      className: cx(
+        css({
+          overflow: "hidden",
+          width: "100%"
+        }),
+        containerProps == null ? void 0 : containerProps.className
+      ),
       ref,
-      children: /* @__PURE__ */ jsx("div", { ...props, css, children })
+      children: /* @__PURE__ */ jsx(
+        Primitive,
+        {
+          ...props,
+          sx: {
+            width: "100%",
+            ...props.sx
+          },
+          children
+        }
+      )
     }
-  );
+  ) });
 };
 export {
   AccordionContent

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