@max-ts/components 0.1.1 → 0.2.0

package/lib/components/AsyncAutocomplete/constants.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const T=0,_=300,E="Продолжайте вводить для поиска",A="Нет данных";exports.DEFAULT_DELAY_MS=_;exports.DEFAULT_EMPTY_OPTIONS_TEXT=E;exports.DEFAULT_MIN_SEARCH_CHARACTERS=T;exports.DEFAULT_NO_OPTIONS_TEXT=A;

package/lib/components/AsyncAutocomplete/constants.mjs

@@ -0,0 +1,7 @@
+const T = 0, _ = 300, E = "Продолжайте вводить для поиска", A = "Нет данных";
+export {
+  _ as DEFAULT_DELAY_MS,
+  E as DEFAULT_EMPTY_OPTIONS_TEXT,
+  T as DEFAULT_MIN_SEARCH_CHARACTERS,
+  A as DEFAULT_NO_OPTIONS_TEXT
+};

package/lib/components/AsyncAutocomplete/useLogic/useLogic.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),F=require("@mui/material"),i=require("../constants.cjs"),R=({fetchOptions:l,fetchDelayMs:c=i.DEFAULT_DELAY_MS,minSymbolsToFetch:E=i.DEFAULT_MIN_SEARCH_CHARACTERS,defaultValue:u,getOptionLabel:T,noOptionsText:f=i.DEFAULT_NO_OPTIONS_TEXT,onOpen:p,onInputChange:g})=>{const[A,s]=e.useState(!1),[O,d]=e.useState(!0),[L,S]=e.useState(!0),a=e.useRef(null),[C,_]=e.useState([]),r=e.useCallback(F.debounce(n=>{a.current?.abort();const t=new AbortController;a.current=t,l(n,t?.signal).then(o=>{_(o),S(o.length===0)}).finally(()=>{s(!1),a.current=null})},c),[l,c,f]),I=(n,t,o)=>{if(!t||t.length<E)return r&&r.clear(),S(!1),s(!1),_([]);s(!0),O||r(t),g?.(n,t,o)},b=n=>{if(O){d(!1);const t=u&&T?T(u):"";(u||E===0)&&(s(!0),r(t))}p?.(n)},D=L?f:i.DEFAULT_EMPTY_OPTIONS_TEXT;return{handleOpen:b,handleInputChange:I,options:C,isLoadingData:A,emptyOptionsText:D}};exports.useLogic=R;

package/lib/components/AsyncAutocomplete/useLogic/useLogic.d.ts

@@ -0,0 +1,12 @@
+import { SyntheticEvent } from 'react';
+import { AutocompleteInputChangeReason } from '@mui/material';
+import { AsyncAutocompleteProps } from '../AsyncAutocomplete';
+type UseLogicParams<TOptions, Multiple extends boolean, DisableClearable extends boolean, FreeSolo extends boolean> = AsyncAutocompleteProps<TOptions, Multiple, DisableClearable, FreeSolo>;
+export declare const useLogic: <TOptions, Multiple extends boolean, DisableClearable extends boolean, FreeSolo extends boolean>({ fetchOptions, fetchDelayMs, minSymbolsToFetch, defaultValue, getOptionLabel, noOptionsText, onOpen, onInputChange, }: UseLogicParams<TOptions, Multiple, DisableClearable, FreeSolo>) => {
+    handleOpen: (event: SyntheticEvent) => void;
+    handleInputChange: (event: SyntheticEvent, search: string, reason: AutocompleteInputChangeReason) => void;
+    options: TOptions[];
+    isLoadingData: boolean;
+    emptyOptionsText: string | number | bigint | boolean | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<import('react').ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<import('react').ReactNode> | null | undefined> | null;
+};
+export {};

package/lib/components/AsyncAutocomplete/useLogic/useLogic.mjs

