dak-krds 0.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.
- package/README.md +219 -0
- package/dist/index.d.mts +73 -0
- package/dist/index.d.ts +73 -0
- package/dist/index.js +10 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +10 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +53 -0
package/README.md
ADDED
|
@@ -0,0 +1,219 @@
|
|
|
1
|
+
# DAK KRDS
|
|
2
|
+
|
|
3
|
+
DAK React UI Component Design System - 모던하고 사용하기 쉬운 React 컴포넌트 라이브러리입니다.
|
|
4
|
+
|
|
5
|
+
## 특징
|
|
6
|
+
|
|
7
|
+
- 🎨 모던한 디자인
|
|
8
|
+
- 📦 TypeScript 지원
|
|
9
|
+
- 🎯 완전한 타입 안정성
|
|
10
|
+
- 🚀 Tree-shaking 지원
|
|
11
|
+
- 💅 커스터마이징 가능한 스타일
|
|
12
|
+
- ⚡️ 경량화된 번들 사이즈
|
|
13
|
+
|
|
14
|
+
## 설치
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
pnpm add dak-krds
|
|
18
|
+
# or
|
|
19
|
+
npm install dak-krds
|
|
20
|
+
# or
|
|
21
|
+
yarn add dak-krds
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## 사용법
|
|
25
|
+
|
|
26
|
+
```tsx
|
|
27
|
+
import { Button, Input, Card, Badge } from 'dak-krds';
|
|
28
|
+
|
|
29
|
+
function App() {
|
|
30
|
+
return (
|
|
31
|
+
<Card variant="elevated" padding="large">
|
|
32
|
+
<Badge variant="success">새로운 기능</Badge>
|
|
33
|
+
<Button variant="primary" size="medium">
|
|
34
|
+
시작하기
|
|
35
|
+
</Button>
|
|
36
|
+
<Input
|
|
37
|
+
label="이름"
|
|
38
|
+
placeholder="이름을 입력하세요"
|
|
39
|
+
/>
|
|
40
|
+
</Card>
|
|
41
|
+
);
|
|
42
|
+
}
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## 컴포넌트
|
|
46
|
+
|
|
47
|
+
### Button
|
|
48
|
+
|
|
49
|
+
버튼 컴포넌트는 3가지 variant와 3가지 size를 지원합니다.
|
|
50
|
+
|
|
51
|
+
```tsx
|
|
52
|
+
<Button variant="primary">Primary</Button>
|
|
53
|
+
<Button variant="secondary">Secondary</Button>
|
|
54
|
+
<Button variant="outline">Outline</Button>
|
|
55
|
+
|
|
56
|
+
<Button size="small">Small</Button>
|
|
57
|
+
<Button size="medium">Medium</Button>
|
|
58
|
+
<Button size="large">Large</Button>
|
|
59
|
+
|
|
60
|
+
<Button disabled>Disabled</Button>
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
### Input
|
|
64
|
+
|
|
65
|
+
입력 필드 컴포넌트입니다.
|
|
66
|
+
|
|
67
|
+
```tsx
|
|
68
|
+
<Input
|
|
69
|
+
label="이메일"
|
|
70
|
+
type="email"
|
|
71
|
+
placeholder="email@example.com"
|
|
72
|
+
/>
|
|
73
|
+
|
|
74
|
+
<Input
|
|
75
|
+
label="비밀번호"
|
|
76
|
+
type="password"
|
|
77
|
+
error="비밀번호가 일치하지 않습니다"
|
|
78
|
+
/>
|
|
79
|
+
|
|
80
|
+
<Input
|
|
81
|
+
label="이름"
|
|
82
|
+
helperText="실명을 입력해주세요"
|
|
83
|
+
/>
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
### Card
|
|
87
|
+
|
|
88
|
+
컨텐츠를 그룹화하는 카드 컴포넌트입니다.
|
|
89
|
+
|
|
90
|
+
```tsx
|
|
91
|
+
<Card variant="default" padding="medium">
|
|
92
|
+
기본 카드
|
|
93
|
+
</Card>
|
|
94
|
+
|
|
95
|
+
<Card variant="bordered" padding="large">
|
|
96
|
+
테두리가 있는 카드
|
|
97
|
+
</Card>
|
|
98
|
+
|
|
99
|
+
<Card variant="elevated" padding="small">
|
|
100
|
+
그림자가 있는 카드
|
|
101
|
+
</Card>
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
### Badge
|
|
105
|
+
|
|
106
|
+
상태를 표시하는 배지 컴포넌트입니다.
|
|
107
|
+
|
|
108
|
+
```tsx
|
|
109
|
+
<Badge variant="primary">Primary</Badge>
|
|
110
|
+
<Badge variant="success">Success</Badge>
|
|
111
|
+
<Badge variant="warning">Warning</Badge>
|
|
112
|
+
<Badge variant="error">Error</Badge>
|
|
113
|
+
<Badge variant="info">Info</Badge>
|
|
114
|
+
|
|
115
|
+
<Badge size="small">Small</Badge>
|
|
116
|
+
<Badge size="medium">Medium</Badge>
|
|
117
|
+
<Badge size="large">Large</Badge>
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
### Checkbox
|
|
121
|
+
|
|
122
|
+
체크박스 컴포넌트입니다.
|
|
123
|
+
|
|
124
|
+
```tsx
|
|
125
|
+
<Checkbox label="약관에 동의합니다" />
|
|
126
|
+
|
|
127
|
+
<Checkbox
|
|
128
|
+
label="마케팅 수신 동의"
|
|
129
|
+
defaultChecked
|
|
130
|
+
/>
|
|
131
|
+
|
|
132
|
+
<Checkbox
|
|
133
|
+
label="필수 항목"
|
|
134
|
+
error="필수 항목입니다"
|
|
135
|
+
/>
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
### Switch
|
|
139
|
+
|
|
140
|
+
토글 스위치 컴포넌트입니다.
|
|
141
|
+
|
|
142
|
+
```tsx
|
|
143
|
+
<Switch label="알림 받기" />
|
|
144
|
+
|
|
145
|
+
<Switch
|
|
146
|
+
label="다크 모드"
|
|
147
|
+
defaultChecked
|
|
148
|
+
/>
|
|
149
|
+
|
|
150
|
+
<Switch
|
|
151
|
+
label="자동 저장"
|
|
152
|
+
disabled
|
|
153
|
+
/>
|
|
154
|
+
```
|
|
155
|
+
|
|
156
|
+
### Select
|
|
157
|
+
|
|
158
|
+
드롭다운 선택 컴포넌트입니다.
|
|
159
|
+
|
|
160
|
+
```tsx
|
|
161
|
+
const options = [
|
|
162
|
+
{ value: 'ko', label: '한국어' },
|
|
163
|
+
{ value: 'en', label: 'English' },
|
|
164
|
+
{ value: 'ja', label: '日本語' },
|
|
165
|
+
];
|
|
166
|
+
|
|
167
|
+
<Select
|
|
168
|
+
label="언어"
|
|
169
|
+
options={options}
|
|
170
|
+
defaultValue="ko"
|
|
171
|
+
/>
|
|
172
|
+
|
|
173
|
+
<Select
|
|
174
|
+
label="국가"
|
|
175
|
+
options={options}
|
|
176
|
+
error="국가를 선택해주세요"
|
|
177
|
+
/>
|
|
178
|
+
```
|
|
179
|
+
|
|
180
|
+
### TextArea
|
|
181
|
+
|
|
182
|
+
여러 줄 입력 컴포넌트입니다.
|
|
183
|
+
|
|
184
|
+
```tsx
|
|
185
|
+
<TextArea
|
|
186
|
+
label="메시지"
|
|
187
|
+
placeholder="메시지를 입력하세요"
|
|
188
|
+
rows={5}
|
|
189
|
+
/>
|
|
190
|
+
|
|
191
|
+
<TextArea
|
|
192
|
+
label="내용"
|
|
193
|
+
resize="vertical"
|
|
194
|
+
helperText="최소 10자 이상 입력해주세요"
|
|
195
|
+
/>
|
|
196
|
+
|
|
197
|
+
<TextArea
|
|
198
|
+
label="설명"
|
|
199
|
+
error="내용이 너무 짧습니다"
|
|
200
|
+
/>
|
|
201
|
+
```
|
|
202
|
+
|
|
203
|
+
## TypeScript
|
|
204
|
+
|
|
205
|
+
모든 컴포넌트는 완전한 TypeScript 타입 정의를 제공합니다.
|
|
206
|
+
|
|
207
|
+
```tsx
|
|
208
|
+
import type { ButtonProps, InputProps, CardProps } from 'dak-krds';
|
|
209
|
+
|
|
210
|
+
const customButton: ButtonProps = {
|
|
211
|
+
variant: 'primary',
|
|
212
|
+
size: 'large',
|
|
213
|
+
onClick: () => console.log('클릭됨'),
|
|
214
|
+
};
|
|
215
|
+
```
|
|
216
|
+
|
|
217
|
+
## 라이센스
|
|
218
|
+
|
|
219
|
+
MIT
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import React$1 from 'react';
|
|
3
|
+
|
|
4
|
+
interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
|
|
5
|
+
variant?: 'primary' | 'success' | 'warning' | 'error' | 'info';
|
|
6
|
+
size?: 'small' | 'medium' | 'large';
|
|
7
|
+
children: React$1.ReactNode;
|
|
8
|
+
}
|
|
9
|
+
declare function Badge({ variant, size, className, children, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
|
|
10
|
+
|
|
11
|
+
interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
12
|
+
variant?: 'primary' | 'secondary' | 'outline';
|
|
13
|
+
size?: 'small' | 'medium' | 'large';
|
|
14
|
+
children: React$1.ReactNode;
|
|
15
|
+
}
|
|
16
|
+
declare function Button({ variant, size, className, children, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
|
|
17
|
+
|
|
18
|
+
interface CardProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
19
|
+
variant?: 'default' | 'bordered' | 'elevated';
|
|
20
|
+
padding?: 'none' | 'small' | 'medium' | 'large';
|
|
21
|
+
children: React$1.ReactNode;
|
|
22
|
+
}
|
|
23
|
+
declare function Card({ variant, padding, className, children, ...props }: CardProps): react_jsx_runtime.JSX.Element;
|
|
24
|
+
|
|
25
|
+
interface CheckboxProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'type'> {
|
|
26
|
+
label?: string;
|
|
27
|
+
error?: string;
|
|
28
|
+
}
|
|
29
|
+
declare function Checkbox({ label, error, className, ...props }: CheckboxProps): react_jsx_runtime.JSX.Element;
|
|
30
|
+
|
|
31
|
+
interface InputProps extends React$1.InputHTMLAttributes<HTMLInputElement> {
|
|
32
|
+
label?: string;
|
|
33
|
+
error?: string;
|
|
34
|
+
helperText?: string;
|
|
35
|
+
}
|
|
36
|
+
declare function Input({ label, error, helperText, className, ...props }: InputProps): react_jsx_runtime.JSX.Element;
|
|
37
|
+
|
|
38
|
+
interface SelectOption {
|
|
39
|
+
value: string;
|
|
40
|
+
label: string;
|
|
41
|
+
}
|
|
42
|
+
interface SelectProps extends React$1.SelectHTMLAttributes<HTMLSelectElement> {
|
|
43
|
+
label?: string;
|
|
44
|
+
error?: string;
|
|
45
|
+
helperText?: string;
|
|
46
|
+
options: SelectOption[];
|
|
47
|
+
}
|
|
48
|
+
declare function Select({ label, error, helperText, options, className, ...props }: SelectProps): react_jsx_runtime.JSX.Element;
|
|
49
|
+
|
|
50
|
+
interface SwitchProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'type'> {
|
|
51
|
+
label?: string;
|
|
52
|
+
}
|
|
53
|
+
declare function Switch({ label, className, ...props }: SwitchProps): react_jsx_runtime.JSX.Element;
|
|
54
|
+
|
|
55
|
+
interface UseSwitchProps {
|
|
56
|
+
checked?: boolean;
|
|
57
|
+
defaultChecked?: boolean;
|
|
58
|
+
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
59
|
+
}
|
|
60
|
+
declare const useSwitch: ({ checked: controlledChecked, defaultChecked, onChange }: UseSwitchProps) => {
|
|
61
|
+
checked: boolean;
|
|
62
|
+
handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
interface TextAreaProps extends React$1.TextareaHTMLAttributes<HTMLTextAreaElement> {
|
|
66
|
+
label?: string;
|
|
67
|
+
error?: string;
|
|
68
|
+
helperText?: string;
|
|
69
|
+
resize?: 'none' | 'vertical' | 'horizontal' | 'both';
|
|
70
|
+
}
|
|
71
|
+
declare function TextArea({ label, error, helperText, resize, className, ...props }: TextAreaProps): react_jsx_runtime.JSX.Element;
|
|
72
|
+
|
|
73
|
+
export { Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, Input, type InputProps, Select, type SelectOption, type SelectProps, Switch, type SwitchProps, TextArea, type TextAreaProps, useSwitch };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import React$1 from 'react';
|
|
3
|
+
|
|
4
|
+
interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
|
|
5
|
+
variant?: 'primary' | 'success' | 'warning' | 'error' | 'info';
|
|
6
|
+
size?: 'small' | 'medium' | 'large';
|
|
7
|
+
children: React$1.ReactNode;
|
|
8
|
+
}
|
|
9
|
+
declare function Badge({ variant, size, className, children, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
|
|
10
|
+
|
|
11
|
+
interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
12
|
+
variant?: 'primary' | 'secondary' | 'outline';
|
|
13
|
+
size?: 'small' | 'medium' | 'large';
|
|
14
|
+
children: React$1.ReactNode;
|
|
15
|
+
}
|
|
16
|
+
declare function Button({ variant, size, className, children, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
|
|
17
|
+
|
|
18
|
+
interface CardProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
19
|
+
variant?: 'default' | 'bordered' | 'elevated';
|
|
20
|
+
padding?: 'none' | 'small' | 'medium' | 'large';
|
|
21
|
+
children: React$1.ReactNode;
|
|
22
|
+
}
|
|
23
|
+
declare function Card({ variant, padding, className, children, ...props }: CardProps): react_jsx_runtime.JSX.Element;
|
|
24
|
+
|
|
25
|
+
interface CheckboxProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'type'> {
|
|
26
|
+
label?: string;
|
|
27
|
+
error?: string;
|
|
28
|
+
}
|
|
29
|
+
declare function Checkbox({ label, error, className, ...props }: CheckboxProps): react_jsx_runtime.JSX.Element;
|
|
30
|
+
|
|
31
|
+
interface InputProps extends React$1.InputHTMLAttributes<HTMLInputElement> {
|
|
32
|
+
label?: string;
|
|
33
|
+
error?: string;
|
|
34
|
+
helperText?: string;
|
|
35
|
+
}
|
|
36
|
+
declare function Input({ label, error, helperText, className, ...props }: InputProps): react_jsx_runtime.JSX.Element;
|
|
37
|
+
|
|
38
|
+
interface SelectOption {
|
|
39
|
+
value: string;
|
|
40
|
+
label: string;
|
|
41
|
+
}
|
|
42
|
+
interface SelectProps extends React$1.SelectHTMLAttributes<HTMLSelectElement> {
|
|
43
|
+
label?: string;
|
|
44
|
+
error?: string;
|
|
45
|
+
helperText?: string;
|
|
46
|
+
options: SelectOption[];
|
|
47
|
+
}
|
|
48
|
+
declare function Select({ label, error, helperText, options, className, ...props }: SelectProps): react_jsx_runtime.JSX.Element;
|
|
49
|
+
|
|
50
|
+
interface SwitchProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'type'> {
|
|
51
|
+
label?: string;
|
|
52
|
+
}
|
|
53
|
+
declare function Switch({ label, className, ...props }: SwitchProps): react_jsx_runtime.JSX.Element;
|
|
54
|
+
|
|
55
|
+
interface UseSwitchProps {
|
|
56
|
+
checked?: boolean;
|
|
57
|
+
defaultChecked?: boolean;
|
|
58
|
+
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
59
|
+
}
|
|
60
|
+
declare const useSwitch: ({ checked: controlledChecked, defaultChecked, onChange }: UseSwitchProps) => {
|
|
61
|
+
checked: boolean;
|
|
62
|
+
handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
interface TextAreaProps extends React$1.TextareaHTMLAttributes<HTMLTextAreaElement> {
|
|
66
|
+
label?: string;
|
|
67
|
+
error?: string;
|
|
68
|
+
helperText?: string;
|
|
69
|
+
resize?: 'none' | 'vertical' | 'horizontal' | 'both';
|
|
70
|
+
}
|
|
71
|
+
declare function TextArea({ label, error, helperText, resize, className, ...props }: TextAreaProps): react_jsx_runtime.JSX.Element;
|
|
72
|
+
|
|
73
|
+
export { Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, Input, type InputProps, Select, type SelectOption, type SelectProps, Switch, type SwitchProps, TextArea, type TextAreaProps, useSwitch };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
'use strict';var jsxRuntime=require('react/jsx-runtime'),react=require('react');function n(t,{insertAt:e}={}){if(!t||typeof document>"u")return;let o=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css",e==="top"&&o.firstChild?o.insertBefore(a,o.firstChild):o.appendChild(a),a.styleSheet?a.styleSheet.cssText=t:a.appendChild(document.createTextNode(t));}n(`.dak-badge{display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;font-weight:600;white-space:nowrap}.dak-badge--primary{background-color:#dbeafe;color:#1e40af}.dak-badge--success{background-color:#d1fae5;color:#065f46}.dak-badge--warning{background-color:#fef3c7;color:#92400e}.dak-badge--error{background-color:#fee2e2;color:#991b1b}.dak-badge--info{background-color:#e0e7ff;color:#3730a3}.dak-badge--small{padding:4px 10px;font-size:12px}.dak-badge--medium{padding:6px 14px;font-size:14px}.dak-badge--large{padding:8px 18px;font-size:16px}
|
|
2
|
+
`);function H({variant:t="primary",size:e="medium",className:o="",children:a,...d}){let r=["dak-badge",`dak-badge--${t}`,`dak-badge--${e}`,o].filter(Boolean).join(" ");return jsxRuntime.jsx("span",{className:r,...d,children:a})}n(`.dak-button{border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .2s ease;font-family:inherit}.dak-button:hover{transform:translateY(-1px);box-shadow:0 4px 12px #00000026}.dak-button:active{transform:translateY(0)}.dak-button:disabled{opacity:.5;cursor:not-allowed;transform:none}.dak-button--primary{background-color:#0070f3;color:#fff}.dak-button--primary:hover{background-color:#0051cc}.dak-button--secondary{background-color:#6b7280;color:#fff}.dak-button--secondary:hover{background-color:#4b5563}.dak-button--outline{background-color:transparent;color:#0070f3;border:2px solid #0070f3}.dak-button--outline:hover{background-color:#0070f3;color:#fff}.dak-button--small{padding:8px 16px;font-size:14px}.dak-button--medium{padding:12px 24px;font-size:16px}.dak-button--large{padding:16px 32px;font-size:18px}
|
|
3
|
+
`);function h({variant:t="primary",size:e="medium",className:o="",children:a,...d}){let r=["dak-button",`dak-button--${t}`,`dak-button--${e}`,o].filter(Boolean).join(" ");return jsxRuntime.jsx("button",{className:r,...d,children:a})}n(`.dak-card{background-color:#fff;border-radius:12px;box-sizing:border-box;width:100%}.dak-card--default{background-color:#f9fafb}.dak-card--bordered{border:2px solid #e5e7eb;background-color:#fff}.dak-card--elevated{background-color:#fff;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;transition:box-shadow .2s ease}.dak-card--elevated:hover{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.dak-card--padding-none{padding:0}.dak-card--padding-small{padding:12px}.dak-card--padding-medium{padding:24px}.dak-card--padding-large{padding:32px}
|
|
4
|
+
`);function G({variant:t="default",padding:e="medium",className:o="",children:a,...d}){let r=["dak-card",`dak-card--${t}`,`dak-card--padding-${e}`,o].filter(Boolean).join(" ");return jsxRuntime.jsx("div",{className:r,...d,children:a})}n(`.dak-checkbox-wrapper{display:flex;flex-direction:column;gap:6px}.dak-checkbox-label-wrapper{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none}.dak-checkbox{width:20px;height:20px;border:2px solid #d1d5db;border-radius:4px;cursor:pointer;appearance:none;background-color:#fff;transition:all .2s ease;position:relative;flex-shrink:0}.dak-checkbox:hover{border-color:#0070f3}.dak-checkbox:checked{background-color:#0070f3;border-color:#0070f3}.dak-checkbox:checked:after{content:"";position:absolute;left:6px;top:2px;width:4px;height:9px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}.dak-checkbox:disabled{opacity:.5;cursor:not-allowed}.dak-checkbox:disabled:hover{border-color:#d1d5db}.dak-checkbox--error{border-color:#ef4444}.dak-checkbox--error:hover{border-color:#dc2626}.dak-checkbox-label{font-size:16px;color:#374151}.dak-checkbox-error-text{font-size:14px;color:#ef4444;padding-left:30px}
|
|
5
|
+
`);function Z({label:t,error:e,className:o="",...a}){let d=["dak-checkbox",e&&"dak-checkbox--error",o].filter(Boolean).join(" ");return jsxRuntime.jsxs("div",{className:"dak-checkbox-wrapper",children:[jsxRuntime.jsxs("label",{className:"dak-checkbox-label-wrapper",children:[jsxRuntime.jsx("input",{type:"checkbox",className:d,...a}),t&&jsxRuntime.jsx("span",{className:"dak-checkbox-label",children:t})]}),e&&jsxRuntime.jsx("span",{className:"dak-checkbox-error-text",children:e})]})}n(`.dak-input-wrapper{display:flex;flex-direction:column;gap:6px;width:100%}.dak-input-label{font-size:14px;font-weight:600;color:#374151}.dak-input{padding:12px 16px;border:2px solid #d1d5db;border-radius:8px;font-size:16px;font-family:inherit;transition:all .2s ease;width:100%;box-sizing:border-box}.dak-input:focus{outline:none;border-color:#0070f3;box-shadow:0 0 0 3px #0070f31a}.dak-input:disabled{background-color:#f3f4f6;cursor:not-allowed;opacity:.6}.dak-input--error{border-color:#ef4444}.dak-input--error:focus{border-color:#ef4444;box-shadow:0 0 0 3px #ef44441a}.dak-input-error-text{font-size:14px;color:#ef4444}.dak-input-helper-text{font-size:14px;color:#6b7280}
|
|
6
|
+
`);function y({label:t,error:e,helperText:o,className:a="",...d}){let r=["dak-input",e&&"dak-input--error",a].filter(Boolean).join(" ");return jsxRuntime.jsxs("div",{className:"dak-input-wrapper",children:[t&&jsxRuntime.jsx("label",{className:"dak-input-label",children:t}),jsxRuntime.jsx("input",{className:r,...d}),e&&jsxRuntime.jsx("span",{className:"dak-input-error-text",children:e}),!e&&o&&jsxRuntime.jsx("span",{className:"dak-input-helper-text",children:o})]})}n(`.dak-select-wrapper{display:flex;flex-direction:column;gap:6px;width:100%}.dak-select-label{font-size:14px;font-weight:600;color:#374151}.dak-select{padding:12px 40px 12px 16px;border:2px solid #d1d5db;border-radius:8px;font-size:16px;font-family:inherit;background-color:#fff;cursor:pointer;transition:all .2s ease;width:100%;box-sizing:border-box;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:20px}.dak-select:focus{outline:none;border-color:#0070f3;box-shadow:0 0 0 3px #0070f31a}.dak-select:disabled{background-color:#f3f4f6;cursor:not-allowed;opacity:.6}.dak-select--error{border-color:#ef4444}.dak-select--error:focus{border-color:#ef4444;box-shadow:0 0 0 3px #ef44441a}.dak-select-error-text{font-size:14px;color:#ef4444}.dak-select-helper-text{font-size:14px;color:#6b7280}
|
|
7
|
+
`);function pe({label:t,error:e,helperText:o,options:a,className:d="",...r}){let i=["dak-select",e&&"dak-select--error",d].filter(Boolean).join(" ");return jsxRuntime.jsxs("div",{className:"dak-select-wrapper",children:[t&&jsxRuntime.jsx("label",{className:"dak-select-label",children:t}),jsxRuntime.jsx("select",{className:i,...r,children:a.map(s=>jsxRuntime.jsx("option",{value:s.value,children:s.label},s.value))}),e&&jsxRuntime.jsx("span",{className:"dak-select-error-text",children:e}),!e&&o&&jsxRuntime.jsx("span",{className:"dak-select-helper-text",children:o})]})}var u=({checked:t,defaultChecked:e=false,onChange:o})=>{let[a,d]=react.useState(e),r=t!==void 0,i=r?t:a;react.useEffect(()=>{!r&&e!==void 0&&d(e);},[e,r]);let s=react.useCallback(b=>{r||d(b.target.checked),o?.(b);},[r,o]);return {checked:i,handleChange:s}};n(`.dak-switch-wrapper{display:inline-flex;align-items:center;gap:12px;cursor:pointer;user-select:none}.dak-switch-input{position:absolute;opacity:0;width:0;height:0}.dak-switch{position:relative;display:inline-block;width:48px;height:26px;background-color:#d1d5db;border-radius:9999px;transition:background-color .2s ease}.dak-switch:hover{background-color:#9ca3af}.dak-switch--checked{background-color:#0070f3}.dak-switch--checked:hover{background-color:#0051cc}.dak-switch-thumb{position:absolute;top:3px;left:3px;width:20px;height:20px;background-color:#fff;border-radius:9999px;transition:transform .2s ease;box-shadow:0 2px 4px #0003}.dak-switch--checked .dak-switch-thumb{transform:translate(22px)}.dak-switch--disabled{opacity:.5;cursor:not-allowed}.dak-switch--disabled:hover{background-color:#d1d5db}.dak-switch--checked.dak-switch--disabled:hover{background-color:#0070f3}.dak-switch-label{font-size:16px;color:#374151}
|
|
8
|
+
`);function ye({label:t,className:e="",...o}){let{checked:a,handleChange:d}=u(o),r=["dak-switch",a&&"dak-switch--checked",o.disabled&&"dak-switch--disabled",e].filter(Boolean).join(" ");return jsxRuntime.jsxs("label",{className:"dak-switch-wrapper",children:[jsxRuntime.jsx("input",{type:"checkbox",className:"dak-switch-input",checked:a,onChange:d,...o}),jsxRuntime.jsx("span",{className:r,children:jsxRuntime.jsx("span",{className:"dak-switch-thumb"})}),t&&jsxRuntime.jsx("span",{className:"dak-switch-label",children:t})]})}n(`.dak-textarea-wrapper{display:flex;flex-direction:column;gap:6px;width:100%}.dak-textarea-label{font-size:14px;font-weight:600;color:#374151}.dak-textarea{padding:12px 16px;border:2px solid #d1d5db;border-radius:8px;font-size:16px;font-family:inherit;transition:all .2s ease;width:100%;box-sizing:border-box;min-height:100px}.dak-textarea:focus{outline:none;border-color:#0070f3;box-shadow:0 0 0 3px #0070f31a}.dak-textarea:disabled{background-color:#f3f4f6;cursor:not-allowed;opacity:.6}.dak-textarea--error{border-color:#ef4444}.dak-textarea--error:focus{border-color:#ef4444;box-shadow:0 0 0 3px #ef44441a}.dak-textarea--resize-none{resize:none}.dak-textarea--resize-vertical{resize:vertical}.dak-textarea--resize-horizontal{resize:horizontal}.dak-textarea--resize-both{resize:both}.dak-textarea-error-text{font-size:14px;color:#ef4444}.dak-textarea-helper-text{font-size:14px;color:#6b7280}
|
|
9
|
+
`);function Be({label:t,error:e,helperText:o,resize:a="vertical",className:d="",...r}){let i=["dak-textarea",`dak-textarea--resize-${a}`,e&&"dak-textarea--error",d].filter(Boolean).join(" ");return jsxRuntime.jsxs("div",{className:"dak-textarea-wrapper",children:[t&&jsxRuntime.jsx("label",{className:"dak-textarea-label",children:t}),jsxRuntime.jsx("textarea",{className:i,...r}),e&&jsxRuntime.jsx("span",{className:"dak-textarea-error-text",children:e}),!e&&o&&jsxRuntime.jsx("span",{className:"dak-textarea-helper-text",children:o})]})}exports.Badge=H;exports.Button=h;exports.Card=G;exports.Checkbox=Z;exports.Input=y;exports.Select=pe;exports.Switch=ye;exports.TextArea=Be;exports.useSwitch=u;//# sourceMappingURL=index.js.map
|
|
10
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["#style-inject:#style-inject","../src/components/badge/badge.css","../src/components/badge/badge.tsx","../src/components/button/button.css","../src/components/button/button.tsx","../src/components/card/card.css","../src/components/card/card.tsx","../src/components/checkbox/checkbox.css","../src/components/checkbox/checkbox.tsx","../src/components/input/input.css","../src/components/input/input.tsx","../src/components/select/select.css","../src/components/select/select.tsx","../src/components/switch/use-switch.ts","../src/components/switch/switch.css","../src/components/switch/switch.tsx","../src/components/textarea/textarea.css","../src/components/textarea/textarea.tsx"],"names":["styleInject","css","insertAt","head","style","Badge","variant","size","className","children","props","classNames","jsx","Button","Card","padding","Checkbox","label","error","checkboxClassNames","jsxs","Input","helperText","inputClassNames","Select","options","selectClassNames","option","useSwitch","controlledChecked","defaultChecked","onChange","internalChecked","setInternalChecked","useState","isControlled","checked","useEffect","handleChange","useCallback","event","Switch","switchClassNames","TextArea","resize","textareaClassNames"],"mappings":"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","file":"index.js","sourcesContent":["\n export default function styleInject(css, { insertAt } = {}) {\n if (!css || typeof document === 'undefined') return\n \n const head = document.head || document.getElementsByTagName('head')[0]\n const 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 ","import styleInject from '#style-inject';styleInject(\".dak-badge{display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;font-weight:600;white-space:nowrap}.dak-badge--primary{background-color:#dbeafe;color:#1e40af}.dak-badge--success{background-color:#d1fae5;color:#065f46}.dak-badge--warning{background-color:#fef3c7;color:#92400e}.dak-badge--error{background-color:#fee2e2;color:#991b1b}.dak-badge--info{background-color:#e0e7ff;color:#3730a3}.dak-badge--small{padding:4px 10px;font-size:12px}.dak-badge--medium{padding:6px 14px;font-size:14px}.dak-badge--large{padding:8px 18px;font-size:16px}\\n\")","import React from 'react';\nimport './badge.css';\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n variant?: 'primary' | 'success' | 'warning' | 'error' | 'info';\n size?: 'small' | 'medium' | 'large';\n children: React.ReactNode;\n}\n\nexport function Badge({\n variant = 'primary',\n size = 'medium',\n className = '',\n children,\n ...props\n}: BadgeProps) {\n const classNames = [\n 'dak-badge',\n `dak-badge--${variant}`,\n `dak-badge--${size}`,\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <span className={classNames} {...props}>\n {children}\n </span>\n );\n}\n","import styleInject from '#style-inject';styleInject(\".dak-button{border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .2s ease;font-family:inherit}.dak-button:hover{transform:translateY(-1px);box-shadow:0 4px 12px #00000026}.dak-button:active{transform:translateY(0)}.dak-button:disabled{opacity:.5;cursor:not-allowed;transform:none}.dak-button--primary{background-color:#0070f3;color:#fff}.dak-button--primary:hover{background-color:#0051cc}.dak-button--secondary{background-color:#6b7280;color:#fff}.dak-button--secondary:hover{background-color:#4b5563}.dak-button--outline{background-color:transparent;color:#0070f3;border:2px solid #0070f3}.dak-button--outline:hover{background-color:#0070f3;color:#fff}.dak-button--small{padding:8px 16px;font-size:14px}.dak-button--medium{padding:12px 24px;font-size:16px}.dak-button--large{padding:16px 32px;font-size:18px}\\n\")","import React from 'react';\nimport './button.css';\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n variant?: 'primary' | 'secondary' | 'outline';\n size?: 'small' | 'medium' | 'large';\n children: React.ReactNode;\n}\n\nexport function Button({\n variant = 'primary',\n size = 'medium',\n className = '',\n children,\n ...props\n}: ButtonProps) {\n const classNames = [\n 'dak-button',\n `dak-button--${variant}`,\n `dak-button--${size}`,\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <button className={classNames} {...props}>\n {children}\n </button>\n );\n}\n","import styleInject from '#style-inject';styleInject(\".dak-card{background-color:#fff;border-radius:12px;box-sizing:border-box;width:100%}.dak-card--default{background-color:#f9fafb}.dak-card--bordered{border:2px solid #e5e7eb;background-color:#fff}.dak-card--elevated{background-color:#fff;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;transition:box-shadow .2s ease}.dak-card--elevated:hover{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.dak-card--padding-none{padding:0}.dak-card--padding-small{padding:12px}.dak-card--padding-medium{padding:24px}.dak-card--padding-large{padding:32px}\\n\")","import React from 'react';\nimport './card.css';\n\nexport interface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n variant?: 'default' | 'bordered' | 'elevated';\n padding?: 'none' | 'small' | 'medium' | 'large';\n children: React.ReactNode;\n}\n\nexport function Card({\n variant = 'default',\n padding = 'medium',\n className = '',\n children,\n ...props\n}: CardProps) {\n const classNames = [\n 'dak-card',\n `dak-card--${variant}`,\n `dak-card--padding-${padding}`,\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className={classNames} {...props}>\n {children}\n </div>\n );\n}\n","import styleInject from '#style-inject';styleInject(\".dak-checkbox-wrapper{display:flex;flex-direction:column;gap:6px}.dak-checkbox-label-wrapper{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none}.dak-checkbox{width:20px;height:20px;border:2px solid #d1d5db;border-radius:4px;cursor:pointer;appearance:none;background-color:#fff;transition:all .2s ease;position:relative;flex-shrink:0}.dak-checkbox:hover{border-color:#0070f3}.dak-checkbox:checked{background-color:#0070f3;border-color:#0070f3}.dak-checkbox:checked:after{content:\\\"\\\";position:absolute;left:6px;top:2px;width:4px;height:9px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}.dak-checkbox:disabled{opacity:.5;cursor:not-allowed}.dak-checkbox:disabled:hover{border-color:#d1d5db}.dak-checkbox--error{border-color:#ef4444}.dak-checkbox--error:hover{border-color:#dc2626}.dak-checkbox-label{font-size:16px;color:#374151}.dak-checkbox-error-text{font-size:14px;color:#ef4444;padding-left:30px}\\n\")","import React from 'react';\nimport './checkbox.css';\n\nexport interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {\n label?: string;\n error?: string;\n}\n\nexport function Checkbox({\n label,\n error,\n className = '',\n ...props\n}: CheckboxProps) {\n const checkboxClassNames = [\n 'dak-checkbox',\n error && 'dak-checkbox--error',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className=\"dak-checkbox-wrapper\">\n <label className=\"dak-checkbox-label-wrapper\">\n <input\n type=\"checkbox\"\n className={checkboxClassNames}\n {...props}\n />\n {label && <span className=\"dak-checkbox-label\">{label}</span>}\n </label>\n {error && <span className=\"dak-checkbox-error-text\">{error}</span>}\n </div>\n );\n}\n","import styleInject from '#style-inject';styleInject(\".dak-input-wrapper{display:flex;flex-direction:column;gap:6px;width:100%}.dak-input-label{font-size:14px;font-weight:600;color:#374151}.dak-input{padding:12px 16px;border:2px solid #d1d5db;border-radius:8px;font-size:16px;font-family:inherit;transition:all .2s ease;width:100%;box-sizing:border-box}.dak-input:focus{outline:none;border-color:#0070f3;box-shadow:0 0 0 3px #0070f31a}.dak-input:disabled{background-color:#f3f4f6;cursor:not-allowed;opacity:.6}.dak-input--error{border-color:#ef4444}.dak-input--error:focus{border-color:#ef4444;box-shadow:0 0 0 3px #ef44441a}.dak-input-error-text{font-size:14px;color:#ef4444}.dak-input-helper-text{font-size:14px;color:#6b7280}\\n\")","import React from 'react';\nimport './input.css';\n\nexport interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {\n label?: string;\n error?: string;\n helperText?: string;\n}\n\nexport function Input({\n label,\n error,\n helperText,\n className = '',\n ...props\n}: InputProps) {\n const inputClassNames = [\n 'dak-input',\n error && 'dak-input--error',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className=\"dak-input-wrapper\">\n {label && <label className=\"dak-input-label\">{label}</label>}\n <input className={inputClassNames} {...props} />\n {error && <span className=\"dak-input-error-text\">{error}</span>}\n {!error && helperText && (\n <span className=\"dak-input-helper-text\">{helperText}</span>\n )}\n </div>\n );\n}\n","import styleInject from '#style-inject';styleInject(\".dak-select-wrapper{display:flex;flex-direction:column;gap:6px;width:100%}.dak-select-label{font-size:14px;font-weight:600;color:#374151}.dak-select{padding:12px 40px 12px 16px;border:2px solid #d1d5db;border-radius:8px;font-size:16px;font-family:inherit;background-color:#fff;cursor:pointer;transition:all .2s ease;width:100%;box-sizing:border-box;appearance:none;background-image:url(\\\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\\\");background-repeat:no-repeat;background-position:right 12px center;background-size:20px}.dak-select:focus{outline:none;border-color:#0070f3;box-shadow:0 0 0 3px #0070f31a}.dak-select:disabled{background-color:#f3f4f6;cursor:not-allowed;opacity:.6}.dak-select--error{border-color:#ef4444}.dak-select--error:focus{border-color:#ef4444;box-shadow:0 0 0 3px #ef44441a}.dak-select-error-text{font-size:14px;color:#ef4444}.dak-select-helper-text{font-size:14px;color:#6b7280}\\n\")","import React from 'react';\nimport './select.css';\n\nexport interface SelectOption {\n value: string;\n label: string;\n}\n\nexport interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {\n label?: string;\n error?: string;\n helperText?: string;\n options: SelectOption[];\n}\n\nexport function Select({\n label,\n error,\n helperText,\n options,\n className = '',\n ...props\n}: SelectProps) {\n const selectClassNames = [\n 'dak-select',\n error && 'dak-select--error',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className=\"dak-select-wrapper\">\n {label && <label className=\"dak-select-label\">{label}</label>}\n <select className={selectClassNames} {...props}>\n {options.map((option) => (\n <option key={option.value} value={option.value}>\n {option.label}\n </option>\n ))}\n </select>\n {error && <span className=\"dak-select-error-text\">{error}</span>}\n {!error && helperText && (\n <span className=\"dak-select-helper-text\">{helperText}</span>\n )}\n </div>\n );\n}\n","import { useState, useCallback, useEffect } from 'react';\n\ninterface UseSwitchProps {\n checked?: boolean;\n defaultChecked?: boolean;\n onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n}\n\nexport const useSwitch = ({ checked: controlledChecked, defaultChecked = false, onChange }: UseSwitchProps) => {\n const [internalChecked, setInternalChecked] = useState(defaultChecked);\n const isControlled = controlledChecked !== undefined;\n const checked = isControlled ? controlledChecked : internalChecked;\n\n useEffect(() => {\n if (!isControlled && defaultChecked !== undefined) {\n setInternalChecked(defaultChecked);\n }\n }, [defaultChecked, isControlled]);\n\n const handleChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {\n if (!isControlled) {\n setInternalChecked(event.target.checked);\n }\n onChange?.(event);\n }, [isControlled, onChange]);\n\n return { checked, handleChange };\n};\n","import styleInject from '#style-inject';styleInject(\".dak-switch-wrapper{display:inline-flex;align-items:center;gap:12px;cursor:pointer;user-select:none}.dak-switch-input{position:absolute;opacity:0;width:0;height:0}.dak-switch{position:relative;display:inline-block;width:48px;height:26px;background-color:#d1d5db;border-radius:9999px;transition:background-color .2s ease}.dak-switch:hover{background-color:#9ca3af}.dak-switch--checked{background-color:#0070f3}.dak-switch--checked:hover{background-color:#0051cc}.dak-switch-thumb{position:absolute;top:3px;left:3px;width:20px;height:20px;background-color:#fff;border-radius:9999px;transition:transform .2s ease;box-shadow:0 2px 4px #0003}.dak-switch--checked .dak-switch-thumb{transform:translate(22px)}.dak-switch--disabled{opacity:.5;cursor:not-allowed}.dak-switch--disabled:hover{background-color:#d1d5db}.dak-switch--checked.dak-switch--disabled:hover{background-color:#0070f3}.dak-switch-label{font-size:16px;color:#374151}\\n\")","import React from 'react';\nimport { useSwitch } from './use-switch';\nimport './switch.css';\n\nexport interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {\n label?: string;\n}\n\nexport function Switch({\n label,\n className = '',\n ...props\n}: SwitchProps) {\n const { checked, handleChange } = useSwitch(props);\n\n const switchClassNames = [\n 'dak-switch',\n checked && 'dak-switch--checked',\n props.disabled && 'dak-switch--disabled',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <label className=\"dak-switch-wrapper\">\n <input\n type=\"checkbox\"\n className=\"dak-switch-input\"\n checked={checked}\n onChange={handleChange}\n {...props}\n />\n <span className={switchClassNames}>\n <span className=\"dak-switch-thumb\" />\n </span>\n {label && <span className=\"dak-switch-label\">{label}</span>}\n </label>\n );\n}\n","import styleInject from '#style-inject';styleInject(\".dak-textarea-wrapper{display:flex;flex-direction:column;gap:6px;width:100%}.dak-textarea-label{font-size:14px;font-weight:600;color:#374151}.dak-textarea{padding:12px 16px;border:2px solid #d1d5db;border-radius:8px;font-size:16px;font-family:inherit;transition:all .2s ease;width:100%;box-sizing:border-box;min-height:100px}.dak-textarea:focus{outline:none;border-color:#0070f3;box-shadow:0 0 0 3px #0070f31a}.dak-textarea:disabled{background-color:#f3f4f6;cursor:not-allowed;opacity:.6}.dak-textarea--error{border-color:#ef4444}.dak-textarea--error:focus{border-color:#ef4444;box-shadow:0 0 0 3px #ef44441a}.dak-textarea--resize-none{resize:none}.dak-textarea--resize-vertical{resize:vertical}.dak-textarea--resize-horizontal{resize:horizontal}.dak-textarea--resize-both{resize:both}.dak-textarea-error-text{font-size:14px;color:#ef4444}.dak-textarea-helper-text{font-size:14px;color:#6b7280}\\n\")","import React from 'react';\nimport './textarea.css';\n\nexport interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\n label?: string;\n error?: string;\n helperText?: string;\n resize?: 'none' | 'vertical' | 'horizontal' | 'both';\n}\n\nexport function TextArea({\n label,\n error,\n helperText,\n resize = 'vertical',\n className = '',\n ...props\n}: TextAreaProps) {\n const textareaClassNames = [\n 'dak-textarea',\n `dak-textarea--resize-${resize}`,\n error && 'dak-textarea--error',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className=\"dak-textarea-wrapper\">\n {label && <label className=\"dak-textarea-label\">{label}</label>}\n <textarea className={textareaClassNames} {...props} />\n {error && <span className=\"dak-textarea-error-text\">{error}</span>}\n {!error && helperText && (\n <span className=\"dak-textarea-helper-text\">{helperText}</span>\n )}\n </div>\n );\n}\n"]}
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import {jsx,jsxs}from'react/jsx-runtime';import {useState,useEffect,useCallback}from'react';function n(t,{insertAt:e}={}){if(!t||typeof document>"u")return;let o=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css",e==="top"&&o.firstChild?o.insertBefore(a,o.firstChild):o.appendChild(a),a.styleSheet?a.styleSheet.cssText=t:a.appendChild(document.createTextNode(t));}n(`.dak-badge{display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;font-weight:600;white-space:nowrap}.dak-badge--primary{background-color:#dbeafe;color:#1e40af}.dak-badge--success{background-color:#d1fae5;color:#065f46}.dak-badge--warning{background-color:#fef3c7;color:#92400e}.dak-badge--error{background-color:#fee2e2;color:#991b1b}.dak-badge--info{background-color:#e0e7ff;color:#3730a3}.dak-badge--small{padding:4px 10px;font-size:12px}.dak-badge--medium{padding:6px 14px;font-size:14px}.dak-badge--large{padding:8px 18px;font-size:16px}
|
|
2
|
+
`);function H({variant:t="primary",size:e="medium",className:o="",children:a,...d}){let r=["dak-badge",`dak-badge--${t}`,`dak-badge--${e}`,o].filter(Boolean).join(" ");return jsx("span",{className:r,...d,children:a})}n(`.dak-button{border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .2s ease;font-family:inherit}.dak-button:hover{transform:translateY(-1px);box-shadow:0 4px 12px #00000026}.dak-button:active{transform:translateY(0)}.dak-button:disabled{opacity:.5;cursor:not-allowed;transform:none}.dak-button--primary{background-color:#0070f3;color:#fff}.dak-button--primary:hover{background-color:#0051cc}.dak-button--secondary{background-color:#6b7280;color:#fff}.dak-button--secondary:hover{background-color:#4b5563}.dak-button--outline{background-color:transparent;color:#0070f3;border:2px solid #0070f3}.dak-button--outline:hover{background-color:#0070f3;color:#fff}.dak-button--small{padding:8px 16px;font-size:14px}.dak-button--medium{padding:12px 24px;font-size:16px}.dak-button--large{padding:16px 32px;font-size:18px}
|
|
3
|
+
`);function h({variant:t="primary",size:e="medium",className:o="",children:a,...d}){let r=["dak-button",`dak-button--${t}`,`dak-button--${e}`,o].filter(Boolean).join(" ");return jsx("button",{className:r,...d,children:a})}n(`.dak-card{background-color:#fff;border-radius:12px;box-sizing:border-box;width:100%}.dak-card--default{background-color:#f9fafb}.dak-card--bordered{border:2px solid #e5e7eb;background-color:#fff}.dak-card--elevated{background-color:#fff;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;transition:box-shadow .2s ease}.dak-card--elevated:hover{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.dak-card--padding-none{padding:0}.dak-card--padding-small{padding:12px}.dak-card--padding-medium{padding:24px}.dak-card--padding-large{padding:32px}
|
|
4
|
+
`);function G({variant:t="default",padding:e="medium",className:o="",children:a,...d}){let r=["dak-card",`dak-card--${t}`,`dak-card--padding-${e}`,o].filter(Boolean).join(" ");return jsx("div",{className:r,...d,children:a})}n(`.dak-checkbox-wrapper{display:flex;flex-direction:column;gap:6px}.dak-checkbox-label-wrapper{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none}.dak-checkbox{width:20px;height:20px;border:2px solid #d1d5db;border-radius:4px;cursor:pointer;appearance:none;background-color:#fff;transition:all .2s ease;position:relative;flex-shrink:0}.dak-checkbox:hover{border-color:#0070f3}.dak-checkbox:checked{background-color:#0070f3;border-color:#0070f3}.dak-checkbox:checked:after{content:"";position:absolute;left:6px;top:2px;width:4px;height:9px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}.dak-checkbox:disabled{opacity:.5;cursor:not-allowed}.dak-checkbox:disabled:hover{border-color:#d1d5db}.dak-checkbox--error{border-color:#ef4444}.dak-checkbox--error:hover{border-color:#dc2626}.dak-checkbox-label{font-size:16px;color:#374151}.dak-checkbox-error-text{font-size:14px;color:#ef4444;padding-left:30px}
|
|
5
|
+
`);function Z({label:t,error:e,className:o="",...a}){let d=["dak-checkbox",e&&"dak-checkbox--error",o].filter(Boolean).join(" ");return jsxs("div",{className:"dak-checkbox-wrapper",children:[jsxs("label",{className:"dak-checkbox-label-wrapper",children:[jsx("input",{type:"checkbox",className:d,...a}),t&&jsx("span",{className:"dak-checkbox-label",children:t})]}),e&&jsx("span",{className:"dak-checkbox-error-text",children:e})]})}n(`.dak-input-wrapper{display:flex;flex-direction:column;gap:6px;width:100%}.dak-input-label{font-size:14px;font-weight:600;color:#374151}.dak-input{padding:12px 16px;border:2px solid #d1d5db;border-radius:8px;font-size:16px;font-family:inherit;transition:all .2s ease;width:100%;box-sizing:border-box}.dak-input:focus{outline:none;border-color:#0070f3;box-shadow:0 0 0 3px #0070f31a}.dak-input:disabled{background-color:#f3f4f6;cursor:not-allowed;opacity:.6}.dak-input--error{border-color:#ef4444}.dak-input--error:focus{border-color:#ef4444;box-shadow:0 0 0 3px #ef44441a}.dak-input-error-text{font-size:14px;color:#ef4444}.dak-input-helper-text{font-size:14px;color:#6b7280}
|
|
6
|
+
`);function y({label:t,error:e,helperText:o,className:a="",...d}){let r=["dak-input",e&&"dak-input--error",a].filter(Boolean).join(" ");return jsxs("div",{className:"dak-input-wrapper",children:[t&&jsx("label",{className:"dak-input-label",children:t}),jsx("input",{className:r,...d}),e&&jsx("span",{className:"dak-input-error-text",children:e}),!e&&o&&jsx("span",{className:"dak-input-helper-text",children:o})]})}n(`.dak-select-wrapper{display:flex;flex-direction:column;gap:6px;width:100%}.dak-select-label{font-size:14px;font-weight:600;color:#374151}.dak-select{padding:12px 40px 12px 16px;border:2px solid #d1d5db;border-radius:8px;font-size:16px;font-family:inherit;background-color:#fff;cursor:pointer;transition:all .2s ease;width:100%;box-sizing:border-box;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:20px}.dak-select:focus{outline:none;border-color:#0070f3;box-shadow:0 0 0 3px #0070f31a}.dak-select:disabled{background-color:#f3f4f6;cursor:not-allowed;opacity:.6}.dak-select--error{border-color:#ef4444}.dak-select--error:focus{border-color:#ef4444;box-shadow:0 0 0 3px #ef44441a}.dak-select-error-text{font-size:14px;color:#ef4444}.dak-select-helper-text{font-size:14px;color:#6b7280}
|
|
7
|
+
`);function pe({label:t,error:e,helperText:o,options:a,className:d="",...r}){let i=["dak-select",e&&"dak-select--error",d].filter(Boolean).join(" ");return jsxs("div",{className:"dak-select-wrapper",children:[t&&jsx("label",{className:"dak-select-label",children:t}),jsx("select",{className:i,...r,children:a.map(s=>jsx("option",{value:s.value,children:s.label},s.value))}),e&&jsx("span",{className:"dak-select-error-text",children:e}),!e&&o&&jsx("span",{className:"dak-select-helper-text",children:o})]})}var u=({checked:t,defaultChecked:e=false,onChange:o})=>{let[a,d]=useState(e),r=t!==void 0,i=r?t:a;useEffect(()=>{!r&&e!==void 0&&d(e);},[e,r]);let s=useCallback(b=>{r||d(b.target.checked),o?.(b);},[r,o]);return {checked:i,handleChange:s}};n(`.dak-switch-wrapper{display:inline-flex;align-items:center;gap:12px;cursor:pointer;user-select:none}.dak-switch-input{position:absolute;opacity:0;width:0;height:0}.dak-switch{position:relative;display:inline-block;width:48px;height:26px;background-color:#d1d5db;border-radius:9999px;transition:background-color .2s ease}.dak-switch:hover{background-color:#9ca3af}.dak-switch--checked{background-color:#0070f3}.dak-switch--checked:hover{background-color:#0051cc}.dak-switch-thumb{position:absolute;top:3px;left:3px;width:20px;height:20px;background-color:#fff;border-radius:9999px;transition:transform .2s ease;box-shadow:0 2px 4px #0003}.dak-switch--checked .dak-switch-thumb{transform:translate(22px)}.dak-switch--disabled{opacity:.5;cursor:not-allowed}.dak-switch--disabled:hover{background-color:#d1d5db}.dak-switch--checked.dak-switch--disabled:hover{background-color:#0070f3}.dak-switch-label{font-size:16px;color:#374151}
|
|
8
|
+
`);function ye({label:t,className:e="",...o}){let{checked:a,handleChange:d}=u(o),r=["dak-switch",a&&"dak-switch--checked",o.disabled&&"dak-switch--disabled",e].filter(Boolean).join(" ");return jsxs("label",{className:"dak-switch-wrapper",children:[jsx("input",{type:"checkbox",className:"dak-switch-input",checked:a,onChange:d,...o}),jsx("span",{className:r,children:jsx("span",{className:"dak-switch-thumb"})}),t&&jsx("span",{className:"dak-switch-label",children:t})]})}n(`.dak-textarea-wrapper{display:flex;flex-direction:column;gap:6px;width:100%}.dak-textarea-label{font-size:14px;font-weight:600;color:#374151}.dak-textarea{padding:12px 16px;border:2px solid #d1d5db;border-radius:8px;font-size:16px;font-family:inherit;transition:all .2s ease;width:100%;box-sizing:border-box;min-height:100px}.dak-textarea:focus{outline:none;border-color:#0070f3;box-shadow:0 0 0 3px #0070f31a}.dak-textarea:disabled{background-color:#f3f4f6;cursor:not-allowed;opacity:.6}.dak-textarea--error{border-color:#ef4444}.dak-textarea--error:focus{border-color:#ef4444;box-shadow:0 0 0 3px #ef44441a}.dak-textarea--resize-none{resize:none}.dak-textarea--resize-vertical{resize:vertical}.dak-textarea--resize-horizontal{resize:horizontal}.dak-textarea--resize-both{resize:both}.dak-textarea-error-text{font-size:14px;color:#ef4444}.dak-textarea-helper-text{font-size:14px;color:#6b7280}
|
|
9
|
+
`);function Be({label:t,error:e,helperText:o,resize:a="vertical",className:d="",...r}){let i=["dak-textarea",`dak-textarea--resize-${a}`,e&&"dak-textarea--error",d].filter(Boolean).join(" ");return jsxs("div",{className:"dak-textarea-wrapper",children:[t&&jsx("label",{className:"dak-textarea-label",children:t}),jsx("textarea",{className:i,...r}),e&&jsx("span",{className:"dak-textarea-error-text",children:e}),!e&&o&&jsx("span",{className:"dak-textarea-helper-text",children:o})]})}export{H as Badge,h as Button,G as Card,Z as Checkbox,y as Input,pe as Select,ye as Switch,Be as TextArea,u as useSwitch};//# sourceMappingURL=index.mjs.map
|
|
10
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["#style-inject:#style-inject","../src/components/badge/badge.css","../src/components/badge/badge.tsx","../src/components/button/button.css","../src/components/button/button.tsx","../src/components/card/card.css","../src/components/card/card.tsx","../src/components/checkbox/checkbox.css","../src/components/checkbox/checkbox.tsx","../src/components/input/input.css","../src/components/input/input.tsx","../src/components/select/select.css","../src/components/select/select.tsx","../src/components/switch/use-switch.ts","../src/components/switch/switch.css","../src/components/switch/switch.tsx","../src/components/textarea/textarea.css","../src/components/textarea/textarea.tsx"],"names":["styleInject","css","insertAt","head","style","Badge","variant","size","className","children","props","classNames","jsx","Button","Card","padding","Checkbox","label","error","checkboxClassNames","jsxs","Input","helperText","inputClassNames","Select","options","selectClassNames","option","useSwitch","controlledChecked","defaultChecked","onChange","internalChecked","setInternalChecked","useState","isControlled","checked","useEffect","handleChange","useCallback","event","Switch","switchClassNames","TextArea","resize","textareaClassNames"],"mappings":"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","file":"index.mjs","sourcesContent":["\n export default function styleInject(css, { insertAt } = {}) {\n if (!css || typeof document === 'undefined') return\n \n const head = document.head || document.getElementsByTagName('head')[0]\n const 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 ","import styleInject from '#style-inject';styleInject(\".dak-badge{display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;font-weight:600;white-space:nowrap}.dak-badge--primary{background-color:#dbeafe;color:#1e40af}.dak-badge--success{background-color:#d1fae5;color:#065f46}.dak-badge--warning{background-color:#fef3c7;color:#92400e}.dak-badge--error{background-color:#fee2e2;color:#991b1b}.dak-badge--info{background-color:#e0e7ff;color:#3730a3}.dak-badge--small{padding:4px 10px;font-size:12px}.dak-badge--medium{padding:6px 14px;font-size:14px}.dak-badge--large{padding:8px 18px;font-size:16px}\\n\")","import React from 'react';\nimport './badge.css';\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n variant?: 'primary' | 'success' | 'warning' | 'error' | 'info';\n size?: 'small' | 'medium' | 'large';\n children: React.ReactNode;\n}\n\nexport function Badge({\n variant = 'primary',\n size = 'medium',\n className = '',\n children,\n ...props\n}: BadgeProps) {\n const classNames = [\n 'dak-badge',\n `dak-badge--${variant}`,\n `dak-badge--${size}`,\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <span className={classNames} {...props}>\n {children}\n </span>\n );\n}\n","import styleInject from '#style-inject';styleInject(\".dak-button{border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .2s ease;font-family:inherit}.dak-button:hover{transform:translateY(-1px);box-shadow:0 4px 12px #00000026}.dak-button:active{transform:translateY(0)}.dak-button:disabled{opacity:.5;cursor:not-allowed;transform:none}.dak-button--primary{background-color:#0070f3;color:#fff}.dak-button--primary:hover{background-color:#0051cc}.dak-button--secondary{background-color:#6b7280;color:#fff}.dak-button--secondary:hover{background-color:#4b5563}.dak-button--outline{background-color:transparent;color:#0070f3;border:2px solid #0070f3}.dak-button--outline:hover{background-color:#0070f3;color:#fff}.dak-button--small{padding:8px 16px;font-size:14px}.dak-button--medium{padding:12px 24px;font-size:16px}.dak-button--large{padding:16px 32px;font-size:18px}\\n\")","import React from 'react';\nimport './button.css';\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n variant?: 'primary' | 'secondary' | 'outline';\n size?: 'small' | 'medium' | 'large';\n children: React.ReactNode;\n}\n\nexport function Button({\n variant = 'primary',\n size = 'medium',\n className = '',\n children,\n ...props\n}: ButtonProps) {\n const classNames = [\n 'dak-button',\n `dak-button--${variant}`,\n `dak-button--${size}`,\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <button className={classNames} {...props}>\n {children}\n </button>\n );\n}\n","import styleInject from '#style-inject';styleInject(\".dak-card{background-color:#fff;border-radius:12px;box-sizing:border-box;width:100%}.dak-card--default{background-color:#f9fafb}.dak-card--bordered{border:2px solid #e5e7eb;background-color:#fff}.dak-card--elevated{background-color:#fff;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;transition:box-shadow .2s ease}.dak-card--elevated:hover{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.dak-card--padding-none{padding:0}.dak-card--padding-small{padding:12px}.dak-card--padding-medium{padding:24px}.dak-card--padding-large{padding:32px}\\n\")","import React from 'react';\nimport './card.css';\n\nexport interface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n variant?: 'default' | 'bordered' | 'elevated';\n padding?: 'none' | 'small' | 'medium' | 'large';\n children: React.ReactNode;\n}\n\nexport function Card({\n variant = 'default',\n padding = 'medium',\n className = '',\n children,\n ...props\n}: CardProps) {\n const classNames = [\n 'dak-card',\n `dak-card--${variant}`,\n `dak-card--padding-${padding}`,\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className={classNames} {...props}>\n {children}\n </div>\n );\n}\n","import styleInject from '#style-inject';styleInject(\".dak-checkbox-wrapper{display:flex;flex-direction:column;gap:6px}.dak-checkbox-label-wrapper{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none}.dak-checkbox{width:20px;height:20px;border:2px solid #d1d5db;border-radius:4px;cursor:pointer;appearance:none;background-color:#fff;transition:all .2s ease;position:relative;flex-shrink:0}.dak-checkbox:hover{border-color:#0070f3}.dak-checkbox:checked{background-color:#0070f3;border-color:#0070f3}.dak-checkbox:checked:after{content:\\\"\\\";position:absolute;left:6px;top:2px;width:4px;height:9px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}.dak-checkbox:disabled{opacity:.5;cursor:not-allowed}.dak-checkbox:disabled:hover{border-color:#d1d5db}.dak-checkbox--error{border-color:#ef4444}.dak-checkbox--error:hover{border-color:#dc2626}.dak-checkbox-label{font-size:16px;color:#374151}.dak-checkbox-error-text{font-size:14px;color:#ef4444;padding-left:30px}\\n\")","import React from 'react';\nimport './checkbox.css';\n\nexport interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {\n label?: string;\n error?: string;\n}\n\nexport function Checkbox({\n label,\n error,\n className = '',\n ...props\n}: CheckboxProps) {\n const checkboxClassNames = [\n 'dak-checkbox',\n error && 'dak-checkbox--error',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className=\"dak-checkbox-wrapper\">\n <label className=\"dak-checkbox-label-wrapper\">\n <input\n type=\"checkbox\"\n className={checkboxClassNames}\n {...props}\n />\n {label && <span className=\"dak-checkbox-label\">{label}</span>}\n </label>\n {error && <span className=\"dak-checkbox-error-text\">{error}</span>}\n </div>\n );\n}\n","import styleInject from '#style-inject';styleInject(\".dak-input-wrapper{display:flex;flex-direction:column;gap:6px;width:100%}.dak-input-label{font-size:14px;font-weight:600;color:#374151}.dak-input{padding:12px 16px;border:2px solid #d1d5db;border-radius:8px;font-size:16px;font-family:inherit;transition:all .2s ease;width:100%;box-sizing:border-box}.dak-input:focus{outline:none;border-color:#0070f3;box-shadow:0 0 0 3px #0070f31a}.dak-input:disabled{background-color:#f3f4f6;cursor:not-allowed;opacity:.6}.dak-input--error{border-color:#ef4444}.dak-input--error:focus{border-color:#ef4444;box-shadow:0 0 0 3px #ef44441a}.dak-input-error-text{font-size:14px;color:#ef4444}.dak-input-helper-text{font-size:14px;color:#6b7280}\\n\")","import React from 'react';\nimport './input.css';\n\nexport interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {\n label?: string;\n error?: string;\n helperText?: string;\n}\n\nexport function Input({\n label,\n error,\n helperText,\n className = '',\n ...props\n}: InputProps) {\n const inputClassNames = [\n 'dak-input',\n error && 'dak-input--error',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className=\"dak-input-wrapper\">\n {label && <label className=\"dak-input-label\">{label}</label>}\n <input className={inputClassNames} {...props} />\n {error && <span className=\"dak-input-error-text\">{error}</span>}\n {!error && helperText && (\n <span className=\"dak-input-helper-text\">{helperText}</span>\n )}\n </div>\n );\n}\n","import styleInject from '#style-inject';styleInject(\".dak-select-wrapper{display:flex;flex-direction:column;gap:6px;width:100%}.dak-select-label{font-size:14px;font-weight:600;color:#374151}.dak-select{padding:12px 40px 12px 16px;border:2px solid #d1d5db;border-radius:8px;font-size:16px;font-family:inherit;background-color:#fff;cursor:pointer;transition:all .2s ease;width:100%;box-sizing:border-box;appearance:none;background-image:url(\\\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\\\");background-repeat:no-repeat;background-position:right 12px center;background-size:20px}.dak-select:focus{outline:none;border-color:#0070f3;box-shadow:0 0 0 3px #0070f31a}.dak-select:disabled{background-color:#f3f4f6;cursor:not-allowed;opacity:.6}.dak-select--error{border-color:#ef4444}.dak-select--error:focus{border-color:#ef4444;box-shadow:0 0 0 3px #ef44441a}.dak-select-error-text{font-size:14px;color:#ef4444}.dak-select-helper-text{font-size:14px;color:#6b7280}\\n\")","import React from 'react';\nimport './select.css';\n\nexport interface SelectOption {\n value: string;\n label: string;\n}\n\nexport interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {\n label?: string;\n error?: string;\n helperText?: string;\n options: SelectOption[];\n}\n\nexport function Select({\n label,\n error,\n helperText,\n options,\n className = '',\n ...props\n}: SelectProps) {\n const selectClassNames = [\n 'dak-select',\n error && 'dak-select--error',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className=\"dak-select-wrapper\">\n {label && <label className=\"dak-select-label\">{label}</label>}\n <select className={selectClassNames} {...props}>\n {options.map((option) => (\n <option key={option.value} value={option.value}>\n {option.label}\n </option>\n ))}\n </select>\n {error && <span className=\"dak-select-error-text\">{error}</span>}\n {!error && helperText && (\n <span className=\"dak-select-helper-text\">{helperText}</span>\n )}\n </div>\n );\n}\n","import { useState, useCallback, useEffect } from 'react';\n\ninterface UseSwitchProps {\n checked?: boolean;\n defaultChecked?: boolean;\n onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n}\n\nexport const useSwitch = ({ checked: controlledChecked, defaultChecked = false, onChange }: UseSwitchProps) => {\n const [internalChecked, setInternalChecked] = useState(defaultChecked);\n const isControlled = controlledChecked !== undefined;\n const checked = isControlled ? controlledChecked : internalChecked;\n\n useEffect(() => {\n if (!isControlled && defaultChecked !== undefined) {\n setInternalChecked(defaultChecked);\n }\n }, [defaultChecked, isControlled]);\n\n const handleChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {\n if (!isControlled) {\n setInternalChecked(event.target.checked);\n }\n onChange?.(event);\n }, [isControlled, onChange]);\n\n return { checked, handleChange };\n};\n","import styleInject from '#style-inject';styleInject(\".dak-switch-wrapper{display:inline-flex;align-items:center;gap:12px;cursor:pointer;user-select:none}.dak-switch-input{position:absolute;opacity:0;width:0;height:0}.dak-switch{position:relative;display:inline-block;width:48px;height:26px;background-color:#d1d5db;border-radius:9999px;transition:background-color .2s ease}.dak-switch:hover{background-color:#9ca3af}.dak-switch--checked{background-color:#0070f3}.dak-switch--checked:hover{background-color:#0051cc}.dak-switch-thumb{position:absolute;top:3px;left:3px;width:20px;height:20px;background-color:#fff;border-radius:9999px;transition:transform .2s ease;box-shadow:0 2px 4px #0003}.dak-switch--checked .dak-switch-thumb{transform:translate(22px)}.dak-switch--disabled{opacity:.5;cursor:not-allowed}.dak-switch--disabled:hover{background-color:#d1d5db}.dak-switch--checked.dak-switch--disabled:hover{background-color:#0070f3}.dak-switch-label{font-size:16px;color:#374151}\\n\")","import React from 'react';\nimport { useSwitch } from './use-switch';\nimport './switch.css';\n\nexport interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {\n label?: string;\n}\n\nexport function Switch({\n label,\n className = '',\n ...props\n}: SwitchProps) {\n const { checked, handleChange } = useSwitch(props);\n\n const switchClassNames = [\n 'dak-switch',\n checked && 'dak-switch--checked',\n props.disabled && 'dak-switch--disabled',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <label className=\"dak-switch-wrapper\">\n <input\n type=\"checkbox\"\n className=\"dak-switch-input\"\n checked={checked}\n onChange={handleChange}\n {...props}\n />\n <span className={switchClassNames}>\n <span className=\"dak-switch-thumb\" />\n </span>\n {label && <span className=\"dak-switch-label\">{label}</span>}\n </label>\n );\n}\n","import styleInject from '#style-inject';styleInject(\".dak-textarea-wrapper{display:flex;flex-direction:column;gap:6px;width:100%}.dak-textarea-label{font-size:14px;font-weight:600;color:#374151}.dak-textarea{padding:12px 16px;border:2px solid #d1d5db;border-radius:8px;font-size:16px;font-family:inherit;transition:all .2s ease;width:100%;box-sizing:border-box;min-height:100px}.dak-textarea:focus{outline:none;border-color:#0070f3;box-shadow:0 0 0 3px #0070f31a}.dak-textarea:disabled{background-color:#f3f4f6;cursor:not-allowed;opacity:.6}.dak-textarea--error{border-color:#ef4444}.dak-textarea--error:focus{border-color:#ef4444;box-shadow:0 0 0 3px #ef44441a}.dak-textarea--resize-none{resize:none}.dak-textarea--resize-vertical{resize:vertical}.dak-textarea--resize-horizontal{resize:horizontal}.dak-textarea--resize-both{resize:both}.dak-textarea-error-text{font-size:14px;color:#ef4444}.dak-textarea-helper-text{font-size:14px;color:#6b7280}\\n\")","import React from 'react';\nimport './textarea.css';\n\nexport interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\n label?: string;\n error?: string;\n helperText?: string;\n resize?: 'none' | 'vertical' | 'horizontal' | 'both';\n}\n\nexport function TextArea({\n label,\n error,\n helperText,\n resize = 'vertical',\n className = '',\n ...props\n}: TextAreaProps) {\n const textareaClassNames = [\n 'dak-textarea',\n `dak-textarea--resize-${resize}`,\n error && 'dak-textarea--error',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className=\"dak-textarea-wrapper\">\n {label && <label className=\"dak-textarea-label\">{label}</label>}\n <textarea className={textareaClassNames} {...props} />\n {error && <span className=\"dak-textarea-error-text\">{error}</span>}\n {!error && helperText && (\n <span className=\"dak-textarea-helper-text\">{helperText}</span>\n )}\n </div>\n );\n}\n"]}
|
package/package.json
ADDED
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "dak-krds",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "DAK React UI Component Design System",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"module": "dist/index.mjs",
|
|
7
|
+
"types": "dist/index.d.ts",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"types": "./dist/index.d.ts",
|
|
11
|
+
"import": "./dist/index.mjs",
|
|
12
|
+
"require": "./dist/index.js"
|
|
13
|
+
},
|
|
14
|
+
"./styles.css": "./dist/styles.css"
|
|
15
|
+
},
|
|
16
|
+
"files": [
|
|
17
|
+
"dist"
|
|
18
|
+
],
|
|
19
|
+
"scripts": {
|
|
20
|
+
"build": "tsup",
|
|
21
|
+
"dev": "tsup --watch",
|
|
22
|
+
"lint": "eslint .",
|
|
23
|
+
"typecheck": "tsc --noEmit",
|
|
24
|
+
"prepublishOnly": "pnpm run build"
|
|
25
|
+
},
|
|
26
|
+
"keywords": [
|
|
27
|
+
"react",
|
|
28
|
+
"ui",
|
|
29
|
+
"components",
|
|
30
|
+
"design-system",
|
|
31
|
+
"typescript"
|
|
32
|
+
],
|
|
33
|
+
"author": "Jeff Kim",
|
|
34
|
+
"license": "MIT",
|
|
35
|
+
"peerDependencies": {
|
|
36
|
+
"react": ">=18.0.0",
|
|
37
|
+
"react-dom": ">=18.0.0"
|
|
38
|
+
},
|
|
39
|
+
"devDependencies": {
|
|
40
|
+
"@types/node": "^20.11.5",
|
|
41
|
+
"@types/react": "^18.2.48",
|
|
42
|
+
"@types/react-dom": "^18.2.18",
|
|
43
|
+
"react": "^18.2.0",
|
|
44
|
+
"react-dom": "^18.2.0",
|
|
45
|
+
"tsup": "^8.0.1",
|
|
46
|
+
"typescript": "^5.3.3"
|
|
47
|
+
},
|
|
48
|
+
"repository": {
|
|
49
|
+
"type": "git",
|
|
50
|
+
"url": "git+https://github.com/jeff0410/dak-krds.git"
|
|
51
|
+
},
|
|
52
|
+
"packageManager": "pnpm@10.13.1+sha512.37ebf1a5c7a30d5fabe0c5df44ee8da4c965ca0c5af3dbab28c3a1681b70a256218d05c81c9c0dcf767ef6b8551eb5b960042b9ed4300c59242336377e01cfad"
|
|
53
|
+
}
|