@pisodev/test-component-library 1.0.1 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/README.md +108 -7
  2. package/dist/components/Anchor/Anchor.d.ts +11 -0
  3. package/dist/components/Anchor/index.d.ts +2 -0
  4. package/dist/components/index.d.ts +2 -0
  5. package/dist/index.d.ts +1 -0
  6. package/dist/index.esm.js +133 -19
  7. package/dist/index.esm.js.map +1 -1
  8. package/dist/index.js +135 -17
  9. package/dist/index.js.map +1 -1
  10. package/dist/theme/ThemeProvider.d.ts +12 -0
  11. package/dist/theme/defaultTheme.d.ts +2 -0
  12. package/dist/theme/index.d.ts +3 -0
  13. package/dist/theme/types.d.ts +23 -0
  14. package/package.json +1 -1
package/README.md CHANGED
@@ -10,21 +10,90 @@ npm install @pisodev/test-component-library
10
10
 
11
11
  ## 사용법
12
12
 
13
+ ### 기본 사용
14
+
13
15
  ```tsx
14
- import { Button, Card } from '@pisodev/test-component-library';
16
+ import { Button, Card, Anchor, ThemeProvider } from '@pisodev/test-component-library';
15
17
 
16
18
  function App() {
17
19
  return (
18
- <Card title="환영합니다" variant="elevated">
19
- <p>컴포넌트 라이브러리 예시입니다.</p>
20
- <Button variant="primary" onClick={() => alert('클릭!')}>
21
- 시작하기
22
- </Button>
23
- </Card>
20
+ <ThemeProvider>
21
+ <Card title="환영합니다" variant="elevated">
22
+ <p>컴포넌트 라이브러리 예시입니다.</p>
23
+ <Button variant="primary" onClick={() => alert('클릭!')}>
24
+ 시작하기
25
+ </Button>
26
+ <Anchor
27
+ href="https://example.com"
28
+ rel="noopener noreferrer"
29
+ title="예시 사이트로 이동"
30
+ >
31
+ 더 알아보기
32
+ </Anchor>
33
+ </Card>
34
+ </ThemeProvider>
24
35
  );
25
36
  }
26
37
  ```
27
38
 
39
+ ### 테마 커스터마이징
40
+
41
+ 컬러 시스템을 커스터마이징하여 브랜드 컬러를 적용할 수 있습니다.
42
+
43
+ ```tsx
44
+ import { ThemeProvider } from '@pisodev/test-component-library';
45
+
46
+ function App() {
47
+ return (
48
+ <ThemeProvider
49
+ colors={{
50
+ primary: {
51
+ 600: '#ff6b6b', // 버튼, 링크의 기본 색상
52
+ 700: '#ee5a52', // hover 상태 색상
53
+ },
54
+ secondary: {
55
+ 600: '#4ecdc4',
56
+ 700: '#45b8b0',
57
+ },
58
+ // 새로운 컬러 추가
59
+ brand: {
60
+ 500: '#ffd93d',
61
+ 600: '#f6c441',
62
+ },
63
+ }}
64
+ >
65
+ <YourApp />
66
+ </ThemeProvider>
67
+ );
68
+ }
69
+ ```
70
+
71
+ **사용 가능한 컬러 스케일**: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900
72
+
73
+ **기본 제공 컬러**: `primary`, `secondary`, `success`, `warning`, `danger`
74
+
75
+ **컬러 변경 방법**:
76
+ - 일부 스케일만 변경: 필요한 스케일만 지정하면 나머지는 기본값 유지
77
+ - 새 컬러 추가: 원하는 이름으로 새로운 컬러 스케일 추가 가능
78
+ - 완전 덮어쓰기: 모든 스케일을 지정하여 완전히 새로운 컬러로 교체
79
+
80
+ ### useTheme 훅으로 컬러 값 가져오기
81
+
82
+ ```tsx
83
+ import { useTheme } from '@pisodev/test-component-library';
84
+
85
+ function MyComponent() {
86
+ const { theme } = useTheme();
87
+
88
+ // 컬러 값 사용
89
+ const primaryColor = theme.colors.primary?.[600];
90
+
91
+ return <div style={{ color: primaryColor }}>커스텀 컬러</div>;
92
+ }
93
+ ```
94
+
95
+ ## 컴포넌트
96
+
28
97
  ### Button
29
98
 
