@mzc-fe/design-system 0.0.1-rc.0

package/.husky/pre-push

@@ -0,0 +1,21 @@
+#!/bin/sh
+
+echo "Running pre-push checks..."
+
+# Run TypeScript compilation
+echo "Running TypeScript compilation..."
+yarn tsc
+if [ $? -ne 0 ]; then
+    echo "TypeScript compilation failed. Push aborted."
+    exit 1
+fi
+
+# Run unit tests
+echo "Running unit tests..."
+yarn test
+if [ $? -ne 0 ]; then
+    echo "Unit tests failed. Push aborted."
+    exit 1
+fi
+
+exit 0

package/.storybook/main.ts

@@ -0,0 +1,11 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+};
+export default config;

package/.storybook/preview.tsx

@@ -0,0 +1,30 @@
+import type { Preview } from "@storybook/react-vite";
+import { ThemeProvider } from "../src/foundations/ThemeProvider";
+import "../src/index.css";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    options: {
+      storySort: {
+        order: ["Foundations", "Components"],
+      },
+    },
+  },
+  decorators: [
+    (Story) => {
+      return (
+        <ThemeProvider>
+          <Story />
+        </ThemeProvider>
+      );
+    },
+  ],
+};
+
+export default preview;

package/.vscode/settings.json

@@ -0,0 +1,12 @@
+{
+  "css.customData": [".vscode/tailwind.json"],
+
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "editor.tabSize": 2,
+
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

package/.vscode/tailwind.json

@@ -0,0 +1,105 @@
+{
+  "version": 4.0,
+  "atDirectives": [
+    {
+      "name": "@import",
+      "description": "Use the `@import` directive to inline import CSS files, including Tailwind itself.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#import-directive"
+        }
+      ]
+    },
+    {
+      "name": "@theme",
+      "description": "Use the `@theme` directive to define your project's custom design tokens, like fonts, colors, and breakpoints.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#theme-directive"
+        }
+      ]
+    },
+    {
+      "name": "@source",
+      "description": "Use the `@source` directive to explicitly specify source files that aren't picked up by Tailwind's automatic content detection.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#source-directive"
+        }
+      ]
+    },
+    {
+      "name": "@utility",
+      "description": "Use the `@utility` directive to add custom utilities to your project that work with variants like `hover`, `focus` and `lg`.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#utility-directive"
+        }
+      ]
+    },
+    {
+      "name": "@variant",
+      "description": "Use the `@variant` directive to apply a Tailwind variant to styles in your CSS. If you need to apply multiple variants at the same time, use nesting.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#variant-directive"
+        }
+      ]
+    },
+    {
+      "name": "@custom-variant",
+      "description": "Use the `@custom-variant` directive to add a custom variant in your project. This lets you write utilities like `pointer-coarse:size-48` and `theme-midnight:bg-slate-900`.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#custom-variant-directive"
+        }
+      ]
+    },
+    {
+      "name": "@apply",
+      "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you need to write custom CSS (like to override the styles in a third-party library) but still want to work with your design tokens and use the same syntax you’re used to using in your HTML.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#apply-directive"
+        }
+      ]
+    },
+    {
+      "name": "@reference",
+      "description": "If you want to use `@apply` or `@variant` in the `<style>` block of a Vue or Svelte component, or within CSS modules, you will need to import your theme variables, custom utilities, and custom variants to make those values available in that context. To do this without duplicating any CSS in your output, use the `@reference` directive to import your main stylesheet for reference without actually including the styles.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#reference-directive"
+        }
+      ]
+    },
+    {
+      "name": "@config",
+      "description": "Use the `@config` directive to load a legacy JavaScript-based configuration file.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#config-directive"
+        }
+      ]
+    },
+    {
+      "name": "@plugin",
+      "description": "Use the `@plugin` directive to load a Javascript-based plugin. The `@plugin` directive accepts either a package name or a local path.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#plugin-directive"
+        }
+      ]
+    }
+  ]
+}

package/README.md

