@koslibs/components 0.0.0-stage → 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,27 @@
+# @koslibs/components
+
+## 1.0.0
+
+### Major Changes
+
+- [#1](https://github.com/koslibs/components/pull/1) [`8954b64`](https://github.com/koslibs/components/commit/8954b64becb19165000479731114463317438bcd) Thanks [@holypower777](https://github.com/holypower777)! - Первый стабильный выпуск 1.0.0 с Button и Spinner, перенесёнными из core-components GullEye.
+
+    Компонент доступен через `import { Button } from '@koslibs/components/Button'` вместе с типом ButtonProps. Поддерживает шесть вариантов оформления, размеры 32–72, формы rectangular и rounded, левый и правый аддоны, подпись, полную ширину, disabled и loading. Сохранены ref, стандартные HTML-атрибуты и минимальное время отображения загрузки 500 мс.
+
+    Spinner доступен отдельно через `import { Spinner } from '@koslibs/components/Spinner'` вместе с типом SpinnerProps. Поддерживает размеры 16, 24 и 48, управление видимостью, настройку цвета через style.color, className, id и dataTestId. Button использует этот же публичный Spinner для отображения загрузки.
+
+    CSS Modules подключаются вместе с используемыми компонентами. Добавлены значения по умолчанию для CSS-переменных размеров, скруглений и шрифтов, чтобы компоненты работали без глобальных стилей GullEye. Отдельный импорт Spinner не включает Button и его стили. Для обоих компонентов в Storybook доступны Docs и Playground.
+
+    Docs каждого компонента разделены на вкладки «Документация», «Разработчику» и «Обновления». Во вкладке разработчика доступны публичный импорт, Props и CSS-переменные из исходных стилей; обновления отображают CHANGELOG конкретного компонента.
+
+    Проверка отдельных импортов разделена на общий fixture и декларативные сценарии: JS и типы всех публичных компонентов проверяются автоматически, библиотека собирается один раз, а выбранные production-потребители — одним запуском builder в независимых environments с общей установленной копией пакета и отдельными выходными папками.
+
+## 0.1.0
+
+### Minor Changes
+
+- [`ee39a5b`](https://github.com/koslibs/components/commit/ee39a5bb32f94a3a76e4367ec6b14d9cbe4d41b2) Thanks [@holypower777](https://github.com/holypower777)! - Подготовлен каркас @koslibs/components для React 18/19 и TypeScript: сборка ESM, деклараций и CSS Modules через @koslibs/builder@1.0.0, общие настройки и release-инструменты @koslibs/configs@1.0.0, Storybook и workflow деплоя на GitHub Pages.
+
+    Настроены отдельные импорты вида @koslibs/components/Button. Тест production-сборки проверяет, что в бандл потребителя входят выбранный компонент и его CSS, а независимые соседние компоненты исключаются. Добавлены CI, Changesets и документация по переносу компонентов и ведению их историй изменений. Runtime-компоненты будут перенесены отдельно.
+
+Опубликованных версий пока нет. После первого релиза Changesets добавит сюда историю пакета.

package/README.md

@@ -1,3 +1,64 @@
-# Temporary Holding Version
+Демо: <https://koslibs.github.io/components/>
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+## Добавление компонента
+
+Рекомендуемая структура:
+
+```text
+src/components/Button/
+    index.ts
+    button.tsx
+    button.module.css
+    button.stories.tsx
+    button.docs.tsx
+    CHANGELOG.md
+```
+
+1. Перенесите компонент в `src/components/<Name>`; имя папки — PascalCase, например `Button`.
+   Регистр пути важен, в том числе на Linux. Стили храните в CSS Modules.
+2. Экспортируйте публичный API из его `index.ts`. Для удобного импорта из корня можно
+   также добавить реэкспорт в `src/index.ts`; отдельный импорт компонента его не использует.
+3. Общий шаблон в `package.json` → `exports` уже связывает каждый компонент с его файлами:
+
+    ```json
+    {
+        "./*": {
+            "types": "./dist/components/*/index.d.ts",
+            "import": "./dist/components/*/index.js"
+        }
+    }
+    ```
+
+4. Добавьте Docs, Playground и `CHANGELOG.md` по [примеру документации](https://github.com/koslibs/components/blob/main/docs/component-changelogs.md).
+5. Добавьте тесты поведения. `npm run test:unit` запускает unit-тесты через
+   `koslibs-builder lib:test`; `npm test` также проверяет отдельные импорты.
+6. Выполните сборку и проверьте реальные пути JS, деклараций и CSS в `dist`.
+
+После публикации предполагается такой импорт:
+
+```tsx
+import { Button } from '@koslibs/components/Button';
+```
+
+Этот путь ведёт прямо к `dist/components/Button/index.js`, минуя общий `dist/index.js`.
+Входной файл компонента должен экспортировать только свой API и импортировать только
+нужные ему зависимости; не импортируйте внутри компонента общий barrel библиотеки.
+Builder сохраняет отдельные JS-модули и отдельные CSS-файлы для каждого компонента.
+Поэтому приложение подключает выбранный компонент, его стили и необходимые зависимости.
+Соседние независимые компоненты не входят в его граф импортов.
+
+При установке npm скачивает весь пакет; отдельные импорты ограничивают состав бандла
+приложения. React, общие утилиты и другие зависимости используемого компонента
+по-прежнему могут входить в бандл.
+
+Тест `tests/component-imports.test.mjs` запускается через Node.js test runner командой
+`npm test` (или отдельно `npm run test:imports`) и проверяет схему через builder:
+собирает временную библиотеку с настоящим Button и независимым тестовым Spinner,
+затем приложение с импортом только `@koslibs/components/Button`.
+Проверка подтверждает наличие Button, его внутреннего спиннера загрузки и их CSS
+и отсутствие независимого Spinner в production-бандле.
+Временная библиотека находится в `.cache` и не публикуется.
+
+Пакет выпускается в ESM. CSS помечен как side effect, чтобы оптимизация потребителя
+не удаляла стили. Builder сохраняет структуру модулей; Docs, stories и Markdown
+исключены из npm-сборки. Storybook загружает Markdown как текст через `?raw`.

package/dist/components/Button/button.d.ts

@@ -0,0 +1,67 @@
+import React, { type ButtonHTMLAttributes, type ReactNode } from 'react';
+type ButtonOwnProps = {
+    /**
+     * Тип кнопки
+     * @default 'primary'
+     */
+    view?: 'primary' | 'secondary' | 'accent' | 'outlined' | 'transparent' | 'text';
+    /**
+     * Скругление кнопки
+     * @default 'rectangular'
+     */
+    shape?: 'rectangular' | 'rounded';
+    /**
+     * Размер кнопки
+     * @default 40
+     */
+    size?: 32 | 40 | 48 | 56 | 64 | 72;
+    /**
+     * Аддон слева от лейбла
+     */
+    leftAddon?: ReactNode;
+    /**
+     * Аддон справа от лейбла
+     */
+    rightAddon?: ReactNode;
+    /**
+     * Подпись под основным текстом
+     */
+    hint?: string;
+    /**
+     * Заставляет кнопку растянуться на ширину контейнера.
+     * @default false
+     */
+    block?: boolean;
+    /**
+     * Показать лоадер
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Айди для автотестов.
+     */
+    dataTestId?: string;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для label
+     */
+    labelClassName?: string;
+    /**
+     * Дополнительный класс для hint
+     */
+    hintClassName?: string;
+    /**
+     * Дополнительный класс для спиннера
+     */
+    spinnerClassName?: string;
+    /**
+     * Текст кнопки
+     */
+    children?: ReactNode;
+};
+export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & ButtonOwnProps;
+export declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & ButtonOwnProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/components/Button/button.js

@@ -0,0 +1,88 @@
+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 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)=>{
+    const [loaderTimePassed, setLoaderTimePassed] = useState(true);
+    const timerId = useRef(0);
+    const showLoader = loading || !loaderTimePassed;
+    const showHint = hint && [
+        56,
+        64,
+        72
+    ].includes(size);
+    const { disabled, type = 'button', ...restButtonProps } = restProps;
+    const buttonChildren = /*#__PURE__*/ jsxs(react.Fragment, {
+        children: [
+            leftAddon && /*#__PURE__*/ jsx("span", {
+                className: index_module.addons,
+                children: leftAddon
+            }),
+            children && /*#__PURE__*/ jsxs("span", {
+                className: classnames(index_module.label, labelClassName, {
+                    [index_module.stretchText]: !(leftAddon || rightAddon)
+                }),
+                children: [
+                    children,
+                    showHint && /*#__PURE__*/ jsx("span", {
+                        className: classnames(index_module.hint, colors_module.hint, hintClassName),
+                        children: hint
+                    })
+                ]
+            }),
+            showLoader && /*#__PURE__*/ jsx(Spinner, {
+                size: 24,
+                dataTestId: dataTestId ? `${dataTestId}-loader` : void 0,
+                visible: true,
+                className: classnames(index_module.loader, colors_module.loader, spinnerClassName)
+            }),
+            rightAddon && /*#__PURE__*/ jsx("span", {
+                className: index_module.addons,
+                children: rightAddon
+            })
+        ]
+    });
+    useEffect(()=>{
+        if (loading) {
+            window.clearTimeout(timerId.current);
+            setLoaderTimePassed(false);
+            timerId.current = window.setTimeout(()=>{
+                setLoaderTimePassed(true);
+            }, 500);
+        }
+    }, [
+        loading
+    ]);
+    useEffect(()=>()=>{
+            window.clearTimeout(timerId.current);
+        }, []);
+    const handleClick = (e)=>{
+        if (disabled || showLoader) {
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+        }
+        onClick?.(e);
+    };
+    return /*#__PURE__*/ jsx("button", {
+        ...restButtonProps,
+        className: classnames(index_module.component, index_module[view], index_module[`size-${size}`], index_module[shape], colors_module.component, colors_module[view], {
+            [index_module.block]: block,
+            [index_module.loading]: showLoader,
+            [index_module.withRightAddon]: Boolean(rightAddon),
+            [index_module.withLeftAddon]: Boolean(leftAddon),
+            [colors_module.loading]: showLoader
+        }, className),
+        "data-test-id": dataTestId,
+        type: type,
+        disabled: disabled || showLoader,
+        "aria-busy": showLoader,
+        onClick: handleClick,
+        ref: ref,
+        children: buttonChildren
+    });
+});
+Button.displayName = 'Button';
+export { Button };

package/dist/components/Button/colors.module.js

@@ -0,0 +1,14 @@
+import "./colors_module.css";
+const colors_module = {
+    primary: "primary-jF1frT",
+    secondary: "secondary-em6CEW",
+    accent: "accent-cr9M8g",
+    transparent: "transparent-osSlaN",
+    text: "text-fLOhKS",
+    loader: "loader-wrwZSN",
+    hint: "hint-JAXcv5",
+    outlined: "outlined-xzRrKO",
+    component: "component-GmKJmC",
+    loading: "loading-LzTYPE"
+};
+export default colors_module;

package/dist/components/Button/colors_module.css

@@ -0,0 +1,164 @@
+@import "./vars.css";
+
+.primary-jF1frT, .secondary-em6CEW, .accent-cr9M8g, .transparent-osSlaN, .text-fLOhKS {
+  box-shadow: none;
+}
+
+.primary-jF1frT {
+  color: var(--button-inverse-color);
+  background-color: var(--button-primary-background-color);
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--button-primary-hover-background-color);
+    }
+  }
+
+  &:active {
+    background-color: var(--button-primary-active-background-color);
+  }
+
+  & > .loader-wrwZSN {
+    color: var(--button-inverse-color);
+  }
+
+  &:not([disabled]) .hint-JAXcv5 {
+    color: var(--button-inverse-hint-color);
+  }
+}
+
+.secondary-em6CEW {
+  color: var(--button-default-color);
+  background-color: var(--button-secondary-background-color);
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--button-secondary-hover-background-color);
+    }
+  }
+
+  &:active {
+    background-color: var(--button-secondary-active-background-color);
+  }
+
+  & > .loader-wrwZSN {
+    color: var(--button-default-color);
+  }
+
+  &:not([disabled]) .hint-JAXcv5 {
+    color: var(--button-hint-color);
+  }
+}
+
+.accent-cr9M8g {
+  color: var(--button-inverse-color);
+  background-color: var(--button-accent-background-color);
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--button-accent-hover-background-color);
+    }
+  }
+
+  &:active {
+    background-color: var(--button-accent-active-background-color);
+  }
+
+  & > .loader-wrwZSN {
+    color: var(--button-inverse-color);
+  }
+
+  &:not([disabled]) .hint-JAXcv5 {
+    color: var(--button-inverse-hint-color);
+  }
+}
+
+.outlined-xzRrKO {
+  color: var(--button-default-color);
+  box-shadow: inset 0 0 0 1px var(--button-primary-background-color);
+  background: none;
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--button-subtle-hover-background-color);
+      box-shadow: inset 0 0 0 1px var(--button-primary-hover-background-color);
+    }
+  }
+
+  &:active {
+    background-color: var(--button-subtle-active-background-color);
+    box-shadow: inset 0 0 0 1px var(--button-primary-active-background-color);
+  }
+
+  & > .loader-wrwZSN {
+    color: var(--button-default-color);
+  }
+
+  &:not([disabled]) .hint-JAXcv5 {
+    color: var(--button-hint-color);
+  }
+}
+
+.transparent-osSlaN {
+  color: var(--button-default-color);
+  background-color: var(--button-transparent-background-color);
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--button-subtle-hover-background-color);
+    }
+  }
+
+  &:active {
+    background-color: var(--button-subtle-active-background-color);
+  }
+
+  & > .loader-wrwZSN {
+    color: var(--button-default-color);
+  }
+
+  &:not([disabled]) .hint-JAXcv5 {
+    color: var(--button-hint-color);
+  }
+}
+
+.text-fLOhKS {
+  background-color: var(--button-transparent-background-color);
+  color: var(--button-default-color);
+
+  @media (hover: hover) {
+    &:hover {
+      color: var(--button-text-hover-color);
+    }
+  }
+
+  &:active {
+    color: var(--button-text-active-color);
+  }
+
+  & > .loader-wrwZSN {
+    color: var(--button-default-color);
+  }
+
+  &:not([disabled]) .hint-JAXcv5 {
+    color: var(--button-hint-color);
+  }
+}
+
+.component-GmKJmC[disabled] {
+  &:not(.loading-LzTYPE) {
+    background-color: var(--button-disabled-background-color);
+    color: var(--button-disabled-color);
+    box-shadow: none;
+
+    &.hint-JAXcv5 {
+      color: var(--button-disabled-hint-color);
+    }
+  }
+
+  &.transparent-osSlaN, &.text-fLOhKS {
+    background-color: var(--button-transparent-background-color);
+    color: var(--button-disabled-color);
+  }
+}
+

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

