@spectrabrain/eds 0.2.0 → 0.2.2

package/CHANGELOG.md

@@ -1,8 +1,26 @@
 # @spectrabrain/eds
 
-## 0.2.0
+## 0.2.2
 
-### Minor Changes
+### Patch Changes
+
+- 64cc14d: 소비처 조치: 없습니다.
+
+  `ButtonIconName`과 `spec.json`의 `api.iconNames`에 eva-app에서 반복 사용 중인 canonical lucide 아이콘 32개를 추가합니다. 기존 `Button`의 동기 SSR 렌더링과 allowlist 밖 아이콘의 ReactElement 슬롯 계약은 유지합니다.
+
+## 0.2.1
+
+### Patch Changes
+
+- 소비처 조치: 업데이트 뒤 `npm run sync:eds`를 실행해 spacing·radius Tailwind alias를 생성하고, UI 작업에서는 `TOKEN_CONTEXT.md`의 public token 이름과 `cssVar()` 사용법을 따릅니다.
+
+  공개 semantic token에 현재 spacing·radius scale 전체를 추가했습니다. `spacing-0.5`처럼 소수점이 있는 public 이름은 TypeScript 자동완성과 `tokens.json`의 CSS variable mapping을 유지하며, CSS reference에서만 점을 escape합니다. Tailwind에서는 `p-eds-spacing-0-5`, `rounded-eds-radius-1` 같은 CSS-safe alias를 생성합니다. EDS component가 없거나 contract가 맞지 않는 화면은 소비처 로컬 UI로 구현하고 공개 token을 사용하도록 AI 문서와 검사를 맞췄습니다.
+
+  이 변경은 `main` 기준으로 배포하며, 이미 0.2.0을 사용하는 소비처의 코드 변경은 없습니다.
+
+## 0.1.1
+
+### Patch Changes
 
 - 190c1d1: 소비처 조치: 업데이트 뒤 sync가 `note:` 줄을 출력하면 그 안내대로 지시 파일을 만들거나 루트 지시 파일에 안내 문장을 넣습니다.
 
@@ -48,10 +66,6 @@
 
   `eds align`과 `eds align --check`, 새 공개 문서 `FRONTEND_CONVENTIONS.md`를 추가했습니다. Vite + React 프로토타입의 frontend package에서 `npx @spectrabrain/eds align`을 실행하면 소스를 바꾸지 않고 `.eds/align/`에 AI 에이전트가 따를 8단계 계획(`PLAN.md`), 진행·기준선·결정을 적는 `NOTES.md`, 이 저장소의 경로로 채운 설정·소스 템플릿을 만듭니다. `--check`는 컨벤션(FSD 구조, import 방향, 의존성, 설정, script)과, 계획이 있으면 기준 commit 이후 보호 경로(backend·배포 설정·frontend package 밖)의 변경을 점검합니다. UI 문구는 당분간 다국어 리소스 없이 한국어로 컴포넌트에 직접 쓰고, 나중에 리소스로 옮길 수 있도록 문장을 한 문자열로 씁니다(「UI 문구」). 사용법·보호 경로·exit code는 `CONSUMER_AGENT.md` 「프로토타입 정렬」, 규칙은 `FRONTEND_CONVENTIONS.md`에 있습니다.
 
