@janbox/storefront-ui 5.0.1 → 5.0.2

package/dist/components/scroll-view.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
-import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
 import { Stylesheet } from "../lib/stylesheet/stylesheet.js";
+import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
 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 { useAccordionGroupContext } from "../accordion-group/helpers.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();

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 { usePortalContainer } from "../../../theme/provider.js";
 import { Stylesheet } from "../../stylesheet/stylesheet.js";
+import { usePortalContainer } from "../../../theme/provider.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 { getStarRatingProps } from "./helpers.js";
 import { Stylesheet } from "../stylesheet/stylesheet.js";
+import { getStarRatingProps } from "./helpers.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 { Primitive } from "../../primitive/primitive.js";
 import { Stylesheet } from "../../stylesheet/stylesheet.js";
+import { Primitive } from "../../primitive/primitive.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-indicator/README.md

@@ -31,7 +31,9 @@ Truyền `indicator={false}` để không render indicator.
 - Tab đang active được tìm bằng `parentElement.children.item(activeIndex)` — tức là **theo thứ tự DOM**, không qua index từ context. Vì vậy đừng chèn element không phải `Tab` vào giữa các `Tab`, nếu không indicator sẽ trỏ sai.
 - Vị trí (`left`, `top`, `width`) được tính từ `getBoundingClientRect()` của tab active so với container, có bù `scrollLeft`/`scrollTop` để đúng khi tab bar scroll ngang.
 - Một `MutationObserver` theo dõi `childList` của `TabList` để cập nhật khi số lượng `Tab` thay đổi (thêm/bớt tab động).
-- Một `ResizeObserver` observe cả tab active **và** container: resize container không đổi kích thước từng tab nhưng có thể làm tab xuống dòng khác khi `overflowBehavior="wrap"`, nên phải theo dõi cả hai để cập nhật vị trí dòng.
+- Một `ResizeObserver` observe tab active, container **và** chính indicator:
+  - Container: resize container không đổi kích thước từng tab nhưng có thể làm tab xuống dòng khác khi `overflowBehavior="wrap"`, nên phải theo dõi để cập nhật vị trí dòng.
+  - Chính indicator: `top` phụ thuộc `offsetHeight` của nó, nên khi `size` đổi (qua prop hoặc breakpoint) vị trí phải được tính lại. Indicator là `position: absolute` nên đổi height không làm tab/container resize.
 - `top` được tính là mép dưới của tab trừ đi chiều cao indicator, nên indicator luôn nằm sát đáy tab active — kể cả khi tab wrap sang dòng thứ hai.
 
 ## Examples

package/dist/lib/tabs/tab-indicator/index.d.ts

@@ -1 +1,2 @@
-export * from './tab-indicator';
+export { TabIndicator } from './tab-indicator';
+export { type TabIndicatorProps } from './types';

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();
@@ -51,15 +51,18 @@ const TabIndicator = ({ size, sm, md, lg, ...props }) => {
     });
   }, [activeTabElement]);
   useEffect(() => {
-    var _a;
     const resizeObserver = new ResizeObserver(syncIndicatorRect);
-    const parentElement = (_a = indicatorEl.current) == null ? void 0 : _a.parentElement;
+    const indicator = indicatorEl.current;
+    const parentElement = indicator == null ? void 0 : indicator.parentElement;
     if (activeTabElement) {
       resizeObserver.observe(activeTabElement);
     }
     if (parentElement) {
       resizeObserver.observe(parentElement);
     }
+    if (indicator) {
+      resizeObserver.observe(indicator);
+    }
     return () => {
       resizeObserver.disconnect();
     };

package/dist/utils/query-params.js

@@ -1,5 +1,5 @@
 import { flatten } from "flat";
-import { isNil, trim, isString, isNumber, isDate, isBoolean, isArray, isPlainObject } from "lodash-es";
+import { isNil, isString, isNumber, isDate, isBoolean, isArray, isPlainObject } from "lodash-es";
 import { getEnumValues } from "./common.js";
 class QueryParamParser {
   constructor(value) {
@@ -55,7 +55,7 @@ class ArrayParamParser extends QueryParamParser {
     if (isNil(value)) {
       return void 0;
     }
-    const parsedValue = value.split(",").map(trim).filter(Boolean);
+    const parsedValue = value.split(",").map((part) => part.trim()).filter(Boolean);
     return parsedValue.length ? parsedValue : void 0;
   }
 }

package/package.json

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