@ryuzaki13/react-foundation-ui 1.0.7 → 1.0.11

package/src/styles/config/_index.scss

@@ -2,9 +2,23 @@
 @use "sass:meta";
 
 $root-token-defaults: (
-	"--font-family": ("72", sans-serif),
+	"--font-family": (sans-serif),
+	"--font-family-base": var(--font-family),
+	"--font-family-mono": (monospace),
+
+	"--font-size-xs": 0.75em,
+	"--font-size-sm": 0.875em,
+	"--font-size-md": 1em,
+	"--font-size-lg": 1.25em,
+	"--font-size-xl": 1.5em,
+
 	"--letter-spacing": 0em,
 	"--word-spacing": 0em,
+	"--line-height": 1.2,
+	"--text-height": calc(1em * var(--line-height)),
+	"--line-height-offset": 2px,
+	"--paragraph-margin": 1em,
+
 	"--border-width": 1px,
 	"--stroke-width": 1px,
 	"--focus-width": 2px,
@@ -17,28 +31,20 @@ $root-token-defaults: (
 	"--radius-md": 10px,
 	"--radius-lg": 20px,
 	"--radius-xl": 30px,
-	"--space-xxs": 2px,
+
 	"--space-xs": 3px,
 	"--space-sm": 5px,
 	"--space-md": 10px,
 	"--space-lg": 20px,
 	"--space-xl": 30px,
 	"--space-xxl": 40px,
-	"--font-family-base": var(--font-family),
-	"--font-family-mono": ("72-mono", monospace),
-	"--font-size-xs": 0.75em,
-	"--font-size-sm": 0.875em,
-	"--font-size-md": 1em,
-	"--font-size-lg": 1.25em,
-	"--font-size-xl": 1.5em,
-	"--line-height": 1.2,
-	"--text-height": calc(1em * var(--line-height)),
-	"--line-height-offset": 2px,
+
 	"--ui-width-xs": 128px,
 	"--ui-width-sm": 176px,
 	"--ui-width-md": 224px,
 	"--ui-width-lg": 272px,
 	"--ui-width-xl": 320px,
+
 	"--control-height-base": 16px,
 	"--control-height": calc(var(--control-height-base) + var(--line-height-offset)),
 	"--width-add": calc(10 * var(--letter-spacing) + 2 * var(--word-spacing)),
@@ -47,12 +53,7 @@ $root-token-defaults: (
 	"--transition-slow": 0.6s,
 	"--animation-1s": 1s,
 	"--animation-2s": 2s,
-	"--paragraph-margin": 1em,
-	"--brand-primary": var(--content-accent),
-	"--surface-primary": var(--surface-0),
-	"--surface-secondary": var(--surface-1),
-	"--text-accent": var(--content-accent),
-	"--text-secondary": var(--content-2),
+
 	"--z-main-menu": 10,
 	"--z-fullscreen-portal": 90,
 	"--z-modal-root": 100,
@@ -84,7 +85,6 @@ $retina-token-defaults: (
 	"--radius-md": 0.625em,
 	"--radius-lg": 1.25em,
 	"--radius-xl": 1.875em,
-	"--space-xxs": 0.125em,
 	"--space-xs": 0.1875em,
 	"--space-sm": 0.3125em,
 	"--space-md": 0.625em,
@@ -197,15 +197,7 @@ $light-theme-defaults: (
 		"--shadow-xs": 0 0 0.25em rgba(0, 0, 0, 0.15),
 		"--shadow-sm": 0 0 0.25em rgba(0, 0, 0, 0.25),
 		"--shadow-md": 0 0 0.5em rgba(0, 0, 0, 0.25),
-		"--shadow-lg": 0 0 1em rgba(0, 0, 0, 0.25),
-		"--file-pdf": #d9534f,
-		"--file-word": #2a5699,
-		"--file-excel": #217346,
-		"--file-powerpoint": #d94a00,
-		"--file-image": #8e44ad,
-		"--file-archive": #34495e,
-		"--file-database": #6c757d,
-		"--file-graphics": #5d6d7e
+		"--shadow-lg": 0 0 1em rgba(0, 0, 0, 0.25)
 	),
 	accent: (
 		l: 0.55,
@@ -290,15 +282,7 @@ $dark-theme-defaults: (
 		"--shadow-xs": 0 0 0.25em rgba(0, 0, 0, 0.15),
 		"--shadow-sm": 0 0 0.25em rgba(0, 0, 0, 0.25),
 		"--shadow-md": 0 0 0.5em rgba(0, 0, 0, 0.25),
-		"--shadow-lg": 0 0 1em rgba(0, 0, 0, 0.25),
-		"--file-pdf": #ff6b6b,
-		"--file-word": #5c8ed8,
-		"--file-excel": #33b679,
-		"--file-powerpoint": #ff7b2c,
-		"--file-image": #c084e4,
-		"--file-archive": #5d6d7e,
-		"--file-database": #adb5bd,
-		"--file-graphics": #95a5a6
+		"--shadow-lg": 0 0 1em rgba(0, 0, 0, 0.25)
 	),
 	accent: (
 		l: 0.7,

package/src/styles/themes/dark/_default.scss

@@ -5,20 +5,3 @@
 	@include stylesConfig.emit-declarations(stylesConfig.theme-tokens(stylesConfig.$dark-theme));
 	@include theme.generated-theme-palette(stylesConfig.$dark-theme, dark);
 }
-
-/* Для WebKit браузеров (Chrome, Safari, Edge) */
-input:-webkit-autofill {
-	-webkit-text-fill-color: var(--content-0) !important;
-	-webkit-box-shadow: 0 0 0 1000px var(--surface-0) inset !important;
-}
-
-/* Для Firefox */
-input:autofill {
-	background: var(--surface-0) !important;
-}
-
-/* Общие стили */
-// TODO: unused
-input.autofilled {
-	background: var(--surface-0) !important;
-}

package/storybook-static/assets/Badge-Cr7bAbxa.css

@@ -0,0 +1 @@
+.qBtmnH{color:var(--ui-color,var(--content-0));background-color:var(--ui-background,transparent);border:var(--border-width) solid var(--ui-border-color,transparent);border-radius:var(--ui-radius,var(--radius-sm));transition-property:border-color,color,background-color,opacity;transition-duration:var(--transition-fast);align-items:center;gap:var(--space-xs);max-width:100%;padding:0 var(--space-xs);font-variation-settings:"wght" 500;vertical-align:middle;font-weight:500;transition-timing-function:ease;display:inline-flex}.p-HsHY{pointer-events:none;-webkit-user-select:none;user-select:none}.u9tQAE{font-size:var(--font-size-xs)}.FRScRz{font-size:var(--font-size-sm)}.W13uQO{font-size:var(--font-size-md)}._3IRcM9{font-size:var(--font-size-lg)}.R3ybI7{font-size:var(--font-size-xl)}.DdWAaC{min-width:0}._5cXBQF{border-radius:var(--radius-xs);width:1.25em;height:1.25em;color:inherit;transition:color var(--transition-fast) ease, background-color var(--transition-fast) ease, scale var(--transition-fast) ease;background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:inline-flex}._5cXBQF:hover{background-color:var(--status-error-soft);color:var(--status-error-text);scale:1.1}._5cXBQF:focus-visible{outline:var(--focus-width) solid var(--focus-ring);outline-offset:var(--focus-offset)}._5cXBQF svg{display:block}

package/storybook-static/assets/Badge-Q8iX86Mn.js

@@ -0,0 +1,139 @@
+import{i as e}from"./preload-helper-B45gAKPr.js";import{E as t,a as n,d as r,f as i,l as a,m as o,n as s,p as c,r as l,u}from"./blocks-CwEU-ME1.js";import{t as d}from"./jsx-runtime-BBQGix-2.js";import{t as f}from"./mdx-react-shim-DnKFgFHy.js";import{Appearances as p,Basic as m,RemovableList as h,Sizes as g,Tones as _,n as v,t as y}from"./Badge.stories-BEMBzR2f.js";function b(e){let o={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...t(),...e.components};return(0,S.jsxs)(S.Fragment,{children:[(0,S.jsx)(a,{of:y,parameters:{atomicCanvas:!0,layout:`padded`,docs:{toc:!0}}}),`
+`,(0,S.jsx)(c,{children:`Badge`}),`
+`,(0,S.jsx)(i,{children:`Компактная текстовая метка для статусов, категорий, фильтров и коротких служебных пометок`}),`
+`,(0,S.jsx)(o.p,{children:`Badge подходит для коротких подписей, которые должны быстро читаться и не перегружать интерфейс:`}),`
+`,(0,S.jsxs)(o.ul,{children:[`
+`,(0,S.jsx)(o.li,{children:`статусы и состояния записи;`}),`
+`,(0,S.jsx)(o.li,{children:`выбранные фильтры и теги;`}),`
+`,(0,S.jsx)(o.li,{children:`служебные пометки рядом с полями, карточками и строками таблиц;`}),`
+`,(0,S.jsx)(o.li,{children:`компактные списки значений с возможностью удаления.`}),`
+`]}),`
+`,(0,S.jsxs)(o.p,{children:[`Компонент принимает только строковый `,(0,S.jsx)(o.code,{children:`children`}),`. Длинный текст автоматически ограничивается по ширине и сокращается через `,(0,S.jsx)(o.code,{children:`TextOverflow`}),`, поэтому Badge лучше использовать для коротких и однозначных формулировок.`]}),`
+`,(0,S.jsx)(o.h2,{id:`основной-сценарий`,children:`Основной сценарий`}),`
+`,(0,S.jsx)(u,{}),`
+`,(0,S.jsx)(o.pre,{children:(0,S.jsx)(o.code,{className:`language-tsx`,children:`import { Badge } from "@/shared/ui";
+
+export function Example() {
+	return (
+		<Badge tone="info" appearance="solid">
+			Новый
+		</Badge>
+	);
+}
+`})}),`
+`,(0,S.jsx)(n,{of:m}),`
+`,(0,S.jsx)(o.h2,{id:`визуальная-схема`,children:`Визуальная схема`}),`
+`,(0,S.jsx)(o.p,{children:`В компоненте есть два уровня настройки:`}),`
+`,(0,S.jsxs)(o.ul,{children:[`
+`,(0,S.jsxs)(o.li,{children:[(0,S.jsx)(o.code,{children:`tone`}),` задает семантику: `,(0,S.jsx)(o.code,{children:`neutral`}),`, `,(0,S.jsx)(o.code,{children:`success`}),`, `,(0,S.jsx)(o.code,{children:`warning`}),`, `,(0,S.jsx)(o.code,{children:`error`}),`, `,(0,S.jsx)(o.code,{children:`info`}),`;`]}),`
+`,(0,S.jsxs)(o.li,{children:[(0,S.jsx)(o.code,{children:`appearance`}),` задает форму отображения: `,(0,S.jsx)(o.code,{children:`solid`}),`, `,(0,S.jsx)(o.code,{children:`outline`}),`, `,(0,S.jsx)(o.code,{children:`ghost`}),`, `,(0,S.jsx)(o.code,{children:`transparent`}),`.`]}),`
+`]}),`
+`,(0,S.jsx)(o.p,{children:`Если схема не передана полностью, компонент достраивает ее сам:`}),`
+`,(0,S.jsxs)(o.ul,{children:[`
+`,(0,S.jsxs)(o.li,{children:[`без пропсов будет использован `,(0,S.jsx)(o.code,{children:`neutral + outline`}),`;`]}),`
+`,(0,S.jsxs)(o.li,{children:[`если задан цветной `,(0,S.jsx)(o.code,{children:`tone`}),`, но не задан `,(0,S.jsx)(o.code,{children:`appearance`}),`, по умолчанию используется `,(0,S.jsx)(o.code,{children:`solid`}),`;`]}),`
+`,(0,S.jsxs)(o.li,{children:[`проп `,(0,S.jsx)(o.code,{children:`color`}),` поддерживается только для обратной совместимости и считается устаревшим.`]}),`
+`]}),`
+`,(0,S.jsx)(o.h3,{id:`тоны`,children:`Тоны`}),`
+`,(0,S.jsx)(l,{of:_}),`
+`,(0,S.jsx)(o.pre,{children:(0,S.jsx)(o.code,{className:`language-tsx`,children:`import { Badge, BadgeList } from "@/shared/ui";
+
+export function StatusBadges() {
+	return (
+		<BadgeList>
+			<Badge tone="neutral" appearance="outline">
+				Черновик
+			</Badge>
+			<Badge tone="success" appearance="solid">
+				Успешно
+			</Badge>
+			<Badge tone="warning" appearance="solid">
+				Внимание
+			</Badge>
+			<Badge tone="error" appearance="solid">
+				Ошибка
+			</Badge>
+			<Badge tone="info" appearance="solid">
+				Информация
+			</Badge>
+		</BadgeList>
+	);
+}
+`})}),`
+`,(0,S.jsx)(o.h3,{id:`варианты-отображения`,children:`Варианты отображения`}),`
+`,(0,S.jsx)(l,{of:p}),`
+`,(0,S.jsx)(o.pre,{children:(0,S.jsx)(o.code,{className:`language-tsx`,children:`import { Badge, BadgeList } from "@/shared/ui";
+
+export function AppearanceBadges() {
+	return (
+		<BadgeList>
+			<Badge tone="neutral" appearance="solid">
+				Solid
+			</Badge>
+			<Badge tone="neutral" appearance="outline">
+				Outline
+			</Badge>
+			<Badge tone="info" appearance="ghost">
+				Ghost
+			</Badge>
+			<Badge tone="warning" appearance="transparent">
+				Transparent
+			</Badge>
+		</BadgeList>
+	);
+}
+`})}),`
+`,(0,S.jsx)(o.h2,{id:`размеры`,children:`Размеры`}),`
+`,(0,S.jsxs)(o.p,{children:[`Badge поддерживает размеры от `,(0,S.jsx)(o.code,{children:`xs`}),` до `,(0,S.jsx)(o.code,{children:`xl`}),`. На практике чаще всего используются `,(0,S.jsx)(o.code,{children:`sm`}),` и `,(0,S.jsx)(o.code,{children:`md`}),`: они лучше всего подходят для строк таблиц, панелей фильтрации и карточек.`]}),`
+`,(0,S.jsx)(l,{of:g}),`
+`,(0,S.jsx)(o.pre,{children:(0,S.jsx)(o.code,{className:`language-tsx`,children:`import { Badge, BadgeList } from "@/shared/ui";
+
+export function SizeBadges() {
+	return (
+		<BadgeList>
+			<Badge size="xs">XS</Badge>
+			<Badge size="sm">SM</Badge>
+			<Badge size="md">MD</Badge>
+			<Badge size="lg">LG</Badge>
+			<Badge size="xl">XL</Badge>
+		</BadgeList>
+	);
+}
+`})}),`
+`,(0,S.jsx)(o.h2,{id:`списки-фильтров-и-выбранных-значений`,children:`Списки фильтров и выбранных значений`}),`
+`,(0,S.jsxs)(o.p,{children:[`Для набора бейджей в одну строку или в несколько переносимых строк есть вспомогательный контейнер `,(0,S.jsx)(o.code,{children:`BadgeList`}),`. Это самый частый сценарий в проекте: выбранные фильтры, категории, теги и активные параметры поиска.`]}),`
+`,(0,S.jsx)(l,{of:h}),`
+`,(0,S.jsx)(o.pre,{children:(0,S.jsx)(o.code,{className:`language-tsx`,children:`import { useState } from "react";
+
+import { Badge, BadgeList } from "@/shared/ui";
+
+export function SelectedFilters() {
+	const [items, setItems] = useState(["Фильтр A", "Фильтр B", "Фильтр C"]);
+
+	return (
+		<BadgeList>
+			{items.map((item) => (
+				<Badge
+					key={item}
+					tone="info"
+					appearance="outline"
+					onRemove={() => setItems((prev) => prev.filter((value) => value !== item))}>
+					{item}
+				</Badge>
+			))}
+		</BadgeList>
+	);
+}
+`})}),`
+`,(0,S.jsx)(o.h2,{id:`поведение-и-ограничения`,children:`Поведение и ограничения`}),`
+`,(0,S.jsxs)(o.ul,{children:[`
+`,(0,S.jsxs)(o.li,{children:[(0,S.jsx)(o.code,{children:`children`}),` должен быть строкой, а не произвольным JSX.`]}),`
+`,(0,S.jsxs)(o.li,{children:[`Без `,(0,S.jsx)(o.code,{children:`onRemove`}),` бейдж считается пассивным и не участвует во взаимодействии мышью.`]}),`
+`,(0,S.jsxs)(o.li,{children:[`При передаче `,(0,S.jsx)(o.code,{children:`onRemove`}),` справа появляется встроенная кнопка удаления.`]}),`
+`,(0,S.jsx)(o.li,{children:`Для длинных значений лучше использовать короткий видимый текст, потому что Badge рассчитан на компактные подписи, а не на развернутые описания.`}),`
+`,(0,S.jsxs)(o.li,{children:[`Для новых сценариев рекомендуется использовать `,(0,S.jsx)(o.code,{children:`tone`}),` и `,(0,S.jsx)(o.code,{children:`appearance`}),`, а не `,(0,S.jsx)(o.code,{children:`color`}),`.`]}),`
+`]}),`
+`,(0,S.jsx)(o.h2,{id:`api`,children:`API`}),`
+`,(0,S.jsx)(s,{of:y}),`
+`,(0,S.jsx)(o.h2,{id:`все-сторисы`,children:`Все сторисы`}),`
+`,(0,S.jsx)(r,{includePrimary:!1})]})}function x(e={}){let{wrapper:n}={...t(),...e.components};return n?(0,S.jsx)(n,{...e,children:(0,S.jsx)(b,{...e})}):b(e)}var S;e((()=>{S=d(),f(),o(),v()}))();export{x as default};

package/storybook-static/assets/Badge.stories-BEMBzR2f.js

@@ -0,0 +1,51 @@
+import{a as e,c as t,i as n}from"./preload-helper-B45gAKPr.js";import{C as r}from"./iframe-SfMJGCsn.js";import{t as i}from"./jsx-runtime-BBQGix-2.js";import{a,i as o}from"./utils-CReRlw17.js";import{n as s,t as c}from"./lucide-react-CK2oyDtF.js";import{n as l,t as u}from"./text-BxA8yj6Z.js";import{i as d,n as f,r as p,t as m}from"./uiClasses-CZ_HVS3Y.js";import{o as h}from"./Flex-C_VnI9xY.js";import{t as g}from"./flex-DuYzsEBQ.js";var _,v,y,b,x,S,C,w,T,E,D=n((()=>{_=`qBtmnH`,v=`p-HsHY`,y=`u9tQAE`,b=`FRScRz`,x=`W13uQO`,S=`_3IRcM9`,C=`R3ybI7`,w=`DdWAaC`,T=`_5cXBQF`,E={badge:_,passive:v,sizeXs:y,sizeSm:b,sizeMd:x,sizeLg:S,sizeXl:C,content:w,removeButton:T}}));function O({children:e,size:t=`sm`,tone:n,appearance:r,className:i,onRemove:o}){let c=n??`neutral`,u=d({tone:n,appearance:r,fallbackTone:c,fallbackAppearance:c===`neutral`?`outline`:`solid`});return(0,k.jsxs)(`div`,{className:a(E.badge,A[t],f(u.tone),m(u.appearance),!o&&E.passive,i),children:[(0,k.jsx)(l,{maxChar:25,placement:`top`,block:!0,textWrapProps:{className:E.content},children:String(e)}),o&&(0,k.jsx)(`button`,{type:`button`,onClick:o,className:E.removeButton,"aria-label":`Удалить бейдж`,"data-ui":`badge-remove-button`,"data-action":`remove-badge`,children:(0,k.jsx)(s,{})})]})}var k,A,j=n((()=>{o(),c(),u(),p(),D(),k=i(),A={xs:E.sizeXs,sm:E.sizeSm,md:E.sizeMd,lg:E.sizeLg,xl:E.sizeXl},O.__docgenInfo={description:`Компактный индикатор для статусов, категорий и коротких служебных меток.`,methods:[],displayName:`Badge`,props:{children:{required:!0,tsType:{name:`union`,raw:`string | number`,elements:[{name:`string`},{name:`number`}]},description:``},size:{required:!1,tsType:{name:`union`,raw:`"xs" | "sm" | "md" | "lg" | "xl"`,elements:[{name:`literal`,value:`"xs"`},{name:`literal`,value:`"sm"`},{name:`literal`,value:`"md"`},{name:`literal`,value:`"lg"`},{name:`literal`,value:`"xl"`}]},description:``,defaultValue:{value:`"sm"`,computed:!1}},tone:{required:!1,tsType:{name:`union`,raw:`"neutral" | "error" | "warning" | "success" | "info"`,elements:[{name:`literal`,value:`"neutral"`},{name:`literal`,value:`"error"`},{name:`literal`,value:`"warning"`},{name:`literal`,value:`"success"`},{name:`literal`,value:`"info"`}]},description:``},appearance:{required:!1,tsType:{name:`union`,raw:`"solid" | "outline" | "ghost" | "transparent"`,elements:[{name:`literal`,value:`"solid"`},{name:`literal`,value:`"outline"`},{name:`literal`,value:`"ghost"`},{name:`literal`,value:`"transparent"`}]},description:``},className:{required:!1,tsType:{name:`string`},description:``},onRemove:{required:!1,tsType:{name:`signature`,type:`function`,raw:`() => void`,signature:{arguments:[],return:{name:`void`}}},description:``}}}}));function M({children:e}){return(0,P.jsx)(h,{inline:!0,wrap:!0,gap:`sm`,align:`baseline`,children:N.Children.map(e,(e,t)=>(0,P.jsx)(N.Fragment,{children:e},t))})}var N,P,F=n((()=>{N=t(r(),1),g(),P=i(),M.__docgenInfo={description:"Контейнер для группы `Badge`, который выстраивает элементы в единый список с предсказуемыми отступами. Используется для компактного вывода набора меток или фильтров.",methods:[],displayName:`BadgeList`,props:{children:{required:!0,tsType:{name:`Array`,elements:[{name:`ReactElement`,elements:[{name:`union`,raw:`typeof Badge | null | undefined | false`,elements:[{name:`Badge`},{name:`null`},{name:`undefined`},{name:`literal`,value:`false`}]}],raw:`ReactElement<typeof Badge | null | undefined | false>`}],raw:`ReactElement<typeof Badge | null | undefined | false>[]`},description:``}}}})),I=e({Appearances:()=>H,Basic:()=>B,RemovableList:()=>W,Sizes:()=>U,Tones:()=>V,__namedExportsOrder:()=>G,default:()=>z}),L,R,z,B,V,H,U,W,G,K=n((()=>{L=t(r(),1),j(),F(),R=i(),z={title:`Shared/UI/Badge`,component:O,args:{children:`Новый`,size:`md`,tone:`info`,appearance:`solid`},parameters:{atomicCanvas:!0,layout:`padded`},argTypes:{children:{description:`Текст внутри бейджа.`,control:`text`},size:{description:`Размер бейджа.`,control:`inline-radio`,options:[`sm`,`md`,`lg`]},tone:{description:`Семантический тон бейджа.`,control:`inline-radio`,options:[`neutral`,`success`,`warning`,`error`,`info`]},appearance:{description:`Форма бейджа.`,control:`inline-radio`,options:[`solid`,`outline`,`ghost`,`transparent`]},onRemove:{description:`Показывает кнопку удаления и вызывает обработчик по клику.`,control:!1},className:{description:`Дополнительный CSS-класс контейнера.`,control:`text`}}},B={},V={render:()=>(0,R.jsxs)(M,{children:[(0,R.jsx)(O,{tone:`neutral`,appearance:`outline`,children:`Neutral`}),(0,R.jsx)(O,{tone:`success`,appearance:`solid`,children:`Успешно`}),(0,R.jsx)(O,{tone:`warning`,appearance:`solid`,children:`Внимание`}),(0,R.jsx)(O,{tone:`error`,appearance:`solid`,children:`Ошибка`}),(0,R.jsx)(O,{tone:`info`,appearance:`solid`,children:`Информация`})]})},H={render:()=>(0,R.jsxs)(M,{children:[(0,R.jsx)(O,{tone:`neutral`,appearance:`solid`,children:`Solid`}),(0,R.jsx)(O,{tone:`neutral`,appearance:`outline`,children:`Outline`}),(0,R.jsx)(O,{tone:`info`,appearance:`ghost`,children:`Ghost`}),(0,R.jsx)(O,{tone:`warning`,appearance:`transparent`,children:`Transparent`})]})},U={render:()=>(0,R.jsxs)(M,{children:[(0,R.jsx)(O,{size:`xs`,children:`Extra Small`}),(0,R.jsx)(O,{size:`sm`,children:`Small`}),(0,R.jsx)(O,{size:`md`,children:`Medium`}),(0,R.jsx)(O,{size:`lg`,children:`Large`}),(0,R.jsx)(O,{size:`xl`,children:`Extra Large`})]})},W={render:()=>{let[e,t]=(0,L.useState)([`Фильтр A`,`Фильтр B`,`Фильтр C`]);return(0,R.jsx)(M,{children:e.map(e=>(0,R.jsx)(O,{tone:`info`,appearance:`outline`,onRemove:()=>t(t=>t.filter(t=>t!==e)),children:e},e))})}},B.parameters={...B.parameters,docs:{...B.parameters?.docs,source:{originalSource:`{}`,...B.parameters?.docs?.source}}},V.parameters={...V.parameters,docs:{...V.parameters?.docs,source:{originalSource:`{
+  render: () => <BadgeList>
+            <Badge tone="neutral" appearance="outline">
+                Neutral
+            </Badge>
+            <Badge tone="success" appearance="solid">
+                Успешно
+            </Badge>
+            <Badge tone="warning" appearance="solid">
+                Внимание
+            </Badge>
+            <Badge tone="error" appearance="solid">
+                Ошибка
+            </Badge>
+            <Badge tone="info" appearance="solid">
+                Информация
+            </Badge>
+        </BadgeList>
+}`,...V.parameters?.docs?.source}}},H.parameters={...H.parameters,docs:{...H.parameters?.docs,source:{originalSource:`{
+  render: () => <BadgeList>
+            <Badge tone="neutral" appearance="solid">
+                Solid
+            </Badge>
+            <Badge tone="neutral" appearance="outline">
+                Outline
+            </Badge>
+            <Badge tone="info" appearance="ghost">
+                Ghost
+            </Badge>
+            <Badge tone="warning" appearance="transparent">
+                Transparent
+            </Badge>
+        </BadgeList>
+}`,...H.parameters?.docs?.source}}},U.parameters={...U.parameters,docs:{...U.parameters?.docs,source:{originalSource:`{
+  render: () => <BadgeList>
+            <Badge size="xs">Extra Small</Badge>
+            <Badge size="sm">Small</Badge>
+            <Badge size="md">Medium</Badge>
+            <Badge size="lg">Large</Badge>
+            <Badge size="xl">Extra Large</Badge>
+        </BadgeList>
+}`,...U.parameters?.docs?.source}}},W.parameters={...W.parameters,docs:{...W.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [items, setItems] = useState(["Фильтр A", "Фильтр B", "Фильтр C"]);
+    return <BadgeList>
+                {items.map(item => <Badge key={item} tone="info" appearance="outline" onRemove={() => setItems(prev => prev.filter(v => v !== item))}>
+                        {item}
+                    </Badge>)}
+            </BadgeList>;
+  }
+}`,...W.parameters?.docs?.source}}},G=[`Basic`,`Tones`,`Appearances`,`Sizes`,`RemovableList`]}));K();export{H as Appearances,B as Basic,W as RemovableList,U as Sizes,V as Tones,G as __namedExportsOrder,z as default,K as n,I as t};

package/storybook-static/assets/Button-BN8Cuwsy.css

@@ -0,0 +1 @@
+.wLOHwj{padding:0 var(--space-md);-webkit-user-select:none;user-select:none;transform-style:preserve-3d;perspective:1000px}.wLOHwj.lFsM-Y{aspect-ratio:1;padding:0}.wLOHwj:active{transition:none;transform:perspective(1000px)translateZ(-2em)}.LPob63{justify-content:center;align-items:center;gap:var(--space-sm);width:100%;height:100%;display:flex}.tsaGtv{width:1.25em;height:1.25em}

package/storybook-static/assets/Button-BUkCW8Zg.js

@@ -0,0 +1,12 @@
+import{c as e,i as t}from"./preload-helper-B45gAKPr.js";import{C as n}from"./iframe-SfMJGCsn.js";import{t as r}from"./jsx-runtime-BBQGix-2.js";import{a as i,i as a}from"./utils-CReRlw17.js";import{n as o,t as s}from"./popover-DWA5VOMQ.js";import{n as c,t as l}from"./ui.module-DS2qtZts.js";import{i as u,n as d,r as f,t as p}from"./uiClasses-CZ_HVS3Y.js";var m,h,g,_,v,y=t((()=>{m=`wLOHwj`,h=`lFsM-Y`,g=`LPob63`,_=`tsaGtv`,v={button:m,iconOnly:h,buttonInner:g,buttonIcon:_}})),b,x,S,C=t((()=>{b=e(n(),1),a(),s(),l(),f(),y(),x=r(),S=(0,b.forwardRef)(function({children:e,disabled:t,className:n,icon:r,iconEnd:a,title:s,variant:l,tone:f,appearance:m,type:h=`button`,"aria-label":g,..._},y){let S=b.Children.count(e)>0,C=!!r&&!S,w=u({variant:l,tone:f,appearance:m,fallbackAppearance:f&&f!==`neutral`?`solid`:`outline`}),T=C?g??s:g,E=(0,x.jsx)(`button`,{..._,ref:y,type:h,disabled:t,"aria-label":T,className:i(c.uiElement,c.uiInputControl,v.button,d(w.tone),p(w.appearance),C?v.iconOnly:``,`textNoWrap`,n??``),children:(0,x.jsxs)(`span`,{className:v.buttonInner,children:[r&&!a&&(0,x.jsx)(`span`,{"aria-hidden":`true`,className:v.buttonIcon,children:r}),S&&(0,x.jsx)(`span`,{className:`flexEllipsis`,children:e}),r&&a&&(0,x.jsx)(`span`,{"aria-hidden":`true`,className:v.buttonIcon,children:r})]})});return s?(0,x.jsx)(o,{placement:`bottom`,tooltip:!0,content:(0,x.jsx)(x.Fragment,{children:s}),children:E}):E}),S.__docgenInfo={description:'Базовая кнопка дизайн-системы для пользовательских действий.\nПоддерживает состояния, tone + appearance, иконки и безопасный `type="button"` по умолчанию.',methods:[],displayName:`Button`,props:{variant:{required:!1,tsType:{name:`union`,raw:`| "transparent"
+| "ghost"
+| "neutral"
+| "error"
+| "warning"
+| "success"
+| "info"
+| "neutralOutline"
+| "errorOutline"
+| "warningOutline"
+| "successOutline"
+| "infoOutline"`,elements:[{name:`literal`,value:`"transparent"`},{name:`literal`,value:`"ghost"`},{name:`literal`,value:`"neutral"`},{name:`literal`,value:`"error"`},{name:`literal`,value:`"warning"`},{name:`literal`,value:`"success"`},{name:`literal`,value:`"info"`},{name:`literal`,value:`"neutralOutline"`},{name:`literal`,value:`"errorOutline"`},{name:`literal`,value:`"warningOutline"`},{name:`literal`,value:`"successOutline"`},{name:`literal`,value:`"infoOutline"`}]},description:``},tone:{required:!1,tsType:{name:`union`,raw:`"neutral" | "error" | "warning" | "success" | "info"`,elements:[{name:`literal`,value:`"neutral"`},{name:`literal`,value:`"error"`},{name:`literal`,value:`"warning"`},{name:`literal`,value:`"success"`},{name:`literal`,value:`"info"`}]},description:``},appearance:{required:!1,tsType:{name:`union`,raw:`"solid" | "outline" | "ghost" | "transparent"`,elements:[{name:`literal`,value:`"solid"`},{name:`literal`,value:`"outline"`},{name:`literal`,value:`"ghost"`},{name:`literal`,value:`"transparent"`}]},description:``},icon:{required:!1,tsType:{name:`ReactReactNode`,raw:`React.ReactNode`},description:``},iconEnd:{required:!1,tsType:{name:`boolean`},description:``},type:{required:!1,tsType:{name:`union`,raw:`"button" | "submit" | "reset"`,elements:[{name:`literal`,value:`"button"`},{name:`literal`,value:`"submit"`},{name:`literal`,value:`"reset"`}]},description:`По умолчанию делаем безопасное поведение в формах.`,defaultValue:{value:`"button"`,computed:!1}}},composes:[`Omit`]}}));export{C as n,S as t};

package/storybook-static/assets/Button-CfX05aoR.js

@@ -0,0 +1,124 @@
+import{i as e}from"./preload-helper-B45gAKPr.js";import{E as t,a as n,d as r,f as i,l as a,m as o,n as s,p as c,r as l,u}from"./blocks-CwEU-ME1.js";import{t as d}from"./jsx-runtime-BBQGix-2.js";import{t as f}from"./mdx-react-shim-DnKFgFHy.js";import{Basic as p,ComposableScheme as m,Variants as h,WithIcons as g,n as _,t as v}from"./Button.stories-BoNLZb6w.js";function y(e){let o={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...t(),...e.components};return(0,x.jsxs)(x.Fragment,{children:[(0,x.jsx)(a,{of:v,parameters:{atomicCanvas:!0,layout:`padded`,docs:{toc:!0}}}),`
+`,(0,x.jsx)(c,{children:`Button`}),`
+`,(0,x.jsx)(i,{children:`Базовая action-кнопка дизайн-системы для пользовательских действий, подтверждений и быстрых операций`}),`
+`,(0,x.jsxs)(o.p,{children:[(0,x.jsx)(o.code,{children:`Button`}),` используется как универсальная кнопка интерфейса: в формах, тулбарах, модальных окнах, карточках, таблицах и компактных icon-only сценариях.`]}),`
+`,(0,x.jsx)(o.p,{children:`Ключевые особенности компонента:`}),`
+`,(0,x.jsxs)(o.ul,{children:[`
+`,(0,x.jsxs)(o.li,{children:[`безопасный `,(0,x.jsx)(o.code,{children:`type="button"`}),` по умолчанию;`]}),`
+`,(0,x.jsxs)(o.li,{children:[`готовые схемы через `,(0,x.jsx)(o.code,{children:`variant`}),`;`]}),`
+`,(0,x.jsxs)(o.li,{children:[`составная настройка через `,(0,x.jsx)(o.code,{children:`tone + appearance`}),`;`]}),`
+`,(0,x.jsx)(o.li,{children:`поддержка иконки слева и справа;`}),`
+`,(0,x.jsx)(o.li,{children:`автоматический режим icon-only;`}),`
+`,(0,x.jsxs)(o.li,{children:[`всплывающая подсказка через `,(0,x.jsx)(o.code,{children:`title`}),`.`]}),`
+`]}),`
+`,(0,x.jsx)(o.h2,{id:`основной-сценарий`,children:`Основной сценарий`}),`
+`,(0,x.jsx)(u,{}),`
+`,(0,x.jsx)(o.pre,{children:(0,x.jsx)(o.code,{className:`language-tsx`,children:`import { Button } from "@/shared/ui";
+
+export function Example() {
+	return <Button>Сохранить</Button>;
+}
+`})}),`
+`,(0,x.jsx)(n,{of:p}),`
+`,(0,x.jsx)(o.h2,{id:`как-выбирать-схему-оформления`,children:`Как выбирать схему оформления`}),`
+`,(0,x.jsxs)(o.p,{children:[`Для большинства сценариев достаточно `,(0,x.jsx)(o.code,{children:`variant`}),`: это готовые, согласованные значения дизайн-системы.`]}),`
+`,(0,x.jsxs)(o.p,{children:[`Если нужна более гибкая настройка, можно передать `,(0,x.jsx)(o.code,{children:`tone`}),` и `,(0,x.jsx)(o.code,{children:`appearance`}),`. У них приоритет выше, чем у `,(0,x.jsx)(o.code,{children:`variant`}),`, поэтому они подходят для точной донастройки без создания нового варианта.`]}),`
+`,(0,x.jsx)(o.h3,{id:`готовые-варианты`,children:`Готовые варианты`}),`
+`,(0,x.jsx)(l,{of:h}),`
+`,(0,x.jsx)(o.pre,{children:(0,x.jsx)(o.code,{className:`language-tsx`,children:`import { Button } from "@/shared/ui";
+
+export function ActionVariants() {
+	return (
+		<>
+			<Button variant="neutral">Основное действие</Button>
+			<Button variant="neutralOutline">Вторичное действие</Button>
+			<Button variant="ghost">Легкое действие</Button>
+			<Button variant="success">Подтвердить</Button>
+			<Button variant="errorOutline">Отменить</Button>
+			<Button variant="transparent">Действие в плотном интерфейсе</Button>
+		</>
+	);
+}
+`})}),`
+`,(0,x.jsxs)(o.h3,{id:`составная-схема-через-tone-и-appearance`,children:[`Составная схема через `,(0,x.jsx)(o.code,{children:`tone`}),` и `,(0,x.jsx)(o.code,{children:`appearance`})]}),`
+`,(0,x.jsx)(l,{of:m}),`
+`,(0,x.jsx)(o.pre,{children:(0,x.jsx)(o.code,{className:`language-tsx`,children:`import { Button } from "@/shared/ui";
+
+export function CustomScheme() {
+	return (
+		<>
+			<Button tone="neutral" appearance="solid">
+				Neutral Solid
+			</Button>
+			<Button tone="neutral" appearance="outline">
+				Neutral Outline
+			</Button>
+			<Button tone="info" appearance="outline">
+				Показать детали
+			</Button>
+			<Button tone="success" appearance="solid">
+				Применить
+			</Button>
+			<Button tone="error" appearance="transparent">
+				Сбросить
+			</Button>
+		</>
+	);
+}
+`})}),`
+`,(0,x.jsx)(o.h2,{id:`иконки-и-компактные-действия`,children:`Иконки и компактные действия`}),`
+`,(0,x.jsx)(o.p,{children:`Компонент поддерживает два сценария:`}),`
+`,(0,x.jsxs)(o.ul,{children:[`
+`,(0,x.jsx)(o.li,{children:`кнопка с текстом и иконкой;`}),`
+`,(0,x.jsx)(o.li,{children:`кнопка только с иконкой.`}),`
+`]}),`
+`,(0,x.jsxs)(o.p,{children:[`Если в кнопке есть только `,(0,x.jsx)(o.code,{children:`icon`}),`, обязательно нужно передать `,(0,x.jsx)(o.code,{children:`title`}),` или `,(0,x.jsx)(o.code,{children:`aria-label`}),`, чтобы управление было доступным для скринридеров. В текущей реализации `,(0,x.jsx)(o.code,{children:`title`}),` также используется как содержимое всплывающей подсказки.`]}),`
+`,(0,x.jsx)(l,{of:g}),`
+`,(0,x.jsx)(o.pre,{children:(0,x.jsx)(o.code,{className:`language-tsx`,children:`import { BellIcon, CheckIcon, DownloadIcon, PlusIcon } from "lucide-react";
+
+import { Button } from "@/shared/ui";
+
+export function ButtonsWithIcons() {
+	return (
+		<>
+			<Button icon={<DownloadIcon />}>Скачать</Button>
+			<Button icon={<PlusIcon />} tone="info" appearance="solid">
+				Создать
+			</Button>
+			<Button icon={<CheckIcon />} iconEnd tone="success" appearance="solid">
+				Подтвердить
+			</Button>
+			<Button icon={<BellIcon />} title="Уведомления" />
+		</>
+	);
+}
+`})}),`
+`,(0,x.jsx)(o.h2,{id:`использование-в-формах`,children:`Использование в формах`}),`
+`,(0,x.jsxs)(o.p,{children:[`По умолчанию компонент рендерится как `,(0,x.jsx)(o.code,{children:`type="button"`}),`, поэтому он не отправляет форму случайно. Для submit-сценариев тип нужно указывать явно.`]}),`
+`,(0,x.jsx)(o.pre,{children:(0,x.jsx)(o.code,{className:`language-tsx`,children:`import { Button } from "@/shared/ui";
+
+export function FormActions() {
+	return (
+		<form onSubmit={handleSubmit}>
+			<Button type="button" variant="transparent" onClick={handleReset}>
+				Сбросить
+			</Button>
+			<Button type="submit" variant="success">
+				Сохранить
+			</Button>
+		</form>
+	);
+}
+`})}),`
+`,(0,x.jsx)(o.h2,{id:`практические-рекомендации`,children:`Практические рекомендации`}),`
+`,(0,x.jsxs)(o.ul,{children:[`
+`,(0,x.jsxs)(o.li,{children:[`Для типовых сценариев сначала выбирай `,(0,x.jsx)(o.code,{children:`variant`}),`, а не комбинацию отдельных пропсов.`]}),`
+`,(0,x.jsxs)(o.li,{children:[`Для destructive-операций лучше использовать семантически явные схемы `,(0,x.jsx)(o.code,{children:`error`}),` или `,(0,x.jsx)(o.code,{children:`errorOutline`}),`.`]}),`
+`,(0,x.jsxs)(o.li,{children:[`Для иконки без текста всегда задавай `,(0,x.jsx)(o.code,{children:`title`}),` или `,(0,x.jsx)(o.code,{children:`aria-label`}),`.`]}),`
+`,(0,x.jsxs)(o.li,{children:[`Если нужна кнопка удаления с подтверждением в два шага, стоит рассмотреть `,(0,x.jsx)(o.code,{children:`ButtonRemove`}),` из того же модуля.`]}),`
+`,(0,x.jsxs)(o.li,{children:[(0,x.jsx)(o.code,{children:`disabled`}),` блокирует нажатие, но не должен заменять явное объяснение пользователю, почему действие недоступно.`]}),`
+`]}),`
+`,(0,x.jsx)(o.h2,{id:`api`,children:`API`}),`
+`,(0,x.jsx)(s,{of:v}),`
+`,(0,x.jsx)(o.h2,{id:`все-сторисы`,children:`Все сторисы`}),`
+`,(0,x.jsx)(r,{includePrimary:!1})]})}function b(e={}){let{wrapper:n}={...t(),...e.components};return n?(0,x.jsx)(n,{...e,children:(0,x.jsx)(y,{...e})}):y(e)}var x;e((()=>{x=d(),f(),o(),_()}))();export{b as default};

package/storybook-static/assets/Button.stories-BoNLZb6w.js

@@ -0,0 +1,75 @@
+import{a as e,i as t}from"./preload-helper-B45gAKPr.js";import{t as n}from"./jsx-runtime-BBQGix-2.js";import{P as r,b as i,mt as a,t as o,ut as s}from"./lucide-react-CK2oyDtF.js";import{n as c,t as l}from"./Button-BUkCW8Zg.js";var u=e({Basic:()=>m,ComposableScheme:()=>g,Variants:()=>h,WithIcons:()=>_,__namedExportsOrder:()=>v,default:()=>p}),d,f,p,m,h,g,_,v,y=t((()=>{o(),c(),d=n(),{fn:f}=__STORYBOOK_MODULE_TEST__,p={title:`Shared/UI/Button`,component:l,args:{children:`Действие`,variant:`neutralOutline`,disabled:!1,iconEnd:!1,onClick:f()},parameters:{atomicCanvas:!0,layout:`padded`},argTypes:{children:{description:`Текстовое содержимое кнопки.`,control:`text`},variant:{description:"Готовая схема для обратной совместимости. Если заданы `tone` или `appearance`, они имеют приоритет.",control:`select`,options:[`neutral`,`neutralOutline`,`ghost`,`error`,`warning`,`success`,`info`,`errorOutline`,`warningOutline`,`successOutline`,`infoOutline`,`transparent`]},tone:{description:`Семантический тон кнопки.`,control:`inline-radio`,options:[`neutral`,`error`,`warning`,`success`,`info`]},appearance:{description:`Визуальная форма кнопки.`,control:`inline-radio`,options:[`solid`,`outline`,`ghost`,`transparent`]},icon:{description:`Иконка слева или справа от текста.`,control:!1},iconEnd:{description:`Перемещает иконку в конец кнопки.`,control:`boolean`},title:{description:"Текст тултипа и `aria-label` для кнопки.",control:`text`},disabled:{description:`Блокирует нажатие.`,control:`boolean`},onClick:{description:`Вызывается при нажатии на кнопку.`,control:!1},className:{description:`Дополнительный CSS-класс.`,control:`text`}}},m={},h={render:()=>(0,d.jsxs)(`div`,{style:{display:`grid`,gap:12,gridTemplateColumns:`repeat(auto-fit, minmax(180px, 1fr))`},children:[(0,d.jsx)(l,{variant:`neutral`,children:`Neutral Solid`}),(0,d.jsx)(l,{variant:`neutralOutline`,children:`Neutral Outline`}),(0,d.jsx)(l,{variant:`ghost`,children:`Ghost`}),(0,d.jsx)(l,{variant:`info`,children:`Info Solid`}),(0,d.jsx)(l,{variant:`success`,children:`Success Solid`}),(0,d.jsx)(l,{variant:`warning`,children:`Warning Solid`}),(0,d.jsx)(l,{variant:`error`,children:`Error Solid`}),(0,d.jsx)(l,{variant:`infoOutline`,children:`Info Outline`}),(0,d.jsx)(l,{variant:`successOutline`,children:`Success Outline`}),(0,d.jsx)(l,{variant:`warningOutline`,children:`Warning Outline`}),(0,d.jsx)(l,{variant:`errorOutline`,children:`Error Outline`}),(0,d.jsx)(l,{variant:`transparent`,children:`Transparent`})]}),args:{children:`Действие`}},g={render:()=>(0,d.jsxs)(`div`,{style:{display:`grid`,gap:12,gridTemplateColumns:`repeat(auto-fit, minmax(180px, 1fr))`},children:[(0,d.jsx)(l,{tone:`neutral`,appearance:`solid`,children:`Neutral Solid`}),(0,d.jsx)(l,{tone:`neutral`,appearance:`outline`,children:`Neutral Outline`}),(0,d.jsx)(l,{tone:`neutral`,appearance:`ghost`,children:`Neutral Ghost`}),(0,d.jsx)(l,{tone:`info`,appearance:`outline`,children:`Info Outline`}),(0,d.jsx)(l,{tone:`success`,appearance:`solid`,children:`Success Solid`}),(0,d.jsx)(l,{tone:`error`,appearance:`transparent`,children:`Error Transparent`})]})},_={render:()=>(0,d.jsxs)(`div`,{style:{display:`flex`,gap:12,flexWrap:`wrap`},children:[(0,d.jsx)(l,{icon:(0,d.jsx)(r,{}),children:`Скачать`}),(0,d.jsx)(l,{icon:(0,d.jsx)(i,{}),tone:`info`,appearance:`solid`,children:`Создать`}),(0,d.jsx)(l,{icon:(0,d.jsx)(s,{}),iconEnd:!0,tone:`success`,appearance:`solid`,children:`Подтвердить`}),(0,d.jsx)(l,{icon:(0,d.jsx)(a,{}),title:`Уведомления`})]}),args:{children:`Действие`}},m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
+  // play: async function ({ args, canvas, userEvent }) {
+  // 	const button = canvas.getByRole("button", { name: /button/i });
+  // 	// 👇 Simulate behavior
+  // 	await userEvent.click(button);
+  // 	// 👇 Make assertions
+  // 	await expect(button).toBeVisible();
+  // 	await expect(args.onClick).not.toHaveBeenCalled();
+  // }
+}`,...m.parameters?.docs?.source}}},h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
+  render: () => <div style={{
+    display: "grid",
+    gap: 12,
+    gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))"
+  }}>
+            <Button variant="neutral">Neutral Solid</Button>
+            <Button variant="neutralOutline">Neutral Outline</Button>
+            <Button variant="ghost">Ghost</Button>
+            <Button variant="info">Info Solid</Button>
+            <Button variant="success">Success Solid</Button>
+            <Button variant="warning">Warning Solid</Button>
+            <Button variant="error">Error Solid</Button>
+            <Button variant="infoOutline">Info Outline</Button>
+            <Button variant="successOutline">Success Outline</Button>
+            <Button variant="warningOutline">Warning Outline</Button>
+            <Button variant="errorOutline">Error Outline</Button>
+            <Button variant="transparent">Transparent</Button>
+        </div>,
+  args: {
+    children: "Действие"
+  }
+}`,...h.parameters?.docs?.source}}},g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
+  render: () => <div style={{
+    display: "grid",
+    gap: 12,
+    gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))"
+  }}>
+            <Button tone="neutral" appearance="solid">
+                Neutral Solid
+            </Button>
+            <Button tone="neutral" appearance="outline">
+                Neutral Outline
+            </Button>
+            <Button tone="neutral" appearance="ghost">
+                Neutral Ghost
+            </Button>
+            <Button tone="info" appearance="outline">
+                Info Outline
+            </Button>
+            <Button tone="success" appearance="solid">
+                Success Solid
+            </Button>
+            <Button tone="error" appearance="transparent">
+                Error Transparent
+            </Button>
+        </div>
+}`,...g.parameters?.docs?.source}}},_.parameters={..._.parameters,docs:{..._.parameters?.docs,source:{originalSource:`{
+  render: () => <div style={{
+    display: "flex",
+    gap: 12,
+    flexWrap: "wrap"
+  }}>
+            <Button icon={<DownloadIcon />}>Скачать</Button>
+            <Button icon={<PlusIcon />} tone="info" appearance="solid">
+                Создать
+            </Button>
+            <Button icon={<CheckIcon />} iconEnd tone="success" appearance="solid">
+                Подтвердить
+            </Button>
+            <Button icon={<BellIcon />} title="Уведомления" />
+        </div>,
+  args: {
+    children: "Действие"
+  }
+}`,..._.parameters?.docs?.source}}},v=[`Basic`,`Variants`,`ComposableScheme`,`WithIcons`]}));y();export{m as Basic,g as ComposableScheme,h as Variants,_ as WithIcons,v as __namedExportsOrder,p as default,y as n,u as t};

