@pisodev/test-component-library 1.0.0 → 1.0.2
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.
- package/README.md +67 -110
- package/dist/components/Anchor/Anchor.d.ts +11 -0
- package/dist/components/Anchor/index.d.ts +2 -0
- package/dist/components/index.d.ts +2 -0
- package/dist/index.esm.js +27 -18
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +27 -17
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,146 +1,103 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @pisodev/test-component-library
|
|
2
2
|
|
|
3
|
-
SASS
|
|
3
|
+
SASS 기반 React 컴포넌트 라이브러리입니다.
|
|
4
4
|
|
|
5
5
|
## 설치
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
|
-
npm install @
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
또는
|
|
12
|
-
|
|
13
|
-
```bash
|
|
14
|
-
yarn add @yourname/react-sass-component-library
|
|
8
|
+
npm install @pisodev/test-component-library
|
|
15
9
|
```
|
|
16
10
|
|
|
17
11
|
## 사용법
|
|
18
12
|
|
|
19
|
-
### Button 컴포넌트
|
|
20
|
-
|
|
21
13
|
```tsx
|
|
22
|
-
import { Button } from '@
|
|
14
|
+
import { Button, Card, Anchor } from '@pisodev/test-component-library';
|
|
23
15
|
|
|
24
16
|
function App() {
|
|
25
17
|
return (
|
|
26
|
-
<
|
|
27
|
-
<
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
<Button variant="secondary" size="large">
|
|
32
|
-
Secondary Button
|
|
33
|
-
</Button>
|
|
34
|
-
|
|
35
|
-
<Button variant="outline" size="small" disabled>
|
|
36
|
-
Disabled Button
|
|
18
|
+
<Card title="환영합니다" variant="elevated">
|
|
19
|
+
<p>컴포넌트 라이브러리 예시입니다.</p>
|
|
20
|
+
<Button variant="primary" onClick={() => alert('클릭!')}>
|
|
21
|
+
시작하기
|
|
37
22
|
</Button>
|
|
38
|
-
|
|
23
|
+
<Anchor
|
|
24
|
+
href="https://example.com"
|
|
25
|
+
rel="noopener noreferrer"
|
|
26
|
+
title="예시 사이트로 이동"
|
|
27
|
+
>
|
|
28
|
+
더 알아보기
|
|
29
|
+
</Anchor>
|
|
30
|
+
</Card>
|
|
39
31
|
);
|
|
40
32
|
}
|
|
41
33
|
```
|
|
42
34
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
| Prop | Type | Default | Description |
|
|
46
|
-
|------|------|---------|-------------|
|
|
47
|
-
| `children` | `React.ReactNode` | - | 버튼 내용 |
|
|
48
|
-
| `variant` | `'primary' \| 'secondary' \| 'outline'` | `'primary'` | 버튼 스타일 |
|
|
49
|
-
| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | 버튼 크기 |
|
|
50
|
-
| `onClick` | `() => void` | - | 클릭 이벤트 핸들러 |
|
|
51
|
-
| `disabled` | `boolean` | `false` | 비활성화 여부 |
|
|
52
|
-
| `type` | `'button' \| 'submit' \| 'reset'` | `'button'` | 버튼 타입 |
|
|
53
|
-
| `className` | `string` | `''` | 추가 CSS 클래스 |
|
|
54
|
-
|
|
55
|
-
### Card 컴포넌트
|
|
35
|
+
### Button
|
|
56
36
|
|
|
57
37
|
```tsx
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
return (
|
|
62
|
-
<div>
|
|
63
|
-
<Card
|
|
64
|
-
title="카드 제목"
|
|
65
|
-
subtitle="카드 부제목"
|
|
66
|
-
variant="elevated"
|
|
67
|
-
>
|
|
68
|
-
<p>카드 내용이 여기에 들어갑니다.</p>
|
|
69
|
-
</Card>
|
|
70
|
-
|
|
71
|
-
<Card
|
|
72
|
-
variant="outlined"
|
|
73
|
-
footer={<button>액션 버튼</button>}
|
|
74
|
-
>
|
|
75
|
-
<p>Footer가 있는 카드입니다.</p>
|
|
76
|
-
</Card>
|
|
77
|
-
|
|
78
|
-
<Card
|
|
79
|
-
variant="default"
|
|
80
|
-
onClick={() => console.log('카드 클릭됨')}
|
|
81
|
-
>
|
|
82
|
-
<p>클릭 가능한 카드입니다.</p>
|
|
83
|
-
</Card>
|
|
84
|
-
</div>
|
|
85
|
-
);
|
|
86
|
-
}
|
|
38
|
+
<Button variant="primary" size="medium">Primary</Button>
|
|
39
|
+
<Button variant="secondary" size="large">Secondary</Button>
|
|
40
|
+
<Button variant="outline" size="small" disabled>Disabled</Button>
|
|
87
41
|
```
|
|
88
42
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
| `title` | `string` | - | 카드 제목 |
|
|
95
|
-
| `subtitle` | `string` | - | 카드 부제목 |
|
|
96
|
-
| `footer` | `React.ReactNode` | - | 카드 푸터 |
|
|
97
|
-
| `variant` | `'default' \| 'elevated' \| 'outlined'` | `'default'` | 카드 스타일 |
|
|
98
|
-
| `className` | `string` | `''` | 추가 CSS 클래스 |
|
|
99
|
-
| `onClick` | `() => void` | - | 클릭 이벤트 핸들러 |
|
|
43
|
+
**Props**
|
|
44
|
+
- `variant`: `'primary'` | `'secondary'` | `'outline'` (기본값: `'primary'`)
|
|
45
|
+
- `size`: `'small'` | `'medium'` | `'large'` (기본값: `'medium'`)
|
|
46
|
+
- `disabled`: `boolean`
|
|
47
|
+
- `onClick`: `() => void`
|
|
100
48
|
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
Next.js 프로젝트에서는 별도의 SASS 설정 없이 바로 사용할 수 있습니다. 스타일은 자동으로 번들에 포함됩니다.
|
|
49
|
+
### Card
|
|
104
50
|
|
|
105
51
|
```tsx
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
<Button variant="primary">시작하기</Button>
|
|
115
|
-
</Card>
|
|
116
|
-
</main>
|
|
117
|
-
);
|
|
118
|
-
}
|
|
52
|
+
<Card
|
|
53
|
+
title="제목"
|
|
54
|
+
subtitle="부제목"
|
|
55
|
+
variant="elevated"
|
|
56
|
+
footer={<button>액션</button>}
|
|
57
|
+
>
|
|
58
|
+
내용
|
|
59
|
+
</Card>
|
|
119
60
|
```
|
|
120
61
|
|
|
121
|
-
|
|
62
|
+
**Props**
|
|
63
|
+
- `title`: `string`
|
|
64
|
+
- `subtitle`: `string`
|
|
65
|
+
- `variant`: `'default'` | `'elevated'` | `'outlined'` (기본값: `'default'`)
|
|
66
|
+
- `footer`: `React.ReactNode`
|
|
67
|
+
- `onClick`: `() => void`
|
|
122
68
|
|
|
123
|
-
###
|
|
69
|
+
### Anchor
|
|
124
70
|
|
|
125
|
-
|
|
126
|
-
|
|
71
|
+
`rel`과 `title` 속성이 **필수**인 링크 컴포넌트입니다. 접근성과 SEO를 위해 항상 이 속성들을 제공해야 합니다.
|
|
72
|
+
|
|
73
|
+
```tsx
|
|
74
|
+
<Anchor
|
|
75
|
+
href="https://example.com"
|
|
76
|
+
rel="noopener noreferrer"
|
|
77
|
+
title="예시 사이트로 이동"
|
|
78
|
+
target="_blank"
|
|
79
|
+
>
|
|
80
|
+
외부 링크
|
|
81
|
+
</Anchor>
|
|
82
|
+
|
|
83
|
+
<Anchor
|
|
84
|
+
href="/about"
|
|
85
|
+
rel="internal"
|
|
86
|
+
title="회사 소개 페이지"
|
|
87
|
+
>
|
|
88
|
+
회사 소개
|
|
89
|
+
</Anchor>
|
|
127
90
|
```
|
|
128
91
|
|
|
129
|
-
|
|
92
|
+
**Props (필수 항목)**
|
|
93
|
+
- `href`: `string` (필수)
|
|
94
|
+
- `rel`: `string` (필수) - 링크 관계 (예: `"noopener noreferrer"`, `"internal"`)
|
|
95
|
+
- `title`: `string` (필수) - 링크 설명 (접근성 및 SEO에 중요)
|
|
96
|
+
- `target`: `'_blank'` | `'_self'` | `'_parent'` | `'_top'` (기본값: `'_self'`)
|
|
97
|
+
- `onClick`: `(e: React.MouseEvent<HTMLAnchorElement>) => void`
|
|
130
98
|
|
|
131
|
-
|
|
132
|
-
npm publish --access public
|
|
133
|
-
```
|
|
99
|
+
> **참고**: `rel`과 `title`은 접근성, SEO, 보안을 위해 반드시 제공해야 하는 필수 속성입니다.
|
|
134
100
|
|
|
135
101
|
## 라이센스
|
|
136
102
|
|
|
137
103
|
MIT
|
|
138
|
-
|
|
139
|
-
## 특징
|
|
140
|
-
|
|
141
|
-
- TypeScript 지원
|
|
142
|
-
- SASS 기반 스타일링
|
|
143
|
-
- CSS Modules를 통한 스타일 캡슐화
|
|
144
|
-
- React 17, 18, 19 지원
|
|
145
|
-
- Next.js 완벽 호환
|
|
146
|
-
- Tree-shaking 지원 (ESM)
|
|
@@ -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/index.esm.js
CHANGED
|
@@ -27,15 +27,15 @@ function styleInject(css, ref) {
|
|
|
27
27
|
}
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
-
var css_248z$
|
|
31
|
-
var styles$
|
|
32
|
-
styleInject(css_248z$
|
|
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:#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$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$
|
|
37
|
-
styles$
|
|
38
|
-
styles$
|
|
36
|
+
styles$2.button,
|
|
37
|
+
styles$2[variant],
|
|
38
|
+
styles$2[size],
|
|
39
39
|
className,
|
|
40
40
|
]
|
|
41
41
|
.filter(Boolean)
|
|
@@ -43,26 +43,35 @@ 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:#007bff;cursor:pointer;position:relative;text-decoration:none;transition:all .2s ease}.Anchor-module_anchor__uhpem:hover{color:#0056b3;text-decoration:underline}.Anchor-module_anchor__uhpem:focus{outline:2px solid #007bff;outline-offset:2px}.Anchor-module_anchor__uhpem:visited{color:#0056b3}.Anchor-module_anchor__uhpem:active{color:#004a99}";
|
|
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));
|
|
65
74
|
};
|
|
66
75
|
|
|
67
|
-
export { Button, Card };
|
|
76
|
+
export { Anchor, Button, Card };
|
|
68
77
|
//# 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":";;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,MAAM,GAAG,GAAG,GAAG,EAAE;AAChC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ;;AAE7B,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,CAAC;;AAEzD,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;AACtE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AAC7C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU;;AAEzB,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC;AAC/C,IAAI,CAAC,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC7B,IAAI;AACJ,EAAE,CAAC,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC3B,EAAE;;AAEF,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG;AAClC,EAAE,CAAC,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;AACnD,EAAE;AACF;;;;;;ACZO,MAAM,MAAM,GAA0B,CAAC,EAC5C,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,QAAQ,EACf,OAAO,EACP,QAAQ,GAAG,KAAK,EAChB,IAAI,GAAG,QAAQ,EACf,SAAS,GAAG,EAAE,GACf,KAAI;AACH,IAAA,MAAM,aAAa,GAAG;AACpB,QAAAA,QAAM,CAAC,MAAM;QACbA,QAAM,CAAC,OAAO,CAAC;QACfA,QAAM,CAAC,IAAI,CAAC;QACZ,SAAS;AACV;SACE,MAAM,CAAC,OAAO;SACd,IAAI,CAAC,GAAG,CAAC;IAEZ,QACE,gCACE,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EAAA,EAET,QAAQ,CACF;AAEb;;;;;;AC5BO,MAAM,IAAI,GAAwB,CAAC,EACxC,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,MAAM,EACN,OAAO,GAAG,SAAS,EACnB,SAAS,GAAG,EAAE,EACd,OAAO,GACR,KAAI;AACH,IAAA,MAAM,WAAW,GAAG;AAClB,
|
|
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"],"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"],"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$
|
|
33
|
-
var styles$
|
|
34
|
-
styleInject(css_248z$
|
|
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:#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$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$
|
|
39
|
-
styles$
|
|
40
|
-
styles$
|
|
38
|
+
styles$2.button,
|
|
39
|
+
styles$2[variant],
|
|
40
|
+
styles$2[size],
|
|
41
41
|
className,
|
|
42
42
|
]
|
|
43
43
|
.filter(Boolean)
|
|
@@ -45,27 +45,37 @@ 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:#007bff;cursor:pointer;position:relative;text-decoration:none;transition:all .2s ease}.Anchor-module_anchor__uhpem:hover{color:#0056b3;text-decoration:underline}.Anchor-module_anchor__uhpem:focus{outline:2px solid #007bff;outline-offset:2px}.Anchor-module_anchor__uhpem:visited{color:#0056b3}.Anchor-module_anchor__uhpem:active{color:#004a99}";
|
|
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));
|
|
67
76
|
};
|
|
68
77
|
|
|
78
|
+
exports.Anchor = Anchor;
|
|
69
79
|
exports.Button = Button;
|
|
70
80
|
exports.Card = Card;
|
|
71
81
|
//# 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":";;;;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,MAAM,GAAG,GAAG,GAAG,EAAE;AAChC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ;;AAE7B,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,CAAC;;AAEzD,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;AACtE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AAC7C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU;;AAEzB,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC;AAC/C,IAAI,CAAC,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC7B,IAAI;AACJ,EAAE,CAAC,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC3B,EAAE;;AAEF,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG;AAClC,EAAE,CAAC,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;AACnD,EAAE;AACF;;;;;;ACZO,MAAM,MAAM,GAA0B,CAAC,EAC5C,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,QAAQ,EACf,OAAO,EACP,QAAQ,GAAG,KAAK,EAChB,IAAI,GAAG,QAAQ,EACf,SAAS,GAAG,EAAE,GACf,KAAI;AACH,IAAA,MAAM,aAAa,GAAG;AACpB,QAAAA,QAAM,CAAC,MAAM;QACbA,QAAM,CAAC,OAAO,CAAC;QACfA,QAAM,CAAC,IAAI,CAAC;QACZ,SAAS;AACV;SACE,MAAM,CAAC,OAAO;SACd,IAAI,CAAC,GAAG,CAAC;IAEZ,QACE,gCACE,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EAAA,EAET,QAAQ,CACF;AAEb;;;;;;AC5BO,MAAM,IAAI,GAAwB,CAAC,EACxC,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,MAAM,EACN,OAAO,GAAG,SAAS,EACnB,SAAS,GAAG,EAAE,EACd,OAAO,GACR,KAAI;AACH,IAAA,MAAM,WAAW,GAAG;AAClB,
|
|
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"],"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"],"names":["styles"],"mappings":"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","x_google_ignoreList":[0]}
|