@@ -0,0 +1,47 @@
+import { useState as r, useRef as g, useCallback as L } from "react";
+import { debounce as D } from "@mui/material";
+import { DEFAULT_DELAY_MS as F, DEFAULT_NO_OPTIONS_TEXT as S, DEFAULT_EMPTY_OPTIONS_TEXT as h, DEFAULT_MIN_SEARCH_CHARACTERS as R } from "../constants.mjs";
+const H = ({
+  fetchOptions: a,
+  fetchDelayMs: c = F,
+  minSymbolsToFetch: p = R,
+  defaultValue: i,
+  getOptionLabel: u,
+  noOptionsText: f = S,
+  onOpen: _,
+  onInputChange: A
+}) => {
+  const [d, e] = r(!1), [E, m] = r(!0), [C, O] = r(!0), l = g(null), [I, T] = r([]), o = L(
+    D((n) => {
+      l.current?.abort();
+      const t = new AbortController();
+      l.current = t, a(n, t?.signal).then((s) => {
+        T(s), O(s.length === 0);
+      }).finally(() => {
+        e(!1), l.current = null;
+      });
+    }, c),
+    [a, c, f]
+  );
+  return {
+    handleOpen: (n) => {
+      if (E) {
+        m(!1);
+        const t = i && u ? u(i) : "";
+        (i || p === 0) && (e(!0), o(t));
+      }
+      _?.(n);
+    },
+    handleInputChange: (n, t, s) => {
+      if (!t || t.length < p)
+        return o && o.clear(), O(!1), e(!1), T([]);
+      e(!0), E || o(t), A?.(n, t, s);
+    },
+    options: I,
+    isLoadingData: d,
+    emptyOptionsText: C ? f : h
+  };
+};
+export {
+  H as useLogic
+};

package/lib/components/Autocomplete/Autocomplete.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../_virtual/jsx-runtime.cjs"),o=require("react"),x=require("@mui/material"),M=require("../Checkbox/Checkbox.cjs"),U=require("../CircularProgress/CircularProgress.cjs"),H=require("../OverflowTypography/OverflowTypography.cjs"),N=require("../Tag/Tag.cjs"),V=require("../TextField/TextField.cjs"),j=require("lucide-react"),L=require("./constants.cjs"),X=require("./styles.cjs"),$=require("./useLogic/useLogic.cjs"),z=m=>{const{isValueEmpty:T,isPopperVisible:g,autocompleteProps:f}=$.useLogic(m),{required:b,success:O,error:h,label:q,getOptionLabel:n,helperText:y,inputRef:C,multiple:l,size:c="medium",placeholder:E=L.DEFAULT_PLACEHOLDER,overflowOption:I,closeText:R="Закрыть",openText:P="Открыть",clearText:A="Очистить",loadingText:D=r.j.jsx(U.CircularProgress,{color:"primary"}),isLoadedDataError:B,loadedDataError:W,noOptionsText:G,autoHighlight:J,renderInput:u,renderTags:i,renderOption:s,...S}=m,v=o.useCallback(e=>{const t={...e,inputRef:C,required:b,placeholder:T?E:"",label:q,success:O,error:h,helperText:y,size:c};return u?u(t):r.j.jsx(V.TextField,{...t})},[T,u,C,b,E,q,O,h,y,c]),w=o.useCallback((e,t,a,p)=>{if(s)return s(e,t,a,p);const d=!!e["aria-selected"];return o.createElement(X.StyledMenuItem,{...e,key:e.id},l&&r.j.jsx(x.ListItemIcon,{children:r.j.jsx(M.Checkbox,{role:"menuitemcheckbox",checked:d})}),r.j.jsx(H.OverflowTypography,{rowsCount:L.DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT,...I,children:e.key}))},[l,I,s]),_=o.useCallback((e,t,a)=>i?i(e,t,a):e.map((p,d)=>{const k=n?.(p)||"";return o.createElement(N.Tag,{deleteIcon:r.j.jsx(j.X,{}),color:"grey",label:k,...t({index:d}),key:k})}),[n,i]),F=o.useCallback(e=>g?r.j.jsx(x.Popper,{...e}):null,[g]);return r.j.jsx(x.Autocomplete,{...S,size:c,clearText:A,closeText:R,openText:P,loadingText:D,multiple:l,disableCloseOnSelect:l,clearIcon:r.j.jsx(j.X,{}),popupIcon:r.j.jsx(j.ChevronDown,{}),forcePopupIcon:!0,slotProps:{clearIndicator:{disableRipple:!0},popper:{component:F}},getOptionLabel:n,renderInput:v,renderTags:_,renderOption:w,...f})};exports.Autocomplete=z;

