@koslibs/components 1.6.0 → 1.8.0

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

@@ -0,0 +1,61 @@
+import type { HTMLAttributes, MouseEvent, ReactNode } from 'react';
+export type TabProps = {
+    /**
+     * Уникальный стабильный идентификатор вкладки.
+     */
+    id: string;
+    /**
+     * Текст заголовка вкладки.
+     */
+    title: ReactNode;
+    /**
+     * Неотрицательное целое число. Неизвестное значение скрывается, 0 отображается.
+     */
+    count?: number;
+    /**
+     * Запрещает выбор вкладки.
+     * @default false
+     */
+    disabled?: boolean;
+};
+export type TabsProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'> & {
+    /**
+     * Дочерние Tab в порядке отображения. id должны быть уникальными.
+     * Поддерживаются массивы, условные элементы и Fragment.
+     */
+    children?: ReactNode;
+    /**
+     * Идентификатор активной вкладки в controlled-режиме.
+     */
+    selectedId?: string;
+    /**
+     * Начальная вкладка в uncontrolled-режиме. По умолчанию — первая доступная.
+     */
+    defaultSelectedId?: string;
+    /**
+     * Запрос выбора другой вкладки пользователем: событие и { selectedId }.
+     * В controlled-режиме обновите selectedId. Повторный выбор и изменение children
+     * не вызывают обработчик.
+     */
+    onChange?: (event: MouseEvent<HTMLButtonElement>, payload: {
+        selectedId: string;
+    }) => void;
+    /**
+     * Высота заголовков вкладок в пикселях.
+     * @default 40
+     */
+    size?: 40 | 48;
+    /**
+     * Общее пустое состояние, когда нет доступных вкладок.
+     */
+    emptyState?: ReactNode;
+    /**
+     * Класс ряда заголовков.
+     */
+    listClassName?: string;
+    /**
+     * Идентификатор корня. Части получают суффиксы -list, -indicator,
+     * -tab-{id}.
+     */
+    dataTestId?: string;
+};

package/dist/components/Tabs/vars.css

@@ -0,0 +1,20 @@
+:root {
+  --tabs-color: #1c1a18;
+  --tabs-muted-color: #736554;
+  --tabs-disabled-color: #9da099;
+  --tabs-indicator-color: #d95300;
+  --tabs-hover-indicator-color: #c8beaa;
+  --tabs-counter-background-color: #e0dbce;
+  --tabs-disabled-counter-background-color: #e0dbce73;
+  --tabs-divider-color: #e0dbce;
+  --tabs-height-40: 40px;
+  --tabs-height-48: 48px;
+  --tabs-padding: var(--size-12);
+  --tabs-gap: var(--size-8);
+  --tabs-border-radius: var(--border-radius-4);
+  --tabs-indicator-height: 2px;
+  --tabs-indicator-transition-duration: .2s;
+  --tabs-counter-padding: var(--size-6);
+  --tabs-counter-border-radius: var(--border-radius-pill);
+}
+

package/dist/components/Textarea/index_module.css

@@ -108,11 +108,6 @@
   font-variant-numeric: tabular-nums;
   flex-shrink: 0;
   margin-left: auto;
-  line-height: 16px;
-}
-
-.innerHeader-N47qW7 .counter-XxZoUu {
-  line-height: 15px;
 }
 
 .label-fhdpHS {
@@ -122,7 +117,6 @@
   cursor: inherit;
   flex: 1;
   font-size: 13px;
-  line-height: 16px;
   display: block;
 }
 
@@ -130,31 +124,27 @@
   white-space: nowrap;
   text-overflow: ellipsis;
   font-size: var(--textarea-font-size);