package/storybook-static/assets/CheckBox-B1xm2kwz.css

@@ -0,0 +1 @@
+.cgozWT{align-items:center;gap:var(--space-xs);display:flex}._1evcXl{width:var(--control-height);height:var(--control-height);flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}.lU3P-V{border-radius:var(--radius-xs);width:1.5em;height:1.5em}.PhkI5X{width:1.5em;height:1.5em}.PhkI5X svg{fill:currentColor;stroke:none;width:1em;height:1em;display:block}

package/storybook-static/assets/CheckBox-CcXGzkSE.js

@@ -0,0 +1,42 @@
+import{i as e}from"./preload-helper-B45gAKPr.js";import{E as t,a as n,d as r,f as i,l as a,m as o,n as s,p as c,r as l,u}from"./blocks-CwEU-ME1.js";import{t as d}from"./jsx-runtime-BBQGix-2.js";import{t as f}from"./mdx-react-shim-DnKFgFHy.js";import{Controlled as p,Disabled as m,Sizes as h,Tones as g,n as _,t as v}from"./CheckBox.stories-Bo53TxC7.js";function y(e){let o={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...t(),...e.components};return(0,x.jsxs)(x.Fragment,{children:[(0,x.jsx)(a,{of:v,parameters:{docs:{toc:!0}}}),`
+`,(0,x.jsx)(c,{children:`CheckBox`}),`
+`,(0,x.jsx)(i,{children:`Флажок для булевых полей с общими UI-схемами tone и appearance`}),`
+`,(0,x.jsx)(o.p,{children:`CheckBox уже имеет живые stories, а эта страница собирает их в структурированную документацию с краткими рекомендациями, примерами подключения и API.
+Ниже можно быстро проверить базовый сценарий, а затем перейти к отдельным режимам использования и состояниям компонента. Отдельно разобраны контролируемые сценарии, заблокированные состояния, размерные варианты.`}),`
+`,(0,x.jsx)(o.h2,{id:`основной-сценарий`,children:`Основной сценарий`}),`
+`,(0,x.jsx)(u,{}),`
+`,(0,x.jsx)(n,{of:p}),`
+`,(0,x.jsx)(o.pre,{children:(0,x.jsx)(o.code,{className:`language-tsx`,children:`import { useState } from "react";
+
+import { CheckBox } from "@/shared/ui";
+
+export function Example() {
+	const [checked, setChecked] = useState(false);
+
+	return <CheckBox label="Согласен с условиями" value={checked} onChange={setChecked} />;
+}
+`})}),`
+`,(0,x.jsx)(o.h2,{id:`практические-рекомендации`,children:`Практические рекомендации`}),`
+`,(0,x.jsxs)(o.ul,{children:[`
+`,(0,x.jsx)(o.li,{children:`Если состояние должно жить во внешней форме или модели, ориентируйтесь на контролируемый режим из документации.`}),`
+`,(0,x.jsx)(o.li,{children:`Сначала выберите семантику и визуальную схему, а затем уже подстраивайте остальные пропсы компонента.`}),`
+`,(0,x.jsx)(o.li,{children:`Проверьте размер компонента в реальном контексте интерфейса: в таблицах, тулбарах и формах требования обычно отличаются.`}),`
+`,(0,x.jsx)(o.li,{children:`Заблокированное состояние лучше проверять отдельно, чтобы убедиться, что визуально и поведенчески оно остается понятным.`}),`
+`]}),`
+`,(0,x.jsx)(o.h2,{id:`сценарии-использования`,children:`Сценарии использования`}),`
+`,(0,x.jsx)(o.h3,{id:`компонент-работает-в-контролируемом-режиме-когда-состояние-хранится-во-внешнем-компоненте`,children:`Компонент работает в контролируемом режиме, когда состояние хранится во внешнем компоненте`}),`
+`,(0,x.jsx)(o.p,{children:`Компонент работает в контролируемом режиме, когда состояние хранится во внешнем компоненте.`}),`
+`,(0,x.jsx)(l,{of:p}),`
+`,(0,x.jsx)(o.h3,{id:`сравнение-семантических-тонов-и-состояний`,children:`Сравнение семантических тонов и состояний`}),`
+`,(0,x.jsx)(o.p,{children:`Сравнение семантических тонов и состояний.`}),`
+`,(0,x.jsx)(l,{of:g}),`
+`,(0,x.jsx)(o.h3,{id:`сравнение-размеров-компонента`,children:`Сравнение размеров компонента`}),`
+`,(0,x.jsx)(o.p,{children:`Сравнение размеров компонента.`}),`
+`,(0,x.jsx)(l,{of:h}),`
+`,(0,x.jsx)(o.h3,{id:`проверка-поведения-в-заблокированном-состоянии`,children:`Проверка поведения в заблокированном состоянии`}),`
+`,(0,x.jsx)(o.p,{children:`Проверка поведения в заблокированном состоянии.`}),`
+`,(0,x.jsx)(l,{of:m}),`
+`,(0,x.jsx)(o.h2,{id:`api`,children:`API`}),`
+`,(0,x.jsx)(s,{of:v}),`
+`,(0,x.jsx)(o.h2,{id:`все-сторисы`,children:`Все сторисы`}),`
+`,(0,x.jsx)(r,{includePrimary:!1})]})}function b(e={}){let{wrapper:n}={...t(),...e.components};return n?(0,x.jsx)(n,{...e,children:(0,x.jsx)(y,{...e})}):y(e)}var x;e((()=>{x=d(),f(),o(),_()}))();export{b as default};

