@astral/ui 4.34.0 → 4.34.2

package/hook-form/FormQuickFilters/FormQuickFilters.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Checkbox } from '../../components/Checkbox';
+import { Chip, ChipProvider } from '../../components/Chip';
+import { ListItemIcon } from '../../components/ListItemIcon';
+import { MenuItem } from '../../components/MenuItem';
+import { FormSelect } from '../FormSelect';
+import { FORM_FILTERS_QUICK_FILTERS_ID, FORM_QUICK_FILTERS_ALL_CHIP_KEY, FORM_QUICK_FILTERS_ALL_VALUE, } from './constants';
+import { MobileWrapper, Wrapper } from './styles';
+import { useLogic } from './useLogic/useLogic';
+/**
+ * Группа чипов для быстрых фильтров внутри FormFilters (слот quickFilters).
+ *
+ *   Поведение чипов задаётся параметром `multiple` через `ChipProvider mode`:
+ *   - false (default) — `single` (radio)
+ *   - true — `multiple` (checkbox)
+ *
+ * - На мобильных устройствах отображается как Select
+ *
+ * @example
+ * <FormFilters
+ *   quickFilters={({ control }) => (
+ *     <FormQuickFilters
+ *       control={control}
+ *       name="status"
+ *       label="Статус"
+ *       options={[
+ *         { label: 'Активные', value: 'active' },
+ *         { label: 'Архив', value: 'archived' },
+ *       ]}
+ *     />
+ *   )}
+ * />
+ */
+export const FormQuickFilters = (props) => {
+    const { field, filterOptions, checkIsAllSelected, handleChipChange, isSelected, label, allLabel, allCounter, multiple, maxCount, name, placeholder, control, getOptionLabel, getCounterLabel, } = useLogic(props);
+    const renderMultipleOptions = () => {
+        return filterOptions.map((option) => {
+            const checked = control._formValues[name]?.includes(option.value);
+            return (_jsxs(MenuItem, { value: option.value, children: [_jsx(ListItemIcon, { children: _jsx(Checkbox, { checked: checked }) }), option.label, getCounterLabel(option)] }, option.value));
+        });
+    };
+    const renderSingleOptions = () => {
+        return filterOptions.map((option) => (_jsxs(MenuItem, { value: option.value, children: [option.label, getCounterLabel(option)] }, option.value)));
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Wrapper, { children: _jsxs(ChipProvider, { mode: multiple ? 'multiple' : 'single', name: name, children: [_jsx(Chip, { label: allLabel, isSelected: checkIsAllSelected(), onChange: () => handleChipChange(FORM_QUICK_FILTERS_ALL_VALUE), counter: allCounter, size: "medium", maxCount: maxCount, value: FORM_QUICK_FILTERS_ALL_VALUE }, FORM_QUICK_FILTERS_ALL_CHIP_KEY), filterOptions.map((option) => (_jsx(Chip, { label: option.label, isSelected: isSelected(option.value), onChange: () => handleChipChange(option.value), status: option.status, counter: option.counter, size: "medium", maxCount: maxCount, value: String(option.value) }, option.value)))] }) }), _jsx(MobileWrapper, { children: _jsx(FormSelect, { control: control, name: name, inputProps: { id: FORM_FILTERS_QUICK_FILTERS_ID }, label: label, getOptionLabel: getOptionLabel, multiple: multiple, onChange: field.onChange, onBlur: field.onBlur, fullWidth: true, placeholder: placeholder, children: multiple ? renderMultipleOptions() : renderSingleOptions() }) })] }));
+};

package/hook-form/FormQuickFilters/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const FORM_FILTERS_QUICK_FILTERS_ID = "form-filters-quick-filters";
+/** Значение поля при выборе «Все» (ничего не выбрано) */
+export declare const FORM_QUICK_FILTERS_ALL_VALUE = "";
+export declare const FORM_QUICK_FILTERS_DEFAULT_ALL_LABEL = "\u0412\u0441\u0435";
+/** Стабильный key для чипа «Все» (value поля при этом остаётся пустой строкой) */
+export declare const FORM_QUICK_FILTERS_ALL_CHIP_KEY = "form_quick_filters_all_key";

