7k-design-system 1.3.1 → 1.4.0-edge.255a8a3

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [1.4.0](https://github.com/7K-Group/7k-design-system/compare/v1.3.1...v1.4.0) (2026-10-16)
+
+
+### Features
+
+* **react:** Tag, Banner, Range, ColorSwatch, Form, ButtonGroup components ([#69](https://github.com/7K-Group/7k-design-system/issues/69)) ([bd31aac](https://github.com/7K-Group/7k-design-system/commit/bd31aac80c715f48d825d1f02ca998632f389ab0))
+
 ## [1.3.1](https://github.com/7K-Group/7k-design-system/compare/v1.3.0...v1.3.1) (2026-10-13)
 
 

package/DESIGN.md

@@ -4,7 +4,7 @@
 > Category: Custom · Surface: web, mobile, desktop
 > Font: Geist + Geist Mono + Geist Pixel · Major neon: #FF0FF · Secondary neon: cyan (thematic per project) · Logo: 7K · Theme: Dark-first
 > 1-bit textures: 10 patterns · 1-bit components: 40+ · 1-bit animations: 20+ keyframes
-> React UI kit: Button, Input, Badge, Card, Modal, Drawer, Toast, Tooltip, Alert, Tabs, Nav, Checkbox, Radio, Toggle, Select, Textarea, ThemeToggle, ThemeProvider, ProjectProvider, useTheme, useProject
+> React UI kit: Button, Input, Badge, Card, Modal, Drawer, Toast, Tooltip, Alert, Tabs, Nav, Checkbox, Radio, Toggle, Select, Textarea, Tag, Banner, Range, ColorSwatch, FormGroup, InputGroup, ButtonGroup, ButtonSplit, ThemeToggle, ThemeProvider, ProjectProvider, useTheme, useProject
 > Build: Vite + PostCSS + TypeScript · Test: Vitest + Testing Library · Docs: Storybook
 
 ## Source context
@@ -25,7 +25,7 @@ Key constraints derived from the source:
 - **1-bit manga influence** → 10-texture background pattern library (scanline, halftone, dot matrix, stripes, crosshatch, checkerboard, noise, vignette). All textures are CSS gradients — no images, no SVG humans.
 - **Abstract 1-bit animations** → 20+ animation keyframes organized as ambient (continuous) and trigger (burst) categories. Step timing for retro feel, reduced-motion collapse.
 - **1-bit component system** → 40+ components with zero radius, 2px white borders, invert hover state. Unified black/white visual language with thin accent layer modifiers for color moments.
-- **React UI kit** → TypeScript React components (Button, Input, Badge, Card, Modal, Drawer, Toast, Tooltip, Alert, Tabs, Nav, Checkbox, Radio, Toggle, Select, Textarea, ThemeToggle) with ThemeProvider, ProjectProvider, useTheme, and useProject hooks.
+- **React UI kit** → TypeScript React components (Button, Input, Badge, Card, Modal, Drawer, Toast, Tooltip, Alert, Tabs, Nav, Checkbox, Radio, Toggle, Select, Textarea, Tag, Banner, Range, ColorSwatch, FormGroup, InputGroup, ButtonGroup, ButtonSplit, ThemeToggle) with ThemeProvider, ProjectProvider, useTheme, and useProject hooks.
 - **Modular CSS** → 10 source files in `src/css/` compiled into `dist/7k-design-system.css`.
 
 ## Package Structure

package/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: 7k-design-system
-description: Dark-first, neon-accented design system for multi-project tech company 7K. Three-font system (Geist sans + Geist Mono + Geist Pixel 5 geometric variants), #FF0FF major neon + cyan secondary (thematic per project), Tokyo neon atmosphere with high-contrast texture punctuation. Background textures on components, surface & callout utilities, isometric geometry animations, 40+ components, 20+ animation keyframes. React TypeScript UI kit (Button, Input, Badge, Card, Modal, Drawer, Toast, Tooltip, Alert, Tabs, Nav, Checkbox, Radio, Toggle, Select, Textarea, ThemeToggle, ThemeProvider, ProjectProvider, useTheme, useProject). Production-ready npm package with Vite + PostCSS build, Vitest test suite, Storybook documentation.
+description: Dark-first, neon-accented design system for multi-project tech company 7K. Three-font system (Geist sans + Geist Mono + Geist Pixel 5 geometric variants), #FF0FF major neon + cyan secondary (thematic per project), Tokyo neon atmosphere with high-contrast texture punctuation. Background textures on components, surface & callout utilities, isometric geometry animations, 40+ components, 20+ animation keyframes. React TypeScript UI kit (Button, Input, Badge, Card, Modal, Drawer, Toast, Tooltip, Alert, Tabs, Nav, Checkbox, Radio, Toggle, Select, Textarea, Tag, Banner, Range, ColorSwatch, FormGroup, InputGroup, ButtonGroup, ButtonSplit, ThemeToggle, ThemeProvider, ProjectProvider, useTheme, useProject). Production-ready npm package with Vite + PostCSS build, Vitest test suite, Storybook documentation.
 user-invocable: true
 ---
 
@@ -17,7 +17,7 @@ This package is organized as a Claude Design-style reusable skill. Each file bel
 | `src/css/tokens.css`     | All design tokens: 11-step color ramps, semantic role mapping, typography, spacing, motion, layout                                                                                                                  | Single source of truth for all token values                                |
 | `src/css/components.css` | 40+ component classes + modern neon button system + textured component variants                                                                                                                               | Zero radius, 2px borders, invert hover, accent modifiers, texture overlays |
 | `src/css/callouts.css`   | Surface & callout system — outlined surfaces, gutters, motion lines, callouts, screentone overlays                                                                                                                  | High-contrast layout primitives                                            |
-| `src/react/`             | TypeScript React UI kit — Button, Input, Badge, Card, Modal, Drawer, Toast, Tooltip, Alert, Tabs, Nav, Checkbox, Radio, Toggle, Select, Textarea, ThemeToggle, ThemeProvider, ProjectProvider, useTheme, useProject | Thin wrappers over CSS classes with ref forwarding and ARIA attributes     |
+| `src/react/`             | TypeScript React UI kit — Button, Input, Badge, Card, Modal, Drawer, Toast, Tooltip, Alert, Tabs, Nav, Checkbox, Radio, Toggle, Select, Textarea, Tag, Banner, Range, ColorSwatch, FormGroup, InputGroup, ButtonGroup, ButtonSplit, ThemeToggle, ThemeProvider, ProjectProvider, useTheme, useProject | Thin wrappers over CSS classes with ref forwarding and ARIA attributes     |
 | `src/stories/`           | Storybook documentation — Overview, Tokens, Components, Textures                                                                                                                                                    | MDX + CSF stories for interactive documentation                            |
 
 ## Source context