@janbox/storefront-ui 4.0.1 → 4.0.3

package/README.md

@@ -478,7 +478,7 @@ Mọi component đều có README riêng với API reference, examples, và usag
 - [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)
+- [Flexbox](./dist/lib/flexbox/flexbox/README.md)
 - [Floating](./dist/lib/floating/README.md)
 - [FormHelperText](./dist/lib/form-helper-text/README.md)
 - [FormLabel](./dist/lib/form-label/README.md)

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

@@ -3,8 +3,8 @@ import { useRef } from "react";
 import { motion } from "motion/react";
 import { getAccordionContentProps } from "./helpers.js";
 import { useAccordionContext } from "../accordion/helpers.js";
-import { Stylesheet } from "../../stylesheet/stylesheet.js";
 import { useAccordionGroupContext } from "../accordion-group/helpers.js";
+import { Stylesheet } from "../../stylesheet/stylesheet.js";
 import { Primitive } from "../../primitive/primitive.js";
 const AccordionContent = ({ children, ref, ..._props }) => {
   const { accordionContentProps: accordionContentPropsByGroup = {} } = useAccordionGroupContext();

package/dist/lib/badge/badge.js

@@ -4,11 +4,13 @@ import { useFloating, autoUpdate, offset, hide, useMergeRefs, FloatingPortal } f
 import { getColorShadesByVariant } from "../../utils/index.js";
 import { cloneElement } from "react";
 import { FLOATING_Z_INDEX } from "../../theme/index.js";
+import { usePortalContainer } from "../../theme/provider.js";
 import { Primitive } from "../primitive/primitive.js";
 import { getTypographyVar } from "../../theme/typography.js";
 const Badge = ({ color = "red", content, offset: offset$1 = 0, children }) => {
   var _a;
   const { main, contrast } = getColorShadesByVariant(color);
+  const portalRoot = usePortalContainer();
   const {
     floatingStyles,
     refs: { setFloating, setReference },
@@ -35,7 +37,7 @@ const Badge = ({ color = "red", content, offset: offset$1 = 0, children }) => {
       ...children.props,
       ref: mergedRefs
     }),
-    context.open && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(
+    context.open && /* @__PURE__ */ jsx(FloatingPortal, { ...portalRoot && { root: portalRoot }, children: /* @__PURE__ */ jsx(
       "div",
       {
         style: {

package/dist/lib/box/README.md

@@ -11,7 +11,11 @@ import { Box } from '@janbox/storefront-ui';
 ## Props
 
 | Prop | Type | Default | Description |
-|------|------|---------|-------------|
+| ------ | ------ | ------- | ----------- |
+| `hidden` | `boolean` | - | Ẩn Box (`display: none`) hoặc hiển thị (`display: block`). Hỗ trợ responsive qua `sm`, `md`, `lg`. |
+| `sm` | `BoxResponsiveProps` | - | Override responsive props tại breakpoint `sm` (768px). |
+| `md` | `BoxResponsiveProps` | - | Override responsive props tại breakpoint `md` (1280px). |
+| `lg` | `BoxResponsiveProps` | - | Override responsive props tại breakpoint `lg` (1680px). |
 | `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. |
@@ -44,6 +48,15 @@ import { Box } from '@janbox/storefront-ui';
 </Box>
 ```
 
+### Responsive hidden
+
+```tsx
+{/* Ẩn trên mobile, hiện từ md trở lên */}
+<Box hidden md={{ hidden: false }}>
+  Desktop only content
+</Box>
+```
+
 ## Related Components
 
 - [Primitive](../primitive/README.md)

package/dist/lib/box/box.js

@@ -2,22 +2,26 @@ import { jsx } from "react/jsx-runtime";
 import { getBoxProps } from "./helpers.js";
 import { Primitive } from "../primitive/primitive.js";
 const Box = ({ children, ref, ..._props }) => {
-  const { sx = {}, ...rest } = getBoxProps(_props);
+  const { hidden, sm, md, lg, sx = {}, ...rest } = getBoxProps(_props);
   return /* @__PURE__ */ jsx(
     Primitive,
     {
       ...rest,
       sx: {
+        ...createStyle({ hidden }),
         ...sx,
-        sm: { ...sx.sm },
-        md: { ...sx.md },
-        lg: { ...sx.lg }
+        sm: { ...createStyle(sm), ...sx.sm },
+        md: { ...createStyle(md), ...sx.md },
+        lg: { ...createStyle(lg), ...sx.lg }
       },
       ref,
       children
     }
   );
 };
+const createStyle = ({ hidden } = {}) => ({
+  display: hidden ? "none" : "block"
+});
 export {
   Box
 };

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

@@ -1,3 +1,9 @@
 import { JSX } from 'react';
 import { PrimitiveProps } from '../primitive';
-export type BoxProps = PrimitiveProps<JSX.IntrinsicElements['div']>;
+import { ShallowMerge, ToResponsiveProps } from '../../types';
+export interface BoxResponsiveProps {
+    hidden?: boolean;
+}
+type BoxExtendedProps = ToResponsiveProps<BoxResponsiveProps>;
+export type BoxProps = PrimitiveProps<ShallowMerge<JSX.IntrinsicElements['div'], BoxExtendedProps>, 'div'>;
+export {};

package/dist/lib/container/README.md

@@ -11,7 +11,11 @@ import { Container } from '@janbox/storefront-ui';
 ## Props
 
 | Prop | Type | Default | Description |
-|------|------|---------|-------------|
+| ------ | ------ | ------- | ----------- |
+| `hidden` | `boolean` | - | Ẩn Container (`display: none`) hoặc hiển thị (`display: block`). Hỗ trợ responsive qua `sm`, `md`, `lg`. |
+| `sm` | `ContainerResponsiveProps` | - | Override responsive props tại breakpoint `sm` (768px). |
+| `md` | `ContainerResponsiveProps` | - | Override responsive props tại breakpoint `md` (1280px). |
+| `lg` | `ContainerResponsiveProps` | - | Override responsive props tại breakpoint `lg` (1680px). |
 | `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.). |
@@ -34,6 +38,15 @@ import { Container } from '@janbox/storefront-ui';
 </Container>
 ```
 
+### Responsive hidden
+
+```tsx
+{/* Ẩn trên mobile, hiện từ md trở lên */}
+<Container hidden md={{ hidden: false }}>
+  Desktop only section
+</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.js

@@ -2,9 +2,26 @@ import { jsx } from "react/jsx-runtime";
 import { getContainerProps } from "./helpers.js";
 import { Primitive } from "../primitive/primitive.js";
 const Container = ({ children, ref, ..._props }) => {
-  const props = getContainerProps(_props);
-  return /* @__PURE__ */ jsx(Primitive, { ...props, ref, children });
+  const { hidden, sm, md, lg, sx = {}, ...rest } = getContainerProps(_props);
+  return /* @__PURE__ */ jsx(
+    Primitive,
+    {
+      ...rest,
+      sx: {
+        ...createStyle({ hidden }),
+        ...sx,
+        sm: { ...createStyle(sm), ...sx.sm },
+        md: { ...createStyle(md), ...sx.md },
+        lg: { ...createStyle(lg), ...sx.lg }
+      },
+      ref,
+      children
+    }
+  );
 };
+const createStyle = ({ hidden } = {}) => ({
+  display: hidden ? "none" : "block"
+});
 export {
   Container
 };

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

@@ -1,3 +1,9 @@
 import { JSX } from 'react';
 import { PrimitiveProps } from '../primitive';
-export type ContainerProps = PrimitiveProps<JSX.IntrinsicElements['div'], 'div'>;
+import { ShallowMerge, ToResponsiveProps } from '../../types';
+export interface ContainerResponsiveProps {
+    hidden?: boolean;
+}
+type ContainerExtendedProps = ToResponsiveProps<ContainerResponsiveProps>;
+export type ContainerProps = PrimitiveProps<ShallowMerge<JSX.IntrinsicElements['div'], ContainerExtendedProps>, 'div'>;
+export {};

package/dist/lib/flexbox/flex-item/README.md

@@ -0,0 +1,53 @@
+# FlexItem
+
+A flex child component intended to be used inside Flexbox. Constrains content to `max-width: 100%` by default and supports `hidden` for responsive visibility control.
+
+## Import
+
+```tsx
+import { FlexItem } from '@janbox/storefront-ui';
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+| ------ | ------ | ------- | ----------- |
+| `hidden` | `boolean` | - | Ẩn FlexItem (`display: none`) hoặc hiển thị (`display: block`). Hỗ trợ responsive qua `sm`, `md`, `lg`. |
+| `sm` | `FlexItemResponsiveProps` | - | Responsive overrides applied at the sm breakpoint (≥768px). Accepts `{ hidden?: boolean }`. |
+| `md` | `FlexItemResponsiveProps` | - | Responsive overrides applied at the md breakpoint (≥1280px). Accepts `{ hidden?: boolean }`. |
+| `lg` | `FlexItemResponsiveProps` | - | Responsive overrides applied at the lg breakpoint (≥1680px). Accepts `{ hidden?: boolean }`. |
+| `sx` | `ToResponsiveProps<StyledCSS>` | - | Custom Emotion CSS. Hỗ trợ responsive keys (`sm`, `md`, `lg`). |
+| `children` | `React.ReactNode` | - | Nội dung render bên trong flex item. |
+| `ref` | `React.Ref<HTMLDivElement>` | - | Forwarded ref to the underlying div element. |
+| `...rest` | `JSX.IntrinsicElements['div']` | - | Tất cả HTML div attributes tiêu chuẩn. |
+
+## Examples
+
+### Basic FlexItem
+
+```tsx
+<Flexbox sx={{ gap: 8 }}>
+  <FlexItem>Item 1</FlexItem>
+  <FlexItem>Item 2</FlexItem>
+</Flexbox>
+```
+
+### Responsive hidden
+
+```tsx
+{/* Ẩn trên mobile, hiện từ md trở lên */}
+<Flexbox sx={{ gap: 8 }}>
+  <FlexItem>Always visible</FlexItem>
+  <FlexItem hidden md={{ hidden: false }}>Desktop only</FlexItem>
+</Flexbox>
+```
+
+## Related Components
+
+- [Flexbox](../flexbox/README.md)
+- [Primitive](../../primitive/README.md)
+
+## See Also
+
+- [Component Source](./flex-item.tsx)
+- [Main README](../../../README.md)

package/dist/lib/flexbox/flex-item/flex-item.js

@@ -2,13 +2,17 @@ import { jsx } from "react/jsx-runtime";
 import { getFlexItemProps } from "./helpers.js";
 import { Primitive } from "../../primitive/primitive.js";
 const FlexItem = ({ children, ref, ...rest }) => {
-  const { sx, ...props } = getFlexItemProps(rest);
+  const { hidden, sm, md, lg, sx, ...props } = getFlexItemProps(rest);
   return /* @__PURE__ */ jsx(
     Primitive,
     {
       sx: {
         maxWidth: "100%",
-        ...sx
+        ...createStyle({ hidden }),
+        ...sx,
+        sm: { ...createStyle(sm), ...sx == null ? void 0 : sx.sm },
+        md: { ...createStyle(md), ...sx == null ? void 0 : sx.md },
+        lg: { ...createStyle(lg), ...sx == null ? void 0 : sx.lg }
       },
       ...props,
       ref,
@@ -16,6 +20,9 @@ const FlexItem = ({ children, ref, ...rest }) => {
     }
   );
 };
+const createStyle = ({ hidden } = {}) => ({
+  display: hidden ? "none" : "block"
+});
 export {
   FlexItem
 };

package/dist/lib/flexbox/flex-item/types.d.ts

@@ -1,3 +1,9 @@
 import { JSX } from 'react';
 import { PrimitiveProps } from '../../primitive';
-export type FlexItemProps = PrimitiveProps<JSX.IntrinsicElements['div'], 'div'>;
+import { ShallowMerge, ToResponsiveProps } from '../../../types';
+export interface FlexItemResponsiveProps {
+    hidden?: boolean;
+}
+type FlexItemExtendedProps = ToResponsiveProps<FlexItemResponsiveProps>;
+export type FlexItemProps = PrimitiveProps<ShallowMerge<JSX.IntrinsicElements['div'], FlexItemExtendedProps>, 'div'>;
+export {};

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

@@ -11,7 +11,11 @@ import { Flexbox } from '@janbox/storefront-ui';
 ## Props
 
 | Prop | Type | Default | Description |
-|------|------|---------|-------------|
+| ------ | ------ | ------- | ----------- |
+| `hidden` | `boolean` | - | Ẩn Flexbox (`display: none`) hoặc hiển thị (`display: flex`). Hỗ trợ responsive qua `sm`, `md`, `lg`. |
+| `sm` | `FlexboxResponsiveProps` | - | Responsive overrides applied at the sm breakpoint (≥768px). Accepts `{ hidden?: boolean }`. |
+| `md` | `FlexboxResponsiveProps` | - | Responsive overrides applied at the md breakpoint (≥1280px). Accepts `{ hidden?: boolean }`. |
+| `lg` | `FlexboxResponsiveProps` | - | Responsive overrides applied at the lg breakpoint (≥1680px). Accepts `{ hidden?: boolean }`. |
 | `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. |
@@ -47,12 +51,22 @@ import { Flexbox } from '@janbox/storefront-ui';
 </Flexbox>
 ```
 
+### Responsive hidden
+
+```tsx
+{/* Ẩn trên mobile, hiện từ md trở lên */}
+<Flexbox hidden md={{ hidden: false }} sx={{ gap: 16 }}>
+  <FlexItem>Desktop only</FlexItem>
+</Flexbox>
+```
+
 ## Related Components
 
-- [Primitive](../primitive/README.md)
+- [FlexItem](../flex-item/README.md)
+- [Primitive](../../primitive/README.md)
 
 ## See Also
 
 - [Component Source](./index.ts)
-- [Storybook Stories](./flexbox.stories.tsx)
-- [Main README](../../README.md)
+- [Storybook Stories](../flexbox.stories.tsx)
+- [Main README](../../../README.md)

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

@@ -2,23 +2,27 @@ import { jsx } from "react/jsx-runtime";
 import { getFlexboxProps } from "./helpers.js";
 import { Primitive } from "../../primitive/primitive.js";
 const Flexbox = ({ children, ref, ..._props }) => {
-  const { sx = {}, ...rest } = getFlexboxProps(_props);
+  var _a, _b, _c;
+  const { hidden, sm, md, lg, ...rest } = getFlexboxProps(_props);
   return /* @__PURE__ */ jsx(
     Primitive,
     {
       ...rest,
       sx: {
-        display: "flex",
-        ...sx,
-        sm: { ...sx.sm },
-        md: { ...sx.md },
-        lg: { ...sx.lg }
+        ...createStyle({ hidden }),
+        ...rest.sx,
+        sm: { ...createStyle(sm), ...(_a = rest.sx) == null ? void 0 : _a.sm },
+        md: { ...createStyle(md), ...(_b = rest.sx) == null ? void 0 : _b.md },
+        lg: { ...createStyle(lg), ...(_c = rest.sx) == null ? void 0 : _c.lg }
       },
       ref,
       children
     }
   );
 };
+const createStyle = ({ hidden } = {}) => ({
+  display: hidden ? "none" : "flex"
+});
 export {
   Flexbox
 };

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

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

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

@@ -5,6 +5,7 @@ import { useFloatingContext } from "../floating/helpers.js";
 import { FLOATING_Z_INDEX } from "../../../theme/index.js";
 import { useIsHydrated } from "../../../hooks/use-is-hydrated/index.js";
 import { createSxInterpolation } from "../../../utils/stylesheet.js";
+import { usePortalContainer } from "../../../theme/provider.js";
 const FloatingContent = ({
   style,
   floatingPortalProps,
@@ -17,7 +18,10 @@ const FloatingContent = ({
   const { getFloatingProps, context } = useFloatingContext();
   const mergedRefs = useMergeRefs([context.refs.setFloating, ref]);
   const isHydrated = useIsHydrated();
-  return /* @__PURE__ */ jsx(AnimatePresence, { children: context.open && isHydrated && /* @__PURE__ */ jsx(FloatingPortal, { root: document.body, ...floatingPortalProps, children: /* @__PURE__ */ jsx(
+  const portalRoot = usePortalContainer();
+  const { root = portalRoot, ...portalProps } = floatingPortalProps ?? {};
+  const resolvedRoot = root || void 0;
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: context.open && isHydrated && /* @__PURE__ */ jsx(FloatingPortal, { root: resolvedRoot, ...portalProps, children: /* @__PURE__ */ jsx(
     FloatingOverlay,
     {
       ...floatingOverlayProps,

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

@@ -11,11 +11,12 @@ 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 }`. |
+| `hidden` | `boolean` | - | Ẩn Cell (`display: none`) hoặc hiển thị (`display: block`). Hỗ trợ responsive qua `sm`, `md`, `lg`. |
+| `sm` | `CellResponsiveProps` | - | Responsive overrides applied at the sm breakpoint (≥768px). Accepts `{ colSpan?: number, hidden?: boolean }`. |
+| `md` | `CellResponsiveProps` | - | Responsive overrides applied at the md breakpoint (≥1280px). Accepts `{ colSpan?: number, hidden?: boolean }`. |
+| `lg` | `CellResponsiveProps` | - | Responsive overrides applied at the lg breakpoint (≥1680px). Accepts `{ colSpan?: number, hidden?: boolean }`. |
 | `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. |
@@ -50,6 +51,18 @@ import { Cell } from '@janbox/storefront-ui';
 </Cell>
 ```
 
+### Responsive hidden
+
+```tsx
+{/* Ẩn trên mobile, hiện từ sm trở lên */}
+<Grid cols={3}>
+  <Cell hidden sm={{ hidden: false }}>
+    Desktop only cell
+  </Cell>
+  <Cell>Always visible</Cell>
+</Grid>
+```
+
 ## Related Components
 
 - [Grid](../grid/README.md)

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

@@ -4,13 +4,13 @@ import { getCellProps } from "./helpers.js";
 import { Primitive } from "../../primitive/primitive.js";
 const Cell = ({ children, ref, ..._props }) => {
   var _a, _b, _c;
-  const { colSpan, sm, md, lg, ...rest } = getCellProps(_props);
+  const { colSpan, hidden, sm, md, lg, ...rest } = getCellProps(_props);
   return /* @__PURE__ */ jsx(
     Primitive,
     {
       ...rest,
       sx: {
-        ...createStyle({ colSpan }),
+        ...createStyle({ colSpan, hidden }),
         ...rest.sx,
         sm: {
           ...createStyle(sm),
@@ -30,8 +30,9 @@ const Cell = ({ children, ref, ..._props }) => {
     }
   );
 };
-const createStyle = ({ colSpan } = {}) => {
+const createStyle = ({ colSpan, hidden } = {}) => {
   return {
+    display: hidden ? "none" : "block",
     gridColumn: isNumber(colSpan) ? `span ${colSpan}` : colSpan
   };
 };

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

@@ -3,5 +3,6 @@ import { ToResponsiveProps } from '../../../types';
 import { PrimitiveProps } from '../../primitive';
 export interface CellResponsiveProps {
     colSpan?: number;
+    hidden?: boolean;
 }
 export type CellProps = PrimitiveProps<JSX.IntrinsicElements['div'] & ToResponsiveProps<CellResponsiveProps>>;

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

@@ -11,11 +11,12 @@ import { Grid } from '@janbox/storefront-ui';
 ## Props
 
 | Prop | Type | Default | Description |
-|------|------|---------|-------------|
+| ------ | ------ | ------- | ----------- |
 | `cols` | `number` | 1 | Number of equal-width columns in the grid. Generates `grid-template-columns: repeat(cols, minmax(0, 1fr))`. Supports responsive variants via sm/md/lg. |
-| `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 }`. |
+| `hidden` | `boolean` | - | Ẩn Grid (`display: none`) hoặc hiển thị (`display: grid`). Hỗ trợ responsive qua `sm`, `md`, `lg`. |
+| `sm` | `GridResponsiveProps` | - | Responsive overrides applied at the sm breakpoint (≥768px). Accepts `{ cols?: number, hidden?: boolean }`. |
+| `md` | `GridResponsiveProps` | - | Responsive overrides applied at the md breakpoint (≥1280px). Accepts `{ cols?: number, hidden?: boolean }`. |
+| `lg` | `GridResponsiveProps` | - | Responsive overrides applied at the lg breakpoint (≥1680px). Accepts `{ cols?: number, hidden?: boolean }`. |
 | `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. |
@@ -55,6 +56,17 @@ import { Grid } from '@janbox/storefront-ui';
 </Grid>
 ```
 
+### Responsive hidden
+
+```tsx
+{/* Ẩn trên mobile, hiện từ md trở lên */}
+<Grid cols={3} hidden md={{ hidden: false }}>
+  <Cell>Item 1</Cell>
+  <Cell>Item 2</Cell>
+  <Cell>Item 3</Cell>
+</Grid>
+```
+
 ## Related Components
 
 - [Cell](../cell/README.md)

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

@@ -5,25 +5,26 @@ 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, sx = {}, ...rest } = getGridProps(_props);
+  var _a, _b, _c;
+  const { cols, hidden, sm, md, lg, ...rest } = getGridProps(_props);
   return /* @__PURE__ */ jsx(
     Primitive,
     {
+      ...rest,
       sx: {
-        display: "grid",
-        ...createStyle({ cols }),
-        ...sx,
-        sm: { ...createStyle(sm), ...sx.sm },
-        md: { ...createStyle(md), ...sx.md },
-        lg: { ...createStyle(lg), ...sx.lg }
+        ...createStyle({ cols, hidden }),
+        ...rest.sx,
+        sm: { ...createStyle(sm), ...(_a = rest.sx) == null ? void 0 : _a.sm },
+        md: { ...createStyle(md), ...(_b = rest.sx) == null ? void 0 : _b.md },
+        lg: { ...createStyle(lg), ...(_c = rest.sx) == null ? void 0 : _c.lg }
       },
-      ...rest,
       ref,
       children
     }
   );
 };
-const createStyle = ({ cols } = {}) => ({
+const createStyle = ({ cols, hidden } = {}) => ({
+  display: hidden ? "none" : "grid",
   gridTemplateColumns: isNil(cols) ? void 0 : `repeat(${cols}, minmax(0, 1fr))`
 });
 export {

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

@@ -3,6 +3,7 @@ import { ShallowMerge, ToResponsiveProps } from '../../../types';
 import { PrimitiveProps } from '../../primitive';
 export interface GridResponsiveProps {
     cols?: number;
+    hidden?: boolean;
 }
 type GridExtendedProps = ToResponsiveProps<GridResponsiveProps>;
 export type GridProps = PrimitiveProps<ShallowMerge<JSX.IntrinsicElements['div'], GridExtendedProps>>;

package/dist/lib/notifications/notifications.js

@@ -7,6 +7,7 @@ import { notificationStore } from "./helpers.js";
 import { getColorShadesByVariant } from "../../utils/index.js";
 import { FLOATING_Z_INDEX } from "../../theme/index.js";
 import CloseIcon from "../../assets/svg/times-close-delete.svg.js";
+import { usePortalContainer } from "../../theme/provider.js";
 import { Primitive } from "../primitive/primitive.js";
 import { getTypographyVar } from "../../theme/typography.js";
 import { IconButton } from "../icon-button/icon-button.js";
@@ -17,7 +18,8 @@ const Notifications = () => {
     notificationStore.getSnapshot,
     notificationStore.getServerSnapshot
   );
-  return /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(
+  const portalRoot = usePortalContainer();
+  return /* @__PURE__ */ jsx(FloatingPortal, { ...portalRoot && { root: portalRoot }, children: /* @__PURE__ */ jsx(
     Primitive,
     {
       sx: {

package/dist/lib/swiper/swiper-dots-paging/swiper-dots-paging.js

@@ -4,6 +4,7 @@ import { useFloating, autoUpdate, shift, flip, size, FloatingPortal } from "@flo
 import { times, isNumber } from "lodash-es";
 import { motion } from "motion/react";
 import { getColorVar } from "../../../theme/palette.js";
+import { usePortalContainer } from "../../../theme/provider.js";
 import { useIsHydrated } from "../../../hooks/use-is-hydrated/index.js";
 import { Primitive } from "../../primitive/primitive.js";
 const SWIPER_DOTS_SIZE_VAR = "--swiper-dots-size";
@@ -22,6 +23,7 @@ const SwiperDotsPaging = ({
   const [inViewIndexes, setInViewIndexes] = useState((api == null ? void 0 : api.slidesInView()) ?? []);
   const [totalSlides, setTotalSlides] = useState((api == null ? void 0 : api.slideNodes().length) ?? 0);
   const isHydrated = useIsHydrated();
+  const portalRoot = usePortalContainer();
   const {
     floatingStyles,
     refs: { setFloating, setReference }
@@ -81,7 +83,7 @@ const SwiperDotsPaging = ({
         }
       }
     ),
-    /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(FloatingPortal, { ...portalRoot && { root: portalRoot }, children: /* @__PURE__ */ jsx(
       Primitive,
       {
         style: {

package/dist/lib/swiper/swiper-side-arrows-paging/swiper-side-arrows-paging.js

@@ -3,6 +3,7 @@ import { useState, useRef, useCallback, useEffect } from "react";
 import { useFloating, autoUpdate, offset, size, FloatingPortal } from "@floating-ui/react";
 import { isEmpty, isNumber, isNil } from "lodash-es";
 import { getColorVar } from "../../../theme/palette.js";
+import { usePortalContainer } from "../../../theme/provider.js";
 import ArrowLeftIcon from "../../../assets/svg/arrow-left.svg.js";
 import { SvgLoader } from "../../../components/svg-loader.js";
 import { Primitive } from "../../primitive/primitive.js";
@@ -23,6 +24,7 @@ const SwiperSideArrowsPaging = ({
   const [canScrollNext, setCanScrollNext] = useState(api.canScrollNext());
   const [isVisible, setIsVisible] = useState(visibility === "always");
   const [referenceStyle, setReferenceStyle] = useState(anchorSelector ? {} : { top: 0, bottom: 0 });
+  const portalRoot = usePortalContainer();
   const hoverStateRef = useRef({ root: false, floating: false });
   const updateVisibility = useCallback(() => {
     const { root, floating } = hoverStateRef.current;
@@ -136,7 +138,7 @@ const SwiperSideArrowsPaging = ({
         }
       }
     ),
-    context.open && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(
+    context.open && /* @__PURE__ */ jsx(FloatingPortal, { ...portalRoot && { root: portalRoot }, children: /* @__PURE__ */ jsx(
       Primitive,
       {
         style: {

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

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import { useRef, useState, useEffect } from "react";
 import { motion } from "motion/react";
-import { Stylesheet } from "../../stylesheet/stylesheet.js";
 import { useTabsContext } from "../tabs/helpers.js";
+import { Stylesheet } from "../../stylesheet/stylesheet.js";
 const TabIndicator = () => {
   const { activeIndex, tabIndicatorProps } = useTabsContext();
   const indicatorEl = useRef(null);

package/dist/lib/tooltip/tooltip.js

@@ -5,6 +5,7 @@ import { isUndefined, get } from "lodash-es";
 import { useControllableState } from "../../hooks/use-controllable-state.js";
 import { getColorVar } from "../../theme/palette.js";
 import { getTypographyVar } from "../../theme/typography.js";
+import { usePortalContainer } from "../../theme/provider.js";
 import { Primitive } from "../primitive/primitive.js";
 function Tooltip({
   children,
@@ -22,6 +23,7 @@ function Tooltip({
     defaultValue: defaultOpen,
     value: open
   });
+  const portalRoot = usePortalContainer();
   const triggerRef = useRef(null);
   const arrowRef = useRef(null);
   const handleOpenChange = (val, event, reason) => {
@@ -78,7 +80,7 @@ function Tooltip({
         ref: mergedRefs
       })
     ),
-    context.open && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsxs(
+    context.open && /* @__PURE__ */ jsx(FloatingPortal, { ...portalRoot && { root: portalRoot }, children: /* @__PURE__ */ jsxs(
       Primitive,
       {
         style: {

package/dist/theme/index.js

@@ -1,7 +1,7 @@
 import { breakpoint, containerQuery, getSmallerScreens, mediaQuery, screens } from "./screens.js";
 import { getColorVar, groupedColors, paletteVars, parseColor } from "./palette.js";
 import { getSmallerTypographyVariants, getTypographyVar, typographyVars } from "./typography.js";
-import { ThemeProvider, useTheme } from "./provider.js";
+import { ThemeProvider, usePortalContainer, useTheme } from "./provider.js";
 import { createTheme, defaultTheme } from "./create-theme.js";
 const FLOATING_Z_INDEX = 9999;
 export {
@@ -21,5 +21,6 @@ export {
   parseColor,
   screens,
   typographyVars,
+  usePortalContainer,
   useTheme
 };

package/dist/theme/provider.d.ts

@@ -1,8 +1,13 @@
-import { PropsWithChildren } from 'react';
+import { FloatingPortal } from '@floating-ui/react';
+import { ComponentProps, PropsWithChildren } from 'react';
 import { Theme } from '.';
+type PortalContainer = ComponentProps<typeof FloatingPortal>['root'];
 export type ThemeProviderProps = PropsWithChildren<{
     theme: Theme;
     locale?: string;
+    root?: PortalContainer;
 }>;
+export declare const usePortalContainer: () => HTMLElement | ShadowRoot | import('react').MutableRefObject<HTMLElement | ShadowRoot | null> | null | undefined;
 export declare const useTheme: () => Theme;
-export declare const ThemeProvider: ({ theme, children, locale }: ThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ThemeProvider: ({ theme, children, locale, root }: ThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/theme/provider.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Global } from "@emotion/react";
 import { useContext, createContext } from "react";
 import { getColorVar } from "./palette.js";
@@ -6,6 +6,9 @@ import { flatten } from "flat";
 import { flatMap } from "lodash-es";
 import { getTypographyVar } from "./typography.js";
 import { LocaleContext, FALLBACK_LOCALE } from "../i18n/index.js";
+const usePortalContainer = () => {
+  return useContext(PortalContainerContext);
+};
 const useTheme = () => {
   const context = useContext(ThemeContext);
   if (!context) {
@@ -14,11 +17,12 @@ const useTheme = () => {
   return context;
 };
 const ThemeContext = createContext(null);
-const ThemeProvider = ({ theme, children, locale = FALLBACK_LOCALE }) => {
-  return /* @__PURE__ */ jsxs(ThemeContext.Provider, { value: theme, children: [
+const PortalContainerContext = createContext(null);
+const ThemeProvider = ({ theme, children, locale = FALLBACK_LOCALE, root }) => {
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: theme, children: /* @__PURE__ */ jsxs(PortalContainerContext.Provider, { value: root ?? null, children: [
     /* @__PURE__ */ jsx(Global, { styles: createGlobalStyle(theme) }),
     /* @__PURE__ */ jsx(LocaleContext.Provider, { value: locale, children })
-  ] });
+  ] }) });
 };
 const createGlobalStyle = ({ palette, typography }) => {
   const flattenPalette = flatten(palette);
@@ -304,5 +308,6 @@ const createGlobalStyle = ({ palette, typography }) => {
 };
 export {
   ThemeProvider,
+  usePortalContainer,
   useTheme
 };

package/package.json

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