-- d6f7889: 소비처 조치: 업데이트 뒤 `npm run sync:eds`를 실행해 spacing·radius Tailwind alias를 생성하고, UI 작업에서는 `TOKEN_CONTEXT.md`의 public token 이름과 `cssVar()` 사용법을 따릅니다.
-
-  공개 semantic token에 현재 spacing·radius scale 전체를 추가했습니다. `spacing-0.5`처럼 소수점이 있는 public 이름은 TypeScript 자동완성과 `tokens.json`의 CSS variable mapping을 유지하며, CSS reference에서만 점을 escape합니다. Tailwind에서는 `p-eds-spacing-0-5`, `rounded-eds-radius-1` 같은 CSS-safe alias를 생성합니다. EDS component가 없거나 contract가 맞지 않는 화면은 소비처 로컬 UI로 구현하고 공개 token을 사용하도록 AI 문서와 검사를 맞췄습니다.
-
 - ec3d964: 소비처 조치: Tailwind CSS v3 저장소(CSS가 `@tailwind` 지시어를 씀)에서 `EDS_TAILWIND_ROOT`나 `package.json` `eds.tailwindRoot`가 v3 CSS 파일을 가리키면 이제 `eds sync`·`eds doctor`가 exit 2로 멈춥니다. 그 설정을 지우고, 앱 진입점에서 `@spectrabrain/eds/styles.css`를 import한 뒤 `var(--eds-*)`·`cssVar()`로 token을 씁니다. Tailwind CSS v4로 올리는 것은 사용자에게 확인한 뒤 진행합니다.
 
   Tailwind root가 없을 때 sync·doctor는 v3 저장소에 `Tailwind CSS v3 detected` note를, 그 밖의 저장소에 `@import "tailwindcss";`를 추가한 뒤 sync를 다시 실행하라는 note를 출력합니다. `TAILWIND_V4.md`는 설정 순서, 관찰할 수 있는 조건으로 고르는 adapter 표(Vite에서는 `@tailwindcss/vite`만), 기존 설정에 합치는 예시, `src/styles/eds-tokens.css`를 commit하는 이유, Tailwind 저장소 전용 완료 기준만 담는 설정 문서로 바뀝니다. class 사용법은 `TOKEN_CONTEXT.md`에만 둡니다. `CONSUMER_AGENT.md`는 yarn berry에서 doctor hook 대신 `typecheck`·`build` 앞의 `eds doctor`가 같은 역할을 한다고 적습니다.
@@ -62,7 +76,7 @@
 
 - 82a251f: 소비처 조치: 업데이트 뒤 `eds doctor`가 대소문자를 틀린 token class(예: `outline-eds-stroke-FocusRing`)를 `unknown:`으로 새로 보고하면 token 이름의 대소문자대로 고칩니다. doctor가 이제 대소문자가 섞인 class(예: `outline-eds-stroke-focusRing`)도 검사하기 때문입니다.
 
-  `TOKEN_CONTEXT.md`는 역할별 실제 token 이름표(의미 색, `neutral`, `layer`·`transparent`·`disabled`·`placeholder`·`focus`·`focusRing`)와 hover가 bg에만 있다는 점, `ring-`·`outline-`·`divide-`·`fill-` class 패턴, exact token이 없을 때 조건을 하나씩 완화하는 순서, 의미별 용도(`critical` 오류·위험 등)와 Button과 같은 배경·글자 조합을 담습니다. 확인되지 않은 조합(`-contrast` fg의 용도, `layer`와 `neutral` 배경의 구분, divider 단계)은 `미결`로 표시합니다. 예시는 surface 배경 class를 빼고 divider를 `<hr className="border-t …">`로 바꾸며, 공개 spacing·radius scale과 dotted public name·CSS-safe Tailwind alias·`cssVar()` 사용법을 함께 안내합니다.
+  `TOKEN_CONTEXT.md`는 역할별 실제 token 이름표(의미 색, `neutral`, `layer`·`transparent`·`disabled`·`placeholder`·`focus`·`focusRing`)와 hover가 bg에만 있다는 점, `ring-`·`outline-`·`divide-`·`fill-` class 패턴, exact token이 없을 때 조건을 하나씩 완화하는 순서, 의미별 용도(`critical` 오류·위험 등)와 Button과 같은 배경·글자 조합을 담습니다. 확인되지 않은 조합(`-contrast` fg의 용도, `layer`와 `neutral` 배경의 구분, divider 단계)은 `미결`로 표시합니다. 예시는 surface 배경 class를 빼고 divider를 `<hr className="border-t …">`로 바꾸며, 기존 scale로 표현할 수 없는 spacing·radius는 멈추고 사용자에게 확인하도록 안내합니다.
 
 ## 0.1.0
 

package/dist/components/Button/spec.json

