soongle-ui 0.1.5 → 0.1.7

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 (8) hide show
  1. package/README.ko.md +56 -43
  2. package/README.md +54 -41
  3. package/dist/index.js +1 -152
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +1 -116
  6. package/dist/index.mjs.map +1 -1
  7. package/dist/styles.css +1 -569
  8. package/package.json +3 -2
package/README.ko.md CHANGED
@@ -1,93 +1,106 @@
1
1
  # soongle-ui
2
2
 
3
- **Tailwind CSS v4**를 기반으로 한 React.js 및 Next.js용 프리미엄 현대적 디자인 시스템 라이브러리입니다.
3
+ **Tailwind CSS v4**를 기반으로 한 React.js 및 Next.js용 현대적 디자인 시스템 라이브러리입니다.
4
4
 
5
- 다른 언어로 보기: [English](README.md), [한국어](README.ko.md)
5
+ 다른 언어로 보기: [English](https://github.com/s00ngle/soongle-ui/blob/master/README.md) | [한국어](https://github.com/s00ngle/soongle-ui/blob/master/README.ko.md)
6
6
 
7
- ## ✨ 특징
7
+ ---
8
+
9
+ ## ✨ 주요 특징
10
+
11
+ - 🎨 **Utility-First**: Tailwind CSS v4의 성능과 유연성을 그대로 활용합니다.
12
+ - 🛠️ **Type-Safe**: TypeScript로 작성되어 완벽한 타입 추론과 자동 완성을 지원합니다.
13
+ - 📦 **최적화된 배포**: Tree-shaking 및 Minification이 적용되어 번들 크기를 최소화합니다.
14
+ - 🚀 **프레임워크 최적화**: Next.js(App Router), Vite 등 현대적인 환경에 최적화되어 설계되었습니다.
8
15
 
9
- - 🎨 **Utility-First**: Tailwind CSS v4를 활용한 최상의 유연성.
10
- - 🛠️ **Type-Safe**: TypeScript로 작성되어 완벽한 IntelliSense 지원.
11
- - 📦 **Tree-Shakable**: 실제로 사용하는 컴포넌트만 번들에 포함.
12
- - 🚀 **Next.js 최적화**: 서버 컴포넌트 및 SSR을 고려하여 설계됨.
16
+ ## 🚀 설치 방법
13
17
 
14
- ## 🚀 설치
18
+ 원하시는 패키지 매니저를 통해 설치하세요:
15
19
 
16
20
  ```bash
21
+ # npm
17
22
  npm install soongle-ui
23
+
24
+ # yarn
25
+ yarn add soongle-ui
26
+
27
+ # pnpm
28
+ pnpm add soongle-ui
18
29
  ```
19
30
 
20
- ## 🛠️ 설정
31
+ ## 🛠️ 설정 가이드
21
32
 
22
- ### 1. 스타일 임포트
33
+ 프로젝트 환경에 따라 스타일을 올바르게 적용하기 위해 아래 가이드를 확인하세요.
23
34
 
24
- 프로젝트에서 Tailwind CSS를 **사용하지 않는** 경우, 루트 엔트리 파일(예: Next.js의 `app/layout.tsx` 또는 Vite의 `src/main.tsx`)에서 라이브러리의 스타일시트를 임포트해야 합니다.
35
+ ### Case 1: 일반 프로젝트 (Tailwind를 사용하지 않는 경우)
36
+
37
+ 기본적으로 라이브러리에서 제공하는 미리 빌드된 스타일시트를 루트 파일에서 임포트해야 합니다.
25
38
 
26
39
  ```tsx
40
+ // Next.js (app/layout.tsx) 또는 Vite (src/main.tsx) 등
27
41
  import 'soongle-ui/styles.css';
28
42
  ```
29
43
 
30
- #### 💡 이미 Tailwind CSS를 사용 중인 경우
44
+ ### Case 2: Tailwind CSS를 이미 사용 중인 경우 (권장)
45
+
46
+ 이미 프로젝트에 Tailwind가 설치되어 있다면 `soongle-ui/styles.css`를 **임포트하지 마세요.** 대신 사용자의 Tailwind 설정에 라이브러리 경로를 추가하여 스타일 중복을 방지하고 최적화된 테마를 공유할 수 있습니다.
31
47
 
32
- 이미 프로젝트에 Tailwind CSS가 설치되어 있다면, `soongle-ui/styles.css`를 **임포트하지 마세요.** 대신, 스타일 중복을 방지하고 번들 크기를 최적화하기 위해 Tailwind 설정에 라이브러리의 컴포넌트 경로를 추가하세요.
48
+ #### Tailwind CSS v4 사용 시
49
+ v4는 자동으로 모듈을 스캔합니다. 루트 CSS 파일에 아래와 같이 `@source` 지시어를 추가하세요:
50
+
51
+ ```css
52
+ @import "tailwindcss";
53
+ @source "../node_modules/soongle-ui";
54
+ ```
33
55
 
34
- ##### Tailwind CSS v3 (`tailwind.config.ts`) 사용 시
35
- `content` 배열에 `soongle-ui` 배포 경로를 추가합니다:
56
+ #### Tailwind CSS v3 (`tailwind.config.ts`) 사용 시
57
+ `content` 배열에 라이브러리 배포 경로를 추가합니다:
36
58
 
37
59
  ```ts
38
60
  export default {
39
61
  content: [
40
62
  "./src/**/*.{js,ts,jsx,tsx}",
41
- "./node_modules/soongle-ui/dist/**/*.{js,ts,jsx,tsx}", // 이 라인 추가
63
+ "./node_modules/soongle-ui/dist/**/*.{js,ts,jsx,tsx}",
42
64
  ],
43
- theme: {
44
- extend: {},
45
- },
46
- plugins: [],
65
+ // ...
47
66
  };
48
67
  ```
49
68
 
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
- ## 📖 사용 방법
69
+ ## 📖 사용 예시
59
70
 
60
- ### Text 컴포넌트 사용 예시
71
+ ### Text 컴포넌트
72
+ `Text` 컴포넌트는 Tailwind의 모든 폰트 유틸리티를 타입 기반으로 편리하게 사용할 수 있게 해줍니다.
61
73
 
62
74
  ```tsx
63
75
  import { Text } from 'soongle-ui';
64
76
 
65
- function App() {
77
+ function Example() {
66
78
  return (
67
- <div className="p-8 space-y-4">
79
+ <div className="flex flex-col gap-4">
68
80
  <Text size="5xl" weight="black" color="primary">
69
- 안녕하세요 Soongle!
81
+ Soongle UI로 현대적인 웹 개발하기
70
82
  </Text>
71
83
  <Text size="base" color="muted">
72
- Tailwind 기본값을 사용하는 미리 스타일링된 텍스트 컴포넌트입니다.
84
+ 미리 스타일링된 컴포넌트로 더 빠르게 인터페이스를 구축하세요.
73
85
  </Text>
74
86
  </div>
75
87
  );
76
88
  }
77
89
  ```
78
90
 
79
- ## 🏗️ 제공되는 컴포넌트
91
+ ## 🏗️ 컴포넌트 로드맵
80
92
 
81
- | 컴포넌트 | 설명 |
82
- | :--- | :--- |
83
- | `Button` | 다양한 배리언트를 지원하는 인터랙티브 버튼 컴포넌트. |
84
- | `Text` | 모든 Tailwind 폰트 유틸리티를 지원하는 시맨틱 텍스트 컴포넌트. |
85
- | (추가 예정...) | 더 많은 고품질 컴포넌트가 곧 추가될 예정입니다. |
93
+ | 컴포넌트 | 상태 | 설명 |
94
+ | :--- | :---: | :--- |
95
+ | `Button` | ✅ | 다양한 스타일과 로딩 상태를 지원하는 버튼. |
96
+ | `Text` | ✅ | Tailwind 유틸리티를 완벽히 지원하는 시맨틱 타이포그래피. |
97
+ | `Input` | ⏳ | 접근성이 고려된 유효성 검사 지원 입력창. |
98
+ | `Card` | ⏳ | 다양한 콘텐츠 레이아웃을 위한 유연한 컨테이너. |
86
99
 
87
100
  ## 🧩 요구 사항
88
101
 
89
- - **React**: 18.x 또는 19.x
90
- - **Tailwind CSS**: v4.x (라이브러리에 스타일이 포함되어 있지만, Tailwind 프로젝트에서 가장 잘 작동합니다)
102
+ - **React**: `^18.0.0` 또는 `^19.0.0`
103
+ - **Tailwind CSS**: `v4.x` 권장 (`v3.x` 호환 가능)
91
104
 
92
105
  ---
93
- Developed by Soongle.
106
+ **Soongle**이 개발하고 관리합니다.
package/README.md CHANGED
@@ -1,93 +1,106 @@
1
1
  # soongle-ui
2
2
 
3
- A premium, modern design system library for React.js and Next.js, built on top of **Tailwind CSS v4**.
3
+ A modern design system library for React.js and Next.js, built on top of **Tailwind CSS v4**.
4
4
 
5
- Read this in other languages: [English](README.md), [한국어](README.ko.md)
5
+ Read this in other languages: [English](https://github.com/s00ngle/soongle-ui/blob/master/README.md) | [한국어](https://github.com/s00ngle/soongle-ui/blob/master/README.ko.md)
6
+
7
+ ---
6
8
 
7
9
  ## ✨ Features
8
10
 
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.
11
+ - 🎨 **Utility-First**: Powered by Tailwind CSS v4 for ultimate flexibility and performance.
12
+ - 🛠️ **Type-Safe**: Fully written in TypeScript with comprehensive IntelliSense support.
13
+ - 📦 **Minimal Footprint**: Optimized with Tree-shaking and Minification to keep your bundle light.
14
+ - 🚀 **Framework Ready**: Seamless integration with Next.js (App Router), Vite, and more.
13
15
 
14
16
  ## 🚀 Installation
15
17
 
18
+ Install the package via your favorite package manager:
19
+
16
20
  ```bash
21
+ # npm
17
22
  npm install soongle-ui
23
+
24
+ # yarn
25
+ yarn add soongle-ui
26
+
27
+ # pnpm
28
+ pnpm add soongle-ui
18
29
  ```
19
30
 
20
- ## 🛠️ Setup
31
+ ## 🛠️ Setup Guide
21
32
 
22
- ### 1. Import Styles
33
+ To ensure components are styled correctly, follow the setup guide based on your project configuration.
23
34
 
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).
35
+ ### Case 1: Standard Project (No Tailwind)
36
+
37
+ If you are **not** using Tailwind CSS in your project, import the pre-compiled stylesheet in your root entry file:
25
38
 
26
39
  ```tsx
40
+ // For Next.js (app/layout.tsx) or Vite (src/main.tsx)
27
41
  import 'soongle-ui/styles.css';
28
42
  ```
29
43
 
30
- #### 💡 If you are already using Tailwind CSS
44
+ ### Case 2: Tailwind CSS Project (Recommended)
45
+
46
+ If your project already uses Tailwind CSS, **do not** import `soongle-ui/styles.css`. Instead, include the library in your Tailwind configuration to leverage shared theme tokens and avoid duplicate styles.
31
47
 
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.
48
+ #### For Tailwind CSS v4
49
+ Tailwind v4 scans your modules automatically. Simply ensure your root CSS file includes the `@source` directive:
50
+
51
+ ```css
52
+ @import "tailwindcss";
53
+ @source "../node_modules/soongle-ui";
54
+ ```
33
55
 
34
- ##### For Tailwind CSS v3 (`tailwind.config.ts`)
35
- Add the `soongle-ui` distribution path to the `content` array:
56
+ #### For Tailwind CSS v3 (`tailwind.config.ts`)
57
+ Add the library path to your `content` array:
36
58
 
37
59
  ```ts
38
60
  export default {
39
61
  content: [
40
62
  "./src/**/*.{js,ts,jsx,tsx}",
41
- "./node_modules/soongle-ui/dist/**/*.{js,ts,jsx,tsx}", // Add this line
63
+ "./node_modules/soongle-ui/dist/**/*.{js,ts,jsx,tsx}",
42
64
  ],
43
- theme: {
44
- extend: {},
45
- },
46
- plugins: [],
65
+ // ...
47
66
  };
48
67
  ```
49
68
 
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
69
+ ## 📖 Component Usage
59
70
 
60
- ### Using the Text Component
71
+ ### Text Component
72
+ The `Text` component supports various sizes, weights, and colors derived from Tailwind defaults.
61
73
 
62
74
  ```tsx
63
75
  import { Text } from 'soongle-ui';
64
76
 
65
- function App() {
77
+ function Example() {
66
78
  return (
67
- <div className="p-8 space-y-4">
79
+ <div className="flex flex-col gap-4">
68
80
  <Text size="5xl" weight="black" color="primary">
69
- Hello Soongle!
81
+ Modern UI with Soongle
70
82
  </Text>
71
83
  <Text size="base" color="muted">
72
- This is a pre-styled text component using Tailwind defaults.
84
+ Build beautiful interfaces faster with pre-styled components.
73
85
  </Text>
74
86
  </div>
75
87
  );
76
88
  }
77
89
  ```
78
90
 
79
- ## 🏗️ Available Components
91
+ ## 🏗️ Roadmap
80
92
 
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. |
93
+ | Component | Status | Description |
94
+ | :--- | :---: | :--- |
95
+ | `Button` | ✅ | Primary, Secondary, and Ghost variants with loading states. |
96
+ | `Text` | ✅ | Semantic typography with full Tailwind utility support. |
97
+ | `Input` | ⏳ | Accessible form inputs and validations. |
98
+ | `Card` | ⏳ | Flexible container for diverse content layouts. |
86
99
 
87
100
  ## 🧩 Requirements
88
101
 
89
- - **React**: 18.x or 19.x
90
- - **Tailwind CSS**: v4.x (The library includes styles, but works best in a Tailwind project)
102
+ - **React**: `^18.0.0` or `^19.0.0`
103
+ - **Tailwind CSS**: `v4.x` recommended (compatible with `v3.x`)
91
104
 
92
105
  ---
93
- Developed by Soongle.
106
+ Developed by **Soongle**.
package/dist/index.js CHANGED
@@ -1,153 +1,2 @@
1
- "use client";
2
- "use strict";
3
- var __create = Object.create;
4
- var __defProp = Object.defineProperty;
5
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
6
- var __getOwnPropNames = Object.getOwnPropertyNames;
7
- var __getProtoOf = Object.getPrototypeOf;
8
- var __hasOwnProp = Object.prototype.hasOwnProperty;
9
- var __export = (target, all) => {
10
- for (var name in all)
11
- __defProp(target, name, { get: all[name], enumerable: true });
12
- };
13
- var __copyProps = (to, from, except, desc) => {
14
- if (from && typeof from === "object" || typeof from === "function") {
15
- for (let key of __getOwnPropNames(from))
16
- if (!__hasOwnProp.call(to, key) && key !== except)
17
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
18
- }
19
- return to;
20
- };
21
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
22
- // If the importer is in node compatibility mode or this is not an ESM
23
- // file that has been converted to a CommonJS file using a Babel-
24
- // compatible transform (i.e. "__esModule" has not been set), then set
25
- // "default" to the CommonJS "module.exports" for node compatibility.
26
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
27
- mod
28
- ));
29
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
30
-
31
- // src/index.ts
32
- var index_exports = {};
33
- __export(index_exports, {
34
- Button: () => Button
35
- });
36
- module.exports = __toCommonJS(index_exports);
37
-
38
- // src/components/Button/Button.tsx
39
- var React2 = __toESM(require("react"));
40
-
41
- // src/components/Text/Text.tsx
42
- var React = __toESM(require("react"));
43
- var import_jsx_runtime = require("react/jsx-runtime");
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)(
129
- "button",
130
- {
131
- ref,
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}`,
133
- ...props,
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
- )
144
- }
145
- );
146
- }
147
- );
148
- Button.displayName = "Button";
149
- // Annotate the CommonJS export names for ESM import in node:
150
- 0 && (module.exports = {
151
- Button
152
- });
1
+ 'use strict';var m=require('react'),jsxRuntime=require('react/jsx-runtime');function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var m__namespace=/*#__PURE__*/_interopNamespace(m);var p={xs:"text-xs",sm:"text-sm",base:"text-base",lg:"text-lg",xl:"text-xl","2xl":"text-2xl","3xl":"text-3xl","4xl":"text-4xl","5xl":"text-5xl","6xl":"text-6xl","7xl":"text-7xl","8xl":"text-8xl","9xl":"text-9xl"},u={light:"font-light",normal:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold",extrabold:"font-extrabold",black:"font-black"},b={default:"text-gray-900",muted:"text-gray-500",primary:"text-blue-600",secondary:"text-green-600",danger:"text-red-600",success:"text-emerald-600"},h={left:"text-left",center:"text-center",right:"text-right"},i=m__namespace.forwardRef(({children:e,as:s="p",size:o="base",weight:t="normal",color:a="default",align:r="left",className:l="",...n},x)=>{let f=[p[o],u[t],b[a],h[r],l].filter(Boolean).join(" ");return jsxRuntime.jsx(s,{ref:x,className:f,...n,children:e})});i.displayName="Text";var v={default:"bg-gray-200 text-gray-900 hover:bg-gray-300",primary:"bg-blue-600 text-white hover:bg-blue-700",secondary:"bg-green-600 text-white hover:bg-green-700",danger:"bg-red-600 text-white hover:bg-red-700",ghost:"bg-transparent text-gray-700 hover:bg-gray-100"},B={sm:"px-3 py-1.5",md:"px-4 py-2",lg:"px-6 py-3"},R={sm:"sm",md:"base",lg:"lg"},c=m__namespace.forwardRef(({className:e="",children:s,variant:o="default",size:t="md",...a},r)=>{let l=v[o],n=B[t],x=R[t];return jsxRuntime.jsx("button",{ref:r,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 ${l} ${n} ${e}`,...a,children:jsxRuntime.jsx(i,{as:"span",size:x,weight:"medium",className:"leading-none",children:s})})});c.displayName="Button";exports.Button=c;//# sourceMappingURL=index.js.map
153
2
  //# sourceMappingURL=index.js.map
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 \"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"]}
1
+ {"version":3,"sources":["../src/components/Text/Text.tsx","../src/components/Button/Button.tsx"],"names":["sizeClasses","weightClasses","colorClasses","alignClasses","Text","m","children","Component","size","weight","color","align","className","props","ref","classes","jsx","variantClasses","textSizeMap","Button","g","variant","variantClass","sizeClass","textSize"],"mappings":"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","file":"index.js","sourcesContent":["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","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"]}
package/dist/index.mjs CHANGED
@@ -1,117 +1,2 @@
1
- "use client";
2
-
3
- // src/components/Button/Button.tsx
4
- import * as React2 from "react";
5
-
6
- // src/components/Text/Text.tsx
7
- import * as React from "react";
8
- import { jsx } from "react/jsx-runtime";
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(
94
- "button",
95
- {
96
- ref,
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}`,
98
- ...props,
99
- children: /* @__PURE__ */ jsx2(
100
- Text,
101
- {
102
- as: "span",
103
- size: textSize,
104
- weight: "medium",
105
- className: "leading-none",
106
- children
107
- }
108
- )
109
- }
110
- );
111
- }
112
- );
113
- Button.displayName = "Button";
114
- export {
115
- Button
116
- };
1
+ import*as m from'react';import {jsx}from'react/jsx-runtime';var p={xs:"text-xs",sm:"text-sm",base:"text-base",lg:"text-lg",xl:"text-xl","2xl":"text-2xl","3xl":"text-3xl","4xl":"text-4xl","5xl":"text-5xl","6xl":"text-6xl","7xl":"text-7xl","8xl":"text-8xl","9xl":"text-9xl"},u={light:"font-light",normal:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold",extrabold:"font-extrabold",black:"font-black"},b={default:"text-gray-900",muted:"text-gray-500",primary:"text-blue-600",secondary:"text-green-600",danger:"text-red-600",success:"text-emerald-600"},h={left:"text-left",center:"text-center",right:"text-right"},i=m.forwardRef(({children:e,as:s="p",size:o="base",weight:t="normal",color:a="default",align:r="left",className:l="",...n},x)=>{let f=[p[o],u[t],b[a],h[r],l].filter(Boolean).join(" ");return jsx(s,{ref:x,className:f,...n,children:e})});i.displayName="Text";var v={default:"bg-gray-200 text-gray-900 hover:bg-gray-300",primary:"bg-blue-600 text-white hover:bg-blue-700",secondary:"bg-green-600 text-white hover:bg-green-700",danger:"bg-red-600 text-white hover:bg-red-700",ghost:"bg-transparent text-gray-700 hover:bg-gray-100"},B={sm:"px-3 py-1.5",md:"px-4 py-2",lg:"px-6 py-3"},R={sm:"sm",md:"base",lg:"lg"},c=m.forwardRef(({className:e="",children:s,variant:o="default",size:t="md",...a},r)=>{let l=v[o],n=B[t],x=R[t];return jsx("button",{ref:r,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 ${l} ${n} ${e}`,...a,children:jsx(i,{as:"span",size:x,weight:"medium",className:"leading-none",children:s})})});c.displayName="Button";export{c as Button};//# sourceMappingURL=index.mjs.map
117
2
  //# sourceMappingURL=index.mjs.map
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 \"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"]}
1
+ {"version":3,"sources":["../src/components/Text/Text.tsx","../src/components/Button/Button.tsx"],"names":["sizeClasses","weightClasses","colorClasses","alignClasses","Text","children","Component","size","weight","color","align","className","props","ref","classes","jsx","variantClasses","textSizeMap","Button","g","variant","variantClass","sizeClass","textSize"],"mappings":"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","file":"index.mjs","sourcesContent":["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","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"]}
package/dist/styles.css CHANGED
@@ -1,570 +1,2 @@
1
1
  /*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
2
- @layer properties;
3
- @layer theme, base, components, utilities;
4
- @layer theme {
5
- :root, :host {
6
- --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
7
- "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
8
- --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
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;
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;
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;
58
- --radius-md: 0.375rem;
59
- --default-transition-duration: 150ms;
60
- --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
61
- --default-font-family: var(--font-sans);
62
- --default-mono-font-family: var(--font-mono);
63
- }
64
- }
65
- @layer base {
66
- *, ::after, ::before, ::backdrop, ::file-selector-button {
67
- box-sizing: border-box;
68
- margin: 0;
69
- padding: 0;
70
- border: 0 solid;
71
- }
72
- html, :host {
73
- line-height: 1.5;
74
- -webkit-text-size-adjust: 100%;
75
- tab-size: 4;
76
- font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
77
- font-feature-settings: var(--default-font-feature-settings, normal);
78
- font-variation-settings: var(--default-font-variation-settings, normal);
79
- -webkit-tap-highlight-color: transparent;
80
- }
81
- hr {
82
- height: 0;
83
- color: inherit;
84
- border-top-width: 1px;
85
- }
86
- abbr:where([title]) {
87
- -webkit-text-decoration: underline dotted;
88
- text-decoration: underline dotted;
89
- }
90
- h1, h2, h3, h4, h5, h6 {
91
- font-size: inherit;
92
- font-weight: inherit;
93
- }
94
- a {
95
- color: inherit;
96
- -webkit-text-decoration: inherit;
97
- text-decoration: inherit;
98
- }
99
- b, strong {
100
- font-weight: bolder;
101
- }
102
- code, kbd, samp, pre {
103
- font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
104
- font-feature-settings: var(--default-mono-font-feature-settings, normal);
105
- font-variation-settings: var(--default-mono-font-variation-settings, normal);
106
- font-size: 1em;
107
- }
108
- small {
109
- font-size: 80%;
110
- }
111
- sub, sup {
112
- font-size: 75%;
113
- line-height: 0;
114
- position: relative;
115
- vertical-align: baseline;
116
- }
117
- sub {
118
- bottom: -0.25em;
119
- }
120
- sup {
121
- top: -0.5em;
122
- }
123
- table {
124
- text-indent: 0;
125
- border-color: inherit;
126
- border-collapse: collapse;
127
- }
128
- :-moz-focusring {
129
- outline: auto;
130
- }
131
- progress {
132
- vertical-align: baseline;
133
- }
134
- summary {
135
- display: list-item;
136
- }
137
- ol, ul, menu {
138
- list-style: none;
139
- }
140
- img, svg, video, canvas, audio, iframe, embed, object {
141
- display: block;
142
- vertical-align: middle;
143
- }
144
- img, video {
145
- max-width: 100%;
146
- height: auto;
147
- }
148
- button, input, select, optgroup, textarea, ::file-selector-button {
149
- font: inherit;
150
- font-feature-settings: inherit;
151
- font-variation-settings: inherit;
152
- letter-spacing: inherit;
153
- color: inherit;
154
- border-radius: 0;
155
- background-color: transparent;
156
- opacity: 1;
157
- }
158
- :where(select:is([multiple], [size])) optgroup {
159
- font-weight: bolder;
160
- }
161
- :where(select:is([multiple], [size])) optgroup option {
162
- padding-inline-start: 20px;
163
- }
164
- ::file-selector-button {
165
- margin-inline-end: 4px;
166
- }
167
- ::placeholder {
168
- opacity: 1;
169
- }
170
- @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
171
- ::placeholder {
172
- color: currentcolor;
173
- @supports (color: color-mix(in lab, red, red)) {
174
- color: color-mix(in oklab, currentcolor 50%, transparent);
175
- }
176
- }
177
- }
178
- textarea {
179
- resize: vertical;
180
- }
181
- ::-webkit-search-decoration {
182
- -webkit-appearance: none;
183
- }
184
- ::-webkit-date-and-time-value {
185
- min-height: 1lh;
186
- text-align: inherit;
187
- }
188
- ::-webkit-datetime-edit {
189
- display: inline-flex;
190
- }
191
- ::-webkit-datetime-edit-fields-wrapper {
192
- padding: 0;
193
- }
194
- ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
195
- padding-block: 0;
196
- }
197
- ::-webkit-calendar-picker-indicator {
198
- line-height: 1;
199
- }
200
- :-moz-ui-invalid {
201
- box-shadow: none;
202
- }
203
- button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
204
- appearance: button;
205
- }
206
- ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
207
- height: auto;
208
- }
209
- [hidden]:where(:not([hidden="until-found"])) {
210
- display: none !important;
211
- }
212
- }
213
- @layer utilities {
214
- .flex {
215
- display: flex;
216
- }
217
- .inline-flex {
218
- display: inline-flex;
219
- }
220
- .cursor-pointer {
221
- cursor: pointer;
222
- }
223
- .flex-col {
224
- flex-direction: column;
225
- }
226
- .items-center {
227
- align-items: center;
228
- }
229
- .justify-center {
230
- justify-content: center;
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
- }
245
- .rounded-md {
246
- border-radius: var(--radius-md);
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
- }
269
- .px-4 {
270
- padding-inline: calc(var(--spacing) * 4);
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
- }
278
- .py-2 {
279
- padding-block: calc(var(--spacing) * 2);
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
- }
365
- .font-medium {
366
- --tw-font-weight: var(--font-weight-medium);
367
- font-weight: var(--font-weight-medium);
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
- }
401
- .transition-colors {
402
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
403
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
404
- transition-duration: var(--tw-duration, var(--default-transition-duration));
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
- }
441
- .focus-visible\:ring-2 {
442
- &:focus-visible {
443
- --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
444
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
445
- }
446
- }
447
- .focus-visible\:ring-offset-2 {
448
- &:focus-visible {
449
- --tw-ring-offset-width: 2px;
450
- --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
451
- }
452
- }
453
- .focus-visible\:outline-none {
454
- &:focus-visible {
455
- --tw-outline-style: none;
456
- outline-style: none;
457
- }
458
- }
459
- .disabled\:pointer-events-none {
460
- &:disabled {
461
- pointer-events: none;
462
- }
463
- }
464
- .disabled\:opacity-50 {
465
- &:disabled {
466
- opacity: 50%;
467
- }
468
- }
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
- }
479
- @property --tw-font-weight {
480
- syntax: "*";
481
- inherits: false;
482
- }
483
- @property --tw-shadow {
484
- syntax: "*";
485
- inherits: false;
486
- initial-value: 0 0 #0000;
487
- }
488
- @property --tw-shadow-color {
489
- syntax: "*";
490
- inherits: false;
491
- }
492
- @property --tw-shadow-alpha {
493
- syntax: "<percentage>";
494
- inherits: false;
495
- initial-value: 100%;
496
- }
497
- @property --tw-inset-shadow {
498
- syntax: "*";
499
- inherits: false;
500
- initial-value: 0 0 #0000;
501
- }
502
- @property --tw-inset-shadow-color {
503
- syntax: "*";
504
- inherits: false;
505
- }
506
- @property --tw-inset-shadow-alpha {
507
- syntax: "<percentage>";
508
- inherits: false;
509
- initial-value: 100%;
510
- }
511
- @property --tw-ring-color {
512
- syntax: "*";
513
- inherits: false;
514
- }
515
- @property --tw-ring-shadow {
516
- syntax: "*";
517
- inherits: false;
518
- initial-value: 0 0 #0000;
519
- }
520
- @property --tw-inset-ring-color {
521
- syntax: "*";
522
- inherits: false;
523
- }
524
- @property --tw-inset-ring-shadow {
525
- syntax: "*";
526
- inherits: false;
527
- initial-value: 0 0 #0000;
528
- }
529
- @property --tw-ring-inset {
530
- syntax: "*";
531
- inherits: false;
532
- }
533
- @property --tw-ring-offset-width {
534
- syntax: "<length>";
535
- inherits: false;
536
- initial-value: 0px;
537
- }
538
- @property --tw-ring-offset-color {
539
- syntax: "*";
540
- inherits: false;
541
- initial-value: #fff;
542
- }
543
- @property --tw-ring-offset-shadow {
544
- syntax: "*";
545
- inherits: false;
546
- initial-value: 0 0 #0000;
547
- }
548
- @layer properties {
549
- @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
550
- *, ::before, ::after, ::backdrop {
551
- --tw-space-y-reverse: 0;
552
- --tw-leading: initial;
553
- --tw-font-weight: initial;
554
- --tw-shadow: 0 0 #0000;
555
- --tw-shadow-color: initial;
556
- --tw-shadow-alpha: 100%;
557
- --tw-inset-shadow: 0 0 #0000;
558
- --tw-inset-shadow-color: initial;
559
- --tw-inset-shadow-alpha: 100%;
560
- --tw-ring-color: initial;
561
- --tw-ring-shadow: 0 0 #0000;
562
- --tw-inset-ring-color: initial;
563
- --tw-inset-ring-shadow: 0 0 #0000;
564
- --tw-ring-inset: initial;
565
- --tw-ring-offset-width: 0px;
566
- --tw-ring-offset-color: #fff;
567
- --tw-ring-offset-shadow: 0 0 #0000;
568
- }
569
- }
570
- }
2
+ @layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-space-y-reverse:0;--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-600:oklch(57.7% .245 27.325);--color-red-700:oklch(50.5% .213 27.518);--color-green-600:oklch(62.7% .194 149.214);--color-green-700:oklch(52.7% .154 150.069);--color-emerald-600:oklch(59.6% .145 163.225);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-700:oklch(48.8% .243 264.376);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-900:oklch(21% .034 264.665);--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height:calc(1.5/1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25/1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5/2.25);--text-5xl:3rem;--text-5xl--line-height:1;--text-6xl:3.75rem;--text-6xl--line-height:1;--text-7xl:4.5rem;--text-7xl--line-height:1;--text-8xl:6rem;--text-8xl--line-height:1;--text-9xl:8rem;--text-9xl--line-height:1;--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--font-weight-black:900;--radius-md:.375rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.flex{display:flex}.inline-flex{display:inline-flex}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:calc(var(--spacing)*2)}.gap-4{gap:calc(var(--spacing)*4)}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*4)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-y-reverse)))}.rounded-md{border-radius:var(--radius-md)}.bg-blue-600{background-color:var(--color-blue-600)}.bg-gray-200{background-color:var(--color-gray-200)}.bg-green-600{background-color:var(--color-green-600)}.bg-red-600{background-color:var(--color-red-600)}.bg-transparent{background-color:#0000}.p-8{padding:calc(var(--spacing)*8)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-6{padding-inline:calc(var(--spacing)*6)}.py-1\.5{padding-block:calc(var(--spacing)*1.5)}.py-2{padding-block:calc(var(--spacing)*2)}.py-3{padding-block:calc(var(--spacing)*3)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}.text-6xl{font-size:var(--text-6xl);line-height:var(--tw-leading,var(--text-6xl--line-height))}.text-7xl{font-size:var(--text-7xl);line-height:var(--tw-leading,var(--text-7xl--line-height))}.text-8xl{font-size:var(--text-8xl);line-height:var(--tw-leading,var(--text-8xl--line-height))}.text-9xl{font-size:var(--text-9xl);line-height:var(--tw-leading,var(--text-9xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.leading-none{--tw-leading:1;line-height:1}.font-black{--tw-font-weight:var(--font-weight-black);font-weight:var(--font-weight-black)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-extrabold{--tw-font-weight:var(--font-weight-extrabold);font-weight:var(--font-weight-extrabold)}.font-light{--tw-font-weight:var(--font-weight-light);font-weight:var(--font-weight-light)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-blue-600{color:var(--color-blue-600)}.text-emerald-600{color:var(--color-emerald-600)}.text-gray-500{color:var(--color-gray-500)}.text-gray-700{color:var(--color-gray-700)}.text-gray-900{color:var(--color-gray-900)}.text-green-600{color:var(--color-green-600)}.text-red-600{color:var(--color-red-600)}.text-white{color:var(--color-white)}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}@media (hover:hover){.hover\:bg-blue-700:hover{background-color:var(--color-blue-700)}.hover\:bg-gray-100:hover{background-color:var(--color-gray-100)}.hover\:bg-gray-300:hover{background-color:var(--color-gray-300)}.hover\:bg-green-700:hover{background-color:var(--color-green-700)}.hover\:bg-red-700:hover{background-color:var(--color-red-700)}}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:opacity-50:disabled{opacity:.5}}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}
package/package.json CHANGED
@@ -1,7 +1,8 @@
1
1
  {
2
2
  "name": "soongle-ui",
3
- "version": "0.1.5",
3
+ "version": "0.1.7",
4
4
  "description": "A design system library for React.js and Next.js with TailwindCSS v4 by Soongle",
5
+ "sideEffects": false,
5
6
  "publishConfig": {
6
7
  "access": "public"
7
8
  },
@@ -21,7 +22,7 @@
21
22
  ],
22
23
  "scripts": {
23
24
  "build": "tsup && npm run build:css",
24
- "build:css": "npx @tailwindcss/cli -i ./src/styles.css -o ./dist/styles.css",
25
+ "build:css": "npx @tailwindcss/cli -i ./src/styles.css -o ./dist/styles.css --minify",
25
26
  "dev": "tsup --watch",
26
27
  "type-check": "tsc --noEmit",
27
28
  "storybook": "storybook dev -p 6006",