@koslibs/components 1.5.0 → 1.7.0

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @koslibs/components
 
+## 1.7.0
+
+### Minor Changes
+
+- [#8](https://github.com/koslibs/components/pull/8) [`5b8e35c`](https://github.com/koslibs/components/commit/5b8e35cdfc7d0586b93d986661ff0ddcafa97452) Thanks [@holypower777](https://github.com/holypower777)! - Добавлены Tabs и дочерний Tab по документации Figma: selectedId/defaultSelectedId,
+  onChange(event, { selectedId }), размеры 40/48, счётчики, controlled/uncontrolled,
+  плавное перемещение активного индикатора. Ряд вкладок должен помещаться в доступную
+  ширину; горизонтальная прокрутка и перенос не поддерживаются. Содержимое выбранной вкладки
+  отображается отдельно в приложении.
+  В документации показаны props обоих компонентов: Tabs и Tab.
+  Tab отображает кнопку вкладки; Tabs управляет общим состоянием через внутренний контекст.
+
+    Текст Tabs, Button и Collapse использует общий TypographyText. Добавлен размер
+    18 px для TypographyText; сохранены размеры текста. Все размеры Typography используют
+    line-height: normal по документации Figma Auto. Удалены локальные переопределения
+    высоты строки в Tabs, Button, Collapse, а также подписях, подсказках и счётчиках
+    Input и Textarea.
+
+    Добавлен импорт @koslibs/components/variables.css со шкалами --size-_ и
+    --border-radius-_. Общая тема включает переменные автоматически; отступы и
+    скругления компонентов используют эти шкалы. Использование и переопределение
+    задокументированы в README и Storybook.
+
+## 1.6.0
+
+### Minor Changes
+
+- [#7](https://github.com/koslibs/components/pull/7) [`4e937d7`](https://github.com/koslibs/components/commit/4e937d7e18b3c7d592e3b8cb161817d482bf2c55) Thanks [@holypower777](https://github.com/holypower777)! - Добавлен Textarea по документации Figma: primary/secondary, inner/outer label,
+  Typography, hint/error, счётчик длины, очистка, autosize и вертикальный resize.
+  Внутренний скроллбар оформлен без стрелок и фона, с тонким закруглённым ползунком.
+
 ## 1.5.0
 
 ### Minor Changes

package/README.md

@@ -30,6 +30,63 @@ import '@koslibs/components/theme.css';
 Файлы своего шрифта подключите в приложении. Тема задаёт только переменную и
 `@font-face`; она не изменяет шрифт `body` или элементов, которые её не используют.
 
+## Глобальные переменные
+
+Отступы и скругления доступны отдельным импортом без шрифтов:
+
+```tsx
+import '@koslibs/components/variables.css';
+```
+
+`theme.css` уже включает эти переменные вместе с Inter. Компоненты подключают
+нужные стили автоматически; отдельный импорт нужен, если вы используете переменные
+в собственных элементах приложения.
+
+Используйте `--size-*` в `margin`, `padding`, `gap`, `row-gap` и `column-gap`,
+а `--border-radius-*` — в `border-radius`:
+
+```css
+.card {
+    display: flex;
+    flex-direction: column;
+    margin: var(--size-0);
+    padding: var(--size-24);
+    gap: var(--size-12);
+    border-radius: var(--border-radius-12);
+}
+
+.badge {
+    margin-left: var(--size-4-neg);
+    padding: var(--size-2) var(--size-8);
+    border-radius: var(--border-radius-pill);
+}
+```
+
+| Семейство | Суффиксы переменных | Значения по умолчанию |
+| --- | --- | --- |
+| `--size-*` | 0, 2, 4, 6, 8, 12, 16, 20, 22, 24, 28, 30, 32, 36, 40, 44, 48, 56, 64, 72, 80, 96, 128 | `0` для нуля, остальные — в px |
+| `--size-*-neg` | 2, 4, 8, 12, 16, 20, 22, 24, 28, 32, 36, 40, 44, 48, 56, 64, 72, 80, 96, 128 | Отрицательное значение в px, например `--size-8-neg: -8px` |
+| `--border-radius-*` | 0, 2, 4, 6, 8, 10, 12, 16, 20, 24, 32, 36, 64 | `0` для нуля, остальные — в px |
+| `--border-radius-circle` | — | `50%` |
+| `--border-radius-pill` | — | `99px` |
+
+Значения объявлены в CSS-слое `koslibs`. Переопределяйте их в обычном `:root`
+приложения; порядок подключения относительно библиотечных стилей не важен:
+
+```css
+:root {
+    --size-24: 20px;
+    --border-radius-12: 10px;
+}
+```
+
+Это меняет значения во всех компонентах, которые используют соответствующий токен.
+Переменные компонента сохраняют приоритет для его отдельной настройки, например
+`--tabs-gap: var(--size-6)` или `--input-border-radius: var(--border-radius-4)`.
+Нулевые отступы также задавайте через `--size-0`; `auto` и проценты сохраняйте
+по назначению. Для точного значения вне шкалы используйте `calc()`, например
+`calc(var(--size-30) / 2)` для 15 px.
+
 ## Добавление компонента
 
 Рекомендуемая структура:
@@ -40,6 +97,8 @@ src/components/Button/
     button.tsx
     button.module.css
     CHANGELOG.md
+    hooks/
+        use-button-hook.ts
     docs/
         button.stories.tsx
         button.docs.tsx
@@ -68,6 +127,32 @@ src/components/Button/
    `koslibs-builder lib:test`; `npm test` также проверяет отдельные импорты.
 6. Выполните сборку и проверьте реальные пути JS, деклараций и CSS в `dist`.
 
+### Расположение хуков
+
+- Хуки, относящиеся к конкретному компоненту, храните в `src/components/<Name>/hooks/`.
+  Например, хук индикатора Tabs находится в `src/components/Tabs/hooks/use-tab-indicator.ts`.
+- Общие хуки, используемые разными компонентами, храните в `src/hooks/`.
+  Например, `src/hooks/use-data-test-id.ts`.
+
+Файлы хуков именуйте в kebab-case с префиксом `use-`. Папку `hooks` компонента
+создавайте, когда у него появляются собственные хуки.
+
+### Типографика компонентов
+
+Текстовые подписи, заголовки, подсказки и счётчики отображайте через `TypographyText`
+или `TypographyTitle`. Размер и начертание задавайте пропами `size` и `weight`,
+цвет — пропом `color` либо наследованием от компонента для его состояний.
+Внутри библиотеки импортируйте нужный компонент напрямую из `Typography/text`
+или `Typography/title`, чтобы не подключать весь публичный API Typography.
+
+В CSS компонента оставляйте оформление и отступы. Высоту строки задаёт Typography:
+для всех размеров используется `line-height: normal`, соответствующий Figma Auto.
+Не переопределяйте высоту строки Typography в компонентах и примерах.
+CSS шрифта допустим для нативных `input` и `textarea`, их placeholder,
+анимации плавающей подписи и других случаев, где текст нельзя оформить через
+Typography без изменения поведения. Произвольное содержимое приложения
+не оборачивайте в Typography автоматически.
+
 После публикации предполагается такой импорт:
 
 ```tsx

package/dist/components/Button/button.js

@@ -2,6 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import classnames from "classnames";
 import react, { forwardRef, useEffect, useRef, useState } from "react";
 import { Spinner } from "../Spinner/index.js";
+import { TypographyText } from "../Typography/text.js";
 import colors_module from "./colors.module.js";
 import index_module from "./index.module.js";
 const Button = /*#__PURE__*/ forwardRef(({ view = 'primary', shape = 'rectangular', size = 40, leftAddon, rightAddon, hint, block = false, loading = false, dataTestId, className, labelClassName, hintClassName, spinnerClassName, children, onClick, ...restProps }, ref)=>{
@@ -13,20 +14,33 @@ const Button = /*#__PURE__*/ forwardRef(({ view = 'primary', shape = 'rectangula
         64,
         72
     ].includes(size);
+    const textSize = {
+        32: 14,
+        40: 14,
+        48: 16,
+        56: 16,
+        64: 18,
+        72: 18
+    }[size];
     const { disabled, type = 'button', ...restButtonProps } = restProps;
     const buttonChildren = /*#__PURE__*/ jsxs(react.Fragment, {
         children: [
-            leftAddon && /*#__PURE__*/ jsx("span", {
+            leftAddon && /*#__PURE__*/ jsx(TypographyText, {
+                size: textSize,
+                weight: "medium",
                 className: index_module.addons,
                 children: leftAddon
             }),
-            children && /*#__PURE__*/ jsxs("span", {
+            children && /*#__PURE__*/ jsxs(TypographyText, {
+                size: textSize,
+                weight: "medium",
                 className: classnames(index_module.label, labelClassName, {
                     [index_module.stretchText]: !(leftAddon || rightAddon)
                 }),
                 children: [
                     children,
-                    showHint && /*#__PURE__*/ jsx("span", {
+                    showHint && /*#__PURE__*/ jsx(TypographyText, {
+                        size: 14,
                         className: classnames(index_module.hint, colors_module.hint, hintClassName),
                         children: hint
                     })
@@ -38,7 +52,9 @@ const Button = /*#__PURE__*/ forwardRef(({ view = 'primary', shape = 'rectangula
                 visible: true,
                 className: classnames(index_module.loader, colors_module.loader, spinnerClassName)
             }),
-            rightAddon && /*#__PURE__*/ jsx("span", {
+            rightAddon && /*#__PURE__*/ jsx(TypographyText, {
+                size: textSize,
+                weight: "medium",
                 className: index_module.addons,
                 children: rightAddon
             })

package/dist/components/Button/index_module.css

@@ -5,8 +5,7 @@
   box-sizing: border-box;
   vertical-align: middle;
   width: fit-content;
-  font-family: var(--font-ubuntu, "Ubuntu", sans-serif);
-  font-size: var(--size-16, 16px);
+  font: inherit;
   text-align: center;
   margin: var(--size-0, 0px);
   padding: var(--size-0, 0px) var(--size-24, 24px);
@@ -24,13 +23,6 @@
   position: relative;
 }
 
-.size-32-oD8MDp, .size-40-Pu2_h6 {
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 20px;
-  font-family: var(--font-family-system, system-ui, sans-serif);
-}
-
 .size-32-oD8MDp {
   min-width: 80px;
   min-height: 32px;
@@ -43,13 +35,6 @@
   padding: var(--size-0, 0px) var(--size-20, 20px);
 }
 
-.size-48-U3XIYx, .size-56-P_94sz {
-  font-size: 16px;
-  font-weight: 500;
-  line-height: 20px;
-  font-family: var(--font-family-system, system-ui, sans-serif);
-}
-
 .size-48-U3XIYx {
   min-width: 104px;
   min-height: 48px;
@@ -62,13 +47,6 @@
   padding: var(--size-0, 0px) var(--size-28, 28px);
 }
 
-.size-64-ZlQLt3, .size-72-zkSrcs {
-  font-size: 18px;
-  font-weight: 500;
-  line-height: 24px;
-  font-family: var(--font-family-system, system-ui, sans-serif);
-}
-
 .size-64-ZlQLt3 {
   min-width: 160px;
   min-height: 64px;
@@ -222,10 +200,6 @@
 }
 
 .hint-AFu_zz {
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 18px;
-  font-family: var(--font-primary);
   color: var(--button-hint-color);
   display: block;
 }

package/dist/components/Collapse/collapse.js

@@ -2,6 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDownIcon } from "@koslibs/icons/ChevronDownIcon";
 import classnames from "classnames";
 import { forwardRef, useId, useLayoutEffect, useRef, useState } from "react";
+import { TypographyText } from "../Typography/text.js";
 import index_module from "./index.module.js";
 const Collapse = /*#__PURE__*/ forwardRef(({ expanded, defaultExpanded = false, collapsedLabel, expandedLabel, showRightChevron = true, showLeftChevron = false, onExpandedChange, onTransitionEnd, expandedContentClassName, dataTestId, className, children, ...restProps }, ref)=>{
     const [expandedState, setExpandedState] = useState(defaultExpanded);
@@ -67,7 +68,8 @@ const Collapse = /*#__PURE__*/ forwardRef(({ expanded, defaultExpanded = false,
                         }),
                         "aria-hidden": "true"
                     }),
-                    /*#__PURE__*/ jsx("span", {
+                    /*#__PURE__*/ jsx(TypographyText, {
+                        size: 13,
                         children: label
                     }),
                     showRightChevron && /*#__PURE__*/ jsx(ChevronDownIcon, {

package/dist/components/Collapse/index_module.css

@@ -28,7 +28,8 @@
   align-items: center;
   gap: var(--size-4, 4px);
   max-width: 100%;
-  padding: var(--size-8, 8px) 0;
+  margin: var(--size-0);
+  padding: var(--size-8, 8px) var(--size-0);
   color: var(--collapse-color);
   font: inherit;
   text-align: left;
@@ -36,9 +37,6 @@
   cursor: pointer;
   background: none;
   border: 0;
-  margin: 0;
-  font-size: 13px;
-  line-height: 20px;
   display: inline-flex;
 
   &:hover {

package/dist/components/Input/index_module.css

@@ -86,7 +86,7 @@
   gap: var(--input-gap);
   width: 100%;
   height: var(--field-height);
-  padding: 0 var(--field-padding);
+  padding: var(--size-0) var(--field-padding);
   border-radius: var(--input-border-radius);
   background: var(--field-background);
   box-shadow: inset 0 0 0 1px var(--field-border);
@@ -143,11 +143,6 @@
   font-variant-numeric: tabular-nums;
   flex-shrink: 0;
   margin-left: auto;
-  line-height: 16px;
-}
-
-.innerHeader-Iga0Hb .counter-C758Bk {
-  line-height: 15px;
 }
 
 .label-tvCOwp {
@@ -157,7 +152,6 @@
   cursor: inherit;
   flex: 1;
   font-size: 13px;
-  line-height: 16px;
   display: block;
 }
 
@@ -165,31 +159,27 @@
   white-space: nowrap;
   text-overflow: ellipsis;
   font-size: var(--field-font-size);
-  line-height: var(--field-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-aUdiT5[data-inner-label][data-filled] .label-tvCOwp, .component-aUdiT5[data-inner-label]:not([data-disabled], [data-read-only]) .value-ehhHJ8:focus-within .label-tvCOwp {
   font-size: 12px;
-  line-height: 15px;
   transform: translateY(0);
 }
 
 .component-aUdiT5[data-inner-label] .value-ehhHJ8:has(.input-IlmcAi:autofill) .label-tvCOwp {
   font-size: 12px;
-  line-height: 15px;
   transform: translateY(0);
 }
 
 .component-aUdiT5[data-inner-label] .input-IlmcAi {
-  margin-top: 15px;
+  margin-top: calc(var(--size-30) / 2);
 
   &::placeholder {
     opacity: 0;
@@ -202,7 +192,7 @@
 }
 
 .component-aUdiT5[data-inner-counter]:not([data-inner-label]) .input-IlmcAi {
-  margin-top: 15px;
+  margin-top: calc(var(--size-30) / 2);
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -216,6 +206,9 @@
   width: 100%;
   min-width: 0;
   height: var(--field-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(--field-font-size);
@@ -225,10 +218,7 @@
   appearance: none;
   background: none;
   border: 0;
-  border-radius: 0;
   outline: none;
-  margin: 0;
-  padding: 0;
   display: block;
 
   &:focus {
@@ -274,11 +264,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);
@@ -299,7 +289,6 @@
 .component-aUdiT5 .message-ArUnJU {
   color: var(--input-hint-color);
   overflow-wrap: anywhere;
-  line-height: 15px;
 }
 
 .component-aUdiT5[data-error] .message-ArUnJU {

package/dist/components/Input/input.d.ts

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

package/dist/components/Input/vars.css

@@ -14,8 +14,8 @@
   --input-disabled-background-color: #cfd1cb;
   --input-disabled-color: #858981;
   --input-read-only-border-color: #c8beaa;
-  --input-border-radius: 8px;
-  --input-gap: 8px;
+  --input-border-radius: var(--border-radius-8);
+  --input-gap: var(--size-8);
   --input-icon-size: 16px;
   --input-width: 320px;
   --input-font-size-40: 13px;
@@ -23,10 +23,10 @@
   --input-font-size-56: 14px;
   --input-font-size-64: 14px;
   --input-font-size-72: 16px;
-  --input-padding-40: 12px;
-  --input-padding-48: 12px;
-  --input-padding-56: 16px;
-  --input-padding-64: 16px;
-  --input-padding-72: 20px;
+  --input-padding-40: var(--size-12);
+  --input-padding-48: var(--size-12);
+  --input-padding-56: var(--size-16);
+  --input-padding-64: var(--size-16);
+  --input-padding-72: var(--size-20);
 }
 

package/dist/components/Modal/components/footer/index_module.css

@@ -2,7 +2,7 @@
   justify-content: flex-end;
   align-items: center;
   gap: var(--size-12, 12px);
-  padding: 0 var(--modal-padding) var(--modal-padding);
+  padding: var(--size-0) var(--modal-padding) var(--modal-padding);
   flex-shrink: 0;
   display: flex;
 }

package/dist/components/Modal/components/header/index.d.ts

@@ -20,7 +20,7 @@ export type HeaderProps = Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'onClos
      */
     dataTestId?: string;
 };
-export declare const Header: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "title" | "children" | "onClose"> & {
+export declare const Header: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children" | "title" | "onClose"> & {
     /**
      * Заголовок окна.
      */

package/dist/components/Modal/components/header/index_module.css

@@ -2,7 +2,7 @@
   justify-content: space-between;
   align-items: flex-start;
   gap: var(--size-24, 24px);
-  padding: var(--modal-padding) var(--modal-padding) 0;
+  padding: var(--modal-padding) var(--modal-padding) var(--size-0);
   flex-shrink: 0;
   display: flex;
 }
@@ -17,10 +17,10 @@
 }
 
 .component-sqEuYd > .closer-odHjP5 {
-  flex-shrink: 0;
   width: 48px;
   min-width: 48px;
-  padding: 0;
+  padding: var(--size-0);
+  flex-shrink: 0;
 }
 
 .closerLabel-r61y3R {

package/dist/components/Modal/index_module.css

@@ -2,6 +2,7 @@
 @import "./vars.css";
 
 .component-kCkvk3 {
+  padding: var(--size-0);
   border-radius: var(--border-radius-12, 12px);
   max-width: calc(100vw - var(--size-32, 32px));
   max-height: calc(100dvh - var(--size-32, 32px));
@@ -11,7 +12,6 @@
   box-shadow: var(--modal-shadow);
   border: none;
   margin: auto;
-  padding: 0;
   overflow: hidden;
 
   &[open] {
@@ -37,7 +37,7 @@
 }
 
 .size-fullscreen-exf2cb {
-  border-radius: 0;
+  border-radius: var(--border-radius-0);
   width: 100vw;
   max-width: none;
   height: 100dvh;

package/dist/components/Popover/components/popover-surface/index.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import classnames from "classnames";
 import { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from "react";
 import { createSizeModifier } from "../../create-size-modifier.js";
-import { usePopoverPosition } from "../../use-popover-position.js";
+import { usePopoverPosition } from "../../hooks/use-popover-position.js";
 import index_module from "../../index.module.js";
 const DEFAULT_OFFSET = [
     0,

package/dist/components/Popover/{use-popover-position.d.ts → hooks/use-popover-position.d.ts}

@@ -1,6 +1,6 @@
 import { type Modifier } from '@popperjs/core';
 import { type CSSProperties } from 'react';
-import type { PopoverPosition } from './types.js';
+import type { PopoverPosition } from '../types.js';
 export declare function usePopoverPosition(anchorElement: HTMLElement, popperElement: HTMLDivElement | null, position: PopoverPosition, modifiers: Partial<Modifier<string, object>>[]): {
     update: () => Promise<Partial<import("@popperjs/core").State>> | undefined;
     styles: CSSProperties;

package/dist/components/Spinner/preset_module.css

@@ -1,5 +1,7 @@
+@import "../../styles/variables.css";
+
 .preset16-UI50gd {
-  padding: 1px;
+  padding: calc(var(--size-2) / 2);
 }
 
 .preset24-PPOWk6 {

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

@@ -0,0 +1,10 @@
+import type { TabsProps } from './types.js';
+type TabsContextValue = {
+    selectedId?: string;
+    size: NonNullable<TabsProps['size']>;
+    dataTestId?: string;
+    registerTab: (id: string, button: HTMLButtonElement | null) => void;
+    selectTab: (id: string, event: Parameters<NonNullable<TabsProps['onChange']>>[0]) => void;
+};
+export declare const TabsContext: import("react").Context<TabsContextValue | null>;
+export {};

package/dist/components/Tabs/context.js

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+const TabsContext = createContext(null);
+export { TabsContext };

package/dist/components/Tabs/hooks/use-tab-indicator.d.ts

@@ -0,0 +1,11 @@
+import { type MutableRefObject, type RefObject } from 'react';
+import type { TabProps, TabsProps } from '../types.js';
+type TabIndicatorOptions = {
+    selectedId?: string;
+    items: readonly TabProps[];
+    size: NonNullable<TabsProps['size']>;
+    listRef: RefObject<HTMLDivElement>;
+    buttons: MutableRefObject<Map<string, HTMLButtonElement>>;
+};
+export declare function useTabIndicator({ selectedId, items, size, listRef, buttons, }: TabIndicatorOptions): RefObject<HTMLDivElement>;
+export {};

package/dist/components/Tabs/hooks/use-tab-indicator.js

@@ -0,0 +1,43 @@
+import { useLayoutEffect, useRef } from "react";
+function useTabIndicator({ selectedId, items, size, listRef, buttons }) {
+    const indicatorRef = useRef(null);
+    const indicatorPosition = useRef();
+    useLayoutEffect(()=>{
+        const list = listRef.current;
+        const indicator = indicatorRef.current;
+        const button = void 0 !== selectedId ? buttons.current.get(selectedId) : void 0;
+        if (!list || !indicator || !button || void 0 === selectedId) {
+            indicatorPosition.current = void 0;
+            return;
+        }
+        const updateIndicator = ()=>{
+            const left = button.offsetLeft;
+            const width = button.offsetWidth;
+            const previous = indicatorPosition.current;
+            if (previous?.element === indicator && previous.id === selectedId && previous.left === left && previous.width === width) return;
+            indicator.style.transition = previous?.element === indicator && previous.id !== selectedId ? '' : 'none';
+            indicator.style.width = `${width}px`;
+            indicator.style.transform = `translateX(${left}px)`;
+            indicatorPosition.current = {
+                id: selectedId,
+                left,
+                width,
+                element: indicator
+            };
+        };
+        updateIndicator();
+        if ("u" < typeof ResizeObserver) return;
+        const observer = new ResizeObserver(updateIndicator);
+        observer.observe(list);
+        for (const tab of buttons.current.values())observer.observe(tab);
+        return ()=>observer.disconnect();
+    }, [
+        items,
+        selectedId,
+        size,
+        listRef,
+        buttons
+    ]);
+    return indicatorRef;
+}
+export { useTabIndicator };

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

@@ -0,0 +1,3 @@
+export { Tabs } from './tabs.js';
+export { Tab } from './tab.js';
+export type { TabProps, TabsProps } from './types.js';

package/dist/components/Tabs/index.js

@@ -0,0 +1,2 @@
+export { Tabs } from "./tabs.js";
+export { Tab } from "./tab.js";

package/dist/components/Tabs/index.module.js

@@ -0,0 +1,12 @@
+import "./index_module.css";
+const index_module = {
+    component: "component-mEZo4o",
+    list: "list-pbTqPB",
+    tab: "tab-yKhKqB",
+    size40: "size40-F0WNwL",
+    size48: "size48-cLRBaS",
+    selected: "selected-Lm0vXW",
+    counter: "counter-Tokn9i",
+    indicator: "indicator-LDebsI"
+};
+export default index_module;