@janbox/storefront-ui 2.0.29 → 2.0.30

package/dist/lib/accordion/README.md

@@ -0,0 +1,81 @@
+# Accordion
+
+Component panel nội dung có thể thu gọn, hiển thị hoặc ẩn nội dung khi người dùng click vào phần summary. Hỗ trợ cả controlled và uncontrolled open state, có thể kết hợp với AccordionGroup để kiểm soát hành vi mở đơn hoặc nhiều panel cùng lúc.
+
+## Import
+
+```tsx
+import { Accordion } from '@janbox/storefront-ui';
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `open` | `boolean` | - | Controlled open state. Khi được cung cấp, component chuyển sang controlled mode. |
+| `defaultOpen` | `boolean` | `false` | Trạng thái mở ban đầu cho uncontrolled usage. |
+| `onOpenChange` | `(open: boolean) => void` | - | Callback được gọi khi trạng thái mở thay đổi. |
+| `children` | `React.ReactNode` | - | Nội dung accordion — thường là AccordionSummary và AccordionContent. |
+| `sx` | `ToResponsiveProps<StyledCSS>` | - | Responsive style overrides thông qua sx prop (kế thừa từ PrimitiveProps). |
+| `className` | `string` | - | CSS class names bổ sung áp dụng cho root div. |
+| `ref` | `React.Ref<HTMLDivElement>` | - | Forwarded ref tới root div element. |
+
+## Examples
+
+### Default (uncontrolled)
+
+```tsx
+<Accordion style={{ width: 400 }}>
+  <AccordionSummary>What is React?</AccordionSummary>
+  <AccordionContent>
+    React is a JavaScript library for building user interfaces.
+  </AccordionContent>
+</Accordion>
+```
+
+### Default open
+
+```tsx
+<Accordion defaultOpen style={{ width: 400 }}>
+  <AccordionSummary>What is React?</AccordionSummary>
+  <AccordionContent>
+    React is a JavaScript library for building user interfaces.
+  </AccordionContent>
+</Accordion>
+```
+
+### Group with single open mode
+
+```tsx
+<AccordionGroup openMode="single" style={{ width: 400 }}>
+  <Accordion>
+    <AccordionSummary>Section 1</AccordionSummary>
+    <AccordionContent>Content for section 1</AccordionContent>
+  </Accordion>
+  <Accordion>
+    <AccordionSummary>Section 2</AccordionSummary>
+    <AccordionContent>Content for section 2</AccordionContent>
+  </Accordion>
+  <Accordion>
+    <AccordionSummary>Section 3</AccordionSummary>
+    <AccordionContent>Content for section 3</AccordionContent>
+  </Accordion>
+</AccordionGroup>
+```
+
+## Related Components
+
+- [Icon](../icon/README.md)
+- [Primitive](../primitive/README.md)
+
+## Dependencies
+
+- motion/react
+- @floating-ui/react
+- lodash-es
+
+## See Also
+
+- [Component Source](./index.ts)
+- [Storybook Stories](./accordion.stories.tsx)
+- [Main README](../../README.md)

package/dist/lib/avatar/README.md

@@ -0,0 +1,74 @@
+# Avatar
+
+A circular user avatar component that displays a profile image with graceful fallback to name initials. Supports online status indicators, custom sizing, responsive props, and color variants for the initials background.
+
+## Import
+
+```tsx
+import { Avatar } from '@janbox/storefront-ui';
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `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. |
+| `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). |
+| `lg` | `{ size?: number }` | - | Responsive overrides applied at the lg breakpoint (≥1680px). |
+| `sx` | `ToResponsiveProps<StyledCSS>` | - | Escape hatch for custom Emotion CSS styles, including responsive overrides via `sx.sm` / `sx.md` / `sx.lg`. |
+
+## Examples
+
+### With image
+
+```tsx
+<Avatar
+  src="https://i.pravatar.cc/150?img=3"
+  name="Alice Johnson"
+  size={40}
+/>
+```
+
+### Initials fallback with status indicator
+
+```tsx
+<Avatar
+  name="Bob Smith"
+  color="secondary"
+  size={48}
+  status="online"
+/>
+```
+
+### All status variants
+
+```tsx
+(['online', 'offline', 'busy', 'away'] as const).map((status) => (
+  <Avatar
+    key={status}
+    src="https://i.pravatar.cc/150?img=5"
+    name="Diana Ross"
+    size={64}
+    status={status}
+  />
+))
+```
+
+## Related Components
+
+- [Primitive](../primitive/README.md)
+
+## Dependencies
+
+- lodash-es
+
+## See Also
+
+- [Component Source](./index.ts)
+- [Storybook Stories](./avatar.stories.tsx)
+- [Main README](../../README.md)

