feat(sprint3): кнопки, форм-контролы, LLM-блоки — Sprint 3 v0.3.0

- components/ui/Button.tsx — компонент Button (primary/secondary/ghost/danger, sm/md/lg, loading/disabled) - components/ui/CodeCopy.tsx — компонент копирования кода (clipboard API) - components/ui/Toggle.tsx — тумблер (client component, bb-toggle-track/thumb) - globals.css — CSS-классы: bb-btn, bb-input/textarea/select, bb-checkbox/radio, bb-toggle, @keyframes bb-spin - app/components/buttons/page.tsx — страница «Кнопки» (варианты, размеры, состояния, code copy, LLM-блок) - app/components/forms/page.tsx — страница «Форм-контролы» (Input/Textarea/Select/Checkbox/Radio/Toggle, LLM-блок) - foundation/logo/page.tsx — добавлен LLM-блок v1.0 - Sidebar: убраны «скоро» с Кнопок и Форм-контролов, версия Sprint 3 · v0.3.0 - docs/LLM_CONTEXT.md → версия 3.0, добавлена секция 9a с компонентами Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-22 20:20:41 +05:00
parent 0198947c4e
commit 0855892643
9 changed files with 1428 additions and 6 deletions
@@ -42,3 +42,109 @@ body {
  color: var(--bb-text);
  -webkit-font-smoothing: antialiased;
 }
+
+/* ─── Анимации ───────────────────────────────────────────────── */
+@keyframes bb-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* ─── Кнопки (Sprint 3) ──────────────────────────────────────── */
+.bb-btn {
+  font-family: var(--font-web);
+  font-weight: 500;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  cursor: pointer;
+  transition: filter 0.15s, opacity 0.15s;
+  white-space: nowrap;
+  line-height: 1;
+  text-decoration: none;
+  -webkit-font-smoothing: antialiased;
+}
+.bb-btn:hover:not(:disabled)      { filter: brightness(0.9); }
+.bb-btn:active:not(:disabled)     { filter: brightness(0.82); }
+.bb-btn:disabled                  { cursor: not-allowed; opacity: 0.5; }
+.bb-btn:focus-visible             { outline: 2px solid var(--brand-053m); outline-offset: 2px; }
+
+.bb-btn-sm { font-size: 13px; padding: 5px 12px;   border-radius: 6px;  border: 1.5px solid transparent; }
+.bb-btn-md { font-size: 14px; padding: 8px 18px;   border-radius: 8px;  border: 1.5px solid transparent; }
+.bb-btn-lg { font-size: 16px; padding: 12px 26px;  border-radius: 10px; border: 1.5px solid transparent; }
+
+.bb-btn-primary   { background: var(--brand-073m); color: #fff;             border-color: var(--brand-073m); }
+.bb-btn-secondary { background: transparent;        color: var(--brand-073m); border-color: var(--brand-073m); }
+.bb-btn-ghost     { background: transparent;        color: var(--brand-073m); border-color: transparent;       }
+.bb-btn-danger    { background: #dc2626;            color: #fff;             border-color: #dc2626;           }
+
+/* ─── Форм-контролы (Sprint 3) ───────────────────────────────── */
+.bb-input,
+.bb-textarea,
+.bb-select {
+  font-family: var(--font-web);
+  font-size: 14px;
+  color: var(--bb-text);
+  background: #fff;
+  border: 1.5px solid var(--bb-border);
+  border-radius: 8px;
+  padding: 9px 12px;
+  width: 100%;
+  transition: border-color 0.15s, box-shadow 0.15s;
+  outline: none;
+  -webkit-font-smoothing: antialiased;
+}
+.bb-input:focus,
+.bb-textarea:focus,
+.bb-select:focus {
+  border-color: var(--brand-053m);
+  box-shadow: 0 0 0 3px rgba(126, 207, 202, 0.2);
+}
+.bb-input.bb-error,
+.bb-textarea.bb-error,
+.bb-select.bb-error  { border-color: #dc2626; }
+.bb-input.bb-error:focus,
+.bb-textarea.bb-error:focus,
+.bb-select.bb-error:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15); }
+.bb-input:disabled,
+.bb-textarea:disabled,
+.bb-select:disabled  { opacity: 0.5; cursor: not-allowed; background: var(--bb-sidebar-bg); }
+
+.bb-textarea { resize: vertical; min-height: 100px; }
+.bb-select {
+  cursor: pointer;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  padding-right: 36px;
+}
+
+.bb-checkbox,
+.bb-radio {
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+  accent-color: var(--brand-073m);
+  flex-shrink: 0;
+}
+
+/* ─── Тумблер (Sprint 3) ──────────────────────────────────────── */
+.bb-toggle-track {
+  display: inline-flex;
+  align-items: center;
+  width: 44px;
+  height: 24px;
+  border-radius: 12px;
+  padding: 2px;
+  cursor: pointer;
+  transition: background 0.2s;
+  flex-shrink: 0;
+}
+.bb-toggle-thumb {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
+  transition: transform 0.2s;
+}