@janbox/storefront-ui 4.0.8 → 4.0.10

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

@@ -115,6 +115,7 @@ import { getButtonCssBySize, getButtonProps } from "./lib/button/helpers.js";
 import { getCellProps } from "./lib/grid/cell/helpers.js";
 import { getChipProps, getChipSizeState } from "./lib/chip/helpers.js";
 import { getContainerProps } from "./lib/container/helpers.js";
+import { getCountUpProps } from "./lib/count-up/helpers.js";
 import { getDatePickerProps } from "./lib/date-picker/helpers.js";
 import { getDialogProps, getDialogSizeInNumber, useDialogContext } from "./lib/dialog/dialog/helpers.js";
 import { getFlagProps } from "./lib/flag/helpers.js";
@@ -269,6 +270,7 @@ export {
   getChipProps,
   getChipSizeState,
   getContainerProps,
+  getCountUpProps,
   getDatePickerProps,
   getDialogProps,
   getDialogSizeInNumber,

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/README.md

@@ -17,6 +17,7 @@ import { CountUp } from '@janbox/storefront-ui';
 | `duration` | `number` | 2 | Thời gian animation tính bằng giây |
 | `formatNumberOptions` | `FormatNumberOptions` | - | Tùy chọn format số (mở rộng từ `Intl.NumberFormatOptions` với thuộc tính `locale`). Kiểm soát số chữ số thập phân, format tiền tệ và các tùy chọn hiển thị số theo locale |
 | `startOnView` | `boolean` | `true` | Chỉ chạy animation khi component cuộn vào viewport. Đặt `false` để chạy animation ngay khi mount |
+| `sizeVariant` | `TypographySizeVariant` | - | Typography size variant — điều khiển `fontSize` và `lineHeight` theo design token. Hỗ trợ responsive qua `sm`, `md`, `lg` (VD: `md={{ sizeVariant: '2xl' }}`) |
 | `prefix` | `React.ReactNode` | - | Nội dung hiển thị trước số |
 | `suffix` | `React.ReactNode` | - | Nội dung hiển thị sau số |
 | `sx` | `ToResponsiveProps<StyledCSS>` | - | Custom style responsive (hỗ trợ `sm`, `md`, `lg`) |
@@ -56,6 +57,13 @@ import { CountUp } from '@janbox/storefront-ui';
 <CountUp to={1000} sx={{ fontSize: 24, fontWeight: 700, md: { fontSize: 40 } }} />
 ```
 
+### Size variant responsive theo breakpoint
+
+```tsx
+{/* base = lg, md trở lên = 2xl, lg trở lên = 4xl */}
+<CountUp to={1000} sizeVariant="lg" md={{ sizeVariant: '2xl' }} lg={{ sizeVariant: '4xl' }} />
+```
+
 ### Prefix và suffix
 
 ```tsx

package/dist/lib/count-up/count-up.d.ts

@@ -1,2 +1,2 @@
 import { CountUpProps } from './types';
-export declare const CountUp: ({ from, to, duration, formatNumberOptions, startOnView, sx, className, prefix, suffix, ref, ...props }: CountUpProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CountUp: ({ ref, ..._props }: CountUpProps) => import("react/jsx-runtime").JSX.Element;

package/dist/lib/count-up/count-up.js

@@ -4,21 +4,28 @@ import { useMergeRefs } from "@floating-ui/react";
 import { useMotionValue, useInView, useTransform, animate, motion } from "motion/react";
 import { formatNumber } from "../../utils/index.js";
 import { useTranslation } from "../../i18n/index.js";
-import { getDecimalDigits } from "../../utils/common.js";
+import "lodash-es";
+import "../../theme/palette.js";
+import { getTypographyVar } from "../../theme/typography.js";
 import { Stylesheet } from "../stylesheet/stylesheet.js";
-const CountUp = ({
-  from = 0,
-  to,
-  duration = 2,
-  formatNumberOptions,
-  startOnView = true,
-  sx,
-  className,
-  prefix,
-  suffix,
-  ref,
-  ...props
-}) => {
+import { getCountUpProps } from "./helpers.js";
+import { getDecimalDigits } from "../../utils/common.js";
+const CountUp = ({ ref, ..._props }) => {
+  const {
+    from = 0,
+    to,
+    duration = 2,
+    formatNumberOptions,
+    startOnView,
+    sizeVariant,
+    sm,
+    md,
+    lg,
+    sx,
+    prefix,
+    suffix,
+    ...props
+  } = getCountUpProps(_props);
   const rootRef = useRef(null);
   const { locale } = useTranslation();
   const mergedRef = useMergeRefs([ref, rootRef]);
@@ -40,11 +47,34 @@ const CountUp = ({
       controls.stop();
     };
   }, [count, duration, isInView, startOnView, to]);
-  return /* @__PURE__ */ jsx(Stylesheet, { children: ({ cx, css }) => /* @__PURE__ */ jsxs(motion.span, { ...props, className: cx(className, css(sx)), ref: mergedRef, children: [
-    prefix,
-    /* @__PURE__ */ jsx(motion.span, { children: rounded }),
-    suffix
-  ] }) });
+  return /* @__PURE__ */ jsx(Stylesheet, { children: ({ cx, css }) => /* @__PURE__ */ jsxs(
+    motion.span,
+    {
+      ...props,
+      className: cx(
+        css({
+          ...createStyle({ sizeVariant }),
+          ...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.className
+      ),
+      ref: mergedRef,
+      children: [
+        prefix,
+        /* @__PURE__ */ jsx(motion.span, { children: rounded }),
+        suffix
+      ]
+    }
+  ) });
+};
+const createStyle = ({ sizeVariant } = {}) => {
+  return sizeVariant ? {
+    fontSize: getTypographyVar(sizeVariant).fontSize,
+    lineHeight: getTypographyVar(sizeVariant).lineHeight
+  } : {};
 };
 export {
   CountUp

package/dist/lib/count-up/helpers.d.ts

@@ -0,0 +1,2 @@
+import { CountUpProps } from './types';
+export declare const getCountUpProps: (extended: CountUpProps) => CountUpProps;

package/dist/lib/count-up/helpers.js

@@ -0,0 +1,12 @@
+import { mergeComponentProps } from "../../utils/index.js";
+const defaultProps = {
+  from: 0,
+  duration: 2,
+  startOnView: true
+};
+const getCountUpProps = (extended) => {
+  return mergeComponentProps(defaultProps, extended);
+};
+export {
+  getCountUpProps
+};

package/dist/lib/count-up/index.d.ts

@@ -1,2 +1,3 @@
-export * from './count-up';
-export * from './types';
+export { CountUp } from './count-up';
+export { type CountUpProps } from './types';
+export { getCountUpProps } from './helpers';

package/dist/lib/count-up/types.d.ts

@@ -1,7 +1,12 @@
 import { HTMLMotionProps } from 'motion/react';
 import { FormatNumberOptions } from '../../utils';
-import { PropsWithSx, ShallowMerge } from '../../types';
-export type CountUpProps = PropsWithSx<ShallowMerge<HTMLMotionProps<'span'>, {
+import { TypographySizeVariant } from '../../theme';
+import { PropsWithSx, ShallowMerge, ToResponsiveProps } from '../../types';
+export interface CountUpResponsiveProps {
+    /** Typography size variant — điều khiển `fontSize` và `lineHeight`. */
+    sizeVariant?: TypographySizeVariant;
+}
+export type CountUpProps = PropsWithSx<ShallowMerge<HTMLMotionProps<'span'>, ToResponsiveProps<CountUpResponsiveProps> & {
     from?: number;
     to: number;
     duration?: number;

package/dist/lib/date-picker/date-picker.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
 import { DatePickerProps } from './types';
-declare const DatePicker: (_props: DatePickerProps, ref?: React.ForwardedRef<HTMLButtonElement>) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const DatePicker: (_props: DatePickerProps, ref?: React.ForwardedRef<HTMLDivElement>) => import("@emotion/react/jsx-runtime").JSX.Element;
 declare const ForwardRefDatePicker: typeof DatePicker;
 export { ForwardRefDatePicker as DatePicker };

package/dist/lib/date-picker/date-picker.js

@@ -214,9 +214,8 @@ const DatePicker = (_props, ref) => {
               /* @__PURE__ */ jsx(FloatingTrigger, { children: /* @__PURE__ */ jsx(
                 ForwardRefInputMask,
                 {
-                  type: "button",
                   error: isOpen ? false : error,
-                  as: "button",
+                  role: "button",
                   suffix: getSuffix(),
                   ...rest,
                   ref,

package/dist/lib/date-picker/types.d.ts

@@ -1,4 +1,4 @@
-import { JSX } from 'react';
+import { JSX, Ref } from 'react';
 import { Placement, UseFloatingOptions } from '@floating-ui/react';
 import { InputRange } from 'react-date-range';
 import { PropsWithSx, SizeVariant, ToResponsiveProps } from '../../types';
@@ -30,6 +30,7 @@ type DatePickerBaseProps = {
     error?: boolean;
     helperText?: string;
     disabled?: boolean;
+    ref?: Ref<HTMLDivElement>;
 };
 export type DatePickerProps = PropsWithSx<DatePickerBaseProps & ToResponsiveProps<DateResponsiveProps>>;
 export {};

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

@@ -2,10 +2,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { motion } from "motion/react";
 import { FLOATING_Z_INDEX } from "../../../theme/index.js";
+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 { AnimatePresence, motion } 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 = ({
   style,
   floatingPortalProps,

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/README.md

@@ -14,7 +14,7 @@ import { StarRating } from '@janbox/storefront-ui';
 |------|------|---------|-------------|
 | `rating*` | `number` | - | Giá trị rating hiện tại. Kiểm soát mức độ tô màu ngôi sao qua clip-path. Hỗ trợ giá trị thập phân (VD: 2.5). |
 | `maxRating` | `number` | 5 | Giá trị rating tối đa. Dùng để tính phần trăm tô màu của ngôi sao. |
-| `size` | `number` | 24 | Chiều rộng và chiều cao của SVG tính bằng pixel. ViewBox nội bộ luôn là 24x24 nên giá trị này scale output. |
+| `size` | `number` | 24 | Chiều rộng và chiều cao của SVG tính bằng pixel. ViewBox nội bộ luôn là 24x24 nên giá trị này scale output. Hỗ trợ responsive qua `sm`, `md`, `lg` (VD: `md={{ size: 32 }}`). |
 | `color` | `ColorScale` | `"orange"` | Color variant dùng cho cả stroke và fill của ngôi sao. Ánh xạ tới design token color shades qua `getColorShadesByVariant`. |
 | `sx` | `ToResponsiveProps<StyledCSS>` | - | Custom style responsive (hỗ trợ `sm`, `md`, `lg`) áp dụng lên root SVG element. |
 | `ref` | `React.Ref<SVGSVGElement>` | - | Ref tới phần tử SVG bên dưới. |
@@ -35,6 +35,13 @@ import { StarRating } from '@janbox/storefront-ui';
 <StarRating rating={2.5} size={32} />
 ```
 
+### Size responsive theo breakpoint
+
+```tsx
+{/* 24px mặc định, 32px từ md, 40px từ lg */}
+<StarRating rating={4} size={24} md={{ size: 32 }} lg={{ size: 40 }} />
+```
+
 ### Max rating tùy chỉnh và color variant
 
 ```tsx

package/dist/lib/star-rating/star-rating.d.ts

@@ -1,2 +1,2 @@
 import { StarRatingProps } from './types';
-export declare const StarRating: ({ rating, maxRating, size, ref, color, sx }: StarRatingProps) => import("react/jsx-runtime").JSX.Element;
+export declare const StarRating: ({ rating, maxRating, size, sm, md, lg, ref, color, sx, }: StarRatingProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -2,16 +2,32 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import { getColorShadesByVariant } from "../../utils/index.js";
 import { Stylesheet } from "../stylesheet/stylesheet.js";
-const StarRating = ({ rating, maxRating = 5, size = 24, ref, color = "orange", sx }) => {
+const StarRating = ({
+  rating,
+  maxRating = 5,
+  size = 24,
+  sm,
+  md,
+  lg,
+  ref,
+  color = "orange",
+  sx
+}) => {
   const id = useId();
   const percent = rating / maxRating * 24;
   const { main } = getColorShadesByVariant(color);
   return /* @__PURE__ */ jsx(Stylesheet, { children: ({ css, cx }) => /* @__PURE__ */ jsxs(
     "svg",
     {
-      className: cx(css(sx)),
-      width: size,
-      height: size,
+      className: cx(
+        css({
+          ...createStyle({ size }),
+          ...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 }
+        })
+      ),
       viewBox: "0 0 24 24",
       xmlns: "http://www.w3.org/2000/svg",
       ref,
@@ -44,6 +60,12 @@ const StarRating = ({ rating, maxRating = 5, size = 24, ref, color = "orange", s
     }
   ) });
 };
+const createStyle = ({ size } = {}) => {
+  return size ? {
+    width: size,
+    height: size
+  } : {};
+};
 export {
   StarRating
 };

package/dist/lib/star-rating/types.d.ts

@@ -1,9 +1,11 @@
-import { ColorScale, PropsWithSx } from '../../types';
+import { ColorScale, PropsWithSx, ToResponsiveProps } from '../../types';
 import { Ref } from 'react';
-export type StarRatingProps = PropsWithSx<{
+export type StarRatingResponsiveProps = {
+    size?: number;
+};
+export type StarRatingProps = PropsWithSx<ToResponsiveProps<StarRatingResponsiveProps> & {
     rating: number;
     maxRating?: number;
-    size?: number;
     color?: ColorScale;
     ref?: Ref<SVGSVGElement>;
 }>;

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/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 { useTabsContext } from "../tabs/helpers.js";
 import { Stylesheet } from "../../stylesheet/stylesheet.js";
+import { useTabsContext } from "../tabs/helpers.js";
 const TabIndicator = () => {
   const { activeIndex, tabIndicatorProps } = useTabsContext();
   const indicatorEl = useRef(null);

package/package.json

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