@snack-uikit/chips 0.8.5-preview-85c5f47b.0

package/dist/components/ChipChoice/constants.js

@@ -0,0 +1,28 @@
+import { Calendar } from '@snack-uikit/calendar';
+import { Droplist } from '@snack-uikit/droplist';
+import { ButtonSize, Size } from '../../constants';
+export const BUTTON_CLEAR_VALUE_SIZE_MAP = {
+    [Size.Xs]: ButtonSize.Xxs,
+    [Size.S]: ButtonSize.Xs,
+    [Size.M]: ButtonSize.Xs,
+    [Size.L]: ButtonSize.Xs,
+};
+export const CALENDAR_SIZE_MAP = {
+    [Size.Xs]: Calendar.sizes.S,
+    [Size.S]: Calendar.sizes.S,
+    [Size.M]: Calendar.sizes.M,
+    [Size.L]: Calendar.sizes.M,
+};
+export const DROPLIST_SIZE_MAP = {
+    [Size.Xs]: Droplist.sizes.S,
+    [Size.S]: Droplist.sizes.S,
+    [Size.M]: Droplist.sizes.M,
+    [Size.L]: Droplist.sizes.L,
+};
+export var ChipChoiceType;
+(function (ChipChoiceType) {
+    ChipChoiceType["Multi"] = "multi";
+    ChipChoiceType["Date"] = "date";
+    ChipChoiceType["DateRange"] = "date-range";
+    ChipChoiceType["Single"] = "single";
+})(ChipChoiceType || (ChipChoiceType = {}));

package/dist/components/ChipChoice/index.d.ts

@@ -0,0 +1,17 @@
+import { Size, Variant } from '../../constants';
+import { ChipChoiceCustom, ChipChoiceCustomProps, ChipChoiceDate, ChipChoiceDateProps, ChipChoiceDateRange, ChipChoiceDateRangeProps, ChipChoiceMulti, ChipChoiceMultiProps, ChipChoiceSingle, ChipChoiceSingleProps } from './components';
+import { ChipChoiceType } from './constants';
+export type { FilterOption } from './types';
+export type { ChipChoiceCustomProps, ChipChoiceMultiProps, ChipChoiceSingleProps, ChipChoiceDateProps, ChipChoiceDateRangeProps, };
+export declare namespace ChipChoice {
+    const Custom: typeof ChipChoiceCustom;
+    const Single: typeof ChipChoiceSingle;
+    const Multi: typeof ChipChoiceMulti;
+    const Date: typeof ChipChoiceDate;
+    const DateRange: typeof ChipChoiceDateRange;
+    const sizes: typeof Size;
+    const variants: typeof Variant;
+    const placements: typeof import("@snack-uikit/popover-private/dist/constants").Placement;
+    const widthStrategies: typeof import("@snack-uikit/popover-private/dist/constants").PopoverWidthStrategy;
+    const types: typeof ChipChoiceType;
+}

package/dist/components/ChipChoice/index.js

@@ -0,0 +1,17 @@
+import { Droplist } from '@snack-uikit/droplist';
+import { Size, Variant } from '../../constants';
+import { ChipChoiceCustom, ChipChoiceDate, ChipChoiceDateRange, ChipChoiceMulti, ChipChoiceSingle, } from './components';
+import { ChipChoiceType } from './constants';
+export var ChipChoice;
+(function (ChipChoice) {
+    ChipChoice.Custom = ChipChoiceCustom;
+    ChipChoice.Single = ChipChoiceSingle;
+    ChipChoice.Multi = ChipChoiceMulti;
+    ChipChoice.Date = ChipChoiceDate;
+    ChipChoice.DateRange = ChipChoiceDateRange;
+    ChipChoice.sizes = Size;
+    ChipChoice.variants = Variant;
+    ChipChoice.placements = Droplist.placements;
+    ChipChoice.widthStrategies = Droplist.widthStrategies;
+    ChipChoice.types = ChipChoiceType;
+})(ChipChoice || (ChipChoice = {}));

package/dist/components/ChipChoice/styles.module.css