-  line-height: var(--textarea-line-height);
-  transition: transform .18s, font-size .18s, line-height .18s;
+  transition: transform .18s, font-size .18s;
   overflow: hidden;
   transform: translateY(7.5px);
 
   & > span {
     font-size: inherit;
-    line-height: inherit;
   }
 }
 
 .component-K9LhZN[data-inner-label][data-filled] .label-fhdpHS, .component-K9LhZN[data-inner-label]:not([data-disabled], [data-read-only]) .value-pi9twE:focus-within .label-fhdpHS {
   font-size: 12px;
-  line-height: 15px;
   transform: translateY(0);
 }
 
 .component-K9LhZN[data-inner-label] .value-pi9twE:has(.textarea-vCe_J9:autofill) .label-fhdpHS {
   font-size: 12px;
-  line-height: 15px;
   transform: translateY(0);
 }
 
 .component-K9LhZN[data-inner-header] .textarea-vCe_J9 {
-  margin-top: 15px;
+  margin-top: calc(var(--size-30) / 2);
 }
 
 .component-K9LhZN[data-inner-label] .textarea-vCe_J9::placeholder {
@@ -172,6 +162,9 @@
   min-width: 0;
   height: calc(var(--textarea-rows) * var(--textarea-line-height));
   min-height: calc(var(--textarea-rows) * var(--textarea-line-height));
+  margin: var(--size-0);
+  padding: var(--size-0);
+  border-radius: var(--border-radius-0);
   color: var(--field-color);
   font-family: var(--font-primary);
   font-size: var(--textarea-font-size);
@@ -184,10 +177,7 @@
   scrollbar-width: auto;
   background: none;
   border: 0;
-  border-radius: 0;
   outline: none;
-  margin: 0;
-  padding: 0;
   display: block;
   overflow: auto;
 
@@ -216,8 +206,8 @@
   }
 
   &::-webkit-scrollbar-thumb {
+    border-radius: var(--border-radius-pill);
     background: var(--field-icon-color);
-    border-radius: 999px;
   }
 
   &::placeholder {
@@ -247,11 +237,11 @@
   min-width: 0;
   height: 24px;
   min-height: 0;
+  margin: var(--size-0) var(--size-4-neg);
+  padding: var(--size-0);
   color: var(--field-icon-color);
   background: none;
   flex: 0 0 24px;
-  margin: 0 -4px;
-  padding: 0;
 
   &:hover, &:active {
     color: var(--field-icon-color);
@@ -267,7 +257,6 @@
 .component-K9LhZN .message-_mT8Ov {
   color: var(--input-hint-color);
   overflow-wrap: anywhere;
-  line-height: 15px;
 }
 
 .component-K9LhZN[data-error] .message-_mT8Ov {

package/dist/components/Textarea/textarea.d.ts

@@ -1,5 +1,5 @@
 import { type ChangeEvent, type MouseEvent } from 'react';
-export declare const Textarea: import("react").ForwardRefExoticComponent<Omit<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, "value" | "defaultValue" | "children" | "onChange" | "maxLength" | "rows"> & {
+export declare const Textarea: import("react").ForwardRefExoticComponent<Omit<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, "children" | "defaultValue" | "onChange" | "value" | "maxLength" | "rows"> & {
     value?: string;
     defaultValue?: string;
     maxLength?: number;

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

@@ -14,7 +14,7 @@ export declare const Typography: {
         rowLimit?: 1 | 2 | 3;
         dataTestId?: string;
     } & {
-        size?: 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 20;
+        size?: 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 18 | 20;
         tag?: "span" | "p" | "div" | "li";
     } & import("react").RefAttributes<import("./shared.js").TextElement>>;
     Title: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLElement>, "className" | "style" | "color" | "children"> & {

package/dist/components/Typography/index_module.css

@@ -5,9 +5,9 @@
   margin: var(--size-0, 0px);
   padding: var(--size-0, 0px);
   font-family: var(--font-primary);
-  font-style: normal;
-  line-height: var(--typography-line-height);
   letter-spacing: var(--typography-letter-spacing);
+  font-style: normal;
+  line-height: normal;
 }
 
 .weight-regular-cOlAcy {

package/dist/components/Typography/preset.module.js

@@ -18,6 +18,8 @@ const preset_module = {
     size15: "size-15-DxWyW2",
     "size-16": "size-16-OgafBi",
     size16: "size-16-OgafBi",
+    "size-18": "size-18-MSiKUJ",
+    size18: "size-18-MSiKUJ",
     "size-20": "size-20-eTO0D7",
     size20: "size-20-eTO0D7",
     "size-24": "size-24-lZpjdx",

package/dist/components/Typography/preset_module.css

@@ -36,6 +36,10 @@
   font-size: var(--typography-font-size-16);
 }
 
+.size-18-MSiKUJ {
+  font-size: var(--typography-font-size-18);
+}
+
 .size-20-eTO0D7 {
   font-size: var(--typography-font-size-20);
 }

package/dist/components/Typography/shared.d.ts

@@ -44,7 +44,7 @@ export type TextProps = BaseProps & {
      * Размер шрифта в пикселях.
      * @default 13
      */
-    size?: 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 20;
+    size?: 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 18 | 20;
     /**
      * HTML-тег, определяющий семантику текста.
      * @default span

package/dist/components/Typography/text.d.ts

@@ -10,6 +10,6 @@ export declare const TypographyText: import("react").ForwardRefExoticComponent<O
     rowLimit?: 1 | 2 | 3;
     dataTestId?: string;
 } & {
-    size?: 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 20;
+    size?: 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 18 | 20;
     tag?: "span" | "p" | "div" | "li";
 } & import("react").RefAttributes<TextElement>>;

package/dist/components/Typography/vars.css

@@ -1,5 +1,4 @@
 :root {
-  --typography-line-height: normal;
   --typography-letter-spacing: 0;
   --typography-regular-font-weight: 400;
   --typography-medium-font-weight: 500;
@@ -19,6 +18,7 @@
   --typography-font-size-14: 14px;
   --typography-font-size-15: 15px;
   --typography-font-size-16: 16px;
+  --typography-font-size-18: 18px;
   --typography-font-size-20: 20px;
   --typography-font-size-24: 24px;
   --typography-font-size-28: 28px;

package/dist/index.d.ts

@@ -4,8 +4,12 @@ export { Input } from './components/Input/index.js';
 export type { InputProps } from './components/Input/index.js';
 export { Textarea } from './components/Textarea/index.js';
 export type { TextareaProps } from './components/Textarea/index.js';
+export { Tab, Tabs } from './components/Tabs/index.js';
+export type { TabProps, TabsProps } from './components/Tabs/index.js';
 export { Spinner } from './components/Spinner/index.js';
 export type { SpinnerProps } from './components/Spinner/index.js';
+export { Status } from './components/Status/index.js';
+export type { StatusProps } from './components/Status/index.js';
 export { Typography, TypographyText, TypographyTitle, Text, Title } from './components/Typography/index.js';
 export type { TextProps, TitleProps, TypographyColor, TypographyWeight, } from './components/Typography/index.js';
 export { Popover } from './components/Popover/index.js';

package/dist/index.js

@@ -1,7 +1,9 @@
 export { Button } from "./components/Button/index.js";
 export { Input } from "./components/Input/index.js";
 export { Textarea } from "./components/Textarea/index.js";
+export { Tab, Tabs } from "./components/Tabs/index.js";
 export { Spinner } from "./components/Spinner/index.js";
+export { Status } from "./components/Status/index.js";
 export { Text, Title, Typography, TypographyText, TypographyTitle } from "./components/Typography/index.js";
 export { Popover } from "./components/Popover/index.js";
 export { Collapse } from "./components/Collapse/index.js";

package/dist/styles/theme.css

@@ -1,4 +1,5 @@
 @import "./fonts.css";
+@import "./variables.css";
 
 @layer koslibs {
   :root {

package/dist/styles/variables.css

@@ -0,0 +1,63 @@
+@layer koslibs {
+  :root {
+    --size-0: 0;
+    --size-2: 2px;
+    --size-4: 4px;
+    --size-6: 6px;
+    --size-8: 8px;
+    --size-12: 12px;
+    --size-16: 16px;
+    --size-20: 20px;
+    --size-22: 22px;
+    --size-24: 24px;
+    --size-28: 28px;
+    --size-30: 30px;
+    --size-32: 32px;
+    --size-36: 36px;
+    --size-40: 40px;
+    --size-44: 44px;
+    --size-48: 48px;
+    --size-56: 56px;
+    --size-64: 64px;
+    --size-72: 72px;
+    --size-80: 80px;
+    --size-96: 96px;
+    --size-128: 128px;
+    --size-2-neg: -2px;
+    --size-4-neg: -4px;
+    --size-8-neg: -8px;
+    --size-12-neg: -12px;
+    --size-16-neg: -16px;
+    --size-20-neg: -20px;
+    --size-22-neg: -22px;
+    --size-24-neg: -24px;
+    --size-28-neg: -28px;
+    --size-32-neg: -32px;
+    --size-36-neg: -36px;
+    --size-40-neg: -40px;
+    --size-44-neg: -44px;
+    --size-48-neg: -48px;
+    --size-56-neg: -56px;
+    --size-64-neg: -64px;
+    --size-72-neg: -72px;
+    --size-80-neg: -80px;
+    --size-96-neg: -96px;
+    --size-128-neg: -128px;
+    --border-radius-0: 0;
+    --border-radius-2: 2px;
+    --border-radius-4: 4px;
+    --border-radius-6: 6px;
+    --border-radius-8: 8px;
+    --border-radius-10: 10px;
+    --border-radius-12: 12px;
+    --border-radius-16: 16px;
+    --border-radius-20: 20px;
+    --border-radius-24: 24px;
+    --border-radius-32: 32px;
+    --border-radius-36: 36px;
+    --border-radius-64: 64px;
+    --border-radius-circle: 50%;
+    --border-radius-pill: 99px;
+  }
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koslibs/components",
-    "version": "1.6.0",
+    "version": "1.8.0",
     "description": "Shared React components for koslibs projects",
     "type": "module",
     "main": "./dist/index.js",
@@ -11,6 +11,7 @@
             "import": "./dist/index.js"
         },
         "./theme.css": "./dist/styles/theme.css",
+        "./variables.css": "./dist/styles/variables.css",
         "./*": {
             "types": "./dist/components/*/index.d.ts",
             "import": "./dist/components/*/index.js"