package/lib/components/Autocomplete/Autocomplete.d.ts

@@ -0,0 +1,47 @@
+import { AutocompleteRenderInputParams, AutocompleteProps as MuiAutocompleteProps } from '@mui/material';
+import { ReactNode } from 'react';
+import { OverflowedElementProps } from '../OverflowTypography';
+import { TextFieldProps } from '../TextField';
+import { WithoutEmotionSpecific } from '../types';
+import { AutocompleteSizes } from './enums';
+export type AutocompleteSize = `${AutocompleteSizes}`;
+export type AutocompleteProps<AutocompleteValueProps, Multiple extends boolean, DisableClearable extends boolean, FreeSolo extends boolean> = Omit<WithoutEmotionSpecific<MuiAutocompleteProps<AutocompleteValueProps, Multiple, DisableClearable, FreeSolo>>, 'size' | 'renderInput' | 'noOptionsText' | 'closeText' | 'openText' | 'clearText'> & Pick<TextFieldProps, 'error' | 'success' | 'helperText' | 'label' | 'required' | 'inputRef' | 'placeholder'> & {
+    renderInput?: (props: TextFieldProps & Omit<AutocompleteRenderInputParams, 'size'>) => ReactNode;
+    size?: AutocompleteSize;
+    /**
+     * Опции для OverflowTypography, который оборачивает содержимое item
+     */
+    overflowOption?: OverflowedElementProps;
+    /**
+     * Текст ошибки, который будет отображаться в меню автокомплита
+     * Пример использования: информирование пользователя о том, что АПИ
+     * используемого сервиса в текущий момент недоступно
+     */
+    loadedDataError?: string;
+    /**
+     * Если true, будет отображено сообщение об ошибке при загрузке данных
+     * в меню автокомплита
+     */
+    isLoadedDataError?: boolean;
+    /**
+     * Текст для отображения, когда нет данных
+     * @default Нет данных
+     */
+    noOptionsText?: ReactNode;
+    /**
+     * Переопределяет текст для кнопки закрытия всплывающего окна
+     * @default Закрыть
+     */
+    closeText?: string;
+    /**
+     * Переопределяет текст для кнопки открытия всплывающего окна
+     * @default Открыть
+     */
+    openText?: string;
+    /**
+     * Переопределяет текст для кнопки отчистки поля
+     * @default Очистить
+     */
+    clearText?: string;
+};
+export declare const Autocomplete: <AutocompleteValueProps, Multiple extends boolean, DisableClearable extends boolean, FreeSolo extends boolean>(props: AutocompleteProps<AutocompleteValueProps, Multiple, DisableClearable, FreeSolo>) => import("react/jsx-runtime").JSX.Element;

package/lib/components/Autocomplete/Autocomplete.mjs

