@jameskyeong/uix 0.1.6

package/dist/styles.css

@@ -0,0 +1,396 @@
+@import "tailwindcss";
+
+/* ===== @jameskyeong/uix Font System ===== */
+/* Outfit (영문) + Pretendard (한글) */
+@font-face {
+  font-family: 'Outfit';
+  src: url('/fonts/Outfit/Outfit-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Outfit';
+  src: url('/fonts/Outfit/Outfit-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Outfit';
+  src: url('/fonts/Outfit/Outfit-SemiBold.ttf') format('truetype');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Outfit';
+  src: url('/fonts/Outfit/Outfit-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  src: url('/fonts/Pretendard/Pretendard-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  src: url('/fonts/Pretendard/Pretendard-Medium.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  src: url('/fonts/Pretendard/Pretendard-SemiBold.woff2') format('woff2');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  src: url('/fonts/Pretendard/Pretendard-Bold.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* ===== @jameskyeong/uix Color Palette ===== */
+/* 100: lightest, 300: default, 500: darkest */
+
+:root {
+  /* Black (웜 블랙) */
+  --uix-black-100: #4a4644;
+  --uix-black-200: #393634;
+  --uix-black-300: #282524;
+  --uix-black-400: #1a1817;
+  --uix-black-500: #0d0c0b;
+
+  /* Gray (웜 그레이) */
+  --uix-gray-100: #a8a196;
+  --uix-gray-200: #8a8278;
+  --uix-gray-300: #6d6459;
+  --uix-gray-400: #534c43;
+  --uix-gray-500: #3a352e;
+
+  /* White (웜 화이트) */
+  --uix-white-100: #ffffff;
+  --uix-white-200: #faf9f7;
+  --uix-white-300: #f5f4f1;
+  --uix-white-400: #e8e6e1;
+  --uix-white-500: #d4d1ca;
+
+  /* Prime - 라벤더 블루 (메인 포인트) */
+  --uix-prime-100: #c4c4eb;
+  --uix-prime-200: #a3a3e0;
+  --uix-prime-300: #8383d6;
+  --uix-prime-400: #6363cb;
+  --uix-prime-500: #4a4ab0;
+
+  /* Sub1 - 코랄 (서브 포인트 1) */
+  --uix-sub1-100: #f5c4b8;
+  --uix-sub1-200: #f0a08b;
+  --uix-sub1-300: #e87c5d;
+  --uix-sub1-400: #d9593a;
+  --uix-sub1-500: #b84526;
+
+  /* Sub2 - 베이지 (서브 포인트 2) */
+  --uix-sub2-100: #f5ebe0;
+  --uix-sub2-200: #e6d5c3;
+  --uix-sub2-300: #d4bc9a;
+  --uix-sub2-400: #c4a67a;
+  --uix-sub2-500: #a8895e;
+
+  /* ===== Surface layers - Light Mode (backgrounds) ===== */
+  /* 100: 카드/컴포넌트 배경, 200: 구분선/보더, 300: 섹션 교차, 400: 메인 배경, 500: 강조 배경 */
+  --uix-surface-100: var(--uix-white-100);
+  --uix-surface-200: var(--uix-white-200);
+  --uix-surface-300: var(--uix-white-300);
+  --uix-surface-400: var(--uix-white-400);
+  --uix-surface-500: var(--uix-white-500);
+
+  /* ===== Border colors - Light Mode (subtle) ===== */
+  --uix-border-100: var(--uix-white-300);
+  --uix-border-200: var(--uix-white-400);
+  --uix-border-300: var(--uix-white-500);
+
+  /* ===== Text colors - Light Mode ===== */
+  --uix-text-100: var(--uix-black-300);
+  --uix-text-200: var(--uix-black-200);
+  --uix-text-300: var(--uix-gray-300);
+}
+
+.dark {
+  /* ===== Surface layers - Dark Mode (backgrounds) ===== */
+  /* 더 진한 블랙톤 사용 - 100이 가장 밝은 컴포넌트, 400이 메인 배경 */
+  --uix-surface-100: var(--uix-black-300);
+  --uix-surface-200: var(--uix-black-400);
+  --uix-surface-300: var(--uix-black-400);
+  --uix-surface-400: var(--uix-black-500);
+  --uix-surface-500: var(--uix-black-500);
+
+  /* ===== Border colors - Dark Mode (더 어둡게) ===== */
+  --uix-border-100: var(--uix-black-400);
+  --uix-border-200: var(--uix-black-300);
+  --uix-border-300: var(--uix-black-200);
+
+  /* ===== Text colors - Dark Mode ===== */
+  --uix-text-100: var(--uix-white-100);
+  --uix-text-200: var(--uix-white-300);
+  --uix-text-300: var(--uix-gray-200);
+}
+
+/* ===== Tailwind Theme Integration ===== */
+@theme inline {
+  /* Surface Layers (backgrounds) */
+  --color-uix-surface-100: var(--uix-surface-100);
+  --color-uix-surface-200: var(--uix-surface-200);
+  --color-uix-surface-300: var(--uix-surface-300);
+  --color-uix-surface-400: var(--uix-surface-400);
+  --color-uix-surface-500: var(--uix-surface-500);
+
+  /* Text Colors (100: primary, 300: muted) */
+  --color-uix-text-100: var(--uix-text-100);
+  --color-uix-text-200: var(--uix-text-200);
+  --color-uix-text-300: var(--uix-text-300);
+
+  /* Border Colors */
+  --color-uix-border-100: var(--uix-border-100);
+  --color-uix-border-200: var(--uix-border-200);
+  --color-uix-border-300: var(--uix-border-300);
+
+  /* Black Palette */
+  --color-uix-black-100: var(--uix-black-100);
+  --color-uix-black-200: var(--uix-black-200);
+  --color-uix-black-300: var(--uix-black-300);
+  --color-uix-black-400: var(--uix-black-400);
+  --color-uix-black-500: var(--uix-black-500);
+
+  /* Gray Palette */
+  --color-uix-gray-100: var(--uix-gray-100);
+  --color-uix-gray-200: var(--uix-gray-200);
+  --color-uix-gray-300: var(--uix-gray-300);
+  --color-uix-gray-400: var(--uix-gray-400);
+  --color-uix-gray-500: var(--uix-gray-500);
+
+  /* White Palette */
+  --color-uix-white-100: var(--uix-white-100);
+  --color-uix-white-200: var(--uix-white-200);
+  --color-uix-white-300: var(--uix-white-300);
+  --color-uix-white-400: var(--uix-white-400);
+  --color-uix-white-500: var(--uix-white-500);
+
+  /* Prime Palette */
+  --color-uix-prime-100: var(--uix-prime-100);
+  --color-uix-prime-200: var(--uix-prime-200);
+  --color-uix-prime-300: var(--uix-prime-300);
+  --color-uix-prime-400: var(--uix-prime-400);
+  --color-uix-prime-500: var(--uix-prime-500);
+
+  /* Sub1 Palette */
+  --color-uix-sub1-100: var(--uix-sub1-100);
+  --color-uix-sub1-200: var(--uix-sub1-200);
+  --color-uix-sub1-300: var(--uix-sub1-300);
+  --color-uix-sub1-400: var(--uix-sub1-400);
+  --color-uix-sub1-500: var(--uix-sub1-500);
+
+  /* Sub2 Palette */
+  --color-uix-sub2-100: var(--uix-sub2-100);
+  --color-uix-sub2-200: var(--uix-sub2-200);
+  --color-uix-sub2-300: var(--uix-sub2-300);
+  --color-uix-sub2-400: var(--uix-sub2-400);
+  --color-uix-sub2-500: var(--uix-sub2-500);
+
+  /* Font - Outfit(영문) + Pretendard(한글) */
+  --font-sans: 'Outfit', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+}
+
+/* ===== Base Styles ===== */
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: var(--font-sans);
+  line-height: 1.7;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background-color: var(--uix-surface-400);
+  color: var(--uix-text-100);
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+/* ===== Selection ===== */
+::selection {
+  background: var(--uix-prime-300);
+  color: var(--uix-white-100);
+}
+
+/* ===== Focus Styles ===== */
+:focus-visible {
+  outline: 2px solid var(--uix-prime-300);
+  outline-offset: 2px;
+}
+
+/* ===== Glass Border ===== */
+.uix-glass-border {
+  border: 1px solid rgba(0, 0, 0, 0.07);
+}
+
+.dark .uix-glass-border {
+  border: 1px solid rgba(255, 255, 255, 0.03);
+}
+
+/* ===== Common Glassmorphism Container ===== */
+/* 글래스모피즘 컨테이너 공통 스타일 */
+.uix-glass {
+  background-color: color-mix(in srgb, var(--uix-surface-200) 40%, transparent);
+  backdrop-filter: blur(12px) saturate(1.5);
+  -webkit-backdrop-filter: blur(12px) saturate(1.5);
+}
+
+/* ===== Embossed Glassmorphism Effect ===== */
+/* 볼록한 엠보싱: 상단 하이라이트 + 하단 내부 그림자 + 외곽 소프트 섀도우 */
+
+/* 레이아웃용 - 미니멀 (네비, 사이드바, 섹션) */
+.uix-convex-subtle {
+  box-shadow:
+    inset 0 1px 2px 0 rgba(255, 255, 255, 0.8),
+    inset 0 -1px 3px 0 rgba(0, 0, 0, 0.06),
+    0 2px 8px -2px rgba(0, 0, 0, 0.05);
+}
+
+.dark .uix-convex-subtle {
+  box-shadow:
+    inset 0 2px 4px 0 rgba(255, 255, 255, 0.1),
+    inset 0 -2px 4px 0 rgba(0, 0, 0, 0.2);
+}
+
+/* 기본 - 인터랙티브 컴포넌트용 */
+.uix-convex {
+  box-shadow:
+    inset 0 1px 3px 0 rgba(255, 255, 255, 0.95),
+    inset 0 -1px 6px 0 rgba(0, 0, 0, 0.15),
+    0 4px 16px -2px rgba(0, 0, 0, 0.08);
+}
+
+.uix-convex-sm {
+  box-shadow:
+    inset 0 1px 2px 0 rgba(255, 255, 255, 0.9),
+    inset 0 -1px 4px 0 rgba(0, 0, 0, 0.12),
+    0 2px 8px -1px rgba(0, 0, 0, 0.06);
+}
+
+.uix-convex-lg {
+  box-shadow:
+    inset 0 1px 4px 0 rgba(255, 255, 255, 0.95),
+    inset 0 -2px 8px 0 rgba(0, 0, 0, 0.18),
+    0 6px 24px -4px rgba(0, 0, 0, 0.1);
+}
+
+/* 다크모드 볼록 효과 */
+.dark .uix-convex {
+  box-shadow:
+    inset 0 1px 4px 0 rgba(255, 255, 255, 0.18),
+    inset 0 -2px 10px 0 rgba(0, 0, 0, 0.4),
+    0 10px 36px -2px rgba(0, 0, 0, 0.6);
+}
+
+.dark .uix-convex-sm {
+  box-shadow:
+    inset 0 1px 2px 0 rgba(255, 255, 255, 0.15),
+    inset 0 -1px 6px 0 rgba(0, 0, 0, 0.35),
+    0 6px 24px -1px rgba(0, 0, 0, 0.5);
+}
+
+.dark .uix-convex-lg {
+  box-shadow:
+    inset 0 2px 6px 0 rgba(255, 255, 255, 0.2),
+    inset 0 -3px 12px 0 rgba(0, 0, 0, 0.45),
+    0 14px 48px -4px rgba(0, 0, 0, 0.65);
+}
+
+/* ===== 색상 배경용 볼록 효과 ===== */
+/* 색상이 있는 버튼/뱃지 등에 자동 적용 - 강한 하이라이트 + 진한 하단 그림자 */
+
+.uix-convex-colored {
+  box-shadow:
+    inset 0 2px 6px 0 rgba(255, 255, 255, 0.4),
+    inset 0 -3px 8px 0 rgba(0, 0, 0, 0.35);
+}
+
+.uix-convex-colored-sm {
+  box-shadow:
+    inset 0 1px 4px 0 rgba(255, 255, 255, 0.35),
+    inset 0 -2px 5px 0 rgba(0, 0, 0, 0.3);
+}
+
+/* 다크모드에서도 동일하게 유지 (색상 배경은 라이트/다크 구분 없음) */
+.dark .uix-convex-colored {
+  box-shadow:
+    inset 0 2px 6px 0 rgba(255, 255, 255, 0.4),
+    inset 0 -3px 8px 0 rgba(0, 0, 0, 0.35);
+}
+
+.dark .uix-convex-colored-sm {
+  box-shadow:
+    inset 0 1px 4px 0 rgba(255, 255, 255, 0.35),
+    inset 0 -2px 5px 0 rgba(0, 0, 0, 0.3);
+}
+
+/* ===== Enhanced Glassmorphism ===== */
+/* 상단 하이라이트 + 노이즈 텍스처로 실제 유리 질감 표현 */
+/* Note: 부모 요소가 positioned (relative, absolute, fixed 등)여야 함 */
+
+/* 상단 하이라이트 - 빛 반사 효과 (1px 라인) */
+.uix-glass-noise::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 10%;
+  right: 10%;
+  height: 1px;
+  z-index: 1;
+  background: linear-gradient(
+    to right,
+    transparent 0%,
+    rgba(255, 255, 255, 0.5) 50%,
+    transparent 100%
+  );
+  pointer-events: none;
+}
+
+/* 내부 상단 글로우 */
+.uix-glass-noise::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  border-radius: inherit;
+  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.1);
+  pointer-events: none;
+}
+
+.dark .uix-glass-noise::before {
+  background: linear-gradient(
+    to right,
+    transparent 0%,
+    rgba(255, 255, 255, 0.25) 50%,
+    transparent 100%
+  );
+}
+
+.dark .uix-glass-noise::after {
+  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.05);
+}

package/package.json

@@ -0,0 +1,105 @@
+{
+  "name": "@jameskyeong/uix",
+  "version": "0.1.6",
+  "description": "React UI component library with warm, elegant design system",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "bin": {
+    "uix": "./dist/cli/index.js"
+  },
+  "files": [
+    "dist/index.js",
+    "dist/index.cjs",
+    "dist/index.d.ts",
+    "dist/styles.css",
+    "dist/cli"
+  ],
+  "scripts": {
+    "dev": "vite --port 9999 --open",
+    "build": "vite build --mode lib && pnpm build:css && pnpm build:cli",
+    "build:lib": "vite build --mode lib",
+    "build:css": "cp src/styles/theme.css dist/styles.css",
+    "build:cli": "tsc -p tsconfig.cli.json && cp -r src/cli/themes dist/cli/",
+    "build:showcase": "vite build",
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit",
+    "lint": "biome check src showcase",
+    "lint:fix": "biome check --write src showcase",
+    "format": "biome format --write src showcase",
+    "quality": "pnpm lint && pnpm typecheck",
+    "prepublishOnly": "pnpm quality && pnpm build",
+    "pub": "npm version patch && git push --follow-tags",
+    "pub:minor": "npm version minor && git push --follow-tags",
+    "pub:major": "npm version major && git push --follow-tags",
+    "prepare": "husky"
+  },
+  "peerDependencies": {
+    "clsx": ">=2",
+    "lucide-react": ">=0.5",
+    "motion": ">=12",
+    "react": ">=18",
+    "react-dom": ">=18",
+    "shiki": ">=1",
+    "tailwind-merge": ">=2",
+    "tailwindcss": ">=4"
+  },
+  "dependencies": {
+    "prompts": "^2.4.2"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.3.10",
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/prompts": "^2.4.9",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@vitejs/plugin-react": "^4.5.2",
+    "clsx": "^2.1.1",
+    "husky": "^9.1.7",
+    "lucide-react": "^0.562.0",
+    "motion": "^12.23.26",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "react-router-dom": "^7.11.0",
+    "shiki": "^3.20.0",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss": "^4",
+    "typescript": "^5",
+    "vite": "^6.3.5",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "homepage": "https://github.com/jameskyeong/uix",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jameskyeong/uix.git"
+  },
+  "bugs": {
+    "url": "https://github.com/jameskyeong/uix/issues"
+  },
+  "keywords": [
+    "react",
+    "ui",
+    "components",
+    "design-system",
+    "tailwindcss"
+  ],
+  "author": "jameskyeong",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "sideEffects": [
+    "*.css"
+  ]
+}