30
99
  ```tsx
@@ -59,6 +128,38 @@ function App() {
59
128
  - `footer`: `React.ReactNode`
60
129
  - `onClick`: `() => void`
61
130
 
131
+ ### Anchor
132
+
133
+ `rel`과 `title` 속성이 **필수**인 링크 컴포넌트입니다. 접근성과 SEO를 위해 항상 이 속성들을 제공해야 합니다.
134
+
135
+ ```tsx
136
+ <Anchor
137
+ href="https://example.com"
138
+ rel="noopener noreferrer"
139
+ title="예시 사이트로 이동"
140
+ target="_blank"
141
+ >
142
+ 외부 링크
143
+ </Anchor>
144
+
145
+ <Anchor
146
+ href="/about"
147
+ rel="internal"
148
+ title="회사 소개 페이지"
149
+ >
150
+ 회사 소개
151
+ </Anchor>
152
+ ```
153
+
154
+ **Props (필수 항목)**
155
+ - `href`: `string` (필수)
156
+ - `rel`: `string` (필수) - 링크 관계 (예: `"noopener noreferrer"`, `"internal"`)
157
+ - `title`: `string` (필수) - 링크 설명 (접근성 및 SEO에 중요)
158
+ - `target`: `'_blank'` | `'_self'` | `'_parent'` | `'_top'` (기본값: `'_self'`)
159
+ - `onClick`: `(e: React.MouseEvent<HTMLAnchorElement>) => void`
160
+
161
+ > **참고**: `rel`과 `title`은 접근성, SEO, 보안을 위해 반드시 제공해야 하는 필수 속성입니다.
162
+
62
163
  ## 라이센스
63
164
 
64
165
  MIT
package/dist/components/Anchor/Anchor.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ import React from 'react';
2
+ export interface AnchorProps {
3
+ children: React.ReactNode;
4
+ href: string;
5
+ rel: string;
6
+ title: string;
7
+ target?: '_blank' | '_self' | '_parent' | '_top';
8
+ className?: string;
9
+ onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
10
+ }
11
+ export declare const Anchor: React.FC<AnchorProps>;
package/dist/components/Anchor/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { Anchor } from './Anchor';
2
+ export type { AnchorProps } from './Anchor';
package/dist/components/index.d.ts CHANGED
@@ -2,3 +2,5 @@ export { Button } from './Button';
2
2
  export type { ButtonProps } from './Button';
3
3
  export { Card } from './Card';
4
4
  export type { CardProps } from './Card';
5
+ export { Anchor } from './Anchor';
6
+ export type { AnchorProps } from './Anchor';
package/dist/index.d.ts CHANGED
@@ -1 +1,2 @@
1
1
  export * from './components';
2
+ export * from './theme';
package/dist/index.esm.js CHANGED
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ import React, { createContext, useMemo, useContext } from 'react';
2
2
 
3
3
  function styleInject(css, ref) {
4
4
  if ( ref === void 0 ) ref = {};
@@ -27,15 +27,15 @@ function styleInject(css, ref) {
27
27
  }
28
28
  }
29
29
 
30
- var css_248z$1 = ".Button-module_button__18Bed{border:none;border-radius:4px;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-weight:500;transition:all .3s ease}.Button-module_button__18Bed:disabled{cursor:not-allowed;opacity:.6}.Button-module_button__18Bed:not(:disabled):hover{box-shadow:0 4px 8px rgba(0,0,0,.15);transform:translateY(-1px)}.Button-module_button__18Bed:not(:disabled):active{transform:translateY(0)}.Button-module_button__18Bed.Button-module_small__zfmcP{font-size:14px;padding:6px 12px}.Button-module_button__18Bed.Button-module_medium__HYxwi{font-size:16px;padding:10px 20px}.Button-module_button__18Bed.Button-module_large__iWceB{font-size:18px;padding:14px 28px}.Button-module_button__18Bed.Button-module_primary__st6yY{background-color:#007bff;color:#fff}.Button-module_button__18Bed.Button-module_primary__st6yY:not(:disabled):hover{background-color:#0062cc}.Button-module_button__18Bed.Button-module_secondary__j-3rj{background-color:#6c757d;color:#fff}.Button-module_button__18Bed.Button-module_secondary__j-3rj:not(:disabled):hover{background-color:#545b62}.Button-module_button__18Bed.Button-module_outline__TFr94{background-color:transparent;border:2px solid #007bff;color:#007bff}.Button-module_button__18Bed.Button-module_outline__TFr94:not(:disabled):hover{background-color:#007bff;color:#fff}";
31
- var styles$1 = {"button":"Button-module_button__18Bed","small":"Button-module_small__zfmcP","medium":"Button-module_medium__HYxwi","large":"Button-module_large__iWceB","primary":"Button-module_primary__st6yY","secondary":"Button-module_secondary__j-3rj","outline":"Button-module_outline__TFr94"};
32
- styleInject(css_248z$1);
30
+ var css_248z$2 = ".Button-module_button__18Bed{border:none;border-radius:4px;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-weight:500;transition:all .3s ease}.Button-module_button__18Bed:disabled{cursor:not-allowed;opacity:.6}.Button-module_button__18Bed:not(:disabled):hover{box-shadow:0 4px 8px rgba(0,0,0,.15);transform:translateY(-1px)}.Button-module_button__18Bed:not(:disabled):active{transform:translateY(0)}.Button-module_button__18Bed.Button-module_small__zfmcP{font-size:14px;padding:6px 12px}.Button-module_button__18Bed.Button-module_medium__HYxwi{font-size:16px;padding:10px 20px}.Button-module_button__18Bed.Button-module_large__iWceB{font-size:18px;padding:14px 28px}.Button-module_button__18Bed.Button-module_primary__st6yY{background-color:var(--color-primary-600,#2196f3);color:#fff}.Button-module_button__18Bed.Button-module_primary__st6yY:not(:disabled):hover{background-color:var(--color-primary-700,#1976d2)}.Button-module_button__18Bed.Button-module_secondary__j-3rj{background-color:var(--color-secondary-600,#8e24aa);color:#fff}.Button-module_button__18Bed.Button-module_secondary__j-3rj:not(:disabled):hover{background-color:var(--color-secondary-700,#7b1fa2)}.Button-module_button__18Bed.Button-module_outline__TFr94{background-color:transparent;border:2px solid var(--color-primary-600,#2196f3);color:var(--color-primary-600,#2196f3)}.Button-module_button__18Bed.Button-module_outline__TFr94:not(:disabled):hover{background-color:var(--color-primary-600,#2196f3);color:#fff}";
31
+ var styles$2 = {"button":"Button-module_button__18Bed","small":"Button-module_small__zfmcP","medium":"Button-module_medium__HYxwi","large":"Button-module_large__iWceB","primary":"Button-module_primary__st6yY","secondary":"Button-module_secondary__j-3rj","outline":"Button-module_outline__TFr94"};
32
+ styleInject(css_248z$2);
33
33
 
34
34
  const Button = ({ children, variant = 'primary', size = 'medium', onClick, disabled = false, type = 'button', className = '', }) => {
35
35
  const buttonClasses = [
36
- styles$1.button,
37
- styles$1[variant],
38
- styles$1[size],
36
+ styles$2.button,
37
+ styles$2[variant],
38
+ styles$2[size],
39
39
  className,
40
40
  ]
41
41
  .filter(Boolean)
@@ -43,26 +43,140 @@ const Button = ({ children, variant = 'primary', size = 'medium', onClick, disab
43
43
  return (React.createElement("button", { className: buttonClasses, onClick: onClick, disabled: disabled, type: type }, children));
44
44
  };
45
45
 
46
- var css_248z = ".Card-module_card__LzN-3{border-radius:8px;overflow:hidden;transition:all .3s ease}.Card-module_card__LzN-3.Card-module_default__iGjRs{background-color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.1)}.Card-module_card__LzN-3.Card-module_elevated__SpUsJ{background-color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.15)}.Card-module_card__LzN-3.Card-module_elevated__SpUsJ:hover{box-shadow:0 8px 16px rgba(0,0,0,.2)}.Card-module_card__LzN-3.Card-module_outlined__SPAas{background-color:#fff;border:1px solid #e0e0e0;box-shadow:none}.Card-module_card__LzN-3.Card-module_clickable__Lx4fx{cursor:pointer}.Card-module_card__LzN-3.Card-module_clickable__Lx4fx:hover{transform:translateY(-2px)}.Card-module_card__LzN-3.Card-module_clickable__Lx4fx:active{transform:translateY(0)}.Card-module_header__j-c-9{border-bottom:1px solid #e0e0e0;padding:16px}.Card-module_title__DzwNA{color:#333;font-size:20px;font-weight:600;margin:0}.Card-module_subtitle__RVMlO{color:#666;font-size:14px;margin:4px 0 0}.Card-module_content__vMtHg{padding:16px}.Card-module_footer__FjLbG{background-color:#f8f9fa;border-top:1px solid #e0e0e0;padding:16px}";
47
- var styles = {"card":"Card-module_card__LzN-3","default":"Card-module_default__iGjRs","elevated":"Card-module_elevated__SpUsJ","outlined":"Card-module_outlined__SPAas","clickable":"Card-module_clickable__Lx4fx","header":"Card-module_header__j-c-9","title":"Card-module_title__DzwNA","subtitle":"Card-module_subtitle__RVMlO","content":"Card-module_content__vMtHg","footer":"Card-module_footer__FjLbG"};
48
- styleInject(css_248z);
46
+ var css_248z$1 = ".Card-module_card__LzN-3{border-radius:8px;overflow:hidden;transition:all .3s ease}.Card-module_card__LzN-3.Card-module_default__iGjRs{background-color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.1)}.Card-module_card__LzN-3.Card-module_elevated__SpUsJ{background-color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.15)}.Card-module_card__LzN-3.Card-module_elevated__SpUsJ:hover{box-shadow:0 8px 16px rgba(0,0,0,.2)}.Card-module_card__LzN-3.Card-module_outlined__SPAas{background-color:#fff;border:1px solid #e0e0e0;box-shadow:none}.Card-module_card__LzN-3.Card-module_clickable__Lx4fx{cursor:pointer}.Card-module_card__LzN-3.Card-module_clickable__Lx4fx:hover{transform:translateY(-2px)}.Card-module_card__LzN-3.Card-module_clickable__Lx4fx:active{transform:translateY(0)}.Card-module_header__j-c-9{border-bottom:1px solid #e0e0e0;padding:16px}.Card-module_title__DzwNA{color:#333;font-size:20px;font-weight:600;margin:0}.Card-module_subtitle__RVMlO{color:#666;font-size:14px;margin:4px 0 0}.Card-module_content__vMtHg{padding:16px}.Card-module_footer__FjLbG{background-color:#f8f9fa;border-top:1px solid #e0e0e0;padding:16px}";
47
+ var styles$1 = {"card":"Card-module_card__LzN-3","default":"Card-module_default__iGjRs","elevated":"Card-module_elevated__SpUsJ","outlined":"Card-module_outlined__SPAas","clickable":"Card-module_clickable__Lx4fx","header":"Card-module_header__j-c-9","title":"Card-module_title__DzwNA","subtitle":"Card-module_subtitle__RVMlO","content":"Card-module_content__vMtHg","footer":"Card-module_footer__FjLbG"};
48
+ styleInject(css_248z$1);
49
49
 
50
50
  const Card = ({ children, title, subtitle, footer, variant = 'default', className = '', onClick, }) => {
51
51
  const cardClasses = [
52
- styles.card,
53
- styles[variant],
54
- onClick ? styles.clickable : '',
52
+ styles$1.card,
53
+ styles$1[variant],
54
+ onClick ? styles$1.clickable : '',
55
55
  className,
56
56
  ]
57
57
  .filter(Boolean)
58
58
  .join(' ');
59
59
  return (React.createElement("div", { className: cardClasses, onClick: onClick },
60
- (title || subtitle) && (React.createElement("div", { className: styles.header },
61
- title && React.createElement("h3", { className: styles.title }, title),
62
- subtitle && React.createElement("p", { className: styles.subtitle }, subtitle))),
63
- React.createElement("div", { className: styles.content }, children),
64
- footer && React.createElement("div", { className: styles.footer }, footer)));
60
+ (title || subtitle) && (React.createElement("div", { className: styles$1.header },
61
+ title && React.createElement("h3", { className: styles$1.title }, title),
62
+ subtitle && React.createElement("p", { className: styles$1.subtitle }, subtitle))),
63
+ React.createElement("div", { className: styles$1.content }, children),
64
+ footer && React.createElement("div", { className: styles$1.footer }, footer)));
65
+ };
66
+
67
+ var css_248z = ".Anchor-module_anchor__uhpem{color:var(--color-primary-600,#2196f3);cursor:pointer;position:relative;text-decoration:none;transition:all .2s ease}.Anchor-module_anchor__uhpem:hover{color:var(--color-primary-700,#1976d2);text-decoration:underline}.Anchor-module_anchor__uhpem:focus{outline:2px solid var(--color-primary-600,#2196f3);outline-offset:2px}.Anchor-module_anchor__uhpem:visited{color:var(--color-primary-800,#1565c0)}.Anchor-module_anchor__uhpem:active{color:var(--color-primary-900,#0d47a1)}";
68
+ var styles = {"anchor":"Anchor-module_anchor__uhpem"};
69
+ styleInject(css_248z);
70
+
71
+ const Anchor = ({ children, href, rel, title, target = '_self', className = '', onClick, }) => {
72
+ const anchorClasses = [styles.anchor, className].filter(Boolean).join(' ');
73
+ return (React.createElement("a", { href: href, rel: rel, title: title, target: target, className: anchorClasses, onClick: onClick }, children));
74
+ };
75
+
76
+ const defaultTheme = {
77
+ colors: {
78
+ primary: {
79
+ 50: '#e3f2fd',
80
+ 100: '#bbdefb',
81
+ 200: '#90caf9',
82
+ 300: '#64b5f6',
83
+ 400: '#42a5f5',
84
+ 500: '#2196f3',
85
+ 600: '#1e88e5',
86
+ 700: '#1976d2',
87
+ 800: '#1565c0',
88
+ 900: '#0d47a1',
89
+ },
90
+ secondary: {
91
+ 50: '#f3e5f5',
92
+ 100: '#e1bee7',
93
+ 200: '#ce93d8',
94
+ 300: '#ba68c8',
95
+ 400: '#ab47bc',
96
+ 500: '#9c27b0',
97
+ 600: '#8e24aa',
98
+ 700: '#7b1fa2',
99
+ 800: '#6a1b9a',
100
+ 900: '#4a148c',
101
+ },
102
+ success: {
103
+ 50: '#e8f5e9',
104
+ 100: '#c8e6c9',
105
+ 200: '#a5d6a7',
106
+ 300: '#81c784',
107
+ 400: '#66bb6a',
108
+ 500: '#4caf50',
109
+ 600: '#43a047',
110
+ 700: '#388e3c',
111
+ 800: '#2e7d32',
112
+ 900: '#1b5e20',
113
+ },
114
+ warning: {
115
+ 50: '#fff3e0',
116
+ 100: '#ffe0b2',
117
+ 200: '#ffcc80',
118
+ 300: '#ffb74d',
119
+ 400: '#ffa726',
120
+ 500: '#ff9800',
121
+ 600: '#fb8c00',
122
+ 700: '#f57c00',
123
+ 800: '#ef6c00',
124
+ 900: '#e65100',
125
+ },
126
+ danger: {
127
+ 50: '#ffebee',
128
+ 100: '#ffcdd2',
129
+ 200: '#ef9a9a',
130
+ 300: '#e57373',
131
+ 400: '#ef5350',
132
+ 500: '#f44336',
133
+ 600: '#e53935',
134
+ 700: '#d32f2f',
135
+ 800: '#c62828',
136
+ 900: '#b71c1c',
137
+ },
138
+ },
139
+ };
140
+
141
+ const ThemeContext = createContext(undefined);
142
+ function mergeColors(defaultColors, customColors) {
143
+ if (!customColors)
144
+ return defaultColors;
145
+ const merged = Object.assign({}, defaultColors);
146
+ Object.keys(customColors).forEach((colorKey) => {
147
+ const customColorScale = customColors[colorKey];
148
+ if (customColorScale) {
149
+ merged[colorKey] = Object.assign(Object.assign({}, defaultColors[colorKey]), customColorScale);
150
+ }
151
+ });
152
+ return merged;
153
+ }
154
+ const ThemeProvider = ({ children, colors, }) => {
155
+ const theme = useMemo(() => {
156
+ return {
157
+ colors: mergeColors(defaultTheme.colors, colors),
158
+ };
159
+ }, [colors]);
160
+ // CSS Variables를 설정
161
+ React.useEffect(() => {
162
+ const root = document.documentElement;
163
+ Object.entries(theme.colors).forEach(([colorName, colorScale]) => {
164
+ if (colorScale) {
165
+ Object.entries(colorScale).forEach(([scale, value]) => {
166
+ root.style.setProperty(`--color-${colorName}-${scale}`, value);
167
+ });
168
+ }
169
+ });
170
+ }, [theme]);
171
+ return (React.createElement(ThemeContext.Provider, { value: { theme } }, children));
172
+ };
173
+ const useTheme = () => {
174
+ const context = useContext(ThemeContext);
175
+ if (!context) {
176
+ throw new Error('useTheme must be used within a ThemeProvider');
177
+ }
178
+ return context;
65
179
  };
66
180
 
67
- export { Button, Card };
181
+ export { Anchor, Button, Card, ThemeProvider, defaultTheme, useTheme };
68
182
  //# sourceMappingURL=index.esm.js.map
package/dist/index.esm.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.esm.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/components/Button/Button.tsx","../src/components/Card/Card.tsx"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import React from 'react';\nimport styles from './Button.module.scss';\n\nexport interface ButtonProps {\n children: React.ReactNode;\n variant?: 'primary' | 'secondary' | 'outline';\n size?: 'small' | 'medium' | 'large';\n onClick?: () => void;\n disabled?: boolean;\n type?: 'button' | 'submit' | 'reset';\n className?: string;\n}\n\nexport const Button: React.FC<ButtonProps> = ({\n children,\n variant = 'primary',\n size = 'medium',\n onClick,\n disabled = false,\n type = 'button',\n className = '',\n}) => {\n const buttonClasses = [\n styles.button,\n styles[variant],\n styles[size],\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <button\n className={buttonClasses}\n onClick={onClick}\n disabled={disabled}\n type={type}\n >\n {children}\n </button>\n );\n};\n","import React from 'react';\nimport styles from './Card.module.scss';\n\nexport interface CardProps {\n children: React.ReactNode;\n title?: string;\n subtitle?: string;\n footer?: React.ReactNode;\n variant?: 'default' | 'elevated' | 'outlined';\n className?: string;\n onClick?: () => void;\n}\n\nexport const Card: React.FC<CardProps> = ({\n children,\n title,\n subtitle,\n footer,\n variant = 'default',\n className = '',\n onClick,\n}) => {\n const cardClasses = [\n styles.card,\n styles[variant],\n onClick ? styles.clickable : '',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className={cardClasses} onClick={onClick}>\n {(title || subtitle) && (\n <div className={styles.header}>\n {title && <h3 className={styles.title}>{title}</h3>}\n {subtitle && <p className={styles.subtitle}>{subtitle}</p>}\n </div>\n )}\n <div className={styles.content}>{children}</div>\n {footer && <div className={styles.footer}>{footer}</div>}\n </div>\n );\n};\n"],"names":["styles"],"mappings":"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","x_google_ignoreList":[0]}
1
+ {"version":3,"file":"index.esm.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/components/Button/Button.tsx","../src/components/Card/Card.tsx","../src/components/Anchor/Anchor.tsx","../src/theme/defaultTheme.ts","../src/theme/ThemeProvider.tsx"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import React from 'react';\nimport styles from './Button.module.scss';\n\nexport interface ButtonProps {\n children: React.ReactNode;\n variant?: 'primary' | 'secondary' | 'outline';\n size?: 'small' | 'medium' | 'large';\n onClick?: () => void;\n disabled?: boolean;\n type?: 'button' | 'submit' | 'reset';\n className?: string;\n}\n\nexport const Button: React.FC<ButtonProps> = ({\n children,\n variant = 'primary',\n size = 'medium',\n onClick,\n disabled = false,\n type = 'button',\n className = '',\n}) => {\n const buttonClasses = [\n styles.button,\n styles[variant],\n styles[size],\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <button\n className={buttonClasses}\n onClick={onClick}\n disabled={disabled}\n type={type}\n >\n {children}\n </button>\n );\n};\n","import React from 'react';\nimport styles from './Card.module.scss';\n\nexport interface CardProps {\n children: React.ReactNode;\n title?: string;\n subtitle?: string;\n footer?: React.ReactNode;\n variant?: 'default' | 'elevated' | 'outlined';\n className?: string;\n onClick?: () => void;\n}\n\nexport const Card: React.FC<CardProps> = ({\n children,\n title,\n subtitle,\n footer,\n variant = 'default',\n className = '',\n onClick,\n}) => {\n const cardClasses = [\n styles.card,\n styles[variant],\n onClick ? styles.clickable : '',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className={cardClasses} onClick={onClick}>\n {(title || subtitle) && (\n <div className={styles.header}>\n {title && <h3 className={styles.title}>{title}</h3>}\n {subtitle && <p className={styles.subtitle}>{subtitle}</p>}\n </div>\n )}\n <div className={styles.content}>{children}</div>\n {footer && <div className={styles.footer}>{footer}</div>}\n </div>\n );\n};\n","import React from 'react';\nimport styles from './Anchor.module.scss';\n\nexport interface AnchorProps {\n children: React.ReactNode;\n href: string;\n rel: string;\n title: string;\n target?: '_blank' | '_self' | '_parent' | '_top';\n className?: string;\n onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;\n}\n\nexport const Anchor: React.FC<AnchorProps> = ({\n children,\n href,\n rel,\n title,\n target = '_self',\n className = '',\n onClick,\n}) => {\n const anchorClasses = [styles.anchor, className].filter(Boolean).join(' ');\n\n return (\n <a\n href={href}\n rel={rel}\n title={title}\n target={target}\n className={anchorClasses}\n onClick={onClick}\n >\n {children}\n </a>\n );\n};\n","import { Theme } from './types';\n\nexport const defaultTheme: Theme = {\n colors: {\n primary: {\n 50: '#e3f2fd',\n 100: '#bbdefb',\n 200: '#90caf9',\n 300: '#64b5f6',\n 400: '#42a5f5',\n 500: '#2196f3',\n 600: '#1e88e5',\n 700: '#1976d2',\n 800: '#1565c0',\n 900: '#0d47a1',\n },\n secondary: {\n 50: '#f3e5f5',\n 100: '#e1bee7',\n 200: '#ce93d8',\n 300: '#ba68c8',\n 400: '#ab47bc',\n 500: '#9c27b0',\n 600: '#8e24aa',\n 700: '#7b1fa2',\n 800: '#6a1b9a',\n 900: '#4a148c',\n },\n success: {\n 50: '#e8f5e9',\n 100: '#c8e6c9',\n 200: '#a5d6a7',\n 300: '#81c784',\n 400: '#66bb6a',\n 500: '#4caf50',\n 600: '#43a047',\n 700: '#388e3c',\n 800: '#2e7d32',\n 900: '#1b5e20',\n },\n warning: {\n 50: '#fff3e0',\n 100: '#ffe0b2',\n 200: '#ffcc80',\n 300: '#ffb74d',\n 400: '#ffa726',\n 500: '#ff9800',\n 600: '#fb8c00',\n 700: '#f57c00',\n 800: '#ef6c00',\n 900: '#e65100',\n },\n danger: {\n 50: '#ffebee',\n 100: '#ffcdd2',\n 200: '#ef9a9a',\n 300: '#e57373',\n 400: '#ef5350',\n 500: '#f44336',\n 600: '#e53935',\n 700: '#d32f2f',\n 800: '#c62828',\n 900: '#b71c1c',\n },\n },\n};\n","import React, { createContext, useContext, useMemo } from 'react';\nimport { Theme, ThemeColors } from './types';\nimport { defaultTheme } from './defaultTheme';\n\ninterface ThemeContextValue {\n theme: Theme;\n}\n\nconst ThemeContext = createContext<ThemeContextValue | undefined>(undefined);\n\ninterface ThemeProviderProps {\n children: React.ReactNode;\n colors?: ThemeColors;\n}\n\nfunction mergeColors(\n defaultColors: ThemeColors,\n customColors?: ThemeColors\n): ThemeColors {\n if (!customColors) return defaultColors;\n\n const merged: ThemeColors = { ...defaultColors };\n\n Object.keys(customColors).forEach((colorKey) => {\n const customColorScale = customColors[colorKey];\n if (customColorScale) {\n merged[colorKey] = {\n ...defaultColors[colorKey],\n ...customColorScale,\n };\n }\n });\n\n return merged;\n}\n\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({\n children,\n colors,\n}) => {\n const theme = useMemo(() => {\n return {\n colors: mergeColors(defaultTheme.colors, colors),\n };\n }, [colors]);\n\n // CSS Variables를 설정\n React.useEffect(() => {\n const root = document.documentElement;\n\n Object.entries(theme.colors).forEach(([colorName, colorScale]) => {\n if (colorScale) {\n Object.entries(colorScale).forEach(([scale, value]) => {\n root.style.setProperty(`--color-${colorName}-${scale}`, value);\n });\n }\n });\n }, [theme]);\n\n return (\n <ThemeContext.Provider value={{ theme }}>{children}</ThemeContext.Provider>\n );\n};\n\nexport const useTheme = (): ThemeContextValue => {\n const context = useContext(ThemeContext);\n if (!context) {\n throw new Error('useTheme must be used within a ThemeProvider');\n }\n return context;\n};\n"],"names":["styles"],"mappings":"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","x_google_ignoreList":[0]}
package/dist/index.js CHANGED
@@ -29,15 +29,15 @@ function styleInject(css, ref) {
29
29
  }
30
30
  }
31
31
 
32
- var css_248z$1 = ".Button-module_button__18Bed{border:none;border-radius:4px;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-weight:500;transition:all .3s ease}.Button-module_button__18Bed:disabled{cursor:not-allowed;opacity:.6}.Button-module_button__18Bed:not(:disabled):hover{box-shadow:0 4px 8px rgba(0,0,0,.15);transform:translateY(-1px)}.Button-module_button__18Bed:not(:disabled):active{transform:translateY(0)}.Button-module_button__18Bed.Button-module_small__zfmcP{font-size:14px;padding:6px 12px}.Button-module_button__18Bed.Button-module_medium__HYxwi{font-size:16px;padding:10px 20px}.Button-module_button__18Bed.Button-module_large__iWceB{font-size:18px;padding:14px 28px}.Button-module_button__18Bed.Button-module_primary__st6yY{background-color:#007bff;color:#fff}.Button-module_button__18Bed.Button-module_primary__st6yY:not(:disabled):hover{background-color:#0062cc}.Button-module_button__18Bed.Button-module_secondary__j-3rj{background-color:#6c757d;color:#fff}.Button-module_button__18Bed.Button-module_secondary__j-3rj:not(:disabled):hover{background-color:#545b62}.Button-module_button__18Bed.Button-module_outline__TFr94{background-color:transparent;border:2px solid #007bff;color:#007bff}.Button-module_button__18Bed.Button-module_outline__TFr94:not(:disabled):hover{background-color:#007bff;color:#fff}";
33
- var styles$1 = {"button":"Button-module_button__18Bed","small":"Button-module_small__zfmcP","medium":"Button-module_medium__HYxwi","large":"Button-module_large__iWceB","primary":"Button-module_primary__st6yY","secondary":"Button-module_secondary__j-3rj","outline":"Button-module_outline__TFr94"};
34
- styleInject(css_248z$1);
32
+ var css_248z$2 = ".Button-module_button__18Bed{border:none;border-radius:4px;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-weight:500;transition:all .3s ease}.Button-module_button__18Bed:disabled{cursor:not-allowed;opacity:.6}.Button-module_button__18Bed:not(:disabled):hover{box-shadow:0 4px 8px rgba(0,0,0,.15);transform:translateY(-1px)}.Button-module_button__18Bed:not(:disabled):active{transform:translateY(0)}.Button-module_button__18Bed.Button-module_small__zfmcP{font-size:14px;padding:6px 12px}.Button-module_button__18Bed.Button-module_medium__HYxwi{font-size:16px;padding:10px 20px}.Button-module_button__18Bed.Button-module_large__iWceB{font-size:18px;padding:14px 28px}.Button-module_button__18Bed.Button-module_primary__st6yY{background-color:var(--color-primary-600,#2196f3);color:#fff}.Button-module_button__18Bed.Button-module_primary__st6yY:not(:disabled):hover{background-color:var(--color-primary-700,#1976d2)}.Button-module_button__18Bed.Button-module_secondary__j-3rj{background-color:var(--color-secondary-600,#8e24aa);color:#fff}.Button-module_button__18Bed.Button-module_secondary__j-3rj:not(:disabled):hover{background-color:var(--color-secondary-700,#7b1fa2)}.Button-module_button__18Bed.Button-module_outline__TFr94{background-color:transparent;border:2px solid var(--color-primary-600,#2196f3);color:var(--color-primary-600,#2196f3)}.Button-module_button__18Bed.Button-module_outline__TFr94:not(:disabled):hover{background-color:var(--color-primary-600,#2196f3);color:#fff}";
33
+ var styles$2 = {"button":"Button-module_button__18Bed","small":"Button-module_small__zfmcP","medium":"Button-module_medium__HYxwi","large":"Button-module_large__iWceB","primary":"Button-module_primary__st6yY","secondary":"Button-module_secondary__j-3rj","outline":"Button-module_outline__TFr94"};
34
+ styleInject(css_248z$2);
35
35
 
36
36
  const Button = ({ children, variant = 'primary', size = 'medium', onClick, disabled = false, type = 'button', className = '', }) => {
37
37
  const buttonClasses = [
38
- styles$1.button,
39
- styles$1[variant],
40
- styles$1[size],
38
+ styles$2.button,
39
+ styles$2[variant],
40
+ styles$2[size],
41
41
  className,
42
42
  ]
43
43
  .filter(Boolean)
@@ -45,27 +45,145 @@ const Button = ({ children, variant = 'primary', size = 'medium', onClick, disab
45
45
  return (React.createElement("button", { className: buttonClasses, onClick: onClick, disabled: disabled, type: type }, children));
46
46
  };
47
47
 
48
- var css_248z = ".Card-module_card__LzN-3{border-radius:8px;overflow:hidden;transition:all .3s ease}.Card-module_card__LzN-3.Card-module_default__iGjRs{background-color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.1)}.Card-module_card__LzN-3.Card-module_elevated__SpUsJ{background-color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.15)}.Card-module_card__LzN-3.Card-module_elevated__SpUsJ:hover{box-shadow:0 8px 16px rgba(0,0,0,.2)}.Card-module_card__LzN-3.Card-module_outlined__SPAas{background-color:#fff;border:1px solid #e0e0e0;box-shadow:none}.Card-module_card__LzN-3.Card-module_clickable__Lx4fx{cursor:pointer}.Card-module_card__LzN-3.Card-module_clickable__Lx4fx:hover{transform:translateY(-2px)}.Card-module_card__LzN-3.Card-module_clickable__Lx4fx:active{transform:translateY(0)}.Card-module_header__j-c-9{border-bottom:1px solid #e0e0e0;padding:16px}.Card-module_title__DzwNA{color:#333;font-size:20px;font-weight:600;margin:0}.Card-module_subtitle__RVMlO{color:#666;font-size:14px;margin:4px 0 0}.Card-module_content__vMtHg{padding:16px}.Card-module_footer__FjLbG{background-color:#f8f9fa;border-top:1px solid #e0e0e0;padding:16px}";
49
- var styles = {"card":"Card-module_card__LzN-3","default":"Card-module_default__iGjRs","elevated":"Card-module_elevated__SpUsJ","outlined":"Card-module_outlined__SPAas","clickable":"Card-module_clickable__Lx4fx","header":"Card-module_header__j-c-9","title":"Card-module_title__DzwNA","subtitle":"Card-module_subtitle__RVMlO","content":"Card-module_content__vMtHg","footer":"Card-module_footer__FjLbG"};
50
- styleInject(css_248z);
48
+ var css_248z$1 = ".Card-module_card__LzN-3{border-radius:8px;overflow:hidden;transition:all .3s ease}.Card-module_card__LzN-3.Card-module_default__iGjRs{background-color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.1)}.Card-module_card__LzN-3.Card-module_elevated__SpUsJ{background-color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.15)}.Card-module_card__LzN-3.Card-module_elevated__SpUsJ:hover{box-shadow:0 8px 16px rgba(0,0,0,.2)}.Card-module_card__LzN-3.Card-module_outlined__SPAas{background-color:#fff;border:1px solid #e0e0e0;box-shadow:none}.Card-module_card__LzN-3.Card-module_clickable__Lx4fx{cursor:pointer}.Card-module_card__LzN-3.Card-module_clickable__Lx4fx:hover{transform:translateY(-2px)}.Card-module_card__LzN-3.Card-module_clickable__Lx4fx:active{transform:translateY(0)}.Card-module_header__j-c-9{border-bottom:1px solid #e0e0e0;padding:16px}.Card-module_title__DzwNA{color:#333;font-size:20px;font-weight:600;margin:0}.Card-module_subtitle__RVMlO{color:#666;font-size:14px;margin:4px 0 0}.Card-module_content__vMtHg{padding:16px}.Card-module_footer__FjLbG{background-color:#f8f9fa;border-top:1px solid #e0e0e0;padding:16px}";
49
+ var styles$1 = {"card":"Card-module_card__LzN-3","default":"Card-module_default__iGjRs","elevated":"Card-module_elevated__SpUsJ","outlined":"Card-module_outlined__SPAas","clickable":"Card-module_clickable__Lx4fx","header":"Card-module_header__j-c-9","title":"Card-module_title__DzwNA","subtitle":"Card-module_subtitle__RVMlO","content":"Card-module_content__vMtHg","footer":"Card-module_footer__FjLbG"};
50
+ styleInject(css_248z$1);
51
51
 
52
52
  const Card = ({ children, title, subtitle, footer, variant = 'default', className = '', onClick, }) => {
53
53
  const cardClasses = [
54
- styles.card,
55
- styles[variant],
56
- onClick ? styles.clickable : '',
54
+ styles$1.card,
55
+ styles$1[variant],
56
+ onClick ? styles$1.clickable : '',
57
57
  className,
58
58
  ]
59
59
  .filter(Boolean)
60
60
  .join(' ');
61
61
  return (React.createElement("div", { className: cardClasses, onClick: onClick },
62
- (title || subtitle) && (React.createElement("div", { className: styles.header },
63
- title && React.createElement("h3", { className: styles.title }, title),
64
- subtitle && React.createElement("p", { className: styles.subtitle }, subtitle))),
65
- React.createElement("div", { className: styles.content }, children),
66
- footer && React.createElement("div", { className: styles.footer }, footer)));
62
+ (title || subtitle) && (React.createElement("div", { className: styles$1.header },
63
+ title && React.createElement("h3", { className: styles$1.title }, title),
64
+ subtitle && React.createElement("p", { className: styles$1.subtitle }, subtitle))),
65
+ React.createElement("div", { className: styles$1.content }, children),
66
+ footer && React.createElement("div", { className: styles$1.footer }, footer)));
67
+ };
68
+
69
+ var css_248z = ".Anchor-module_anchor__uhpem{color:var(--color-primary-600,#2196f3);cursor:pointer;position:relative;text-decoration:none;transition:all .2s ease}.Anchor-module_anchor__uhpem:hover{color:var(--color-primary-700,#1976d2);text-decoration:underline}.Anchor-module_anchor__uhpem:focus{outline:2px solid var(--color-primary-600,#2196f3);outline-offset:2px}.Anchor-module_anchor__uhpem:visited{color:var(--color-primary-800,#1565c0)}.Anchor-module_anchor__uhpem:active{color:var(--color-primary-900,#0d47a1)}";
70
+ var styles = {"anchor":"Anchor-module_anchor__uhpem"};
71
+ styleInject(css_248z);
72
+
73
+ const Anchor = ({ children, href, rel, title, target = '_self', className = '', onClick, }) => {
74
+ const anchorClasses = [styles.anchor, className].filter(Boolean).join(' ');
75
+ return (React.createElement("a", { href: href, rel: rel, title: title, target: target, className: anchorClasses, onClick: onClick }, children));
76
+ };
77
+
78
+ const defaultTheme = {
79
+ colors: {
80
+ primary: {
81
+ 50: '#e3f2fd',
82
+ 100: '#bbdefb',
83
+ 200: '#90caf9',
84
+ 300: '#64b5f6',
85
+ 400: '#42a5f5',
86
+ 500: '#2196f3',
87
+ 600: '#1e88e5',
88
+ 700: '#1976d2',
89
+ 800: '#1565c0',
90
+ 900: '#0d47a1',
91
+ },
92
+ secondary: {
93
+ 50: '#f3e5f5',
94
+ 100: '#e1bee7',
95
+ 200: '#ce93d8',
96
+ 300: '#ba68c8',
97
+ 400: '#ab47bc',
98
+ 500: '#9c27b0',
99
+ 600: '#8e24aa',
100
+ 700: '#7b1fa2',
101
+ 800: '#6a1b9a',
102
+ 900: '#4a148c',
103
+ },
104
+ success: {
105
+ 50: '#e8f5e9',
106
+ 100: '#c8e6c9',
107
+ 200: '#a5d6a7',
108
+ 300: '#81c784',
109
+ 400: '#66bb6a',
110
+ 500: '#4caf50',
111
+ 600: '#43a047',
112
+ 700: '#388e3c',
113
+ 800: '#2e7d32',
114
+ 900: '#1b5e20',
115
+ },
116
+ warning: {
117
+ 50: '#fff3e0',
118
+ 100: '#ffe0b2',
119
+ 200: '#ffcc80',
120
+ 300: '#ffb74d',
121
+ 400: '#ffa726',
122
+ 500: '#ff9800',
123
+ 600: '#fb8c00',
124
+ 700: '#f57c00',
125
+ 800: '#ef6c00',
126
+ 900: '#e65100',
127
+ },
128
+ danger: {
129
+ 50: '#ffebee',
130
+ 100: '#ffcdd2',
131
+ 200: '#ef9a9a',
132
+ 300: '#e57373',
133
+ 400: '#ef5350',
134
+ 500: '#f44336',
135
+ 600: '#e53935',
136
+ 700: '#d32f2f',
137
+ 800: '#c62828',
138
+ 900: '#b71c1c',
139
+ },
140
+ },
141
+ };
142
+
143
+ const ThemeContext = React.createContext(undefined);
144
+ function mergeColors(defaultColors, customColors) {
145
+ if (!customColors)
146
+ return defaultColors;
147
+ const merged = Object.assign({}, defaultColors);
148
+ Object.keys(customColors).forEach((colorKey) => {
149
+ const customColorScale = customColors[colorKey];
150
+ if (customColorScale) {
151
+ merged[colorKey] = Object.assign(Object.assign({}, defaultColors[colorKey]), customColorScale);
152
+ }
153
+ });
154
+ return merged;
155
+ }
156
+ const ThemeProvider = ({ children, colors, }) => {
157
+ const theme = React.useMemo(() => {
158
+ return {
159
+ colors: mergeColors(defaultTheme.colors, colors),
160
+ };
161
+ }, [colors]);
162
+ // CSS Variables를 설정
163
+ React.useEffect(() => {
164
+ const root = document.documentElement;
165
+ Object.entries(theme.colors).forEach(([colorName, colorScale]) => {
166
+ if (colorScale) {
167
+ Object.entries(colorScale).forEach(([scale, value]) => {
168
+ root.style.setProperty(`--color-${colorName}-${scale}`, value);
169
+ });
170
+ }
171
+ });
172
+ }, [theme]);
173
+ return (React.createElement(ThemeContext.Provider, { value: { theme } }, children));
174
+ };
175
+ const useTheme = () => {
176
+ const context = React.useContext(ThemeContext);
177
+ if (!context) {
178
+ throw new Error('useTheme must be used within a ThemeProvider');
179
+ }
180
+ return context;
67
181
  };
68
182
 
183
+ exports.Anchor = Anchor;
69
184
  exports.Button = Button;
70
185
  exports.Card = Card;
186
+ exports.ThemeProvider = ThemeProvider;
187
+ exports.defaultTheme = defaultTheme;
188
+ exports.useTheme = useTheme;
71
189
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/components/Button/Button.tsx","../src/components/Card/Card.tsx"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import React from 'react';\nimport styles from './Button.module.scss';\n\nexport interface ButtonProps {\n children: React.ReactNode;\n variant?: 'primary' | 'secondary' | 'outline';\n size?: 'small' | 'medium' | 'large';\n onClick?: () => void;\n disabled?: boolean;\n type?: 'button' | 'submit' | 'reset';\n className?: string;\n}\n\nexport const Button: React.FC<ButtonProps> = ({\n children,\n variant = 'primary',\n size = 'medium',\n onClick,\n disabled = false,\n type = 'button',\n className = '',\n}) => {\n const buttonClasses = [\n styles.button,\n styles[variant],\n styles[size],\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <button\n className={buttonClasses}\n onClick={onClick}\n disabled={disabled}\n type={type}\n >\n {children}\n </button>\n );\n};\n","import React from 'react';\nimport styles from './Card.module.scss';\n\nexport interface CardProps {\n children: React.ReactNode;\n title?: string;\n subtitle?: string;\n footer?: React.ReactNode;\n variant?: 'default' | 'elevated' | 'outlined';\n className?: string;\n onClick?: () => void;\n}\n\nexport const Card: React.FC<CardProps> = ({\n children,\n title,\n subtitle,\n footer,\n variant = 'default',\n className = '',\n onClick,\n}) => {\n const cardClasses = [\n styles.card,\n styles[variant],\n onClick ? styles.clickable : '',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className={cardClasses} onClick={onClick}>\n {(title || subtitle) && (\n <div className={styles.header}>\n {title && <h3 className={styles.title}>{title}</h3>}\n {subtitle && <p className={styles.subtitle}>{subtitle}</p>}\n </div>\n )}\n <div className={styles.content}>{children}</div>\n {footer && <div className={styles.footer}>{footer}</div>}\n </div>\n );\n};\n"],"names":["styles"],"mappings":"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","x_google_ignoreList":[0]}
1
+ {"version":3,"file":"index.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/components/Button/Button.tsx","../src/components/Card/Card.tsx","../src/components/Anchor/Anchor.tsx","../src/theme/defaultTheme.ts","../src/theme/ThemeProvider.tsx"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import React from 'react';\nimport styles from './Button.module.scss';\n\nexport interface ButtonProps {\n children: React.ReactNode;\n variant?: 'primary' | 'secondary' | 'outline';\n size?: 'small' | 'medium' | 'large';\n onClick?: () => void;\n disabled?: boolean;\n type?: 'button' | 'submit' | 'reset';\n className?: string;\n}\n\nexport const Button: React.FC<ButtonProps> = ({\n children,\n variant = 'primary',\n size = 'medium',\n onClick,\n disabled = false,\n type = 'button',\n className = '',\n}) => {\n const buttonClasses = [\n styles.button,\n styles[variant],\n styles[size],\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <button\n className={buttonClasses}\n onClick={onClick}\n disabled={disabled}\n type={type}\n >\n {children}\n </button>\n );\n};\n","import React from 'react';\nimport styles from './Card.module.scss';\n\nexport interface CardProps {\n children: React.ReactNode;\n title?: string;\n subtitle?: string;\n footer?: React.ReactNode;\n variant?: 'default' | 'elevated' | 'outlined';\n className?: string;\n onClick?: () => void;\n}\n\nexport const Card: React.FC<CardProps> = ({\n children,\n title,\n subtitle,\n footer,\n variant = 'default',\n className = '',\n onClick,\n}) => {\n const cardClasses = [\n styles.card,\n styles[variant],\n onClick ? styles.clickable : '',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className={cardClasses} onClick={onClick}>\n {(title || subtitle) && (\n <div className={styles.header}>\n {title && <h3 className={styles.title}>{title}</h3>}\n {subtitle && <p className={styles.subtitle}>{subtitle}</p>}\n </div>\n )}\n <div className={styles.content}>{children}</div>\n {footer && <div className={styles.footer}>{footer}</div>}\n </div>\n );\n};\n","import React from 'react';\nimport styles from './Anchor.module.scss';\n\nexport interface AnchorProps {\n children: React.ReactNode;\n href: string;\n rel: string;\n title: string;\n target?: '_blank' | '_self' | '_parent' | '_top';\n className?: string;\n onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;\n}\n\nexport const Anchor: React.FC<AnchorProps> = ({\n children,\n href,\n rel,\n title,\n target = '_self',\n className = '',\n onClick,\n}) => {\n const anchorClasses = [styles.anchor, className].filter(Boolean).join(' ');\n\n return (\n <a\n href={href}\n rel={rel}\n title={title}\n target={target}\n className={anchorClasses}\n onClick={onClick}\n >\n {children}\n </a>\n );\n};\n","import { Theme } from './types';\n\nexport const defaultTheme: Theme = {\n colors: {\n primary: {\n 50: '#e3f2fd',\n 100: '#bbdefb',\n 200: '#90caf9',\n 300: '#64b5f6',\n 400: '#42a5f5',\n 500: '#2196f3',\n 600: '#1e88e5',\n 700: '#1976d2',\n 800: '#1565c0',\n 900: '#0d47a1',\n },\n secondary: {\n 50: '#f3e5f5',\n 100: '#e1bee7',\n 200: '#ce93d8',\n 300: '#ba68c8',\n 400: '#ab47bc',\n 500: '#9c27b0',\n 600: '#8e24aa',\n 700: '#7b1fa2',\n 800: '#6a1b9a',\n 900: '#4a148c',\n },\n success: {\n 50: '#e8f5e9',\n 100: '#c8e6c9',\n 200: '#a5d6a7',\n 300: '#81c784',\n 400: '#66bb6a',\n 500: '#4caf50',\n 600: '#43a047',\n 700: '#388e3c',\n 800: '#2e7d32',\n 900: '#1b5e20',\n },\n warning: {\n 50: '#fff3e0',\n 100: '#ffe0b2',\n 200: '#ffcc80',\n 300: '#ffb74d',\n 400: '#ffa726',\n 500: '#ff9800',\n 600: '#fb8c00',\n 700: '#f57c00',\n 800: '#ef6c00',\n 900: '#e65100',\n },\n danger: {\n 50: '#ffebee',\n 100: '#ffcdd2',\n 200: '#ef9a9a',\n 300: '#e57373',\n 400: '#ef5350',\n 500: '#f44336',\n 600: '#e53935',\n 700: '#d32f2f',\n 800: '#c62828',\n 900: '#b71c1c',\n },\n },\n};\n","import React, { createContext, useContext, useMemo } from 'react';\nimport { Theme, ThemeColors } from './types';\nimport { defaultTheme } from './defaultTheme';\n\ninterface ThemeContextValue {\n theme: Theme;\n}\n\nconst ThemeContext = createContext<ThemeContextValue | undefined>(undefined);\n\ninterface ThemeProviderProps {\n children: React.ReactNode;\n colors?: ThemeColors;\n}\n\nfunction mergeColors(\n defaultColors: ThemeColors,\n customColors?: ThemeColors\n): ThemeColors {\n if (!customColors) return defaultColors;\n\n const merged: ThemeColors = { ...defaultColors };\n\n Object.keys(customColors).forEach((colorKey) => {\n const customColorScale = customColors[colorKey];\n if (customColorScale) {\n merged[colorKey] = {\n ...defaultColors[colorKey],\n ...customColorScale,\n };\n }\n });\n\n return merged;\n}\n\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({\n children,\n colors,\n}) => {\n const theme = useMemo(() => {\n return {\n colors: mergeColors(defaultTheme.colors, colors),\n };\n }, [colors]);\n\n // CSS Variables를 설정\n React.useEffect(() => {\n const root = document.documentElement;\n\n Object.entries(theme.colors).forEach(([colorName, colorScale]) => {\n if (colorScale) {\n Object.entries(colorScale).forEach(([scale, value]) => {\n root.style.setProperty(`--color-${colorName}-${scale}`, value);\n });\n }\n });\n }, [theme]);\n\n return (\n <ThemeContext.Provider value={{ theme }}>{children}</ThemeContext.Provider>\n );\n};\n\nexport const useTheme = (): ThemeContextValue => {\n const context = useContext(ThemeContext);\n if (!context) {\n throw new Error('useTheme must be used within a ThemeProvider');\n }\n return context;\n};\n"],"names":["styles","createContext","useMemo","useContext"],"mappings":"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","x_google_ignoreList":[0]}
package/dist/theme/ThemeProvider.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ import React from 'react';
2
+ import { Theme, ThemeColors } from './types';
3
+ interface ThemeContextValue {
4
+ theme: Theme;
5
+ }
6
+ interface ThemeProviderProps {
7
+ children: React.ReactNode;
8
+ colors?: ThemeColors;
9
+ }
10
+ export declare const ThemeProvider: React.FC<ThemeProviderProps>;
11
+ export declare const useTheme: () => ThemeContextValue;
12
+ export {};
package/dist/theme/defaultTheme.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import { Theme } from './types';
2
+ export declare const defaultTheme: Theme;
package/dist/theme/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export { ThemeProvider, useTheme } from './ThemeProvider';
2
+ export { defaultTheme } from './defaultTheme';
3
+ export type { Theme, ThemeColors, ColorScale } from './types';
package/dist/theme/types.d.ts ADDED
@@ -0,0 +1,23 @@
1
+ export interface ColorScale {
2
+ 50: string;
3
+ 100: string;
4
+ 200: string;
5
+ 300: string;
6
+ 400: string;
7
+ 500: string;
8
+ 600: string;
9
+ 700: string;
10
+ 800: string;
11
+ 900: string;
12
+ }
13
+ export interface ThemeColors {
14
+ primary?: Partial<ColorScale>;
15
+ secondary?: Partial<ColorScale>;
16
+ success?: Partial<ColorScale>;
17
+ warning?: Partial<ColorScale>;
18
+ danger?: Partial<ColorScale>;
19
+ [key: string]: Partial<ColorScale> | undefined;
20
+ }
21
+ export interface Theme {
22
+ colors: ThemeColors;
23
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pisodev/test-component-library",
3
- "version": "1.0.1",
3
+ "version": "1.1.0",
4
4
  "description": "SCSS 기반 React 컴포넌트 라이브러리",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",