@@ -0,0 +1,134 @@
+import { j as r } from "../../_virtual/jsx-runtime.mjs";
+import { useCallback as n, createElement as y } from "react";
+import { ListItemIcon as F, Popper as M, Autocomplete as H } from "@mui/material";
+import { Checkbox as N } from "../Checkbox/Checkbox.mjs";
+import { CircularProgress as V } from "../CircularProgress/CircularProgress.mjs";
+import { OverflowTypography as q } from "../OverflowTypography/OverflowTypography.mjs";
+import { Tag as z } from "../Tag/Tag.mjs";
+import { TextField as B } from "../TextField/TextField.mjs";
+import { X as C, ChevronDown as W } from "lucide-react";
+import { DEFAULT_PLACEHOLDER as X, DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT as $ } from "./constants.mjs";
+import { StyledMenuItem as G } from "./styles.mjs";
+import { useLogic as J } from "./useLogic/useLogic.mjs";
+const ue = (d) => {
+  const { isValueEmpty: x, isPopperVisible: f, autocompleteProps: R } = J(d), {
+    required: T,
+    success: E,
+    error: O,
+    label: h,
+    getOptionLabel: l,
+    helperText: j,
+    inputRef: I,
+    multiple: t,
+    size: i = "medium",
+    placeholder: g = X,
+    overflowOption: L,
+    closeText: k = "Закрыть",
+    openText: A = "Открыть",
+    clearText: D = "Очистить",
+    loadingText: P = /* @__PURE__ */ r.jsx(V, { color: "primary" }),
+    isLoadedDataError: K,
+    loadedDataError: Q,
+    noOptionsText: Y,
+    autoHighlight: Z,
+    renderInput: p,
+    renderTags: s,
+    renderOption: c,
+    ..._
+  } = d, w = n(
+    (e) => {
+      const o = {
+        ...e,
+        inputRef: I,
+        required: T,
+        placeholder: x ? g : "",
+        label: h,
+        success: E,
+        error: O,
+        helperText: j,
+        size: i
+      };
+      return p ? p(o) : /* @__PURE__ */ r.jsx(B, { ...o });
+    },
+    [
+      x,
+      p,
+      I,
+      T,
+      g,
+      h,
+      E,
+      O,
+      j,
+      i
+    ]
+  ), S = n(
+    (e, o, m, a) => {
+      if (c)
+        return c(
+          e,
+          o,
+          m,
+          a
+        );
+      const u = !!e["aria-selected"];
+      return /* @__PURE__ */ y(G, { ...e, key: e.id }, t && /* @__PURE__ */ r.jsx(F, { children: /* @__PURE__ */ r.jsx(N, { role: "menuitemcheckbox", checked: u }) }), /* @__PURE__ */ r.jsx(
+        q,
+        {
+          rowsCount: $,
+          ...L,
+          children: e.key
+        }
+      ));
+    },
+    [t, L, c]
+  ), U = n(
+    (e, o, m) => s ? s(e, o, m) : e.map((a, u) => {
+      const b = l?.(a) || "";
+      return /* @__PURE__ */ y(
+        z,
+        {
+          deleteIcon: /* @__PURE__ */ r.jsx(C, {}),
+          color: "grey",
+          label: b,
+          ...o({ index: u }),
+          key: b
+        }
+      );
+    }),
+    [l, s]
+  ), v = n(
+    (e) => f ? /* @__PURE__ */ r.jsx(M, { ...e }) : null,
+    [f]
+  );
+  return /* @__PURE__ */ r.jsx(
+    H,
+    {
+      ..._,
+      size: i,
+      clearText: D,
+      closeText: k,
+      openText: A,
+      loadingText: P,
+      multiple: t,
+      disableCloseOnSelect: t,
+      clearIcon: /* @__PURE__ */ r.jsx(C, {}),
+      popupIcon: /* @__PURE__ */ r.jsx(W, {}),
+      forcePopupIcon: !0,
+      slotProps: {
+        clearIndicator: { disableRipple: !0 },
+        popper: {
+          component: v
+        }
+      },
+      getOptionLabel: l,
+      renderInput: w,
+      renderTags: U,
+      renderOption: S,
+      ...R
+    }
+  );
+};
+export {
+  ue as Autocomplete
+};

package/lib/components/Autocomplete/constants.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=2,T="Начните вводить для поиска";exports.DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT=E;exports.DEFAULT_PLACEHOLDER=T;

package/lib/components/Autocomplete/constants.mjs

@@ -0,0 +1,5 @@
+const E = 2, L = "Начните вводить для поиска";
+export {
+  E as DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT,
+  L as DEFAULT_PLACEHOLDER
+};

package/lib/components/Autocomplete/enums.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var l=(e=>(e.medium="medium",e.small="small",e))(l||{});exports.AutocompleteSizes=l;

package/lib/components/Autocomplete/enums.mjs

@@ -0,0 +1,4 @@
+var r = /* @__PURE__ */ ((m) => (m.medium = "medium", m.small = "small", m))(r || {});
+export {
+  r as AutocompleteSizes
+};

package/lib/components/Autocomplete/styles.cjs

