soongle-ui 0.1.2 → 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.
Files changed (9) hide show
  1. package/README.md +64 -12
  2. package/dist/index.d.mts +12 -3
  3. package/dist/index.d.ts +12 -3
  4. package/dist/index.js +99 -5
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.mjs +99 -5
  7. package/dist/index.mjs.map +1 -1
  8. package/dist/styles.css +254 -0
  9. package/package.json +58 -51
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 with TailwindCSS.
3
+ A premium, modern design system library for React.js and Next.js, built on top of **Tailwind CSS v4**.
4
4
 
5
- ## Installation
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
- ## Usage
18
+ ## 🛠️ Setup
12
19
 
13
20
  ### 1. Import Styles
14
21
 
15
- Import the CSS file in your root layout or entry file (e.g., `_app.tsx`, `layout.tsx`, or `src/index.tsx`):
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
- ### 2. Use Components
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 { Button } from 'soongle-ui';
61
+ import { Text } from 'soongle-ui';
25
62
 
26
63
  function App() {
27
64
  return (
28
- <div>
29
- <Button>Click me</Button>
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
- ## Features
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
- - Built with React and Tailwind CSS
38
- - Fully typed with TypeScript
39
- - Tree-shakable exports
90
+ ---
91
+ Developed with ❤️ by Soongle.
package/dist/index.d.mts CHANGED
@@ -1,9 +1,18 @@
1
1
  import * as React from 'react';
2
2
 
3
- interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
4
- children: React.ReactNode;
3
+ interface ButtonProps$1 extends React.ButtonHTMLAttributes<HTMLButtonElement> {
4
+ children?: React.ReactNode;
5
+ variant?: "default" | "primary" | "secondary" | "danger" | "ghost";
6
+ size?: "sm" | "md" | "lg";
7
+ className?: string;
5
8
  }
9
+ declare const Button: React.ForwardRefExoticComponent<ButtonProps$1 & React.RefAttributes<HTMLButtonElement>>;
6
10
 
7
- declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
11
+ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
12
+ children?: React.ReactNode;
13
+ variant?: "default" | "primary" | "secondary" | "danger" | "ghost";
14
+ size?: "sm" | "md" | "lg";
15
+ className?: string;
16
+ }
8
17
 
9
18
  export { Button, type ButtonProps };
package/dist/index.d.ts CHANGED
@@ -1,9 +1,18 @@
1
1
  import * as React from 'react';
2
2
 
3
- interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
4
- children: React.ReactNode;
3
+ interface ButtonProps$1 extends React.ButtonHTMLAttributes<HTMLButtonElement> {
4
+ children?: React.ReactNode;
5
+ variant?: "default" | "primary" | "secondary" | "danger" | "ghost";
6
+ size?: "sm" | "md" | "lg";
7
+ className?: string;
5
8
  }
9
+ declare const Button: React.ForwardRefExoticComponent<ButtonProps$1 & React.RefAttributes<HTMLButtonElement>>;
6
10
 
7
- declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
11
+ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
12
+ children?: React.ReactNode;
13
+ variant?: "default" | "primary" | "secondary" | "danger" | "ghost";
14
+ size?: "sm" | "md" | "lg";
15
+ className?: string;
16
+ }
8
17
 
9
18
  export { Button, type ButtonProps };