@@ -0,0 +1,199 @@
+.label, .value{
+  display:inline-flex;
+  align-items:center;
+}
+
+.choiceChip{
+  cursor:pointer;
+  position:relative;
+  display:inline-flex;
+  align-items:center;
+  box-sizing:border-box;
+  width:-moz-max-content;
+  width:max-content;
+  min-width:-moz-max-content;
+  min-width:max-content;
+  margin:0;
+  padding:0;
+  text-decoration:none;
+  text-transform:none;
+  border-style:solid;
+  outline:0;
+  outline-offset:0;
+  background-color:var(--sys-neutral-background1-level, #f9f9f9);
+  border-color:var(--sys-neutral-decor-default, #dedede);
+}
+.choiceChip .spinner{
+  display:inline-flex;
+}
+.choiceChip .icon{
+  display:inline-flex;
+}
+.choiceChip .icon svg{
+  width:var(--dimension-3m, 24px) !important;
+  height:var(--dimension-3m, 24px) !important;
+}
+.choiceChip .labelLayout{
+  display:inline-flex;
+  align-items:center;
+}
+.choiceChip[data-size=xs]{
+  height:var(--size-chips-xs, 24px);
+  padding-left:var(--space-chips-container-padding-xs, 3px);
+  padding-right:var(--space-chips-container-padding-xs, 3px);
+  border-radius:var(--radius-chips-xs, 12px);
+  border-width:var(--border-width-chips-single, 1px);
+}
+.choiceChip[data-size=xs] .label{
+  font-family:var(--light-label-s-font-family, SB Sans Interface);
+  font-weight:var(--light-label-s-font-weight, Regular);
+  line-height:var(--light-label-s-line-height, 14px);
+  font-size:var(--light-label-s-font-size, 11px);
+  letter-spacing:var(--light-label-s-letter-spacing, -0.1px);
+  paragraph-spacing:var(--light-label-s-paragraph-spacing, 6.05px);
+}
+.choiceChip[data-size=xs] .labelLayout{
+  padding-left:var(--space-chips-label-layout-padding-xs, 4px);
+  padding-right:var(--space-chips-label-layout-padding-xs, 4px);
+  gap:var(--space-chips-label-layout-gap, 2px);
+}
+.choiceChip[data-size=s]{
+  height:var(--size-chips-s, 32px);
+  padding-left:var(--space-chips-container-padding-s, 3px);
+  padding-right:var(--space-chips-container-padding-s, 3px);
+  border-radius:var(--radius-chips-s, 16px);
+  border-width:var(--border-width-chips-single, 1px);
+}
+.choiceChip[data-size=s] .label{
+  font-family:var(--light-label-m-font-family, SB Sans Interface);
+  font-weight:var(--light-label-m-font-weight, Regular);
+  line-height:var(--light-label-m-line-height, 16px);
+  font-size:var(--light-label-m-font-size, 12px);
+  letter-spacing:var(--light-label-m-letter-spacing, -0.1px);
+  paragraph-spacing:var(--light-label-m-paragraph-spacing, 6.6px);
+}
+.choiceChip[data-size=s] .labelLayout{
+  padding-left:var(--space-chips-label-layout-padding-s, 4px);
+  padding-right:var(--space-chips-label-layout-padding-s, 4px);
+  gap:var(--space-chips-label-layout-gap, 2px);
+}
+.choiceChip[data-size=m]{
+  height:var(--size-chips-m, 40px);
+  padding-left:var(--space-chips-container-padding-m, 7px);
+  padding-right:var(--space-chips-container-padding-m, 7px);
+  border-radius:var(--radius-chips-m, 20px);
+  border-width:var(--border-width-chips-single, 1px);
+}
+.choiceChip[data-size=m] .label{
+  font-family:var(--light-label-m-font-family, SB Sans Interface);
+  font-weight:var(--light-label-m-font-weight, Regular);
+  line-height:var(--light-label-m-line-height, 16px);
+  font-size:var(--light-label-m-font-size, 12px);
+  letter-spacing:var(--light-label-m-letter-spacing, -0.1px);
+  paragraph-spacing:var(--light-label-m-paragraph-spacing, 6.6px);
+}
+.choiceChip[data-size=m] .labelLayout{
+  padding-left:var(--space-chips-label-layout-padding-m, 8px);
+  padding-right:var(--space-chips-label-layout-padding-m, 8px);
+  gap:var(--space-chips-label-layout-gap, 2px);
+}
+.choiceChip[data-size=l]{
+  height:var(--size-chips-l, 48px);
+  padding-left:var(--space-chips-container-padding-l, 11px);
+  padding-right:var(--space-chips-container-padding-l, 11px);
+  border-radius:var(--radius-chips-l, 24px);
+  border-width:var(--border-width-chips-single, 1px);
+}
+.choiceChip[data-size=l] .label{
+  font-family:var(--light-label-l-font-family, SB Sans Interface);
+  font-weight:var(--light-label-l-font-weight, Regular);
+  line-height:var(--light-label-l-line-height, 20px);
+  font-size:var(--light-label-l-font-size, 14px);
+  letter-spacing:var(--light-label-l-letter-spacing, -0.1px);
+  paragraph-spacing:var(--light-label-l-paragraph-spacing, 7.7px);
+}
+.choiceChip[data-size=l] .labelLayout{
+  padding-left:var(--space-chips-label-layout-padding-l, 12px);
+  padding-right:var(--space-chips-label-layout-padding-l, 12px);
+  gap:var(--space-chips-label-layout-gap, 2px);
+}
+.choiceChip .label, .choiceChip .value{
+  color:var(--sys-neutral-text-support, #565656);
+}
+.choiceChip .icon{
+  color:var(--sys-neutral-text-light, #898989);
+}
+.choiceChip[data-size=xs] .value{
+  font-family:var(--sans-label-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-s-font-weight, Semibold);
+  line-height:var(--sans-label-s-line-height, 14px);
+  font-size:var(--sans-label-s-font-size, 11px);
+  letter-spacing:var(--sans-label-s-letter-spacing, -0.1px);
+  paragraph-spacing:var(--sans-label-s-paragraph-spacing, 6.05px);
+}
+.choiceChip[data-size=s] .value{
+  font-family:var(--sans-label-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-m-font-weight, Semibold);
+  line-height:var(--sans-label-m-line-height, 16px);
+  font-size:var(--sans-label-m-font-size, 12px);
+  letter-spacing:var(--sans-label-m-letter-spacing, -0.1px);
+  paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
+}
+.choiceChip[data-size=m] .value{
+  font-family:var(--sans-label-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-m-font-weight, Semibold);
+  line-height:var(--sans-label-m-line-height, 16px);
+  font-size:var(--sans-label-m-font-size, 12px);
+  letter-spacing:var(--sans-label-m-letter-spacing, -0.1px);
+  paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
+}
+.choiceChip[data-size=l] .value{
+  font-family:var(--sans-label-l-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-l-font-weight, Semibold);
+  line-height:var(--sans-label-l-line-height, 20px);
+  font-size:var(--sans-label-l-font-size, 14px);
+  letter-spacing:var(--sans-label-l-letter-spacing, -0.1px);
+  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
+}
+.choiceChip:hover, .choiceChip:active, .choiceChip:focus-visible{
+  background-color:var(--sys-neutral-background2-level, #fdfdfd);
+  border-color:var(--sys-neutral-decor-hovered, #d2d2d2);
+}
+.choiceChip:hover .label, .choiceChip:active .label, .choiceChip:focus-visible .label{
+  color:var(--sys-neutral-text-support, #565656);
+}
+.choiceChip:hover .value, .choiceChip:active .value, .choiceChip:focus-visible .value{
+  color:var(--sys-neutral-text-main, #333333);
+}
+.choiceChip:focus-visible{
+  outline-width:var(--border-state-focus-s-border-width, 2px);
+  outline-style:var(--border-state-focus-s-border-style, solid);
+  outline-color:var(--border-state-focus-s-border-color, );
+  outline-color:var(--sys-available-complementary, #131313);
+  outline-offset:var(--spacing-state-focus-offset, 2px);
+}
+.choiceChip[data-disabled]{
+  cursor:not-allowed;
+  background-color:var(--sys-neutral-background, #f0f0f0);
+  border-color:var(--sys-neutral-decor-disabled, #e7e7e7);
+}
+.choiceChip[data-disabled] .label, .choiceChip[data-disabled] .value{
+  color:var(--sys-neutral-text-light, #898989);
+}
+.choiceChip[data-loading]{
+  cursor:progress;
+  background-color:var(--sys-neutral-background, #f0f0f0);
+  border-color:var(--sys-neutral-decor-activated, #b8b8b8);
+}
+.choiceChip[data-loading] true .spinner{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+}
+.choiceChip[data-loading] .label, .choiceChip[data-loading] .value{
+  color:var(--sys-neutral-text-support, #565656);
+}
+
+.triggerClassName{
+  --offset:calc(var(--border-state-focus-s-border-width, 2px) + var(--space-drop-list-drop-offset, 4px));
+}

package/dist/components/ChipChoice/types.d.ts

@@ -0,0 +1,27 @@
+import { MouseEventHandler } from 'react';
+import { DroplistProps, ItemSingleProps } from '@snack-uikit/droplist';
+import { WithSupportProps } from '@snack-uikit/utils';
+import { Size } from '../../constants';
+import { BaseChipProps } from '../../types';
+export type FilterOption = Pick<ItemSingleProps, 'caption' | 'description' | 'tagLabel' | 'icon' | 'avatar'> & {
+    label: string;
+    value: string;
+};
+export type ChipChoiceCommonProps = WithSupportProps<Partial<BaseChipProps> & {
+    /** Размер */
+    size?: Size;
+    /** Колбек обработки клика */
+    onClick?: MouseEventHandler<HTMLButtonElement | HTMLDivElement>;
+    /** Отображение кнопки очистки значения @default true*/
+    showClearButton?: boolean;
+    /** Расположение выпадающего меню */
+    placement?: DroplistProps['placement'];
+    /**
+     * Стратегия управления шириной контейнера поповера
+     * <br> - `Auto` - соответствует ширине контента,
+     * <br> - `Gte` - Great Than or Equal, равен ширине таргета или больше ее, если контент в поповере шире,
+     * <br> - `Eq` - Equal, строго равен ширине таргета.
+     * @default Gte
+     */
+    widthStrategy?: DroplistProps['widthStrategy'];
+}>;

package/dist/components/ChipChoice/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/ChipChoice/utils.d.ts

@@ -0,0 +1,4 @@
+import { FilterOption } from './types';
+export declare const normalizeValueForMultiChoice: (options: FilterOption[], value?: string[]) => string[] | undefined;
+export declare const normalizeValueForSingleChoice: (options: FilterOption[], value?: string) => string | undefined;
+export declare const defaultMultiValueLabelFormatter: (value: FilterOption[], total: number) => string;

package/dist/components/ChipChoice/utils.js

@@ -0,0 +1,14 @@
+export const normalizeValueForMultiChoice = (options, value) => {
+    if (!value) {
+        return undefined;
+    }
+    return value.filter(val => options.some(option => val === option.value));
+};
+export const normalizeValueForSingleChoice = (options, value) => {
+    var _a;
+    if (!value) {
+        return undefined;
+    }
+    return (_a = options.find(option => value === option.value)) === null || _a === void 0 ? void 0 : _a.value;
+};
+export const defaultMultiValueLabelFormatter = (value, total) => `${value.length.toString()}/${total}`;

package/dist/components/ChipChoiceRow/ChipChoiceRow.d.ts

@@ -0,0 +1,26 @@
+import { WithSupportProps } from '@snack-uikit/utils';
+import { Size } from './constants';
+import { ChipChoiceProps, OmitBetter } from './types';
+export type FiltersState = Record<string, unknown>;
+export type ChipChoiceRowProps<TState extends FiltersState> = WithSupportProps<{
+    /** Состояние фильтров */
+    value?: TState;
+    /** Начальное состояние фильтров */
+    defaultValue?: Partial<TState>;
+    /** Колбек изменения состояния фильтров */
+    onChange?(filters: TState): void;
+    /** Массив чипов */
+    filters: OmitBetter<ChipChoiceProps, 'onChange' | 'value' | 'size' | 'defaultValue'>[];
+    /** Размер @default Size.S */
+    size?: Size;
+    /** CSS-класс */
+    className?: string;
+    /** Скрыть/показать кнопку очиски @default true */
+    showClearAllButton?: boolean;
+    /** Текст кнопки очистки @default 'Clear all' */
+    clearAllButtonLabel?: string;
+}>;
+export declare function ChipChoiceRow<TState extends FiltersState>({ filters, onChange, showClearAllButton, clearAllButtonLabel, className, value, defaultValue, size, ...rest }: ChipChoiceRowProps<TState>): import("react/jsx-runtime").JSX.Element;
+export declare namespace ChipChoiceRow {
+    var sizes: typeof Size;
+}

package/dist/components/ChipChoiceRow/ChipChoiceRow.js

@@ -0,0 +1,45 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { useUncontrolledProp } from 'uncontrollable';
+import { ButtonFunction } from '@snack-uikit/button';
+import { CrossSVG } from '@snack-uikit/icons';
+import { extractSupportProps } from '@snack-uikit/utils';
+import { CHIP_CHOICE_ROW_IDS } from '../../constants';
+import { ForwardedChipChoice } from './components';
+import { MAP_ROW_SIZE_TO_BUTTON_SIZE, MAP_ROW_SIZE_TO_CHOICE_SIZE, Size } from './constants';
+import styles from './styles.module.css';
+export function ChipChoiceRow(_a) {
+    var { filters, onChange, showClearAllButton = true, clearAllButtonLabel = 'Clear all', className, value, defaultValue, size = Size.S } = _a, rest = __rest(_a, ["filters", "onChange", "showClearAllButton", "clearAllButtonLabel", "className", "value", "defaultValue", "size"]);
+    const [state, setState] = useUncontrolledProp(value, (defaultValue !== null && defaultValue !== void 0 ? defaultValue : {}), newState => {
+        const result = typeof newState === 'function' ? newState(state) : newState;
+        onChange === null || onChange === void 0 ? void 0 : onChange(result);
+    });
+    const handleChange = (fieldId, value) => {
+        setState((state) => (Object.assign(Object.assign({}, state), { [fieldId]: value })));
+    };
+    const handleFiltersClear = () => {
+        setState({});
+    };
+    const hasAnyFilter = Object.values(state).some(filter => {
+        if (Array.isArray(filter)) {
+            return filter.length > 0 && Object.values(filter).some(Boolean);
+        }
+        if (filter && typeof filter === 'object') {
+            return Object.values(filter).some(Boolean) || filter instanceof Date;
+        }
+        return Boolean(filter);
+    });
+    return (_jsxs("div", Object.assign({ className: cn(styles.chipChoiceRow, className) }, extractSupportProps(rest), { children: [filters.map(filter => (_jsx(ForwardedChipChoice, Object.assign({}, filter, { value: state[filter.id], size: MAP_ROW_SIZE_TO_CHOICE_SIZE[size], onChange: (value) => handleChange(filter.id, value) }), filter.id))), showClearAllButton && hasAnyFilter && (_jsx(ButtonFunction, { onClick: handleFiltersClear, label: clearAllButtonLabel, icon: _jsx(CrossSVG, {}), iconPosition: ButtonFunction.iconPositions.Before, size: MAP_ROW_SIZE_TO_BUTTON_SIZE[size], "data-test-id": CHIP_CHOICE_ROW_IDS.clearAllButton }))] })));
+}
+ChipChoiceRow.sizes = Size;

package/dist/components/ChipChoiceRow/components/ForwardedChipChoice.d.ts

@@ -0,0 +1,2 @@
+import { ChipChoiceProps } from '../types';
+export declare function ForwardedChipChoice(props: ChipChoiceProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ChipChoiceRow/components/ForwardedChipChoice.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MAP_CHIP_TYPE_TO_COMPONENT } from './constants';
+export function ForwardedChipChoice(props) {
+    const Component = MAP_CHIP_TYPE_TO_COMPONENT[props.type];
+    return _jsx(Component, Object.assign({}, props));
+}

package/dist/components/ChipChoiceRow/components/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const MAP_CHIP_TYPE_TO_COMPONENT: {
+    single: typeof import("../../ChipChoice/components").ChipChoiceSingle;
+    multi: typeof import("../../ChipChoice/components").ChipChoiceMulti;
+    date: typeof import("../../ChipChoice/components").ChipChoiceDate;
+    "date-range": typeof import("../../ChipChoice/components").ChipChoiceDateRange;
+};

package/dist/components/ChipChoiceRow/components/constants.js

@@ -0,0 +1,7 @@
+import { ChipChoice } from '../../ChipChoice';
+export const MAP_CHIP_TYPE_TO_COMPONENT = {
+    [ChipChoice.types.Single]: ChipChoice.Single,
+    [ChipChoice.types.Multi]: ChipChoice.Multi,
+    [ChipChoice.types.Date]: ChipChoice.Date,
+    [ChipChoice.types.DateRange]: ChipChoice.DateRange,
+};

package/dist/components/ChipChoiceRow/components/index.d.ts

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

package/dist/components/ChipChoiceRow/components/index.js

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

package/dist/components/ChipChoiceRow/constants.d.ts

@@ -0,0 +1,15 @@
+export declare enum Size {
+    Xs = "xs",
+    S = "s",
+    M = "m"
+}
+export declare const MAP_ROW_SIZE_TO_CHOICE_SIZE: {
+    xs: import("../../constants").Size;
+    s: import("../../constants").Size;
+    m: import("../../constants").Size;
+};
+export declare const MAP_ROW_SIZE_TO_BUTTON_SIZE: {
+    xs: import("@snack-uikit/button/dist/constants").SizeXsM;
+    s: import("@snack-uikit/button/dist/constants").SizeXsM;
+    m: import("@snack-uikit/button/dist/constants").SizeXsM;
+};

package/dist/components/ChipChoiceRow/constants.js

@@ -0,0 +1,18 @@
+import { ButtonFunction } from '@snack-uikit/button';
+import { ChipChoice } from '../ChipChoice';
+export var Size;
+(function (Size) {
+    Size["Xs"] = "xs";
+    Size["S"] = "s";
+    Size["M"] = "m";
+})(Size || (Size = {}));
+export const MAP_ROW_SIZE_TO_CHOICE_SIZE = {
+    [Size.Xs]: ChipChoice.sizes.Xs,
+    [Size.S]: ChipChoice.sizes.S,
+    [Size.M]: ChipChoice.sizes.M,
+};
+export const MAP_ROW_SIZE_TO_BUTTON_SIZE = {
+    [Size.Xs]: ButtonFunction.sizes.Xs,
+    [Size.S]: ButtonFunction.sizes.S,
+    [Size.M]: ButtonFunction.sizes.M,
+};

package/dist/components/ChipChoiceRow/index.d.ts

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

package/dist/components/ChipChoiceRow/index.js

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

package/dist/components/ChipChoiceRow/styles.module.css

@@ -0,0 +1,6 @@
+.chipChoiceRow{
+  counter-axis-spacing:var(--space-chips-filter-row-gap, 4px);
+  gap:var(--space-chips-filter-row-gap, 4px);
+  display:flex;
+  flex-wrap:wrap;
+}

package/dist/components/ChipChoiceRow/types.d.ts

@@ -0,0 +1,20 @@
+import { ChipChoiceDateProps, ChipChoiceDateRangeProps, ChipChoiceMultiProps, ChipChoiceSingleProps } from '../ChipChoice/components';
+import { ChipChoiceType } from '../ChipChoice/constants';
+type ChipChoiceMultiType = {
+    type: ChipChoiceType.Multi;
+} & ChipChoiceMultiProps;
+type ChipChoiceSingleType = {
+    type: ChipChoiceType.Single;
+} & ChipChoiceSingleProps;
+type ChipChoiceDateType = {
+    type: ChipChoiceType.Date;
+} & ChipChoiceDateProps;
+type ChipChoiceDateRangeType = {
+    type: ChipChoiceType.DateRange;
+} & ChipChoiceDateRangeProps;
+export type ChipChoiceProps = {
+    id: string;
+} & (ChipChoiceMultiType | ChipChoiceSingleType | ChipChoiceDateType | ChipChoiceDateRangeType);
+export type OmitBetter<T, K extends keyof any> = T extends any ? Pick<T, Exclude<keyof T, K>> : never;
+export type FilterValue = Parameters<ChipChoiceProps['onChange']>[number];
+export {};

package/dist/components/ChipChoiceRow/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/ChipToggle/ChipToggle.d.ts

@@ -0,0 +1,17 @@
+import { ChangeEvent } from 'react';
+import { WithSupportProps } from '@snack-uikit/utils';
+import { Size } from '../../constants';
+import { BaseChipProps } from '../../types';
+export type ChipToggleProps = WithSupportProps<BaseChipProps & {
+    /** Отмечен ли компонент */
+    checked: boolean;
+    /** Размер */
+    size?: Size;
+    /** Колбек смены значения */
+    onChange(checked: boolean, e: ChangeEvent<HTMLInputElement>): void;
+}>;
+/** Чип с состоянием выбран/не выбран */
+export declare function ChipToggle({ icon, size, label, checked, disabled, loading, onChange, className, tabIndex, ...rest }: ChipToggleProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ChipToggle {
+    var sizes: typeof Size;
+}

package/dist/components/ChipToggle/ChipToggle.js

@@ -0,0 +1,31 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { Sun } from '@snack-uikit/loaders';
+import { extractSupportProps } from '@snack-uikit/utils';
+import { CHIP_TOGGLE_TEST_IDS, Size, Variant } from '../../constants';
+import styles from './styles.module.css';
+/** Чип с состоянием выбран/не выбран */
+export function ChipToggle(_a) {
+    var { icon, size = ChipToggle.sizes.S, label, checked, disabled, loading, onChange, className, tabIndex = 0 } = _a, rest = __rest(_a, ["icon", "size", "label", "checked", "disabled", "loading", "onChange", "className", "tabIndex"]);
+    const variant = icon && size !== Size.Xs ? Variant.IconBefore : Variant.LabelOnly;
+    const spinnerSize = size === Size.Xs ? Sun.sizes.XS : Sun.sizes.S;
+    const handleChange = e => {
+        if (disabled || loading) {
+            return;
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(!checked, e);
+    };
+    return (_jsxs("label", Object.assign({}, extractSupportProps(rest), { "data-size": size, "data-loading": loading || undefined, "data-disabled": (!loading && disabled) || undefined, "data-variant": variant, "data-checked": checked || undefined, className: cn(styles.toggleChip, className) }, { children: [_jsx("input", { "data-test-id": CHIP_TOGGLE_TEST_IDS.input, type: 'checkbox', checked: checked, onChange: handleChange, disabled: !loading && disabled, tabIndex: disabled ? -1 : tabIndex, className: styles.toggleChipInput }), _jsxs("span", Object.assign({ className: styles.toggleChipContent }, { children: [variant === Variant.IconBefore && !loading && (_jsx("span", Object.assign({ className: styles.icon, "data-test-id": CHIP_TOGGLE_TEST_IDS.icon }, { children: icon }))), loading && (_jsx("span", Object.assign({ className: styles.spinner, "data-test-id": CHIP_TOGGLE_TEST_IDS.spinner }, { children: _jsx(Sun, { size: spinnerSize }) }))), _jsx("span", Object.assign({ className: cn(styles.labelLayout, styles.label), "data-test-id": CHIP_TOGGLE_TEST_IDS.label }, { children: label }))] }))] })));
+}
+ChipToggle.sizes = Size;

package/dist/components/ChipToggle/index.d.ts

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

package/dist/components/ChipToggle/index.js

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