@@ -1,6 +1,6 @@
 {
   "specVersion": 1,
-  "packageVersion": "0.2.0",
+  "packageVersion": "0.2.2",
   "name": "Button",
   "purpose": "사용자가 즉시 실행할 수 있는 행동과 탐색을 표현하는 인터랙티브 요소입니다.",
   "usageContexts": [
@@ -167,28 +167,45 @@
     "iconNames": [
       "ArrowLeft",
       "ArrowRight",
+      "BellDot",
+      "Calendar",
+      "CalendarClock",
+      "Camera",
+      "CameraOff",
       "Check",
       "ChevronDown",
       "ChevronLeft",
       "ChevronRight",
       "ChevronUp",
+      "ChevronsLeft",
+      "ChevronsRight",
       "ChevronsUpDown",
       "Circle",
       "CircleAlert",
+      "CircleCheck",
       "CircleCheckBig",
       "CirclePause",
       "CirclePlay",
+      "CirclePlus",
       "CircleQuestionMark",
       "ClockAlert",
+      "ClockFading",
       "Copy",
+      "Crown",
+      "Ellipsis",
+      "ExternalLink",
       "Eye",
       "EyeOff",
       "FaceNeutral",
+      "File",
       "FileDown",
+      "FileInput",
       "FilePenLine",
       "FileX",
       "FolderClock",
+      "FolderUp",
       "Fullscreen",
+      "GripVertical",
       "ImageOff",
       "ImagePlus",
       "Info",
@@ -197,20 +214,35 @@
       "Layers2",
       "List",
       "LoaderCircle",
+      "Lock",
       "LockOpen",
+      "LogOut",
       "Mail",
       "Megaphone",
+      "MessageSquareDashed",
       "Minimize",
       "Minus",
       "Moon",
       "Paperclip",
+      "PenLine",
+      "Pencil",
       "Plus",
       "RotateCw",
       "Search",
+      "Settings",
+      "SquareDashed",
       "Sun",
+      "SunDim",
       "ThumbsUp",
       "Trash",
+      "TrendingUpDown",
+      "User",
+      "UserCog",
+      "UserPen",
+      "UserPlus",
+      "Users",
       "VectorSquare",
+      "Webhook",
       "X"
     ],
     "typeExports": [

package/dist/index.d.mts

@@ -2,7 +2,7 @@ export { SemanticToken, SemanticTokenCssReference, SemanticTokenCssVariable, Sem
 import { ButtonHTMLAttributes, ReactNode, ReactElement, Ref, AnchorHTMLAttributes } from 'react';
 
 /** 이름으로 지정할 수 있는 lucide 아이콘의 allowlist입니다. 목록 밖 아이콘은 icon·startIcon·endIcon에 ReactElement로 전달하고, 같은 아이콘이 두 화면 이상에서 반복되면 allowlist PR을 엽니다. */
-type ButtonIconName = "ArrowLeft" | "ArrowRight" | "Check" | "ChevronDown" | "ChevronLeft" | "ChevronRight" | "ChevronUp" | "ChevronsUpDown" | "Circle" | "CircleAlert" | "CircleCheckBig" | "CirclePause" | "CirclePlay" | "CircleQuestionMark" | "ClockAlert" | "Copy" | "Eye" | "EyeOff" | "FaceNeutral" | "FileDown" | "FilePenLine" | "FileX" | "FolderClock" | "Fullscreen" | "ImageOff" | "ImagePlus" | "Info" | "Key" | "Languages" | "Layers2" | "List" | "LoaderCircle" | "LockOpen" | "Mail" | "Megaphone" | "Minimize" | "Minus" | "Moon" | "Paperclip" | "Plus" | "RotateCw" | "Search" | "Sun" | "ThumbsUp" | "Trash" | "VectorSquare" | "X";
+type ButtonIconName = "ArrowLeft" | "ArrowRight" | "BellDot" | "Calendar" | "CalendarClock" | "Camera" | "CameraOff" | "Check" | "ChevronDown" | "ChevronLeft" | "ChevronRight" | "ChevronUp" | "ChevronsLeft" | "ChevronsRight" | "ChevronsUpDown" | "Circle" | "CircleAlert" | "CircleCheck" | "CircleCheckBig" | "CirclePause" | "CirclePlay" | "CirclePlus" | "CircleQuestionMark" | "ClockAlert" | "ClockFading" | "Copy" | "Crown" | "Ellipsis" | "ExternalLink" | "Eye" | "EyeOff" | "FaceNeutral" | "File" | "FileDown" | "FileInput" | "FilePenLine" | "FileX" | "FolderClock" | "FolderUp" | "Fullscreen" | "GripVertical" | "ImageOff" | "ImagePlus" | "Info" | "Key" | "Languages" | "Layers2" | "List" | "LoaderCircle" | "Lock" | "LockOpen" | "LogOut" | "Mail" | "Megaphone" | "MessageSquareDashed" | "Minimize" | "Minus" | "Moon" | "Paperclip" | "PenLine" | "Pencil" | "Plus" | "RotateCw" | "Search" | "Settings" | "SquareDashed" | "Sun" | "SunDim" | "ThumbsUp" | "Trash" | "TrendingUpDown" | "User" | "UserCog" | "UserPen" | "UserPlus" | "Users" | "VectorSquare" | "Webhook" | "X";
 
 /** 버튼 크기입니다. */
 type ButtonSize = "xs" | "sm" | "md";

package/dist/index.d.ts

@@ -2,7 +2,7 @@ export { SemanticToken, SemanticTokenCssReference, SemanticTokenCssVariable, Sem
 import { ButtonHTMLAttributes, ReactNode, ReactElement, Ref, AnchorHTMLAttributes } from 'react';
 
 /** 이름으로 지정할 수 있는 lucide 아이콘의 allowlist입니다. 목록 밖 아이콘은 icon·startIcon·endIcon에 ReactElement로 전달하고, 같은 아이콘이 두 화면 이상에서 반복되면 allowlist PR을 엽니다. */
-type ButtonIconName = "ArrowLeft" | "ArrowRight" | "Check" | "ChevronDown" | "ChevronLeft" | "ChevronRight" | "ChevronUp" | "ChevronsUpDown" | "Circle" | "CircleAlert" | "CircleCheckBig" | "CirclePause" | "CirclePlay" | "CircleQuestionMark" | "ClockAlert" | "Copy" | "Eye" | "EyeOff" | "FaceNeutral" | "FileDown" | "FilePenLine" | "FileX" | "FolderClock" | "Fullscreen" | "ImageOff" | "ImagePlus" | "Info" | "Key" | "Languages" | "Layers2" | "List" | "LoaderCircle" | "LockOpen" | "Mail" | "Megaphone" | "Minimize" | "Minus" | "Moon" | "Paperclip" | "Plus" | "RotateCw" | "Search" | "Sun" | "ThumbsUp" | "Trash" | "VectorSquare" | "X";
+type ButtonIconName = "ArrowLeft" | "ArrowRight" | "BellDot" | "Calendar" | "CalendarClock" | "Camera" | "CameraOff" | "Check" | "ChevronDown" | "ChevronLeft" | "ChevronRight" | "ChevronUp" | "ChevronsLeft" | "ChevronsRight" | "ChevronsUpDown" | "Circle" | "CircleAlert" | "CircleCheck" | "CircleCheckBig" | "CirclePause" | "CirclePlay" | "CirclePlus" | "CircleQuestionMark" | "ClockAlert" | "ClockFading" | "Copy" | "Crown" | "Ellipsis" | "ExternalLink" | "Eye" | "EyeOff" | "FaceNeutral" | "File" | "FileDown" | "FileInput" | "FilePenLine" | "FileX" | "FolderClock" | "FolderUp" | "Fullscreen" | "GripVertical" | "ImageOff" | "ImagePlus" | "Info" | "Key" | "Languages" | "Layers2" | "List" | "LoaderCircle" | "Lock" | "LockOpen" | "LogOut" | "Mail" | "Megaphone" | "MessageSquareDashed" | "Minimize" | "Minus" | "Moon" | "Paperclip" | "PenLine" | "Pencil" | "Plus" | "RotateCw" | "Search" | "Settings" | "SquareDashed" | "Sun" | "SunDim" | "ThumbsUp" | "Trash" | "TrendingUpDown" | "User" | "UserCog" | "UserPen" | "UserPlus" | "Users" | "VectorSquare" | "Webhook" | "X";
 
 /** 버튼 크기입니다. */
 type ButtonSize = "xs" | "sm" | "md";

package/dist/index.js

@@ -1611,28 +1611,45 @@ function cssVar(name) {
 var buttonIcons = {
   ArrowLeft: lucideReact.ArrowLeft,
   ArrowRight: lucideReact.ArrowRight,
+  BellDot: lucideReact.BellDot,
+  Calendar: lucideReact.Calendar,
+  CalendarClock: lucideReact.CalendarClock,
+  Camera: lucideReact.Camera,
+  CameraOff: lucideReact.CameraOff,
   Check: lucideReact.Check,
   ChevronDown: lucideReact.ChevronDown,
   ChevronLeft: lucideReact.ChevronLeft,
   ChevronRight: lucideReact.ChevronRight,
   ChevronUp: lucideReact.ChevronUp,
+  ChevronsLeft: lucideReact.ChevronsLeft,
+  ChevronsRight: lucideReact.ChevronsRight,
   ChevronsUpDown: lucideReact.ChevronsUpDown,
   Circle: lucideReact.Circle,
   CircleAlert: lucideReact.CircleAlert,
+  CircleCheck: lucideReact.CircleCheck,
   CircleCheckBig: lucideReact.CircleCheckBig,
   CirclePause: lucideReact.CirclePause,
   CirclePlay: lucideReact.CirclePlay,
+  CirclePlus: lucideReact.CirclePlus,
   CircleQuestionMark: lucideReact.CircleQuestionMark,
   ClockAlert: lucideReact.ClockAlert,
+  ClockFading: lucideReact.ClockFading,
   Copy: lucideReact.Copy,
+  Crown: lucideReact.Crown,
+  Ellipsis: lucideReact.Ellipsis,
+  ExternalLink: lucideReact.ExternalLink,
   Eye: lucideReact.Eye,
   EyeOff: lucideReact.EyeOff,
   FaceNeutral: lucideReact.FaceNeutral,
+  File: lucideReact.File,
   FileDown: lucideReact.FileDown,
+  FileInput: lucideReact.FileInput,
   FilePenLine: lucideReact.FilePenLine,
   FileX: lucideReact.FileX,
   FolderClock: lucideReact.FolderClock,
+  FolderUp: lucideReact.FolderUp,
   Fullscreen: lucideReact.Fullscreen,
+  GripVertical: lucideReact.GripVertical,
   ImageOff: lucideReact.ImageOff,
   ImagePlus: lucideReact.ImagePlus,
   Info: lucideReact.Info,
@@ -1641,20 +1658,35 @@ var buttonIcons = {
   Layers2: lucideReact.Layers2,
   List: lucideReact.List,
   LoaderCircle: lucideReact.LoaderCircle,
+  Lock: lucideReact.Lock,
   LockOpen: lucideReact.LockOpen,
+  LogOut: lucideReact.LogOut,
   Mail: lucideReact.Mail,
   Megaphone: lucideReact.Megaphone,
+  MessageSquareDashed: lucideReact.MessageSquareDashed,
   Minimize: lucideReact.Minimize,
   Minus: lucideReact.Minus,
   Moon: lucideReact.Moon,
   Paperclip: lucideReact.Paperclip,
+  PenLine: lucideReact.PenLine,
+  Pencil: lucideReact.Pencil,
   Plus: lucideReact.Plus,
   RotateCw: lucideReact.RotateCw,
   Search: lucideReact.Search,
+  Settings: lucideReact.Settings,
+  SquareDashed: lucideReact.SquareDashed,
   Sun: lucideReact.Sun,
+  SunDim: lucideReact.SunDim,
   ThumbsUp: lucideReact.ThumbsUp,
   Trash: lucideReact.Trash,
+  TrendingUpDown: lucideReact.TrendingUpDown,
+  User: lucideReact.User,
+  UserCog: lucideReact.UserCog,
+  UserPen: lucideReact.UserPen,
+  UserPlus: lucideReact.UserPlus,
+  Users: lucideReact.Users,
   VectorSquare: lucideReact.VectorSquare,
+  Webhook: lucideReact.Webhook,
   X: lucideReact.X
 };
 

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { forwardRef, isValidElement, Children, createElement } from 'react';
-import { X, VectorSquare, Trash, ThumbsUp, Sun, Search, RotateCw, Plus, Paperclip, Moon, Minus, Minimize, Megaphone, Mail, LockOpen, LoaderCircle, List, Layers2, Languages, Key, Info, ImagePlus, ImageOff, Fullscreen, FolderClock, FileX, FilePenLine, FileDown, FaceNeutral, EyeOff, Eye, Copy, ClockAlert, CircleQuestionMark, CirclePlay, CirclePause, CircleCheckBig, CircleAlert, Circle, ChevronsUpDown, ChevronUp, ChevronRight, ChevronLeft, ChevronDown, Check, ArrowRight, ArrowLeft } from 'lucide-react';
+import { X, Webhook, VectorSquare, Users, UserPlus, UserPen, UserCog, User, TrendingUpDown, Trash, ThumbsUp, SunDim, Sun, SquareDashed, Settings, Search, RotateCw, Plus, Pencil, PenLine, Paperclip, Moon, Minus, Minimize, MessageSquareDashed, Megaphone, Mail, LogOut, LockOpen, Lock, LoaderCircle, List, Layers2, Languages, Key, Info, ImagePlus, ImageOff, GripVertical, Fullscreen, FolderUp, FolderClock, FileX, FilePenLine, FileInput, FileDown, File, FaceNeutral, EyeOff, Eye, ExternalLink, Ellipsis, Crown, Copy, ClockFading, ClockAlert, CircleQuestionMark, CirclePlus, CirclePlay, CirclePause, CircleCheckBig, CircleCheck, CircleAlert, Circle, ChevronsUpDown, ChevronsRight, ChevronsLeft, ChevronUp, ChevronRight, ChevronLeft, ChevronDown, Check, CameraOff, Camera, CalendarClock, Calendar, BellDot, ArrowRight, ArrowLeft } from 'lucide-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/generated/tokens.ts
@@ -1609,28 +1609,45 @@ function cssVar(name) {
 var buttonIcons = {
   ArrowLeft,
   ArrowRight,
+  BellDot,
+  Calendar,
+  CalendarClock,
+  Camera,
+  CameraOff,
   Check,
   ChevronDown,
   ChevronLeft,
   ChevronRight,
   ChevronUp,
+  ChevronsLeft,
+  ChevronsRight,
   ChevronsUpDown,
   Circle,
   CircleAlert,
+  CircleCheck,
   CircleCheckBig,
   CirclePause,
   CirclePlay,
+  CirclePlus,
   CircleQuestionMark,
   ClockAlert,
+  ClockFading,
   Copy,
+  Crown,
+  Ellipsis,
+  ExternalLink,
   Eye,
   EyeOff,
   FaceNeutral,
+  File,
   FileDown,
+  FileInput,
   FilePenLine,
   FileX,
   FolderClock,
+  FolderUp,
   Fullscreen,
+  GripVertical,
   ImageOff,
   ImagePlus,
   Info,
@@ -1639,20 +1656,35 @@ var buttonIcons = {
   Layers2,
   List,
   LoaderCircle,
+  Lock,
   LockOpen,
+  LogOut,
   Mail,
   Megaphone,
+  MessageSquareDashed,
   Minimize,
   Minus,
   Moon,
   Paperclip,
+  PenLine,
+  Pencil,
   Plus,
   RotateCw,
   Search,
+  Settings,
+  SquareDashed,
   Sun,
+  SunDim,
   ThumbsUp,
   Trash,
+  TrendingUpDown,
+  User,
+  UserCog,
+  UserPen,
+  UserPlus,
+  Users,
   VectorSquare,
+  Webhook,
   X
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spectrabrain/eds",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "EVA services' shared React design system",
   "author": "SpectraBrain",
   "license": "UNLICENSED",