package/dist/index.js CHANGED
@@ -36,17 +36,111 @@ __export(index_exports, {
36
36
  module.exports = __toCommonJS(index_exports);
37
37
 
38
38
  // src/components/Button/Button.tsx
39
+ var React2 = __toESM(require("react"));
40
+
41
+ // src/components/Text/Text.tsx
39
42
  var React = __toESM(require("react"));
40
43
  var import_jsx_runtime = require("react/jsx-runtime");
41
- var Button = React.forwardRef(
42
- ({ className = "", children, ...props }, ref) => {
43
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
44
+ var sizeClasses = {
45
+ xs: "text-xs",
46
+ sm: "text-sm",
47
+ base: "text-base",
48
+ lg: "text-lg",
49
+ xl: "text-xl",
50
+ "2xl": "text-2xl",
51
+ "3xl": "text-3xl",
52
+ "4xl": "text-4xl",
53
+ "5xl": "text-5xl",
54
+ "6xl": "text-6xl",
55
+ "7xl": "text-7xl",
56
+ "8xl": "text-8xl",
57
+ "9xl": "text-9xl"
58
+ };
59
+ var weightClasses = {
60
+ light: "font-light",
61
+ normal: "font-normal",
62
+ medium: "font-medium",
63
+ semibold: "font-semibold",
64
+ bold: "font-bold",
65
+ extrabold: "font-extrabold",
66
+ black: "font-black"
67
+ };
68
+ var colorClasses = {
69
+ default: "text-gray-900",
70
+ muted: "text-gray-500",
71
+ primary: "text-blue-600",
72
+ secondary: "text-green-600",
73
+ danger: "text-red-600",
74
+ success: "text-emerald-600"
75
+ };
76
+ var alignClasses = {
77
+ left: "text-left",
78
+ center: "text-center",
79
+ right: "text-right"
80
+ };
81
+ var Text = React.forwardRef(
82
+ ({
83
+ children,
84
+ as: Component = "p",
85
+ size = "base",
86
+ weight = "normal",
87
+ color = "default",
88
+ align = "left",
89
+ className = "",
90
+ ...props
91
+ }, ref) => {
92
+ const classes = [
93
+ sizeClasses[size],
94
+ weightClasses[weight],
95
+ colorClasses[color],
96
+ alignClasses[align],
97
+ className
98
+ ].filter(Boolean).join(" ");
99
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ref, className: classes, ...props, children });
100
+ }
101
+ );
102
+ Text.displayName = "Text";
103
+
104
+ // src/components/Button/Button.tsx
105
+ var import_jsx_runtime2 = require("react/jsx-runtime");
106
+ var variantClasses = {
107
+ default: "bg-gray-200 text-gray-900 hover:bg-gray-300",
108
+ primary: "bg-blue-600 text-white hover:bg-blue-700",
109
+ secondary: "bg-green-600 text-white hover:bg-green-700",
110
+ danger: "bg-red-600 text-white hover:bg-red-700",
111
+ ghost: "bg-transparent text-gray-700 hover:bg-gray-100"
112
+ };
113
+ var sizeClasses2 = {
114
+ sm: "px-3 py-1.5",
115
+ md: "px-4 py-2",
116
+ lg: "px-6 py-3"
117
+ };
118
+ var textSizeMap = {
119
+ sm: "sm",
120
+ md: "base",
121
+ lg: "lg"
122
+ };
123
+ var Button = React2.forwardRef(
124
+ ({ className = "", children, variant = "default", size = "md", ...props }, ref) => {
125
+ const variantClass = variantClasses[variant];
126
+ const sizeClass = sizeClasses2[size];
127
+ const textSize = textSizeMap[size];
128
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
44
129
  "button",
45
130
  {
46
131
  ref,
47
- className: `cursor-pointer inline-flex items-center justify-center rounded-md px-4 py-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ${className}`,
132
+ 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}`,
48
133
  ...props,
49
- children
134
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
135
+ Text,
136
+ {
137
+ as: "span",
138
+ size: textSize,
139
+ weight: "medium",
140
+ className: "leading-none",
141
+ children
142
+ }
143
+ )
50
144
  }
51
145
  );
52
146
  }
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts","../src/components/Button/Button.tsx"],"sourcesContent":["// Export components\r\nexport * from './components';\r\n","import * as React from 'react';\r\nimport { ButtonProps } from './types';\r\n\r\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n ({ className = '', children, ...props }, ref) => {\r\n return (\r\n <button \r\n ref={ref} \r\n className={`cursor-pointer inline-flex items-center justify-center rounded-md px-4 py-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ${className}`}\r\n {...props}\r\n >\r\n {children}\r\n </button>\r\n );\r\n }\r\n);\r\n\r\nButton.displayName = 'Button';\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AAMjB;AAHC,IAAM,SAAe;AAAA,EAC1B,CAAC,EAAE,YAAY,IAAI,UAAU,GAAG,MAAM,GAAG,QAAQ;AAC/C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,0OAA0O,SAAS;AAAA,QAC7P,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;","names":[]}
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
@@ -1,17 +1,111 @@
1
1
  "use client";
2
2
 
3
3
  // src/components/Button/Button.tsx
4
+ import * as React2 from "react";
5
+
6
+ // src/components/Text/Text.tsx
4
7
  import * as React from "react";
5
8
  import { jsx } from "react/jsx-runtime";
6
- var Button = React.forwardRef(
7
- ({ className = "", children, ...props }, ref) => {
8
- return /* @__PURE__ */ jsx(
9
+ var sizeClasses = {
10
+ xs: "text-xs",
11
+ sm: "text-sm",
12
+ base: "text-base",
13
+ lg: "text-lg",
14
+ xl: "text-xl",
15
+ "2xl": "text-2xl",
16
+ "3xl": "text-3xl",
17
+ "4xl": "text-4xl",
18
+ "5xl": "text-5xl",
19
+ "6xl": "text-6xl",
20
+ "7xl": "text-7xl",
21
+ "8xl": "text-8xl",
22
+ "9xl": "text-9xl"
23
+ };
24
+ var weightClasses = {
25
+ light: "font-light",
26
+ normal: "font-normal",
27
+ medium: "font-medium",
28
+ semibold: "font-semibold",
29
+ bold: "font-bold",
30
+ extrabold: "font-extrabold",
31
+ black: "font-black"
32
+ };
33
+ var colorClasses = {
34
+ default: "text-gray-900",
35
+ muted: "text-gray-500",
36
+ primary: "text-blue-600",
37
+ secondary: "text-green-600",
38
+ danger: "text-red-600",
39
+ success: "text-emerald-600"
40
+ };
41
+ var alignClasses = {
42
+ left: "text-left",
43
+ center: "text-center",
44
+ right: "text-right"
45
+ };
46
+ var Text = React.forwardRef(
47
+ ({
48
+ children,
49
+ as: Component = "p",
50
+ size = "base",
51
+ weight = "normal",
52
+ color = "default",
53
+ align = "left",
54
+ className = "",
55
+ ...props
56
+ }, ref) => {
57
+ const classes = [
58
+ sizeClasses[size],
59
+ weightClasses[weight],
60
+ colorClasses[color],
61
+ alignClasses[align],
62
+ className
63
+ ].filter(Boolean).join(" ");
64
+ return /* @__PURE__ */ jsx(Component, { ref, className: classes, ...props, children });
65
+ }
66
+ );
67
+ Text.displayName = "Text";
68
+
69
+ // src/components/Button/Button.tsx
70
+ import { jsx as jsx2 } from "react/jsx-runtime";
71
+ var variantClasses = {
72
+ default: "bg-gray-200 text-gray-900 hover:bg-gray-300",
73
+ primary: "bg-blue-600 text-white hover:bg-blue-700",
74
+ secondary: "bg-green-600 text-white hover:bg-green-700",
75
+ danger: "bg-red-600 text-white hover:bg-red-700",
76
+ ghost: "bg-transparent text-gray-700 hover:bg-gray-100"
77
+ };
78
+ var sizeClasses2 = {
79
+ sm: "px-3 py-1.5",
80
+ md: "px-4 py-2",
81
+ lg: "px-6 py-3"
82
+ };
83
+ var textSizeMap = {
84
+ sm: "sm",
85
+ md: "base",
86
+ lg: "lg"
87
+ };
88
+ var Button = React2.forwardRef(
89
+ ({ className = "", children, variant = "default", size = "md", ...props }, ref) => {
90
+ const variantClass = variantClasses[variant];
91
+ const sizeClass = sizeClasses2[size];
92
+ const textSize = textSizeMap[size];
93
+ return /* @__PURE__ */ jsx2(
9
94
  "button",
10
95
  {
11
96
  ref,
12
- className: `cursor-pointer inline-flex items-center justify-center rounded-md px-4 py-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ${className}`,
97
+ 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}`,
13
98
  ...props,
14
- children
99
+ children: /* @__PURE__ */ jsx2(
100
+ Text,
101
+ {
102
+ as: "span",
103
+ size: textSize,
104
+ weight: "medium",
105
+ className: "leading-none",
106
+ children
107
+ }
108
+ )
15
109
  }
16
110
  );
17
111
  }
package/dist/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport { ButtonProps } from './types';\r\n\r\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n ({ className = '', children, ...props }, ref) => {\r\n return (\r\n <button \r\n ref={ref} \r\n className={`cursor-pointer inline-flex items-center justify-center rounded-md px-4 py-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ${className}`}\r\n {...props}\r\n >\r\n {children}\r\n </button>\r\n );\r\n }\r\n);\r\n\r\nButton.displayName = 'Button';\r\n"],"mappings":";;;AAAA,YAAY,WAAW;AAMjB;AAHC,IAAM,SAAe;AAAA,EAC1B,CAAC,EAAE,YAAY,IAAI,UAAU,GAAG,MAAM,GAAG,QAAQ;AAC/C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,0OAA0O,SAAS;AAAA,QAC7P,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;","names":[]}
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
@@ -7,8 +7,54 @@
7
7
  "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
