@janbox/storefront-ui 4.0.10 → 4.0.12

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

@@ -133,6 +133,7 @@ import { getMultipleSelectProps } from "./lib/multiple-select/helpers.js";
 import { getPageRange, getPaginationProps } from "./lib/pagination/helpers.js";
 import { getPriceLabelProps } from "./lib/price-label/helpers.js";
 import { getRadioButtonProps } from "./lib/radio-button/helpers.js";
+import { getStarRatingProps } from "./lib/star-rating/helpers.js";
 import { getSwiperProps } from "./lib/swiper/swiper/helpers.js";
 import { getTabListProps } from "./lib/tabs/tab-list/helpers.js";
 import { getTabPanelProps } from "./lib/tabs/tab-panel/helpers.js";
@@ -290,6 +291,7 @@ export {
   getPaginationProps,
   getPriceLabelProps,
   getRadioButtonProps,
+  getStarRatingProps,
   getSwiperProps,
   getTabListProps,
   getTabPanelProps,

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

@@ -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 { Stylesheet } from "../../stylesheet/stylesheet.js";
 import { usePortalContainer } from "../../../theme/provider.js";
+import { Stylesheet } from "../../stylesheet/stylesheet.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/pagination/helpers.js

@@ -42,7 +42,7 @@ const defaultProps = {
     },
     active: {
       color: "primary",
-      variant: "outlined"
+      variant: "contained"
     }
   }
 };

package/dist/lib/star-rating/README.md

@@ -12,10 +12,10 @@ import { StarRating } from '@janbox/storefront-ui';
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `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. 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`. |
+| `rating*` | `number` | - | Giá trị rating hiện tại (bắt buộc). 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. Hỗ trợ responsive qua `sm`, `md`, `lg` (VD: `md={{ size: 32 }}`). |
+| `color` | `string` | `var(--color-orange-600)` | Giá trị màu CSS bất kỳ dùng cho cả stroke và fill của ngôi sao. Nhận mọi CSS color (hex, rgb, `var(...)`, ...). Dùng `getColorVar('orange.600')` cho giá trị mặc định. |
 | `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. |
 
@@ -42,10 +42,15 @@ import { StarRating } from '@janbox/storefront-ui';
 <StarRating rating={4} size={24} md={{ size: 32 }} lg={{ size: 40 }} />
 ```
 
-### Max rating tùy chỉnh và color variant
+### Max rating tùy chỉnh và color tùy chỉnh
 
 ```tsx
-<StarRating rating={7} maxRating={10} color="primary" />
+import { getColorVar } from '@janbox/storefront-ui/theme';
+
+<StarRating rating={7} maxRating={10} color={getColorVar('primary.600')} />
+
+{/* Hoặc dùng CSS color trực tiếp */}
+<StarRating rating={7} maxRating={10} color="#f59e0b" />
 ```
 
 ### Custom style responsive với `sx`
@@ -71,8 +76,9 @@ import { StarRating } from '@janbox/storefront-ui';
 ## Dependencies
 
 - react (useId)
-- @/utils (getColorShadesByVariant)
-- @/types (ColorScale, PropsWithSx)
+- @/utils (mergeComponentProps)
+- @/theme (getColorVar)
+- @/types (PropsWithSx, ToResponsiveProps, StyledCSS)
 - Stylesheet (../stylesheet)
 
 ## See Also

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

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

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

@@ -0,0 +1,14 @@
+import "lodash-es";
+import { getColorVar } from "../../theme/palette.js";
+import { mergeComponentProps } from "../../utils/index.js";
+const defaultProps = {
+  color: getColorVar("orange.600"),
+  size: 24,
+  maxRating: 5
+};
+const getStarRatingProps = (extended) => {
+  return mergeComponentProps(defaultProps, extended);
+};
+export {
+  getStarRatingProps
+};

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

@@ -1,2 +1,3 @@
-export * from './star-rating';
-export * from './types';
+export { StarRating } from './star-rating';
+export type { StarRatingProps, StarRatingResponsiveProps } from './types';
+export { getStarRatingProps } from './helpers';

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

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

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

@@ -1,21 +1,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useId } from "react";
-import { getColorShadesByVariant } from "../../utils/index.js";
+import { getStarRatingProps } from "./helpers.js";
 import { Stylesheet } from "../stylesheet/stylesheet.js";
-const StarRating = ({
-  rating,
-  maxRating = 5,
-  size = 24,
-  sm,
-  md,
-  lg,
-  ref,
-  color = "orange",
-  sx
-}) => {
+const StarRating = (_props) => {
+  const { rating, maxRating, size, sm, md, lg, ref, color, sx } = getStarRatingProps(_props);
   const id = useId();
-  const percent = rating / maxRating * 24;
-  const { main } = getColorShadesByVariant(color);
+  const percent = (() => {
+    return maxRating ? rating / maxRating * 24 : 0;
+  })();
   return /* @__PURE__ */ jsx(Stylesheet, { children: ({ css, cx }) => /* @__PURE__ */ jsxs(
     "svg",
     {
@@ -38,7 +30,7 @@ const StarRating = ({
           {
             d: "M12 2.89648L14.935 8.88948L21.5 9.85648L16.75 14.5185L17.871 21.1045L12 17.9935L6.129 21.1045L7.25 14.5185L2.5 9.85648L9.064 8.88948L12 2.89648Z",
             fill: "white",
-            stroke: main,
+            stroke: color,
             strokeWidth: "1.5",
             strokeLinecap: "round",
             strokeLinejoin: "round"
@@ -48,12 +40,12 @@ const StarRating = ({
           "path",
           {
             d: "M12 2.89648L14.935 8.88948L21.5 9.85648L16.75 14.5185L17.871 21.1045L12 17.9935L6.129 21.1045L7.25 14.5185L2.5 9.85648L9.064 8.88948L12 2.89648Z",
-            fill: main,
+            fill: color,
             clipPath: `url(#${id})`,
             strokeLinecap: "round",
             strokeLinejoin: "round",
             strokeWidth: "1.5",
-            stroke: main
+            stroke: color
           }
         )
       ]

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

@@ -1,4 +1,4 @@
-import { ColorScale, PropsWithSx, ToResponsiveProps } from '../../types';
+import { PropsWithSx, ToResponsiveProps } from '../../types';
 import { Ref } from 'react';
 export type StarRatingResponsiveProps = {
     size?: number;
@@ -6,6 +6,6 @@ export type StarRatingResponsiveProps = {
 export type StarRatingProps = PropsWithSx<ToResponsiveProps<StarRatingResponsiveProps> & {
     rating: number;
     maxRating?: number;
-    color?: ColorScale;
+    color?: string;
     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 { 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-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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@janbox/storefront-ui",
-  "version": "4.0.10",
+  "version": "4.0.12",
   "description": "Storefront UI component library for Janbox",
   "author": "Janbox",
   "keywords": [
@@ -102,7 +102,6 @@
     "eslint-plugin-unused-imports": "^4.4.1",
     "globals": "^17.4.0",
     "prettier": "^3.8.1",
-    "sass-embedded": "^1.97.3",
     "storybook": "^10.2.14",
     "type-fest": "^5.2.0",
     "typescript": "5.5.4",