@cloud-ru/ds-toggles 1.0.0

package/README.md

@@ -0,0 +1,492 @@
+# Toggles
+
+`@cloud-ru/ds-toggles` — Пакет компонентов выбора и переключения — Checkbox, Radio, Switch, Favourite и контейнер ToggleGroup с общими токенами размеров и состояний.
+
+Пакет `@cloud-ru/ds-toggles` объединяет пять компонентов для бинарных и мультиполярных состояний. Все компоненты разделяют единое API (`size`, `checked/defaultChecked`, `disabled`, `loading`, `onChange`) и два размера (`xs`, `s`).
+
+## Установка
+
+```bash
+pnpm add @cloud-ru/ds-toggles
+```
+
+```ts
+import { Checkbox, Radio, Switch, Favourite, ToggleGroup } from '@cloud-ru/ds-toggles'
+```
+
+## Checkbox
+
+Чекбокс для множественного выбора — два размера, состояния checked/indeterminate/disabled/loading и единое API с остальными toggles.
+
+Чекбокс для множественного выбора из списка. Поддерживает три визуальных состояния — unchecked / checked / indeterminate — плюс disabled и loading.
+
+### Когда использовать
+- Для множественного выбора из двух или более независимых опций.
+- Для согласий («Я согласен с условиями»), чек-листов, фильтров.
+- Для «выбрать всё» в группе — индикатор частичного выбора (`indeterminate`).
+
+Когда **не** нужен Checkbox: для взаимоисключающего выбора — используйте **`Radio`**, для on/off настроек — **`Switch`**.
+
+### Анатомия
+
+#### Size
+`xs` — для плотных таблиц и инлайновых списков, `s` — дефолт в формах.
+### Примеры использования
+#### 1. Базовый чекбокс
+
+```tsx
+import { Checkbox } from '@cloud-ru/ds-toggles';
+
+export function CheckboxBasic() {
+  return <Checkbox defaultChecked />;
+}
+```
+
+#### 2. Indeterminate
+
+Используется для частично выбранной группы
+
+```tsx
+import { Checkbox } from '@cloud-ru/ds-toggles';
+
+export function CheckboxIndeterminate() {
+  return <Checkbox indeterminateDefault />;
+}
+```
+
+#### 3. Все состояния
+
+```tsx
+import { Checkbox } from '@cloud-ru/ds-toggles';
+
+export function CheckboxStates() {
+  return (
+    <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
+      <Checkbox />
+      <Checkbox defaultChecked />
+      <Checkbox disabled />
+      <Checkbox disabled defaultChecked />
+      <Checkbox loading />
+    </div>
+  );
+}
+```
+
+### Props
+**CheckboxProps**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `autofocus` | `boolean` | — | HTML-аттрибут autofocus |
+| `checked` | `boolean` | — | HTML-аттрибут checked |
+| `className` | `string` | — | CSS-класс |
+| `data-test-id` | `string` | — |  |
+| `defaultChecked` | `boolean` | — | HTML-аттрибут checked по-умолчанию |
+| `disabled` | `boolean` | `false` | HTML-аттрибут disabled |
+| `id` | `string` | — | HTML-аттрибут id |
+| `indeterminate` | `boolean` | — | Состояние частичного выбора |
+| `indeterminateDefault` | `boolean` | — | Состояние частичного выбора по-умолчанию |
+| `inputRef` | `RefObject<HTMLInputElement>` | — |  |
+| `loading` | `boolean` | `false` | Состояние загрузки |
+| `name` | `string` | — | HTML-аттрибут name |
+| `onBlur` | `FocusEventHandler<HTMLInputElement>` | — | Колбек потери фокуса |
+| `onChange` | `((checked: boolean) => void)` | — | Колбек смены значения |
+| `onClick` | `MouseEventHandler<HTMLInputElement>` | — | Колбек клика |
+| `onFocus` | `FocusEventHandler<HTMLInputElement>` | — | Колбек приобретения фокуса |
+| `size` | `"s"` \| `"xs"` | `s` | Размер |
+| `tabIndex` | `number` | — | HTML-аттрибут tab-index |
+| `value` | `string` | — | HTML-аттрибут value |
+
+##### Related types
+
+- `Size` = `"s"` \| `"xs"`
+
+## Radio
+
+Радиокнопка для взаимоисключающего выбора из группы опций — два размера, state controlled/uncontrolled, единое API с остальными toggles.
+
+Радиокнопка для взаимоисключающего выбора из группы опций. Группировка — через общий `name` или через компонент **`ToggleGroup`** с `selectionMode='single'`.
+
+### Когда использовать
+- Для выбора **одной** опции из 2–5 взаимоисключающих вариантов.
+- Когда все варианты должны быть видны одновременно (иначе используйте `Select`).
+
+Когда **не** нужен Radio: для множественного выбора — **`Checkbox`**, для on/off — **`Switch`**.
+
+### Анатомия
+
+#### Size
+`xs` — для плотных списков опций, `s` — дефолт в формах.
+### Примеры использования
+#### 1. Базовый Radio
+
+```tsx
+import { Radio } from '@cloud-ru/ds-toggles';
+
+export function RadioBasic() {
+  return <Radio defaultChecked />;
+}
+```
+
+#### 2. Группа радиокнопок
+
+Общий name объединяет Radio в группу; выбор переключается автоматически
+
+```tsx
+import { Radio } from '@cloud-ru/ds-toggles';
+
+export function RadioGroup() {
+  return (
+    <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
+      <label htmlFor='delivery-courier'>
+        <Radio id='delivery-courier' name='delivery' value='courier' defaultChecked /> Курьер
+      </label>
+      <label htmlFor='delivery-pickup'>
+        <Radio id='delivery-pickup' name='delivery' value='pickup' /> Самовывоз
+      </label>
+      <label htmlFor='delivery-post'>
+        <Radio id='delivery-post' name='delivery' value='post' /> Почта
+      </label>
+    </div>
+  );
+}
+```
+
+#### 3. Все состояния
+
+```tsx
+import { Radio } from '@cloud-ru/ds-toggles';
+
+export function RadioStates() {
+  return (
+    <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
+      <Radio />
+      <Radio defaultChecked />
+      <Radio disabled />
+      <Radio disabled defaultChecked />
+      <Radio loading />
+    </div>
+  );
+}
+```
+
+### Props
+**RadioProps**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `autofocus` | `boolean` | — | HTML-аттрибут autofocus |
+| `checked` | `boolean` | — | HTML-аттрибут checked |
+| `className` | `string` | — | CSS-класс |
+| `data-test-id` | `string` | — |  |
+| `defaultChecked` | `boolean` | — | HTML-аттрибут checked по-умолчанию |
+| `disabled` | `boolean` | `false` | HTML-аттрибут disabled |
+| `id` | `string` | — | HTML-аттрибут id |
+| `inputRef` | `RefObject<HTMLInputElement>` | — |  |
+| `loading` | `boolean` | `false` | Состояние загрузки |
+| `name` | `string` | — | HTML-аттрибут name |
+| `onBlur` | `FocusEventHandler<HTMLInputElement>` | — | Колбек потери фокуса |
+| `onChange` | `((checked: boolean) => void)` | — | Колбек смены значения |
+| `onClick` | `MouseEventHandler<HTMLInputElement>` | — | Колбек клика |
+| `onFocus` | `FocusEventHandler<HTMLInputElement>` | — | Колбек приобретения фокуса |
+| `size` | `"s"` \| `"xs"` | `s` | Размер |
+| `tabIndex` | `number` | — | HTML-аттрибут tab-index |
+| `value` | `string` | — | HTML-аттрибут value |
+
+##### Related types
+
+- `Size` = `"s"` \| `"xs"`
+
+## Switch
+
+Переключатель on/off для бинарных настроек — два размера, моментальное применение без подтверждения, единое API с остальными toggles.
+
+Переключатель on/off для бинарных настроек с моментальным применением. В отличие от `Checkbox`, Switch меняет состояние сразу — без кнопки «Сохранить».
+
+### Когда использовать
+- Для бинарных настроек пользователя, применяемых немедленно (уведомления, тёмная тема).
+- В ситуациях, где не нужен пакетный apply/cancel.
+
+Когда **не** нужен Switch: если изменение требует подтверждения — используйте **`Checkbox`** с кнопкой submit.
+
+### Анатомия
+
+#### Size
+`xs` — для плотных настроек и таблиц, `s` — дефолт в формах и карточках.
+### Примеры использования
+#### 1. Базовый Switch
+
+```tsx
+import { Switch } from '@cloud-ru/ds-toggles';
+
+export function SwitchBasic() {
+  return <Switch defaultChecked />;
+}
+```
+
+#### 2. Два размера
+
+```tsx
+import { Switch } from '@cloud-ru/ds-toggles';
+
+export function SwitchSizes() {
+  return (
+    <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
+      <Switch size='xs' defaultChecked />
+      <Switch size='s' defaultChecked />
+    </div>
+  );
+}
+```
+
+#### 3. Все состояния
+
+```tsx
+import { Switch } from '@cloud-ru/ds-toggles';
+
+export function SwitchStates() {
+  return (
+    <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
+      <Switch />
+      <Switch defaultChecked />
+      <Switch disabled />
+      <Switch disabled defaultChecked />
+      <Switch loading />
+    </div>
+  );
+}
+```
+
+### Props
+**SwitchProps**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `autofocus` | `boolean` | — | HTML-аттрибут autofocus |
+| `checked` | `boolean` | — | HTML-аттрибут checked |
+| `className` | `string` | — | CSS-класс |
+| `data-test-id` | `string` | — |  |
+| `defaultChecked` | `boolean` | — | HTML-аттрибут checked по-умолчанию |
+| `disabled` | `boolean` | `false` | HTML-аттрибут disabled |
+| `id` | `string` | — | HTML-аттрибут id |
+| `inputRef` | `RefObject<HTMLInputElement>` | — |  |
+| `loading` | `boolean` | `false` | Состояние загрузки |
+| `name` | `string` | — | HTML-аттрибут name |
+| `onBlur` | `FocusEventHandler<HTMLInputElement>` | — | Колбек потери фокуса |
+| `onChange` | `((checked: boolean) => void)` | — | Колбек смены значения |
+| `onClick` | `MouseEventHandler<HTMLInputElement>` | — | Колбек клика |
+| `onFocus` | `FocusEventHandler<HTMLInputElement>` | — | Колбек приобретения фокуса |
+| `size` | `"s"` \| `"xs"` | `s` | Размер |
+| `tabIndex` | `number` | — | HTML-аттрибут tab-index |
+| `value` | `string` | — | HTML-аттрибут value |
+
+##### Related types
+
+- `Size` = `"s"` \| `"xs"`
+
+## Favourite
+
+Toggle для избранного — звезда или сердце, два размера, единое API с остальными toggles.
+
+Toggle для «избранного» — карточка товара, трек в плейлисте, пост в ленте. Переключается между пустой и заполненной иконкой (звезда или сердце).
+
+### Когда использовать
+- «Добавить в избранное», «лайк», «в wishlist».
+- Каталоги, ленты, плейлисты — любой UI с персональными коллекциями.
+
+Когда **не** нужен Favourite: для булевых настроек — **`Switch`**; для выбора опций — **`Checkbox`**.
+
+### Анатомия
+
+#### Size
+`xs` — для плотных списков, `s` — дефолт в карточках.
+
+#### Favourite icon
+Форма иконки: `star` — «в избранное», `heart` — «нравится».
+### Примеры использования
+#### 1. Звезда
+
+```tsx
+import { Favourite } from '@cloud-ru/ds-toggles';
+
+export function FavouriteStar() {
+  return <Favourite icon='star' defaultChecked />;
+}
+```
+
+#### 2. Сердце
+
+```tsx
+import { Favourite } from '@cloud-ru/ds-toggles';
+
+export function FavouriteHeart() {
+  return <Favourite icon='heart' defaultChecked />;
+}
+```
+
+#### 3. Все состояния
+
+```tsx
+import { Favourite } from '@cloud-ru/ds-toggles';
+
+export function FavouriteStates() {
+  return (
+    <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
+      <Favourite icon='star' />
+      <Favourite icon='star' defaultChecked />
+      <Favourite icon='heart' disabled />
+      <Favourite icon='heart' loading />
+    </div>
+  );
+}
+```
+
+### Props
+**FavouriteProps**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `autofocus` | `boolean` | — | HTML-аттрибут autofocus |
+| `checked` | `boolean` | — | HTML-аттрибут checked |
+| `className` | `string` | — | CSS-класс |
+| `data-test-id` | `string` | — |  |
+| `defaultChecked` | `boolean` | — | HTML-аттрибут checked по-умолчанию |
+| `disabled` | `boolean` | `false` | HTML-аттрибут disabled |
+| `icon` | `"heart"` \| `"star"` | `heart` | Вариант иконки: звезда или сердце |
+| `id` | `string` | — | HTML-аттрибут id |
+| `inputRef` | `RefObject<HTMLInputElement>` | — |  |
+| `loading` | `boolean` | `false` | Состояние загрузки |
+| `name` | `string` | — | HTML-аттрибут name |
+| `onBlur` | `FocusEventHandler<HTMLInputElement>` | — | Колбек потери фокуса |
+| `onChange` | `((checked: boolean) => void)` | — | Колбек смены значения |
+| `onClick` | `MouseEventHandler<HTMLInputElement>` | — | Колбек клика |
+| `onFocus` | `FocusEventHandler<HTMLInputElement>` | — | Колбек приобретения фокуса |
+| `onKeyUp` | `KeyboardEventHandler<HTMLSpanElement>` | — | Обработчик keyup |
+| `size` | `"s"` \| `"xs"` | `s` | Размер |
+| `tabIndex` | `number` | — | HTML-аттрибут tab-index |
+| `value` | `string` | — | HTML-аттрибут value |
+
+##### Related types
+
+- `FavouriteIcon` = `"heart"` \| `"star"`
+
+- `Size` = `"s"` \| `"xs"`
+
+## ToggleGroup
+
+Контейнер для группы связанных toggle'ов — single или multiple selection через общий context + useToggleGroup.
+
+Контейнер для группы связанных toggle'ов (чипы, опции, сегментированный контрол) с общим режимом выбора. Предоставляет React Context — потомки читают текущий выбор через `useToggleGroup`.
+
+### Когда использовать
+- Сегментированный контрол (выбор размера, периода, типа).
+- Чипы-фильтры с `selectionMode='multiple'`.
+- Любые связанные опции, где нужен shared state + unified controlled API.
+
+Когда **не** нужен ToggleGroup: одна опция — **`Switch`** или **`Checkbox`**; взаимоисключающий выбор с нативной семантикой radio — группа **`Radio`** c общим `name`.
+
+### Анатомия
+
+#### Mode
+Тип дочерних контролов: `checkbox` — мультивыбор/независимые, `radio` — одиночный выбор.
+
+#### Size
+Размер вложенных тогглов: `xs` — плотный, `s` — дефолт.
+
+#### Selection mode
+Правила выбора: `single` — ровно один элемент (как radio-group), `multiple` — любое подмножество (как checkbox-group).
+### Примеры использования
+#### 1. Single selection (сегментированный контрол)
+
+```tsx
+import { ToggleGroup, useToggleGroup } from '@cloud-ru/ds-toggles';
+import { useState } from 'react';
+
+function Chip({ id, label }: { id: string; label: string }) {
+  const { isChecked, handleClick } = useToggleGroup({ value: id });
+  return (
+    <button onClick={handleClick} aria-pressed={isChecked}>
+      {label}
+    </button>
+  );
+}
+
+export function ToggleGroupSingle() {
+  const [value, setValue] = useState<string | undefined>('a');
+  return (
+    <ToggleGroup selectionMode='single' value={value} onChange={setValue}>
+      <Chip id='a' label='A' />
+      <Chip id='b' label='B' />
+      <Chip id='c' label='C' />
+    </ToggleGroup>
+  );
+}
+```
+
+#### 2. Multiple selection (чипы-фильтры)
+
+```tsx
+import { ToggleGroup, useToggleGroup } from '@cloud-ru/ds-toggles';
+import { useState } from 'react';
+
+function Chip({ id, label }: { id: string; label: string }) {
+  const { isChecked, handleClick } = useToggleGroup({ value: id });
+  return (
+    <button onClick={handleClick} aria-pressed={isChecked}>
+      {label}
+    </button>
+  );
+}
+
+export function ToggleGroupMultiple() {
+  const [value, setValue] = useState<string[]>(['a']);
+  return (
+    <ToggleGroup selectionMode='multiple' value={value} onChange={next => setValue(next ?? [])}>
+      <Chip id='a' label='A' />
+      <Chip id='b' label='B' />
+      <Chip id='c' label='C' />
+    </ToggleGroup>
+  );
+}
+```
+
+#### 3. Controlled + отображение значения
+
+```tsx
+import { ToggleGroup, useToggleGroup } from '@cloud-ru/ds-toggles';
+import { useState } from 'react';
+
+function Option({ id, label }: { id: string; label: string }) {
+  const { isChecked, handleClick } = useToggleGroup({ value: id });
+  return (
+    <button onClick={handleClick} aria-pressed={isChecked}>
+      {label}
+    </button>
+  );
+}
+
+export function ToggleGroupControlled() {
+  const [value, setValue] = useState<string | undefined>();
+  return (
+    <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
+      <ToggleGroup selectionMode='single' value={value} onChange={setValue}>
+        <Option id='s' label='S' />
+        <Option id='m' label='M' />
+        <Option id='l' label='L' />
+      </ToggleGroup>
+      <p>Selected: {value ?? '—'}</p>
+    </div>
+  );
+}
+```
+
+### Props
+**ToggleGroupProps**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| null \| undefined` | — |  |
+| `defaultValue` | `string \| string[]` | — | Начальное состояние |
+| `onChange` | `((value: string) => void) \| ((value: string[]) => void) \| undefined` | — | Controlled обработчик измения состояния |
+| `selectionMode` | `"multiple"` \| `"single"` | `single` | Режим выбора |
+| `value` | `string \| string[]` | — | Controlled состояние |

package/dist/cjs/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,8 @@
+import { ToggleProps } from '../../types';
+export type CheckboxProps = ToggleProps & {
+    /** Состояние частичного выбора */
+    indeterminate?: boolean;
+    /** Состояние частичного выбора по-умолчанию */
+    indeterminateDefault?: boolean;
+};
+export declare function Checkbox({ inputRef, checked: checkedProp, defaultChecked, indeterminate: indeterminateProp, indeterminateDefault, onChange: onChangeProp, onBlur, onFocus, disabled, loading, size, className, 'data-test-id': dataTestId, ...otherProps }: CheckboxProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/Checkbox/Checkbox.js

@@ -0,0 +1,61 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = Checkbox;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const system_1 = require("@cloud-ru/ds-icons/interface/system");
+const loader_1 = require("@cloud-ru/ds-loader");
+const utils_1 = require("@cloud-ru/ds-utils");
+const classnames_1 = __importDefault(require("classnames"));
+const merge_refs_1 = __importDefault(require("merge-refs"));
+const react_1 = require("react");
+const constants_1 = require("../../constants");
+const utils_2 = require("../../utils");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const SPINNER_SIZE_MAP = {
+    [constants_1.SIZE.XS]: loader_1.LOADER_SIZE.XS,
+    [constants_1.SIZE.S]: loader_1.LOADER_SIZE.S,
+};
+function Icon({ size, checked, indeterminate, loading, }) {
+    if (loading) {
+        return (0, jsx_runtime_1.jsx)(loader_1.Spinner, { size: SPINNER_SIZE_MAP[size] });
+    }
+    const iconSize = (0, utils_2.getIconSize)(size);
+    if (checked) {
+        return (0, jsx_runtime_1.jsx)(system_1.CheckSVG, { className: styles_module_scss_1.default.icon, size: iconSize });
+    }
+    if (indeterminate) {
+        return (0, jsx_runtime_1.jsx)(system_1.MinusSVG, { className: styles_module_scss_1.default.icon, size: iconSize });
+    }
+    return null;
+}
+function Checkbox({ inputRef, checked: checkedProp, defaultChecked, indeterminate: indeterminateProp, indeterminateDefault, onChange: onChangeProp, onBlur, onFocus, disabled = false, loading = false, size = constants_1.SIZE.S, className, 'data-test-id': dataTestId, ...otherProps }) {
+    const localRef = (0, react_1.useRef)(null);
+    const ref = (0, merge_refs_1.default)(localRef, inputRef);
+    const [indeterminate, setIndeterminate] = (0, utils_1.useUncontrolledProp)(indeterminateProp, indeterminateDefault);
+    const [checked, setChecked] = (0, utils_1.useUncontrolledProp)(checkedProp, Boolean(defaultChecked), onChangeProp);
+    const [focusVisible, setFocusVisible] = (0, react_1.useState)(false);
+    const onChange = (0, react_1.useCallback)((checked) => {
+        setChecked?.(checked);
+        setIndeterminate(false);
+    }, [setChecked, setIndeterminate]);
+    (0, react_1.useEffect)(() => {
+        if (localRef.current) {
+            localRef.current.indeterminate = Boolean(indeterminate);
+        }
+    }, [localRef, indeterminate]);
+    const stateDataAttributes = (0, utils_2.getVisualStateAttributes)({
+        loading,
+        disabled,
+        checked: indeterminate || checked,
+    });
+    return ((0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)(styles_module_scss_1.default.root, className), role: constants_1.MODE.Checkbox, "data-size": size, ...stateDataAttributes, "data-indeterminate": indeterminate || undefined, "data-test-id": dataTestId || undefined, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.container, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.framing, ...stateDataAttributes, "data-focusvisible": focusVisible || undefined, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.backgroundStateLayer, "data-state": indeterminate || checked ? 'emptyDarkOnAccent' : 'emptyNeutralOnBackground' }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.flag, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.surface, ...stateDataAttributes, "data-text-opacity": indeterminate || checked || undefined, children: (0, jsx_runtime_1.jsx)(Icon, { size: size, loading: Boolean(loading), indeterminate: Boolean(indeterminate), checked: checked }) }) })] }), !loading && ((0, jsx_runtime_1.jsx)("input", { ...otherProps, "data-test-id": dataTestId ? `${dataTestId}${constants_1.NATIVE_INPUT_SUFFIX}` : undefined, ref: ref, type: constants_1.MODE.Checkbox, className: styles_module_scss_1.default.inputPrivate, checked: checked, disabled: disabled, onChange: e => onChange(e.target.checked), onFocus: event => {
+                        setFocusVisible(event.target.matches(':focus-visible'));
+                        onFocus?.(event);
+                    }, onBlur: event => {
+                        setFocusVisible(false);
+                        onBlur?.(event);
+                    } }))] }) }));
+}

package/dist/cjs/components/Checkbox/index.d.ts

@@ -0,0 +1 @@
+export * from './Checkbox';

package/dist/cjs/components/Checkbox/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Checkbox"), exports);