@ryuzaki13/react-foundation-ui 1.0.8 → 1.0.12

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,
@@ -186,91 +186,83 @@ $paragraph-spacing-preset-defaults: (
 $light-theme-defaults: (
 	tokens: (
 		"--surface-0": #ffffff,
-		"--surface-1": #f7f8f9,
-		"--surface-2": #eceef0,
-		"--content-0": oklch(0.26 0.01 244),
-		"--content-1": oklch(0.44 0.02 268),
-		"--content-2": oklch(0.54 0.02 258),
-		"--focus-ring": oklch(0.5 0.3 270),
-		"--overlay-backdrop": rgba(0, 0, 0, 0.1),
-		"--overlay-glass": rgba(255, 255, 255, 0.8),
-		"--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
+		"--surface-1": #f5f5f5,
+		"--surface-2": #e5e5e5,
+		"--content-0": #111111,
+		"--content-1": #444444,
+		"--content-2": #777777,
+		"--focus-ring": #000000,
+		"--overlay-backdrop": rgba(0, 0, 0, 0.12),
+		"--overlay-glass": rgba(255, 255, 255, 0.86),
+		"--shadow-xs": 0 0 0.25em rgba(0, 0, 0, 0.12),
+		"--shadow-sm": 0 0 0.25em rgba(0, 0, 0, 0.2),
+		"--shadow-md": 0 0 0.5em rgba(0, 0, 0, 0.24),
+		"--shadow-lg": 0 0 1em rgba(0, 0, 0, 0.28)
 	),
 	accent: (
-		l: 0.55,
-		c: 0.22,
-		h: 245
+		l: 0.2,
+		c: 0,
+		h: 0
 	),
 	status: (
 		neutral: (
 			fill: (
-				l: 0.26,
-				c: 0.01,
-				h: 244
+				l: 0.2,
+				c: 0,
+				h: 0
 			),
 			border: (
-				l: 0.86,
-				c: 0.016,
-				h: 245
+				l: 0.82,
+				c: 0,
+				h: 0
 			)
 		),
 		error: (
 			fill: (
 				l: 0.52,
-				c: 0.19,
-				h: 22
+				c: 0.2,
+				h: 25
 			),
 			border: (
 				l: 0.52,
-				c: 0.19,
-				h: 22
+				c: 0.2,
+				h: 25
 			)
 		),
 		warning: (
 			fill: (
-				l: 0.55,
+				l: 0.65,
 				c: 0.16,
-				h: 75
+				h: 90
 			),
 			border: (
-				l: 0.55,
+				l: 0.65,
 				c: 0.16,
-				h: 75
+				h: 90
 			)
 		),
 		success: (
 			fill: (
 				l: 0.5,
-				c: 0.14,
-				h: 160
+				c: 0.16,
+				h: 145
 			),
 			border: (
 				l: 0.5,
-				c: 0.14,
-				h: 160
+				c: 0.16,
+				h: 145
 			)
 		),
 		info: (
 			fill: (
 				l: 0.52,
-				c: 0.15,
-				h: 255
+				c: 0.16,
+				h: 250
 			),
 			border: (
 				l: 0.52,
-				c: 0.15,
-				h: 255
+				c: 0.16,
+				h: 250
 			)
 		)
 	)
@@ -278,92 +270,84 @@ $light-theme-defaults: (
 
 $dark-theme-defaults: (
 	tokens: (
-		"--surface-0": #222a35,
-		"--surface-1": #27313f,
-		"--surface-2": #2d3646,
-		"--content-0": oklch(0.9 0.01 256),
-		"--content-1": oklch(0.8 0.02 256),
-		"--content-2": oklch(0.7 0.02 256),
-		"--focus-ring": oklch(0.88 0.2 94),
-		"--overlay-backdrop": rgba(30, 37, 47, 0.18),
-		"--overlay-glass": rgba(30, 37, 47, 0.8),
+		"--surface-0": #000000,
+		"--surface-1": #111111,
+		"--surface-2": #222222,
+		"--content-0": #ffffff,
+		"--content-1": #cccccc,
+		"--content-2": #999999,
+		"--focus-ring": #ffffff,
+		"--overlay-backdrop": rgba(255, 255, 255, 0.12),
+		"--overlay-glass": rgba(0, 0, 0, 0.86),
 		"--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,
-		c: 0.2,
-		h: 245
+		l: 0.92,
+		c: 0,
+		h: 0
 	),
 	status: (
 		neutral: (
 			fill: (
-				l: 0.7,
-				c: 0.02,
-				h: 256
+				l: 0.88,
+				c: 0,
+				h: 0
 			),
 			border: (
-				l: 0.4,
-				c: 0.02,
-				h: 256
+				l: 0.35,
+				c: 0,
+				h: 0
 			)
 		),
 		error: (
 			fill: (
-				l: 0.7,
-				c: 0.18,
-				h: 22
+				l: 0.72,
+				c: 0.2,
+				h: 25
 			),
 			border: (
-				l: 0.7,
-				c: 0.18,
-				h: 22
+				l: 0.72,
+				c: 0.2,
+				h: 25
 			)
 		),
 		warning: (
 			fill: (
-				l: 0.72,
-				c: 0.14,
-				h: 75
+				l: 0.8,
+				c: 0.16,
+				h: 90
 			),
 			border: (
-				l: 0.72,
-				c: 0.14,
-				h: 75
+				l: 0.8,
+				c: 0.16,
+				h: 90
 			)
 		),
 		success: (
 			fill: (
-				l: 0.7,
-				c: 0.14,
-				h: 165
+				l: 0.75,
+				c: 0.16,
+				h: 145
 			),
 			border: (
-				l: 0.7,
-				c: 0.14,
-				h: 165
+				l: 0.75,
+				c: 0.16,
+				h: 145
 			)
 		),
 		info: (
 			fill: (
-				l: 0.7,
+				l: 0.76,
 				c: 0.16,
-				h: 258
+				h: 250
 			),
 			border: (
-				l: 0.7,
+				l: 0.76,
 				c: 0.16,
-				h: 258
+				h: 250
 			)
 		)
 	)

package/src/styles/mixins/_mixin.scss

@@ -285,15 +285,15 @@
 @mixin generate-accent($L, $C, $H, $mode) {
 	@if $mode == light {
 		--content-accent: oklch(#{$L} #{$C} #{$H});
-		--surface-accent: oklch(0.94 #{$C - 0.2} #{$H - 15});
-		--border-accent: oklch(#{$L - 0.03} #{$C - 0.08} #{$H});
+		--surface-accent: oklch(0.94 #{math.max(0, $C - 0.2)} #{$H - 15});
+		--border-accent: oklch(#{$L - 0.03} #{math.max(0, $C - 0.08)} #{$H});
 		// --focus-accent: oklch(#{$L + 0.04} #{$C + 0.05} #{$H});
 	}
 
 	@if $mode == dark {
 		--content-accent: oklch(#{$L} #{$C} #{$H});
-		--surface-accent: oklch(#{$L - 0.4} #{$C - 0.15} #{$H - 10});
-		--border-accent: oklch(#{$L - 0.08} #{$C - 0.1} #{$H});
+		--surface-accent: oklch(#{$L - 0.4} #{math.max(0, $C - 0.15)} #{$H - 10});
+		--border-accent: oklch(#{$L - 0.08} #{math.max(0, $C - 0.1)} #{$H});
 		// --focus-accent: oklch(#{$L + 0.06} #{$C + 0.03} #{$H});
 	}
 }

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};