@janbox/storefront-builder 2.0.24 → 2.0.26

package/dist/hooks/use-toggle.d.ts

@@ -0,0 +1,2 @@
+import { Dispatch, SetStateAction } from 'react';
+export declare function useToggle(defaultValue?: boolean): [boolean, () => void, Dispatch<SetStateAction<boolean>>];

package/dist/index-CpLNXUi2.js

@@ -0,0 +1,4 @@
+import { W as p } from "./toaster-Bx7Helq-.js";
+export {
+  p as WbTooltip
+};

package/dist/index.js

@@ -1,9 +1,9 @@
-import { N as n, c as t } from "./toaster-DMjFxzB_.js";
-import { A as C, e as L, f as T, h as x, i as S, j as A, k as E, l as w, m as R, n as h, F, o as k, p as q, G as B, H as G, q as H, I as M, s as U, t as y, v as V, L as j, w as D, M as z, x as J, y as K, P as O, R as Q, S as X, z as Y, T as Z, E as _, J as $, K as W, O as ee, U as oe, Q as se, V as ae, X as re, Y as de, Z as te, _ as ne, $ as Ne, g as ue, a0 as ie, a1 as pe, a2 as me, a3 as Pe, a4 as ce, a5 as le, a6 as ge, a7 as be, a8 as fe, a9 as ve, u as Ie, aa as Ce, ab as Le, ac as Te, ad as xe, ae as Se, af as Ae, ag as Ee, ah as we, ai as Re, aj as he, ak as Fe, al as ke, am as qe, an as Be, ao as Ge, ap as He, aq as Me } from "./toaster-DMjFxzB_.js";
+import { N as n, c as t } from "./toaster-Bx7Helq-.js";
+import { A as I, e as L, f as T, h as x, i as R, j as S, k as w, l as A, m as E, n as h, o as F, F as U, p as k, q, G as B, H as G, s as H, I as M, t as y, v as V, L as j, w as D, M as z, x as J, y as K, P as O, R as Q, z as X, E as Y, S as Z, J as _, T as $, K as W, O as ee, Q as oe, U as se, V as ae, X as re, Y as de, Z as te, _ as ne, $ as Ne, a0 as ue, a1 as ie, a2 as pe, g as me, a3 as Pe, a4 as ce, a5 as le, a6 as ge, a7 as be, a8 as fe, a9 as ve, aa as Ce, ab as Ie, ac as Le, ad as Te, u as xe, ae as Re, af as Se, ag as we, ah as Ae, ai as Ee, aj as he, ak as Fe, al as Ue, am as ke, an as qe, ao as Be, ap as Ge, aq as He, ar as Me, as as ye, at as Ve, au as je, av as De, aw as ze } from "./toaster-Bx7Helq-.js";
 import "lodash-es";
 import { useRef as N, useEffect as u } from "react";
 import { getTabPanelProps as i, getListItemProps as p } from "@janbox/storefront-ui";