@@ -0,0 +1,7 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@mui/material"),n=require("../MenuItem/MenuItem.cjs"),i=t.styled(n.MenuItem)`
+  max-height: ${({theme:e})=>e.spacing(13)};
+
+  ${({theme:e})=>e.breakpoints.down("sm")} {
+    max-height: unset;
+  }
+`;exports.StyledMenuItem=i;

package/lib/components/Autocomplete/styles.d.ts

@@ -0,0 +1,7 @@
+export declare const StyledMenuItem: import('@emotion/styled').StyledComponent<import('../types').WithoutEmotionSpecific<import('@mui/material').MenuItemProps<import('react').ElementType>> & {
+    disabledReason?: string;
+    note?: string;
+    tooltipPlacement?: import('..').TooltipProps["placement"];
+    component?: import('react').ElementType | undefined;
+    href?: string;
+} & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;

package/lib/components/Autocomplete/styles.mjs

@@ -0,0 +1,12 @@
+import { styled as e } from "@mui/material";
+import { MenuItem as m } from "../MenuItem/MenuItem.mjs";
+const i = e(m)`
+  max-height: ${({ theme: t }) => t.spacing(13)};
+
+  ${({ theme: t }) => t.breakpoints.down("sm")} {
+    max-height: unset;
+  }
+`;
+export {
+  i as StyledMenuItem
+};

package/lib/components/Autocomplete/useLogic/useLogic.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react"),C=require("./utils/checkIsInputEmpty/checkIsInputEmpty.cjs"),k=({value:o,isOptionEqualToValue:n,autoHighlight:p=!0,freeSolo:c,options:r,loading:s,isLoadedDataError:i,loadedDataError:l="Ошибка загрузки данных",noOptionsText:g="Нет данных",onInputChange:I})=>{const[a,h]=u.useState(""),y=C.checkIsInputEmpty(o),f=a.length>=1,m=r.length>0,b=f||m||s||i,O=u.useCallback((e,t)=>n?n(e,t):JSON.stringify(e)===JSON.stringify(t),[n]);return{isValueEmpty:y,isPopperVisible:b,autocompleteProps:{isOptionEqualToValue:O,autoHighlight:c?!1:p,noOptionsText:i?l:g,onInputChange:(e,t,S)=>{I?.(e,t,S),s||h(t)}}}};exports.useLogic=k;

package/lib/components/Autocomplete/useLogic/useLogic.d.ts

@@ -0,0 +1,15 @@
+import { AutocompleteInputChangeReason } from '@mui/material';
+import { SyntheticEvent } from 'react';
+import { AutocompleteProps } from '../Autocomplete';
+type UseLogicParams<AutocompleteValueProps, Multiple extends boolean, DisableClearable extends boolean, FreeSolo extends boolean> = AutocompleteProps<AutocompleteValueProps, Multiple, DisableClearable, FreeSolo>;
+export declare const useLogic: <AutocompleteValueProps, Multiple extends boolean, DisableClearable extends boolean, FreeSolo extends boolean>({ value, isOptionEqualToValue: externalOptionEqualToValue, autoHighlight, freeSolo, options, loading, isLoadedDataError, loadedDataError, noOptionsText, onInputChange, }: UseLogicParams<AutocompleteValueProps, Multiple, DisableClearable, FreeSolo>) => {
+    isValueEmpty: boolean;
+    isPopperVisible: boolean | undefined;
+    autocompleteProps: {
+        isOptionEqualToValue: (option: AutocompleteValueProps, currentValue: AutocompleteValueProps) => boolean;
+        autoHighlight: boolean;
+        noOptionsText: string | number | bigint | boolean | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<import('react').ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<import('react').ReactNode> | null | undefined> | null;
+        onInputChange: (event: SyntheticEvent, currentValue: string, reason: AutocompleteInputChangeReason) => void;
+    };
+};
+export {};

package/lib/components/Autocomplete/useLogic/useLogic.mjs

@@ -0,0 +1,34 @@
+import { useState as b, useCallback as N } from "react";
+import { checkIsInputEmpty as S } from "./utils/checkIsInputEmpty/checkIsInputEmpty.mjs";
+const J = ({
+  value: o,
+  isOptionEqualToValue: s,
+  autoHighlight: p = !0,
+  freeSolo: u,
+  options: c,
+  loading: e,
+  isLoadedDataError: i,
+  loadedDataError: l = "Ошибка загрузки данных",
+  noOptionsText: h = "Нет данных",
+  onInputChange: r
+}) => {
+  const [I, a] = b(""), g = S(o), m = I.length >= 1, f = c.length > 0, y = m || f || e || i, C = N(
+    (n, t) => s ? s(n, t) : JSON.stringify(n) === JSON.stringify(t),
+    [s]
+  );
+  return {
+    isValueEmpty: g,
+    isPopperVisible: y,
+    autocompleteProps: {
+      isOptionEqualToValue: C,
+      autoHighlight: u ? !1 : p,
+      noOptionsText: i ? l : h,
+      onInputChange: (n, t, O) => {
+        r?.(n, t, O), e || a(t);
+      }
+    }
+  };
+};
+export {
+  J as useLogic
+};

package/lib/components/Autocomplete/useLogic/utils/checkIsInputEmpty/checkIsInputEmpty.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=t=>Array.isArray(t)?t.length===0:!t;exports.checkIsInputEmpty=r;

package/lib/components/Autocomplete/useLogic/utils/checkIsInputEmpty/checkIsInputEmpty.mjs

@@ -0,0 +1,4 @@
+const t = (r) => Array.isArray(r) ? r.length === 0 : !r;
+export {
+  t as checkIsInputEmpty
+};

package/lib/components/Badge/Badge.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("../../_virtual/jsx-runtime.cjs"),d=require("./styles.cjs"),n=({children:e,color:t,max:r=99,withBorder:o=!0,variantColor:i="contained",...s})=>a.j.jsx(d.StyledBadge,{$customColor:t,max:r,$withBorder:o,$variantColor:i,...s,children:e});exports.Badge=n;

package/lib/components/Badge/Badge.d.ts

@@ -0,0 +1,18 @@
+import { BadgeProps as MuiBadgeProps } from '@mui/material';
+import { WithoutEmotionSpecific } from '../types';
+import { BadgeColor, BadgeVariantsColor } from './types';
+export type BadgeProps = Omit<WithoutEmotionSpecific<MuiBadgeProps>, 'color'> & {
+    /**
+     * Цвет фона
+     */
+    color: BadgeColor;
+    /**
+     * Наличие белой рамки
+     */
+    withBorder?: boolean;
+    /**
+     * Группа цвета
+     */
+    variantColor?: BadgeVariantsColor;
+};
+export declare const Badge: ({ children, color, max, withBorder, variantColor, ...props }: BadgeProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/Badge/Badge.mjs

@@ -0,0 +1,23 @@
+import { j as m } from "../../_virtual/jsx-runtime.mjs";
+import { StyledBadge as s } from "./styles.mjs";
+const p = ({
+  children: o,
+  color: r,
+  max: t = 99,
+  withBorder: e = !0,
+  variantColor: a = "contained",
+  ...i
+}) => /* @__PURE__ */ m.jsx(
+  s,
+  {
+    $customColor: r,
+    max: t,
+    $withBorder: e,
+    $variantColor: a,
+    ...i,
+    children: o
+  }
+);
+export {
+  p as Badge
+};

package/lib/components/Badge/styles.cjs

@@ -0,0 +1,21 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("@mui/material"),o=({$customColor:r,theme:e,$variantColor:t})=>{const a={contained:{grey:e.palette.grey[800],primary:e.palette.primary[800],error:e.palette.red[800],success:e.palette.green[800],warning:e.palette.yellow[800],default:e.palette.primary.main},light:{grey:e.palette.grey[300],primary:e.palette.primary[100],error:e.palette.red[100],success:e.palette.green[100],warning:e.palette.yellow[100],default:e.palette.primary.main}};return r==="white"?e.palette.background.default:a[t][r]},i=({$customColor:r,theme:e,$variantColor:t})=>{const a={grey:e.palette.grey[900],primary:e.palette.primary[900],error:e.palette.red[900],success:e.palette.green[900],warning:e.palette.yellow[900],default:e.palette.primary.contrastText};return r==="white"?e.palette.grey[900]:t==="contained"?e.palette.common.white:a[r||"default"]},n=l.styled(l.Badge,{shouldForwardProp:r=>!["$customColor","$withBorder","$variantColor"].includes(r.toString())})`
+  .MuiBadge-badge {
+    height: 20px;
+    padding: ${({theme:r})=>r.spacing(0,1)};
+
+    font-size: ${({theme:r})=>r.typography.caption.fontSize};
+    line-height: 20px;
+    color: ${({$customColor:r,theme:e,$variantColor:t})=>i({$customColor:r,theme:e,$variantColor:t})};
+
+    background-color: ${({$customColor:r,theme:e,$variantColor:t})=>o({$customColor:r,theme:e,$variantColor:t})};
+    border: ${({$withBorder:r,theme:e})=>r?`2px solid ${e.palette.common.white}`:"none"};
+    border-radius: ${({$withBorder:r})=>r?"12px":null};
+  }
+
+  .MuiBadge-dot {
+    width: 12px;
+    height: 12px;
+
+    border: 2px solid ${({theme:r})=>r.palette.common.white};
+  }
+`;exports.StyledBadge=n;

package/lib/components/Badge/styles.d.ts

@@ -0,0 +1,8 @@
+import { BadgeColor, BadgeVariantsColor } from './types';
+type StyledBadgeProps = {
+    $customColor: BadgeColor;
+    $withBorder?: boolean;
+    $variantColor: BadgeVariantsColor;
+};
+export declare const StyledBadge: import('@emotion/styled').StyledComponent<import('@mui/material').BadgeOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "sx" | "className" | "color" | "max" | "style" | "children" | "classes" | "variant" | "components" | "componentsProps" | "slots" | "slotProps" | "invisible" | "anchorOrigin" | "badgeContent" | "overlap" | "showZero"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & StyledBadgeProps, {}, {}>;
+export {};

package/lib/components/Badge/styles.mjs

@@ -0,0 +1,73 @@
+import { styled as o, Badge as l } from "@mui/material";
+const p = ({
+  $customColor: e,
+  theme: r,
+  $variantColor: t
+}) => {
+  const a = {
+    contained: {
+      grey: r.palette.grey[800],
+      primary: r.palette.primary[800],
+      error: r.palette.red[800],
+      success: r.palette.green[800],
+      warning: r.palette.yellow[800],
+      default: r.palette.primary.main
+    },
+    light: {
+      grey: r.palette.grey[300],
+      primary: r.palette.primary[100],
+      error: r.palette.red[100],
+      success: r.palette.green[100],
+      warning: r.palette.yellow[100],
+      default: r.palette.primary.main
+    }
+  };
+  return e === "white" ? r.palette.background.default : a[t][e];
+}, i = ({
+  $customColor: e,
+  theme: r,
+  $variantColor: t
+}) => {
+  const a = {
+    grey: r.palette.grey[900],
+    primary: r.palette.primary[900],
+    error: r.palette.red[900],
+    success: r.palette.green[900],
+    warning: r.palette.yellow[900],
+    default: r.palette.primary.contrastText
+  };
+  return e === "white" ? r.palette.grey[900] : t === "contained" ? r.palette.common.white : a[e || "default"];
+}, d = o(l, {
+  shouldForwardProp: (e) => !["$customColor", "$withBorder", "$variantColor"].includes(e.toString())
+})`
+  .MuiBadge-badge {
+    height: 20px;
+    padding: ${({ theme: e }) => e.spacing(0, 1)};
+
+    font-size: ${({ theme: e }) => e.typography.caption.fontSize};
+    line-height: 20px;
+    color: ${({ $customColor: e, theme: r, $variantColor: t }) => i({
+  $customColor: e,
+  theme: r,
+  $variantColor: t
+})};
+
+    background-color: ${({ $customColor: e, theme: r, $variantColor: t }) => p({
+  $customColor: e,
+  theme: r,
+  $variantColor: t
+})};
+    border: ${({ $withBorder: e, theme: r }) => e ? `2px solid ${r.palette.common.white}` : "none"};
+    border-radius: ${({ $withBorder: e }) => e ? "12px" : null};
+  }
+
+  .MuiBadge-dot {
+    width: 12px;
+    height: 12px;
+
+    border: 2px solid ${({ theme: e }) => e.palette.common.white};
+  }
+`;
+export {
+  d as StyledBadge
+};

package/lib/components/BottomDrawer/BottomDrawer.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../_virtual/jsx-runtime.cjs"),j=require("../IconButton/IconButton.cjs"),u=require("lucide-react"),d=require("./constants.cjs"),r=require("./styles.cjs"),l=({title:n,drawerHeaderHeight:o=d.DEFAULT_HEADER_HEIGHT,children:i,onClose:t,...s})=>{const a=c=>{t&&t(c,"escapeKeyDown")};return e.j.jsxs(r.StyledDrawer,{...s,anchor:"bottom",onClose:t,children:[e.j.jsxs(r.Header,{drawerHeaderHeight:o,children:[e.j.jsx(r.HeaderTitle,{variant:"h5",noWrap:!0,children:n}),e.j.jsx(j.IconButton,{variant:"text",onClick:a,children:e.j.jsx(u.X,{})})]}),e.j.jsx(r.Body,{children:i})]})};exports.BottomDrawer=l;

package/lib/components/BottomDrawer/BottomDrawer.d.ts

@@ -0,0 +1,15 @@
+import { DrawerProps as MuiDrawerProps } from '@mui/material';
+import { ReactNode } from 'react';
+import { WithoutEmotionSpecific } from '../types';
+export type BottomDrawerProps = {
+    /**
+     * Заголовок
+     */
+    title?: ReactNode | ReactNode[] | string;
+    /**
+     * Высота шапки компонента
+     * * @default 56
+     */
+    drawerHeaderHeight?: number;
+} & WithoutEmotionSpecific<Omit<MuiDrawerProps, 'anchor' | 'variant' | 'title'>>;
+export declare const BottomDrawer: ({ title, drawerHeaderHeight, children, onClose, ...props }: BottomDrawerProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/BottomDrawer/BottomDrawer.mjs

@@ -0,0 +1,26 @@
+import { j as r } from "../../_virtual/jsx-runtime.mjs";
+import { IconButton as s } from "../IconButton/IconButton.mjs";
+import { X as c } from "lucide-react";
+import { DEFAULT_HEADER_HEIGHT as x } from "./constants.mjs";
+import { StyledDrawer as d, Header as p, HeaderTitle as j, Body as h } from "./styles.mjs";
+const u = ({
+  title: o,
+  drawerHeaderHeight: e = x,
+  children: i,
+  onClose: t,
+  ...n
+}) => {
+  const a = (m) => {
+    t && t(m, "escapeKeyDown");
+  };
+  return /* @__PURE__ */ r.jsxs(d, { ...n, anchor: "bottom", onClose: t, children: [
+    /* @__PURE__ */ r.jsxs(p, { drawerHeaderHeight: e, children: [
+      /* @__PURE__ */ r.jsx(j, { variant: "h5", noWrap: !0, children: o }),
+      /* @__PURE__ */ r.jsx(s, { variant: "text", onClick: a, children: /* @__PURE__ */ r.jsx(c, {}) })
+    ] }),
+    /* @__PURE__ */ r.jsx(h, { children: i })
+  ] });
+};
+export {
+  u as BottomDrawer
+};

package/lib/components/BottomDrawer/constants.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E="16px",T=56;exports.DEFAULT_HEADER_HEIGHT=T;exports.OFFSET_TOP_SCREEN=E;

package/lib/components/BottomDrawer/constants.mjs

@@ -0,0 +1,5 @@
+const E = "16px", T = 56;
+export {
+  T as DEFAULT_HEADER_HEIGHT,
+  E as OFFSET_TOP_SCREEN
+};

package/lib/components/BottomDrawer/styles.cjs

@@ -0,0 +1,26 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@mui/material"),r=require("./constants.cjs"),a=t.styled(t.Drawer)`
+  ${`.${t.paperClasses.root}`} {
+    max-height: calc(100vh - ${r.OFFSET_TOP_SCREEN});
+
+    @supports (height: 100dvh) {
+      max-height: calc(100dvh - ${r.OFFSET_TOP_SCREEN});
+    }
+
+    border-top-left-radius: ${({theme:e})=>e.shape.large};
+    border-top-right-radius: ${({theme:e})=>e.shape.large};
+  }
+`,s=t.styled("header")`
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: space-between;
+
+  height: ${({drawerHeaderHeight:e})=>`${e}px`};
+  padding: ${({theme:e})=>e.spacing(1,2,1,4)};
+
+  border-bottom: 1px solid ${({theme:e})=>e.palette.divider};
+`,d=t.styled(t.Typography)`
+  margin-right: ${({theme:e})=>e.spacing(2)};
+`,i=t.styled("div")`
+  overflow-y: auto;
+`;exports.Body=i;exports.Header=s;exports.HeaderTitle=d;exports.StyledDrawer=a;