@janbox/storefront-ui 3.0.4 → 4.0.0

package/README.md

@@ -265,7 +265,7 @@ import { ThemeProvider, getColorVar } from '@janbox/storefront-ui/theme';
 import { useWindowScreen, useControllableState } from '@janbox/storefront-ui/hooks';
 
 // Types
-import type { SizeVariant, ColorVariant, StyledCSS } from '@janbox/storefront-ui/types';
+import type { SizeVariant, ColorScale, StyledCSS } from '@janbox/storefront-ui/types';
 
 // Utils
 import { cn, formatPrice } from '@janbox/storefront-ui/utils';
@@ -541,7 +541,7 @@ Mọi component đều có README riêng với API reference, examples, và usag
 type SizeVariant = 'xs' | 'sm' | 'md' | 'lg';
 
 // Color variants
-type ColorVariant = 'primary' | 'secondary' | 'green' | 'red' | 'orange' | 'blue' | 'neutral';
+type ColorScale = 'primary' | 'secondary' | 'green' | 'red' | 'orange' | 'blue' | 'neutral' | 'yellow' | 'violet';
 
 // Button variants
 type ButtonVariant = 'contained' | 'outlined' | 'text';

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

@@ -15,7 +15,7 @@ import { Avatar } from '@janbox/storefront-ui';
 | `src` | `string` | - | URL of the avatar image. Falls back to initials if the image fails to load or is not provided. |
 | `name` | `string` | - | User's full name — used to generate initials for the fallback display and as the alt/aria-label for the image. |
 | `status` | `'online' \| 'offline' \| 'busy' \| 'away'` | - | Online status indicator shown as a colored dot in the bottom-right corner of the avatar. |
-| `color` | `ColorVariant` | `'primary'` | Color variant for the initials fallback background. Uses the 600 shade of the specified color. |
+| `color` | `ColorScale` | `'primary'` | Color variant for the initials fallback background. Uses the 600 shade of the specified color. |
 | `size` | `number` | `40` | Width and height of the avatar in pixels. Font size and status dot scale proportionally. |
 | `sm` | `{ size?: number }` | - | Responsive overrides applied at the sm breakpoint (≥768px). |
 | `md` | `{ size?: number }` | - | Responsive overrides applied at the md breakpoint (≥1280px). |

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

@@ -1,5 +1,5 @@
 import { JSX } from 'react';
-import { ColorVariant, PropsWithSx, ShallowMerge, ToResponsiveProps } from '../../types';
+import { ColorScale, PropsWithSx, ShallowMerge, ToResponsiveProps } from '../../types';
 export type AvatarStatus = 'online' | 'offline' | 'busy' | 'away';
 export type AvatarResponsiveProps = {
     size?: number;
@@ -13,6 +13,6 @@ export type AvatarProps = PropsWithSx<ShallowMerge<AvatarHTMLProps, ToResponsive
     /** Shape of the avatar */
     /** Online status indicator */
     status?: AvatarStatus;
-    color?: ColorVariant;
+    color?: ColorScale;
 }>>;
 export {};

package/dist/lib/badge/README.md

@@ -14,7 +14,7 @@ import { Badge } from '@janbox/storefront-ui';
 |------|------|---------|-------------|
 | `children*` | `ReactElement<{ ref?: Ref<Element> }>` | - | The anchor element the badge is positioned relative to. Must be a single React element that accepts a ref. |
 | `content` | `number \| string` | - | The content displayed inside the badge bubble. When undefined or null, the badge is hidden. |
-| `color` | `ColorVariant` | `red` | Color variant for the badge background. Accepts any ColorVariant (`'primary' \| 'secondary' \| 'green' \| 'red' \| 'orange' \| 'blue' \| 'neutral'`). |
+| `color` | `ColorScale` | `red` | Color variant for the badge background. Accepts any ColorScale (`'primary' \| 'secondary' \| 'green' \| 'red' \| 'orange' \| 'blue' \| 'neutral'`). |
 | `offset` | `number \| { x?: number; y?: number }` | `0` | Fine-tunes the badge position relative to the anchor corner. A number applies the same offset on both axes; an object allows independent x/y control. |
 | `offsetY` | `number` | - | Legacy vertical offset prop. Prefer using the `offset` prop instead. |
 

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

@@ -1,12 +1,12 @@
 import { ReactElement, Ref } from 'react';
