@janbox/storefront-ui 4.0.6 → 4.0.8

package/dist/lib/otp-input/otp-input.js

@@ -1,10 +1,10 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useRef, useEffect } from "react";
 import { times } from "lodash-es";
 import { useControllableState } from "../../hooks/use-controllable-state.js";
-import { mediaQuery } from "../../theme/screens.js";
 import "../../theme/palette.js";
 import { getTypographyVar } from "../../theme/typography.js";
+import { Primitive } from "../primitive/primitive.js";
 import { Input } from "../input/input.js";
 const OtpInput = ({
   length = 6,
@@ -102,37 +102,50 @@ const OtpInput = ({
   const onFocus = (e) => {
     e.target.select();
   };
-  return /* @__PURE__ */ jsx("div", { css: { display: "flex", width: "100%", gap: "0.5rem", [mediaQuery("sm")]: { gap: "0.75rem" } }, children: otp.map((digit, index) => /* @__PURE__ */ jsx("div", { css: { flex: "1 1 0%", position: "relative" }, children: /* @__PURE__ */ jsx(
-    Input,
+  return /* @__PURE__ */ jsx(
+    Primitive,
     {
-      ref: (el) => {
-        inputRefs.current[index] = el;
-      },
-      type: "text",
-      inputMode: "numeric",
-      pattern: "\\d*",
-      maxLength: 1,
-      "data-index": index,
-      value: digit,
-      onChange: handleChange,
-      onFocus,
-      onKeyDown: handleKeyDown,
-      onPaste: index === 0 ? handlePaste : void 0,
-      disabled,
-      readOnly: isLoading,
-      css: {
-        textAlign: "center",
-        fontWeight: 500,
-        fontSize: getTypographyVar("lg").fontSize,
-        lineHeight: getTypographyVar("lg").lineHeight
+      sx: {
+        display: "flex",
+        width: "100%",
+        gap: 8,
+        sm: {
+          gap: 12
+        }
       },
-      size,
-      sm,
-      md,
-      lg,
-      error
+      children: otp.map((digit, index) => /* @__PURE__ */ jsx(Primitive, { sx: { flex: "1 1 0%", position: "relative" }, children: /* @__PURE__ */ jsx(
+        Input,
+        {
+          ref: (el) => {
+            inputRefs.current[index] = el;
+          },
+          type: "text",
+          inputMode: "numeric",
+          pattern: "\\d*",
+          maxLength: 1,
+          "data-index": index,
+          value: digit,
+          onChange: handleChange,
+          onFocus,
+          onKeyDown: handleKeyDown,
+          onPaste: index === 0 ? handlePaste : void 0,
+          disabled,
+          readOnly: isLoading,
+          sx: {
+            textAlign: "center",
+            fontWeight: 500,
+            fontSize: getTypographyVar("lg").fontSize,
+            lineHeight: getTypographyVar("lg").lineHeight
+          },
+          size,
+          sm,
+          md,
+          lg,
+          error
+        }
+      ) }, index))
     }
-  ) }, index)) });
+  );
 };
 export {
   OtpInput

package/dist/lib/pagination/pagination.d.ts

@@ -1,2 +1,2 @@
 import { PaginationProps } from './types';
-export declare const Pagination: ({ ref, ..._props }: PaginationProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Pagination: ({ ref, ..._props }: PaginationProps) => import("react/jsx-runtime").JSX.Element;

package/dist/lib/pagination/pagination.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { Fragment } from "react";
 import { getPaginationProps, getPageRange } from "./helpers.js";
 import ArrowLeftIcon from "../../assets/svg/arrow-left.svg.js";
@@ -10,6 +10,7 @@ import { getTypographyVar } from "../../theme/typography.js";
 import { getSizeVariantState } from "../../utils/index.js";
 import { Text } from "../text/text.js";
 import { IconButton } from "../icon-button/icon-button.js";
+import { Primitive } from "../primitive/primitive.js";
 import { Icon } from "../icon/icon.js";
 const Pagination = ({ ref, ..._props }) => {
   var _a, _b, _c, _d;
@@ -37,14 +38,6 @@ const Pagination = ({ ref, ..._props }) => {
     lg: getSizeVariantState(lg == null ? void 0 : lg.size)
   };
   const pageRange = getPageRange(page, totalPages, siblingCount);
-  const css = [
-    {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      gap: 4
-    }
-  ];
   const handlePageClick = (e) => {
     const newPage = Number(e.currentTarget.value);
     if (disabled || newPage === page) return;
@@ -93,54 +86,67 @@ const Pagination = ({ ref, ..._props }) => {
       }
     );
   };
-  return /* @__PURE__ */ jsxs("div", { css, ...rest, ref, children: [
-    showFirstPageButton && /* @__PURE__ */ jsx(PaginationButton, { "aria-disabled": page <= 1, color: (_a = states == null ? void 0 : states.normal) == null ? void 0 : _a.color, onClick: handleFirstClick, children: /* @__PURE__ */ jsx(PaginationIcon, { sx: { transform: "rotate(180deg)" }, source: ArrowForwardIcon }) }),
-    showPrevPageButton && /* @__PURE__ */ jsx(PaginationButton, { "aria-disabled": page <= 1, color: (_b = states == null ? void 0 : states.normal) == null ? void 0 : _b.color, onClick: handlePrevClick, children: /* @__PURE__ */ jsx(PaginationIcon, { source: ArrowLeftIcon }) }),
-    pageRange.map((pageItem, index) => {
-      var _a2, _b2, _c2, _d2, _e;
-      const isActive = pageItem.type === "page" && pageItem.page === page;
-      return /* @__PURE__ */ jsxs(Fragment, { children: [
-        pageItem.type === "ellipsis" && /* @__PURE__ */ jsx(PaginationButton, { color: (_a2 = states == null ? void 0 : states.normal) == null ? void 0 : _a2.color, children: "..." }),
-        pageItem.type === "page" && /* @__PURE__ */ jsx(
-          PaginationButton,
-          {
-            color: isActive ? (_b2 = states == null ? void 0 : states.active) == null ? void 0 : _b2.color : (_c2 = states == null ? void 0 : states.normal) == null ? void 0 : _c2.color,
-            value: pageItem.page,
-            variant: isActive ? (_d2 = states == null ? void 0 : states.active) == null ? void 0 : _d2.variant : (_e = states == null ? void 0 : states.normal) == null ? void 0 : _e.variant,
-            onClick: handlePageClick,
-            children: /* @__PURE__ */ jsx(
-              Text,
+  return /* @__PURE__ */ jsxs(
+    Primitive,
+    {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 4
+      },
+      ...rest,
+      ref,
+      children: [
+        showFirstPageButton && /* @__PURE__ */ jsx(PaginationButton, { "aria-disabled": page <= 1, color: (_a = states == null ? void 0 : states.normal) == null ? void 0 : _a.color, onClick: handleFirstClick, children: /* @__PURE__ */ jsx(PaginationIcon, { sx: { transform: "rotate(180deg)" }, source: ArrowForwardIcon }) }),
+        showPrevPageButton && /* @__PURE__ */ jsx(PaginationButton, { "aria-disabled": page <= 1, color: (_b = states == null ? void 0 : states.normal) == null ? void 0 : _b.color, onClick: handlePrevClick, children: /* @__PURE__ */ jsx(PaginationIcon, { source: ArrowLeftIcon }) }),
+        pageRange.map((pageItem, index) => {
+          var _a2, _b2, _c2, _d2, _e;
+          const isActive = pageItem.type === "page" && pageItem.page === page;
+          return /* @__PURE__ */ jsxs(Fragment, { children: [
+            pageItem.type === "ellipsis" && /* @__PURE__ */ jsx(PaginationButton, { color: (_a2 = states == null ? void 0 : states.normal) == null ? void 0 : _a2.color, children: "..." }),
+            pageItem.type === "page" && /* @__PURE__ */ jsx(
+              PaginationButton,
               {
-                sx: {
-                  paddingLeft: 2,
-                  paddingRight: 2,
-                  ...sizeVariantState.xs.textVariant ? {
-                    fontSize: getTypographyVar(sizeVariantState.xs.textVariant).fontSize,
-                    lineHeight: getTypographyVar(sizeVariantState.xs.textVariant).lineHeight
-                  } : {},
-                  sm: sizeVariantState.sm.textVariant ? {
-                    fontSize: getTypographyVar(sizeVariantState.sm.textVariant).fontSize,
-                    lineHeight: getTypographyVar(sizeVariantState.sm.textVariant).lineHeight
-                  } : {},
-                  md: sizeVariantState.md.textVariant ? {
-                    fontSize: getTypographyVar(sizeVariantState.md.textVariant).fontSize,
-                    lineHeight: getTypographyVar(sizeVariantState.md.textVariant).lineHeight
-                  } : {},
-                  lg: sizeVariantState.lg.textVariant ? {
-                    fontSize: getTypographyVar(sizeVariantState.lg.textVariant).fontSize,
-                    lineHeight: getTypographyVar(sizeVariantState.lg.textVariant).lineHeight
-                  } : {}
-                },
-                children: pageItem.page
+                color: isActive ? (_b2 = states == null ? void 0 : states.active) == null ? void 0 : _b2.color : (_c2 = states == null ? void 0 : states.normal) == null ? void 0 : _c2.color,
+                value: pageItem.page,
+                variant: isActive ? (_d2 = states == null ? void 0 : states.active) == null ? void 0 : _d2.variant : (_e = states == null ? void 0 : states.normal) == null ? void 0 : _e.variant,
+                onClick: handlePageClick,
+                children: /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    sx: {
+                      paddingLeft: 2,
+                      paddingRight: 2,
+                      ...sizeVariantState.xs.textVariant ? {
+                        fontSize: getTypographyVar(sizeVariantState.xs.textVariant).fontSize,
+                        lineHeight: getTypographyVar(sizeVariantState.xs.textVariant).lineHeight
+                      } : {},
+                      sm: sizeVariantState.sm.textVariant ? {
+                        fontSize: getTypographyVar(sizeVariantState.sm.textVariant).fontSize,
+                        lineHeight: getTypographyVar(sizeVariantState.sm.textVariant).lineHeight
+                      } : {},
+                      md: sizeVariantState.md.textVariant ? {
+                        fontSize: getTypographyVar(sizeVariantState.md.textVariant).fontSize,
+                        lineHeight: getTypographyVar(sizeVariantState.md.textVariant).lineHeight
+                      } : {},
+                      lg: sizeVariantState.lg.textVariant ? {
+                        fontSize: getTypographyVar(sizeVariantState.lg.textVariant).fontSize,
+                        lineHeight: getTypographyVar(sizeVariantState.lg.textVariant).lineHeight
+                      } : {}
+                    },
+                    children: pageItem.page
+                  }
+                )
               }
             )
-          }
-        )
-      ] }, index);
-    }),
-    showNextPageButton && /* @__PURE__ */ jsx(PaginationButton, { "aria-disabled": page >= totalPages, color: (_c = states == null ? void 0 : states.normal) == null ? void 0 : _c.color, onClick: handleNextClick, children: /* @__PURE__ */ jsx(PaginationIcon, { source: ArrowRightIcon }) }),
-    showLastPageButton && /* @__PURE__ */ jsx(PaginationButton, { "aria-disabled": page >= totalPages, color: (_d = states == null ? void 0 : states.normal) == null ? void 0 : _d.color, onClick: handleLastClick, children: /* @__PURE__ */ jsx(PaginationIcon, { source: ArrowForwardIcon }) })
-  ] });
+          ] }, index);
+        }),
+        showNextPageButton && /* @__PURE__ */ jsx(PaginationButton, { "aria-disabled": page >= totalPages, color: (_c = states == null ? void 0 : states.normal) == null ? void 0 : _c.color, onClick: handleNextClick, children: /* @__PURE__ */ jsx(PaginationIcon, { source: ArrowRightIcon }) }),
+        showLastPageButton && /* @__PURE__ */ jsx(PaginationButton, { "aria-disabled": page >= totalPages, color: (_d = states == null ? void 0 : states.normal) == null ? void 0 : _d.color, onClick: handleLastClick, children: /* @__PURE__ */ jsx(PaginationIcon, { source: ArrowForwardIcon }) })
+      ]
+    }
+  );
 };
 export {
   Pagination

package/dist/lib/phone-input/phone-input.js

@@ -14,9 +14,9 @@ import { InputMask as ForwardRefInputMask } from "../input-mask/input-mask.js";
 import { Input } from "../input/input.js";
 import { FormHelperText } from "../form-helper-text/form-helper-text.js";
 const CountryRowLabel = ({ code, name, dial_code }) => {
-  return /* @__PURE__ */ jsxs("div", { css: { display: "flex", alignItems: "center", gap: 8 }, children: [
+  return /* @__PURE__ */ jsxs(Primitive, { sx: { display: "flex", alignItems: "center", gap: 8 }, children: [
     /* @__PURE__ */ jsx(Flag, { countryCode: code }),
-    /* @__PURE__ */ jsxs("span", { css: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: [
+    /* @__PURE__ */ jsxs(Primitive, { as: "span", sx: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: [
       dial_code,
       " (",
       name,
@@ -25,9 +25,9 @@ const CountryRowLabel = ({ code, name, dial_code }) => {
   ] });
 };
 const SelectedRenderer = ({ code, dial_code }) => {
-  return /* @__PURE__ */ jsxs("div", { css: { display: "flex", alignItems: "center", gap: 6 }, children: [
+  return /* @__PURE__ */ jsxs(Primitive, { sx: { display: "flex", alignItems: "center", gap: 6 }, children: [
     /* @__PURE__ */ jsx(Flag, { countryCode: code }),
-    /* @__PURE__ */ jsx("span", { css: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: dial_code })
+    /* @__PURE__ */ jsx(Primitive, { as: "span", sx: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: dial_code })
   ] });
 };
 const parsePhoneInputValue = (value) => {
@@ -138,7 +138,7 @@ const PhoneInput = ({
               props.css
             ],
             ref: mergedRefs,
-            children: /* @__PURE__ */ jsxs("div", { css: { position: "absolute", inset: 0, display: "flex", alignItems: "center" }, children: [
+            children: /* @__PURE__ */ jsxs(Primitive, { sx: { position: "absolute", inset: 0, display: "flex", alignItems: "center" }, children: [
               /* @__PURE__ */ jsx(
                 Select,
                 {
@@ -148,7 +148,7 @@ const PhoneInput = ({
                       minWidth: 80
                     }
                   },
-                  css: {
+                  style: {
                     paddingRight: 0
                   },
                   outline: {
@@ -175,12 +175,12 @@ const PhoneInput = ({
                 }
               ),
               /* @__PURE__ */ jsx(
-                "div",
+                Primitive,
                 {
-                  css: {
-                    borderRight: "1px solid",
+                  sx: {
+                    borderRightWidth: 1,
                     borderColor: getColorVar("border.default"),
-                    height: "66.666667%",
+                    height: "60%",
                     marginLeft: 8,
                     marginRight: 8
                   }
@@ -199,7 +199,8 @@ const PhoneInput = ({
                   mainProps: {
                     style: {
                       paddingLeft: 0,
-                      boxShadow: "none"
+                      boxShadow: "none",
+                      borderWidth: 0
                     }
                   },
                   onChange: onNationalNumberChange,

package/dist/lib/popover/popover-close/popover-close.d.ts

@@ -1 +1 @@
-export declare const PopoverClose: ({ event, reason, ref, ...props }: import('../../floating').FloatingCloseProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const PopoverClose: ({ event, reason, ref, ...props }: import('../../floating').FloatingCloseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/lib/progress/progress.d.ts

@@ -1,2 +1,2 @@
 import { ProgressProps } from './types';
-export declare const Progress: (props: ProgressProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Progress: ({ value, direction, activeProps, children, ...props }: ProgressProps) => import("react/jsx-runtime").JSX.Element;

package/dist/lib/progress/progress.js

@@ -1,38 +1,35 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import "lodash-es";
 import { getColorVar } from "../../theme/palette.js";
-const Progress = (props) => {
-  const { value, direction = "horizontal", activeProps = {}, children, ...rest } = props;
-  const { style: activeStyle, ...activeRest } = activeProps;
+import { Primitive } from "../primitive/primitive.js";
+const Progress = ({ value, direction = "horizontal", activeProps = {}, children, ...props }) => {
   return /* @__PURE__ */ jsx(
-    "div",
+    Primitive,
     {
-      ...rest,
-      css: [
-        {
-          backgroundColor: getColorVar("neutral.200"),
-          overflow: "hidden",
-          borderRadius: "9999px"
-        },
-        direction === "horizontal" && { width: "100%", height: "0.5rem" },
-        direction === "vertical" && { height: "100%", width: "0.5rem" }
-      ],
+      ...props,
+      sx: {
+        backgroundColor: getColorVar("neutral.200"),
+        overflow: "hidden",
+        borderRadius: 9999,
+        ...direction === "horizontal" ? { width: "100%", height: 8 } : {},
+        ...direction === "vertical" ? { height: "100%", width: 8 } : {},
+        ...props.sx
+      },
       children: /* @__PURE__ */ jsx(
-        "div",
+        Primitive,
         {
-          ...activeRest,
-          css: [
-            {
-              overflow: "hidden",
-              overflowWrap: "break-word",
-              borderRadius: "9999px",
-              backgroundColor: getColorVar("primary.600"),
-              transition: "width 300ms ease-in-out"
-            },
-            direction === "horizontal" && { height: "100%" },
-            direction === "vertical" && { width: "100%" }
-          ],
-          style: { [direction === "horizontal" ? "width" : "height"]: `${value}%`, ...activeStyle },
+          ...activeProps,
+          sx: {
+            overflow: "hidden",
+            overflowWrap: "break-word",
+            borderRadius: 9999,
+            backgroundColor: getColorVar("primary.600"),
+            transition: "width 300ms ease-in-out",
+            ...direction === "horizontal" ? { height: "100%" } : {},
+            ...direction === "vertical" ? { width: "100%" } : {},
+            ...activeProps.sx
+          },
+          style: { [direction === "horizontal" ? "width" : "height"]: `${value}%`, ...activeProps.style },
           children
         }
       )

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

@@ -1,7 +1,8 @@
-import { ComponentProps } from 'react';
+import { ComponentProps, JSX } from 'react';
 import { ProgressDirection } from '../../types';
-export type ProgressProps = {
+import { PrimitiveProps } from '../primitive';
+export type ProgressProps = PrimitiveProps<{
     value: number;
     direction?: ProgressDirection;
-    activeProps?: ComponentProps<'div'>;
-} & ComponentProps<'div'>;
+    activeProps?: PrimitiveProps<JSX.IntrinsicElements['div']>;
+} & ComponentProps<'div'>>;

package/dist/lib/select/select.js

@@ -162,8 +162,8 @@ const Select = ({
           } : {}
         },
         children: [
-          /* @__PURE__ */ jsx("div", { css: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: getOptionLabel(rowData) }),
-          isSelected && /* @__PURE__ */ jsx(SvgLoader, { source: CheckIcon, width: 24, height: 24, css: { color: getColorVar("primary.600") } })
+          /* @__PURE__ */ jsx(Primitive, { sx: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: getOptionLabel(rowData) }),
+          isSelected && /* @__PURE__ */ jsx(SvgLoader, { source: CheckIcon, width: 24, height: 24, sx: { color: getColorVar("primary.600") } })
         ]
       }
     );
@@ -250,7 +250,7 @@ const Select = ({
                       source: ArrowDownIcon,
                       width: 20,
                       height: 20,
-                      css: {
+                      sx: {
                         transition: "transform 150ms",
                         ...isOpen ? { transform: "rotate(-180deg)" } : {}
                       }
@@ -271,13 +271,17 @@ const Select = ({
                   ],
                   ref,
                   children: /* @__PURE__ */ jsx(
-                    "div",
+                    Primitive,
                     {
-                      css: [
-                        { flex: 1, textAlign: "left", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
-                        getTextCss(rest == null ? void 0 : rest.size)
-                      ],
-                      children: selectedOption ? /* @__PURE__ */ jsx(Fragment, { children: selectedRenderer ? selectedRenderer(selectedOption) : getOptionLabel(selectedOption) }) : /* @__PURE__ */ jsx(Primitive, { css: { color: getColorVar("neutral.400"), display: "block" }, as: "span", children: placeholder })
+                      sx: {
+                        flex: 1,
+                        textAlign: "left",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap",
+                        ...getTextCss(rest == null ? void 0 : rest.size)
+                      },
+                      children: selectedOption ? /* @__PURE__ */ jsx(Fragment, { children: selectedRenderer ? selectedRenderer(selectedOption) : getOptionLabel(selectedOption) }) : /* @__PURE__ */ jsx(Primitive, { sx: { color: getColorVar("neutral.400"), display: "block" }, as: "span", children: placeholder })
                     }
                   )
                 }
@@ -297,7 +301,7 @@ const Select = ({
                     backgroundColor: getColorVar("surface.default")
                   },
                   children: [
-                    searchable && /* @__PURE__ */ jsx(Primitive, { sx: { paddingLeft: 8, paddingRight: 8, paddingBottom: 12, position: "relative" }, children: /* @__PURE__ */ jsx(
+                    searchable && /* @__PURE__ */ jsx(Primitive, { sx: { paddingInline: 8, paddingBottom: 12, position: "relative" }, children: /* @__PURE__ */ jsx(
                       Input,
                       {
                         size: rest.size,
@@ -314,7 +318,7 @@ const Select = ({
                       VirtualizedList,
                       {
                         ...listProps,
-                        css: { paddingLeft: 4, paddingRight: 4 },
+                        sx: { paddingInline: 4 },
                         options: {
                           count: displayOptions.length,
                           estimateSize,

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

@@ -15,8 +15,9 @@ 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. |
-| `color` | `ColorScale` | `"secondary"` | Color variant dùng cho cả stroke và fill của ngôi sao. Ánh xạ tới design token color shades qua `getColorShadesByVariant`. |
-| `className` | `string` | - | CSS class name tùy chọn áp dụng lên root SVG element. |
+| `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. |
 
 *Props bắt buộc
 
@@ -40,6 +41,12 @@ import { StarRating } from '@janbox/storefront-ui';
 <StarRating rating={7} maxRating={10} color="primary" />
 ```
 
+### Custom style responsive với `sx`
+
+```tsx
+<StarRating rating={4} sx={{ marginRight: 4, md: { marginRight: 8 } }} />
+```
+
 ### Ngôi sao đầy và rỗng
 
 ```tsx
@@ -58,7 +65,8 @@ import { StarRating } from '@janbox/storefront-ui';
 
 - react (useId)
 - @/utils (getColorShadesByVariant)
-- @/types (ColorScale)
+- @/types (ColorScale, PropsWithSx)
+- Stylesheet (../stylesheet)
 
 ## See Also
 

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 }: StarRatingProps) => import("react/jsx-runtime").JSX.Element;
+export declare const StarRating: ({ rating, maxRating, size, ref, color, sx }: StarRatingProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,36 +1,48 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import { getColorShadesByVariant } from "../../utils/index.js";
-const StarRating = ({ rating, maxRating = 5, size = 24, ref, color = "primary" }) => {
+import { Stylesheet } from "../stylesheet/stylesheet.js";
+const StarRating = ({ rating, maxRating = 5, size = 24, ref, color = "orange", sx }) => {
   const id = useId();
   const percent = rating / maxRating * 24;
   const { main } = getColorShadesByVariant(color);
-  return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ref, children: [
-    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id, children: /* @__PURE__ */ jsx("rect", { x: "0", y: "0", width: percent, height: 24 }) }) }),
-    /* @__PURE__ */ jsx(
-      "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: "white",
-        stroke: main,
-        strokeWidth: "1.5",
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "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,
-        clipPath: `url(#${id})`,
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: "1.5",
-        stroke: main
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsx(Stylesheet, { children: ({ css, cx }) => /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: cx(css(sx)),
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      ref,
+      children: [
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id, children: /* @__PURE__ */ jsx("rect", { x: "0", y: "0", width: percent, height: 24 }) }) }),
+        /* @__PURE__ */ jsx(
+          "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: "white",
+            stroke: main,
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "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,
+            clipPath: `url(#${id})`,
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: "1.5",
+            stroke: main
+          }
+        )
+      ]
+    }
+  ) });
 };
 export {
   StarRating

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

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

package/dist/lib/stepper/step.js

@@ -1,8 +1,9 @@
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import "lodash-es";
 import { getColorVar } from "../../theme/palette.js";
 import CheckIcon from "../../assets/svg/check.svg.js";
+import { Primitive } from "../primitive/primitive.js";
 import { Icon } from "../icon/icon.js";
 const stateStyles = {
   done: {
@@ -35,11 +36,10 @@ const Step = forwardRef((props, ref) => {
   const styles = stateStyles[state] ?? stateStyles.normal;
   const checked = state === "done";
   return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
-    "div",
+    Primitive,
     {
-      style: { width: `${size}px`, height: `${size}px` },
       ref,
-      css: {
+      sx: {
         borderRadius: "50%",
         display: "flex",
         alignItems: "center",
@@ -48,14 +48,16 @@ const Step = forwardRef((props, ref) => {
         borderStyle: "solid",
         transition: "border 500ms, background 500ms, color 500ms",
         zIndex: 1,
+        width: size,
+        height: size,
         ...styles.bg
       },
       ...rest,
       children: [
         /* @__PURE__ */ jsx(
-          "p",
+          Primitive,
           {
-            css: {
+            sx: {
               ...styles.text,
               display: "-webkit-box",
               WebkitLineClamp: 2,