bo-ui-kit 0.1.0

package/dist/styles.css

@@ -0,0 +1,59 @@
+/* bo-ui-kit — 디자인 토큰 + 컴포넌트 유틸리티 */
+/**
+ * 디자인 토큰 (단일 소스) — "BO UI Kit" (Figma) 파운데이션에서 추출.
+ * 색상은 Tailwind 불투명도 유틸리티 지원을 위해 RGB 채널(공백 구분)로 저장한다.
+ *
+ * 이 파일은 앱(src/index.css 가 @import)과 npm 라이브러리(dist/styles.css 빌드)가
+ * **함께** 사용한다. 토큰을 바꿀 땐 여기만 고치면 양쪽에 반영된다.
+ */
+:root {
+  --background: 248 250 252; /* #f8fafc */
+  --foreground: 29 41 61; /* #1d293d */
+  --card: 255 255 255; /* #ffffff */
+  --card-foreground: 2 6 24; /* #020618 */
+  --primary: 43 127 255; /* #2B7FFF */
+  --primary-foreground: 255 255 255; /* #ffffff */
+  --secondary: 226 232 240; /* #e2e8f0 */
+  --secondary-foreground: 49 65 88; /* #314158 */
+  --accent: 248 250 252; /* #f8fafc — Select/메뉴 항목 hover 배경 */
+  --accent-foreground: 43 127 255; /* #2b7fff — Select 항목 텍스트(primary 와 동일) */
+  --popover: 255 255 255; /* #ffffff — Select 드롭다운 패널 배경 */
+  --popover-foreground: 2 6 24; /* #020618 */
+  --destructive: 239 68 68; /* #ef4444 — Destructive 버튼 채움 + 폼 에러(Input border, Field error text) */
+  --destructive-foreground: 185 28 28; /* #b91c1c */
+  --success-foreground: 4 120 87; /* #047857 */
+  --muted-foreground: 15 23 43; /* #0f172b @ 50% → muted-foreground */
+  --border: 15 23 43; /* #0f172b @ 8% (border 토큰에서 알파 적용) */
+  --ring: 43 127 255; /* #2B7FFF — primary 와 동일 */
+  --disabled: 69 85 108; /* #45556c — Figma `disabled` 토큰. OTP active 슬롯 테두리/링 등 */
+
+  --radius: 10px;
+}
+
+/**
+ * 다크 테마 — Figma "Dark Mode Preview" 기준 근사값(검증 전 TODO).
+ * 정확한 다크 토큰이 필요하면 해당 프레임에서 추가 추출 가능.
+ */
+.dark {
+  --background: 2 6 24;
+  --foreground: 248 250 252;
+  --card: 15 23 43;
+  --card-foreground: 248 250 252;
+  --primary: 43 127 255;
+  --primary-foreground: 255 255 255;
+  --secondary: 30 41 59;
+  --secondary-foreground: 248 250 252;
+  --accent: 30 41 59;
+  --accent-foreground: 43 127 255;
+  --popover: 15 23 43;
+  --popover-foreground: 248 250 252;
+  --destructive: 239 68 68;
+  --destructive-foreground: 248 113 113;
+  --success-foreground: 52 211 153; /* #34d399 (dark 근사) */
+  --muted-foreground: 148 163 184;
+  --border: 248 250 252;
+  --ring: 43 127 255;
+  --disabled: 69 85 108;
+}
+
+*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:after,:before{box-sizing:border-box;border:0 solid}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.relative{position:relative}.inset-y-0{top:0;bottom:0}.left-0{left:0}.top-full{top:100%}.z-10{z-index:10}.z-50{z-index:50}.mt-1{margin-top:.25rem}.flex{display:flex}.inline-flex{display:inline-flex}.size-2{width:.5rem;height:.5rem}.size-2\.5{width:.625rem;height:.625rem}.size-4{width:1rem;height:1rem}.size-7{width:1.75rem;height:1.75rem}.size-8{width:2rem;height:2rem}.size-9{width:2.25rem;height:2.25rem}.size-\[18px\]{width:18px;height:18px}.h-0\.5{height:.125rem}.h-10{height:2.5rem}.h-2{height:.5rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-9{height:2.25rem}.max-h-64{max-height:16rem}.w-1\.5{width:.375rem}.w-2{width:.5rem}.w-3{width:.75rem}.w-7{width:1.75rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.min-w-0{min-width:0}.min-w-10{min-width:2.5rem}.min-w-6{min-width:1.5rem}.min-w-7{min-width:1.75rem}.min-w-8{min-width:2rem}.min-w-9{min-width:2.25rem}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.rotate-180{--tw-rotate:180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0{gap:0}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-px{gap:1px}.overflow-auto{overflow:auto}.overflow-hidden,.truncate{overflow:hidden}.truncate{text-overflow:ellipsis}.truncate,.whitespace-nowrap{white-space:nowrap}.\!rounded-none{border-radius:0!important}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-radius{border-radius:10px}.rounded-radius-lg{border-radius:8px}.rounded-radius-sm{border-radius:4px}.rounded-radius-xl{border-radius:12px}.border{border-width:1px}.border-border{border-color:rgb(var(--border)/.08)}.border-destructive{--tw-border-opacity:1;border-color:rgb(var(--destructive)/var(--tw-border-opacity,1))}.border-disabled\/30{border-color:rgb(var(--disabled)/.3)}.border-input{border-color:rgb(var(--border)/.08)}.border-primary{--tw-border-opacity:1;border-color:rgb(var(--primary)/var(--tw-border-opacity,1))}.border-transparent{border-color:transparent}.bg-background{--tw-bg-opacity:1;background-color:rgb(var(--background)/var(--tw-bg-opacity,1))}.bg-border{background-color:rgb(var(--border)/.08)}.bg-card{background-color:rgb(var(--card)/var(--tw-bg-opacity,1))}.bg-card,.bg-destructive{--tw-bg-opacity:1}.bg-destructive{background-color:rgb(var(--destructive)/var(--tw-bg-opacity,1))}.bg-input{background-color:rgb(var(--border)/.08)}.bg-popover{background-color:rgb(var(--popover)/var(--tw-bg-opacity,1))}.bg-popover,.bg-primary{--tw-bg-opacity:1}.bg-primary{background-color:rgb(var(--primary)/var(--tw-bg-opacity,1))}.bg-primary\/\[0\.04\]{background-color:rgb(var(--primary)/.04)}.bg-secondary{--tw-bg-opacity:1;background-color:rgb(var(--secondary)/var(--tw-bg-opacity,1))}.bg-transparent{background-color:transparent}.p-1{padding:.25rem}.p-2{padding:.5rem}.px-0{padding-left:0;padding-right:0}.px-0\.5{padding-left:.125rem;padding-right:.125rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.text-left{text-align:left}.text-center{text-align:center}.text-base{font-size:16px;line-height:24px}.text-sm{font-size:14px;line-height:20px}.text-xs{font-size:12px;line-height:14px;letter-spacing:.12px}.font-medium{font-weight:500}.leading-5{line-height:1.25rem}.leading-\[14px\]{line-height:14px}.tracking-\[0\.12px\]{letter-spacing:.12px}.text-accent-foreground{--tw-text-opacity:1;color:rgb(var(--accent-foreground)/var(--tw-text-opacity,1))}.text-destructive-foreground{--tw-text-opacity:1;color:rgb(var(--destructive-foreground)/var(--tw-text-opacity,1))}.text-foreground{--tw-text-opacity:1;color:rgb(var(--foreground)/var(--tw-text-opacity,1))}.text-muted-foreground{color:rgb(var(--muted-foreground)/.5)}.text-primary-foreground{--tw-text-opacity:1;color:rgb(var(--primary-foreground)/var(--tw-text-opacity,1))}.underline-offset-4{text-underline-offset:4px}.accent-foreground{accent-color:rgb(var(--foreground)/1)}.opacity-50{opacity:.5}.opacity-80{opacity:.8}.opacity-\[0\.64\]{opacity:.64}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-btn{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-btn{--tw-shadow:0 1px 1px rgba(38,38,38,.24),inset 0 1px 0 hsla(0,0%,100%,.16);--tw-shadow-colored:0 1px 1px var(--tw-shadow-color),inset 0 1px 0 var(--tw-shadow-color)}.shadow-popover{--tw-shadow:0px 10px 15px -3px rgba(0,0,0,.05),0px 4px 6px -4px rgba(0,0,0,.05);--tw-shadow-colored:0px 10px 15px -3px var(--tw-shadow-color),0px 4px 6px -4px var(--tw-shadow-color)}.shadow-popover,.shadow-xs{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-xs{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-popover{--tw-shadow-color:rgb(var(--popover)/1);--tw-shadow:var(--tw-shadow-colored)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.ring,.ring-\[3px\]{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-disabled\/20{--tw-ring-color:rgb(var(--disabled)/0.2)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-\[color\2c box-shadow\]{transition-property:color,box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[width\]{transition-property:width;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.placeholder\:text-muted-foreground::-moz-placeholder{color:rgb(var(--muted-foreground)/.5)}.placeholder\:text-muted-foreground::placeholder{color:rgb(var(--muted-foreground)/.5)}.focus-within\:border-disabled\/30:focus-within{border-color:rgb(var(--disabled)/.3)}.focus-within\:ring-\[3px\]:focus-within{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-within\:ring-destructive\/\[0\.15\]:focus-within{--tw-ring-color:rgb(var(--destructive)/0.15)}.focus-within\:ring-disabled\/\[0\.07\]:focus-within{--tw-ring-color:rgb(var(--disabled)/0.07)}.focus-within\:ring-offset-0:focus-within{--tw-ring-offset-width:0px}.hover\:bg-accent:hover{--tw-bg-opacity:1;background-color:rgb(var(--accent)/var(--tw-bg-opacity,1))}.hover\:bg-destructive\/10:hover{background-color:rgb(var(--destructive)/.1)}.hover\:bg-destructive\/90:hover{background-color:rgb(var(--destructive)/.9)}.hover\:bg-primary\/90:hover{background-color:rgb(var(--primary)/.9)}.hover\:bg-secondary:hover{--tw-bg-opacity:1;background-color:rgb(var(--secondary)/var(--tw-bg-opacity,1))}.hover\:bg-secondary\/50:hover{background-color:rgb(var(--secondary)/.5)}.hover\:bg-secondary\/80:hover{background-color:rgb(var(--secondary)/.8)}.hover\:underline:hover{text-decoration-line:underline}.focus-visible\:z-10:focus-visible{z-index:10}.focus-visible\:border-disabled\/30:focus-visible{border-color:rgb(var(--disabled)/.3)}.focus-visible\:bg-accent:focus-visible{--tw-bg-opacity:1;background-color:rgb(var(--accent)/var(--tw-bg-opacity,1))}.focus-visible\:ring-2:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\:ring-\[3px\]:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\:ring-destructive\/\[0\.15\]:focus-visible{--tw-ring-color:rgb(var(--destructive)/0.15)}.focus-visible\:ring-disabled\/\[0\.07\]:focus-visible{--tw-ring-color:rgb(var(--disabled)/0.07)}.focus-visible\:ring-ring:focus-visible{--tw-ring-opacity:1;--tw-ring-color:rgb(var(--ring)/var(--tw-ring-opacity,1))}.focus-visible\:ring-offset-0:focus-visible{--tw-ring-offset-width:0px}.focus-visible\:ring-offset-1:focus-visible{--tw-ring-offset-width:1px}.focus-visible\:ring-offset-background:focus-visible{--tw-ring-offset-color:rgb(var(--background)/1)}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}.disabled\:opacity-\[0\.64\]:disabled{opacity:.64}.peer:focus-visible~.peer-focus-visible\:ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.peer:focus-visible~.peer-focus-visible\:ring-ring{--tw-ring-opacity:1;--tw-ring-color:rgb(var(--ring)/var(--tw-ring-opacity,1))}.peer:focus-visible~.peer-focus-visible\:ring-offset-1{--tw-ring-offset-width:1px}.peer:focus-visible~.peer-focus-visible\:ring-offset-background{--tw-ring-offset-color:rgb(var(--background)/1)}.peer:disabled~.peer-disabled\:cursor-not-allowed{cursor:not-allowed}.peer:disabled~.peer-disabled\:opacity-70{opacity:.7}.has-\[\:disabled\]\:cursor-not-allowed:has(:disabled){cursor:not-allowed}.has-\[\:disabled\]\:opacity-\[0\.64\]:has(:disabled){opacity:.64}.data-\[state\=on\]\:bg-secondary\/\[0\.64\][data-state=on]{background-color:rgb(var(--secondary)/.64)}.data-\[state\=off\]\:hover\:bg-card\/50:hover[data-state=off]{background-color:rgb(var(--card)/.5)}.\[\&\>\*\:not\(\:first-child\)\]\:-ml-px>:not(:first-child){margin-left:-1px}.\[\&\>\*\:not\(\:first-child\)\]\:-mt-px>:not(:first-child){margin-top:-1px}.\[\&_\[data-label\]\]\:px-1\.5 [data-label]{padding-left:.375rem;padding-right:.375rem}.\[\&_svg\]\:size-4 svg{width:1rem;height:1rem}.\[\&_svg\]\:size-5 svg{width:1.25rem;height:1.25rem}.\[\&_svg\]\:size-\[18px\] svg{width:18px;height:18px}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "bo-ui-kit",
+  "version": "0.1.0",
+  "description": "BO UI Kit — Figma 디자인 시스템에서 추출한 React 컴포넌트 라이브러리 (Tailwind 토큰 기반).",
+  "license": "MIT",
+  "type": "module",
+  "workspaces": [
+    "examples/consumer"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/components/ui/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/components/ui/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit",
+    "verify": "tsc --noEmit && vite build",
+    "build:lib": "node scripts/build-lib.mjs",
+    "prepack": "node scripts/build-lib.mjs",
+    "pack:test": "node scripts/pack-test.mjs",
+    "check:figma": "node --env-file-if-exists=.env scripts/check-figma-version.mjs",
+    "test:visual": "playwright test",
+    "test:visual:update": "playwright test --update-snapshots"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^2.5.5"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.60.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.11"
+  }
+}