@janbox/storefront-ui 2.0.29 → 2.0.31

package/dist/lib/checkbox/checkbox.js

@@ -1,12 +1,12 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useRef, useEffect } from "react";
 import { useMergeRefs } from "@floating-ui/react";
-import classes from "./checkbox.module.scss.js";
 import { SvgLoader } from "../../components/svg-loader.js";
 import CheckIcon from "../../assets/svg/done-check.svg.js";
 import MinusIcon from "../../assets/svg/minus.svg.js";
 import { getColorShadesByVariant } from "../../utils/index.js";
-import clsx from "clsx";
+import "lodash-es";
+import { getColorVar } from "../../theme/palette.js";
 import { Primitive } from "../primitive/primitive.js";
 const Checkbox = ({
   children,
@@ -17,7 +17,7 @@ const Checkbox = ({
   containerProps,
   ...props
 }) => {
-  const { main, contrastText } = getColorShadesByVariant(color);
+  const { main } = getColorShadesByVariant(color);
   const inputRef = useRef(null);
   const mergedRefs = useMergeRefs([ref, inputRef]);
   useEffect(() => {
@@ -31,20 +31,115 @@ const Checkbox = ({
     {
       as: "label",
       ...containerProps,
-      className: clsx(classes.checkbox__container, containerProps == null ? void 0 : containerProps.className),
       sx: {
         "--checkbox-color": main,
-        "--checkbox-contrast-text": contrastText,
+        display: "flex",
+        alignItems: "center",
+        gap: "0.5rem",
+        cursor: "pointer",
+        width: "fit-content",
+        maxWidth: "100%",
+        "&:has(input:disabled)": {
+          cursor: "default",
+          pointerEvents: "none"
+        },
+        "&:hover .checkbox__main": {
+          "--checkbox-checkmark-color": "var(--checkbox-color)",
+          "& .checkbox__checkmark": {
+            boxShadow: "0 1px 3px 0 currentColor, 0 1px 2px -1px currentColor"
+          }
+        },
         ...containerProps == null ? void 0 : containerProps.sx
       },
       children: [
-        /* @__PURE__ */ jsxs("span", { className: classes.checkbox__main, children: [
-          /* @__PURE__ */ jsx("input", { ...props, type: "checkbox", className: clsx(classes.checkbox__input, className), ref: mergedRefs }),
-          /* @__PURE__ */ jsxs("span", { className: classes.checkbox__checkmark, children: [
-            /* @__PURE__ */ jsx(SvgLoader, { className: classes.checkbox__icon_checked, width: 18, height: 18, source: CheckIcon }),
-            /* @__PURE__ */ jsx(SvgLoader, { className: classes.checkbox__icon_indeterminate, width: 18, height: 18, source: MinusIcon })
-          ] })
-        ] }),
+        /* @__PURE__ */ jsxs(
+          Primitive,
+          {
+            as: "span",
+            className: "checkbox__main",
+            sx: {
+              "--checkbox-checkmark-color": getColorVar("neutral.600"),
+              "--checkbox-checkmark-background": "transparent",
+              "--checkbox-icon-checked-opacity": 0,
+              "--checkbox-icon-indeterminate-opacity": 0,
+              position: "relative",
+              display: "inline-flex",
+              padding: "0.125rem",
+              width: "1.5rem",
+              height: "1.5rem",
+              flexShrink: 0,
+              "&:has(input:checked), &:has(input:indeterminate)": {
+                "--checkbox-checkmark-color": "var(--checkbox-color)",
+                "--checkbox-checkmark-background": "currentColor"
+              },
+              "&:has(input:checked)": {
+                "--checkbox-icon-checked-opacity": 1
+              },
+              "&:has(input:indeterminate)": {
+                "--checkbox-icon-indeterminate-opacity": 1
+              },
+              "&:has(input:disabled)": {
+                "--checkbox-checkmark-color": getColorVar("neutral.300")
+              }
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                Primitive,
+                {
+                  ...props,
+                  type: "checkbox",
+                  className,
+                  ref: mergedRefs,
+                  as: "input",
+                  sx: {
+                    width: 0,
+                    height: 0,
+                    opacity: 0,
+                    display: "none"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                Primitive,
+                {
+                  as: "span",
+                  className: "checkbox__checkmark",
+                  sx: {
+                    position: "relative",
+                    color: "var(--checkbox-checkmark-color)",
+                    backgroundColor: "var(--checkbox-checkmark-background)",
+                    width: "100%",
+                    height: "100%",
+                    borderWidth: 1,
+                    borderStyle: "solid",
+                    borderColor: "currentColor",
+                    borderRadius: "0.25rem",
+                    "& [data-checkbox-icon]": {
+                      color: "white",
+                      position: "absolute",
+                      top: "50%",
+                      left: "50%",
+                      transform: "translate(-50%, -50%)",
+                      transitionProperty: "opacity",
+                      transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+                      transitionDuration: "150ms"
+                    },
+                    '& [data-checkbox-icon="checked"]': {
+                      opacity: "var(--checkbox-icon-checked-opacity)"
+                    },
+                    '& [data-checkbox-icon="indeterminate"]': {
+                      opacity: "var(--checkbox-icon-indeterminate-opacity)"
+                    }
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(SvgLoader, { "data-checkbox-icon": "checked", width: 18, height: 18, source: CheckIcon }),
+                    /* @__PURE__ */ jsx(SvgLoader, { "data-checkbox-icon": "indeterminate", width: 18, height: 18, source: MinusIcon })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
         children
       ]
     }

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

@@ -1,7 +1,7 @@
 import { JSX } from 'react';
 import { ColorVariant, ShallowMerge } from '../../types';
 import { PrimitiveProps } from '../primitive';
-export type CheckboxProps = ShallowMerge<JSX.IntrinsicElements['input'], {
+export type CheckboxProps = PrimitiveProps<ShallowMerge<JSX.IntrinsicElements['input'], {
     color?: ColorVariant;
     /**
      * using this prop will make the checkbox indeterminate
@@ -10,4 +10,4 @@ export type CheckboxProps = ShallowMerge<JSX.IntrinsicElements['input'], {
      */
     indeterminate?: boolean;
     containerProps?: PrimitiveProps<JSX.IntrinsicElements['label']>;
-}>;
+}>, 'input'>;

package/dist/lib/chip/README.md

@@ -0,0 +1,72 @@
+# Chip
+
+A compact label component used to display short status indicators, tags, or categorical information. Supports multiple color variants and responsive size options with a bordered, filled appearance based on the chosen color.
+
+## Import
+
+```tsx
+import { Chip } from '@janbox/storefront-ui';
+```
+
+## Props
+
+| 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'`. |
+| `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 }`. |
+| `lg` | `ChipResponsiveProps` | - | Responsive size override applied at the lg breakpoint (1680px+). Accepts `{ size?: SizeVariant }`. |
+| `sx` | `ToResponsiveProps<StyledCSS>` | - | Escape-hatch for custom Emotion CSS styles, including responsive overrides via `sm`/`md`/`lg` keys. |
+| `children` | `React.ReactNode` | - | Content rendered inside the chip, typically a short label string. |
+
+## Examples
+
+### Color variants
+
+```tsx
+import { Chip } from '@janbox/storefront-ui';
+
+// Primary brand chip
+<Chip color="primary">New</Chip>
+
+// Success / status chip
+<Chip color="green">In Stock</Chip>
+
+// Error / warning chip
+<Chip color="red">Out of Stock</Chip>
+```
+
+### Size variants
+
+```tsx
+import { Chip } from '@janbox/storefront-ui';
+
+<div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+  <Chip size="xs" color="primary">XS</Chip>
+  <Chip size="sm" color="primary">SM</Chip>
+  <Chip size="md" color="primary">MD</Chip>
+  <Chip size="lg" color="primary">LG</Chip>
+</div>
+```
+
+### Responsive size
+
+```tsx
+import { Chip } from '@janbox/storefront-ui';
+
+// Renders xs on mobile, sm on tablet, md on desktop
+<Chip size="xs" sm={{ size: 'sm' }} md={{ size: 'md' }} color="orange">
+  Sale
+</Chip>
+```
+
+## Dependencies
+
+- `@emotion/react`
+
+## See Also
+
+- [Component Source](./index.ts)
+- [Storybook Stories](./chip.stories.tsx)
+- [Main README](../../README.md)

package/dist/lib/collapse/README.md

@@ -0,0 +1,78 @@
+# Collapse
+
+An animated collapse/expand container that smoothly transitions content in and out using height (vertical) or width (horizontal) animation. Useful for accordions, expandable sections, and any show/hide content patterns.
+
+## Import
+
+```tsx
+import { Collapse } from '@janbox/storefront-ui';
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `open` | `boolean` | true | Controls whether the content is expanded (true) or collapsed (false). |
+| `collapsedSize` | `number` | 0 | The size in pixels to collapse to when closed. Defaults to 0 (fully hidden). Use a non-zero value to show a partial peek of the content. |
+| `orientation` | `'horizontal' \| 'vertical'` | 'vertical' | The axis along which the collapse animation occurs. 'vertical' animates height; 'horizontal' animates width. |
+| `transition` | `AnimationProps['transition']` | - | Motion transition config passed to the underlying motion.div. Merged with the default duration of 0.15s. |
+| `children` | `React.ReactNode` | - | Content to show or hide. |
+
+## Examples
+
+### Basic toggle
+
+```tsx
+const [open, setOpen] = useState(false);
+
+<>
+  <button onClick={() => setOpen(v => !v)}>Toggle</button>
+  <Collapse open={open}>
+    <div style={{ padding: 16 }}>
+      <p>Hidden content revealed on toggle.</p>
+    </div>
+  </Collapse>
+</>
+```
+
+### Partial collapse (peek)
+
+```tsx
+const [open, setOpen] = useState(false);
+
+<>
+  <button onClick={() => setOpen(v => !v)}>Show more</button>
+  <Collapse open={open} collapsedSize={40}>
+    <div style={{ padding: 16 }}>
+      <p>First line always visible</p>
+      <p>Second line revealed when expanded</p>
+      <p>Third line revealed when expanded</p>
+    </div>
+  </Collapse>
+</>
+```
+
+### Horizontal collapse
+
+```tsx
+const [open, setOpen] = useState(true);
+
+<div style={{ display: 'flex' }}>
+  <Collapse open={open} orientation="horizontal">
+    <div style={{ padding: 16, whiteSpace: 'nowrap', background: '#f0f0f0' }}>
+      Sidebar content
+    </div>
+  </Collapse>
+  <main>Main content</main>
+</div>
+```
+
+## Dependencies
+
+- motion/react
+
+## See Also
+
+- [Component Source](./index.ts)
+- [Storybook Stories](./collapse.stories.tsx)
+- [Main README](../../README.md)

package/dist/lib/container/README.md

@@ -0,0 +1,59 @@
+# Container
+
+Wrapper layout responsive giúp giới hạn chiều rộng nội dung theo breakpoint và tự động xử lý padding ngang. Component căn giữa nội dung trong viewport bằng cách tính padding hai bên theo breakpoint hiện tại, đồng thời hỗ trợ căn chỉnh vị trí để nội dung có thể tràn ra cạnh trái hoặc phải.
+
+## Import
+
+```tsx
+import { Container } from '@janbox/storefront-ui';
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `position` | `ContainerPosition` | `"center"` | Kiểm soát căn chỉnh ngang và padding của container. `'center'` áp dụng padding đều hai bên, `'start'` bỏ padding trái (nội dung tràn ra cạnh trái), `'end'` bỏ padding phải (nội dung tràn ra cạnh phải). |
+| `sm` | `{ position?: ContainerPosition }` | - | Responsive override tại breakpoint `sm` (min-width: 768px). Nhận giá trị `position` để thay đổi căn chỉnh ở màn hình tablet. |
+| `md` | `{ position?: ContainerPosition }` | - | Responsive override tại breakpoint `md` (min-width: 1280px). Nhận giá trị `position` để thay đổi căn chỉnh ở màn hình desktop. |
+| `lg` | `{ position?: ContainerPosition }` | - | Responsive override tại breakpoint `lg` (min-width: 1680px). Nhận giá trị `position` để thay đổi căn chỉnh ở màn hình large desktop. |
+| `sx` | `ToResponsiveProps<StyledCSS>` | - | Escape hatch để truyền custom Emotion CSS vào wrapper div ngoài cùng. Hỗ trợ responsive keys (`sm`, `md`, `lg`). |
+| `children` | `React.ReactNode` | - | Nội dung render bên trong container. |
+| `...rest` | `JSX.IntrinsicElements['div']` | - | Tất cả HTML div attributes tiêu chuẩn (`className`, `style`, `onClick`, v.v.) được forward xuống div ngoài cùng. |
+
+## Examples
+
+### Container căn giữa mặc định
+
+```tsx
+<Container style={{ background: '#f0f0f0', minHeight: 100 }}>
+  Page content constrained to breakpoint width
+</Container>
+```
+
+### Căn trái (bleed left)
+
+```tsx
+<Container position="start">
+  {/* Bỏ padding trái — nội dung kéo dài ra cạnh viewport bên trái */}
+  <HeroImage />
+</Container>
+```
+
+### Responsive position — căn giữa trên mobile, căn trái trên desktop
+
+```tsx
+<Container position="center" md={{ position: 'start' }}>
+  <SidebarPanel />
+</Container>
+```
+
+## Dependencies
+
+- @emotion/react
+- lodash-es
+
+## See Also
+
+- [Component Source](./index.ts)
+- [Storybook Stories](./container.stories.tsx)
+- [Main README](../../README.md)

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

@@ -0,0 +1,52 @@
+# CountUp
+
+Component đếm số có animation, tự động đếm từ giá trị bắt đầu đến giá trị kết thúc một cách mượt mà. Sử dụng `motion/react` cho animation và tự động format số theo locale. Animation kích hoạt khi component xuất hiện trong viewport.
+
+## Import
+
+```tsx
+import { CountUp } from '@janbox/storefront-ui';
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `to*` | `number` | - | Số đích cần đếm tới |
+| `from` | `number` | 0 | Số bắt đầu đếm |
+| `duration` | `number` | 2 | Thời gian animation tính bằng giây |
+| `formatNumberOptions` | `FormatNumberOptions` | - | Tùy chọn format số (mở rộng từ `Intl.NumberFormatOptions` với thuộc tính `lng`). Kiểm soát số chữ số thập phân, format tiền tệ và các tùy chọn hiển thị số theo locale |
+| `ref` | `React.Ref<HTMLSpanElement>` | - | Ref tới phần tử span bên dưới |
+
+*Prop bắt buộc
+
+## Examples
+
+### Đếm cơ bản
+
+```tsx
+<CountUp to={1000} style={{ fontSize: 32, fontWeight: 'bold' }} />
+```
+
+### Đếm từ giá trị cụ thể với duration tùy chỉnh
+
+```tsx
+<CountUp from={500} to={1000} duration={3} style={{ fontSize: 24 }} />
+```
+
+### Số thập phân với animation chậm
+
+```tsx
+<CountUp from={0} to={99.99} duration={5} style={{ fontSize: 32, fontWeight: 'bold' }} />
+```
+
+## Dependencies
+
+- motion/react
+- @floating-ui/react
+
+## See Also
+
+- [Component Source](./index.ts)
+- [Storybook Stories](./countup.stories.tsx)
+- [Main README](../../README.md)

package/dist/lib/countdown-timer/README.md

@@ -0,0 +1,77 @@
+# CountdownTimer
+
+A headless countdown timer component that counts down to a target date and exposes the remaining time via a render prop. It delegates all UI rendering to the consumer through the `children` function, making it fully customizable for any display format.
+
+## Import
+
+```tsx
+import { CountdownTimer } from '@janbox/storefront-ui';
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `date` | `Date \| string` | `new Date()` | The target date/time to count down to. Accepts a Date object or a date string parseable by dayjs. |
+| `children` | `(timeDiff: TimeDiff) => React.ReactNode` | - | Render prop that receives the current time difference object and returns the UI to display. TimeDiff includes years, months, weeks, days, hours, minutes, seconds, their total counterparts (e.g. totalSeconds), and isFinished. |
+| `onFinish` | `() => void` | - | Callback fired once when the countdown reaches zero (isFinished becomes true). |
+| `omit` | `Partial<Record<'years' \| 'months' \| 'weeks' \| 'days' \| 'hours' \| 'minutes' \| 'seconds', boolean>>` | `{}` | Units to omit from the cascading time calculation. When a unit is omitted its value rolls over into the next smaller unit instead of being subtracted from the running total. |
+
+## Examples
+
+### Basic HH:MM:SS display
+
+```tsx
+<CountdownTimer date={new Date(Date.now() + 60 * 60 * 1000)}>
+  {({ hours, minutes, seconds }) => (
+    <div style={{ fontSize: 24, fontFamily: 'monospace' }}>
+      {String(hours).padStart(2, '0')}:{String(minutes).padStart(2, '0')}:{String(seconds).padStart(2, '0')}
+    </div>
+  )}
+</CountdownTimer>
+```
+
+### Finished state with color change
+
+```tsx
+<CountdownTimer
+  date={new Date(Date.now() + 30 * 1000)}
+  onFinish={() => console.log('Timer done!')}
+>
+  {({ minutes, seconds, isFinished }) => (
+    <div style={{ color: isFinished ? 'red' : 'inherit', fontSize: 24 }}>
+      {isFinished
+        ? "Time's up!"
+        : `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`}
+    </div>
+  )}
+</CountdownTimer>
+```
+
+### Days / Hours / Minutes breakdown
+
+```tsx
+<CountdownTimer date={new Date(Date.now() + 2 * 24 * 60 * 60 * 1000)}>
+  {({ days, hours, minutes }) => (
+    <div style={{ display: 'flex', gap: 16 }}>
+      <div><strong>{days}</strong> days</div>
+      <div><strong>{hours}</strong> hours</div>
+      <div><strong>{minutes}</strong> minutes</div>
+    </div>
+  )}
+</CountdownTimer>
+```
+
+## Related Components
+
+- [useCountdownTimer](../usecountdowntimer/README.md)
+
+## Dependencies
+
+- dayjs
+
+## See Also
+
+- [Component Source](./index.ts)
+- [Storybook Stories](./countdown-timer.stories.tsx)
+- [Main README](../../README.md)

package/dist/lib/date-picker/README.md

@@ -0,0 +1,94 @@
+# DatePicker
+
+A controlled/uncontrolled date picker component that renders a trigger input with a floating calendar popup. Supports optional time selection, date range constraints, clearable state, error/helper text, and responsive sizing.
+
+## Import
+
+```tsx
+import { DatePicker } from '@janbox/storefront-ui';
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `Date \| null` | - | Controlled selected date value. |
+| `defaultValue` | `Date` | - | Uncontrolled initial selected date. |
+| `onChange` | `(date?: Date) => void` | - | Callback fired when the selected date changes. |
+| `placeholder` | `string` | - | Placeholder text shown in the trigger input when no date is selected. |
+| `format` | `string` | `MM/DD/YYYY` | dayjs format string for displaying the selected date. Defaults to `'MM/DD/YYYY'`, or `'MM/DD/YYYY HH:mm'` when `timePicker` is true. |
+| `minDate` | `Date` | - | Minimum selectable date. Dates before this value are disabled in the calendar. |
+| `maxDate` | `Date` | - | Maximum selectable date. Dates after this value are disabled in the calendar. |
+| `timePicker` | `boolean` | `false` | When true, renders a TimePicker below the calendar to allow time selection alongside the date. |
+| `clearable` | `boolean` | `false` | When true and a date is selected, shows a clear (X) icon in the trigger instead of the calendar icon. |
+| `onClear` | `() => void` | - | Callback fired when the clear icon is clicked. |
+| `icon` | `React.ReactNode` | - | Custom icon to render in the trigger suffix area, overriding the default calendar/clear icon. |
+| `open` | `boolean` | - | Controlled open state of the calendar popup. |
+| `onOpenChange` | `UseFloatingOptions['onOpenChange']` | - | Callback fired when the popup open state changes. |
+| `placement` | `Placement` | `bottom-end` | Floating UI placement for the calendar popup. |
+| `size` | `'sm' \| 'md' \| 'lg'` | `md` | Size variant for the trigger input. Responsive: also accepts `sm`, `md`, `lg` breakpoint overrides. |
+| `error` | `boolean` | `false` | Applies error styling to the trigger input. |
+| `helperText` | `string` | - | Helper or error message text rendered below the trigger input via FormHelperText. |
+| `disabled` | `boolean` | `false` | Disables interaction with the trigger input. |
+| `containerProps` | `PropsWithSx<JSX.IntrinsicElements['div']>` | - | Props passed to the outer wrapper div, including `sx` for style overrides. |
+| `sx` | `ToResponsiveProps<StyledCSS>` | - | Responsive Emotion CSS style overrides applied to the outer container. |
+
+## Examples
+
+### Basic date picker with placeholder
+
+```tsx
+<DatePicker
+  placeholder="Select date..."
+  onChange={(date) => console.log(date)}
+/>
+```
+
+### Controlled value with min/max constraints
+
+```tsx
+<DatePicker
+  value={selectedDate}
+  minDate={new Date('2024-01-01')}
+  maxDate={new Date('2024-12-31')}
+  placeholder="Select date..."
+  onChange={(date) => setSelectedDate(date)}
+/>
+```
+
+### Date and time picker with clearable trigger and error state
+
+```tsx
+<DatePicker
+  value={selectedDate}
+  timePicker
+  clearable
+  format="DD/MM/YYYY HH:mm"
+  error={!selectedDate}
+  helperText={!selectedDate ? 'Date is required' : undefined}
+  onClear={() => setSelectedDate(null)}
+  onChange={(date) => setSelectedDate(date)}
+/>
+```
+
+## Related Components
+
+- [TimePicker](../timepicker/README.md)
+- [InputMask](../inputmask/README.md)
+- [Floating](../floating/README.md)
+- [FloatingContent](../floatingcontent/README.md)
+- [FloatingTrigger](../floatingtrigger/README.md)
+- [FormHelperText](../formhelpertext/README.md)
+- [Icon](../icon/README.md)
+
+## Dependencies
+
+- @floating-ui/react
+- dayjs
+- react-date-range
+
+## See Also
+
+- [Component Source](./index.ts)
+- [Storybook Stories](./datepicker.stories.tsx)
+- [Main README](../../README.md)