@@ -0,0 +1,2 @@
+export { Button } from './button.js';
+export type { ButtonProps } from './button.js';

package/dist/components/Button/index.js

@@ -0,0 +1 @@
+export { Button } from "./button.js";

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

@@ -0,0 +1,30 @@
+import "./index_module.css";
+const index_module = {
+    component: "component-vxc0gC",
+    "size-32": "size-32-oD8MDp",
+    size32: "size-32-oD8MDp",
+    "size-40": "size-40-Pu2_h6",
+    size40: "size-40-Pu2_h6",
+    "size-48": "size-48-U3XIYx",
+    size48: "size-48-U3XIYx",
+    "size-56": "size-56-P_94sz",
+    size56: "size-56-P_94sz",
+    "size-64": "size-64-ZlQLt3",
+    size64: "size-64-ZlQLt3",
+    "size-72": "size-72-zkSrcs",
+    size72: "size-72-zkSrcs",
+    withRightAddon: "withRightAddon-TNcFTm",
+    text: "text-Ifdq0q",
+    withLeftAddon: "withLeftAddon-N3YDHw",
+    addons: "addons-NxGsiY",
+    block: "block-xREK1A",
+    rectangular: "rectangular-PFbww7",
+    rounded: "rounded-kQqesg",
+    loading: "loading-DPEeSl",
+    label: "label-gwmTIK",
+    stretchText: "stretchText-Nm2RYn",
+    hint: "hint-AFu_zz",
+    loader: "loader-BRksFP",
+    transparent: "transparent-w7vhL3"
+};
+export default index_module;