package/dist/lib/badge/README.md

@@ -0,0 +1,58 @@
+# Badge
+
+A floating badge component that overlays a count or label on a child element, anchored to its top-end corner. Commonly used to display notification counts, message indicators, or status markers on icons and buttons.
+
+## Import
+
+```tsx
+import { Badge } from '@janbox/storefront-ui';
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `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'`). |
+| `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. |
+
+*Required props
+
+## Examples
+
+### Default notification badge
+
+```tsx
+<Badge content={5}>
+  <span>Notifications</span>
+</Badge>
+```
+
+### Colored badge on a button
+
+```tsx
+<Badge content={3} color="red">
+  <Button>Messages</Button>
+</Badge>
+```
+
+### Badge with position offset
+
+```tsx
+<Badge content={99} color="primary" offset={{ x: -4, y: 4 }}>
+  <IconButton icon={BellIcon} />
+</Badge>
+```
+
+## Dependencies
+
+- @floating-ui/react
+- lodash-es
+
+## See Also
+
+- [Component Source](./index.ts)
+- [Storybook Stories](./badge.stories.tsx)
+- [Main README](../../README.md)

package/dist/lib/box/README.md

@@ -0,0 +1,69 @@
+# Box
+
+A general-purpose layout primitive that renders a `div` by default. It supports responsive `sx` styling and an optional `container` mode that applies responsive max-width, horizontal centering, and breakpoint-aware padding.
+
+## Import
+
+```tsx
+import { Box } from '@janbox/storefront-ui';
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `container` | `boolean` | false | When true, applies responsive container styles: full width, auto horizontal margins, and breakpoint-aware max-width and padding (xs → sm → md → lg). |
+| `sx` | `ToResponsiveProps<StyledCSS>` | - | Responsive Emotion CSS overrides. Accepts a base StyledCSS object plus optional `sm`, `md`, and `lg` breakpoint keys for responsive styles. |
+| `as` | `HTMLElementType` | "div" | Override the rendered HTML element (polymorphic). Defaults to `div`. |
+| `children` | `React.ReactNode` | - | Content rendered inside the Box. |
+| `className` | `string` | - | Additional CSS class names applied to the root element. |
+| `style` | `React.CSSProperties` | - | Inline styles applied to the root element. |
+| `ref` | `React.Ref<HTMLDivElement>` | - | Forwarded ref to the underlying DOM element. |
+
+## Examples
+
+### Basic Box
+
+```tsx
+<Box style={{ padding: 16, border: '1px solid #ccc' }}>
+  Box content
+</Box>
+```
+
+### Container Box
+
+```tsx
+<Box container>
+  <h1>Page title</h1>
+  <p>Centered, max-width constrained content with responsive padding.</p>
+</Box>
+```
+
+### Responsive sx styling
+
+```tsx
+<Box
+  sx={{
+    backgroundColor: 'var(--color-neutral-100)',
+    padding: 12,
+    md: { padding: 24, display: 'flex', gap: 16 },
+    lg: { padding: 32 },
+  }}
+>
+  Responsive layout
+</Box>
+```
+
+## Related Components
+
+- [Primitive](../primitive/README.md)
+
+## Dependencies
+
+- @emotion/react
+
+## See Also
+
+- [Component Source](./index.ts)
+- [Storybook Stories](./box.stories.tsx)
+- [Main README](../../README.md)

package/dist/lib/breadcrumbs/README.md

