soongle-ui 0.1.3 → 0.1.4
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 +64 -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.md
CHANGED
|
@@ -1,39 +1,91 @@
|
|
|
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
|
+
## ✨ Features
|
|
6
|
+
|
|
7
|
+
- 🎨 **Utility-First**: Powered by Tailwind CSS v4 for ultimate flexibility.
|
|
8
|
+
- 🛠️ **Type-Safe**: Written in TypeScript with full IntelliSense support.
|
|
9
|
+
- 📦 **Tree-Shakable**: Only include the components you actually use.
|
|
10
|
+
- 🚀 **Next.js Optimized**: Built with Server Components and SSR in mind.
|
|
11
|
+
|
|
12
|
+
## 🚀 Installation
|
|
6
13
|
|
|
7
14
|
```bash
|
|
8
15
|
npm install soongle-ui
|
|
9
16
|
```
|
|
10
17
|
|
|
11
|
-
##
|
|
18
|
+
## 🛠️ Setup
|
|
12
19
|
|
|
13
20
|
### 1. Import Styles
|
|
14
21
|
|
|
15
|
-
|
|
22
|
+
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
23
|
|
|
17
24
|
```tsx
|
|
18
25
|
import 'soongle-ui/styles.css';
|
|
19
26
|
```
|
|
20
27
|
|
|
21
|
-
|
|
28
|
+
#### 💡 If you are already using Tailwind CSS
|
|
29
|
+
|
|
30
|
+
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.
|
|
31
|
+
|
|
32
|
+
##### For Tailwind CSS v3 (`tailwind.config.ts`)
|
|
33
|
+
Add the `soongle-ui` distribution path to the `content` array:
|
|
34
|
+
|
|
35
|
+
```ts
|
|
36
|
+
export default {
|
|
37
|
+
content: [
|
|
38
|
+
"./src/**/*.{js,ts,jsx,tsx}",
|
|
39
|
+
"./node_modules/soongle-ui/dist/**/*.{js,ts,jsx,tsx}", // Add this line
|
|
40
|
+
],
|
|
41
|
+
theme: {
|
|
42
|
+
extend: {},
|
|
43
|
+
},
|
|
44
|
+
plugins: [],
|
|
45
|
+
};
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
##### For Tailwind CSS v4
|
|
49
|
+
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:
|
|
50
|
+
|
|
51
|
+
```css
|
|
52
|
+
@import "tailwindcss";
|
|
53
|
+
@source "../node_modules/soongle-ui";
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
## 📖 Usage
|
|
57
|
+
|
|
58
|
+
### Using the Text Component
|
|
22
59
|
|
|
23
60
|
```tsx
|
|
24
|
-
import {
|
|
61
|
+
import { Text } from 'soongle-ui';
|
|
25
62
|
|
|
26
63
|
function App() {
|
|
27
64
|
return (
|
|
28
|
-
<div>
|
|
29
|
-
<
|
|
65
|
+
<div className="p-8 space-y-4">
|
|
66
|
+
<Text size="5xl" weight="black" color="primary">
|
|
67
|
+
Hello Soongle!
|
|
68
|
+
</Text>
|
|
69
|
+
<Text size="base" color="muted">
|
|
70
|
+
This is a pre-styled text component using Tailwind defaults.
|
|
71
|
+
</Text>
|
|
30
72
|
</div>
|
|
31
73
|
);
|
|
32
74
|
}
|
|
33
75
|
```
|
|
34
76
|
|
|
35
|
-
##
|
|
77
|
+
## 🏗️ Available Components
|
|
78
|
+
|
|
79
|
+
| Component | Description |
|
|
80
|
+
| :--- | :--- |
|
|
81
|
+
| `Button` | Interactive button component with various variants. |
|
|
82
|
+
| `Text` | Semantic text component with support for all Tailwind font utilities. |
|
|
83
|
+
| (More coming soon...) | Stay tuned for more high-quality components. |
|
|
84
|
+
|
|
85
|
+
## 🧩 Requirements
|
|
86
|
+
|
|
87
|
+
- **React**: 18.x or 19.x
|
|
88
|
+
- **Tailwind CSS**: v4.x (The library includes styles, but works best in a Tailwind project)
|
|
36
89
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
- Tree-shakable exports
|
|
90
|
+
---
|
|
91
|
+
Developed with ❤️ 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;
|