automoby-kit 1.0.62 → 1.0.65
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +237 -25
- package/dist/cjs/Input.js +1 -1
- package/dist/cjs/Typography.js +1 -1
- package/dist/esm/Input.js +1 -1
- package/dist/esm/Typography.js +1 -1
- package/dist/types/Input.js +31 -37
- package/dist/types/Typography.js +24 -24
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,20 @@
|
|
|
1
1
|
# Automoby Kit
|
|
2
2
|
|
|
3
|
-
A comprehensive React UI component library - created in war 2025.
|
|
3
|
+
A comprehensive React UI component library built with TypeScript and Tailwind CSS - created in war 2025.
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
## ✨ Features
|
|
10
|
+
|
|
11
|
+
- 🎨 **15+ Production-Ready Components** - Comprehensive UI library for modern React applications
|
|
12
|
+
- 📱 **Mobile-First Design** - Built-in mobile detection and responsive behavior
|
|
13
|
+
- 🎯 **TypeScript Native** - Full type safety with complete TypeScript definitions
|
|
14
|
+
- 🌳 **Tree-Shakeable** - Import only what you need for optimal bundle size
|
|
15
|
+
- 🎨 **Tailwind CSS** - Styled with Tailwind for easy customization
|
|
16
|
+
- ♿ **Accessible** - ARIA-compliant components following best practices
|
|
17
|
+
- 🚀 **Modern React 19** - Built for the latest React features
|
|
4
18
|
|
|
5
19
|
## 🚀 Installation
|
|
6
20
|
|
|
@@ -8,14 +22,26 @@ A comprehensive React UI component library - created in war 2025.
|
|
|
8
22
|
npm install automoby-kit
|
|
9
23
|
```
|
|
10
24
|
|
|
25
|
+
### Peer Dependencies
|
|
26
|
+
|
|
27
|
+
Make sure you have these installed:
|
|
28
|
+
|
|
29
|
+
```bash
|
|
30
|
+
npm install react react-dom clsx lucide-react tailwindcss ua-parser-js
|
|
31
|
+
```
|
|
32
|
+
|
|
11
33
|
## 📦 Usage
|
|
12
34
|
|
|
35
|
+
### Import All Components
|
|
36
|
+
|
|
13
37
|
```typescript
|
|
14
38
|
import {
|
|
15
39
|
Button,
|
|
16
40
|
Typography,
|
|
17
41
|
Input,
|
|
18
|
-
Tabs
|
|
42
|
+
Tabs,
|
|
43
|
+
Dialog,
|
|
44
|
+
Select
|
|
19
45
|
} from 'automoby-kit';
|
|
20
46
|
|
|
21
47
|
function App() {
|
|
@@ -31,40 +57,84 @@ function App() {
|
|
|
31
57
|
}
|
|
32
58
|
```
|
|
33
59
|
|
|
60
|
+
### Import Individual Components (Tree-Shaking)
|
|
61
|
+
|
|
62
|
+
For better bundle optimization, import components individually:
|
|
63
|
+
|
|
64
|
+
```typescript
|
|
65
|
+
import { Button } from 'automoby-kit/Button';
|
|
66
|
+
import { Typography } from 'automoby-kit/Typography';
|
|
67
|
+
import { Input } from 'automoby-kit/Input';
|
|
68
|
+
|
|
69
|
+
function App() {
|
|
70
|
+
return (
|
|
71
|
+
<div>
|
|
72
|
+
<Typography variant="h1">Optimized Bundle</Typography>
|
|
73
|
+
<Button variant="primary">Click me!</Button>
|
|
74
|
+
<Input placeholder="Type here..." />
|
|
75
|
+
</div>
|
|
76
|
+
);
|
|
77
|
+
}
|
|
78
|
+
```
|
|
79
|
+
|
|
34
80
|
## 🧩 Available Components
|
|
35
81
|
|
|
36
|
-
|
|
37
|
-
- **
|
|
38
|
-
- **
|
|
39
|
-
- **
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
- **Breadcrumb** - Navigation breadcrumbs
|
|
43
|
-
- **
|
|
82
|
+
### Form Components
|
|
83
|
+
- **Input** - Advanced input fields with label, error states, and various types
|
|
84
|
+
- **Select** - Dropdown select with keyboard navigation and accessibility
|
|
85
|
+
- **RadioGroup** - Radio button groups with customizable options
|
|
86
|
+
|
|
87
|
+
### Navigation Components
|
|
88
|
+
- **Breadcrumb** - Navigation breadcrumbs for showing page hierarchy
|
|
89
|
+
- **Menu** - Context menus and dropdowns with nested support
|
|
90
|
+
- **Tabs** - Tabbed interfaces for organizing content
|
|
91
|
+
- **Pagination** - Page navigation with mobile and desktop variants
|
|
92
|
+
|
|
93
|
+
### Display Components
|
|
94
|
+
- **Typography** - Text rendering with various heading and body styles
|
|
95
|
+
- **Button** - Interactive buttons with multiple variants and sizes
|
|
96
|
+
- **Chips** - Tag-like elements for categories or filters
|
|
97
|
+
- **Divider** - Visual separators for content sections
|
|
44
98
|
- **Accordion** - Collapsible content sections
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
- **
|
|
48
|
-
- **
|
|
99
|
+
|
|
100
|
+
### Overlay Components
|
|
101
|
+
- **Dialog** - Modal dialogs with customizable content and actions
|
|
102
|
+
- **Drawer** - Slide-out panels from any direction
|
|
103
|
+
- **Backdrop** - Overlay backgrounds for modals
|
|
49
104
|
|
|
50
105
|
## 🏗️ TypeScript Support
|
|
51
106
|
|
|
52
|
-
All components come with full TypeScript support:
|
|
107
|
+
All components come with full TypeScript support and exported types:
|
|
53
108
|
|
|
54
109
|
```typescript
|
|
55
|
-
import {
|
|
110
|
+
import {
|
|
111
|
+
ButtonProps,
|
|
112
|
+
ButtonVariant,
|
|
113
|
+
ButtonSize,
|
|
114
|
+
TypographyProps,
|
|
115
|
+
TypographyVariant,
|
|
116
|
+
InputProps,
|
|
117
|
+
DialogProps,
|
|
118
|
+
SelectProps,
|
|
119
|
+
SelectOption
|
|
120
|
+
} from 'automoby-kit';
|
|
56
121
|
|
|
122
|
+
// Use types in your components
|
|
57
123
|
const MyButton: React.FC<ButtonProps> = (props) => {
|
|
58
124
|
return <Button {...props} />;
|
|
59
125
|
};
|
|
126
|
+
|
|
127
|
+
// Define variants with type safety
|
|
128
|
+
const variant: ButtonVariant = 'primary';
|
|
129
|
+
const size: ButtonSize = 'lg';
|
|
60
130
|
```
|
|
61
131
|
|
|
62
132
|
## 📱 Mobile Context
|
|
63
133
|
|
|
64
|
-
The library includes a mobile detection context:
|
|
134
|
+
The library includes a mobile detection context for responsive behavior:
|
|
65
135
|
|
|
66
136
|
```typescript
|
|
67
|
-
import { MobileProvider } from 'automoby-kit';
|
|
137
|
+
import { MobileProvider, useMobile } from 'automoby-kit';
|
|
68
138
|
|
|
69
139
|
function App() {
|
|
70
140
|
return (
|
|
@@ -73,28 +143,170 @@ function App() {
|
|
|
73
143
|
</MobileProvider>
|
|
74
144
|
);
|
|
75
145
|
}
|
|
146
|
+
|
|
147
|
+
function MyComponent() {
|
|
148
|
+
const isMobile = useMobile();
|
|
149
|
+
|
|
150
|
+
return (
|
|
151
|
+
<div>
|
|
152
|
+
{isMobile ? (
|
|
153
|
+
<p>Mobile View</p>
|
|
154
|
+
) : (
|
|
155
|
+
<p>Desktop View</p>
|
|
156
|
+
)}
|
|
157
|
+
</div>
|
|
158
|
+
);
|
|
159
|
+
}
|
|
76
160
|
```
|
|
77
161
|
|
|
78
|
-
##
|
|
162
|
+
## 🎨 Component Examples
|
|
163
|
+
|
|
164
|
+
### Dialog
|
|
165
|
+
|
|
166
|
+
```typescript
|
|
167
|
+
import { Dialog, DialogButton } from 'automoby-kit';
|
|
168
|
+
import { useState } from 'react';
|
|
169
|
+
|
|
170
|
+
function MyDialog() {
|
|
171
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
79
172
|
|
|
80
|
-
|
|
173
|
+
return (
|
|
174
|
+
<Dialog
|
|
175
|
+
isOpen={isOpen}
|
|
176
|
+
onClose={() => setIsOpen(false)}
|
|
177
|
+
title="Confirm Action"
|
|
178
|
+
content={<p>Are you sure you want to proceed?</p>}
|
|
179
|
+
buttons={
|
|
180
|
+
<>
|
|
181
|
+
<DialogButton variant="primary" onClick={() => setIsOpen(false)}>
|
|
182
|
+
Confirm
|
|
183
|
+
</DialogButton>
|
|
184
|
+
<DialogButton variant="secondary" onClick={() => setIsOpen(false)}>
|
|
185
|
+
Cancel
|
|
186
|
+
</DialogButton>
|
|
187
|
+
</>
|
|
188
|
+
}
|
|
189
|
+
/>
|
|
190
|
+
);
|
|
191
|
+
}
|
|
192
|
+
```
|
|
193
|
+
|
|
194
|
+
### Select
|
|
195
|
+
|
|
196
|
+
```typescript
|
|
197
|
+
import { Select } from 'automoby-kit';
|
|
198
|
+
|
|
199
|
+
function MySelect() {
|
|
200
|
+
const options = [
|
|
201
|
+
{ value: '1', label: 'Option 1' },
|
|
202
|
+
{ value: '2', label: 'Option 2' },
|
|
203
|
+
{ value: '3', label: 'Option 3' },
|
|
204
|
+
];
|
|
205
|
+
|
|
206
|
+
return (
|
|
207
|
+
<Select
|
|
208
|
+
label="Choose an option"
|
|
209
|
+
placeholder="Select..."
|
|
210
|
+
options={options}
|
|
211
|
+
onChange={(value) => console.log('Selected:', value)}
|
|
212
|
+
/>
|
|
213
|
+
);
|
|
214
|
+
}
|
|
215
|
+
```
|
|
216
|
+
|
|
217
|
+
### Pagination
|
|
218
|
+
|
|
219
|
+
```typescript
|
|
220
|
+
import { Pagination } from 'automoby-kit';
|
|
221
|
+
|
|
222
|
+
function MyPagination() {
|
|
223
|
+
return (
|
|
224
|
+
<Pagination
|
|
225
|
+
currentPage={1}
|
|
226
|
+
totalPages={10}
|
|
227
|
+
onPageChange={(page) => console.log('Page:', page)}
|
|
228
|
+
/>
|
|
229
|
+
);
|
|
230
|
+
}
|
|
231
|
+
```
|
|
232
|
+
|
|
233
|
+
## 🎯 Available Exports
|
|
234
|
+
|
|
235
|
+
### Components
|
|
236
|
+
`Button`, `Typography`, `Input`, `Tabs`, `Drawer`, `Backdrop`, `Breadcrumb`, `Pagination`, `Accordion`, `Divider`, `RadioGroup`, `Chips`, `Menu`, `Dialog`, `DialogButton`, `Select`
|
|
237
|
+
|
|
238
|
+
### Context Providers
|
|
239
|
+
`MobileProvider`, `useMobile`
|
|
240
|
+
|
|
241
|
+
### Utilities
|
|
242
|
+
`cn` (classname utility from `automoby-kit/utils`)
|
|
243
|
+
|
|
244
|
+
### Types
|
|
245
|
+
All component props and variants are exported for TypeScript users.
|
|
246
|
+
|
|
247
|
+
## 🛠️ Peer Dependencies
|
|
81
248
|
|
|
82
249
|
```json
|
|
83
250
|
{
|
|
84
251
|
"react": "^19.1.0",
|
|
85
252
|
"react-dom": "^19.1.0",
|
|
86
253
|
"clsx": "^2.1.1",
|
|
87
|
-
"
|
|
254
|
+
"lucide-react": "^0.522.0",
|
|
255
|
+
"tailwindcss": "^4.1.10",
|
|
256
|
+
"typescript": "^5.8.3",
|
|
257
|
+
"ua-parser-js": "^2.0.4"
|
|
88
258
|
}
|
|
89
259
|
```
|
|
90
260
|
|
|
261
|
+
## 📦 Bundle Formats
|
|
262
|
+
|
|
263
|
+
This package ships with multiple bundle formats:
|
|
264
|
+
|
|
265
|
+
- **ESM** - `dist/esm` - ES Modules for modern bundlers
|
|
266
|
+
- **CommonJS** - `dist/cjs` - CommonJS for Node.js compatibility
|
|
267
|
+
- **TypeScript Definitions** - `dist/types` - Complete type definitions
|
|
268
|
+
|
|
269
|
+
## 🔧 Configuration
|
|
270
|
+
|
|
271
|
+
If you're using Next.js 13+, add 'use client' directive when needed (automatically handled in pre-built bundles):
|
|
272
|
+
|
|
273
|
+
```typescript
|
|
274
|
+
'use client';
|
|
275
|
+
|
|
276
|
+
import { Button } from 'automoby-kit';
|
|
277
|
+
```
|
|
278
|
+
|
|
279
|
+
## 🌟 Why Automoby Kit?
|
|
280
|
+
|
|
281
|
+
- **Battle-Tested** - Built during production demands
|
|
282
|
+
- **Developer Experience** - Intuitive API with excellent TypeScript support
|
|
283
|
+
- **Performance** - Optimized bundle size with tree-shaking support
|
|
284
|
+
- **Modern Stack** - Built with latest React 19 and TypeScript 5.8
|
|
285
|
+
- **Accessible** - WCAG compliant components
|
|
286
|
+
- **Customizable** - Easy to theme with Tailwind CSS
|
|
287
|
+
|
|
91
288
|
## 🆘 Support
|
|
92
289
|
|
|
93
|
-
If you
|
|
290
|
+
If you encounter any issues:
|
|
291
|
+
|
|
292
|
+
1. Check the [GitHub issues](https://github.com/yourusername/automoby-kit/issues)
|
|
293
|
+
2. Submit a detailed issue report
|
|
294
|
+
3. Provide a minimal reproduction example
|
|
94
295
|
|
|
95
|
-
|
|
96
|
-
|
|
296
|
+
## 👥 Authors
|
|
297
|
+
|
|
298
|
+
- **Ghazal Kordi** - Co-creator
|
|
299
|
+
- **Alireza Mirzaee** - Co-creator
|
|
300
|
+
|
|
301
|
+
## 📄 License
|
|
302
|
+
|
|
303
|
+
ISC
|
|
97
304
|
|
|
98
305
|
## 🔄 Version History
|
|
99
306
|
|
|
100
|
-
- **1.0.
|
|
307
|
+
- **1.0.64** - Current stable release
|
|
308
|
+
- **1.0.0** - Initial release
|
|
309
|
+
|
|
310
|
+
---
|
|
311
|
+
|
|
312
|
+
Built with ❤️ in 2025
|
package/dist/cjs/Input.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";"use strict";var
|
|
1
|
+
"use client";"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("./utils.js"),l=require("./contexts.js");const a=t.forwardRef(({state:a="default",label:n,value:i,onChange:s,helperText:o,startIcon:u,endIcon:d,type:x="text",placeholder:h,isMobile:p,containerClassName:c,...m},f)=>{const[b,g]=t.useState(!1),j=t.useId(),w=l.useMobile(),v=p??w,y=b||""!==i&&null!=i,N="disabled"===a,I=r("relative flex items-center border rounded-lg transition-all duration-300 w-full",{"h-12":v,"h-14":!v},"transition-all duration-300",{"border-neutral-light":"default"===a&&!b,"border-primary":"default"===a&&b,"border-error":"error"===a,"bg-white border-neutral-light cursor-not-allowed":N},c),q=r("absolute pointer-events-none transition-all duration-300",{"-top-2.5 bg-white px-1 mx-3 font-medium":y,"text-xs":y&&v,"text-s":y&&!v,"text-s font-medium":!y&&v,"text-m font-medium":!y&&!v,"right-3":!u,"top-1/2 -translate-y-1/2":!y,"right-11":!y&&u,"right-4":!y&&!u,"text-neutral-main":!b&&"default"===a,"text-neutral-light":N,"text-primary":b&&"default"===a,"text-error":y&&"error"===a}),C=r("peer w-full h-full bg-transparent outline-none font-medium disabled:text-neutral-light",{"text-s":v,"text-m":!v},{"pr-10":u,"pl-10":d,"px-3":!u&&!d,"pr-3 pl-10":!u&&d,"pl-3 pr-10":u&&!d,"cursor-not-allowed text-red-500":N,"text-neutral-dark":!b,"text-neutral-darker":b}),F=r("absolute transition-colors duration-300",{"h-4 w-4":v,"h-5 w-5":!v},{"text-neutral-main":"error"!==a&&!b,"text-primary":"default"===a&&b,"text-error":"error"===a,"text-neutral-light":N}),k=r("font-light mt-1 h-4 px-3",{"text-xs":v,"text-s":!v},{"text-neutral-main":"default"===a,"text-primary":"default"===a&&b,"text-error":"error"===a,"text-neutral-light":N}),B=h&&!b?void 0:h;return e.jsxs("div",{children:[e.jsxs("div",{className:I,children:[d&&e.jsx("span",{className:r(F,"left-3"),children:d}),e.jsx("label",{htmlFor:j,className:q,children:n}),e.jsx("input",{ref:f,id:j,type:x,value:i,onChange:s,onFocus:e=>{N||(g(!0),m.onFocus?.(e))},onBlur:e=>{N||(g(!1),m.onBlur?.(e))},disabled:N,placeholder:B,className:C,...m}),u&&e.jsx("span",{className:r(F,"right-3"),children:u})]}),o&&e.jsx("p",{className:k,children:o})]})});a.displayName="Input",exports.Input=a;
|
package/dist/cjs/Typography.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var t=require("react"),e=require("./utils.js");const x={h1:"text-
|
|
1
|
+
"use strict";var t=require("react"),e=require("./utils.js");const x={h1:"text-h3 sm:text-h2 md:text-h1 lg:text-h1 xl:text-h1 font-fat",h2:"text-h4 sm:text-h3 md:text-h2 lg:text-h2 xl:text-h2 font-fat",h3:"text-h5 sm:text-h4 md:text-h3 lg:text-h3 xl:text-h3 font-fat",h4:"text-h6 sm:text-h5 md:text-h4 lg:text-h4 xl:text-h4 font-heavy",h5:"text-l sm:text-xl md:text-h5 lg:text-h5 xl:text-h5 font-heavy",h6:"text-m sm:text-l md:text-h6 lg:text-h6 xl:text-h6 font-heavy","body-xl-heavy":"text-l sm:text-xl md:text-xl lg:text-xl xl:text-xl font-heavy","body-l-heavy":"text-m sm:text-l md:text-l lg:text-l xl:text-l font-heavy","body-l-bold":"text-m sm:text-l md:text-l lg:text-l xl:text-l font-bold","body-l-medium":"text-m sm:text-l md:text-l lg:text-l xl:text-l font-medium","body-m-heavy":"text-s sm:text-m md:text-m lg:text-m xl:text-m font-heavy","body-m-bold":"text-s sm:text-m md:text-m lg:text-m xl:text-m font-bold","body-m-medium":"text-s sm:text-m md:text-m lg:text-m xl:text-m font-medium","body-s-heavy":"text-ms sm:text-s md:text-s lg:text-s xl:text-s font-heavy","body-s-bold":"text-ms sm:text-s md:text-s lg:text-s xl:text-s font-bold","body-s-medium":"text-ms sm:text-s md:text-s lg:text-s xl:text-s font-medium","body-ms-bold":"text-xs sm:text-ms md:text-ms lg:text-ms xl:text-ms font-bold","body-ms-medium":"text-xs sm:text-ms md:text-ms lg:text-ms xl:text-ms font-medium","body-xs-bold":"text-t sm:text-xs md:text-xs lg:text-xs xl:text-xs font-bold","body-xs-medium":"text-t sm:text-xs md:text-xs lg:text-xs xl:text-xs font-medium","body-t-bold":"text-ss sm:text-t md:text-t lg:text-t xl:text-t font-bold","body-t-medium":"text-ss sm:text-t md:text-t lg:text-t xl:text-t font-medium","body-ss-medium":"text-ss sm:text-ss md:text-ss lg:text-ss xl:text-ss font-medium"},m={primary:"text-primary",secondary:"text-secondary","neutral-darker":"text-neutral-darker","neutral-dark":"text-neutral-dark","neutral-main":"text-neutral-main",white:"text-white",inherit:"text-inherit"},s=t.forwardRef(({variant:s="body-m-medium",color:l="inherit",as:d,className:o,children:h,...a},r)=>{const n=d||(t=>t.startsWith("h")?t.split("-")[0]:"p")(s);return t.createElement(n,{ref:r,className:e(m[l],x[s],o),...a},h)});s.displayName="Typography",exports.Typography=s,exports.getTypographyClasses=t=>x[t];
|
package/dist/esm/Input.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsxs as t,jsx as
|
|
1
|
+
"use client";import{jsxs as t,jsx as e}from"react/jsx-runtime";import r,{useState as l,useId as a}from"react";import n from"./utils.js";import{useMobile as o}from"./contexts.js";const i=r.forwardRef(({state:r="default",label:i,value:s,onChange:d,helperText:u,startIcon:m,endIcon:x,type:p="text",placeholder:h,isMobile:c,containerClassName:f,...g},b)=>{const[w,y]=l(!1),N=a(),v=o(),j=c??v,C=w||""!==s&&null!=s,F="disabled"===r,I=n("relative flex items-center border rounded-lg transition-all duration-300 w-full",{"h-12":j,"h-14":!j},"transition-all duration-300",{"border-neutral-light":"default"===r&&!w,"border-primary":"default"===r&&w,"border-error":"error"===r,"bg-white border-neutral-light cursor-not-allowed":F},f),k=n("absolute pointer-events-none transition-all duration-300",{"-top-2.5 bg-white px-1 mx-3 font-medium":C,"text-xs":C&&j,"text-s":C&&!j,"text-s font-medium":!C&&j,"text-m font-medium":!C&&!j,"right-3":!m,"top-1/2 -translate-y-1/2":!C,"right-11":!C&&m,"right-4":!C&&!m,"text-neutral-main":!w&&"default"===r,"text-neutral-light":F,"text-primary":w&&"default"===r,"text-error":C&&"error"===r}),B=n("peer w-full h-full bg-transparent outline-none font-medium disabled:text-neutral-light",{"text-s":j,"text-m":!j},{"pr-10":m,"pl-10":x,"px-3":!m&&!x,"pr-3 pl-10":!m&&x,"pl-3 pr-10":m&&!x,"cursor-not-allowed text-red-500":F,"text-neutral-dark":!w,"text-neutral-darker":w}),M=n("absolute transition-colors duration-300",{"h-4 w-4":j,"h-5 w-5":!j},{"text-neutral-main":"error"!==r&&!w,"text-primary":"default"===r&&w,"text-error":"error"===r,"text-neutral-light":F}),R=n("font-light mt-1 h-4 px-3",{"text-xs":j,"text-s":!j},{"text-neutral-main":"default"===r,"text-primary":"default"===r&&w,"text-error":"error"===r,"text-neutral-light":F}),T=h&&!w?void 0:h;return t("div",{children:[t("div",{className:I,children:[x&&e("span",{className:n(M,"left-3"),children:x}),e("label",{htmlFor:N,className:k,children:i}),e("input",{ref:b,id:N,type:p,value:s,onChange:d,onFocus:t=>{F||(y(!0),g.onFocus?.(t))},onBlur:t=>{F||(y(!1),g.onBlur?.(t))},disabled:F,placeholder:T,className:B,...g}),m&&e("span",{className:n(M,"right-3"),children:m})]}),u&&e("p",{className:R,children:u})]})});i.displayName="Input";export{i as Input};
|
package/dist/esm/Typography.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import t from"react";import e from"./utils.js";const x={h1:"text-
|
|
1
|
+
import t from"react";import e from"./utils.js";const x={h1:"text-h3 sm:text-h2 md:text-h1 lg:text-h1 xl:text-h1 font-fat",h2:"text-h4 sm:text-h3 md:text-h2 lg:text-h2 xl:text-h2 font-fat",h3:"text-h5 sm:text-h4 md:text-h3 lg:text-h3 xl:text-h3 font-fat",h4:"text-h6 sm:text-h5 md:text-h4 lg:text-h4 xl:text-h4 font-heavy",h5:"text-l sm:text-xl md:text-h5 lg:text-h5 xl:text-h5 font-heavy",h6:"text-m sm:text-l md:text-h6 lg:text-h6 xl:text-h6 font-heavy","body-xl-heavy":"text-l sm:text-xl md:text-xl lg:text-xl xl:text-xl font-heavy","body-l-heavy":"text-m sm:text-l md:text-l lg:text-l xl:text-l font-heavy","body-l-bold":"text-m sm:text-l md:text-l lg:text-l xl:text-l font-bold","body-l-medium":"text-m sm:text-l md:text-l lg:text-l xl:text-l font-medium","body-m-heavy":"text-s sm:text-m md:text-m lg:text-m xl:text-m font-heavy","body-m-bold":"text-s sm:text-m md:text-m lg:text-m xl:text-m font-bold","body-m-medium":"text-s sm:text-m md:text-m lg:text-m xl:text-m font-medium","body-s-heavy":"text-ms sm:text-s md:text-s lg:text-s xl:text-s font-heavy","body-s-bold":"text-ms sm:text-s md:text-s lg:text-s xl:text-s font-bold","body-s-medium":"text-ms sm:text-s md:text-s lg:text-s xl:text-s font-medium","body-ms-bold":"text-xs sm:text-ms md:text-ms lg:text-ms xl:text-ms font-bold","body-ms-medium":"text-xs sm:text-ms md:text-ms lg:text-ms xl:text-ms font-medium","body-xs-bold":"text-t sm:text-xs md:text-xs lg:text-xs xl:text-xs font-bold","body-xs-medium":"text-t sm:text-xs md:text-xs lg:text-xs xl:text-xs font-medium","body-t-bold":"text-ss sm:text-t md:text-t lg:text-t xl:text-t font-bold","body-t-medium":"text-ss sm:text-t md:text-t lg:text-t xl:text-t font-medium","body-ss-medium":"text-ss sm:text-ss md:text-ss lg:text-ss xl:text-ss font-medium"},getTypographyClasses=t=>x[t],m={primary:"text-primary",secondary:"text-secondary","neutral-darker":"text-neutral-darker","neutral-dark":"text-neutral-dark","neutral-main":"text-neutral-main",white:"text-white",inherit:"text-inherit"},s=t.forwardRef(({variant:s="body-m-medium",color:l="inherit",as:d,className:o,children:h,...a},n)=>{const r=d||(t=>t.startsWith("h")?t.split("-")[0]:"p")(s);return t.createElement(r,{ref:n,className:e(m[l],x[s],o),...a},h)});s.displayName="Typography";export{s as Typography,getTypographyClasses};
|
package/dist/types/Input.js
CHANGED
|
@@ -25,18 +25,16 @@ const Input = React.forwardRef(({ state = 'default', label, value, onChange, hel
|
|
|
25
25
|
props.onBlur?.(e);
|
|
26
26
|
}
|
|
27
27
|
};
|
|
28
|
-
const baseContainerClasses = 'relative flex items-center border rounded-lg transition-all duration-300 w-full
|
|
28
|
+
const baseContainerClasses = 'relative flex items-center border rounded-lg transition-all duration-300 w-full';
|
|
29
29
|
const baseLabelClasses = 'absolute pointer-events-none transition-all duration-300';
|
|
30
30
|
const baseInputClasses = 'peer w-full h-full bg-transparent outline-none font-medium disabled:text-neutral-light';
|
|
31
31
|
const baseIconClasses = 'absolute transition-colors duration-300';
|
|
32
32
|
const containerClasses = cn(baseContainerClasses,
|
|
33
|
-
//
|
|
33
|
+
// SSR-safe height based on mobile detection
|
|
34
34
|
{
|
|
35
|
-
'h-
|
|
36
|
-
'h-
|
|
37
|
-
},
|
|
38
|
-
// Enhanced responsive breakpoints for client-side optimization
|
|
39
|
-
'transition-all duration-300', {
|
|
35
|
+
'h-12': actualIsMobile,
|
|
36
|
+
'h-14': !actualIsMobile,
|
|
37
|
+
}, 'transition-all duration-300', {
|
|
40
38
|
'border-neutral-light': state === 'default' && !isFocused,
|
|
41
39
|
'border-primary': state === 'default' && isFocused,
|
|
42
40
|
'border-error': state === 'error',
|
|
@@ -44,18 +42,16 @@ const Input = React.forwardRef(({ state = 'default', label, value, onChange, hel
|
|
|
44
42
|
}, containerClassName);
|
|
45
43
|
const labelClasses = cn(baseLabelClasses, {
|
|
46
44
|
'-top-2.5 bg-white px-1 mx-3 font-medium': isLabelFloated,
|
|
47
|
-
//
|
|
48
|
-
'text-xs
|
|
49
|
-
'text-s
|
|
50
|
-
'text-s
|
|
51
|
-
'text-m
|
|
52
|
-
//
|
|
53
|
-
'right-
|
|
54
|
-
'right-3 sm:right-3 md:right-4 lg:right-5 xl:right-5': !startIcon,
|
|
45
|
+
// SSR-safe label text sizes
|
|
46
|
+
'text-xs': isLabelFloated && actualIsMobile,
|
|
47
|
+
'text-s': isLabelFloated && !actualIsMobile,
|
|
48
|
+
'text-s font-medium': !isLabelFloated && actualIsMobile,
|
|
49
|
+
'text-m font-medium': !isLabelFloated && !actualIsMobile,
|
|
50
|
+
// Positioning
|
|
51
|
+
'right-3': !startIcon,
|
|
55
52
|
'top-1/2 -translate-y-1/2': !isLabelFloated,
|
|
56
|
-
|
|
57
|
-
'right-
|
|
58
|
-
'right-4 sm:right-5 md:right-6 lg:right-7 xl:right-7': !isLabelFloated && !startIcon,
|
|
53
|
+
'right-11': !isLabelFloated && startIcon,
|
|
54
|
+
'right-4': !isLabelFloated && !startIcon,
|
|
59
55
|
// Colors
|
|
60
56
|
'text-neutral-main': !isFocused && state === 'default',
|
|
61
57
|
'text-neutral-light': isDisabled,
|
|
@@ -63,39 +59,37 @@ const Input = React.forwardRef(({ state = 'default', label, value, onChange, hel
|
|
|
63
59
|
'text-error': isLabelFloated && state === 'error',
|
|
64
60
|
});
|
|
65
61
|
const inputClasses = cn(baseInputClasses,
|
|
66
|
-
//
|
|
62
|
+
// SSR-safe text size
|
|
67
63
|
{
|
|
68
|
-
'text-s
|
|
69
|
-
'text-m
|
|
64
|
+
'text-s': actualIsMobile,
|
|
65
|
+
'text-m': !actualIsMobile,
|
|
70
66
|
}, {
|
|
71
|
-
//
|
|
72
|
-
'pr-
|
|
73
|
-
'pl-
|
|
74
|
-
'px-
|
|
75
|
-
'pr-
|
|
76
|
-
'pl-
|
|
67
|
+
// Padding with icons
|
|
68
|
+
'pr-10': startIcon,
|
|
69
|
+
'pl-10': endIcon,
|
|
70
|
+
'px-3': !startIcon && !endIcon,
|
|
71
|
+
'pr-3 pl-10': !startIcon && endIcon,
|
|
72
|
+
'pl-3 pr-10': startIcon && !endIcon,
|
|
77
73
|
// States
|
|
78
74
|
'cursor-not-allowed text-red-500': isDisabled,
|
|
79
75
|
'text-neutral-dark': !isFocused,
|
|
80
76
|
'text-neutral-darker': isFocused,
|
|
81
77
|
});
|
|
82
78
|
const iconClasses = cn(baseIconClasses,
|
|
83
|
-
//
|
|
79
|
+
// SSR-safe icon size
|
|
84
80
|
{
|
|
85
|
-
'h-
|
|
86
|
-
'h-
|
|
81
|
+
'h-4 w-4': actualIsMobile,
|
|
82
|
+
'h-5 w-5': !actualIsMobile,
|
|
87
83
|
}, {
|
|
88
84
|
'text-neutral-main': state !== 'error' && !isFocused,
|
|
89
85
|
'text-primary': state === 'default' && isFocused,
|
|
90
86
|
'text-error': state === 'error',
|
|
91
87
|
'text-neutral-light': isDisabled,
|
|
92
88
|
});
|
|
93
|
-
const helperTextClasses = cn('font-light mt-1 h-4',
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
'text-xs sm:text-s md:text-m lg:text-l xl:text-l': actualIsMobile,
|
|
98
|
-
'text-s sm:text-m md:text-l lg:text-xl xl:text-xl': !actualIsMobile,
|
|
89
|
+
const helperTextClasses = cn('font-light mt-1 h-4 px-3', {
|
|
90
|
+
// SSR-safe text sizing
|
|
91
|
+
'text-xs': actualIsMobile,
|
|
92
|
+
'text-s': !actualIsMobile,
|
|
99
93
|
}, {
|
|
100
94
|
'text-neutral-main': state === 'default',
|
|
101
95
|
'text-primary': state === 'default' && isFocused,
|
|
@@ -104,7 +98,7 @@ const Input = React.forwardRef(({ state = 'default', label, value, onChange, hel
|
|
|
104
98
|
});
|
|
105
99
|
// If both label and placeholder are provided, hide placeholder when not focused
|
|
106
100
|
const computedPlaceholder = placeholder && !isFocused ? undefined : placeholder;
|
|
107
|
-
return (jsxs("div", { children: [jsxs("div", { className: containerClasses, children: [endIcon && (jsx("span", { className: cn(iconClasses, 'left-
|
|
101
|
+
return (jsxs("div", { children: [jsxs("div", { className: containerClasses, children: [endIcon && (jsx("span", { className: cn(iconClasses, 'left-3'), children: endIcon })), jsx("label", { htmlFor: id, className: labelClasses, children: label }), jsx("input", { ref: ref, id: id, type: type, value: value, onChange: onChange, onFocus: handleFocus, onBlur: handleBlur, disabled: isDisabled, placeholder: computedPlaceholder, className: inputClasses, ...props }), startIcon && (jsx("span", { className: cn(iconClasses, 'right-3'), children: startIcon }))] }), helperText && jsx("p", { className: helperTextClasses, children: helperText })] }));
|
|
108
102
|
});
|
|
109
103
|
Input.displayName = 'Input';
|
|
110
104
|
|
package/dist/types/Typography.js
CHANGED
|
@@ -2,30 +2,30 @@ import React from 'react';
|
|
|
2
2
|
import cn from './utils.js';
|
|
3
3
|
|
|
4
4
|
const variantClasses = {
|
|
5
|
-
// Headings with Fat weight (900) -
|
|
6
|
-
h1: 'text-
|
|
7
|
-
h2: 'text-
|
|
8
|
-
h3: 'text-
|
|
9
|
-
h4: 'text-
|
|
10
|
-
h5: 'text-
|
|
11
|
-
h6: 'text-
|
|
12
|
-
// Body Copy with specific weight variants -
|
|
13
|
-
'body-xl-heavy': 'text-
|
|
14
|
-
'body-l-heavy': 'text-
|
|
15
|
-
'body-l-bold': 'text-
|
|
16
|
-
'body-l-medium': 'text-
|
|
17
|
-
'body-m-heavy': 'text-
|
|
18
|
-
'body-m-bold': 'text-
|
|
19
|
-
'body-m-medium': 'text-
|
|
20
|
-
'body-s-heavy': 'text-
|
|
21
|
-
'body-s-bold': 'text-
|
|
22
|
-
'body-s-medium': 'text-
|
|
23
|
-
'body-ms-bold': 'text-
|
|
24
|
-
'body-ms-medium': 'text-
|
|
25
|
-
'body-xs-bold': 'text-
|
|
26
|
-
'body-xs-medium': 'text-
|
|
27
|
-
'body-t-bold': 'text-ss sm:text-
|
|
28
|
-
'body-t-medium': 'text-ss sm:text-
|
|
5
|
+
// Headings with Fat weight (900) - Responsive scaling
|
|
6
|
+
h1: 'text-h3 sm:text-h2 md:text-h1 lg:text-h1 xl:text-h1 font-fat',
|
|
7
|
+
h2: 'text-h4 sm:text-h3 md:text-h2 lg:text-h2 xl:text-h2 font-fat',
|
|
8
|
+
h3: 'text-h5 sm:text-h4 md:text-h3 lg:text-h3 xl:text-h3 font-fat',
|
|
9
|
+
h4: 'text-h6 sm:text-h5 md:text-h4 lg:text-h4 xl:text-h4 font-heavy',
|
|
10
|
+
h5: 'text-l sm:text-xl md:text-h5 lg:text-h5 xl:text-h5 font-heavy',
|
|
11
|
+
h6: 'text-m sm:text-l md:text-h6 lg:text-h6 xl:text-h6 font-heavy',
|
|
12
|
+
// Body Copy with specific weight variants - Responsive scaling
|
|
13
|
+
'body-xl-heavy': 'text-l sm:text-xl md:text-xl lg:text-xl xl:text-xl font-heavy',
|
|
14
|
+
'body-l-heavy': 'text-m sm:text-l md:text-l lg:text-l xl:text-l font-heavy',
|
|
15
|
+
'body-l-bold': 'text-m sm:text-l md:text-l lg:text-l xl:text-l font-bold',
|
|
16
|
+
'body-l-medium': 'text-m sm:text-l md:text-l lg:text-l xl:text-l font-medium',
|
|
17
|
+
'body-m-heavy': 'text-s sm:text-m md:text-m lg:text-m xl:text-m font-heavy',
|
|
18
|
+
'body-m-bold': 'text-s sm:text-m md:text-m lg:text-m xl:text-m font-bold',
|
|
19
|
+
'body-m-medium': 'text-s sm:text-m md:text-m lg:text-m xl:text-m font-medium',
|
|
20
|
+
'body-s-heavy': 'text-ms sm:text-s md:text-s lg:text-s xl:text-s font-heavy',
|
|
21
|
+
'body-s-bold': 'text-ms sm:text-s md:text-s lg:text-s xl:text-s font-bold',
|
|
22
|
+
'body-s-medium': 'text-ms sm:text-s md:text-s lg:text-s xl:text-s font-medium',
|
|
23
|
+
'body-ms-bold': 'text-xs sm:text-ms md:text-ms lg:text-ms xl:text-ms font-bold',
|
|
24
|
+
'body-ms-medium': 'text-xs sm:text-ms md:text-ms lg:text-ms xl:text-ms font-medium',
|
|
25
|
+
'body-xs-bold': 'text-t sm:text-xs md:text-xs lg:text-xs xl:text-xs font-bold',
|
|
26
|
+
'body-xs-medium': 'text-t sm:text-xs md:text-xs lg:text-xs xl:text-xs font-medium',
|
|
27
|
+
'body-t-bold': 'text-ss sm:text-t md:text-t lg:text-t xl:text-t font-bold',
|
|
28
|
+
'body-t-medium': 'text-ss sm:text-t md:text-t lg:text-t xl:text-t font-medium',
|
|
29
29
|
'body-ss-medium': 'text-ss sm:text-ss md:text-ss lg:text-ss xl:text-ss font-medium',
|
|
30
30
|
};
|
|
31
31
|
// Export for reuse in other components
|