-import { ColorVariant } from '../../types';
+import { ColorScale } from '../../types';
 export type BadgeProps<T extends {
     ref?: Ref<Element>;
 } = {
     ref?: Ref<Element>;
 }> = {
     content?: number | string;
-    color?: ColorVariant;
+    color?: ColorScale;
     offset?: number | {
         x?: number;
         y?: number;

package/dist/lib/breadcrumbs/README.md

@@ -13,7 +13,7 @@ import { Breadcrumbs } from '@janbox/storefront-ui';
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `separator` | `string \| IconProps` | `'>'` | The separator rendered between each breadcrumb item. Can be a plain string (e.g. `'>'` or `'/'`) or an IconProps object to render an icon. |
-| `color` | `ColorVariant` | `'primary'` | Controls the hover color of breadcrumb items. Accepts any ColorVariant: `'primary' \| 'secondary' \| 'green' \| 'red' \| 'orange' \| 'blue' \| 'neutral'`. |
+| `color` | `ColorScale` | `'primary'` | Controls the hover color of breadcrumb items. Accepts any ColorScale: `'primary' \| 'secondary' \| 'green' \| 'red' \| 'orange' \| 'blue' \| 'neutral'`. |
 | `children` | `React.ReactNode` | - | BreadcrumbItem elements to render as the navigation trail. Flattened automatically to support wrapping in Fragments. |
 | `BreadcrumbItem.to` | `ReactRouterLinkProps['to']` | - | (BreadcrumbItem prop) The route target passed to react-router Link. |
 | `BreadcrumbItem.icon` | `IconProps` | - | (BreadcrumbItem prop) An optional icon rendered before the item label. |

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

@@ -1,9 +1,9 @@
 import { JSX } from 'react';
 import { IconProps } from '../../icon';
-import { ColorVariant, ShallowMerge } from '../../../types';
+import { ColorScale, ShallowMerge } from '../../../types';
 type BreadcrumbsSeparator = string | IconProps;
 export type BreadcrumbsProps = ShallowMerge<JSX.IntrinsicElements['div'], {
     separator?: BreadcrumbsSeparator;
-    color?: ColorVariant;
+    color?: ColorScale;
 }>;
 export {};

package/dist/lib/button/README.md

@@ -13,7 +13,7 @@ import { Button } from '@janbox/storefront-ui';
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `variant` | `ButtonVariant` | contained | Visual style variant of the button: 'contained' (filled background), 'outlined' (border only), or 'text' (no background) |
-| `color` | `ColorVariant` | primary | Color theme for the button: 'primary', 'secondary', 'green', 'red', 'orange', 'blue', or 'neutral' |
+| `color` | `ColorScale` | primary | Color theme for the button: 'primary', 'secondary', 'green', 'red', 'orange', 'blue', or 'neutral' |
 | `size` | `ButtonSizeVariant` | md | Size variant: 'sm', 'md', or 'lg' (excludes 'xs'). Controls padding, height, and typography |
 | `sm` | `ButtonResponsiveProps` | - | Responsive props override for small screens (≥768px) |
 | `md` | `ButtonResponsiveProps` | - | Responsive props override for medium screens (≥1280px) |

package/dist/lib/button/button.js

@@ -1,6 +1,5 @@
 import { jsxs, jsx } from "@emotion/react/jsx-runtime";
-import { useRef, Fragment, isValidElement } from "react";
-import { useMergeRefs } from "@floating-ui/react";
+import { Fragment, isValidElement } from "react";
 import { isNil, isString } from "lodash-es";
 import { useNavigate, createPath } from "react-router";
 import { getButtonProps, getButtonCssBySize } from "./helpers.js";
@@ -14,8 +13,6 @@ import { RippleEffect } from "../ripple-effect/ripple-effect.js";
 import { Icon } from "../icon/icon.js";
 import { Primitive } from "../primitive/primitive.js";
 const Button = ({ children, ref, ..._props }) => {
-  const buttonRef = useRef(null);
-  const mergedRef = useMergeRefs([ref, buttonRef]);
   const {
     color,
     variant,
@@ -141,7 +138,7 @@ const Button = ({ children, ref, ..._props }) => {
       }
     }
   };
-  return /* @__PURE__ */ jsxs("button", { css, disabled, ...rest, onClick, ref: mergedRef, children: [
+  return /* @__PURE__ */ jsxs("button", { css, disabled, ...rest, onClick, ref, children: [
     prefix,
     !!startIcon && /* @__PURE__ */ jsx(
       Icon,

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

@@ -2,7 +2,7 @@ import { JSX } from 'react';
 import { RouterNavigateOptions } from 'react-router';
 import { IconProps } from '../icon';
 import { LinkProps } from '../link';
-import { ButtonVariant, ColorVariant, SizeVariant, ShallowMerge, PropsWithSx, ToResponsiveProps } from '../../types';
+import { ButtonVariant, ColorScale, SizeVariant, ShallowMerge, PropsWithSx, ToResponsiveProps } from '../../types';
 export type ButtonSizeVariant = Exclude<SizeVariant, 'xs'>;
 export type ButtonResponsiveProps = {
     size?: ButtonSizeVariant;
@@ -12,7 +12,7 @@ type ButtonExtendedProps = PropsWithSx<ToResponsiveProps<ButtonResponsiveProps>
         to?: LinkProps['to'];
         target?: LinkProps['target'];
     };
-    color?: ColorVariant;
+    color?: ColorScale;
     variant?: ButtonVariant;
     prefix?: React.ReactNode;
     suffix?: React.ReactNode;

package/dist/lib/checkbox/README.md

@@ -12,7 +12,7 @@ import { Checkbox } from '@janbox/storefront-ui';
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `color` | `ColorVariant` | "primary" | Color variant for the checkbox. Controls the checked/focus color using design tokens. |
+| `color` | `ColorScale` | "primary" | Color variant for the checkbox. Controls the checked/focus color using design tokens. |
 | `indeterminate` | `boolean` | false | When true, sets the checkbox to an indeterminate state (shows a minus icon). The checked prop is ignored when this is set. See https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/indeterminate |
 | `containerProps` | `PrimitiveProps<JSX.IntrinsicElements['label']>` | - | Props forwarded to the outer <label> wrapper (Primitive as='label'). Supports sx prop for responsive styling. |
 | `children` | `React.ReactNode` | - | Label content rendered next to the checkbox. |

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

@@ -1,8 +1,8 @@
 import { JSX } from 'react';
-import { ColorVariant, ShallowMerge } from '../../types';
+import { ColorScale, ShallowMerge } from '../../types';
 import { PrimitiveProps } from '../primitive';
 export type CheckboxProps = PrimitiveProps<ShallowMerge<JSX.IntrinsicElements['input'], {
-    color?: ColorVariant;
+    color?: ColorScale;
     /**
      * using this prop will make the checkbox indeterminate
      * and the checked prop will be ignored

package/dist/lib/chip/README.md

@@ -12,7 +12,7 @@ import { Chip } from '@janbox/storefront-ui';
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `color` | `ColorVariant` | `primary` | Color variant controlling the background (light shade) and border/text (main shade). Accepts `'primary' \| 'secondary' \| 'green' \| 'red' \| 'orange' \| 'blue' \| 'neutral'`. |
+| `color` | `ColorScale` | `primary` | Color variant controlling the background (light shade) and border/text (main shade). Accepts `'primary' \| 'secondary' \| 'green' \| 'red' \| 'orange' \| 'blue' \| 'neutral'`. |
 | `size` | `SizeVariant` | `md` | Base size of the chip controlling height, padding, font size, and border radius. Accepts `'xs' \| 'sm' \| 'md' \| 'lg'`. |
 | `sm` | `ChipResponsiveProps` | - | Responsive size override applied at the sm breakpoint (768px+). Accepts `{ size?: SizeVariant }`. |
 | `md` | `ChipResponsiveProps` | - | Responsive size override applied at the md breakpoint (1280px+). Accepts `{ size?: SizeVariant }`. |

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

@@ -1,11 +1,11 @@
 import { JSX } from 'react';
-import { ColorVariant, ShallowMerge, SizeVariant, ToResponsiveProps } from '../../types';
+import { ColorScale, ShallowMerge, SizeVariant, ToResponsiveProps } from '../../types';
 import { PrimitiveProps } from '../primitive';
 export interface ChipResponsiveProps {
     size?: SizeVariant;
 }
 type ChipExtendedProps = ToResponsiveProps<ChipResponsiveProps> & {
-    color?: ColorVariant;
+    color?: ColorScale;
 };
 export type ChipProps = PrimitiveProps<ShallowMerge<JSX.IntrinsicElements['div'], ChipExtendedProps>>;
 export {};

package/dist/lib/icon-button/types.d.ts

@@ -1,11 +1,11 @@
 import { JSX } from 'react';
 import { IconProps } from '../icon';
-import { ButtonVariant, ColorVariant, SizeVariant, ShallowMerge, PropsWithSx, ToResponsiveProps } from '../../types';
+import { ButtonVariant, ColorScale, SizeVariant, ShallowMerge, PropsWithSx, ToResponsiveProps } from '../../types';
 export type IconButtonResponsiveProps = {
     size?: SizeVariant;
 };
 type IconButtonExtendedProps = PropsWithSx<ToResponsiveProps<IconButtonResponsiveProps> & {
-    color?: ColorVariant;
+    color?: ColorScale;
     variant?: ButtonVariant;
     icon?: IconProps;
     isLoading?: boolean;

package/dist/lib/linear-progress/README.md

@@ -14,7 +14,7 @@ import { LinearProgress } from '@janbox/storefront-ui';
 |------|------|---------|-------------|
 | `value` | `number` | - | Progress value as a percentage (0–100). When omitted, the component falls back to indeterminate mode automatically. |
 | `variant` | `'determinate' \| 'indeterminate'` | - | Explicitly set the progress mode. If not provided, inferred from whether `value` is set: defined value → determinate, undefined value → indeterminate. |
-| `color` | `ColorVariant` | `primary` | Color theme of the progress bar. Accepts any ColorVariant token: `'primary' \| 'secondary' \| 'green' \| 'red' \| 'orange' \| 'blue' \| 'neutral'`. |
+| `color` | `ColorScale` | `primary` | Color theme of the progress bar. Accepts any ColorScale token: `'primary' \| 'secondary' \| 'green' \| 'red' \| 'orange' \| 'blue' \| 'neutral'`. |
 | `size` | `number` | `4` | Height of the progress bar in pixels. Border-radius is automatically set to `size/2` to keep pill shape. |
 | `sm` | `LinearProgressResponsiveProps` | - | Responsive overrides at the `sm` breakpoint (≥768px). Accepts `{ size?: number }`. |
 | `md` | `LinearProgressResponsiveProps` | - | Responsive overrides at the `md` breakpoint (≥1280px). Accepts `{ size?: number }`. |

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

@@ -1,5 +1,5 @@
 import { JSX } from 'react';
-import { ColorVariant, ShallowMerge, ToResponsiveProps } from '../../types';
+import { ColorScale, ShallowMerge, ToResponsiveProps } from '../../types';
 export type LinearProgressResponsiveProps = {
     size?: number;
 };
@@ -7,7 +7,7 @@ type LinearProgressExtendedProps = ToResponsiveProps<LinearProgressResponsivePro
     duration?: number;
     value?: number;
     variant?: 'determinate' | 'indeterminate';
-    color?: ColorVariant;
+    color?: ColorScale;
 };
 export type LinearProgressProps = ShallowMerge<JSX.IntrinsicElements['div'], LinearProgressExtendedProps>;
 export {};

package/dist/lib/loading/README.md

@@ -14,7 +14,7 @@ import { LoadingOverlay } from '@janbox/storefront-ui';
 |------|------|---------|-------------|
 | `isLoading` | `boolean` | false | Controls whether the loading overlay spinner is visible over the content. |
 | `size` | `number` | 32 | Size in pixels for the spinning loader icon and minimum dimensions of the container. |
-| `color` | `ColorVariant` | 'primary' | Color variant for the spinning loader icon. Accepts 'primary' | 'secondary' | 'green' | 'red' | 'orange' | 'blue' | 'neutral'. |
+| `color` | `ColorScale` | 'primary' | Color variant for the spinning loader icon. Accepts 'primary' | 'secondary' | 'green' | 'red' | 'orange' | 'blue' | 'neutral'. |
 | `iconProps` | `PrimitiveProps<JSX.IntrinsicElements['div']>` | - | Additional props passed to the overlay container div that wraps the spinner icon. |
 | `children` | `React.ReactNode` | - | Content rendered beneath the overlay. Visible when isLoading is false; obscured by the spinner when isLoading is true. |
 | `sx` | `ToResponsiveProps<StyledCSS>` | - | Responsive style overrides via the sx prop, inherited from PrimitiveProps. |

package/dist/lib/loading/loading-overlay/types.d.ts

@@ -1,9 +1,9 @@
 import { JSX } from 'react';
-import { ColorVariant, PropsWithSx, ShallowMerge } from '../../../types';
+import { ColorScale, PropsWithSx, ShallowMerge } from '../../../types';
 import { PrimitiveProps } from '../../primitive';
 export type LoadingOverlayProps = ShallowMerge<PrimitiveProps<JSX.IntrinsicElements['div']>, PropsWithSx<{
     isLoading?: boolean;
     size?: number;
-    color?: ColorVariant;
+    color?: ColorScale;
     iconProps?: PrimitiveProps<JSX.IntrinsicElements['div']>;
 }>>;

package/dist/lib/notifications/helpers.d.ts

@@ -1,9 +1,9 @@
-import { ColorVariant } from '../../types';
+import { ColorScale } from '../../types';
 export type NotificationEntry = {
     id: string;
     title: React.ReactNode;
     message?: React.ReactNode;
-    color: ColorVariant;
+    color: ColorScale;
     duration?: number;
     align?: 'left' | 'center' | 'right';
 };

package/dist/lib/price-label/README.md

@@ -22,7 +22,7 @@ import { PriceLabel } from '@janbox/storefront-ui';
 | `exchangePrice` | `PriceLabelEntry` | - | Optional secondary/exchange price displayed below (vertical) or beside (horizontal) the primary price. |
 | `priceProps` | `PrimitiveProps<JSX.IntrinsicElements['span']>` | - | Additional props forwarded to the primary price span element, including sx for style overrides. |
 | `exchangePriceProps` | `PrimitiveProps<JSX.IntrinsicElements['span']>` | - | Additional props forwarded to the exchange price span element, including sx for style overrides. |
-| `color` | `ColorVariant` | `neutral` | Color variant used for the price text. Primary price uses the 600 shade, exchange price uses the 500 shade. |
+| `color` | `ColorScale` | `neutral` | Color variant used for the price text. Primary price uses the 600 shade, exchange price uses the 500 shade. |
 | `orientation` | `'horizontal' \| 'vertical'` | `vertical` | Layout direction of the primary and exchange prices. Vertical stacks them with a line break; horizontal places them side by side. |
 | `showEqual` | `boolean` | `false` | When true, shows the exchange price even if it is equal to the primary price (same currency and value). |
 | `size` | `TypographySizeVariant` | `sm` | Typography size for the primary price. Accepts responsive values via sm/md/lg breakpoint props. Exchange price automatically uses one size smaller. |

package/dist/lib/price-label/types.d.ts

@@ -1,6 +1,6 @@
 import { JSX } from 'react';
 import { TypographySizeVariant } from '../../theme';
-import { ColorVariant, ShallowMerge, ToResponsiveProps } from '../../types';
+import { ColorScale, ShallowMerge, ToResponsiveProps } from '../../types';
 import { PrimitiveProps } from '../primitive';
 export type PriceLabelEntry = {
     currency?: string;
@@ -18,7 +18,7 @@ type PriceLabelExtendedProps = ToResponsiveProps<PriceLabelResponsiveProps> & {
     priceProps?: PrimitiveProps<JSX.IntrinsicElements['span']>;
     exchangePrice?: PriceLabelEntry;
     exchangePriceProps?: PrimitiveProps<JSX.IntrinsicElements['span']>;
-    color?: ColorVariant;
+    color?: ColorScale;
     orientation?: 'horizontal' | 'vertical';
     showEqual?: boolean;
 };

package/dist/lib/radio-button/README.md

@@ -12,7 +12,7 @@ import { RadioButton } from '@janbox/storefront-ui';
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `color` | `ColorVariant` | `'primary'` | Điều khiển màu accent của radio button. Map tới design token color shades qua getColorShadesByVariant. |
+| `color` | `ColorScale` | `'primary'` | Điều khiển màu accent của radio button. Map tới design token color shades qua getColorShadesByVariant. |
 | `containerProps` | `PrimitiveProps<JSX.IntrinsicElements['label']>` | - | Props được forward tới outer label element (Primitive as='label'). Hỗ trợ sx cho responsive styles và tất cả standard label HTML attributes. |
 | `children` | `React.ReactNode` | - | Nội dung label được render bên cạnh radio button checkmark. |
 | `className` | `string` | - | CSS class names bổ sung được apply vào inner input element. |

package/dist/lib/radio-button/types.d.ts

@@ -1,8 +1,8 @@
 import { JSX } from 'react';
-import { ColorVariant, ShallowMerge } from '../../types';
+import { ColorScale, ShallowMerge } from '../../types';
 import { PrimitiveProps } from '../primitive';
 interface RadioButtonExtendedProps {
-    color?: ColorVariant;
+    color?: ColorScale;
     containerProps?: PrimitiveProps<JSX.IntrinsicElements['label']>;
 }
 export type RadioButtonProps = ShallowMerge<JSX.IntrinsicElements['input'], RadioButtonExtendedProps>;

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

@@ -15,7 +15,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. |
-| `colorVariant` | `ColorVariant` | `"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`. |
+| `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. |
 
 *Props bắt buộc
@@ -37,7 +37,7 @@ import { StarRating } from '@janbox/storefront-ui';
 ### Max rating tùy chỉnh và color variant
 
 ```tsx
-<StarRating rating={7} maxRating={10} colorVariant="primary" />
+<StarRating rating={7} maxRating={10} color="primary" />
 ```
 
 ### Ngôi sao đầy và rỗng
@@ -56,9 +56,9 @@ import { StarRating } from '@janbox/storefront-ui';
 
 ## Dependencies
 
-- react (forwardRef, useId)
+- react (useId)
 - @/utils (getColorShadesByVariant)
-- @/types (ColorVariant)
+- @/types (ColorScale)
 
 ## See Also
 

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

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

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

@@ -1,39 +1,37 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef, useId } from "react";
+import { useId } from "react";
 import { getColorShadesByVariant } from "../../utils/index.js";
-const StarRating = forwardRef(
-  ({ rating, maxRating = 5, size = 24, colorVariant = "secondary" }, ref) => {
-    const id = useId();
-    const percent = rating / maxRating * 24;
-    const { main } = getColorShadesByVariant(colorVariant);
-    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
-        }
-      )
-    ] });
-  }
-);
+const StarRating = ({ rating, maxRating = 5, size = 24, ref, color = "primary" }) => {
+  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
+      }
+    )
+  ] });
+};
 export {
   StarRating
 };

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

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

package/dist/lib/swiper/README.md

@@ -20,7 +20,7 @@ import { Swiper } from '@janbox/storefront-ui';
 | `lg` | `{ slidesPerView?: number \| 'auto'; spaceBetween?: number }` | - | Override `slidesPerView` và `spaceBetween` tại breakpoint lg (≥1680px). |
 | `autoplayOptions` | `ShallowMerge<AutoplayOptionsType, { delay?: number }>` | `{ active: false, delay: 3000, stopOnFocusIn: false, stopOnInteraction: false, stopOnLastSnap: false }` | Embla Carousel Autoplay plugin options. Autoplay mặc định không kích hoạt. |
 | `options` | `Partial<SwiperOptions>` | - | Raw Embla Carousel options (e.g. `loop`, `axis`, `align`). Truyền thẳng vào `useEmblaCarousel`. Default `align` là `'start'`. |
-| `paging` | `{ type: 'dots'; color?: ColorVariant; size?: number; spaceBetween?: number; offset?: number } \| { type: 'side-arrows'; color?: ColorVariant; visibility?: 'auto' \| 'always'; anchorSelector?: string; size?: number; offsetX?: number \| 'center'; offsetY?: number \| 'center' }` | - | Cấu hình paging control. Dùng `'dots'` cho dải chấm tròn bên dưới slides, hoặc `'side-arrows'` cho nút prev/next ở hai bên. |
+| `paging` | `{ type: 'dots'; color?: ColorScale; size?: number; spaceBetween?: number; offset?: number } \| { type: 'side-arrows'; color?: ColorScale; visibility?: 'auto' \| 'always'; anchorSelector?: string; size?: number; offsetX?: number \| 'center'; offsetY?: number \| 'center' }` | - | Cấu hình paging control. Dùng `'dots'` cho dải chấm tròn bên dưới slides, hoặc `'side-arrows'` cho nút prev/next ở hai bên. |
 | `onApi` | `(api: EmblaCarouselType) => void` | - | Callback khi Embla Carousel API instance sẵn sàng, cho phép truy cập trực tiếp các carousel methods. |
 | `sx` | `ToResponsiveProps<StyledCSS>` | - | Responsive style overrides áp dụng lên root container của swiper. |
 | `ref` | `React.Ref<HTMLDivElement>` | - | Forwarded ref đến root container element (cũng được forward vào Embla's ref). |

package/dist/lib/swiper/swiper-dots-paging/types.d.ts

@@ -1,4 +1,4 @@
-import { ColorVariant, ToResponsiveProps } from '../../../types';
+import { ColorScale, ToResponsiveProps } from '../../../types';
 import { SwiperApi } from '../swiper/types';
 export type SwiperDotsPagingResponsiveProps = {
     size?: number;
@@ -7,5 +7,5 @@ export type SwiperDotsPagingResponsiveProps = {
 };
 export type SwiperDotsPagingProps = {
     api: SwiperApi;
-    color?: ColorVariant;
+    color?: ColorScale;
 } & ToResponsiveProps<SwiperDotsPagingResponsiveProps>;

package/dist/lib/swiper/swiper-side-arrows-paging/types.d.ts

@@ -1,4 +1,4 @@
-import { ColorVariant, ToResponsiveProps } from '../../../types';
+import { ColorScale, ToResponsiveProps } from '../../../types';
 import { SwiperApi } from '../swiper/types';
 export type SwiperSideArrowsPagingResponsiveProps = {
     size?: number;
@@ -8,7 +8,7 @@ export type SwiperSideArrowsPagingResponsiveProps = {
 export type SwiperSideArrowsPagingVisibility = 'auto' | 'always';
 export type SwiperSideArrowsPagingProps = {
     api: SwiperApi;
-    color?: ColorVariant;
+    color?: ColorScale;
     visibility?: SwiperSideArrowsPagingVisibility;
     anchorSelector?: string;
 } & ToResponsiveProps<SwiperSideArrowsPagingResponsiveProps>;

package/dist/lib/switch/README.md

@@ -12,7 +12,7 @@ import { Switch } from '@janbox/storefront-ui';
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `color` | `ColorVariant` | `'primary'` | Color variant for the checked state. Accepts `'primary'` \| `'secondary'` \| `'green'` \| `'red'` \| `'orange'` \| `'blue'` \| `'neutral'`. |
+| `color` | `ColorScale` | `'primary'` | Color variant for the checked state. Accepts `'primary'` \| `'secondary'` \| `'green'` \| `'red'` \| `'orange'` \| `'blue'` \| `'neutral'`. |
 | `checked` | `boolean` | - | Controlled checked state of the switch. |
 | `defaultChecked` | `boolean` | `false` | Initial checked state for uncontrolled usage. |
 | `disabled` | `boolean` | `false` | Disables the switch and prevents interaction. Renders the knob in a neutral gray and suppresses pointer events. |

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

@@ -1,5 +1,5 @@
 import { JSX } from 'react';
-import { ColorVariant, ShallowMerge } from '../../types';
+import { ColorScale, ShallowMerge } from '../../types';
 export type SwitchProps = ShallowMerge<JSX.IntrinsicElements['input'], {
-    color?: ColorVariant;
+    color?: ColorScale;
 }>;

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/dist/lib/textarea/textarea.js

@@ -1,6 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useRef, useState } from "react";
-import { useMergeRefs } from "@floating-ui/react";
+import { useState, useRef } from "react";
 import { isString } from "lodash-es";
 import { getTextareaProps } from "./helpers.js";
 import { getColorVar } from "../../theme/palette.js";
@@ -26,11 +25,9 @@ const Textarea = ({ ref, ..._props }) => {
     value,
     ...rest
   } = getTextareaProps(_props);
-  const textareaRef = useRef(null);
   const [typingValue, setTypingValue] = useState();
   const timeoutFn = useRef(null);
   const beforeChangeValue = useRef("");
-  const mergedRefs = useMergeRefs([ref, textareaRef]);
   const onChange = (e, force = false) => {
     if (timeoutFn.current) {
       clearTimeout(timeoutFn.current);
@@ -150,7 +147,7 @@ const Textarea = ({ ref, ..._props }) => {
                 className,
                 ...rest,
                 value: typingValue ?? value,
-                ref: mergedRefs,
+                ref,
                 onChange,
                 onBlur,
                 onFocus,

package/dist/theme/create-theme.d.ts

@@ -0,0 +1,26 @@
+import { Palette } from './palette';
+import { ThemeTypography } from './typography';
+import { Theme } from '.';
+export type ColorScaleConfig = {
+    main: string;
+    contrast: string;
+};
+export type CreateThemeConfig = {
+    palette?: {
+        background?: Partial<Palette['background']>;
+        border?: Partial<Palette['border']>;
+        surface?: Partial<Palette['surface']>;
+        primary?: ColorScaleConfig;
+        secondary?: ColorScaleConfig;
+        red?: ColorScaleConfig;
+        orange?: ColorScaleConfig;
+        yellow?: ColorScaleConfig;
+        green?: ColorScaleConfig;
+        blue?: ColorScaleConfig;
+        neutral?: ColorScaleConfig;
+        violet?: ColorScaleConfig;
+    };
+    typography?: ThemeTypography;
+};
+export declare const defaultTheme: Theme;
+export declare const createTheme: (config?: CreateThemeConfig) => Theme;

package/dist/theme/create-theme.js

@@ -0,0 +1,102 @@
+import Color from "color";
+const MIX_RATIOS = {
+  100: 0.1,
+  200: 0.2,
+  300: 0.35,
+  400: 0.55,
+  500: 0.75
+};
+const generateColorScale = (main, contrast, background) => {
+  const center = Color(main);
+  const bg = Color(background);
+  const scale = {};
+  for (const [shade, ratio] of Object.entries(MIX_RATIOS)) {
+    scale[Number(shade)] = bg.mix(center, ratio).hex();
+  }
+  scale[600] = center.hex();
+  const black = Color("#000");
+  scale[700] = center.mix(black, 0.2).hex();
+  scale[800] = center.mix(black, 0.4).hex();
+  scale.contrast = contrast;
+  return scale;
+};
+const DEFAULT_BACKGROUND = "#FFFFFF";
+const DEFAULT_COLOR_CONFIGS = {
+  primary: { main: "#7866ff", contrast: "#FFFFFF" },
+  secondary: { main: "#14B8A6", contrast: "#FFFFFF" },
+  red: { main: "#f5222d", contrast: "#FFFFFF" },
+  orange: { main: "#FA8C16", contrast: "#FFFFFF" },
+  yellow: { main: "#FADB14", contrast: "#FFFFFF" },
+  green: { main: "#389E0D", contrast: "#FFFFFF" },
+  blue: { main: "#0F62FE", contrast: "#FFFFFF" },
+  violet: { main: "#722ED1", contrast: "#FFFFFF" },
+  neutral: { main: "#333333", contrast: "#FFFFFF" }
+};
+const DEFAULT_TYPOGRAPHY = {
+  xs: { fontSize: "0.75rem", lineHeight: "1rem" },
+  sm: { fontSize: "0.875rem", lineHeight: "1.25rem" },
+  base: { fontSize: "1rem", lineHeight: "1.5rem" },
+  lg: { fontSize: "1.125rem", lineHeight: "1.75rem" },
+  xl: { fontSize: "1.25rem", lineHeight: "1.75rem" },
+  "2xl": { fontSize: "1.5rem", lineHeight: "2rem" },
+  "3xl": { fontSize: "1.875rem", lineHeight: "2.25rem" },
+  "4xl": { fontSize: "2.25rem", lineHeight: "2.5rem" },
+  "5xl": { fontSize: "3rem", lineHeight: "3.5rem" },
+  "6xl": { fontSize: "3.75rem", lineHeight: "4.5rem" }
+};
+const buildPalette = (bg, overrides) => {
+  const result = {};
+  for (const key of Object.keys(DEFAULT_COLOR_CONFIGS)) {
+    const cfg = overrides[key] ?? DEFAULT_COLOR_CONFIGS[key];
+    result[key] = generateColorScale(cfg.main, cfg.contrast, bg);
+  }
+  return result;
+};
+const defaultTheme = {
+  palette: {
+    common: {
+      black: "#000000",
+      white: "#FFFFFF"
+    },
+    background: {
+      subtle: "#F0F0F0",
+      default: DEFAULT_BACKGROUND,
+      emphasis: "#F2F2F2"
+    },
+    surface: {
+      default: "#FFFFFF"
+    },
+    border: {
+      default: "#E3E3E3"
+    },
+    ...buildPalette(DEFAULT_BACKGROUND, {})
+  },
+  typography: DEFAULT_TYPOGRAPHY
+};
+const createTheme = (config) => {
+  var _a, _b, _c, _d;
+  if (!config) return defaultTheme;
+  const background = { ...defaultTheme.palette.background, ...(_a = config.palette) == null ? void 0 : _a.background };
+  const bg = background.default;
+  const colorOverrides = {};
+  for (const key of Object.keys(DEFAULT_COLOR_CONFIGS)) {
+    if ((_b = config.palette) == null ? void 0 : _b[key]) {
+      colorOverrides[key] = config.palette[key];
+    }
+  }
+  const palette = {
+    ...defaultTheme.palette,
+    background,
+    border: { ...defaultTheme.palette.border, ...(_c = config.palette) == null ? void 0 : _c.border },
+    surface: { ...defaultTheme.palette.surface, ...(_d = config.palette) == null ? void 0 : _d.surface },
+    ...buildPalette(bg, colorOverrides)
+  };
+  return {
+    palette,
+    typography: config.typography ?? defaultTheme.typography
+  };
+};
+export {
+  createTheme,
+  defaultTheme
+};

package/dist/theme/index.d.ts

@@ -4,6 +4,7 @@ export * from './screens';
 export * from './palette';
 export * from './typography';
 export * from './provider';
+export * from './create-theme';
 export interface Theme {
     palette: Palette;
     typography: ThemeTypography;

package/dist/theme/index.js

@@ -2,12 +2,15 @@ import { breakpoint, containerQuery, getSmallerScreens, mediaQuery, screens } fr
 import { getColorVar, groupedColors, paletteVars, parseColor } from "./palette.js";
 import { getSmallerTypographyVariants, getTypographyVar, typographyVars } from "./typography.js";
 import { ThemeProvider, useTheme } from "./provider.js";
+import { createTheme, defaultTheme } from "./create-theme.js";
 const FLOATING_Z_INDEX = 9999;
 export {
   FLOATING_Z_INDEX,
   ThemeProvider,
   breakpoint,
   containerQuery,
+  createTheme,
+  defaultTheme,
   getColorVar,
   getSmallerScreens,
   getSmallerTypographyVariants,

package/dist/theme/palette.d.ts

@@ -1,10 +1,11 @@
 import { Paths } from 'type-fest';
 export declare const getColorVar: (key: PaletteKey, fullVar?: boolean) => string;
 type Scale = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800;
-type ColorScale = Record<Scale, string> & {
+export type ColorScaleValue = Record<Scale, string> & {
     contrast: string;
 };
-export interface Palette {
+export type ColorScale = 'primary' | 'secondary' | 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'neutral' | 'violet';
+export type Palette = {
     readonly common: {
         readonly black: '#000000';
         readonly white: '#FFFFFF';
@@ -20,16 +21,7 @@ export interface Palette {
     surface: {
         default: string;
     };
-    primary: ColorScale;
-    secondary: ColorScale;
-    red: ColorScale;
-    orange: ColorScale;
-    yellow: ColorScale;
-    green: ColorScale;
-    blue: ColorScale;
-    neutral: ColorScale;
-    violet: ColorScale;
-}
+} & Record<ColorScale, ColorScaleValue>;
 export type PaletteKey = Paths<Palette>;
 export declare const paletteVars: Palette;
 export type GroupedColor = {

package/dist/types/index.d.ts

@@ -6,7 +6,7 @@ export type Dict<T> = Record<string, T>;
 export type ShallowMerge<T1, T2> = Omit<T1, keyof T2> & T2;
 export type ToResponsiveProps<T extends object = object> = T & Partial<Record<Exclude<Screen, 'xs'>, T>>;
 export type SizeVariant = 'xs' | 'sm' | 'md' | 'lg';
-export type ColorVariant = 'primary' | 'secondary' | 'green' | 'red' | 'orange' | 'blue' | 'neutral';
+export type { ColorScale } from '../theme/palette';
 export type ButtonVariant = 'contained' | 'outlined' | 'text';
 export type ProgressDirection = 'horizontal' | 'vertical';
 /**

package/dist/utils/index.d.ts

@@ -1,11 +1,11 @@
 import { ReactElement } from 'react';
-import { Screen, TypographySizeVariant } from '../theme';
-import { SizeVariant, ColorVariant, ToResponsiveProps } from '../types';
+import { Screen, TypographySizeVariant, ColorScale } from '../theme';
+import { SizeVariant, ToResponsiveProps } from '../types';
 import { Get, Paths, SetRequired } from 'type-fest';
 export * from './common';
 export * from './query-params';
 export { createUnderlineEffect } from './stylesheet';
-export declare const getColorShadesByVariant: (variant?: ColorVariant) => {
+export declare const getColorShadesByVariant: (variant?: ColorScale) => {
     main: string;
     contrast: string;
     dark: string;

package/package.json

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