@@ -0,0 +1,70 @@
+# Breadcrumbs
+
+A navigation aid component that displays a hierarchy of links showing the user's current location within the app. It renders BreadcrumbItem children separated by a configurable separator and supports color theming for hover states.
+
+## Import
+
+```tsx
+import { Breadcrumbs } from '@janbox/storefront-ui';
+```
+
+## Props
+
+| 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'`. |
+| `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. |
+| `BreadcrumbItem.underline` | `boolean` | - | (BreadcrumbItem prop, inherited from Link) Whether to show an underline on the link. |
+| `BreadcrumbItem.textVariant` | `TypographySizeVariant` | - | (BreadcrumbItem prop, inherited from Link) Typography size variant for the link text. |
+
+## Examples
+
+### Default
+
+```tsx
+<Breadcrumbs>
+  <BreadcrumbItem to="/">Home</BreadcrumbItem>
+  <BreadcrumbItem to="/products">Products</BreadcrumbItem>
+  <BreadcrumbItem to="/products/detail">Detail</BreadcrumbItem>
+</Breadcrumbs>
+```
+
+### WithCustomSeparator
+
+```tsx
+<Breadcrumbs separator="/">
+  <BreadcrumbItem to="/">Home</BreadcrumbItem>
+  <BreadcrumbItem to="/products">Products</BreadcrumbItem>
+  <BreadcrumbItem to="/products/detail">Detail</BreadcrumbItem>
+</Breadcrumbs>
+```
+
+### WithColor
+
+```tsx
+<Breadcrumbs color="primary">
+  <BreadcrumbItem to="/">Home</BreadcrumbItem>
+  <BreadcrumbItem to="/products">Products</BreadcrumbItem>
+  <BreadcrumbItem to="/products/detail">Detail</BreadcrumbItem>
+</Breadcrumbs>
+```
+
+## Related Components
+
+- [Link](../link/README.md)
+- [Icon](../icon/README.md)
+
+## Dependencies
+
+- lodash-es
+- react-router
+- @emotion/react
+
+## See Also
+
+- [Component Source](./index.ts)
+- [Storybook Stories](./breadcrumbs.stories.tsx)
+- [Main README](../../README.md)

package/dist/lib/button/README.md

@@ -0,0 +1,115 @@
+# Button
+
+A versatile button component that supports multiple variants (contained, outlined, text), colors, sizes, loading states, icons, and navigation through React Router integration. It includes ripple effects for enhanced user interaction feedback.
+
+## Import
+
+```tsx
+import { Button } from '@janbox/storefront-ui';
+```
+
+## Props
+
+| 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' |
+| `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) |
+| `lg` | `ButtonResponsiveProps` | - | Responsive props override for large screens (≥1680px) |
+| `isLoading` | `boolean` | - | Shows loading spinner and disables interaction. Hides button content while loading |
+| `disabled` | `boolean` | - | Disables the button and applies disabled styling |
+| `startIcon` | `IconProps` | - | Icon component props to display before the button text |
+| `endIcon` | `IconProps` | - | Icon component props to display after the button text |
+| `prefix` | `React.ReactNode` | - | Custom content to render before button content (for advanced use cases) |
+| `suffix` | `React.ReactNode` | - | Custom content to render after button content (for advanced use cases) |
+| `anchor` | `RouterNavigateOptions & { to?: LinkProps['to']; target?: LinkProps['target'] }` | - | Navigation configuration using React Router. Supports internal routes and external URLs. Use target='_blank' for new tabs |
+| `sx` | `ToResponsiveProps<StyledCSS>` | - | Custom Emotion CSS styles with responsive breakpoint support |
+| `children` | `React.ReactNode` | - | Button content (text or React elements) |
+| `type` | `string` | button | HTML button type attribute |
+| `onClick` | `(e: React.MouseEvent<HTMLButtonElement>) => void` | - | Click event handler. Called before navigation if anchor is provided |
+
+## Examples
+
+### Basic Button with Variants
+
+```tsx
+import { Button } from '@janbox/storefront-ui';
+
+<Button variant="contained" color="primary">
+  Click Me
+</Button>
+
+<Button variant="outlined" color="secondary">
+  Outlined
+</Button>
+
+<Button variant="text" color="neutral">
+  Text Button
+</Button>
+```
+
+### Button with Icons and Loading State
+
+```tsx
+import { Button } from '@janbox/storefront-ui';
+import CheckIcon from './icons/check.svg?raw';
+import ArrowIcon from './icons/arrow.svg?raw';
+
+<Button
+  startIcon={{ source: CheckIcon }}
+  endIcon={{ source: ArrowIcon }}
+  size="lg"
+>
+  Confirm
+</Button>
+
+<Button isLoading color="green">
+  Processing...
+</Button>
+```
+
+### Button with Navigation and Responsive Sizing
+
+```tsx
+import { Button } from '@janbox/storefront-ui';
+
+<Button
+  anchor={{ to: '/dashboard', target: '_self' }}
+  size="sm"
+  md={{ size: 'md' }}
+  lg={{ size: 'lg' }}
+  color="blue"
+>
+  Go to Dashboard
+</Button>
+
+<Button
+  anchor={{ to: 'https://example.com', target: '_blank' }}
+  variant="outlined"
+>
+  External Link
+</Button>
+```
+
+## Related Components
+
+- [Icon](../icon/README.md)
+- [RippleEffect](../ripple-effect/README.md)
+- [Primitive](../primitive/README.md)
+
+## Dependencies
+
+- react
+- react-dom
+- @emotion/react
+- react-router
+- lodash-es
+- @floating-ui/react
+
+## See Also
+
+- [Component Source](./index.ts)
+- [Storybook Stories](./button.stories.tsx)
+- [Main README](../../README.md)

