@koslibs/components 1.6.0 → 1.8.0

package/dist/components/Status/index_module.css

@@ -0,0 +1,109 @@
+@import "../../styles/theme.css";
+@import "./vars.css";
+
+.component-p4fC6J {
+  box-sizing: border-box;
+  vertical-align: middle;
+  width: fit-content;
+  min-width: 0;
+  max-width: 100%;
+  height: var(--status-height);
+  padding: 0 var(--status-padding);
+  justify-content: center;
+  align-items: center;
+  gap: var(--status-geometry-gap);
+  border-radius: var(--status-radius);
+  display: inline-flex;
+}
+
+.size-20-RGtFYL {
+  --status-height: var(--status-geometry-height-20);
+  --status-padding: var(--status-geometry-padding-20);
+  --status-rectangular-radius: var(--status-geometry-radius-rectangular-20);
+  --status-rounded-radius: var(--status-geometry-radius-rounded-20);
+}
+
+.size-24-80Sg54 {
+  --status-height: var(--status-geometry-height-24);
+  --status-padding: var(--status-geometry-padding-24);
+  --status-rectangular-radius: var(--status-geometry-radius-rectangular-24);
+  --status-rounded-radius: var(--status-geometry-radius-rounded-24);
+}
+
+.size-32-SU7Krr {
+  --status-height: var(--status-geometry-height-32);
+  --status-padding: var(--status-geometry-padding-32);
+  --status-rectangular-radius: var(--status-geometry-radius-rectangular-32);
+  --status-rounded-radius: var(--status-geometry-radius-rounded-32);
+}
+
+.size-40-TbyUxw {
+  --status-height: var(--status-geometry-height-40);
+  --status-padding: var(--status-geometry-padding-40);
+  --status-rectangular-radius: var(--status-geometry-radius-rectangular-40);
+  --status-rounded-radius: var(--status-geometry-radius-rounded-40);
+}
+
+.rectangular-ykPeeK {
+  --status-radius: var(--status-rectangular-radius);
+}
+
+.rounded-yFfN8M {
+  --status-radius: var(--status-rounded-radius);
+}
+
+.green-Jd9YVz {
+  background-color: var(--status-color-green-background);
+  color: var(--status-color-green-foreground);
+}
+
+.orange-tRGq_X {
+  background-color: var(--status-color-orange-background);
+  color: var(--status-color-orange-foreground);
+}
+
+.red-QhwnhH {
+  background-color: var(--status-color-red-background);
+  color: var(--status-color-red-foreground);
+}
+
+.blue-AisEDx {
+  background-color: var(--status-color-blue-background);
+  color: var(--status-color-blue-foreground);
+}
+
+.grey-T_mrQo {
+  background-color: var(--status-color-grey-background);
+  color: var(--status-color-grey-foreground);
+}
+
+.teal-E4zwls {
+  background-color: var(--status-color-teal-background);
+  color: var(--status-color-teal-foreground);
+}
+
+.purple-UK0BCp {
+  background-color: var(--status-color-purple-background);
+  color: var(--status-color-purple-foreground);
+}
+
+.sand-Bcwhyf {
+  background-color: var(--status-color-sand-background);
+  color: var(--status-color-sand-foreground);
+}
+
+.component-p4fC6J .label-Oml2a7 {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  line-height: normal;
+  overflow: hidden;
+}
+
+.addon-MKQxtF {
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+

package/dist/components/Status/status.d.ts

@@ -0,0 +1,85 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type StatusProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'color'> & {
+    /**
+     * Высота плашки в пикселях.
+     * @default 24
+     */
+    size?: 20 | 24 | 32 | 40;
+    /**
+     * Форма плашки.
+     * @default 'rectangular'
+     */
+    shape?: 'rounded' | 'rectangular';
+    /**
+     * Цвет фона, подписи и аддонов.
+     * @default 'grey'
+     */
+    color?: 'green' | 'orange' | 'red' | 'blue' | 'grey' | 'teal' | 'purple' | 'sand';
+    /**
+     * Короткая подпись статуса. При ограничении ширины сокращается многоточием.
+     */
+    message: string;
+    /**
+     * Отображать подпись заглавными буквами.
+     * @default false
+     */
+    uppercase?: boolean;
+    /**
+     * Декоративный элемент слева от подписи, скрытый от скринридера.
+     */
+    leftAddon?: ReactNode;
+    /**
+     * Декоративный элемент справа от подписи, скрытый от скринридера.
+     */
+    rightAddon?: ReactNode;
+    /**
+     * Дополнительный CSS-класс подписи.
+     */
+    labelClassName?: string;
+    /**
+     * Идентификатор корневого элемента для тестов.
+     */
+    dataTestId?: string;
+};
+export declare const Status: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLSpanElement>, "color" | "children"> & {
+    /**
+     * Высота плашки в пикселях.
+     * @default 24
+     */
+    size?: 20 | 24 | 32 | 40;
+    /**
+     * Форма плашки.
+     * @default 'rectangular'
+     */
+    shape?: "rounded" | "rectangular";
+    /**
+     * Цвет фона, подписи и аддонов.
+     * @default 'grey'
+     */
+    color?: "green" | "orange" | "red" | "blue" | "grey" | "teal" | "purple" | "sand";
+    /**
+     * Короткая подпись статуса. При ограничении ширины сокращается многоточием.
+     */
+    message: string;
+    /**
+     * Отображать подпись заглавными буквами.
+     * @default false
+     */
+    uppercase?: boolean;
+    /**
+     * Декоративный элемент слева от подписи, скрытый от скринридера.
+     */
+    leftAddon?: ReactNode;
+    /**
+     * Декоративный элемент справа от подписи, скрытый от скринридера.
+     */
+    rightAddon?: ReactNode;
+    /**
+     * Дополнительный CSS-класс подписи.
+     */
+    labelClassName?: string;
+    /**
+     * Идентификатор корневого элемента для тестов.
+     */
+    dataTestId?: string;
+} & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/Status/status.js

@@ -0,0 +1,35 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import classnames from "classnames";
+import { forwardRef } from "react";
+import { TypographyText } from "../Typography/text.js";
+import index_module from "./index.module.js";
+function hasAddon(addon) {
+    return null != addon && 'boolean' != typeof addon;
+}
+const Status = /*#__PURE__*/ forwardRef(({ size = 24, shape = 'rectangular', color = 'grey', leftAddon, rightAddon, message, uppercase = false, className, labelClassName, dataTestId, ...restProps }, ref)=>/*#__PURE__*/ jsxs("span", {
+        ...restProps,
+        ref: ref,
+        className: classnames(index_module.component, index_module[`size-${size}`], index_module[shape], index_module[color], className),
+        "data-test-id": dataTestId,
+        children: [
+            hasAddon(leftAddon) && /*#__PURE__*/ jsx("span", {
+                className: index_module.addon,
+                "aria-hidden": "true",
+                children: leftAddon
+            }),
+            /*#__PURE__*/ jsx(TypographyText, {
+                size: size <= 24 ? 12 : 14,
+                weight: "medium",
+                caps: uppercase,
+                className: classnames(index_module.label, labelClassName),
+                children: message
+            }),
+            hasAddon(rightAddon) && /*#__PURE__*/ jsx("span", {
+                className: index_module.addon,
+                "aria-hidden": "true",
+                children: rightAddon
+            })
+        ]
+    }));
+Status.displayName = 'Status';
+export { Status };

package/dist/components/Status/vars.css

@@ -0,0 +1,36 @@
+:root {
+  --status-color-green-background: #d1f1d7;
+  --status-color-green-foreground: #08752a;
+  --status-color-orange-background: #ffe6cc;
+  --status-color-orange-foreground: #9a4600;
+  --status-color-red-background: #fde0df;
+  --status-color-red-foreground: #b42318;
+  --status-color-blue-background: #ddebff;
+  --status-color-blue-foreground: #175cd3;
+  --status-color-grey-background: #e9eaec;
+  --status-color-grey-foreground: #535862;
+  --status-color-teal-background: #d4f1ed;
+  --status-color-teal-foreground: #0b6b60;
+  --status-color-purple-background: #e9e2ff;
+  --status-color-purple-foreground: #6941c6;
+  --status-color-sand-background: #ede9de;
+  --status-color-sand-foreground: #736554;
+  --status-geometry-height-20: var(--size-20);
+  --status-geometry-height-24: var(--size-24);
+  --status-geometry-height-32: var(--size-32);
+  --status-geometry-height-40: var(--size-40);
+  --status-geometry-padding-20: var(--size-8);
+  --status-geometry-padding-24: var(--size-12);
+  --status-geometry-padding-32: var(--size-16);
+  --status-geometry-padding-40: var(--size-20);
+  --status-geometry-radius-rectangular-20: var(--border-radius-6);
+  --status-geometry-radius-rectangular-24: var(--border-radius-6);
+  --status-geometry-radius-rectangular-32: var(--border-radius-10);
+  --status-geometry-radius-rectangular-40: var(--border-radius-12);
+  --status-geometry-radius-rounded-20: var(--border-radius-10);
+  --status-geometry-radius-rounded-24: var(--border-radius-12);
+  --status-geometry-radius-rounded-32: var(--border-radius-16);
+  --status-geometry-radius-rounded-40: var(--border-radius-20);
+  --status-geometry-gap: var(--size-6);
+}
+

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;

package/dist/components/Tabs/index_module.css

@@ -0,0 +1,92 @@
+@import "../../styles/theme.css";
+@import "./vars.css";
+
+.component-mEZo4o {
+  width: 100%;
+  min-width: 0;
+  font-family: var(--font-primary);
+}
+
+.list-pbTqPB {
+  gap: var(--tabs-gap);
+  box-shadow: inset 0 -1px var(--tabs-divider-color);
+  display: flex;
+  position: relative;
+}
+
+.tab-yKhKqB {
+  justify-content: center;
+  align-items: center;
+  gap: var(--tabs-gap);
+  box-sizing: border-box;
+  margin: var(--size-0);
+  padding: var(--size-0) var(--tabs-padding);
+  border-radius: var(--tabs-border-radius);
+  color: var(--tabs-muted-color);
+  white-space: nowrap;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  background: none;
+  border: 0;
+  outline: none;
+  flex: none;
+  display: inline-flex;
+  position: relative;
+}
+
+.size40-F0WNwL {
+  height: var(--tabs-height-40);
+}
+
+.size48-cLRBaS {
+  height: var(--tabs-height-48);
+}
+
+.tab-yKhKqB:after {
+  height: var(--tabs-indicator-height);
+  content: "";
+  background: none;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.tab-yKhKqB:hover:not(:disabled) {
+  color: var(--tabs-color);
+}
+
+.tab-yKhKqB:hover:not(:disabled):not(.selected-Lm0vXW):after {
+  background: var(--tabs-hover-indicator-color);
+}
+
+.tab-yKhKqB.selected-Lm0vXW, .tab-yKhKqB .counter-Tokn9i {
+  color: var(--tabs-color);
+}
+
+.indicator-LDebsI {
+  height: var(--tabs-indicator-height);
+  background: var(--tabs-indicator-color);
+  pointer-events: none;
+  transition: transform var(--tabs-indicator-transition-duration) ease,
+        width var(--tabs-indicator-transition-duration) ease;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
+.tab-yKhKqB .counter-Tokn9i {
+  padding: var(--size-0) var(--tabs-counter-padding);
+  border-radius: var(--tabs-counter-border-radius);
+  background: var(--tabs-counter-background-color);
+}
+
+.tab-yKhKqB:disabled, .tab-yKhKqB:disabled .counter-Tokn9i {
+  color: var(--tabs-disabled-color);
+  cursor: default;
+}
+
+.tab-yKhKqB:disabled .counter-Tokn9i {
+  background: var(--tabs-disabled-counter-background-color);
+}
+

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

@@ -0,0 +1,9 @@
+import type { TabProps } from './types.js';
+/**
+ * Кнопка вкладки с заголовком, счётчиком и состоянием выбора из Tabs.
+ * Содержимое выбранной вкладки отображается отдельно в приложении.
+ */
+export declare const Tab: {
+    ({ id, title, count, disabled }: TabProps): import("react").JSX.Element;
+    displayName: string;
+};

package/dist/components/Tabs/tab.js

@@ -0,0 +1,38 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import classnames from "classnames";
+import { useContext } from "react";
+import { useDataTestId } from "../../hooks/use-data-test-id.js";
+import { TypographyText } from "../Typography/text.js";
+import { TabsContext } from "./context.js";
+import index_module from "./index.module.js";
+const Tab = ({ id, title, count, disabled = false })=>{
+    const context = useContext(TabsContext);
+    const getDataTestId = useDataTestId(context?.dataTestId);
+    if (!context) throw new Error('Tab must be rendered inside Tabs.');
+    const { selectedId, size, registerTab, selectTab } = context;
+    const selected = id === selectedId;
+    return /*#__PURE__*/ jsxs("button", {
+        ref: (button)=>registerTab(id, button),
+        type: "button",
+        disabled: disabled,
+        className: classnames(index_module.tab, index_module[`size${size}`], {
+            [index_module.selected]: selected
+        }),
+        onClick: (event)=>selectTab(id, event),
+        "data-test-id": getDataTestId(`tab-${id}`),
+        children: [
+            /*#__PURE__*/ jsx(TypographyText, {
+                size: 14,
+                weight: "medium",
+                children: title
+            }),
+            void 0 !== count && Number.isInteger(count) && count >= 0 && /*#__PURE__*/ jsx(TypographyText, {
+                size: 11,
+                className: index_module.counter,
+                children: count
+            })
+        ]
+    });
+};
+Tab.displayName = 'Tab';
+export { Tab };

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

@@ -0,0 +1,13 @@
+import { type ReactNode } from 'react';
+export declare const Tabs: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & {
+    children?: ReactNode;
+    selectedId?: string;
+    defaultSelectedId?: string;
+    onChange?: (event: import("react").MouseEvent<HTMLButtonElement>, payload: {
+        selectedId: string;
+    }) => void;
+    size?: 40 | 48;
+    emptyState?: ReactNode;
+    listClassName?: string;
+    dataTestId?: string;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Tabs/tabs.js

@@ -0,0 +1,116 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import classnames from "classnames";
+import { Children, Fragment, forwardRef, isValidElement, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { useDataTestId } from "../../hooks/use-data-test-id.js";
+import { TabsContext } from "./context.js";
+import { useTabIndicator } from "./hooks/use-tab-indicator.js";
+import { Tab } from "./tab.js";
+import index_module from "./index.module.js";
+function collectTabs(children) {
+    const items = [];
+    const ids = new Set();
+    const collect = (nodes)=>{
+        Children.forEach(nodes, (child)=>{
+            if (null == child || 'boolean' == typeof child) return;
+            if (/*#__PURE__*/ isValidElement(child) && child.type === Fragment) return void collect(child.props.children);
+            if (!/*#__PURE__*/ isValidElement(child) || child.type !== Tab) throw new Error('Tabs accepts only Tab elements and Fragments.');
+            if (ids.has(child.props.id)) throw new Error(`Tabs requires unique Tab ids: "${child.props.id}" is duplicated.`);
+            ids.add(child.props.id);
+            items.push(child.props);
+        });
+    };
+    collect(children);
+    return items;
+}
+function resolveValue(items, value, previous) {
+    const index = items.findIndex((item)=>item.id === value);
+    if (index >= 0 && !items[index].disabled) return value;
+    if (index < 0) {
+        const previousIndex = previous.items.findIndex((item)=>item.id === value);
+        if (previousIndex >= 0) {
+            const neighbors = [
+                ...previous.items.slice(previousIndex + 1),
+                ...previous.items.slice(0, previousIndex).reverse()
+            ];
+            const neighbor = neighbors.find((candidate)=>items.some((item)=>item.id === candidate.id && !item.disabled));
+            if (neighbor) return neighbor.id;
+        }
+        if (items.some((item)=>item.id === previous.value && !item.disabled)) return previous.value;
+    }
+    const start = Math.max(0, index);
+    return items.slice(start).find((item)=>!item.disabled)?.id ?? items.slice(0, start).reverse().find((item)=>!item.disabled)?.id;
+}
+const Tabs = /*#__PURE__*/ forwardRef(({ children, selectedId, defaultSelectedId, onChange, size = 40, emptyState, listClassName, dataTestId, className, ...restProps }, ref)=>{
+    const getDataTestId = useDataTestId(dataTestId);
+    const items = useMemo(()=>collectTabs(children), [
+        children
+    ]);
+    const [internalValue, setInternalValue] = useState(defaultSelectedId);
+    const previousSelection = useRef({
+        items
+    });
+    const selectedValue = resolveValue(items, selectedId ?? internalValue, previousSelection.current);
+    const listRef = useRef(null);
+    const buttons = useRef(new Map());
+    useLayoutEffect(()=>{
+        previousSelection.current = {
+            items,
+            value: selectedValue
+        };
+        if (void 0 === selectedId && internalValue !== selectedValue) setInternalValue(selectedValue);
+    }, [
+        items,
+        selectedValue,
+        selectedId,
+        internalValue
+    ]);
+    const indicatorRef = useTabIndicator({
+        selectedId: selectedValue,
+        items,
+        size,
+        listRef,
+        buttons
+    });
+    const select = (id, event)=>{
+        if (id === selectedValue) return;
+        if (void 0 === selectedId) setInternalValue(id);
+        onChange?.(event, {
+            selectedId: id
+        });
+    };
+    return /*#__PURE__*/ jsx("div", {
+        ...restProps,
+        ref: ref,
+        className: classnames(index_module.component, className),
+        "data-test-id": dataTestId,
+        children: void 0 === selectedValue ? emptyState : /*#__PURE__*/ jsx(TabsContext.Provider, {
+            value: {
+                selectedId: selectedValue,
+                size,
+                dataTestId,
+                registerTab: (id, button)=>{
+                    if (button) buttons.current.set(id, button);
+                    else buttons.current.delete(id);
+                },
+                selectTab: select
+            },
+            children: /*#__PURE__*/ jsxs("div", {
+                ref: listRef,
+                className: classnames(index_module.list, listClassName),
+                "data-test-id": getDataTestId('list'),
+                children: [
+                    items.map((item)=>/*#__PURE__*/ jsx(Tab, {
+                            ...item
+                        }, item.id)),
+                    /*#__PURE__*/ jsx("div", {
+                        ref: indicatorRef,
+                        className: index_module.indicator,
+                        "data-test-id": getDataTestId('indicator')
+                    })
+                ]
+            })
+        })
+    });
+});
+Tabs.displayName = 'Tabs';
+export { Tabs };