package/hook-form/FormQuickFilters/constants.js

@@ -0,0 +1,6 @@
+export const FORM_FILTERS_QUICK_FILTERS_ID = 'form-filters-quick-filters';
+/** Значение поля при выборе «Все» (ничего не выбрано) */
+export const FORM_QUICK_FILTERS_ALL_VALUE = '';
+export const FORM_QUICK_FILTERS_DEFAULT_ALL_LABEL = 'Все';
+/** Стабильный key для чипа «Все» (value поля при этом остаётся пустой строкой) */
+export const FORM_QUICK_FILTERS_ALL_CHIP_KEY = 'form_quick_filters_all_key';

package/hook-form/FormQuickFilters/index.d.ts

@@ -0,0 +1,2 @@
+export { FormQuickFilters } from './FormQuickFilters';
+export type { FormQuickFiltersProps, QuickFilterOption } from './types';

package/hook-form/FormQuickFilters/index.js

@@ -0,0 +1 @@
+export { FormQuickFilters } from './FormQuickFilters';

package/hook-form/FormQuickFilters/public.d.ts

@@ -0,0 +1,2 @@
+export { FormQuickFilters } from './FormQuickFilters';
+export type { FormQuickFiltersProps, QuickFilterOption } from './types';

package/hook-form/FormQuickFilters/public.js

@@ -0,0 +1 @@
+export { FormQuickFilters } from './FormQuickFilters';