8
8
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
9
9
  "Courier New", monospace;
10
+ --color-red-600: oklch(57.7% 0.245 27.325);
11
+ --color-red-700: oklch(50.5% 0.213 27.518);
12
+ --color-green-600: oklch(62.7% 0.194 149.214);
13
+ --color-green-700: oklch(52.7% 0.154 150.069);
14
+ --color-emerald-600: oklch(59.6% 0.145 163.225);
15
+ --color-blue-600: oklch(54.6% 0.245 262.881);
16
+ --color-blue-700: oklch(48.8% 0.243 264.376);
17
+ --color-gray-100: oklch(96.7% 0.003 264.542);
18
+ --color-gray-200: oklch(92.8% 0.006 264.531);
19
+ --color-gray-300: oklch(87.2% 0.01 258.338);
20
+ --color-gray-500: oklch(55.1% 0.027 264.364);
21
+ --color-gray-700: oklch(37.3% 0.034 259.733);
22
+ --color-gray-900: oklch(21% 0.034 264.665);
23
+ --color-white: #fff;
10
24
  --spacing: 0.25rem;
25
+ --text-xs: 0.75rem;
26
+ --text-xs--line-height: calc(1 / 0.75);
27
+ --text-sm: 0.875rem;
28
+ --text-sm--line-height: calc(1.25 / 0.875);
29
+ --text-base: 1rem;
30
+ --text-base--line-height: calc(1.5 / 1);
31
+ --text-lg: 1.125rem;
32
+ --text-lg--line-height: calc(1.75 / 1.125);
33
+ --text-xl: 1.25rem;
34
+ --text-xl--line-height: calc(1.75 / 1.25);
35
+ --text-2xl: 1.5rem;
36
+ --text-2xl--line-height: calc(2 / 1.5);
37
+ --text-3xl: 1.875rem;
38
+ --text-3xl--line-height: calc(2.25 / 1.875);
39
+ --text-4xl: 2.25rem;
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;
51
+ --font-weight-light: 300;
52
+ --font-weight-normal: 400;
11
53
  --font-weight-medium: 500;