package/storybook-static/assets/CheckBox-DTSi8Yok.js

@@ -0,0 +1,2 @@
+import{c as e,i as t}from"./preload-helper-B45gAKPr.js";import{C as n}from"./iframe-SfMJGCsn.js";import{t as r}from"./jsx-runtime-BBQGix-2.js";import{a as i,i as a}from"./utils-CReRlw17.js";import{f as o,t as s}from"./lucide-react-CK2oyDtF.js";import{n as c,t as l}from"./ui.module-DS2qtZts.js";import{n as u,r as d}from"./uiClasses-CZ_HVS3Y.js";import{n as f,t as p}from"./CheckBox.module-Hr3mvdAC.js";function m({label:e,description:t,placeholder:n,disabled:r,size:a,className:s,onChange:l,value:d,noWrap:f,id:m,tone:_=`neutral`,...v}){let y=(0,h.useId)(),b=m??y,x=t?`${b}-description`:void 0,S=e??n,C=d??!1;return(0,g.jsxs)(`div`,{className:i(c.uiElement,a&&c.uiSizable,a&&c[a],r&&c.disabled,s),"aria-disabled":r||void 0,children:[(0,g.jsxs)(`div`,{className:p.row,children:[(0,g.jsxs)(`div`,{className:i(p.wrapper,u(_)),children:[(0,g.jsx)(`input`,{...v,id:b,type:`checkbox`,checked:C,disabled:r,"aria-checked":C,"aria-describedby":x,className:i(c.uiSelectionControl,p.input),onChange:()=>l?.(!C)}),(0,g.jsx)(`div`,{className:i(c.uiSelectionIcon,p.icon),"aria-hidden":`true`,children:(0,g.jsx)(o,{})})]}),S&&(0,g.jsx)(`label`,{htmlFor:b,className:i(c.uiLabelBase,f&&`textNoWrap`),children:S})]}),t&&(0,g.jsx)(`p`,{id:x,className:c.uiDescription,children:t})]})}var h,g,_=t((()=>{h=e(n(),1),a(),s(),l(),d(),f(),g=r(),m.__docgenInfo={description:`Компонент флажка для выбора булевого значения в формах и списках.
+Поддерживает tone + appearance и использует общие selection utility-классы из ui.module.scss.`,methods:[],displayName:`CheckBox`,props:{label:{required:!1,tsType:{name:`ReactNode`},description:``},description:{required:!1,tsType:{name:`string`},description:``},placeholder:{required:!1,tsType:{name:`string`},description:``},disabled:{required:!1,tsType:{name:`boolean`},description:``},size:{required:!1,tsType:{name:`union`,raw:`"xs" | "sm" | "md" | "lg" | "xl"`,elements:[{name:`literal`,value:`"xs"`},{name:`literal`,value:`"sm"`},{name:`literal`,value:`"md"`},{name:`literal`,value:`"lg"`},{name:`literal`,value:`"xl"`}]},description:``},value:{required:!0,tsType:{name:`V`},description:"Если начальное состояние может быть `null | undefined`\nзначит `onChange` тоже должен ументь сбрасывать.\nПоэтому такой контрол явно должен передавать `UiBaseProps<AnyType | undefined>`"},onChange:{required:!0,tsType:{name:`signature`,type:`function`,raw:`(value: T) => void`,signature:{arguments:[{type:{name:`C`},name:`value`}],return:{name:`void`}}},description:``},tone:{required:!1,tsType:{name:`union`,raw:`"neutral" | "error" | "warning" | "success" | "info"`,elements:[{name:`literal`,value:`"neutral"`},{name:`literal`,value:`"error"`},{name:`literal`,value:`"warning"`},{name:`literal`,value:`"success"`},{name:`literal`,value:`"info"`}]},description:``,defaultValue:{value:`"neutral"`,computed:!1}},noWrap:{required:!1,tsType:{name:`boolean`},description:``}},composes:[`Omit`]}}));export{_ as n,m as t};