package/dist/components/Button/index_module.css

@@ -0,0 +1,242 @@
+@import "./vars.css";
+
+.component-vxc0gC {
+  box-sizing: border-box;
+  vertical-align: middle;
+  width: fit-content;
+  font-family: var(--font-ubuntu, "Ubuntu", sans-serif);
+  font-size: var(--size-16, 16px);
+  text-align: center;
+  margin: var(--size-0, 0px);
+  padding: var(--size-0, 0px) var(--size-24, 24px);
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+  border: none;
+  outline: none;
+  flex-flow: row;
+  justify-content: center;
+  align-items: center;
+  text-decoration: none;
+  transition: background-color .1s ease-in-out, color .1s ease-in-out, box-shadow .1s ease-in-out;
+  display: inline-flex;
+  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;
+  padding: var(--size-0, 0px) var(--size-16, 16px);
+}
+
+.size-40-Pu2_h6 {
+  min-width: 88px;
+  min-height: 40px;
+  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;
+  padding: var(--size-0, 0px) var(--size-24, 24px);
+}
+
+.size-56-P_94sz {
+  min-width: 128px;
+  min-height: 56px;
+  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;
+  padding: var(--size-0, 0px) var(--size-32, 32px);
+}
+
+.size-72-zkSrcs {
+  min-width: 168px;
+  min-height: 72px;
+  padding: var(--size-0, 0px) var(--size-36, 36px);
+}
+
+.withRightAddon-TNcFTm {
+  &.size-32-oD8MDp {
+    padding-right: var(--size-12, 12px);
+  }
+
+  &.size-40-Pu2_h6 {
+    padding-right: var(--size-16, 16px);
+  }
+
+  &.size-48-U3XIYx {
+    padding-right: var(--size-20, 20px);
+  }
+
+  &.size-56-P_94sz {
+    padding-right: var(--size-24, 24px);
+  }
+
+  &.size-64-ZlQLt3 {
+    padding-right: var(--size-28, 28px);
+  }
+
+  &.size-72-zkSrcs {
+    padding-right: var(--size-32, 32px);
+  }
+
+  &.text-Ifdq0q {
+    padding-right: var(--size-0, 0px);
+  }
+}
+
+.withLeftAddon-N3YDHw {
+  &.size-32-oD8MDp {
+    padding-left: var(--size-12, 12px);
+  }
+
+  &.size-40-Pu2_h6 {
+    padding-left: var(--size-16, 16px);
+  }
+
+  &.size-48-U3XIYx {
+    padding-left: var(--size-20, 20px);
+  }
+
+  &.size-56-P_94sz {
+    padding-left: var(--size-24, 24px);
+  }
+
+  &.size-64-ZlQLt3 {
+    padding-left: var(--size-28, 28px);
+  }
+
+  &.size-72-zkSrcs {
+    padding-left: var(--size-32, 32px);
+  }
+
+  &.text-Ifdq0q {
+    padding-left: var(--size-0, 0px);
+  }
+}
+
+.text-Ifdq0q {
+  min-width: 0;
+  min-height: 0;
+  padding: var(--size-0, 0px);
+  appearance: none;
+  border: none;
+
+  &.size-48-U3XIYx, &.size-56-P_94sz {
+    min-height: 24px;
+  }
+}
+
+.size-48-U3XIYx, .size-56-P_94sz {
+  & .addons-NxGsiY:first-child {
+    margin-right: var(--size-8, 8px);
+  }
+
+  & .addons-NxGsiY:last-child {
+    margin-left: var(--size-8, 8px);
+  }
+
+  & .addons-NxGsiY:only-child {
+    margin: var(--size-0, 0px);
+  }
+}
+
+.size-64-ZlQLt3, .size-72-zkSrcs {
+  & .addons-NxGsiY:first-child {
+    margin-right: var(--size-12, 12px);
+  }
+
+  & .addons-NxGsiY:last-child {
+    margin-left: var(--size-12, 12px);
+  }
+
+  & .addons-NxGsiY:only-child {
+    margin: var(--size-0, 0px);
+  }
+}
+
+.block-xREK1A {
+  width: 100%;
+  display: flex;
+}
+
+.rectangular-PFbww7 {
+  border-radius: var(--border-radius-8, 8px);
+}
+
+.rounded-kQqesg {
+  border-radius: var(--border-radius-pill, 99px);
+}
+
+.addons-NxGsiY {
+  margin: var(--size-0, 0px);
+  flex-shrink: 0;
+  align-items: center;
+  display: flex;
+
+  &:first-child {
+    margin-right: var(--size-6, 6px);
+  }
+
+  &:last-child {
+    margin-left: var(--size-6, 6px);
+  }
+
+  &:only-child {
+    margin: var(--size-0, 0px);
+  }
+}
+
+.loading-DPEeSl .label-gwmTIK, .loading-DPEeSl .addons-NxGsiY {
+  opacity: 0;
+}
+
+.stretchText-Nm2RYn {
+  flex-grow: 1;
+}
+
+.hint-AFu_zz {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 18px;
+  font-family: var(--font-primary, "Inter", sans-serif);
+  color: var(--button-hint-color);
+  display: block;
+}
+
+.loader-BRksFP {
+  left: var(--size-0, 0px);
+  right: var(--size-0, 0px);
+  margin: var(--size-0, 0px) auto;
+  position: absolute;
+}
+
+.transparent-w7vhL3 {
+  min-width: 0;
+}
+