54
+ --font-weight-semibold: 600;
55
+ --font-weight-bold: 700;
56
+ --font-weight-extrabold: 800;
57
+ --font-weight-black: 900;
12
58
  --radius-md: 0.375rem;
13
59
  --default-transition-duration: 150ms;
14
60
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -165,36 +211,233 @@
165
211
  }
166
212
  }
167
213
  @layer utilities {
214
+ .flex {
215
+ display: flex;
216
+ }
168
217
  .inline-flex {
169
218
  display: inline-flex;
170
219
  }
171
220
  .cursor-pointer {
172
221
  cursor: pointer;
173
222
  }
223
+ .flex-col {
224
+ flex-direction: column;
225
+ }
174
226
  .items-center {
175
227
  align-items: center;
176
228
  }
177
229
  .justify-center {
178
230
  justify-content: center;
179
231
  }
232
+ .gap-2 {
233
+ gap: calc(var(--spacing) * 2);
234
+ }
235
+ .gap-4 {
236
+ gap: calc(var(--spacing) * 4);
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
+ }
180
245
  .rounded-md {
181
246
  border-radius: var(--radius-md);
182
247
  }
248
+ .bg-blue-600 {
249
+ background-color: var(--color-blue-600);
250
+ }
251
+ .bg-gray-200 {
252
+ background-color: var(--color-gray-200);
253
+ }
254
+ .bg-green-600 {
255
+ background-color: var(--color-green-600);
256
+ }
257
+ .bg-red-600 {
258
+ background-color: var(--color-red-600);
259
+ }
260
+ .bg-transparent {
261
+ background-color: transparent;
262
+ }
263
+ .p-8 {
264
+ padding: calc(var(--spacing) * 8);
265
+ }
266
+ .px-3 {
267
+ padding-inline: calc(var(--spacing) * 3);
268
+ }
183
269
  .px-4 {
184
270
  padding-inline: calc(var(--spacing) * 4);
185
271
  }
272
+ .px-6 {
273
+ padding-inline: calc(var(--spacing) * 6);
274
+ }
275
+ .py-1\.5 {
276
+ padding-block: calc(var(--spacing) * 1.5);
277
+ }
186
278
  .py-2 {
187
279
  padding-block: calc(var(--spacing) * 2);
188
280
  }
281
+ .py-3 {
282
+ padding-block: calc(var(--spacing) * 3);
283
+ }
284
+ .text-center {
285
+ text-align: center;
286
+ }
287
+ .text-left {
288
+ text-align: left;
289
+ }
290
+ .text-right {
291
+ text-align: right;
292
+ }
293
+ .text-2xl {
294
+ font-size: var(--text-2xl);
295
+ line-height: var(--tw-leading, var(--text-2xl--line-height));
296
+ }
297
+ .text-3xl {
298
+ font-size: var(--text-3xl);
299
+ line-height: var(--tw-leading, var(--text-3xl--line-height));
300
+ }
301
+ .text-4xl {
302
+ font-size: var(--text-4xl);
303
+ line-height: var(--tw-leading, var(--text-4xl--line-height));
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
+ }
325
+ .text-base {
326
+ font-size: var(--text-base);
327
+ line-height: var(--tw-leading, var(--text-base--line-height));
328
+ }
329
+ .text-lg {
330
+ font-size: var(--text-lg);
331
+ line-height: var(--tw-leading, var(--text-lg--line-height));
332
+ }
333
+ .text-sm {
334
+ font-size: var(--text-sm);
335
+ line-height: var(--tw-leading, var(--text-sm--line-height));
336
+ }
337
+ .text-xl {
338
+ font-size: var(--text-xl);
339
+ line-height: var(--tw-leading, var(--text-xl--line-height));
340
+ }
341
+ .text-xs {
342
+ font-size: var(--text-xs);
343
+ line-height: var(--tw-leading, var(--text-xs--line-height));
344
+ }
345
+ .leading-none {
346
+ --tw-leading: 1;
347
+ line-height: 1;
348
+ }
349
+ .font-black {
350
+ --tw-font-weight: var(--font-weight-black);
351
+ font-weight: var(--font-weight-black);
352
+ }
353
+ .font-bold {
354
+ --tw-font-weight: var(--font-weight-bold);
355
+ font-weight: var(--font-weight-bold);
356
+ }
357
+ .font-extrabold {
358
+ --tw-font-weight: var(--font-weight-extrabold);
359
+ font-weight: var(--font-weight-extrabold);
360
+ }
361
+ .font-light {
362
+ --tw-font-weight: var(--font-weight-light);
363
+ font-weight: var(--font-weight-light);
364
+ }
189
365
  .font-medium {
190
366
  --tw-font-weight: var(--font-weight-medium);
191
367
  font-weight: var(--font-weight-medium);
192
368
  }
369
+ .font-normal {
370
+ --tw-font-weight: var(--font-weight-normal);
371
+ font-weight: var(--font-weight-normal);
372
+ }
373
+ .font-semibold {
374
+ --tw-font-weight: var(--font-weight-semibold);
375
+ font-weight: var(--font-weight-semibold);
376
+ }
377
+ .text-blue-600 {
378
+ color: var(--color-blue-600);
379
+ }
380
+ .text-emerald-600 {
381
+ color: var(--color-emerald-600);
382
+ }
383
+ .text-gray-500 {
384
+ color: var(--color-gray-500);
385
+ }
386
+ .text-gray-700 {
387
+ color: var(--color-gray-700);
388
+ }
389
+ .text-gray-900 {
390
+ color: var(--color-gray-900);
391
+ }
392
+ .text-green-600 {
393
+ color: var(--color-green-600);
394
+ }
395
+ .text-red-600 {
396
+ color: var(--color-red-600);
397
+ }
398
+ .text-white {
399
+ color: var(--color-white);
400
+ }
193
401
  .transition-colors {
194
402
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
195
403
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
196
404
  transition-duration: var(--tw-duration, var(--default-transition-duration));
197
405
  }
406
+ .hover\:bg-blue-700 {
407
+ &:hover {
408
+ @media (hover: hover) {
409
+ background-color: var(--color-blue-700);
410
+ }
411
+ }
412
+ }
413
+ .hover\:bg-gray-100 {
414
+ &:hover {
415
+ @media (hover: hover) {
416
+ background-color: var(--color-gray-100);
417
+ }
418
+ }
419
+ }
420
+ .hover\:bg-gray-300 {
421
+ &:hover {
422
+ @media (hover: hover) {
423
+ background-color: var(--color-gray-300);
424
+ }
425
+ }
426
+ }
427
+ .hover\:bg-green-700 {
428
+ &:hover {
429
+ @media (hover: hover) {
430
+ background-color: var(--color-green-700);
431
+ }
432
+ }
433
+ }
434
+ .hover\:bg-red-700 {
435
+ &:hover {
436
+ @media (hover: hover) {
437
+ background-color: var(--color-red-700);
438
+ }
439
+ }
440
+ }
198
441
  .focus-visible\:ring-2 {
199
442
  &:focus-visible {
200
443
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -224,6 +467,15 @@
224
467
  }
225
468
  }
226
469
  }
