soongle-ui 0.1.3 → 0.1.5
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.ko.md +93 -0
- package/README.md +66 -12
- package/dist/index.js +9 -2
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +9 -2
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +56 -0
- package/package.json +1 -1
package/README.ko.md
ADDED
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
# soongle-ui
|
|
2
|
+
|
|
3
|
+
**Tailwind CSS v4**를 기반으로 한 React.js 및 Next.js용 프리미엄 현대적 디자인 시스템 라이브러리입니다.
|
|
4
|
+
|
|
5
|
+
다른 언어로 보기: [English](README.md), [한국어](README.ko.md)
|
|
6
|
+
|
|
7
|
+
## ✨ 특징
|
|
8
|
+
|
|
9
|
+
- 🎨 **Utility-First**: Tailwind CSS v4를 활용한 최상의 유연성.
|
|
10
|
+
- 🛠️ **Type-Safe**: TypeScript로 작성되어 완벽한 IntelliSense 지원.
|
|
11
|
+
- 📦 **Tree-Shakable**: 실제로 사용하는 컴포넌트만 번들에 포함.
|
|
12
|
+
- 🚀 **Next.js 최적화**: 서버 컴포넌트 및 SSR을 고려하여 설계됨.
|
|
13
|
+
|
|
14
|
+
## 🚀 설치
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
npm install soongle-ui
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## 🛠️ 설정
|
|
21
|
+
|
|
22
|
+
### 1. 스타일 임포트
|
|
23
|
+
|
|
24
|
+
프로젝트에서 Tailwind CSS를 **사용하지 않는** 경우, 루트 엔트리 파일(예: Next.js의 `app/layout.tsx` 또는 Vite의 `src/main.tsx`)에서 라이브러리의 스타일시트를 임포트해야 합니다.
|
|
25
|
+
|
|
26
|
+
```tsx
|
|
27
|
+
import 'soongle-ui/styles.css';
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
#### 💡 이미 Tailwind CSS를 사용 중인 경우
|
|
31
|
+
|
|
32
|
+
이미 프로젝트에 Tailwind CSS가 설치되어 있다면, `soongle-ui/styles.css`를 **임포트하지 마세요.** 대신, 스타일 중복을 방지하고 번들 크기를 최적화하기 위해 Tailwind 설정에 라이브러리의 컴포넌트 경로를 추가하세요.
|
|
33
|
+
|
|
34
|
+
##### Tailwind CSS v3 (`tailwind.config.ts`) 사용 시
|
|
35
|
+
`content` 배열에 `soongle-ui` 배포 경로를 추가합니다:
|
|
36
|
+
|
|
37
|
+
```ts
|
|
38
|
+
export default {
|
|
39
|
+
content: [
|
|
40
|
+
"./src/**/*.{js,ts,jsx,tsx}",
|
|
41
|
+
"./node_modules/soongle-ui/dist/**/*.{js,ts,jsx,tsx}", // 이 라인 추가
|
|
42
|
+
],
|
|
43
|
+
theme: {
|
|
44
|
+
extend: {},
|
|
45
|
+
},
|
|
46
|
+
plugins: [],
|
|
47
|
+
};
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
##### Tailwind CSS v4 사용 시
|
|
51
|
+
Tailwind v4는 자동으로 `node_modules`를 스캔합니다. 하지만 최상의 경험을 위해 루트 CSS에 다음 내용을 확인하세요:
|
|
52
|
+
|
|
53
|
+
```css
|
|
54
|
+
@import "tailwindcss";
|
|
55
|
+
@source "../node_modules/soongle-ui";
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
## 📖 사용 방법
|
|
59
|
+
|
|
60
|
+
### Text 컴포넌트 사용 예시
|
|
61
|
+
|
|
62
|
+
```tsx
|
|
63
|
+
import { Text } from 'soongle-ui';
|
|
64
|
+
|
|
65
|
+
function App() {
|
|
66
|
+
return (
|
|
67
|
+
<div className="p-8 space-y-4">
|
|
68
|
+
<Text size="5xl" weight="black" color="primary">
|
|
69
|
+
안녕하세요 Soongle!
|
|
70
|
+
</Text>
|
|
71
|
+
<Text size="base" color="muted">
|
|
72
|
+
Tailwind 기본값을 사용하는 미리 스타일링된 텍스트 컴포넌트입니다.
|
|
73
|
+
</Text>
|
|
74
|
+
</div>
|
|
75
|
+
);
|
|
76
|
+
}
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
## 🏗️ 제공되는 컴포넌트
|
|
80
|
+
|
|
81
|
+
| 컴포넌트 | 설명 |
|
|
82
|
+
| :--- | :--- |
|
|
83
|
+
| `Button` | 다양한 배리언트를 지원하는 인터랙티브 버튼 컴포넌트. |
|
|
84
|
+
| `Text` | 모든 Tailwind 폰트 유틸리티를 지원하는 시맨틱 텍스트 컴포넌트. |
|
|
85
|
+
| (추가 예정...) | 더 많은 고품질 컴포넌트가 곧 추가될 예정입니다. |
|
|
86
|
+
|
|
87
|
+
## 🧩 요구 사항
|
|
88
|
+
|
|
89
|
+
- **React**: 18.x 또는 19.x
|
|
90
|
+
- **Tailwind CSS**: v4.x (라이브러리에 스타일이 포함되어 있지만, Tailwind 프로젝트에서 가장 잘 작동합니다)
|
|
91
|
+
|
|
92
|
+
---
|
|
93
|
+
Developed by Soongle.
|
package/README.md
CHANGED
|
@@ -1,39 +1,93 @@
|
|
|
1
1
|
# soongle-ui
|
|
2
2
|
|
|
3
|
-
A design system library for React.js and Next.js
|
|
3
|
+
A premium, modern design system library for React.js and Next.js, built on top of **Tailwind CSS v4**.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Read this in other languages: [English](README.md), [한국어](README.ko.md)
|
|
6
|
+
|
|
7
|
+
## ✨ Features
|
|
8
|
+
|
|
9
|
+
- 🎨 **Utility-First**: Powered by Tailwind CSS v4 for ultimate flexibility.
|
|
10
|
+
- 🛠️ **Type-Safe**: Written in TypeScript with full IntelliSense support.
|
|
11
|
+
- 📦 **Tree-Shakable**: Only include the components you actually use.
|
|
12
|
+
- 🚀 **Next.js Optimized**: Built with Server Components and SSR in mind.
|
|
13
|
+
|
|
14
|
+
## 🚀 Installation
|
|
6
15
|
|
|
7
16
|
```bash
|
|
8
17
|
npm install soongle-ui
|
|
9
18
|
```
|
|
10
19
|
|
|
11
|
-
##
|
|
20
|
+
## 🛠️ Setup
|
|
12
21
|
|
|
13
22
|
### 1. Import Styles
|
|
14
23
|
|
|
15
|
-
|
|
24
|
+
If you are **not** using Tailwind CSS in your project, import the library's stylesheet in your root entry file (e.g., `app/layout.tsx` for Next.js, or `src/main.tsx` for Vite).
|
|
16
25
|
|
|
17
26
|
```tsx
|
|
18
27
|
import 'soongle-ui/styles.css';
|
|
19
28
|
```
|
|
20
29
|
|
|
21
|
-
|
|
30
|
+
#### 💡 If you are already using Tailwind CSS
|
|
31
|
+
|
|
32
|
+
If your project already has Tailwind CSS installed, **do not** import `soongle-ui/styles.css`. Instead, add the library's component path to your Tailwind configuration to avoid duplicate styles and keep your bundle clean.
|
|
33
|
+
|
|
34
|
+
##### For Tailwind CSS v3 (`tailwind.config.ts`)
|
|
35
|
+
Add the `soongle-ui` distribution path to the `content` array:
|
|
36
|
+
|
|
37
|
+
```ts
|
|
38
|
+
export default {
|
|
39
|
+
content: [
|
|
40
|
+
"./src/**/*.{js,ts,jsx,tsx}",
|
|
41
|
+
"./node_modules/soongle-ui/dist/**/*.{js,ts,jsx,tsx}", // Add this line
|
|
42
|
+
],
|
|
43
|
+
theme: {
|
|
44
|
+
extend: {},
|
|
45
|
+
},
|
|
46
|
+
plugins: [],
|
|
47
|
+
};
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
##### For Tailwind CSS v4
|
|
51
|
+
Tailwind v4 automatically scans `node_modules`. However, you should ensure your `@theme` and custom variables are consistent with the library. For the best experience, just ensure your root CSS includes:
|
|
52
|
+
|
|
53
|
+
```css
|
|
54
|
+
@import "tailwindcss";
|
|
55
|
+
@source "../node_modules/soongle-ui";
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
## 📖 Usage
|
|
59
|
+
|
|
60
|
+
### Using the Text Component
|
|
22
61
|
|
|
23
62
|
```tsx
|
|
24
|
-
import {
|
|
63
|
+
import { Text } from 'soongle-ui';
|
|
25
64
|
|
|
26
65
|
function App() {
|
|
27
66
|
return (
|
|
28
|
-
<div>
|
|
29
|
-
<
|
|
67
|
+
<div className="p-8 space-y-4">
|
|
68
|
+
<Text size="5xl" weight="black" color="primary">
|
|
69
|
+
Hello Soongle!
|
|
70
|
+
</Text>
|
|
71
|
+
<Text size="base" color="muted">
|
|
72
|
+
This is a pre-styled text component using Tailwind defaults.
|
|
73
|
+
</Text>
|
|
30
74
|
</div>
|
|
31
75
|
);
|
|
32
76
|
}
|
|
33
77
|
```
|
|
34
78
|
|
|
35
|
-
##
|
|
79
|
+
## 🏗️ Available Components
|
|
80
|
+
|
|
81
|
+
| Component | Description |
|
|
82
|
+
| :--- | :--- |
|
|
83
|
+
| `Button` | Interactive button component with various variants. |
|
|
84
|
+
| `Text` | Semantic text component with support for all Tailwind font utilities. |
|
|
85
|
+
| (More coming soon...) | Stay tuned for more high-quality components. |
|
|
86
|
+
|
|
87
|
+
## 🧩 Requirements
|
|
88
|
+
|
|
89
|
+
- **React**: 18.x or 19.x
|
|
90
|
+
- **Tailwind CSS**: v4.x (The library includes styles, but works best in a Tailwind project)
|
|
36
91
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
- Tree-shakable exports
|
|
92
|
+
---
|
|
93
|
+
Developed by Soongle.
|
package/dist/index.js
CHANGED
|
@@ -49,14 +49,21 @@ var sizeClasses = {
|
|
|
49
49
|
xl: "text-xl",
|
|
50
50
|
"2xl": "text-2xl",
|
|
51
51
|
"3xl": "text-3xl",
|
|
52
|
-
"4xl": "text-4xl"
|
|
52
|
+
"4xl": "text-4xl",
|
|
53
|
+
"5xl": "text-5xl",
|
|
54
|
+
"6xl": "text-6xl",
|
|
55
|
+
"7xl": "text-7xl",
|
|
56
|
+
"8xl": "text-8xl",
|
|
57
|
+
"9xl": "text-9xl"
|
|
53
58
|
};
|
|
54
59
|
var weightClasses = {
|
|
55
60
|
light: "font-light",
|
|
56
61
|
normal: "font-normal",
|
|
57
62
|
medium: "font-medium",
|
|
58
63
|
semibold: "font-semibold",
|
|
59
|
-
bold: "font-bold"
|
|
64
|
+
bold: "font-bold",
|
|
65
|
+
extrabold: "font-extrabold",
|
|
66
|
+
black: "font-black"
|
|
60
67
|
};
|
|
61
68
|
var colorClasses = {
|
|
62
69
|
default: "text-gray-900",
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/components/Button/Button.tsx","../src/components/Text/Text.tsx"],"sourcesContent":["// Export components\r\nexport * from './components';\r\n","import * as React from \"react\";\r\nimport { Text } from \"../Text/Text\";\r\n\r\nexport interface ButtonProps\r\n extends React.ButtonHTMLAttributes<HTMLButtonElement> {\r\n children?: React.ReactNode;\r\n variant?: \"default\" | \"primary\" | \"secondary\" | \"danger\" | \"ghost\";\r\n size?: \"sm\" | \"md\" | \"lg\";\r\n className?: string;\r\n}\r\n\r\nconst variantClasses = {\r\n default: \"bg-gray-200 text-gray-900 hover:bg-gray-300\",\r\n primary: \"bg-blue-600 text-white hover:bg-blue-700\",\r\n secondary: \"bg-green-600 text-white hover:bg-green-700\",\r\n danger: \"bg-red-600 text-white hover:bg-red-700\",\r\n ghost: \"bg-transparent text-gray-700 hover:bg-gray-100\",\r\n};\r\n\r\nconst sizeClasses = {\r\n sm: \"px-3 py-1.5\",\r\n md: \"px-4 py-2\",\r\n lg: \"px-6 py-3\",\r\n};\r\n\r\nconst textSizeMap = {\r\n sm: \"sm\" as const,\r\n md: \"base\" as const,\r\n lg: \"lg\" as const,\r\n};\r\n\r\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n (\r\n { className = \"\", children, variant = \"default\", size = \"md\", ...props },\r\n ref\r\n ) => {\r\n const variantClass = variantClasses[variant];\r\n const sizeClass = sizeClasses[size];\r\n const textSize = textSizeMap[size];\r\n\r\n return (\r\n <button\r\n ref={ref}\r\n className={`cursor-pointer inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ${variantClass} ${sizeClass} ${className}`}\r\n {...props}\r\n >\r\n <Text\r\n as=\"span\"\r\n size={textSize}\r\n weight=\"medium\"\r\n className=\"leading-none\"\r\n >\r\n {children}\r\n </Text>\r\n </button>\r\n );\r\n }\r\n);\r\n\r\nButton.displayName = \"Button\";\r\n","import * as React from \"react\";\r\n\r\nexport interface TextProps {\r\n children?: React.ReactNode;\r\n as?: \"p\" | \"span\" | \"div\" | \"label\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\r\n size?: \"xs\" | \"sm\" | \"base\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\";\r\n weight?: \"light\" | \"normal\" | \"medium\" | \"semibold\" | \"bold\";\r\n color?: \"default\" | \"muted\" | \"primary\" | \"secondary\" | \"danger\" | \"success\";\r\n align?: \"left\" | \"center\" | \"right\";\r\n className?: string;\r\n}\r\n\r\nconst sizeClasses = {\r\n xs: \"text-xs\",\r\n sm: \"text-sm\",\r\n base: \"text-base\",\r\n lg: \"text-lg\",\r\n xl: \"text-xl\",\r\n \"2xl\": \"text-2xl\",\r\n \"3xl\": \"text-3xl\",\r\n \"4xl\": \"text-4xl\",\r\n};\r\n\r\nconst weightClasses = {\r\n light: \"font-light\",\r\n normal: \"font-normal\",\r\n medium: \"font-medium\",\r\n semibold: \"font-semibold\",\r\n bold: \"font-bold\",\r\n};\r\n\r\nconst colorClasses = {\r\n default: \"text-gray-900\",\r\n muted: \"text-gray-500\",\r\n primary: \"text-blue-600\",\r\n secondary: \"text-green-600\",\r\n danger: \"text-red-600\",\r\n success: \"text-emerald-600\",\r\n};\r\n\r\nconst alignClasses = {\r\n left: \"text-left\",\r\n center: \"text-center\",\r\n right: \"text-right\",\r\n};\r\n\r\nexport const Text = React.forwardRef<HTMLElement, TextProps>(\r\n (\r\n {\r\n children,\r\n as: Component = \"p\",\r\n size = \"base\",\r\n weight = \"normal\",\r\n color = \"default\",\r\n align = \"left\",\r\n className = \"\",\r\n ...props\r\n },\r\n ref\r\n ) => {\r\n const classes = [\r\n sizeClasses[size],\r\n weightClasses[weight],\r\n colorClasses[color],\r\n alignClasses[align],\r\n className,\r\n ]\r\n .filter(Boolean)\r\n .join(\" \");\r\n\r\n return (\r\n <Component ref={ref as any} className={classes} {...props}>\r\n {children}\r\n </Component>\r\n );\r\n }\r\n);\r\n\r\nText.displayName = \"Text\";\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,SAAuB;;;ACAvB,YAAuB;
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/components/Button/Button.tsx","../src/components/Text/Text.tsx"],"sourcesContent":["// Export components\r\nexport * from './components';\r\n","import * as React from \"react\";\r\nimport { Text } from \"../Text/Text\";\r\n\r\nexport interface ButtonProps\r\n extends React.ButtonHTMLAttributes<HTMLButtonElement> {\r\n children?: React.ReactNode;\r\n variant?: \"default\" | \"primary\" | \"secondary\" | \"danger\" | \"ghost\";\r\n size?: \"sm\" | \"md\" | \"lg\";\r\n className?: string;\r\n}\r\n\r\nconst variantClasses = {\r\n default: \"bg-gray-200 text-gray-900 hover:bg-gray-300\",\r\n primary: \"bg-blue-600 text-white hover:bg-blue-700\",\r\n secondary: \"bg-green-600 text-white hover:bg-green-700\",\r\n danger: \"bg-red-600 text-white hover:bg-red-700\",\r\n ghost: \"bg-transparent text-gray-700 hover:bg-gray-100\",\r\n};\r\n\r\nconst sizeClasses = {\r\n sm: \"px-3 py-1.5\",\r\n md: \"px-4 py-2\",\r\n lg: \"px-6 py-3\",\r\n};\r\n\r\nconst textSizeMap = {\r\n sm: \"sm\" as const,\r\n md: \"base\" as const,\r\n lg: \"lg\" as const,\r\n};\r\n\r\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n (\r\n { className = \"\", children, variant = \"default\", size = \"md\", ...props },\r\n ref\r\n ) => {\r\n const variantClass = variantClasses[variant];\r\n const sizeClass = sizeClasses[size];\r\n const textSize = textSizeMap[size];\r\n\r\n return (\r\n <button\r\n ref={ref}\r\n className={`cursor-pointer inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ${variantClass} ${sizeClass} ${className}`}\r\n {...props}\r\n >\r\n <Text\r\n as=\"span\"\r\n size={textSize}\r\n weight=\"medium\"\r\n className=\"leading-none\"\r\n >\r\n {children}\r\n </Text>\r\n </button>\r\n );\r\n }\r\n);\r\n\r\nButton.displayName = \"Button\";\r\n","import * as React from \"react\";\r\n\r\nexport interface TextProps {\r\n children?: React.ReactNode;\r\n as?: \"p\" | \"span\" | \"div\" | \"label\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\r\n size?: \"xs\" | \"sm\" | \"base\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\";\r\n weight?: \"light\" | \"normal\" | \"medium\" | \"semibold\" | \"bold\";\r\n color?: \"default\" | \"muted\" | \"primary\" | \"secondary\" | \"danger\" | \"success\";\r\n align?: \"left\" | \"center\" | \"right\";\r\n className?: string;\r\n}\r\n\r\nconst sizeClasses = {\r\n xs: \"text-xs\",\r\n sm: \"text-sm\",\r\n base: \"text-base\",\r\n lg: \"text-lg\",\r\n xl: \"text-xl\",\r\n \"2xl\": \"text-2xl\",\r\n \"3xl\": \"text-3xl\",\r\n \"4xl\": \"text-4xl\",\r\n \"5xl\": \"text-5xl\",\r\n \"6xl\": \"text-6xl\",\r\n \"7xl\": \"text-7xl\",\r\n \"8xl\": \"text-8xl\",\r\n \"9xl\": \"text-9xl\",\r\n};\r\n\r\nconst weightClasses = {\r\n light: \"font-light\",\r\n normal: \"font-normal\",\r\n medium: \"font-medium\",\r\n semibold: \"font-semibold\",\r\n bold: \"font-bold\",\r\n extrabold: \"font-extrabold\",\r\n black: \"font-black\",\r\n};\r\n\r\nconst colorClasses = {\r\n default: \"text-gray-900\",\r\n muted: \"text-gray-500\",\r\n primary: \"text-blue-600\",\r\n secondary: \"text-green-600\",\r\n danger: \"text-red-600\",\r\n success: \"text-emerald-600\",\r\n};\r\n\r\nconst alignClasses = {\r\n left: \"text-left\",\r\n center: \"text-center\",\r\n right: \"text-right\",\r\n};\r\n\r\nexport const Text = React.forwardRef<HTMLElement, TextProps>(\r\n (\r\n {\r\n children,\r\n as: Component = \"p\",\r\n size = \"base\",\r\n weight = \"normal\",\r\n color = \"default\",\r\n align = \"left\",\r\n className = \"\",\r\n ...props\r\n },\r\n ref\r\n ) => {\r\n const classes = [\r\n sizeClasses[size],\r\n weightClasses[weight],\r\n colorClasses[color],\r\n alignClasses[align],\r\n className,\r\n ]\r\n .filter(Boolean)\r\n .join(\" \");\r\n\r\n return (\r\n <Component ref={ref as any} className={classes} {...props}>\r\n {children}\r\n </Component>\r\n );\r\n }\r\n);\r\n\r\nText.displayName = \"Text\";\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,SAAuB;;;ACAvB,YAAuB;AA8EjB;AAlEN,IAAM,cAAc;AAAA,EAClB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT;AAEA,IAAM,gBAAgB;AAAA,EACpB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,MAAM;AAAA,EACN,WAAW;AAAA,EACX,OAAO;AACT;AAEA,IAAM,eAAe;AAAA,EACnB,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AAAA,EACT,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,SAAS;AACX;AAEA,IAAM,eAAe;AAAA,EACnB,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AACT;AAEO,IAAM,OAAa;AAAA,EACxB,CACE;AAAA,IACE;AAAA,IACA,IAAI,YAAY;AAAA,IAChB,OAAO;AAAA,IACP,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,UAAU;AAAA,MACd,YAAY,IAAI;AAAA,MAChB,cAAc,MAAM;AAAA,MACpB,aAAa,KAAK;AAAA,MAClB,aAAa,KAAK;AAAA,MAClB;AAAA,IACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,WACE,4CAAC,aAAU,KAAiB,WAAW,SAAU,GAAG,OACjD,UACH;AAAA,EAEJ;AACF;AAEA,KAAK,cAAc;;;ADvCX,IAAAC,sBAAA;AAnCR,IAAM,iBAAiB;AAAA,EACrB,SAAS;AAAA,EACT,SAAS;AAAA,EACT,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,OAAO;AACT;AAEA,IAAMC,eAAc;AAAA,EAClB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAM,cAAc;AAAA,EAClB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,IAAM,SAAe;AAAA,EAC1B,CACE,EAAE,YAAY,IAAI,UAAU,UAAU,WAAW,OAAO,MAAM,GAAG,MAAM,GACvE,QACG;AACH,UAAM,eAAe,eAAe,OAAO;AAC3C,UAAM,YAAYA,aAAY,IAAI;AAClC,UAAM,WAAW,YAAY,IAAI;AAEjC,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,gOAAgO,YAAY,IAAI,SAAS,IAAI,SAAS;AAAA,QAChR,GAAG;AAAA,QAEJ;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,MAAM;AAAA,YACN,QAAO;AAAA,YACP,WAAU;AAAA,YAET;AAAA;AAAA,QACH;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;","names":["React","import_jsx_runtime","sizeClasses"]}
|
package/dist/index.mjs
CHANGED
|
@@ -14,14 +14,21 @@ var sizeClasses = {
|
|
|
14
14
|
xl: "text-xl",
|
|
15
15
|
"2xl": "text-2xl",
|
|
16
16
|
"3xl": "text-3xl",
|
|
17
|
-
"4xl": "text-4xl"
|
|
17
|
+
"4xl": "text-4xl",
|
|
18
|
+
"5xl": "text-5xl",
|
|
19
|
+
"6xl": "text-6xl",
|
|
20
|
+
"7xl": "text-7xl",
|
|
21
|
+
"8xl": "text-8xl",
|
|
22
|
+
"9xl": "text-9xl"
|
|
18
23
|
};
|
|
19
24
|
var weightClasses = {
|
|
20
25
|
light: "font-light",
|
|
21
26
|
normal: "font-normal",
|
|
22
27
|
medium: "font-medium",
|
|
23
28
|
semibold: "font-semibold",
|
|
24
|
-
bold: "font-bold"
|
|
29
|
+
bold: "font-bold",
|
|
30
|
+
extrabold: "font-extrabold",
|
|
31
|
+
black: "font-black"
|
|
25
32
|
};
|
|
26
33
|
var colorClasses = {
|
|
27
34
|
default: "text-gray-900",
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Button/Button.tsx","../src/components/Text/Text.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { Text } from \"../Text/Text\";\r\n\r\nexport interface ButtonProps\r\n extends React.ButtonHTMLAttributes<HTMLButtonElement> {\r\n children?: React.ReactNode;\r\n variant?: \"default\" | \"primary\" | \"secondary\" | \"danger\" | \"ghost\";\r\n size?: \"sm\" | \"md\" | \"lg\";\r\n className?: string;\r\n}\r\n\r\nconst variantClasses = {\r\n default: \"bg-gray-200 text-gray-900 hover:bg-gray-300\",\r\n primary: \"bg-blue-600 text-white hover:bg-blue-700\",\r\n secondary: \"bg-green-600 text-white hover:bg-green-700\",\r\n danger: \"bg-red-600 text-white hover:bg-red-700\",\r\n ghost: \"bg-transparent text-gray-700 hover:bg-gray-100\",\r\n};\r\n\r\nconst sizeClasses = {\r\n sm: \"px-3 py-1.5\",\r\n md: \"px-4 py-2\",\r\n lg: \"px-6 py-3\",\r\n};\r\n\r\nconst textSizeMap = {\r\n sm: \"sm\" as const,\r\n md: \"base\" as const,\r\n lg: \"lg\" as const,\r\n};\r\n\r\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n (\r\n { className = \"\", children, variant = \"default\", size = \"md\", ...props },\r\n ref\r\n ) => {\r\n const variantClass = variantClasses[variant];\r\n const sizeClass = sizeClasses[size];\r\n const textSize = textSizeMap[size];\r\n\r\n return (\r\n <button\r\n ref={ref}\r\n className={`cursor-pointer inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ${variantClass} ${sizeClass} ${className}`}\r\n {...props}\r\n >\r\n <Text\r\n as=\"span\"\r\n size={textSize}\r\n weight=\"medium\"\r\n className=\"leading-none\"\r\n >\r\n {children}\r\n </Text>\r\n </button>\r\n );\r\n }\r\n);\r\n\r\nButton.displayName = \"Button\";\r\n","import * as React from \"react\";\r\n\r\nexport interface TextProps {\r\n children?: React.ReactNode;\r\n as?: \"p\" | \"span\" | \"div\" | \"label\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\r\n size?: \"xs\" | \"sm\" | \"base\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\";\r\n weight?: \"light\" | \"normal\" | \"medium\" | \"semibold\" | \"bold\";\r\n color?: \"default\" | \"muted\" | \"primary\" | \"secondary\" | \"danger\" | \"success\";\r\n align?: \"left\" | \"center\" | \"right\";\r\n className?: string;\r\n}\r\n\r\nconst sizeClasses = {\r\n xs: \"text-xs\",\r\n sm: \"text-sm\",\r\n base: \"text-base\",\r\n lg: \"text-lg\",\r\n xl: \"text-xl\",\r\n \"2xl\": \"text-2xl\",\r\n \"3xl\": \"text-3xl\",\r\n \"4xl\": \"text-4xl\",\r\n};\r\n\r\nconst weightClasses = {\r\n light: \"font-light\",\r\n normal: \"font-normal\",\r\n medium: \"font-medium\",\r\n semibold: \"font-semibold\",\r\n bold: \"font-bold\",\r\n};\r\n\r\nconst colorClasses = {\r\n default: \"text-gray-900\",\r\n muted: \"text-gray-500\",\r\n primary: \"text-blue-600\",\r\n secondary: \"text-green-600\",\r\n danger: \"text-red-600\",\r\n success: \"text-emerald-600\",\r\n};\r\n\r\nconst alignClasses = {\r\n left: \"text-left\",\r\n center: \"text-center\",\r\n right: \"text-right\",\r\n};\r\n\r\nexport const Text = React.forwardRef<HTMLElement, TextProps>(\r\n (\r\n {\r\n children,\r\n as: Component = \"p\",\r\n size = \"base\",\r\n weight = \"normal\",\r\n color = \"default\",\r\n align = \"left\",\r\n className = \"\",\r\n ...props\r\n },\r\n ref\r\n ) => {\r\n const classes = [\r\n sizeClasses[size],\r\n weightClasses[weight],\r\n colorClasses[color],\r\n alignClasses[align],\r\n className,\r\n ]\r\n .filter(Boolean)\r\n .join(\" \");\r\n\r\n return (\r\n <Component ref={ref as any} className={classes} {...props}>\r\n {children}\r\n </Component>\r\n );\r\n }\r\n);\r\n\r\nText.displayName = \"Text\";\r\n"],"mappings":";;;AAAA,YAAYA,YAAW;;;ACAvB,YAAY,WAAW;
|
|
1
|
+
{"version":3,"sources":["../src/components/Button/Button.tsx","../src/components/Text/Text.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { Text } from \"../Text/Text\";\r\n\r\nexport interface ButtonProps\r\n extends React.ButtonHTMLAttributes<HTMLButtonElement> {\r\n children?: React.ReactNode;\r\n variant?: \"default\" | \"primary\" | \"secondary\" | \"danger\" | \"ghost\";\r\n size?: \"sm\" | \"md\" | \"lg\";\r\n className?: string;\r\n}\r\n\r\nconst variantClasses = {\r\n default: \"bg-gray-200 text-gray-900 hover:bg-gray-300\",\r\n primary: \"bg-blue-600 text-white hover:bg-blue-700\",\r\n secondary: \"bg-green-600 text-white hover:bg-green-700\",\r\n danger: \"bg-red-600 text-white hover:bg-red-700\",\r\n ghost: \"bg-transparent text-gray-700 hover:bg-gray-100\",\r\n};\r\n\r\nconst sizeClasses = {\r\n sm: \"px-3 py-1.5\",\r\n md: \"px-4 py-2\",\r\n lg: \"px-6 py-3\",\r\n};\r\n\r\nconst textSizeMap = {\r\n sm: \"sm\" as const,\r\n md: \"base\" as const,\r\n lg: \"lg\" as const,\r\n};\r\n\r\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n (\r\n { className = \"\", children, variant = \"default\", size = \"md\", ...props },\r\n ref\r\n ) => {\r\n const variantClass = variantClasses[variant];\r\n const sizeClass = sizeClasses[size];\r\n const textSize = textSizeMap[size];\r\n\r\n return (\r\n <button\r\n ref={ref}\r\n className={`cursor-pointer inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ${variantClass} ${sizeClass} ${className}`}\r\n {...props}\r\n >\r\n <Text\r\n as=\"span\"\r\n size={textSize}\r\n weight=\"medium\"\r\n className=\"leading-none\"\r\n >\r\n {children}\r\n </Text>\r\n </button>\r\n );\r\n }\r\n);\r\n\r\nButton.displayName = \"Button\";\r\n","import * as React from \"react\";\r\n\r\nexport interface TextProps {\r\n children?: React.ReactNode;\r\n as?: \"p\" | \"span\" | \"div\" | \"label\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\r\n size?: \"xs\" | \"sm\" | \"base\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\";\r\n weight?: \"light\" | \"normal\" | \"medium\" | \"semibold\" | \"bold\";\r\n color?: \"default\" | \"muted\" | \"primary\" | \"secondary\" | \"danger\" | \"success\";\r\n align?: \"left\" | \"center\" | \"right\";\r\n className?: string;\r\n}\r\n\r\nconst sizeClasses = {\r\n xs: \"text-xs\",\r\n sm: \"text-sm\",\r\n base: \"text-base\",\r\n lg: \"text-lg\",\r\n xl: \"text-xl\",\r\n \"2xl\": \"text-2xl\",\r\n \"3xl\": \"text-3xl\",\r\n \"4xl\": \"text-4xl\",\r\n \"5xl\": \"text-5xl\",\r\n \"6xl\": \"text-6xl\",\r\n \"7xl\": \"text-7xl\",\r\n \"8xl\": \"text-8xl\",\r\n \"9xl\": \"text-9xl\",\r\n};\r\n\r\nconst weightClasses = {\r\n light: \"font-light\",\r\n normal: \"font-normal\",\r\n medium: \"font-medium\",\r\n semibold: \"font-semibold\",\r\n bold: \"font-bold\",\r\n extrabold: \"font-extrabold\",\r\n black: \"font-black\",\r\n};\r\n\r\nconst colorClasses = {\r\n default: \"text-gray-900\",\r\n muted: \"text-gray-500\",\r\n primary: \"text-blue-600\",\r\n secondary: \"text-green-600\",\r\n danger: \"text-red-600\",\r\n success: \"text-emerald-600\",\r\n};\r\n\r\nconst alignClasses = {\r\n left: \"text-left\",\r\n center: \"text-center\",\r\n right: \"text-right\",\r\n};\r\n\r\nexport const Text = React.forwardRef<HTMLElement, TextProps>(\r\n (\r\n {\r\n children,\r\n as: Component = \"p\",\r\n size = \"base\",\r\n weight = \"normal\",\r\n color = \"default\",\r\n align = \"left\",\r\n className = \"\",\r\n ...props\r\n },\r\n ref\r\n ) => {\r\n const classes = [\r\n sizeClasses[size],\r\n weightClasses[weight],\r\n colorClasses[color],\r\n alignClasses[align],\r\n className,\r\n ]\r\n .filter(Boolean)\r\n .join(\" \");\r\n\r\n return (\r\n <Component ref={ref as any} className={classes} {...props}>\r\n {children}\r\n </Component>\r\n );\r\n }\r\n);\r\n\r\nText.displayName = \"Text\";\r\n"],"mappings":";;;AAAA,YAAYA,YAAW;;;ACAvB,YAAY,WAAW;AA8EjB;AAlEN,IAAM,cAAc;AAAA,EAClB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT;AAEA,IAAM,gBAAgB;AAAA,EACpB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,MAAM;AAAA,EACN,WAAW;AAAA,EACX,OAAO;AACT;AAEA,IAAM,eAAe;AAAA,EACnB,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AAAA,EACT,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,SAAS;AACX;AAEA,IAAM,eAAe;AAAA,EACnB,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AACT;AAEO,IAAM,OAAa;AAAA,EACxB,CACE;AAAA,IACE;AAAA,IACA,IAAI,YAAY;AAAA,IAChB,OAAO;AAAA,IACP,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,UAAU;AAAA,MACd,YAAY,IAAI;AAAA,MAChB,cAAc,MAAM;AAAA,MACpB,aAAa,KAAK;AAAA,MAClB,aAAa,KAAK;AAAA,MAClB;AAAA,IACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,WACE,oBAAC,aAAU,KAAiB,WAAW,SAAU,GAAG,OACjD,UACH;AAAA,EAEJ;AACF;AAEA,KAAK,cAAc;;;ADvCX,gBAAAC,YAAA;AAnCR,IAAM,iBAAiB;AAAA,EACrB,SAAS;AAAA,EACT,SAAS;AAAA,EACT,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,OAAO;AACT;AAEA,IAAMC,eAAc;AAAA,EAClB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAM,cAAc;AAAA,EAClB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,IAAM,SAAe;AAAA,EAC1B,CACE,EAAE,YAAY,IAAI,UAAU,UAAU,WAAW,OAAO,MAAM,GAAG,MAAM,GACvE,QACG;AACH,UAAM,eAAe,eAAe,OAAO;AAC3C,UAAM,YAAYA,aAAY,IAAI;AAClC,UAAM,WAAW,YAAY,IAAI;AAEjC,WACE,gBAAAD;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,gOAAgO,YAAY,IAAI,SAAS,IAAI,SAAS;AAAA,QAChR,GAAG;AAAA,QAEJ,0BAAAA;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,MAAM;AAAA,YACN,QAAO;AAAA,YACP,WAAU;AAAA,YAET;AAAA;AAAA,QACH;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;","names":["React","jsx","sizeClasses"]}
|
package/dist/styles.css
CHANGED
|
@@ -38,11 +38,23 @@
|
|
|
38
38
|
--text-3xl--line-height: calc(2.25 / 1.875);
|
|
39
39
|
--text-4xl: 2.25rem;
|
|
40
40
|
--text-4xl--line-height: calc(2.5 / 2.25);
|
|
41
|
+
--text-5xl: 3rem;
|
|
42
|
+
--text-5xl--line-height: 1;
|
|
43
|
+
--text-6xl: 3.75rem;
|
|
44
|
+
--text-6xl--line-height: 1;
|
|
45
|
+
--text-7xl: 4.5rem;
|
|
46
|
+
--text-7xl--line-height: 1;
|
|
47
|
+
--text-8xl: 6rem;
|
|
48
|
+
--text-8xl--line-height: 1;
|
|
49
|
+
--text-9xl: 8rem;
|
|
50
|
+
--text-9xl--line-height: 1;
|
|
41
51
|
--font-weight-light: 300;
|
|
42
52
|
--font-weight-normal: 400;
|
|
43
53
|
--font-weight-medium: 500;
|
|
44
54
|
--font-weight-semibold: 600;
|
|
45
55
|
--font-weight-bold: 700;
|
|
56
|
+
--font-weight-extrabold: 800;
|
|
57
|
+
--font-weight-black: 900;
|
|
46
58
|
--radius-md: 0.375rem;
|
|
47
59
|
--default-transition-duration: 150ms;
|
|
48
60
|
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
@@ -223,6 +235,13 @@
|
|
|
223
235
|
.gap-4 {
|
|
224
236
|
gap: calc(var(--spacing) * 4);
|
|
225
237
|
}
|
|
238
|
+
.space-y-4 {
|
|
239
|
+
:where(& > :not(:last-child)) {
|
|
240
|
+
--tw-space-y-reverse: 0;
|
|
241
|
+
margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
|
|
242
|
+
margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
|
|
243
|
+
}
|
|
244
|
+
}
|
|
226
245
|
.rounded-md {
|
|
227
246
|
border-radius: var(--radius-md);
|
|
228
247
|
}
|
|
@@ -241,6 +260,9 @@
|
|
|
241
260
|
.bg-transparent {
|
|
242
261
|
background-color: transparent;
|
|
243
262
|
}
|
|
263
|
+
.p-8 {
|
|
264
|
+
padding: calc(var(--spacing) * 8);
|
|
265
|
+
}
|
|
244
266
|
.px-3 {
|
|
245
267
|
padding-inline: calc(var(--spacing) * 3);
|
|
246
268
|
}
|
|
@@ -280,6 +302,26 @@
|
|
|
280
302
|
font-size: var(--text-4xl);
|
|
281
303
|
line-height: var(--tw-leading, var(--text-4xl--line-height));
|
|
282
304
|
}
|
|
305
|
+
.text-5xl {
|
|
306
|
+
font-size: var(--text-5xl);
|
|
307
|
+
line-height: var(--tw-leading, var(--text-5xl--line-height));
|
|
308
|
+
}
|
|
309
|
+
.text-6xl {
|
|
310
|
+
font-size: var(--text-6xl);
|
|
311
|
+
line-height: var(--tw-leading, var(--text-6xl--line-height));
|
|
312
|
+
}
|
|
313
|
+
.text-7xl {
|
|
314
|
+
font-size: var(--text-7xl);
|
|
315
|
+
line-height: var(--tw-leading, var(--text-7xl--line-height));
|
|
316
|
+
}
|
|
317
|
+
.text-8xl {
|
|
318
|
+
font-size: var(--text-8xl);
|
|
319
|
+
line-height: var(--tw-leading, var(--text-8xl--line-height));
|
|
320
|
+
}
|
|
321
|
+
.text-9xl {
|
|
322
|
+
font-size: var(--text-9xl);
|
|
323
|
+
line-height: var(--tw-leading, var(--text-9xl--line-height));
|
|
324
|
+
}
|
|
283
325
|
.text-base {
|
|
284
326
|
font-size: var(--text-base);
|
|
285
327
|
line-height: var(--tw-leading, var(--text-base--line-height));
|
|
@@ -304,10 +346,18 @@
|
|
|
304
346
|
--tw-leading: 1;
|
|
305
347
|
line-height: 1;
|
|
306
348
|
}
|
|
349
|
+
.font-black {
|
|
350
|
+
--tw-font-weight: var(--font-weight-black);
|
|
351
|
+
font-weight: var(--font-weight-black);
|
|
352
|
+
}
|
|
307
353
|
.font-bold {
|
|
308
354
|
--tw-font-weight: var(--font-weight-bold);
|
|
309
355
|
font-weight: var(--font-weight-bold);
|
|
310
356
|
}
|
|
357
|
+
.font-extrabold {
|
|
358
|
+
--tw-font-weight: var(--font-weight-extrabold);
|
|
359
|
+
font-weight: var(--font-weight-extrabold);
|
|
360
|
+
}
|
|
311
361
|
.font-light {
|
|
312
362
|
--tw-font-weight: var(--font-weight-light);
|
|
313
363
|
font-weight: var(--font-weight-light);
|
|
@@ -417,6 +467,11 @@
|
|
|
417
467
|
}
|
|
418
468
|
}
|
|
419
469
|
}
|
|
470
|
+
@property --tw-space-y-reverse {
|
|
471
|
+
syntax: "*";
|
|
472
|
+
inherits: false;
|
|
473
|
+
initial-value: 0;
|
|
474
|
+
}
|
|
420
475
|
@property --tw-leading {
|
|
421
476
|
syntax: "*";
|
|
422
477
|
inherits: false;
|
|
@@ -493,6 +548,7 @@
|
|
|
493
548
|
@layer properties {
|
|
494
549
|
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
|
|
495
550
|
*, ::before, ::after, ::backdrop {
|
|
551
|
+
--tw-space-y-reverse: 0;
|
|
496
552
|
--tw-leading: initial;
|
|
497
553
|
--tw-font-weight: initial;
|
|
498
554
|
--tw-shadow: 0 0 #0000;
|