package/hook-form/FormQuickFilters/styles.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const Wrapper: import("../../components/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const MobileWrapper: import("../../components/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/hook-form/FormQuickFilters/styles.js

@@ -0,0 +1,16 @@
+import { styled } from '../../components/styled';
+export const Wrapper = styled.div `
+  display: flex;
+  flex-wrap: wrap;
+  gap: ${({ theme }) => theme.spacing(2)};
+  align-items: center;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
+`;
+export const MobileWrapper = styled.div `
+  ${({ theme }) => theme.breakpoints.up('sm')} {
+    display: none;
+  }
+`;

package/hook-form/FormQuickFilters/types.d.ts

@@ -0,0 +1,62 @@
+import type { Control, Path } from 'react-hook-form';
+import type { ChipStatus } from '../../components/Chip';
+export type QuickFilterValue = string | number;
+export type QuickFilterOption = {
+    /**
+     * Текст чипа / пункта списка
+     */
+    label: string;
+    /**
+     * Значение опции
+     */
+    value: QuickFilterValue;
+    /**
+     * Статус чипа
+     */
+    status?: ChipStatus;
+    /**
+     * Число счетчика справа от `label`
+     */
+    counter?: number;
+};
+export type FormQuickFiltersProps<TFieldValues extends object> = {
+    /**
+     * Объект control из react-hook-form
+     */
+    control: Control<TFieldValues>;
+    /**
+     * Имя поля формы
+     */
+    name: Path<TFieldValues>;
+    /**
+     * Лейбл — отображается в заголовке Select-режима (внутри модалки на мобиле)
+     */
+    label: string;
+    /**
+     * Список опций (без пункта «Все» — он добавляется автоматически и соответствует пустому значению поля)
+     */
+    options: QuickFilterOption[];
+    /**
+     * Подпись встроенного чипа «Все»
+     * @default 'Все'
+     */
+    allLabel?: string;
+    /**
+     * Счётчик у чипа «Все»
+     */
+    allCounter?: number;
+    /**
+     * Максимальное чисто счетчика у чипов
+     */
+    maxCount?: number;
+    /**
+     * Режим мультивыбора.
+     * - false (default) — одиночный выбор (radio-поведение)
+     * - true — множественный выбор (checkbox-поведение)
+     */
+    multiple?: boolean;
+    /**
+     * Плейсхолдер для Select-режима (внутри модалки на мобиле)
+     */
+    placeholder?: string;
+};

package/hook-form/FormQuickFilters/types.js

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

package/hook-form/FormQuickFilters/useLogic/useLogic.d.ts

@@ -0,0 +1,18 @@
+import type { FormQuickFiltersProps, QuickFilterOption, QuickFilterValue } from '../types';
+export declare const useLogic: <TFieldValues extends object>({ control, name, label, options, allLabel, allCounter, multiple, maxCount, placeholder, }: FormQuickFiltersProps<TFieldValues>) => {
+    field: import("react-hook-form").ControllerRenderProps<TFieldValues, import("react-hook-form").Path<TFieldValues>>;
+    filterOptions: QuickFilterOption[];
+    checkIsAllSelected: () => boolean;
+    handleChipChange: (optionValue: QuickFilterValue) => void;
+    isSelected: (optionValue: QuickFilterValue) => boolean;
+    label: string;
+    allLabel: string;
+    allCounter: number | undefined;
+    multiple: boolean;
+    maxCount: number | undefined;
+    name: import("react-hook-form").Path<TFieldValues>;
+    placeholder: string | undefined;
+    control: import("react-hook-form").Control<TFieldValues>;
+    getOptionLabel: (value: string | number) => string | number;
+    getCounterLabel: (option: QuickFilterOption) => string;
+};

package/hook-form/FormQuickFilters/useLogic/useLogic.js

@@ -0,0 +1,59 @@
+import { useController } from 'react-hook-form';
+import { FORM_QUICK_FILTERS_ALL_VALUE, FORM_QUICK_FILTERS_DEFAULT_ALL_LABEL, } from '../constants';
+export const useLogic = ({ control, name, label, options, allLabel = FORM_QUICK_FILTERS_DEFAULT_ALL_LABEL, allCounter, multiple = false, maxCount, placeholder, }) => {
+    const { field } = useController({ control, name });
+    const filterOptions = options.filter((option) => option.value !== FORM_QUICK_FILTERS_ALL_VALUE);
+    const checkIsAllSelected = () => {
+        if (multiple) {
+            return !(field.value ?? []).length;
+        }
+        return field.value === FORM_QUICK_FILTERS_ALL_VALUE || field.value == null;
+    };
+    const handleChipChange = (optionValue) => {
+        if (optionValue === FORM_QUICK_FILTERS_ALL_VALUE) {
+            field.onChange(multiple ? [] : FORM_QUICK_FILTERS_ALL_VALUE);
+            return;
+        }
+        if (multiple) {
+            const current = field.value ?? [];
+            field.onChange(current.includes(optionValue)
+                ? current.filter((v) => v !== optionValue)
+                : [...current, optionValue]);
+        }
+        else {
+            field.onChange(field.value === optionValue
+                ? FORM_QUICK_FILTERS_ALL_VALUE
+                : optionValue);
+        }
+    };
+    const isSelected = (optionValue) => {
+        if (multiple) {
+            return (field.value ?? []).includes(optionValue);
+        }
+        return field.value === optionValue;
+    };
+    const getOptionLabel = (value) => {
+        const optionLabel = filterOptions.find((option) => option.value === value);
+        return optionLabel?.label || value;
+    };
+    const getCounterLabel = (option) => {
+        return option.counter ? ` (${option.counter})` : '';
+    };
+    return {
+        field,
+        filterOptions,
+        checkIsAllSelected,
+        handleChipChange,
+        isSelected,
+        label,
+        allLabel,
+        allCounter,
+        multiple,
+        maxCount,
+        name,
+        placeholder,
+        control,
+        getOptionLabel,
+        getCounterLabel,
+    };
+};

package/hook-form/FormWizard/Footer/Footer.js

@@ -6,5 +6,5 @@ import { PrevButton, Wrapper } from './styles';
 export const Footer = (props) => {
     const { isDisabled, isFirstStep, isLastStep, prevButtonText, submitButtonText, onPrevStep, } = props;
     const renderNextIcon = () => (isLastStep ? null : _jsx(ArrowROutlineMd, {}));
-    return (_jsxs(Wrapper, { children: [!isFirstStep && (_jsx(PrevButton, { disabled: isDisabled, variant: "light", startIcon: _jsx(ArrowLOutlineMd, {}), onClick: onPrevStep, children: prevButtonText })), _jsx(FormSubmitButton, { disabled: isDisabled, endIcon: renderNextIcon(), children: submitButtonText })] }));
+    return (_jsxs(Wrapper, { children: [!isFirstStep && (_jsx(PrevButton, { disabled: isDisabled, variant: "outlined", color: "grey", startIcon: _jsx(ArrowLOutlineMd, {}), onClick: onPrevStep, children: prevButtonText })), _jsx(FormSubmitButton, { disabled: isDisabled, endIcon: renderNextIcon(), children: submitButtonText })] }));
 };

package/node/components/Badge/styles.js

@@ -15,6 +15,7 @@ const getBgColor = ({ $customColor, theme, $variantColor, }) => {
             success: theme.palette.green[800],
             warning: theme.palette.yellow[800],
             white: theme.palette.primary.contrastText,
+            transparent: 'transparent',
         },
         light: {
             grey: theme.palette.grey[300],
@@ -23,6 +24,7 @@ const getBgColor = ({ $customColor, theme, $variantColor, }) => {
             success: theme.palette.green[100],
             warning: theme.palette.yellow[100],
             white: theme.palette.grey[100],
+            transparent: 'transparent',
         },
     };
     return colors[$variantColor][$customColor];
@@ -36,6 +38,9 @@ const getTextColor = ({ $customColor, theme, $variantColor, }) => {
         warning: theme.palette.yellow[800],
         default: theme.palette.primary.contrastText,
     };
+    if ($customColor === 'transparent') {
+        return theme.palette.grey[900];
+    }
     if ($customColor === 'white') {
         return theme.palette.grey[900];
     }

package/node/components/Badge/types.d.ts

@@ -1,2 +1,2 @@
-export type BadgeColor = 'primary' | 'grey' | 'white' | 'warning' | 'error' | 'success';
+export type BadgeColor = 'primary' | 'grey' | 'white' | 'warning' | 'error' | 'success' | 'transparent';
 export type BadgeVariantsColor = 'contained' | 'light';

package/node/components/Chip/Chip.js

@@ -8,7 +8,7 @@ const constants_1 = require("./constants");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 const Chip = (props) => {
-    const { classnames, inputProps, label, status, icon, counter, endAdornment, hasStartAdornment, hasEndAdornment, } = (0, useLogic_1.useLogic)(props);
+    const { classnames, inputProps, label, status, icon, counter, endAdornment, hasStartAdornment, hasEndAdornment, maxCount, } = (0, useLogic_1.useLogic)(props);
     const renderStartAdornment = () => {
         if (status) {
             return (0, jsx_runtime_1.jsx)(ChipStatusIcon_1.ChipStatusIcon, { status: status });
@@ -20,7 +20,7 @@ const Chip = (props) => {
     };
     const renderEndAdornment = () => {
         if (counter) {
-            return (0, jsx_runtime_1.jsx)(styles_1.Counter, { children: counter });
+            return ((0, jsx_runtime_1.jsx)(styles_1.StyledCounter, { color: "transparent", content: counter, max: maxCount, withBorder: false }));
         }
         if (endAdornment) {
             return endAdornment;

package/node/components/Chip/ChipProvider/ChipProvider.d.ts

@@ -0,0 +1,26 @@
+import { type ReactNode } from 'react';
+export type ChipMode = 'single' | 'multiple';
+export type ChipContextValue = {
+    mode: ChipMode;
+    /**
+     * Общий `name` для нативных `radio`/`checkbox` в группе (стрелки и семантика радио).
+     */
+    name?: string;
+};
+export declare const ChipContext: import("react").Context<ChipContextValue>;
+type ChipProviderProps = {
+    mode: ChipMode;
+    name?: string;
+    children: ReactNode;
+};
+/**
+ * Задаёт режим скрытого input для вложенных `Chip`:
+ * - `single` — `radio`; повторный клик по выбранному чипу вызывает `onChange` со снятием выбора
+ * - `multiple` — `checkbox`
+ *
+ * Параметр `name` задаёт общий атрибут `name` у инпутов (группа радио, стрелки вверх/вниз между опциями).
+ *
+ * Вне провайдера используется режим `single`.
+ */
+export declare const ChipProvider: ({ mode, name, children }: ChipProviderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/node/components/Chip/ChipProvider/ChipProvider.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChipProvider = exports.ChipContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+exports.ChipContext = (0, react_1.createContext)({ mode: 'single' });
+/**
+ * Задаёт режим скрытого input для вложенных `Chip`:
+ * - `single` — `radio`; повторный клик по выбранному чипу вызывает `onChange` со снятием выбора
+ * - `multiple` — `checkbox`
+ *
+ * Параметр `name` задаёт общий атрибут `name` у инпутов (группа радио, стрелки вверх/вниз между опциями).
+ *
+ * Вне провайдера используется режим `single`.
+ */
+const ChipProvider = ({ mode, name, children }) => ((0, jsx_runtime_1.jsx)(exports.ChipContext.Provider, { value: { mode, name }, children: children }));
+exports.ChipProvider = ChipProvider;

package/node/components/Chip/ChipProvider/index.d.ts

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

package/node/components/Chip/ChipProvider/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("./ChipProvider"), exports);

package/node/components/Chip/index.d.ts

@@ -1,2 +1,3 @@
 export { Chip } from './Chip';
-export type { ChipProps } from './types';
+export { type ChipContextValue, type ChipMode, ChipProvider, } from './ChipProvider';
+export type { ChipProps, ChipStatus } from './types';

package/node/components/Chip/index.js

@@ -1,5 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Chip = void 0;
+exports.ChipProvider = exports.Chip = void 0;
 var Chip_1 = require("./Chip");
 Object.defineProperty(exports, "Chip", { enumerable: true, get: function () { return Chip_1.Chip; } });
+var ChipProvider_1 = require("./ChipProvider");
+Object.defineProperty(exports, "ChipProvider", { enumerable: true, get: function () { return ChipProvider_1.ChipProvider; } });

package/node/components/Chip/public.d.ts

@@ -1,2 +1,3 @@
 export { Chip } from './Chip';
-export type { ChipProps } from './types';
+export { type ChipContextValue, type ChipMode, ChipProvider, } from './ChipProvider';
+export type { ChipProps, ChipStatus } from './types';

package/node/components/Chip/public.js

@@ -1,5 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Chip = void 0;
+exports.ChipProvider = exports.Chip = void 0;
 var Chip_1 = require("./Chip");
 Object.defineProperty(exports, "Chip", { enumerable: true, get: function () { return Chip_1.Chip; } });
+var ChipProvider_1 = require("./ChipProvider");
+Object.defineProperty(exports, "ChipProvider", { enumerable: true, get: function () { return ChipProvider_1.ChipProvider; } });

package/node/components/Chip/styles.d.ts

@@ -7,10 +7,14 @@ export declare const HiddenInput: import("@emotion/styled/dist/declarations/src/
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
-export declare const Counter: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+export declare const StyledCounter: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("..").WithoutEmotionSpecific<import("@mui/material/Badge").BadgeProps>, "content" | "color" | "children" | "variant" | "invisible" | "anchorOrigin" | "badgeContent" | "overlap" | "withBorder"> & {
+    color: import("../Counter/types").CounterColor;
+    variant?: import("../Counter/types").CounterVariants | undefined;
+    content?: number | undefined;
+    withBorder?: boolean | undefined;
+} & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, {}, {}>;
 export declare const AdornmentWrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../Typography/types").TypographyPropsBase & {
     color?: import("../Typography").TypographyColor | undefined;
     variant?: import("../Typography").TypographyVariant | undefined;

package/node/components/Chip/styles.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Label = exports.AdornmentWrapper = exports.Counter = exports.HiddenInput = exports.Wrapper = void 0;
+exports.Label = exports.AdornmentWrapper = exports.StyledCounter = exports.HiddenInput = exports.Wrapper = void 0;
+const Badge_1 = require("@mui/material/Badge");
+const Counter_1 = require("../Counter");
 const styled_1 = require("../styled");
 const Typography_1 = require("../Typography");
 const constants_1 = require("./constants");
@@ -113,9 +115,12 @@ exports.Wrapper = styled_1.styled.div `
   }
 `;
 exports.HiddenInput = styled_1.styled.input `
-  display: none;
+  position: absolute;
+
+  width: 0;
+  height: 0;
 `;
-exports.Counter = styled_1.styled.div `
+exports.StyledCounter = (0, styled_1.styled)(Counter_1.Counter) `
   display: flex;
   align-items: center;
 
@@ -134,6 +139,18 @@ exports.Counter = styled_1.styled.div `
     background-color: ${({ theme }) => theme.palette.grey[800]};
     border-radius: 50%;
   }
+
+  .${Badge_1.badgeClasses.badge} {
+    min-width: unset;
+    padding: 0;
+
+    font-size: ${({ theme }) => theme.typography.body1.fontSize};
+    font-weight: ${({ theme }) => theme.typography.body1.fontWeight};
+
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+      font-size: ${({ theme }) => theme.typography.body2.fontSize};
+    }
+  }
 `;
 exports.AdornmentWrapper = (0, styled_1.styled)(Typography_1.Typography) `
   display: flex;
@@ -142,4 +159,11 @@ exports.AdornmentWrapper = (0, styled_1.styled)(Typography_1.Typography) `
 exports.Label = styled_1.styled.label `
   /* Убираем подсветку при нажатии на компонент */
   -webkit-tap-highlight-color: transparent;
+
+  /* Причина игнора: Не критично для отображения */
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+  &:has(> input:focus-visible) .${constants_1.chipClassnames.root} {
+    outline: 2px solid ${({ theme }) => theme.palette.components.focused};
+    outline-offset: 2px;
+  }
 `;

package/node/components/Chip/types.d.ts

@@ -1,4 +1,11 @@
 import type { ChangeEvent, ReactElement, ReactNode } from 'react';
+export type ChipStatus = 'success' | 'warning' | 'error';
+/**
+ * Пропсы `Chip`.
+ *
+ * Тип скрытого поля (`radio` или `checkbox`) задаётся через `ChipProvider` (`mode`).
+ * Без провайдера используется `single`.
+ */
 export type ChipProps = {
     /**
      * Содержимое компонента
@@ -11,7 +18,7 @@ export type ChipProps = {
     /**
      * Статус компонента. Заменяет параметр `icon`
      */
-    status?: 'success' | 'warning' | 'error';
+    status?: ChipStatus;
     /**
      * Иконка слева от `label`
      */
@@ -32,6 +39,10 @@ export type ChipProps = {
      * Число счетчика справа от `label`. Заменяет параметр `endAdornment`
      */
     counter?: number;
+    /**
+     * Максимальное число которое отобразится в счетчике
+     */
+    maxCount?: number;
     /**
      * Элемент, который добавляется в конец компонента
      */
@@ -40,4 +51,13 @@ export type ChipProps = {
      * Обработчик изменения состояния компонента
      */
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Атрибут `name` скрытого `input` (для группы `radio` — одинаковый `name` у всех вариантов).
+     * Пробрасывается из `ChipProvider`, если задан там.
+     */
+    name?: string;
+    /**
+     * Атрибут `value` скрытого `input` (отметка в группе, отправка формы).
+     */
+    value?: string | number;
 };

package/node/components/Chip/useLogic/useLogic.d.ts

@@ -1,20 +1,21 @@
 /// <reference types="react" />
 import { type ChipProps } from '../types';
-type UseLogicParams = ChipProps;
-export declare const useLogic: ({ className, isDisabled, isSelected, onChange, size, label, status, icon, counter, endAdornment, }: UseLogicParams) => {
+export declare const useLogic: ({ className, isDisabled, isSelected, onChange, size, label, status, icon, counter, endAdornment, maxCount, name: nameProp, value: valueProp, }: ChipProps) => {
     classnames: string;
     inputProps: {
+        value?: string | number | undefined;
+        name?: string | undefined;
         checked: boolean | undefined;
         onChange: ((event: import("react").ChangeEvent<HTMLInputElement, Element>) => void) | undefined;
         type: string;
         disabled: boolean | undefined;
     };
     label: import("react").ReactNode;
-    status: "success" | "warning" | "error" | undefined;
+    status: import("../types").ChipStatus | undefined;
     icon: import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | undefined;
     counter: number | undefined;
     endAdornment: import("react").ReactNode;
     hasStartAdornment: boolean;
     hasEndAdornment: boolean;
+    maxCount: number | undefined;
 };
-export {};

package/node/components/Chip/useLogic/useLogic.js

@@ -3,8 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const react_1 = require("react");
 const classNames_1 = require("../../utils/classNames");
+const ChipProvider_1 = require("../ChipProvider");
 const constants_1 = require("../constants");
-const useLogic = ({ className, isDisabled, isSelected, onChange, size = 'medium', label, status, icon, counter, endAdornment, }) => {
+const useLogic = ({ className, isDisabled, isSelected, onChange, size = 'medium', label, status, icon, counter, endAdornment, maxCount, name: nameProp, value: valueProp, }) => {
+    const { mode, name: contextName } = (0, react_1.useContext)(ChipProvider_1.ChipContext);
+    const isMultiple = mode === 'multiple';
+    const inputName = nameProp ?? contextName;
     const classnames = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(className, constants_1.chipClassnames.root, {
         [constants_1.chipClassnames.disabled]: isDisabled,
         [constants_1.chipClassnames.selected]: isSelected,
@@ -18,13 +22,16 @@ const useLogic = ({ className, isDisabled, isSelected, onChange, size = 'medium'
     }), [isSelected, isDisabled, size, status, counter, endAdornment, icon]);
     const hasStartAdornment = Boolean(status || icon);
     const hasEndAdornment = Boolean(endAdornment || counter);
+    const inputType = isMultiple ? 'checkbox' : 'radio';
     return {
         classnames,
         inputProps: {
             checked: isSelected,
             onChange,
-            type: 'checkbox',
+            type: inputType,
             disabled: isDisabled,
+            ...(inputName !== undefined ? { name: inputName } : {}),
+            ...(valueProp !== undefined ? { value: valueProp } : {}),
         },
         label,
         status,
@@ -33,6 +40,7 @@ const useLogic = ({ className, isDisabled, isSelected, onChange, size = 'medium'
         endAdornment,
         hasStartAdornment,
         hasEndAdornment,
+        maxCount,
     };
 };
 exports.useLogic = useLogic;

package/node/components/Counter/Counter.d.ts

@@ -14,5 +14,9 @@ export type CounterProps = Omit<WithoutEmotionSpecific<MuiBadgeProps>, 'color' |
      * Контент
      */
     content?: number;
+    /**
+     * Наличие белой рамки
+     */
+    withBorder?: boolean;
 };
-export declare const Counter: ({ content, color, max, variant, ...props }: CounterProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Counter: ({ content, color, max, variant, withBorder, ...props }: CounterProps) => import("react/jsx-runtime").JSX.Element;

package/node/components/Counter/Counter.js

@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Counter = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const styles_1 = require("./styles");
-const Counter = ({ content, color, max = 99, variant = 'contained', ...props }) => ((0, jsx_runtime_1.jsx)(styles_1.StyledCounter, { badgeContent: content, max: max, variantColor: variant, color: color, ...props }));
+const Counter = ({ content, color, max = 99, variant = 'contained', withBorder = true, ...props }) => ((0, jsx_runtime_1.jsx)(styles_1.StyledCounter, { badgeContent: content, max: max, variantColor: variant, color: color, withBorder: withBorder, ...props }));
 exports.Counter = Counter;

package/node/components/Counter/types.d.ts

@@ -1,2 +1,2 @@
-export type CounterColor = 'primary' | 'grey' | 'white' | 'warning' | 'error' | 'success';
+export type CounterColor = 'primary' | 'grey' | 'white' | 'warning' | 'error' | 'success' | 'transparent';
 export type CounterVariants = 'contained' | 'light';

package/node/components/DashboardSidebarCounter/styles.d.ts

@@ -2,6 +2,7 @@ export declare const StyledCounter: import("@emotion/styled/dist/declarations/sr
     color: import("../Counter/types").CounterColor;
     variant?: import("../Counter/types").CounterVariants | undefined;
     content?: number | undefined;
+    withBorder?: boolean | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 } & {