nntc-ui 0.0.55 → 0.0.57

package/README.md

@@ -1,19 +1,3 @@
-# Статус деплоя на стендах
-
-| Стенд | Статус |
-|-------|--------|
-| iifa-dev | [![Status](https://argocd.np.nntc.pro/api/badge?name=iifa-dev-nntc-ui-kit)](https://argocd.np.nntc.pro/applications/argocd/iifa-dev-nntc-ui-kit?view=tree&resource=&node=apps%2FDeployment%2Fiifa-dev%2Fnntc-ui-kit%2F0&tab=logs) |
-| iifa-test | [![Status](https://argocd.np.nntc.pro/api/badge?name=iifa-test-nntc-ui-kit)](https://argocd.np.nntc.pro/applications/argocd/iifa-test-nntc-ui-kit?view=tree&resource=&node=apps%2FDeployment%2Fiifa-test%2Fnntc-ui-kit%2F0&tab=logs) |
-| geonova-test | [![Status](https://argocd.np.nntc.pro/api/badge?name=geonova-test-nntc-ui-kit)](https://argocd.np.nntc.pro/applications/argocd/geonova-test-nntc-ui-kit?view=tree&resource=&node=apps%2FDeployment%2Fgeonova-test%2Fnntc-ui-kit%2F0&tab=logs) |
-| iifa-demo | [![Status](https://argocd.pp.nntc.pro/api/badge?name=iifa-demo-nntc-ui-kit)](https://argocd.pp.nntc.pro/applications/argocd/iifa-demo-nntc-ui-kit?view=tree&resource=&node=apps%2FDeployment%2Fiifa-demo%2Fnntc-ui-kit%2F0&tab=logs) |
-| ars-demo | [![Status](https://argocd.pp.nntc.pro/api/badge?name=ars-demo-nntc-ui-kit)](https://argocd.pp.nntc.pro/applications/argocd/ars-demo-nntc-ui-kit?view=tree&resource=&node=apps%2FDeployment%ars-demo%2Fnntc-ui-kit%2F0&tab=logs) |
-| geonova-demo | [![Status](https://argocd.pp.nntc.pro/api/badge?name=geonova-demo-nntc-ui-kit)](https://argocd.pp.nntc.pro/applications/argocd/geonova-demo-nntc-ui-kit?view=tree&resource=&node=apps%2FDeployment%2Fgeonova-demo%2Fnntc-ui-kit%2F0&tab=logs) |
-| dflow-demo | [![Status](https://argocd.pp.nntc.pro/api/badge?name=dflow-demo-nntc-ui-kit)](https://argocd.pp.nntc.pro/applications/argocd/dflow-demo-nntc-ui-kit?view=tree&resource=&node=apps%2FDeployment%2Fdflow-demo%2Fnntc-ui-kit%2F0&tab=logs) |
-| internal-dev | [![Status](https://argocd.np.nntc.pro/api/badge?name=internal-dev-nntc-ui-kit)](https://argocd.np.nntc.pro/applications/argocd/internal-dev-nntc-ui-kit?view=tree&resource=&node=apps%2FDeployment%2Finternal-dev%2Fnntc-ui-kit%2F0&tab=logs) |
-| internal-prod | [![Status](https://argocd.pp.nntc.pro/api/badge?name=internal-prod-nntc-ui-kit)](https://argocd.pp.nntc.pro/applications/argocd/internal-prod-nntc-ui-kit?view=tree&resource=&node=apps%2FDeployment%2Finternal-prod%2Fnntc-ui-kit%2F0&tab=logs) |
-
-Для перехода к логам нажмите на иконку в колонке статуса
-
 # NNTC UI Kit
 
 React компонентная библиотека для создания пользовательских интерфейсов.

package/index.css

@@ -1976,3 +1976,129 @@
   gap: 8px;
   align-items: center;
 }
+
+/* src/components/view/Chip/chip.module.css */
+.chip_root {
+  padding: 0;
+  overflow: hidden;
+  font-size: var(--text-button-size);
+  font-weight: var(--text-button-weight);
+  line-height: var(--text-button-height);
+  letter-spacing: var(--text-button-letter);
+  -webkit-user-select: none;
+  user-select: none;
+  border-radius: 9999px;
+  outline: none;
+}
+.chip_stateLayer {
+  display: inline-flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  background-color: transparent;
+}
+.chip_root:hover > .chip_stateLayer {
+  background-color: var(--theme-overlay-8);
+}
+.chip_root:focus > .chip_stateLayer {
+  background-color: var(--theme-overlay-12);
+}
+.chip_root:active > .chip_stateLayer,
+.chip_root.chip_active > .chip_stateLayer {
+  background-color: var(--theme-overlay-12);
+}
+.chip_filled {
+  color: var(--theme-text-button-invert);
+  background-color: var(--theme-focus);
+}
+.chip_outlined {
+  color: var(--theme-focus);
+  background-color: transparent;
+  outline: 1px solid var(--theme-grey-500);
+}
+.chip_outlined:focus {
+  outline-color: var(--theme-focus);
+}
+.chip_filled.chip_secondary {
+  color: var(--theme-text-button-primary);
+  background-color: var(--theme-overlay-12);
+}
+.chip_outlined.chip_secondary {
+  color: var(--theme-text-secondary);
+}
+.chip_clickable {
+  cursor: pointer;
+}
+.chip_medium,
+.chip_medium > .chip_stateLayer {
+  height: 32px;
+}
+.chip_small,
+.chip_small > .chip_stateLayer {
+  height: 24px;
+}
+.chip_medium > .chip_stateLayer {
+  padding: 0 16px;
+}
+.chip_small > .chip_stateLayer {
+  padding: 0 12px;
+}
+.chip_medium.chip_withIcon > .chip_stateLayer {
+  padding: 0 4px 0 16px;
+}
+.chip_small.chip_withIcon > .chip_stateLayer {
+  padding: 0 4px 0 12px;
+}
+.chip_medium.chip_withIcon.chip_iconLeft > .chip_stateLayer {
+  padding: 0 16px 0 4px;
+}
+.chip_small.chip_withIcon.chip_iconLeft > .chip_stateLayer {
+  padding: 0 12px 0 4px;
+}
+.chip_icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin: 0;
+  color: inherit;
+  background: none;
+  border: none;
+  border-radius: 50%;
+  outline: none;
+  transition: background-color 0.2s;
+}
+.chip_icon.chip_iconClickable {
+  cursor: pointer;
+}
+.chip_medium .chip_icon {
+  width: 24px;
+  height: 24px;
+}
+.chip_small .chip_icon {
+  width: 18px;
+  height: 18px;
+}
+.chip_icon.chip_iconClickable:hover {
+  background-color: var(--theme-overlay-8);
+}
+.chip_icon.chip_iconClickable:focus {
+  background-color: var(--theme-overlay-12);
+}
+.chip_icon.chip_iconClickable:active {
+  background-color: var(--theme-overlay-12);
+}
+.chip_label {
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+}
+.chip_iconLeft .chip_icon {
+  order: -1;
+}
+.chip_iconRight .chip_icon {
+  order: 1;
+}

package/index.d.ts

@@ -10,26 +10,26 @@ type UiProps<P = unknown> = P & {
     classes?: PropsObject;
 };
 
-type Variant$7 = 'filled' | 'outlined' | 'text' | 'elevated' | 'tonal' | 'link';
-type Size$b = 'medium' | 'small';
-interface Props$m {
-    variant?: Variant$7;
-    size?: Size$b;
+type Variant$8 = 'filled' | 'outlined' | 'text' | 'elevated' | 'tonal' | 'link';
+type Size$c = 'medium' | 'small';
+interface Props$n {
+    variant?: Variant$8;
+    size?: Size$c;
     icon?: ReactNode;
     textSecondary?: boolean;
     isActive?: boolean;
 }
-declare const Button: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLButtonElement> & ButtonHTMLAttributes<HTMLButtonElement> & Props$m & {
+declare const Button: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLButtonElement> & ButtonHTMLAttributes<HTMLButtonElement> & Props$n & {
     classes?: PropsObject;
 }, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 
-type Size$a = 'medium' | 'large';
-interface Props$l {
+type Size$b = 'medium' | 'large';
+interface Props$m {
     label?: string;
-    componentSize?: Size$a;
+    componentSize?: Size$b;
     several?: boolean;
 }
-declare function Checkbox(props: UiProps<Props$l> & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>): react_jsx_runtime.JSX.Element;
+declare function Checkbox(props: UiProps<Props$m> & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>): react_jsx_runtime.JSX.Element;
 
 interface Divider$1 {
     type: 'divider';
@@ -49,11 +49,11 @@ interface Item$5 {
 }
 type MaybeItem = Maybe<Item$5>;
 
-type Variant$6 = 'filled' | 'outlined';
-type Size$9 = 'medium' | 'small';
-interface Props$k {
-    variant?: Variant$6;
-    componentSize?: Size$9;
+type Variant$7 = 'filled' | 'outlined';
+type Size$a = 'medium' | 'small';
+interface Props$l {
+    variant?: Variant$7;
+    componentSize?: Size$a;
     icon?: ReactNode;
     fullWidth?: boolean;
     label?: string;
@@ -62,13 +62,13 @@ interface Props$k {
     onValueChange?: (newItem: MaybeItem) => void;
     selected?: MaybeItem;
 }
-declare function Select(props: UiProps<Props$k> & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>): react_jsx_runtime.JSX.Element;
+declare function Select(props: UiProps<Props$l> & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>): react_jsx_runtime.JSX.Element;
 
-type Variant$5 = 'filled' | 'outlined';
-type Size$8 = 'medium' | 'small';
-interface Props$j {
-    variant?: Variant$5;
-    componentSize?: Size$8;
+type Variant$6 = 'filled' | 'outlined';
+type Size$9 = 'medium' | 'small';
+interface Props$k {
+    variant?: Variant$6;
+    componentSize?: Size$9;
     fullWidth?: boolean;
     placeholder?: string;
     values?: (string | undefined)[];
@@ -76,7 +76,18 @@ interface Props$j {
     onClear?: () => void;
     onValueChange?: (values: (string | undefined)[]) => void;
 }
-declare function DateTime(props: UiProps<Props$j> & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>): react_jsx_runtime.JSX.Element;
+declare function DateTime(props: UiProps<Props$k> & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>): react_jsx_runtime.JSX.Element;
+
+type Variant$5 = 'outlined';
+type Size$8 = 'medium' | 'small';
+interface Props$j {
+    variant?: Variant$5;
+    componentSize?: Size$8;
+    fullWidth?: boolean;
+    label?: string;
+    onValueChange?: (newValue: string) => void;
+}
+declare const ColorPicker: (props: UiProps<Props$j> & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>) => react_jsx_runtime.JSX.Element;
 
 type Variant$4 = 'outlined';
 type Size$7 = 'medium' | 'small';
@@ -85,35 +96,24 @@ interface Props$i {
     componentSize?: Size$7;
     fullWidth?: boolean;
     label?: string;
-    onValueChange?: (newValue: string) => void;
 }
-declare const ColorPicker: (props: UiProps<Props$i> & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>) => react_jsx_runtime.JSX.Element;
+declare const Input: (props: UiProps<Props$i> & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>) => react_jsx_runtime.JSX.Element;
 
-type Variant$3 = 'outlined';
+type Variant$3 = 'filled' | 'outlined';
 type Size$6 = 'medium' | 'small';
 interface Props$h {
     variant?: Variant$3;
     componentSize?: Size$6;
+    disableIcon?: boolean;
     fullWidth?: boolean;
-    label?: string;
 }
-declare const Input: (props: UiProps<Props$h> & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>) => react_jsx_runtime.JSX.Element;
+declare function SearchInput(props: UiProps<Props$h> & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>): react_jsx_runtime.JSX.Element;
 
-type Variant$2 = 'filled' | 'outlined';
 type Size$5 = 'medium' | 'small';
 interface Props$g {
-    variant?: Variant$2;
     componentSize?: Size$5;
-    disableIcon?: boolean;
-    fullWidth?: boolean;
-}
-declare function SearchInput(props: UiProps<Props$g> & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>): react_jsx_runtime.JSX.Element;
-
-type Size$4 = 'medium' | 'small';
-interface Props$f {
-    componentSize?: Size$4;
 }
-declare const WrapForLabel: (props: UiProps<PropsWithChildren<Props$f>>) => react_jsx_runtime.JSX.Element;
+declare const WrapForLabel: (props: UiProps<PropsWithChildren<Props$g>>) => react_jsx_runtime.JSX.Element;
 
 interface Item$4 {
     name: string;
@@ -125,11 +125,11 @@ interface Item$4 {
 
 type TitleVariant = 'allValue' | 'numberValue' | 'firstValue';
 
-type Variant$1 = 'filled' | 'outlined';
-type Size$3 = 'medium' | 'small';
-interface Props$e {
-    variant?: Variant$1;
-    componentSize?: Size$3;
+type Variant$2 = 'filled' | 'outlined';
+type Size$4 = 'medium' | 'small';
+interface Props$f {
+    variant?: Variant$2;
+    componentSize?: Size$4;
     icon?: ReactNode;
     fullWidth?: boolean;
     label?: string;
@@ -141,7 +141,7 @@ interface Props$e {
     enableSearch?: boolean;
     popoverInComponent?: boolean;
 }
-declare function MultiSelect(props: UiProps<Props$e> & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>): react_jsx_runtime.JSX.Element;
+declare function MultiSelect(props: UiProps<Props$f> & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>): react_jsx_runtime.JSX.Element;
 
 interface Item$3 {
     name: string;
@@ -152,7 +152,7 @@ interface SelectedItems {
     [keys: string]: boolean;
 }
 
-interface Props$d {
+interface Props$e {
     items: Item$3[];
     selected: SelectedItems;
     disableSearch?: boolean;
@@ -160,22 +160,22 @@ interface Props$d {
     actionWithSelected: (value: SelectedItems) => void;
     onChangeItem?: (item: Item$3) => void;
 }
-declare function Checklist(props: UiProps<Props$d>): react_jsx_runtime.JSX.Element;
+declare function Checklist(props: UiProps<Props$e>): react_jsx_runtime.JSX.Element;
 
-interface Props$c {
+interface Props$d {
     fillEvenly?: boolean;
 }
-declare const ButtonsGroup: (props: PropsWithChildren<UiProps<Props$c>>) => react_jsx_runtime.JSX.Element;
+declare const ButtonsGroup: (props: PropsWithChildren<UiProps<Props$d>>) => react_jsx_runtime.JSX.Element;
 
-interface Props$b {
+interface Props$c {
     type?: 'primary' | 'panel' | 'modal';
 }
-declare function Surface(props: PropsWithChildren<UiProps<Props$b>>): react_jsx_runtime.JSX.Element;
+declare function Surface(props: PropsWithChildren<UiProps<Props$c>>): react_jsx_runtime.JSX.Element;
 
-interface Props$a {
+interface Props$b {
     withoutHeader?: boolean;
 }
-declare function Layout(props: PropsWithChildren<UiProps<Props$a>>): react_jsx_runtime.JSX.Element;
+declare function Layout(props: PropsWithChildren<UiProps<Props$b>>): react_jsx_runtime.JSX.Element;
 
 interface Divider {
     type: 'divider';
@@ -200,12 +200,12 @@ interface Item$2 {
     disabled?: boolean;
 }
 
-type Size$2 = 'medium' | 'small';
-interface Props$9 {
+type Size$3 = 'medium' | 'small';
+interface Props$a {
     items: (Item$2 | Divider)[];
-    size?: Size$2;
+    size?: Size$3;
 }
-declare function Menu(props: UiProps<Props$9>): react_jsx_runtime.JSX.Element;
+declare function Menu(props: UiProps<Props$a>): react_jsx_runtime.JSX.Element;
 
 interface Item$1<T> {
     name?: string;
@@ -215,12 +215,12 @@ interface Item$1<T> {
     isDisabled?: boolean;
 }
 
-type Size$1 = 'medium' | 'small';
-interface Props$8<T> {
+type Size$2 = 'medium' | 'small';
+interface Props$9<T> {
     items: Item$1<T>[];
     defaultSelected?: T;
     onChange?: (newValue: T) => void;
-    size?: Size$1;
+    size?: Size$2;
     filled?: boolean;
     isVertical?: boolean;
     disableBorder?: boolean;
@@ -236,7 +236,7 @@ interface Props$8<T> {
 /**
  * Компонент вкладок с поддержкой как внутреннего, так и внешнего состояния
  * */
-declare function Tabs<T>(props: UiProps<Props$8<T>>): react_jsx_runtime.JSX.Element;
+declare function Tabs<T>(props: UiProps<Props$9<T>>): react_jsx_runtime.JSX.Element;
 
 interface TableCell {
     value?: string | number;
@@ -299,9 +299,9 @@ interface TableColumn {
     toFixed?: number;
 }
 
-type Size = 'medium' | 'small';
+type Size$1 = 'medium' | 'small';
 type Borders = 'all' | 'horizontal' | 'vertical' | 'none';
-interface Props$7 {
+interface Props$8 {
     rows: TableRow[];
     columns: TableColumn[];
     additionalColumnsViews?: (id: string, value: string | number | undefined, payload: {
@@ -321,7 +321,7 @@ interface Props$7 {
     height?: number;
     scrollToBottom?: boolean;
     useTableContainerAsRootForPopup?: boolean;
-    size?: Size;
+    size?: Size$1;
     borders?: Borders;
     showUniqueValuesCount?: boolean;
     globalFilters?: FilterBy[];
@@ -330,7 +330,7 @@ interface Props$7 {
     onSortsChange?: (sorts: SortBy[]) => void;
     additionalHeaderContent?: (headerName: string) => ReactNode;
 }
-declare function VirtualTable(props: UiProps<Props$7>): react_jsx_runtime.JSX.Element;
+declare function VirtualTable(props: UiProps<Props$8>): react_jsx_runtime.JSX.Element;
 
 interface Item {
     id: string;
@@ -340,16 +340,16 @@ interface Item {
     children?: Item[];
 }
 
-interface Props$6 {
+interface Props$7 {
     data: Item[];
     selected: string[];
     startIcons?: Record<string, JSX.Element>;
     withSearch?: boolean;
     onSelect?: (id: string) => void;
 }
-declare const _default: React.NamedExoticComponent<Props$6>;
+declare const _default: React.NamedExoticComponent<Props$7>;
 
-interface Props$5 {
+interface Props$6 {
     label?: ReactNode | string;
     clickable?: boolean;
     initialOpen?: boolean;
@@ -359,9 +359,9 @@ interface Props$5 {
     alertType?: 'success' | 'warning' | 'error' | 'info' | 'default';
     root?: HTMLElement | MutableRefObject<HTMLElement | null> | null;
 }
-declare function Tooltip(props: PropsWithChildren<UiProps<Props$5>>): string | number | boolean | Iterable<ReactNode> | react_jsx_runtime.JSX.Element | null | undefined;
+declare function Tooltip(props: PropsWithChildren<UiProps<Props$6>>): string | number | boolean | Iterable<ReactNode> | react_jsx_runtime.JSX.Element | null | undefined;
 
-interface Props$4 {
+interface Props$5 {
     description?: ReactNode | string;
     clickable?: boolean;
     initialOpen?: boolean;
@@ -373,43 +373,56 @@ interface Props$4 {
     onOpenChange?: (open: boolean) => void;
     contentStyle?: CSSProperties;
 }
-declare function Popover(props: PropsWithChildren<UiProps<Props$4>>): string | number | true | Iterable<ReactNode> | react_jsx_runtime.JSX.Element | null;
+declare function Popover(props: PropsWithChildren<UiProps<Props$5>>): string | number | true | Iterable<ReactNode> | react_jsx_runtime.JSX.Element | null;
 
 type Pair = {
     label: string;
     value: string | number;
 } | null;
 
-interface Props$3 {
+interface Props$4 {
     pairs: Pair[];
     column1Width?: string;
     column2Width?: string;
     showBorder?: boolean;
     minRowHeight?: string;
 }
-declare function Pairs(props: UiProps<Props$3>): react_jsx_runtime.JSX.Element;
+declare function Pairs(props: UiProps<Props$4>): react_jsx_runtime.JSX.Element;
 
-interface Props$2 {
+interface Props$3 {
     surfaceType?: 'primary' | 'panel' | 'modal';
     title?: ReactNode;
     actions?: ReactNode;
 }
-declare function Card(props: PropsWithChildren<UiProps<Props$2>>): react_jsx_runtime.JSX.Element;
+declare function Card(props: PropsWithChildren<UiProps<Props$3>>): react_jsx_runtime.JSX.Element;
 
-type Variant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'h7' | 'subtitle1' | 'subtitle2' | 'body1' | 'body2' | 'button' | 'caption' | 'overline';
-interface Props$1 {
-    variant?: Variant;
+type Variant$1 = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'h7' | 'subtitle1' | 'subtitle2' | 'body1' | 'body2' | 'button' | 'caption' | 'overline';
+interface Props$2 {
+    variant?: Variant$1;
     component?: ElementType;
 }
-declare const Typography: React.ForwardRefExoticComponent<Omit<HTMLProps<HTMLParagraphElement> & Props$1, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+declare const Typography: React.ForwardRefExoticComponent<Omit<HTMLProps<HTMLParagraphElement> & Props$2, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
 
-interface Props {
+interface Props$1 {
     open: boolean;
     onClose?: () => void;
     root?: HTMLElement | MutableRefObject<HTMLElement | null> | null;
 }
-declare const Modal: React.ForwardRefExoticComponent<Omit<PropsWithChildren<Props & {
+declare const Modal: React.ForwardRefExoticComponent<Omit<PropsWithChildren<Props$1 & {
     classes?: PropsObject;
 } & HTMLProps<HTMLDivElement>>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 
-export { type AdditionalButton, Button, ButtonsGroup, Card, Checkbox, Checklist, type Item$3 as ChecklistItem, type SelectedItems as ChecklistSelectedItems, ColorPicker, type ColumnAlign, DateTime, type FilterBy, Input, Layout, Menu, type Divider as MenuDivider, type Item$2 as MenuItem, Modal, MultiSelect, type Item$4 as MultiSelectItem, type TitleVariant as MultiSelectTitleVariant, type Pair, Pairs, Popover, SearchInput, Select, type Divider$1 as SelectDivider, type Item$5 as SelectItem, type SortBy, type SortType, Surface, type TableCell, type TableColumn, type TableRow, Tabs, type Item$1 as TabsItem, Tooltip, _default as TreeView, type Item as TreeViewItem, Typography, type VerticalAlign, VirtualTable, WrapForLabel };
+type Variant = 'filled' | 'outlined';
+type Size = 'medium' | 'small';
+interface Props {
+    variant?: Variant;
+    size?: Size;
+    icon?: ReactNode;
+    iconPlacement?: 'left' | 'right';
+    secondary?: boolean;
+    onClick?: () => void;
+    onIconClick?: () => void;
+}
+declare const Chip: (props: PropsWithChildren<UiProps<Props>>) => react_jsx_runtime.JSX.Element;
+
+export { type AdditionalButton, Button, ButtonsGroup, Card, Checkbox, Checklist, type Item$3 as ChecklistItem, type SelectedItems as ChecklistSelectedItems, Chip, ColorPicker, type ColumnAlign, DateTime, type FilterBy, Input, Layout, Menu, type Divider as MenuDivider, type Item$2 as MenuItem, Modal, MultiSelect, type Item$4 as MultiSelectItem, type TitleVariant as MultiSelectTitleVariant, type Pair, Pairs, Popover, SearchInput, Select, type Divider$1 as SelectDivider, type Item$5 as SelectItem, type SortBy, type SortType, Surface, type TableCell, type TableColumn, type TableRow, Tabs, type Item$1 as TabsItem, Tooltip, _default as TreeView, type Item as TreeViewItem, Typography, type VerticalAlign, VirtualTable, WrapForLabel };

package/index.js

@@ -77,7 +77,7 @@ var button_default = {
 
 // src/components/common/Button/Button.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
-var Button = forwardRef(function Button2({ variant = "filled", size = "medium", icon: icon6, textSecondary: textSecondary2, isActive, className, children: children2, classes, ...buttonProps }, propRef) {
+var Button = forwardRef(function Button2({ variant = "filled", size = "medium", icon: icon7, textSecondary: textSecondary2, isActive, className, children: children2, classes, ...buttonProps }, propRef) {
   return /* @__PURE__ */ jsx(
     "button",
     {
@@ -85,7 +85,7 @@ var Button = forwardRef(function Button2({ variant = "filled", size = "medium",
         root,
         button_exports[variant],
         button_exports[size],
-        !icon6 ? withoutIcon : !children2 ? onlyIcon : withIcon,
+        !icon7 ? withoutIcon : !children2 ? onlyIcon : withIcon,
         isActive ? active : void 0,
         textSecondary2 ? textSecondary : void 0,
         className,
@@ -94,7 +94,7 @@ var Button = forwardRef(function Button2({ variant = "filled", size = "medium",
       ...buttonProps,
       ref: propRef,
       children: /* @__PURE__ */ jsxs("span", { className: classnames(stateLayer, classes?.stateLayer), children: [
-        icon6,
+        icon7,
         children2
       ] })
     }
@@ -204,7 +204,7 @@ var pressed = "checkbox_pressed";
 // src/components/common/Checkbox/Checkbox.tsx
 import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function Checkbox(props) {
-  const { label: label7, several: several2, componentSize = "medium", classes, id, ref, ...inputProps } = props;
+  const { label: label8, several: several2, componentSize = "medium", classes, id, ref, ...inputProps } = props;
   const { t } = useTranslation();
   const inputRef = useRef(null);
   const inputId = id ?? uuidv4();
@@ -235,16 +235,16 @@ function Checkbox(props) {
         className: classnames3(input, classes?.input),
         placeholder: t("\u041F\u043E\u0438\u0441\u043A..."),
         id: inputId,
-        title: label7,
+        title: label8,
         ...inputProps
       }
     ),
-    /* @__PURE__ */ jsxs2("label", { htmlFor: inputId, className: classnames3(label, classes?.label), title: label7, children: [
+    /* @__PURE__ */ jsxs2("label", { htmlFor: inputId, className: classnames3(label, classes?.label), title: label8, children: [
       several2 ? /* @__PURE__ */ jsx3("span", { className: classnames3(checkbox, several, classes?.checkbox), children: /* @__PURE__ */ jsx3(CheckboxSeveralIcon, {}) }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
         /* @__PURE__ */ jsx3("span", { className: classnames3(checkbox, deselected, classes?.checkbox), children: /* @__PURE__ */ jsx3(CheckboxDeselectedIcon, {}) }),
         /* @__PURE__ */ jsx3("span", { className: classnames3(checkbox, selected, classes?.checkbox), children: /* @__PURE__ */ jsx3(CheckboxIcon, {}) })
       ] }),
-      !!label7 && /* @__PURE__ */ jsx3(Fragment, { children: componentSize === "large" ? /* @__PURE__ */ jsx3(Typography, { variant: "subtitle1", className: classnames3(labelText, classes?.labelText), children: label7 }) : /* @__PURE__ */ jsx3(Typography, { variant: "subtitle2", className: classnames3(labelText, classes?.labelText), children: label7 }) })
+      !!label8 && /* @__PURE__ */ jsx3(Fragment, { children: componentSize === "large" ? /* @__PURE__ */ jsx3(Typography, { variant: "subtitle1", className: classnames3(labelText, classes?.labelText), children: label8 }) : /* @__PURE__ */ jsx3(Typography, { variant: "subtitle2", className: classnames3(labelText, classes?.labelText), children: label8 }) })
     ] })
   ] });
 }
@@ -333,7 +333,7 @@ function usePopover(props = {}) {
     initialOpen = false,
     placement = "bottom",
     modal: modal3,
-    root: root22,
+    root: root23,
     open: controlledOpen,
     onOpenChange: setControlledOpen,
     containerOffset = 12
@@ -371,11 +371,11 @@ function usePopover(props = {}) {
       ...interactions,
       ...data,
       modal: modal3,
-      root: root22,
+      root: root23,
       descriptionId,
       setDescriptionId
     }),
-    [open, setOpen, interactions, data, modal3, root22, descriptionId]
+    [open, setOpen, interactions, data, modal3, root23, descriptionId]
   );
 }
 
@@ -419,12 +419,12 @@ import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 function Popover(props) {
   const {
     description,
-    clickable: clickable2,
+    clickable: clickable3,
     initialOpen,
     placement,
     wrapTrigger,
     containerOffset,
-    root: root22,
+    root: root23,
     open,
     onOpenChange,
     children: children2,
@@ -443,16 +443,16 @@ function Popover(props) {
     {
       placement,
       initialOpen,
-      open: open !== void 0 ? open : clickable2 ? showTooltip : void 0,
-      onOpenChange: onOpenChange !== void 0 ? onOpenChange : clickable2 ? setShowTooltip : void 0,
+      open: open !== void 0 ? open : clickable3 ? showTooltip : void 0,
+      onOpenChange: onOpenChange !== void 0 ? onOpenChange : clickable3 ? setShowTooltip : void 0,
       containerOffset,
-      root: root22,
+      root: root23,
       children: [
         /* @__PURE__ */ jsx7(
           PopoverTrigger,
           {
             wrapTrigger,
-            onClick: clickable2 ? () => setShowTooltip((prev) => !prev) : void 0,
+            onClick: clickable3 ? () => setShowTooltip((prev) => !prev) : void 0,
             className: classnames4(wrapTrigger ? trigger : void 0, classes?.trigger),
             children: children2
           }
@@ -719,9 +719,9 @@ function Select(props) {
   const {
     variant = "filled",
     componentSize = "medium",
-    icon: icon6,
+    icon: icon7,
     fullWidth: fullWidth2,
-    label: label7,
+    label: label8,
     placeholder,
     items: items2,
     defaultValue,
@@ -769,7 +769,7 @@ function Select(props) {
         maxWidth: fullWidth2 ? "100%" : void 0
       },
       children: [
-        !!label7 && /* @__PURE__ */ jsx12(
+        !!label8 && /* @__PURE__ */ jsx12(
           Typography,
           {
             className: classnames6(label2, classes?.label),
@@ -777,7 +777,7 @@ function Select(props) {
             variant: "caption",
             htmlFor: inputId,
             onClick: inputClickHandler,
-            children: label7
+            children: label8
           }
         ),
         /* @__PURE__ */ jsxs5(
@@ -786,7 +786,7 @@ function Select(props) {
             className: classnames6(
               wrapper,
               select_exports[variant],
-              icon6 ? withIcon2 : void 0,
+              icon7 ? withIcon2 : void 0,
               selectedItem?.icon ? withItemIcon : void 0,
               classes?.wrapper
             ),
@@ -806,7 +806,7 @@ function Select(props) {
                   disabled: disabled2
                 }
               ),
-              !!icon6 && /* @__PURE__ */ jsx12("span", { onClick: inputClickHandler, className: classnames6(icon, classes?.icon), children: icon6 }),
+              !!icon7 && /* @__PURE__ */ jsx12("span", { onClick: inputClickHandler, className: classnames6(icon, classes?.icon), children: icon7 }),
               !!selectedItem?.icon && /* @__PURE__ */ jsx12("span", { onClick: inputClickHandler, className: classnames6(itemIcon, classes?.itemIcon), children: selectedItem?.icon }),
               /* @__PURE__ */ jsx12("span", { onClick: inputClickHandler, className: classnames6(arrow, classes?.arrow), children: /* @__PURE__ */ jsx12(Arrow, {}) }),
               /* @__PURE__ */ jsx12(
@@ -1272,7 +1272,7 @@ var ColorPicker = (props) => {
     variant = "outlined",
     componentSize = "medium",
     fullWidth: fullWidth2,
-    label: label7,
+    label: label8,
     classes,
     placeholder,
     ref,
@@ -1306,7 +1306,7 @@ var ColorPicker = (props) => {
         maxWidth: fullWidth2 ? "100%" : void 0
       },
       children: [
-        !!label7 && /* @__PURE__ */ jsx15(
+        !!label8 && /* @__PURE__ */ jsx15(
           Typography,
           {
             className: classNames3(label3, classes?.label),
@@ -1314,7 +1314,7 @@ var ColorPicker = (props) => {
             variant: "caption",
             htmlFor: inputId,
             onClick: inputClickHandler,
-            children: label7
+            children: label8
           }
         ),
         /* @__PURE__ */ jsxs8("div", { className: classNames3(wrapper2, colorPicker_exports[variant], classes?.wrapper), children: [
@@ -1403,7 +1403,7 @@ var Input = (props) => {
     variant = "outlined",
     componentSize = "medium",
     fullWidth: fullWidth2,
-    label: label7,
+    label: label8,
     classes,
     placeholder,
     ref,
@@ -1420,14 +1420,14 @@ var Input = (props) => {
         maxWidth: fullWidth2 ? "100%" : void 0
       },
       children: [
-        !!label7 && /* @__PURE__ */ jsx16(
+        !!label8 && /* @__PURE__ */ jsx16(
           Typography,
           {
             className: classnames8(label4, classes?.label),
             component: "label",
             variant: "caption",
             htmlFor: inputId,
-            children: label7
+            children: label8
           }
         ),
         /* @__PURE__ */ jsx16("div", { className: classnames8(wrapper3, input_exports[variant], classes?.wrapper), children: /* @__PURE__ */ jsx16(
@@ -1852,9 +1852,9 @@ function MultiSelect(props) {
   const {
     variant = "filled",
     componentSize = "medium",
-    icon: icon6,
+    icon: icon7,
     fullWidth: fullWidth2,
-    label: label7,
+    label: label8,
     placeholder,
     items: items2,
     onValueChange,
@@ -1927,7 +1927,7 @@ function MultiSelect(props) {
         classes?.root
       ),
       children: [
-        !!label7 && /* @__PURE__ */ jsx21(
+        !!label8 && /* @__PURE__ */ jsx21(
           Typography,
           {
             className: classnames12(label5, classes?.label),
@@ -1935,7 +1935,7 @@ function MultiSelect(props) {
             variant: "caption",
             htmlFor: inputId,
             onClick: inputClickHandler,
-            children: label7
+            children: label8
           }
         ),
         /* @__PURE__ */ jsxs12(
@@ -1945,7 +1945,7 @@ function MultiSelect(props) {
             className: classnames12(
               wrapper4,
               multiSelect_exports[variant],
-              icon6 ? withIcon4 : void 0,
+              icon7 ? withIcon4 : void 0,
               classes?.wrapper
             ),
             children: [
@@ -1965,7 +1965,7 @@ function MultiSelect(props) {
                   autoComplete: "off"
                 }
               ),
-              !!icon6 && /* @__PURE__ */ jsx21("span", { onClick: inputClickHandler, className: classnames12(icon5, classes?.icon), children: icon6 }),
+              !!icon7 && /* @__PURE__ */ jsx21("span", { onClick: inputClickHandler, className: classnames12(icon5, classes?.icon), children: icon7 }),
               !!activeItems.length && /* @__PURE__ */ jsx21("span", { onClick: clearHandler, className: classnames12(clear, classes?.clear), children: /* @__PURE__ */ jsx21(CloseIcon, {}) }),
               /* @__PURE__ */ jsx21("span", { onClick: inputClickHandler, className: classnames12(arrow3, classes?.arrow), children: /* @__PURE__ */ jsx21(Arrow, {}) }),
               /* @__PURE__ */ jsx21(
@@ -2210,7 +2210,7 @@ function useTooltip(props = {}) {
     onOpenChange: setControlledOpen,
     withoutArrow,
     arrowRef,
-    root: root22
+    root: root23
   } = props;
   const [uncontrolledOpen, setUncontrolledOpen] = useState9(initialOpen);
   const open = controlledOpen ?? uncontrolledOpen;
@@ -2248,11 +2248,11 @@ function useTooltip(props = {}) {
       setOpen,
       withoutArrow,
       arrowRef,
-      root: root22,
+      root: root23,
       ...interactions,
       ...data
     }),
-    [open, setOpen, interactions, data, root22]
+    [open, setOpen, interactions, data, root23]
   );
 }
 
@@ -2295,20 +2295,20 @@ var TooltipTrigger = forwardRef6(
 import { jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
 function Tooltip(props) {
   const {
-    label: label7,
-    clickable: clickable2,
+    label: label8,
+    clickable: clickable3,
     initialOpen,
     placement,
     withoutArrow,
     wrapTrigger,
     alertType = "default",
-    root: root22,
+    root: root23,
     children: children2,
     classes
   } = props;
   const [showTooltip, setShowTooltip] = useState10(false);
   const arrowRef = useRef8(null);
-  if (!label7) {
+  if (!label8) {
     return children2;
   }
   if (!children2) {
@@ -2319,17 +2319,17 @@ function Tooltip(props) {
     {
       placement,
       initialOpen,
-      open: clickable2 ? showTooltip : void 0,
-      onOpenChange: clickable2 ? setShowTooltip : void 0,
+      open: clickable3 ? showTooltip : void 0,
+      onOpenChange: clickable3 ? setShowTooltip : void 0,
       withoutArrow,
       arrowRef,
-      root: root22,
+      root: root23,
       children: [
         /* @__PURE__ */ jsx27(
           TooltipTrigger,
           {
             wrapTrigger,
-            onClick: clickable2 ? () => setShowTooltip((prev) => !prev) : void 0,
+            onClick: clickable3 ? () => setShowTooltip((prev) => !prev) : void 0,
             className: wrapTrigger ? classnames16(trigger2, classes?.trigger) : void 0,
             children: children2
           }
@@ -2339,7 +2339,7 @@ function Tooltip(props) {
           {
             className: classnames16(content2, tooltip_exports[alertType], classes?.content),
             styles: tooltip_exports,
-            children: label7
+            children: label8
           }
         )
       ]
@@ -2414,7 +2414,7 @@ function Tabs(props) {
     defaultSelected,
     onChange,
     size = "medium",
-    filled: filled7 = false,
+    filled: filled8 = false,
     isVertical = false,
     disableBorder: disableBorder2 = false,
     allowDeselect = false,
@@ -2461,7 +2461,7 @@ function Tabs(props) {
     {
       className: classnames17(
         root16,
-        filled7 && filled6,
+        filled8 && filled6,
         isVertical && vertical,
         disableBorder2 && disableBorder,
         tabs_exports[size],
@@ -2475,11 +2475,11 @@ function Tabs(props) {
           {
             className: classnames17(
               tab,
-              filled7 && tabFilled,
+              filled8 && tabFilled,
               isVertical && tabVertical,
               disableBorder2 && disableBorder,
               isSelected ? selected2 : void 0,
-              isSelected && filled7 ? selectedFilled : void 0,
+              isSelected && filled8 ? selectedFilled : void 0,
               item3.isDisabled && disabled,
               classes?.tab,
               isSelected ? classes?.tabSelected : void 0,
@@ -2557,7 +2557,7 @@ var modal2 = "modal_modal";
 // src/components/view/Modal/Modal.tsx
 import { jsx as jsx29 } from "react/jsx-runtime";
 var Modal = forwardRef7(
-  function Modal2({ open, onClose, root: root22 = document.body, children: children2, ...props }, propRef) {
+  function Modal2({ open, onClose, root: root23 = document.body, children: children2, ...props }, propRef) {
     const overlayRef = useRef9(null);
     const modalRef = useRef9(null);
     const handleOverlayClick = (e) => {
@@ -2587,7 +2587,7 @@ var Modal = forwardRef7(
         children: children2
       }
     ) });
-    return createPortal(modalContent2, root22);
+    return createPortal(modalContent2, root23);
   }
 );
 
@@ -3852,8 +3852,8 @@ var dimTypography = "pairs_dimTypography";
 import { useState as useState18 } from "react";
 import { jsx as jsx37 } from "react/jsx-runtime";
 function TypographyWithTooltip(props) {
-  const { label: label7 } = props;
-  const [tooltip, setTooltip] = useState18(label7);
+  const { label: label8 } = props;
+  const [tooltip, setTooltip] = useState18(label8);
   return /* @__PURE__ */ jsx37(Tooltip, { label: tooltip, children: /* @__PURE__ */ jsx37(
     Typography,
     {
@@ -3863,9 +3863,9 @@ function TypographyWithTooltip(props) {
         whiteSpace: "nowrap"
       },
       onMouseEnter: (e) => {
-        setTooltip(e.currentTarget.scrollWidth > e.currentTarget.clientWidth ? label7 : "");
+        setTooltip(e.currentTarget.scrollWidth > e.currentTarget.clientWidth ? label8 : "");
       },
-      children: label7
+      children: label8
     }
   ) });
 }
@@ -3934,12 +3934,118 @@ function Card(props) {
     /* @__PURE__ */ jsx39("div", { className: classNames7(classes?.body), children: children2 })
   ] });
 }
+
+// src/components/view/Chip/Chip.tsx
+import classnames23 from "classnames";
+
+// src/components/view/Chip/chip.module.css
+var chip_exports = {};
+__export(chip_exports, {
+  active: () => active2,
+  clickable: () => clickable2,
+  default: () => chip_default,
+  filled: () => filled7,
+  icon: () => icon6,
+  iconClickable: () => iconClickable,
+  iconLeft: () => iconLeft,
+  iconRight: () => iconRight,
+  label: () => label7,
+  medium: () => medium12,
+  outlined: () => outlined8,
+  root: () => root22,
+  secondary: () => secondary,
+  small: () => small12,
+  stateLayer: () => stateLayer3,
+  withIcon: () => withIcon5
+});
+var root22 = "chip_root";
+var stateLayer3 = "chip_stateLayer";
+var active2 = "chip_active";
+var filled7 = "chip_filled";
+var outlined8 = "chip_outlined";
+var secondary = "chip_secondary";
+var clickable2 = "chip_clickable";
+var medium12 = "chip_medium";
+var small12 = "chip_small";
+var withIcon5 = "chip_withIcon";
+var iconLeft = "chip_iconLeft";
+var icon6 = "chip_icon";
+var iconClickable = "chip_iconClickable";
+var label7 = "chip_label";
+var iconRight = "chip_iconRight";
+var chip_default = {
+  root: root22,
+  stateLayer: stateLayer3,
+  active: active2,
+  filled: filled7,
+  outlined: outlined8,
+  secondary,
+  clickable: clickable2,
+  medium: medium12,
+  small: small12,
+  withIcon: withIcon5,
+  iconLeft,
+  icon: icon6,
+  iconClickable,
+  label: label7,
+  iconRight
+};
+
+// src/components/view/Chip/Chip.tsx
+import { jsx as jsx40, jsxs as jsxs24 } from "react/jsx-runtime";
+var Chip = (props) => {
+  const {
+    variant = "filled",
+    size = "medium",
+    icon: icon7,
+    iconPlacement = "right",
+    secondary: secondary2,
+    onClick,
+    onIconClick,
+    children: children2,
+    classes
+  } = props;
+  const handleIconClick = (e) => {
+    e.stopPropagation();
+    onIconClick?.();
+  };
+  const IconComponent = onIconClick ? "button" : "span";
+  return /* @__PURE__ */ jsx40(
+    "div",
+    {
+      className: classnames23(
+        root22,
+        chip_exports[variant],
+        chip_exports[size],
+        !!icon7 && withIcon5,
+        iconPlacement === "left" ? iconLeft : iconRight,
+        secondary2 && secondary,
+        onClick && clickable2,
+        classes?.root
+      ),
+      onClick,
+      children: /* @__PURE__ */ jsxs24("span", { className: classnames23(stateLayer3, classes?.stateLayer), children: [
+        children2 && /* @__PURE__ */ jsx40("span", { className: classnames23(label7, classes?.label), children: children2 }),
+        icon7 && /* @__PURE__ */ jsx40(
+          IconComponent,
+          {
+            className: classnames23(icon6, onIconClick && iconClickable, classes?.icon),
+            onClick: handleIconClick,
+            "aria-label": "\u0423\u0434\u0430\u043B\u0438\u0442\u044C",
+            children: icon7
+          }
+        )
+      ] })
+    }
+  );
+};
 export {
   Button,
   ButtonsGroup,
   Card,
   Checkbox,
   Checklist,
+  Chip,
   ColorPicker,
   DateTime,
   Input,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nntc-ui",
-  "version": "0.0.55",
+  "version": "0.0.57",
   "author": "NNTC",
   "description": "React UI-kit for NNTC",
   "type": "module",