@janbox/storefront-ui 5.0.0 → 5.0.1

package/dist/components/scroll-view.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
-import { Stylesheet } from "../lib/stylesheet/stylesheet.js";
 import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
+import { Stylesheet } from "../lib/stylesheet/stylesheet.js";
 const ScrollView = ({ children, options, sx, ...props }) => {
   return /* @__PURE__ */ jsx(Stylesheet, { children: ({ cx, css }) => /* @__PURE__ */ jsx(
     OverlayScrollbarsComponent,

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/count-up/count-up.js

@@ -7,9 +7,9 @@ import { useTranslation } from "../../i18n/index.js";
 import "lodash-es";
 import "../../theme/palette.js";
 import { getTypographyVar } from "../../theme/typography.js";
-import { Stylesheet } from "../stylesheet/stylesheet.js";
 import { getCountUpProps } from "./helpers.js";
 import { getDecimalDigits } from "../../utils/common.js";
+import { Stylesheet } from "../stylesheet/stylesheet.js";
 const CountUp = ({ ref, ..._props }) => {
   const {
     from = 0,

package/dist/lib/drawer/drawer/drawer.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { motion } from "motion/react";
-import { Stylesheet } from "../../stylesheet/stylesheet.js";
 import { Floating } from "../../floating/floating/floating.js";
 import { FloatingContent } from "../../floating/floating-content/floating-content.js";
 import { Primitive } from "../../primitive/primitive.js";
+import { Stylesheet } from "../../stylesheet/stylesheet.js";
 const Drawer = ({ children, placement = "left", ...props }) => {
   const initial = useMemo(() => {
     switch (placement) {

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

@@ -4,8 +4,8 @@ import { motion, AnimatePresence } from "motion/react";
 import { useFloatingContext } from "../floating/helpers.js";
 import { FLOATING_Z_INDEX } from "../../../theme/index.js";
 import { useIsHydrated } from "../../../hooks/use-is-hydrated/index.js";
-import { Stylesheet } from "../../stylesheet/stylesheet.js";
 import { usePortalContainer } from "../../../theme/provider.js";
+import { Stylesheet } from "../../stylesheet/stylesheet.js";
 const FloatingContent = ({ preserveTabOrder, focus, overlay, sx, ref, ...props }) => {
   const { getFloatingProps, context } = useFloatingContext();
   const mergedRefs = useMergeRefs([context.refs.setFloating, ref]);

package/dist/lib/lightbox/lightbox.js

@@ -10,12 +10,12 @@ import ZoomPlusIcon from "../../assets/svg/search-add-plus-middle.svg.js";
 import ZoomMinusIcon from "../../assets/svg/search-minus.svg.js";
 import CloseIcon from "../../assets/svg/times-close-delete.svg.js";
 import { FLOATING_Z_INDEX } from "../../theme/index.js";
-import { Stylesheet } from "../stylesheet/stylesheet.js";
 import { Swiper } from "../swiper/swiper/swiper.js";
 import { SwiperSlide } from "../swiper/swiper-slide/swiper-slide.js";
 import { Floating } from "../floating/floating/floating.js";
 import { FloatingContent } from "../floating/floating-content/floating-content.js";
 import { Primitive } from "../primitive/primitive.js";
+import { Stylesheet } from "../stylesheet/stylesheet.js";
 import { Image } from "../image/image.js";
 import { FloatingClose } from "../floating/floating-close/floating-close.js";
 import { IconButton } from "../icon-button/icon-button.js";

package/dist/lib/loading/image-skeleton/image-skeleton.js

@@ -1,9 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import { animatePulseStyle } from "../../../constants/emotion.js";
-import { Stylesheet } from "../../stylesheet/stylesheet.js";
 import "lodash-es";
 import { getColorVar } from "../../../theme/palette.js";
 import { Primitive } from "../../primitive/primitive.js";
+import { Stylesheet } from "../../stylesheet/stylesheet.js";
 const ImageSkeleton = (props) => {
   return /* @__PURE__ */ jsx(
     Primitive,

package/dist/lib/notifications/notifications.js

@@ -7,9 +7,9 @@ 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 { Stylesheet } from "../stylesheet/stylesheet.js";
 import { usePortalContainer } from "../../theme/provider.js";
 import { Primitive } from "../primitive/primitive.js";
+import { Stylesheet } from "../stylesheet/stylesheet.js";
 import { getTypographyVar } from "../../theme/typography.js";
 import { IconButton } from "../icon-button/icon-button.js";
 const Notifications = () => {

package/dist/lib/star-rating/star-rating.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useId } from "react";
-import { Stylesheet } from "../stylesheet/stylesheet.js";
 import { getStarRatingProps } from "./helpers.js";
+import { Stylesheet } from "../stylesheet/stylesheet.js";
 const StarRating = (_props) => {
   const { rating, maxRating, size, sm, md, lg, ref, color, sx } = getStarRatingProps(_props);
   const id = useId();

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

@@ -6,8 +6,8 @@ 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 { Stylesheet } from "../../stylesheet/stylesheet.js";
 import { Primitive } from "../../primitive/primitive.js";
+import { Stylesheet } from "../../stylesheet/stylesheet.js";
 const SWIPER_DOTS_SIZE_VAR = "--swiper-dots-size";
 const SWIPER_DOTS_OFFSET_VAR = "--swiper-dots-offset";
 const SWIPER_DOTS_SPACING_VAR = "--swiper-dots-spacing";

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

@@ -14,10 +14,13 @@ import { TabContent } from '@janbox/storefront-ui';
 | ------ | ------ | ------- | ----------- |
 | `children` * | `React.ReactNode` | - | Danh sách `TabPanel`, thứ tự phải khớp với thứ tự các `Tab` trong `TabList`. |
 | `className` | `string` | - | Class cho container `div`. |
+| `as` | `HTMLElementType` | `'div'` | Tag HTML của container. |
+| `sx` | `ToResponsiveProps<StyledCSS>` | - | Style responsive cho container. |
+| `ref` | `React.Ref<HTMLElement>` | - | Trỏ tới DOM node của container. |
 
-Kiểu prop là `JSX.IntrinsicElements['div']` — kế thừa toàn bộ div attributes. Component **không** nhận `sx`; dùng `className` hoặc `style` nếu cần style container.
+Kiểu prop là `PrimitiveProps<JSX.IntrinsicElements['div'], 'div'>` — kế thừa toàn bộ div attributes cùng `as` và `sx` từ [Primitive](../../primitive/README.md).
 
-> ⚠️ `TabContent` **không** forward `ref`. `ref` trong props sẽ bị truyền vào `Primitive` như prop thường và không trỏ tới DOM node.
+> React 19 coi `ref` là prop thường, nên `ref` được `Primitive` spread thẳng vào DOM node của container.
 
 *Required props
 

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

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

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

@@ -1,11 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import { useRef, useState, useEffect, useCallback } from "react";
 import { motion } from "motion/react";
-import { Stylesheet } from "../../stylesheet/stylesheet.js";
 import "lodash-es";
 import "../../../theme/palette.js";
 import { isNumber } from "../../../utils/common.js";
 import { useTabsContext } from "../tabs/helpers.js";
+import { Stylesheet } from "../../stylesheet/stylesheet.js";
 const INDICATOR_SIZE_VAR_NAME = "--indicator-size";
 const TabIndicator = ({ size, sm, md, lg, ...props }) => {
   const { activeIndex } = useTabsContext();

package/package.json

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