470
+ @property --tw-space-y-reverse {
471
+ syntax: "*";
472
+ inherits: false;
473
+ initial-value: 0;
474
+ }
475
+ @property --tw-leading {
476
+ syntax: "*";
477
+ inherits: false;
478
+ }
227
479
  @property --tw-font-weight {
228
480
  syntax: "*";
229
481
  inherits: false;
@@ -296,6 +548,8 @@
296
548
  @layer properties {
297
549
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
298
550
  *, ::before, ::after, ::backdrop {
551
+ --tw-space-y-reverse: 0;
552
+ --tw-leading: initial;
299
553
  --tw-font-weight: initial;
300
554
  --tw-shadow: 0 0 #0000;
301
555
  --tw-shadow-color: initial;
package/package.json CHANGED
@@ -1,51 +1,58 @@
1
- {
2
- "name": "soongle-ui",
3
- "version": "0.1.2",
4
- "description": "A design system library for React.js and Next.js with TailwindCSS v4 by Soongle",
5
- "publishConfig": {
6
- "access": "public"
7
- },
8
- "main": "./dist/index.js",
9
- "module": "./dist/index.mjs",
10
- "types": "./dist/index.d.ts",
11
- "exports": {
12
- ".": {
13
- "types": "./dist/index.d.ts",
14
- "import": "./dist/index.mjs",
15
- "require": "./dist/index.js"
16
- },
17
- "./styles.css": "./dist/styles.css"
18
- },
19
- "files": [
20
- "dist"
21
- ],
22
- "scripts": {
23
- "build": "tsup && npm run build:css",
24
- "build:css": "npx @tailwindcss/cli -i ./src/styles.css -o ./dist/styles.css",
25
- "dev": "tsup --watch",
26
- "type-check": "tsc --noEmit"
27
- },
28
- "keywords": [
29
- "design-system",
30
- "react",
31
- "nextjs",
32
- "tailwindcss",
33
- "ui-library"
34
- ],
35
- "author": "",
36
- "license": "MIT",
37
- "peerDependencies": {
38
- "react": "^18.0.0 || ^19.0.0",
39
- "react-dom": "^18.0.0 || ^19.0.0"
40
- },
41
- "devDependencies": {
42
- "@tailwindcss/cli": "^4.1.18",
43
- "@types/react": "^18.2.48",
44
- "@types/react-dom": "^18.2.18",
45
- "react": "^18.2.0",
46
- "react-dom": "^18.2.0",
47
- "tailwindcss": "^4.0.0",
48
- "tsup": "^8.0.1",
49
- "typescript": "^5.3.3"
50
- }
51
- }
1
+ {
2
+ "name": "soongle-ui",
3
+ "version": "0.1.4",
4
+ "description": "A design system library for React.js and Next.js with TailwindCSS v4 by Soongle",
5
+ "publishConfig": {
6
+ "access": "public"
7
+ },
8
+ "main": "./dist/index.js",
9
+ "module": "./dist/index.mjs",
10
+ "types": "./dist/index.d.ts",
11
+ "exports": {
12
+ ".": {
13
+ "types": "./dist/index.d.ts",
14
+ "import": "./dist/index.mjs",
15
+ "require": "./dist/index.js"
16
+ },
17
+ "./styles.css": "./dist/styles.css"
18
+ },
19
+ "files": [
20
+ "dist"
21
+ ],
22
+ "scripts": {
23
+ "build": "tsup && npm run build:css",
24
+ "build:css": "npx @tailwindcss/cli -i ./src/styles.css -o ./dist/styles.css",
25
+ "dev": "tsup --watch",
26
+ "type-check": "tsc --noEmit",
27
+ "storybook": "storybook dev -p 6006",
28
+ "build-storybook": "storybook build"
29
+ },
30
+ "keywords": [
31
+ "design-system",
32
+ "react",
33
+ "nextjs",
34
+ "tailwindcss",
35
+ "ui-library"
36
+ ],
37
+ "author": "",
38
+ "license": "MIT",
39
+ "peerDependencies": {
40
+ "react": "^18.0.0 || ^19.0.0",
41
+ "react-dom": "^18.0.0 || ^19.0.0"
42
+ },
43
+ "devDependencies": {
44
+ "@storybook/react-vite": "^10.1.11",
45
+ "@tailwindcss/cli": "^4.1.18",
46
+ "@tailwindcss/vite": "^4.1.18",
47
+ "@types/react": "^18.2.48",
48
+ "@types/react-dom": "^18.2.18",
49
+ "@vitejs/plugin-react": "^5.1.2",
50
+ "react": "^18.2.0",
51
+ "react-dom": "^18.2.0",
52
+ "storybook": "^10.1.11",
53
+ "tailwindcss": "^4.0.0",
54
+ "tsup": "^8.0.1",
55
+ "typescript": "^5.3.3",
56
+ "vite": "^7.3.0"
57
+ }
58
+ }