package/dist/components/Button/vars.css

@@ -0,0 +1,24 @@
+:root {
+  --button-default-color: #1c1a18;
+  --button-inverse-color: #f5f3ec;
+  --button-hint-color: #1c1a1862;
+  --button-inverse-hint-color: #f5f3ec72;
+  --button-primary-background-color: #ff6b0a;
+  --button-primary-hover-background-color: #f05f00;
+  --button-primary-active-background-color: #d95300;
+  --button-secondary-background-color: #e0dbce;
+  --button-secondary-hover-background-color: #d5cdbc;
+  --button-secondary-active-background-color: #c8beaa;
+  --button-accent-background-color: #7967f2;
+  --button-accent-hover-background-color: #6c5ae6;
+  --button-accent-active-background-color: #5e4cd8;
+  --button-transparent-background-color: transparent;
+  --button-subtle-hover-background-color: #f2f3ea;
+  --button-subtle-active-background-color: #e5e7db;
+  --button-text-hover-color: #4a463f;
+  --button-text-active-color: #6a645a;
+  --button-disabled-background-color: #cfd1cb;
+  --button-disabled-color: #858981;
+  --button-disabled-hint-color: #9da099;
+}
+

package/dist/components/Spinner/colors.module.js

@@ -0,0 +1,5 @@
+import "./colors_module.css";
+const colors_module = {
+    component: "component-xRdHbz"
+};
+export default colors_module;