package/dist/lib/cascader/README.md

@@ -0,0 +1,128 @@
+# Cascader
+
+A hierarchical selection component that allows users to navigate and select values from nested option trees. Commonly used for category selection, location pickers, or any multi-level data structures where the user drills down through levels to reach a final value.
+
+## Import
+
+```tsx
+import { Cascader } from '@janbox/storefront-ui';
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `options*` | `CascaderOption[]` | - | Tree options data. Each option can have nested children to form the hierarchy. |
+| `value` | `string[]` | - | Controlled selected path — an array of values from root to the selected leaf node. |
+| `onChange` | `(value: string[], selectedOptions: CascaderOption[]) => void` | - | Callback fired when selection changes. Receives the path as a string array and the corresponding option objects. |
+| `placeholder` | `string` | - | Placeholder text shown when no value is selected. |
+| `searchable` | `boolean` | false | Enable search input within the dropdown to filter options. |
+| `loadOptions` | `(tree: CascaderOption[]) => Promise<CascaderOption[]>` | - | Async function to lazy-load children for a node. Receives the current expanded path as an array of selected options from root to the clicked node. |
+| `placement` | `Placement` | "bottom-start" | Placement of the floating dropdown relative to the trigger. Uses @floating-ui/react Placement type. |
+| `open` | `boolean` | - | Controlled open state of the dropdown. |
+| `onOpenChange` | `UseFloatingOptions['onOpenChange']` | - | Callback when dropdown open state changes. |
+| `separator` | `React.ReactNode` | "/" | Separator used when displaying the selected path in the trigger input. |
+| `valueRenderer` | `ReactNode` | - | Custom renderer for the selected value display inside the trigger. When provided, replaces the default joined path string. |
+| `error` | `boolean` | - | Show error state on the input trigger. |
+| `helperText` | `string` | - | Helper text displayed below the input, typically used to show validation messages. |
+| `fullWidth` | `boolean` | true | Whether the component takes full width of its container. |
+| `lazy` | `boolean` | true | Enable virtualized list rendering for performance with large option sets. |
+| `menuWidth` | `number \| 'exact-reference' \| 'min-reference'` | "exact-reference" | Controls the width of the dropdown menu. 'exact-reference' matches the trigger width exactly, 'min-reference' sets it as the minimum width, or a number for a fixed pixel width. |
+| `size` | `SizeVariant` | "md" | Size variant of the input trigger. Supports responsive values via sm/md/lg breakpoint props. |
+| `listProps` | `HTMLAttributes<HTMLDivElement>` | - | Props forwarded to the options list container element. |
+| `containerProps` | `PropsWithSx<JSX.IntrinsicElements['div']>` | - | Props forwarded to the outer container div. Supports sx prop for responsive styling. |
+| `inputProps` | `InputProps` | - | Props forwarded to the internal search input when searchable is enabled. |
+
+*Required props
+
+## Examples
+
+### Basic category selection
+
+```tsx
+const options = [
+  {
+    value: 'electronics',
+    label: 'Electronics',
+    children: [
+      {
+        value: 'phones',
+        label: 'Phones',
+        children: [
+          { value: 'iphone', label: 'iPhone' },
+          { value: 'android', label: 'Android' },
+        ],
+      },
+    ],
+  },
+  {
+    value: 'clothing',
+    label: 'Clothing',
+    children: [
+      { value: 'men', label: 'Men' },
+      { value: 'women', label: 'Women' },
+    ],
+  },
+];
+
+<Cascader
+  options={options}
+  placeholder="Select category..."
+  onChange={(value, selectedOptions) => console.log(value, selectedOptions)}
+/>
+```
+
+### Searchable with controlled value and error state
+
+```tsx
+const [value, setValue] = useState<string[]>([]);
+
+<Cascader
+  options={options}
+  value={value}
+  onChange={(path) => setValue(path)}
+  searchable
+  placeholder="Search and select..."
+  error={value.length === 0}
+  helperText={value.length === 0 ? 'Please select a category' : undefined}
+/>
+```
+
+### Async lazy-loading children
+
+```tsx
+const loadOptions = async (tree: CascaderOption[]) => {
+  const lastSelected = tree[tree.length - 1];
+  const children = await fetchCategoryChildren(lastSelected.value);
+  return children.map((c) => ({ value: c.id, label: c.name, isLeaf: !c.hasChildren }));
+};
+
+<Cascader
+  options={topLevelOptions}
+  loadOptions={loadOptions}
+  placeholder="Select location..."
+  onChange={(value) => console.log('Selected path:', value)}
+  menuWidth="min-reference"
+/>
+```
+
+## Related Components
+
+- [InputMask](../inputmask/README.md)
+- [Floating](../floating/README.md)
+- [FloatingContent](../floatingcontent/README.md)
+- [FloatingTrigger](../floatingtrigger/README.md)
+- [FormHelperText](../formhelpertext/README.md)
+- [Input](../input/README.md)
+- [TextSkeleton](../loading/README.md)
+
+## Dependencies
+
+- @floating-ui/react
+- lodash-es
+
+## See Also
+
+- [Component Source](./index.ts)
+- [Storybook Stories](./cascader.stories.tsx)
+- [Main README](../../README.md)

package/dist/lib/checkbox/README.md

@@ -0,0 +1,74 @@
+# Checkbox
+
+A styled checkbox input component that supports color variants, indeterminate state, and a container label wrapper. Suitable for form fields, multi-select lists, and toggle interactions where a three-state (checked/unchecked/indeterminate) checkbox is needed.
+
+## Import
+
+```tsx
+import { Checkbox } from '@janbox/storefront-ui';
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `color` | `ColorVariant` | "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. |
+| `className` | `string` | - | Additional CSS class applied to the underlying <input> element. |
+| `ref` | `React.Ref<HTMLInputElement>` | - | Forwarded ref to the underlying <input type='checkbox'> element. Merged internally with an internal ref used for the indeterminate effect. |
+| `disabled` | `boolean` | - | Disables the checkbox input. Inherited from JSX.IntrinsicElements['input']. |
+| `checked` | `boolean` | - | Controlled checked state. Inherited from JSX.IntrinsicElements['input']. |
+| `defaultChecked` | `boolean` | - | Uncontrolled default checked state. Inherited from JSX.IntrinsicElements['input']. |
+| `onChange` | `React.ChangeEventHandler<HTMLInputElement>` | - | Change event handler. Inherited from JSX.IntrinsicElements['input']. |
+
+## Examples
+
+### Default unchecked checkbox
+
+```tsx
+<Checkbox onChange={(e) => console.log(e.target.checked)} />
+```
+
+### Checked with error color and label
+
+```tsx
+<Checkbox color="red" defaultChecked>
+  Accept terms and conditions
+</Checkbox>
+```
+
+### Indeterminate state for select-all pattern
+
+```tsx
+const [selected, setSelected] = React.useState<string[]>([]);
+const allItems = ['a', 'b', 'c'];
+const allChecked = selected.length === allItems.length;
+const someChecked = selected.length > 0 && !allChecked;
+
+<Checkbox
+  indeterminate={someChecked}
+  checked={allChecked}
+  onChange={(e) =>
+    setSelected(e.target.checked ? allItems : [])
+  }
+>
+  Select all
+</Checkbox>
+```
+
+## Related Components
+
+- [SvgLoader](../svgloader/README.md)
+- [Primitive](../primitive/README.md)
+
+## Dependencies
+
+- @floating-ui/react
+
+## See Also
+
+- [Component Source](./index.ts)
+- [Storybook Stories](./checkbox.stories.tsx)
+- [Main README](../../README.md)