-import { C as ye, a as Ve } from "./index-BBoR6Gy_.js";
+import { C as Ke, a as Oe } from "./composer-DBRKIqu7.js";
 const g = ({ enabled: a, onChange: r }) => {
   const { dom: e } = n((s) => ({ dom: s.dom })), o = N(void 0);
   u(() => {
@@ -23,27 +23,27 @@ const g = ({ enabled: a, onChange: r }) => {
   transform: p
 });
 export {
-  C as AccordionContentNode,
+  I as AccordionContentNode,
   L as AccordionGroupNode,
   T as AccordionNode,
   x as AccordionSummaryNode,
-  S as BoxNode,
-  A as ButtonNode,
-  ye as Canvas,
-  E as CanvasPlaceholder,
-  w as CellNode,
-  Ve as Composer,
-  R as ContainerNode,
-  h as CountdownTimerNode,
-  F as FlexItemNode,
+  R as BoxNode,
+  S as ButtonNode,
+  Ke as Canvas,
+  w as CanvasPlaceholder,
+  A as CellNode,
+  Oe as Composer,
+  E as ContainerNode,
+  h as CountUpNode,
+  F as CountdownTimerNode,
+  U as FlexItemNode,
   k as FlexboxNode,
   q as FragmentNode,
   B as GridNode,
   G as Heading,
   H as HeadingNode,
   M as IconNode,
-  U as ImageNode,
-  y as InlineInspector,
+  y as ImageNode,
   V as InlineNode,
   j as LinkNode,
   D as ListItemNode,
@@ -51,54 +51,60 @@ export {
   J as MarqueeNode,
   K as NodeElement,
   O as ParagraphNode,
-  Q as RootNode,
-  X as SwiperNode,
-  Y as SwiperSlideNode,
-  Z as TabContentNode,
-  _ as TabListNode,
-  $ as TabNode,
-  W as TabPanelNode,
-  ee as TabsNode,
-  oe as UnknownNode,
-  se as UnorderedListNode,
-  ae as VideoNode,
-  re as defineNode,
-  de as getNodeCustom,
-  te as getNodeDisplayName,
-  ne as getNodeInfo,
-  Ne as getNodeRelated,
-  ue as getNodeResolved,
-  ie as isNodeSelectable,
-  pe as parseNumber,
-  me as parseSvgString,
-  Pe as registerNodeRelated,
-  ce as toResponsiveCss,
-  le as useAccordionGroupNodeProps,
-  ge as useAccordionNodeProps,
-  be as useBoxNodeProps,
-  fe as useButtonNodeProps,
-  ve as useCellNodeProps,
-  Ie as useComposer,
-  Ce as useContainerNodeProps,
-  Le as useCountdownTimerNodeProps,
-  Te as useFlexItemNodeProps,
-  xe as useFlexboxNodeProps,
-  Se as useGridNodeProps,
-  Ae as useHeadingNodeProps,
-  Ee as useIconNodeProps,
-  we as useImageNodeProps,
-  Re as useLinkNodeProps,
+  Q as Rating,
+  X as RatingNode,
+  Y as RootNode,
+  Z as SwiperNode,
+  _ as SwiperSlideNode,
+  $ as TabContentNode,
+  W as TabListNode,
+  ee as TabNode,
+  oe as TabPanelNode,
+  se as TabsNode,
+  ae as UnknownNode,
+  re as UnorderedListNode,
+  de as VideoNode,
+  te as defaultProps,
+  ne as defineNode,
+  Ne as getNodeCustom,
+  ue as getNodeDisplayName,
+  ie as getNodeInfo,
+  pe as getNodeRelated,
+  me as getNodeResolved,
+  Pe as getRatingProps,
+  ce as isNodeSelectable,
+  le as parseNumber,
+  ge as parseSvgString,
+  be as registerNodeRelated,
+  fe as toResponsiveCss,
+  ve as useAccordionGroupNodeProps,
+  Ce as useAccordionNodeProps,
+  Ie as useBoxNodeProps,
+  Le as useButtonNodeProps,
+  Te as useCellNodeProps,
+  xe as useComposer,
+  Re as useContainerNodeProps,
+  Se as useCountUpNodeProps,
+  we as useCountdownTimerNodeProps,
+  Ae as useFlexItemNodeProps,
+  Ee as useFlexboxNodeProps,
+  he as useGridNodeProps,
+  Fe as useHeadingNodeProps,
+  Ue as useIconNodeProps,
+  ke as useImageNodeProps,
+  qe as useLinkNodeProps,
   f as useListItemNodeProps,
-  he as useMarqueeNodeProps,
+  Be as useMarqueeNodeProps,
   n as useNode,
   g as useNodeContentEditable,
-  Fe as useNodeDataAttributes,
+  Ge as useNodeDataAttributes,
   t as useNodeProps,
-  ke as useParagraphNodeProps,
-  qe as useSwiperNodeProps,
-  Be as useTabNodeProps,
+  He as useParagraphNodeProps,
+  Me as useRatingNodeProps,
+  ye as useSwiperNodeProps,
+  Ve as useTabNodeProps,
   b as useTabPanelNodeProps,
-  Ge as useTabsNodeProps,
-  He as useUnorderedListNodeProps,
-  Me as useVideoNodeProps
+  je as useTabsNodeProps,
+  De as useUnorderedListNodeProps,
+  ze as useVideoNodeProps
 };

package/dist/lib/count-up/README.md

@@ -0,0 +1,129 @@
+# CountUpNode
+
+Hiển thị con số chạy tăng dần (animate từ `from` đến `to`) — render ra component `CountUp` của `@janbox/storefront-ui`. Dùng cho số liệu thống kê, thành tựu, KPI... Không phải canvas node — không chứa node con.
+
+## Resolved name
+
+`CountUp` (displayName: `Count up`)
+
+## Cấu trúc
+
+```text
+count-up/
+├── count-up.node/       # CraftJS node bọc quanh <CountUp />
+│   ├── count-up.node.tsx
+│   ├── types.ts         # CountUpNodeProps
+│   └── helpers.ts       # useCountUpNodeProps (transform = getCountUpProps)
+└── count-up.inspector/  # Panel chỉnh sửa trong editor
+```
+
+`CountUpNode` lo phần CraftJS (connectors, data attributes) rồi delegate xuống `CountUp`. Trong editor (`enabled`) thì `startOnView` bị tắt để số luôn hiển thị giá trị cuối; ở trang thật thì animate khi cuộn tới.
+
+## Configurable props
+
+### Top-level props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `to` | `number` | — | Giá trị kết thúc. **Bắt buộc** |
+| `from` | `number` | `0` | Giá trị bắt đầu |
+| `duration` | `number` | `2` | Thời lượng animate (giây) |
+| `prefix` | `ReactNode` | — | Nội dung hiển thị trước số (VD `+`, `$`) |
+| `suffix` | `ReactNode` | — | Nội dung hiển thị sau số (VD `%`, `k`) |
+| `startOnView` | `boolean` | `true` | Chỉ animate khi element cuộn vào viewport (tự tắt trong editor) |
+| `formatNumberOptions` | `FormatNumberOptions` | — | Tùy chọn format số (phân tách hàng nghìn, số thập phân...) |
+| `sizeVariant` | `TypographySizeVariant` | — | Cỡ chữ theo hệ typography. Hỗ trợ responsive qua `sm`, `md`, `lg` |
+
+Ngoài ra kế thừa toàn bộ props của `motion.span` (`HTMLMotionProps<'span'>`) — có thể truyền `className`, `onClick`, animation props của Motion...
+
+`sizeVariant` responsive: `sizeVariant="xl"` trên mobile, `md={{ sizeVariant: '2xl' }}` phóng to trên desktop.
+
+### `sx` props
+
+```ts
+sx?: {
+  // typography
+  color?: string
+  fontWeight?: number | string
+  fontStyle?: string
+  textDecorationLine?: string
+  textAlign?: 'left' | 'center' | 'right'
+  textTransform?: 'none' | 'uppercase' | 'lowercase' | 'capitalize'
+
+  // border
+  borderStyle?: string
+  borderColor?: string
+  borderTopWidth?: number
+  borderRightWidth?: number
+  borderBottomWidth?: number
+  borderLeftWidth?: number
+  borderTopLeftRadius?: number | string
+  borderTopRightRadius?: number | string
+  borderBottomRightRadius?: number | string
+  borderBottomLeftRadius?: number | string
+
+  // background
+  backgroundColor?: string
+  backgroundImage?: string
+  backgroundPosition?: string
+  backgroundRepeat?: string
+  backgroundSize?: string
+  backgroundAttachment?: string
+  background?: string
+
+  // responsive overrides
+  sm?: { /* same keys above */ }
+  md?: { /* same keys above */ }
+  lg?: { /* same keys above */ }
+}
+```
+
+## Usage
+
+```tsx
+import { CountUpNode } from '@janbox/storefront-builder';
+
+// Cơ bản — chạy từ 0 đến 100
+<CountUpNode from={0} to={100} />
+
+// Có prefix/suffix
+<CountUpNode from={0} to={1000} prefix="+" suffix="k" />
+
+// Tùy chỉnh thời lượng + cỡ chữ responsive
+<CountUpNode
+  from={0}
+  to={98}
+  suffix="%"
+  duration={3}
+  sizeVariant="xl"
+  md={{ sizeVariant: '3xl' }}
+/>
+
+// Style qua sx
+<CountUpNode
+  from={0}
+  to={500}
+  sx={{
+    color: '#f59e0b',
+    fontWeight: 700,
+    textAlign: 'center',
+  }}
+/>
+```
+
+## Editor (Inspector)
+
+### Tab Settings
+
+- **Config**: From, To, Duration (s), Prefix, Suffix
+- **Text style**: Size variant, Color, Style (weight/italic/underline), Text align, Text transform, Font weight
+
+### Tab Advanced
+
+- **Shape**: Border, Border radius
+- **Background**: Background
+
+## Rules
+
+- **Canvas**: no — không chứa node con.
+- Các prop đều có default qua `getCountUpProps` của `@janbox/storefront-ui`.

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

@@ -0,0 +1,2 @@
+import { CountUpNodeProps } from './types';
+export declare const CountUpNode: (props: CountUpNodeProps) => import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,3 @@
+import { CountUpNodeProps } from './types';
+import { useNodeProps } from '../../../hooks';
+export declare const useCountUpNodeProps: () => ReturnType<typeof useNodeProps<CountUpNodeProps>>;

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

@@ -0,0 +1,3 @@
+export * from './count-up.node';
+export * from './types';
+export * from './helpers';

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

@@ -0,0 +1,2 @@
+import { CountUpProps } from '@janbox/storefront-ui';
+export type CountUpNodeProps = CountUpProps;

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

@@ -0,0 +1 @@
+export * from './count-up.node';

package/dist/lib/icon/README.md

@@ -10,10 +10,10 @@ SVG icon node. Render inline SVG từ raw string hoặc URL.
 
 ### Top-level props
 
-| Prop | Type | Description |
-| --- | --- | --- |
-| `source` | `string` | Raw SVG string hoặc URL tới file SVG |
-| `size` | `number` | Kích thước icon (px) — set cả `width` và `height` |
+| Prop     | Type     | Description                                       |
+| -------- | -------- | ------------------------------------------------- |
+| `source` | `string` | Raw SVG string hoặc URL tới file SVG              |
+| `size`   | `number` | Kích thước icon (px) — set cả `width` và `height` |
 
 `size` hỗ trợ responsive: `size={24}` xs, `md={{ size: 32 }}` desktop.
 
@@ -25,10 +25,6 @@ sx?: {
   color?: string
 
   // spacing
-  paddingTop?: number
-  paddingRight?: number
-  paddingBottom?: number
-  paddingLeft?: number
   marginTop?: number
   marginRight?: number
   marginBottom?: number
@@ -73,21 +69,16 @@ import { IconNode } from '@janbox/storefront-builder';
   sx={{ color: '#fa8c16' }}
 />
 
-// Icon với background tròn
+// Icon với border radius tròn
 <IconNode
   source='<svg>...</svg>'
   size={16}
   sx={{
     color: '#ffffff',
-    paddingTop: 8,
-    paddingBottom: 8,
-    paddingLeft: 8,
-    paddingRight: 8,
-    backgroundColor: '#fa8c16',
-    borderTopLeftRadius: '50%',
-    borderTopRightRadius: '50%',
-    borderBottomLeftRadius: '50%',
-    borderBottomRightRadius: '50%',
+    borderTopLeftRadius: 9999,
+    borderTopRightRadius: 9999,
+    borderBottomLeftRadius: 9999,
+    borderBottomRightRadius: 9999,
   }}
 />
 ```

package/dist/lib/index.d.ts

@@ -31,3 +31,5 @@ export * from './video';
 export * from './box';
 export * from './container';
 export * from './countdown-timer';
+export * from './count-up';
+export * from './rating';

package/dist/lib/inline/index.d.ts

@@ -1,2 +1 @@
 export * from './inline.node';
-export * from './inline.inspector';

package/dist/lib/rating/README.md

@@ -0,0 +1,126 @@
+# RatingNode
+
+Hiển thị dải sao đánh giá (render ra chuỗi `StarRating` của `@janbox/storefront-ui`). Hỗ trợ rating thập phân (sao được fill một phần), số lượng sao tùy chỉnh, kích thước responsive và màu tùy ý. Không phải canvas node — không chứa node con.
+
+## Resolved name
+
+`Rating` (displayName: `Rating`)
+
+## Cấu trúc
+
+```text
+rating/
+├── rating/            # Component thuần túy (không phụ thuộc CraftJS)
+│   ├── rating.tsx     # <Rating /> — render Primitive + danh sách StarRating
+│   ├── types.ts       # RatingProps
+│   └── helpers.ts     # defaultProps + getRatingProps (merge default)
+├── rating.node/       # CraftJS node bọc quanh <Rating />
+│   ├── rating.node.tsx
+│   ├── types.ts       # RatingNodeProps = RatingProps
+│   └── helpers.ts     # useRatingNodeProps (transform = getRatingProps)
+└── rating.inspector/  # Panel chỉnh sửa trong editor
+```
+
+`RatingNode` chỉ lo phần CraftJS (connectors, data attributes) rồi delegate xuống component `Rating`.
+
+## Configurable props
+
+### Top-level props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `rating` | `number` | `5` | Giá trị rating hiện tại, hỗ trợ thập phân (VD `3.5` fill nửa sao). **Bắt buộc** |
+| `count` | `number` | `5` | Số lượng sao hiển thị |
+| `size` | `number` | `24` | Kích thước mỗi sao (px). Hỗ trợ responsive qua `sm`, `md`, `lg` |
+| `color` | `string` | `orange.600` | Màu áp dụng cho tất cả sao (CSS color string) |
+
+`size` responsive: `size={20}` trên mobile, `md={{ size: 32 }}` phóng to trên desktop.
+
+### `sx` props
+
+```ts
+sx?: {
+  // spacing giữa các sao
+  columnGap?: number
+
+  // spacing ngoài/trong
+  marginTop?: number
+  marginRight?: number
+  marginBottom?: number
+  marginLeft?: number
+  paddingTop?: number
+  paddingRight?: number
+  paddingBottom?: number
+  paddingLeft?: number
+
+  // border
+  borderStyle?: string
+  borderColor?: string
+  borderTopWidth?: number
+  borderRightWidth?: number
+  borderBottomWidth?: number
+  borderLeftWidth?: number
+  borderTopLeftRadius?: number | string
+  borderTopRightRadius?: number | string
+  borderBottomRightRadius?: number | string
+  borderBottomLeftRadius?: number | string
+
+  // background
+  backgroundColor?: string
+  backgroundImage?: string
+  backgroundPosition?: string
+  backgroundRepeat?: string
+  backgroundSize?: string
+  backgroundAttachment?: string
+  background?: string
+
+  // responsive overrides
+  sm?: { /* same keys above */ }
+  md?: { /* same keys above */ }
+  lg?: { /* same keys above */ }
+}
+```
+
+Container render `display: flex` với `width: fit-content`, nên `columnGap` là khoảng cách giữa các sao.
+
+## Usage
+
+```tsx
+import { RatingNode } from '@janbox/storefront-builder';
+
+// Cơ bản — 5 sao, rating 4.5
+<RatingNode rating={4.5} />
+
+// Tùy chỉnh số sao, kích thước, màu
+<RatingNode rating={3} count={5} size={28} color="#f59e0b" />
+
+// Size responsive
+<RatingNode rating={4} size={20} md={{ size: 32 }} />
+
+// Điều chỉnh khoảng cách giữa các sao + spacing ngoài
+<RatingNode
+  rating={4.5}
+  sx={{
+    columnGap: 8,
+    marginTop: 12,
+    marginBottom: 12,
+  }}
+/>
+```
+
+## Editor (Inspector)
+
+### Tab Settings
+
+- **Config**: Rating, Count, Size (responsive), Color (color picker), Column gap
+- **Spacing (px)**: Margin, Padding (responsive)
+
+### Tab Advanced
+
+- **Shape**: Border, Border radius
+- **Background**: Background
+
+## Rules
+
+- **Canvas**: no — không chứa node con.
+- `rating` là prop bắt buộc; các prop còn lại có default qua `getRatingProps`.

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

@@ -0,0 +1,2 @@
+export * from './rating';
+export * from './rating.node';

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

@@ -0,0 +1,4 @@
+import { RatingProps } from './types';
+export declare const defaultProps: Partial<RatingProps>;
+/** Gán giá trị mặc định cho các prop bị bỏ trống. */
+export declare const getRatingProps: (props: RatingProps) => RatingProps;

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

@@ -0,0 +1,3 @@
+export * from './rating';
+export * from './types';
+export * from './helpers';

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

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

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

@@ -0,0 +1,10 @@
+import { PrimitiveProps, StarRatingResponsiveProps } from '@janbox/storefront-ui';
+import { ToResponsiveProps } from '@janbox/storefront-ui/types';
+export type RatingProps = ToResponsiveProps<StarRatingResponsiveProps> & PrimitiveProps & {
+    /** Giá trị rating hiện tại (hỗ trợ số thập phân, VD: 3.5). */
+    rating: number;
+    /** Số lượng ngôi sao hiển thị. */
+    count?: number;
+    /** Màu áp dụng cho tất cả ngôi sao (CSS color string). */
+    color?: string;
+};

package/dist/lib/rating/rating.node/helpers.d.ts

@@ -0,0 +1,3 @@
+import { RatingNodeProps } from './types';
+import { useNodeProps } from '../../../hooks';
+export declare const useRatingNodeProps: () => ReturnType<typeof useNodeProps<RatingNodeProps>>;

package/dist/lib/rating/rating.node/index.d.ts

@@ -0,0 +1,3 @@
+export * from './rating.node';
+export * from './types';
+export * from './helpers';

package/dist/lib/rating/rating.node/rating.node.d.ts

@@ -0,0 +1,2 @@
+import { RatingNodeProps } from './types';
+export declare const RatingNode: (props: RatingNodeProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/lib/rating/rating.node/types.d.ts

@@ -0,0 +1,2 @@
+import { RatingProps } from '../rating/types';
+export type RatingNodeProps = RatingProps;