@@ -0,0 +1,136 @@
+# MZC Design System
+
+MZC 디자인 시스템은 React와 TypeScript로 구축된 재사용 가능한 컴포넌트 라이브러리입니다. Tailwind CSS와 Radix UI를 기반으로 하여 일관성 있고 접근성이 뛰어난 UI 컴포넌트를 제공합니다.
+
+## 🚀 주요 특징
+
+- **TypeScript 지원**: 완전한 타입 안정성과 개발자 경험 향상
+- **Tailwind CSS**: 유틸리티 우선의 스타일링 시스템
+- **Radix UI**: 접근성이 뛰어난 헤드리스 UI 컴포넌트
+- **Storybook**: 컴포넌트 문서화 및 개발 환경
+- **다크 모드**: 테마 전환 기능 지원
+- **Variant 기반**: class-variance-authority를 활용한 유연한 컴포넌트 변형
+
+## 📦 설치
+
+```bash
+npm install @mzc-fe/design-system
+# 또는
+yarn add @mzc-fe/design-system
+```
+
+## 🛠️ 사용법
+
+### 기본 설정
+
+```tsx
+import { ThemeProvider } from "@mzc-fe/design-system";
+import "@mzc-fe/design-system/dist/design-system.css";
+
+function App() {
+  return (
+    <ThemeProvider defaultTheme="light">{/* 앱 컴포넌트들 */}</ThemeProvider>
+  );
+}
+```
+
+### 디자인 토큰 사용
+
+```tsx
+// CSS 클래스로 디자인 토큰 사용
+<div className="bg-main text-main p-2">
+  <h1 className="font-h1-700">제목</h1>
+  <p className="font-subtitle1-700">부제목</p>
+</div>
+
+// CSS 변수로 직접 사용
+<div style={{
+  backgroundColor: 'var(--background-color-main)',
+  color: 'var(--text-color-main)',
+  padding: 'var(--spacing)'
+}}>
+  커스텀 스타일
+</div>
+```
+
+## 🎯 개발
+
+### 개발 환경 설정
+
+```bash
+# 의존성 설치
+yarn install
+
+# 개발 서버 실행
+yarn storybook
+
+# 빌드
+yarn build
+
+# 린트 검사
+yarn lint
+```
+
+### 프로젝트 구조
+
+```
+src/
+├── components/           # 재사용 가능한 컴포넌트
+│   └── Button/           # Button 컴포넌트
+│   └── ...               # Button 컴포넌트
+├── foundations/          # 디자인 토큰 및 테마
+│   ├── color.css         # 색상 토큰
+│   ├── spacing.css       # 간격 토큰
+│   ├── typography.css    # 타이포그래피 토큰
+│   └── ThemeProvider.tsx # 테마 관리
+└── lib/                  # 유틸리티 함수
+    └── utils.ts          # 공통 유틸리티
+```
+
+## 🎨 디자인 토큰
+
+프로젝트는 `@theme inline`과 CSS 변수를 활용한 디자인 토큰 시스템을 사용합니다:
+
+### 색상 시스템 (`color.css`)
+
+- **토큰 매핑**: `@theme inline`을 통해 CSS 변수를 Tailwind 클래스에 매핑
+- **테마 지원**: 라이트/다크 모드 자동 전환
+- **자동 클래스 생성**: `--background-color-*`, `--text-color-*` 패턴으로 `bg-*`, `text-*` 클래스 자동 생성
+
+```css
+/* 사용 예시 */
+.bg-main {
+  background-color: var(--background-color-main);
+}
+.text-main {
+  color: var(--text-color-main);
+}
+```
+
+### 간격 시스템 (`spacing.css`)
+
+- **기본 단위**: 4px 기준의 일관된 간격 시스템
+- **Tailwind 통합**: `p-2` → `padding: 8px` 자동 변환
+
+### 타이포그래피 (`typography.css`)
+
+- **유틸리티 클래스**: `@utility`를 사용한 재사용 가능한 텍스트 스타일
+- **폰트 패밀리**: Pretendard 폰트 사용
+- **일관된 스타일**: `font-h1-700`, `font-subtitle1-700` 등 체계적인 명명 규칙
+
+## 📚 Storybook
+
+컴포넌트 문서화와 개발을 위해 Storybook을 사용합니다:
+
+```bash
+yarn storybook
+```
+
+Storybook을 통해 각 컴포넌트의 다양한 상태와 사용법을 확인할 수 있습니다.
+
+## 🔗 관련 링크
+
+- [Tailwind CSS](https://tailwindcss.com/)
+- [Radix UI](https://www.radix-ui.com/)
+- [Storybook](https://storybook.js.org/)
+- [class-variance-authority](https://cva.style/)

package/bitbucket-pipelines.yml

@@ -0,0 +1,52 @@
+#  Template npm-publish
+
+#  This template allows you to publish your npm package, as defined in package.json, to npmjs.com or any other npm-like registry.
+#  The workflow allows running tests, code linting and security scans on feature branches (as well as master).
+#  The npm package will be validated and published after the code is merged to master.
+
+# Prerequisites: $NPM_TOKEN setup in the Deployment variables.
+# For advanced cases, please, follow examples from the pipe's README https://bitbucket.org/atlassian/npm-publish/src/master/README.md
+
+image: node:18
+
+pipelines:
+  custom:
+    npm_publish:
+      - variables:
+          - name: Version
+            default: patch
+            description: Select type of publish
+            allowed-values:
+              - patch
+              - minor
+              - major
+              - rc
+      - step:
+          name: Install
+          caches:
+            - node
+          script:
+            - yarn install --frozen-lockfile
+            - yarn build
+          artifacts:
+            - dist/**
+      - step:
+          name: Deploy to npm
+          deployment: Production
+          script:
+            # 1. 버전 분기 처리
+            - |
+              if [ "$Version" = "rc" ]; then
+                npm version prerelease --preid=rc -m "publish v%s"
+                pipe: atlassian/npm-publish:0.3.2
+                variables:
+                  ACCESS: 'public'
+                  NPM_TOKEN: $NPM_TOKEN
+                  TAG: "rc"
+              else
+                npm version $Version -m "publish v%s"
+                pipe: atlassian/npm-publish:0.3.2
+                variables:
+                  ACCESS: 'public'
+                  NPM_TOKEN: $NPM_TOKEN
+              fi

package/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}

package/eslint.config.js

@@ -0,0 +1,38 @@
+// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
+import storybook from "eslint-plugin-storybook";
+
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+import { defineConfig, globalIgnores } from "eslint/config";
+
+export default defineConfig(
+  [
+    globalIgnores(["dist"]),
+    {
+      files: ["**/*.{ts,tsx}"],
+      extends: [
+        js.configs.recommended,
+        tseslint.configs.recommended,
+        reactHooks.configs["recommended-latest"],
+        reactRefresh.configs.vite,
+      ],
+      languageOptions: {
+        ecmaVersion: 2020,
+        globals: globals.browser,
+      },
+      rules: {
+        "react-refresh/only-export-components": "warn",
+        "react-hooks/exhaustive-deps": [
+          "warn",
+          {
+            enableDangerousAutofixThisMayCauseInfiniteLoops: true,
+          },
+        ],
+      },
+    },
+  ],
+  storybook.configs["flat/recommended"]
+);

package/package.json

@@ -0,0 +1,98 @@
+{
+  "name": "@mzc-fe/design-system",
+  "private": false,
+  "version": "0.0.1-rc.0",
+  "type": "module",
+  "main": "./dist/design-system.umd.js",
+  "module": "./dist/design-system.es.js",
+  "scripts": {
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "test": "vitest run --coverage",
+    "test:ui": "vitest --ui",
+    "tsc": "tsc -b",
+    "prepare": "husky"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^5.2.2",
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-aspect-ratio": "^1.1.8",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-context-menu": "^2.2.16",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-hover-card": "^1.1.15",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-menubar": "^1.1.16",
+    "@radix-ui/react-navigation-menu": "^1.2.14",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-progress": "^1.1.8",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-toggle-group": "^1.1.11",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@tailwindcss/vite": "^4.1.13",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^0.561.0",
+    "next-themes": "^0.4.6",
+    "react": "^19.1.1",
+    "react-day-picker": "^9.12.0",
+    "react-dom": "^19.1.1",
+    "react-hook-form": "^7.68.0",
+    "react-resizable-panels": "^3.0.6",
+    "recharts": "2.15.4",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss": "^4.1.13",
+    "vaul": "^1.1.2",
+    "zod": "^4.1.13"
+  },
+  "devDependencies": {
+    "@babel/preset-react": "^7.27.1",
+    "@eslint/js": "^9.33.0",
+    "@locator/babel-jsx": "^0.4.4",
+    "@locator/runtime": "^0.4.4",
+    "@storybook/react-vite": "^9.1.8",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^24.3.1",
+    "@types/react": "^19.1.10",
+    "@types/react-dom": "^19.1.7",
+    "@vitejs/plugin-react": "^5.0.0",
+    "@vitest/coverage-v8": "^4.0.15",
+    "@vitest/ui": "4.0.15",
+    "eslint": "^9.33.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "eslint-plugin-storybook": "^9.1.8",
+    "globals": "^16.3.0",
+    "husky": "^9.1.7",
+    "jsdom": "^27.3.0",
+    "storybook": "^9.1.8",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.39.1",
+    "vite": "^7.1.2",
+    "vitest": "^4.0.15"
+  }
+}

package/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>