package/dist/components/Spinner/colors_module.css

@@ -0,0 +1,6 @@
+@import "./vars.css";
+
+.component-xRdHbz {
+  color: var(--spinner-default-color);
+}
+

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

@@ -0,0 +1,2 @@
+export { Spinner } from './spinner.js';
+export type { SpinnerProps } from './spinner.js';

package/dist/components/Spinner/index.js

@@ -0,0 +1 @@
+export { Spinner } from "./spinner.js";

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

@@ -0,0 +1,9 @@
+import "./index_module.css";
+const index_module = {
+    spinner: "spinner-KHk8mw",
+    spin_animation: "spin_animation-pow2iy",
+    spinAnimation: "spin_animation-pow2iy",
+    visible: "visible-wk34JZ",
+    gradient: "gradient-QKWB8G"
+};
+export default index_module;

package/dist/components/Spinner/index_module.css

@@ -0,0 +1,29 @@
+@import "./vars.css";
+
+.spinner-KHk8mw {
+  box-sizing: content-box;
+  animation: spin_animation-pow2iy var(--spinner-animation-duration) infinite
+        var(--spinner-animation-timing-function);
+  display: none;
+}
+
+.visible-wk34JZ {
+  display: var(--spinner-display-visible);
+  vertical-align: middle;
+}
+
+.gradient-QKWB8G {
+  width: 100%;
+  height: 100%;
+}
+
+@keyframes spin_animation-pow2iy {
+  from {
+    transform: rotate(0);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+

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

@@ -0,0 +1,7 @@
+import "./preset_module.css";
+const preset_module = {
+    preset16: "preset16-UI50gd",
+    preset24: "preset24-PPOWk6",
+    preset48: "preset48-Py1Pzz"
+};
+export default preset_module;

package/dist/components/Spinner/preset_module.css

@@ -0,0 +1,12 @@
+.preset16-UI50gd {
+  padding: 1px;
+}
+
+.preset24-PPOWk6 {
+  padding: var(--size-2, 2px);
+}
+
+.preset48-Py1Pzz {
+  padding: var(--size-4, 4px);
+}
+

package/dist/components/Spinner/spinner.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+export type SpinnerProps = {
+    /**
+     * Управление видимостью компонента
+     * @default false
+     */
+    visible?: boolean;
+    /**
+     * Размер спиннера
+     *
+     * @default 24
+     */
+    size?: 16 | 24 | 48;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Идентификатор компонента в DOM
+     */
+    id?: string;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Дополнительные инлайн стили для cпиннера
+     */
+    style?: React.CSSProperties;
+};
+export declare const Spinner: ({ visible, size, className, id, dataTestId, style }: SpinnerProps) => React.JSX.Element;

package/dist/components/Spinner/spinner.js

@@ -0,0 +1,80 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import classnames from "classnames";
+import { useId } from "react";
+import colors_module from "./colors.module.js";
+import index_module from "./index.module.js";
+import preset_module from "./preset.module.js";
+const PRESET_CONFIG = {
+    16: [
+        2,
+        14,
+        'preset16'
+    ],
+    24: [
+        2,
+        20,
+        'preset24'
+    ],
+    48: [
+        4,
+        40,
+        'preset48'
+    ]
+};
+const Spinner = ({ visible, size = 24, className, id, dataTestId, style })=>{
+    const [lineWidth, presetSize, styleKey] = PRESET_CONFIG[size];
+    const presetClassname = preset_module[styleKey];
+    const uniqId = useId();
+    const radius = presetSize / 2 - lineWidth / 2;
+    const rotationAngle = Math.ceil(180 * Math.asin(lineWidth / 2 / radius) / Math.PI);
+    const gap = 90;
+    const pathLength = 360;
+    const strokeDasharray = `${pathLength - gap - rotationAngle} ${gap + rotationAngle}`;
+    const gradient = `conic-gradient(from ${rotationAngle}deg, transparent ${gap - 2 * rotationAngle}deg, currentColor)`;
+    return /*#__PURE__*/ jsxs("svg", {
+        "aria-hidden": "true",
+        viewBox: `0 0 ${presetSize} ${presetSize}`,
+        style: {
+            ...style,
+            height: presetSize,
+            width: presetSize
+        },
+        className: classnames(index_module.spinner, colors_module.component, presetClassname, className, {
+            [index_module.visible]: visible
+        }),
+        "data-test-id": dataTestId,
+        id: id,
+        children: [
+            /*#__PURE__*/ jsx("defs", {
+                children: /*#__PURE__*/ jsx("mask", {
+                    id: uniqId,
+                    children: /*#__PURE__*/ jsx("circle", {
+                        cx: "50%",
+                        cy: "50%",
+                        r: radius,
+                        strokeWidth: lineWidth,
+                        strokeLinecap: "round",
+                        stroke: "#fff",
+                        strokeDashoffset: -rotationAngle,
+                        strokeDasharray: strokeDasharray,
+                        pathLength: pathLength
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsx("foreignObject", {
+                x: "0",
+                y: "0",
+                width: presetSize,
+                height: presetSize,
+                mask: `url(#${uniqId})`,
+                children: /*#__PURE__*/ jsx("div", {
+                    className: index_module.gradient,
+                    style: {
+                        backgroundImage: gradient
+                    }
+                })
+            })
+        ]
+    });
+};
+export { Spinner };

package/dist/components/Spinner/vars.css

@@ -0,0 +1,7 @@
+:root {
+  --spinner-display-visible: inline-block;
+  --spinner-animation-duration: .8s;
+  --spinner-animation-timing-function: linear;
+  --spinner-default-color: #030306e0;
+}
+

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { Button } from './components/Button/index.js';
+export type { ButtonProps } from './components/Button/index.js';
+export { Spinner } from './components/Spinner/index.js';
+export type { SpinnerProps } from './components/Spinner/index.js';

package/dist/index.js

@@ -0,0 +1,2 @@
+export { Button } from "./components/Button/index.js";
+export { Spinner } from "./components/Spinner/index.js";

package/package.json

@@ -1,6 +1,84 @@
 {
-  "name": "@koslibs/components",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+    "name": "@koslibs/components",
+    "version": "1.0.0",
+    "description": "Shared React components for koslibs projects",
+    "type": "module",
+    "main": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.js"
+        },
+        "./*": {
+            "types": "./dist/components/*/index.d.ts",
+            "import": "./dist/components/*/index.js"
+        },
+        "./package.json": "./package.json"
+    },
+    "files": [
+        "dist",
+        "README.md",
+        "CHANGELOG.md"
+    ],
+    "sideEffects": [
+        "**/*.css"
+    ],
+    "engines": {
+        "node": ">=24.13.0"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/koslibs/components.git"
+    },
+    "homepage": "https://koslibs.github.io/components/",
+    "bugs": {
+        "url": "https://github.com/koslibs/components/issues"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "scripts": {
+        "start": "koslibs-builder lib:start",
+        "watch": "koslibs-builder lib:watch",
+        "build": "koslibs-builder lib:build",
+        "typecheck": "koslibs-builder lib:typecheck",
+        "lint": "koslibs-lint lint",
+        "lint:fix": "koslibs-lint lint:fix",
+        "format": "koslibs-lint format",
+        "format:check": "koslibs-lint format:check",
+        "storybook": "koslibs-builder storybook:start",
+        "build-storybook": "koslibs-builder storybook:build",
+        "test": "npm run test:unit && npm run test:imports",
+        "test:unit": "koslibs-builder lib:test",
+        "test:imports": "node --test tests/component-imports.test.mjs",
+        "prepack": "koslibs-builder lib:build",
+        "changeset": "koslibs-release add",
+        "changeset:check": "koslibs-release check",
+        "version-package": "koslibs-release version",
+        "release": "koslibs-release publish",
+        "prepare": "koslibs-release hooks:install"
+    },
+    "prettier": "@koslibs/configs/prettier",
+    "commitlint": {
+        "extends": [
+            "@koslibs/configs/commitlint"
+        ]
+    },
+    "devDependencies": {
+        "@koslibs/builder": "^1.0.0",
+        "@koslibs/configs": "^1.0.0",
+        "@types/node": "^24.19.0",
+        "@types/react": "^18.3.18",
+        "@types/react-dom": "^18.3.5",
+        "react": "18.3.1",
+        "react-dom": "18.3.1"
+    },
+    "peerDependencies": {
+        "react": "^18.3.1 || ^19.0.0",
+        "react-dom": "^18.3.1 || ^19.0.0"
+    },
+    "dependencies": {
+        "classnames": "2.5.1"
+    }
+}