@nextlevel_korea/design-system 1.0.0

package/README.md

@@ -0,0 +1,216 @@
+# @nextlevel/design-system
+
+TypeScript와 Tailwind CSS로 구축된 현대적인 React 디자인 시스템으로, 포괄적인 Storybook 문서화를 제공합니다.
+
+## 🚀 빠른 시작
+
+### 설치
+
+```bash
+npm install @nextlevel/design-system
+```
+
+### 기본 사용법
+
+```tsx
+import { Header } from '@nextlevel/design-system';
+import '@nextlevel/design-system/styles';
+
+function App() {
+  return (
+    <div>
+      <Header logo="https://your-logo-url.com/logo.png" />
+    </div>
+  );
+}
+```
+
+## 📖 Storybook 문서
+
+우리 디자인 시스템을 탐색하고 이해하는 가장 좋은 방법은 인터랙티브 Storybook 문서를 통하는 것입니다.
+
+### 로컬에서 Storybook 실행하기
+
+컴포넌트를 탐색하기 위해 로컬에서 Storybook을 실행하려면:
+
+```bash
+# 저장소 클론
+git clone https://github.com/NextLevel-KR/design-system.git
+cd design-system
+
+# 의존성 설치
+npm install
+
+# Storybook 시작
+npm run storybook
+```
+
+그런 다음 브라우저에서 [http://localhost:6006](http://localhost:6006)을 열어보세요.
+
+### Storybook에서 찾을 수 있는 것들
+
+우리 Storybook에는 다음이 포함됩니다:
+
+- **📚 인터랙티브 문서** - 모든 컴포넌트의 실시간 예제
+- **🎛️ 컨트롤 패널** - 실시간으로 컴포넌트 props 수정
+- **📱 반응형 테스트** - 다양한 화면 크기에서 컴포넌트 테스트
+- **🌙 다크/라이트 모드** - 테마 간 전환
+- **♿ 접근성 테스트** - 내장된 a11y 검사
+- **📋 코드 예제** - 복사-붙여넣기 가능한 코드 스니펫
+
+## 🧩 컴포넌트
+
+### Header
+
+커스터마이징 가능한 로고가 있는 유연한 헤더 컴포넌트입니다.
+
+```tsx
+import { Header } from '@nextlevel/design-system';
+
+// 기본 사용법
+<Header logo="https://example.com/logo.png" />;
+```
+
+**Props:**
+
+- `logo` (string) - 로고 이미지 URL
+
+**Storybook 예제:**
+
+- 플레이스홀더 로고가 있는 기본 헤더
+- 커스텀 브랜드 헤더
+- 작은 컴팩트 헤더
+
+## 🛠️ 개발
+
+### 사전 요구사항
+
+- Node.js 22+
+- npm 또는 yarn
+
+### 설정
+
+```bash
+# 의존성 설치
+npm install
+
+# 개발 서버 시작
+npm run dev
+
+# Storybook 시작
+npm run storybook
+
+# 라이브러리 빌드
+npm run build:lib
+
+# Storybook 빌드
+npm run build-storybook
+```
+
+### 프로젝트 구조
+
+```
+src/
+├── components/          # React 컴포넌트
+│   ├── Header.tsx      # Header 컴포넌트
+│   └── Header.stories.tsx  # Header Storybook 스토리
+├── utils/              # 유틸리티 함수
+├── index.ts           # 메인 export 파일
+└── index.css          # 전역 스타일
+```
+
+### 새 컴포넌트 추가하기
+
+1. **컴포넌트 생성** `src/components/`에
+2. **Storybook 스토리 추가** 같은 이름 + `.stories.tsx`
+3. **컴포넌트 export** `src/index.ts`에서
+4. **Storybook에서 문서화** 예제와 컨트롤 포함
+
+예제:
+
+```tsx
+// src/components/Button.tsx
+export interface ButtonProps {
+  variant?: 'primary' | 'secondary';
+  children: React.ReactNode;
+}
+
+export const Button = ({ variant = 'primary', children }: ButtonProps) => {
+  return <button className={`btn btn-${variant}`}>{children}</button>;
+};
+```
+
+```tsx
+// src/components/Button.stories.tsx
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  title: 'Components/Button',
+  component: Button,
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary'],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    variant: 'primary',
+    children: 'Primary Button',
+  },
+};
+```
+
+## 🎨 디자인 시스템 특징
+
+- **TypeScript 우선** - 완전한 타입 안전성과 IntelliSense 지원
+- **Tailwind CSS** - 유틸리티 우선 CSS 프레임워크
+- **반응형 디자인** - 모바일 우선 접근법
+- **접근성** - WCAG 2.1 준수 컴포넌트
+- **커스터마이징 가능** - 쉬운 테마링과 커스터마이징
+
+## 📚 Storybook 애드온
+
+우리 Storybook은 다음으로 구성되어 있습니다:
+
+- **@storybook/addon-docs** - 자동 문서 생성
+- **@storybook/addon-controls** - 인터랙티브 prop 컨트롤
+- **@storybook/addon-backgrounds** - 배경 전환
+- **@storybook/addon-viewport** - 반응형 테스트
+
+## 🤝 기여하기
+
+1. 저장소를 포크하세요
+2. 기능 브랜치를 만드세요
+3. Storybook 스토리와 함께 컴포넌트를 추가하세요
+4. Storybook에서 테스트하세요
+5. 풀 리퀘스트를 제출하세요
+
+### Storybook 가이드라인
+
+- 각 컴포넌트는 포괄적인 스토리를 가져야 합니다
+- 여러 변형과 상태를 포함하세요
+- 모든 props에 적절한 argTypes를 추가하세요
+- 접근성 테스트를 포함하세요
+- 명확한 문서를 제공하세요
+
+## 📄 라이선스
+
+MIT 라이선스 - 자세한 내용은 [LICENSE](LICENSE) 파일을 참조하세요.
+
+## 🔗 링크
+
+- [Storybook 문서](https://storybook.js.org/)
+- [Tailwind CSS](https://tailwindcss.com/)
+- [React](https://reactjs.org/)
+- [TypeScript](https://www.typescriptlang.org/)
+
+---
+
+NextLevel 팀이 ❤️로 만들었습니다

package/dist/index.cjs

@@ -0,0 +1,22 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ee=require("react");var P={exports:{}},R={};/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var F;function re(){if(F)return R;F=1;var s=Symbol.for("react.transitional.element"),i=Symbol.for("react.fragment");function d(m,a,u){var E=null;if(u!==void 0&&(E=""+u),a.key!==void 0&&(E=""+a.key),"key"in a){u={};for(var b in a)b!=="key"&&(u[b]=a[b])}else u=a;return a=u.ref,{$$typeof:s,type:m,key:E,ref:a!==void 0?a:null,props:u}}return R.Fragment=i,R.jsx=d,R.jsxs=d,R}var _={};/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var D;function te(){return D||(D=1,process.env.NODE_ENV!=="production"&&function(){function s(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===Z?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case T:return"Fragment";case q:return"Profiler";case U:return"StrictMode";case J:return"Suspense";case X:return"SuspenseList";case B:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case W:return"Portal";case V:return(e.displayName||"Context")+".Provider";case z:return(e._context.displayName||"Context")+".Consumer";case G:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case H:return r=e.displayName||null,r!==null?r:s(e.type)||"Memo";case x:r=e._payload,e=e._init;try{return s(e(r))}catch{}}return null}function i(e){return""+e}function d(e){try{i(e);var r=!1}catch{r=!0}if(r){r=console;var t=r.error,n=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return t.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",n),i(e)}}function m(e){if(e===T)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===x)return"<...>";try{var r=s(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function a(){var e=p.A;return e===null?null:e.getOwner()}function u(){return Error("react-stack-top-frame")}function E(e){if(y.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function b(e,r){function t(){N||(N=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}function M(){var e=s(this.type);return C[e]||(C[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function L(e,r,t,n,l,c,O,S){return t=c.ref,e={$$typeof:h,type:e,key:r,props:c,_owner:l},(t!==void 0?t:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:M}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:O}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:S}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function g(e,r,t,n,l,c,O,S){var o=r.children;if(o!==void 0)if(n)if(Q(o)){for(n=0;n<o.length;n++)w(o[n]);Object.freeze&&Object.freeze(o)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else w(o);if(y.call(r,"key")){o=s(e);var f=Object.keys(r).filter(function(K){return K!=="key"});n=0<f.length?"{key: someKey, "+f.join(": ..., ")+": ...}":"{key: someKey}",$[o+n]||(f=0<f.length?"{"+f.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,n,o,f,o),$[o+n]=!0)}if(o=null,t!==void 0&&(d(t),o=""+t),E(r)&&(d(r.key),o=""+r.key),"key"in r){t={};for(var A in r)A!=="key"&&(t[A]=r[A])}else t=r;return o&&b(t,typeof e=="function"?e.displayName||e.name||"Unknown":e),L(e,o,c,l,a(),t,O,S)}function w(e){typeof e=="object"&&e!==null&&e.$$typeof===h&&e._store&&(e._store.validated=1)}var v=ee,h=Symbol.for("react.transitional.element"),W=Symbol.for("react.portal"),T=Symbol.for("react.fragment"),U=Symbol.for("react.strict_mode"),q=Symbol.for("react.profiler"),z=Symbol.for("react.consumer"),V=Symbol.for("react.context"),G=Symbol.for("react.forward_ref"),J=Symbol.for("react.suspense"),X=Symbol.for("react.suspense_list"),H=Symbol.for("react.memo"),x=Symbol.for("react.lazy"),B=Symbol.for("react.activity"),Z=Symbol.for("react.client.reference"),p=v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,y=Object.prototype.hasOwnProperty,Q=Array.isArray,k=console.createTask?console.createTask:function(){return null};v={"react-stack-bottom-frame":function(e){return e()}};var N,C={},Y=v["react-stack-bottom-frame"].bind(v,u)(),I=k(m(u)),$={};_.Fragment=T,_.jsx=function(e,r,t,n,l){var c=1e4>p.recentlyCreatedOwnerStacks++;return g(e,r,t,!1,n,l,c?Error("react-stack-top-frame"):Y,c?k(m(e)):I)},_.jsxs=function(e,r,t,n,l){var c=1e4>p.recentlyCreatedOwnerStacks++;return g(e,r,t,!0,n,l,c?Error("react-stack-top-frame"):Y,c?k(m(e)):I)}}()),_}process.env.NODE_ENV==="production"?P.exports=re():P.exports=te();var j=P.exports;const ne=({logo:s,title:i})=>j.jsxs("header",{children:[s&&j.jsx("img",{src:s,alt:"logo"}),i&&j.jsx("h1",{children:i})]});exports.Header=ne;

package/dist/index.js

@@ -0,0 +1,285 @@
+import ee from "react";
+var P = { exports: {} }, R = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var F;
+function re() {
+  if (F) return R;
+  F = 1;
+  var s = Symbol.for("react.transitional.element"), i = Symbol.for("react.fragment");
+  function d(m, a, c) {
+    var E = null;
+    if (c !== void 0 && (E = "" + c), a.key !== void 0 && (E = "" + a.key), "key" in a) {
+      c = {};
+      for (var b in a)
+        b !== "key" && (c[b] = a[b]);
+    } else c = a;
+    return a = c.ref, {
+      $$typeof: s,
+      type: m,
+      key: E,
+      ref: a !== void 0 ? a : null,
+      props: c
+    };
+  }
+  return R.Fragment = i, R.jsx = d, R.jsxs = d, R;
+}
+var _ = {};
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var D;
+function te() {
+  return D || (D = 1, process.env.NODE_ENV !== "production" && function() {
+    function s(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === Z ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case T:
+          return "Fragment";
+        case z:
+          return "Profiler";
+        case U:
+          return "StrictMode";
+        case J:
+          return "Suspense";
+        case X:
+          return "SuspenseList";
+        case B:
+          return "Activity";
+      }
+      if (typeof e == "object")
+        switch (typeof e.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), e.$$typeof) {
+          case W:
+            return "Portal";
+          case q:
+            return (e.displayName || "Context") + ".Provider";
+          case V:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case G:
+            var r = e.render;
+            return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case H:
+            return r = e.displayName || null, r !== null ? r : s(e.type) || "Memo";
+          case g:
+            r = e._payload, e = e._init;
+            try {
+              return s(e(r));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function i(e) {
+      return "" + e;
+    }
+    function d(e) {
+      try {
+        i(e);
+        var r = !1;
+      } catch {
+        r = !0;
+      }
+      if (r) {
+        r = console;
+        var t = r.error, n = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return t.call(
+          r,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          n
+        ), i(e);
+      }
+    }
+    function m(e) {
+      if (e === T) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === g)
+        return "<...>";
+      try {
+        var r = s(e);
+        return r ? "<" + r + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function a() {
+      var e = p.A;
+      return e === null ? null : e.getOwner();
+    }
+    function c() {
+      return Error("react-stack-top-frame");
+    }
+    function E(e) {
+      if (y.call(e, "key")) {
+        var r = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (r && r.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function b(e, r) {
+      function t() {
+        N || (N = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          r
+        ));
+      }
+      t.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: t,
+        configurable: !0
+      });
+    }
+    function L() {
+      var e = s(this.type);
+      return C[e] || (C[e] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), e = this.props.ref, e !== void 0 ? e : null;
+    }
+    function M(e, r, t, n, l, u, O, A) {
+      return t = u.ref, e = {
+        $$typeof: x,
+        type: e,
+        key: r,
+        props: u,
+        _owner: l
+      }, (t !== void 0 ? t : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: L
+      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(e, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(e, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: O
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: A
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function w(e, r, t, n, l, u, O, A) {
+      var o = r.children;
+      if (o !== void 0)
+        if (n)
+          if (Q(o)) {
+            for (n = 0; n < o.length; n++)
+              h(o[n]);
+            Object.freeze && Object.freeze(o);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else h(o);
+      if (y.call(r, "key")) {
+        o = s(e);
+        var f = Object.keys(r).filter(function(K) {
+          return K !== "key";
+        });
+        n = 0 < f.length ? "{key: someKey, " + f.join(": ..., ") + ": ...}" : "{key: someKey}", $[o + n] || (f = 0 < f.length ? "{" + f.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          n,
+          o,
+          f,
+          o
+        ), $[o + n] = !0);
+      }
+      if (o = null, t !== void 0 && (d(t), o = "" + t), E(r) && (d(r.key), o = "" + r.key), "key" in r) {
+        t = {};
+        for (var S in r)
+          S !== "key" && (t[S] = r[S]);
+      } else t = r;
+      return o && b(
+        t,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), M(
+        e,
+        o,
+        u,
+        l,
+        a(),
+        t,
+        O,
+        A
+      );
+    }
+    function h(e) {
+      typeof e == "object" && e !== null && e.$$typeof === x && e._store && (e._store.validated = 1);
+    }
+    var v = ee, x = Symbol.for("react.transitional.element"), W = Symbol.for("react.portal"), T = Symbol.for("react.fragment"), U = Symbol.for("react.strict_mode"), z = Symbol.for("react.profiler"), V = Symbol.for("react.consumer"), q = Symbol.for("react.context"), G = Symbol.for("react.forward_ref"), J = Symbol.for("react.suspense"), X = Symbol.for("react.suspense_list"), H = Symbol.for("react.memo"), g = Symbol.for("react.lazy"), B = Symbol.for("react.activity"), Z = Symbol.for("react.client.reference"), p = v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, y = Object.prototype.hasOwnProperty, Q = Array.isArray, k = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    v = {
+      "react-stack-bottom-frame": function(e) {
+        return e();
+      }
+    };
+    var N, C = {}, Y = v["react-stack-bottom-frame"].bind(
+      v,
+      c
+    )(), I = k(m(c)), $ = {};
+    _.Fragment = T, _.jsx = function(e, r, t, n, l) {
+      var u = 1e4 > p.recentlyCreatedOwnerStacks++;
+      return w(
+        e,
+        r,
+        t,
+        !1,
+        n,
+        l,
+        u ? Error("react-stack-top-frame") : Y,
+        u ? k(m(e)) : I
+      );
+    }, _.jsxs = function(e, r, t, n, l) {
+      var u = 1e4 > p.recentlyCreatedOwnerStacks++;
+      return w(
+        e,
+        r,
+        t,
+        !0,
+        n,
+        l,
+        u ? Error("react-stack-top-frame") : Y,
+        u ? k(m(e)) : I
+      );
+    };
+  }()), _;
+}
+process.env.NODE_ENV === "production" ? P.exports = re() : P.exports = te();
+var j = P.exports;
+const oe = ({ logo: s, title: i }) => /* @__PURE__ */ j.jsxs("header", { children: [
+  s && /* @__PURE__ */ j.jsx("img", { src: s, alt: "logo" }),
+  i && /* @__PURE__ */ j.jsx("h1", { children: i })
+] });
+export {
+  oe as Header
+};

package/dist/style.css

@@ -0,0 +1 @@
+*,:before,:after{--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: rgb(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: rgb(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: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Pretendard,ui-sans-serif,system-ui,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:Fira Mono,ui-monospace,SFMono-Regular,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}[type=text],input:where(:not([type])),[type=email],[type=url],[type=password],[type=number],[type=date],[type=datetime-local],[type=month],[type=search],[type=tel],[type=time],[type=week],[multiple],textarea,select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem;--tw-shadow: 0 0 #0000}[type=text]:focus,input:where(:not([type])):focus,[type=email]:focus,[type=url]:focus,[type=password]:focus,[type=number]:focus,[type=date]:focus,[type=datetime-local]:focus,[type=month]:focus,[type=search]:focus,[type=tel]:focus,[type=time]:focus,[type=week]:focus,[multiple]:focus,textarea:focus,select:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: #2563eb;--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(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#2563eb}input::-moz-placeholder,textarea::-moz-placeholder{color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-top:0;padding-bottom:0}select{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;print-color-adjust:exact}[multiple],[size]:where(select:not([size="1"])){background-image:initial;background-position:initial;background-repeat:unset;background-size:initial;padding-right:.75rem;-webkit-print-color-adjust:unset;print-color-adjust:unset}[type=checkbox],[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;display:inline-block;vertical-align:middle;background-origin:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-shrink:0;height:1rem;width:1rem;color:#2563eb;background-color:#fff;border-color:#6b7280;border-width:1px;--tw-shadow: 0 0 #0000}[type=checkbox]{border-radius:0}[type=radio]{border-radius:100%}[type=checkbox]:focus,[type=radio]:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 2px;--tw-ring-offset-color: #fff;--tw-ring-color: #2563eb;--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)}[type=checkbox]:checked,[type=radio]:checked{border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}[type=checkbox]:checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")}@media (forced-colors: active){[type=checkbox]:checked{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}[type=radio]:checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e")}@media (forced-colors: active){[type=radio]:checked{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}[type=checkbox]:checked:hover,[type=checkbox]:checked:focus,[type=radio]:checked:hover,[type=radio]:checked:focus{border-color:transparent;background-color:currentColor}[type=checkbox]:indeterminate{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}@media (forced-colors: active){[type=checkbox]:indeterminate{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}[type=checkbox]:indeterminate:hover,[type=checkbox]:indeterminate:focus{border-color:transparent;background-color:currentColor}[type=file]{background:unset;border-color:inherit;border-width:0;border-radius:0;padding:0;font-size:unset;line-height:inherit}[type=file]:focus{outline:1px solid ButtonText;outline:1px auto -webkit-focus-ring-color}.text-\[36px\]{font-size:36px}.font-bold{font-weight:700}.text-success{--tw-text-opacity: 1;color:rgb(34 197 94 / var(--tw-text-opacity, 1))}.underline{text-decoration-line:underline}

package/dist/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>

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@nextlevel_korea/design-system",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "A modern React design system built with TypeScript and Tailwind CSS - The NextLevel Design System",
+  "keywords": [
+    "nextlevel"
+  ],
+  "author": "NextLevel",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/NextLevel-KR/design-system.git"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./styles": "./dist/index.css"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "build:lib": "tsc && vite build --config vite.lib.config.ts",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "tw:init": "tailwindcss init -p",
+    "prepublishOnly": "npm run build:lib",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.3.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.30.1",
+    "@storybook/addon-docs": "^9.0.18",
+    "@storybook/addon-onboarding": "^9.0.18",
+    "@storybook/react-vite": "^9.0.18",
+    "@tailwindcss/forms": "^0.5.7",
+    "@tailwindcss/typography": "^0.5.9",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@vitejs/plugin-react": "^4.6.0",
+    "autoprefixer": "^10.4.14",
+    "eslint": "^9.30.1",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "eslint-plugin-storybook": "^9.0.18",
+    "globals": "^16.3.0",
+    "postcss": "^8.4.38",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "storybook": "^9.0.18",
+    "tailwindcss": "^3.4.3",
+    "ts-node": "^10.9.2",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.35.1",
+    "vite": "^5.4.19"
+  }
+}