@ews-admin/global-design-system 1.0.0
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 +195 -0
- package/dist/components/Button/Button.d.ts +30 -0
- package/dist/components/Button/Button.d.ts.map +1 -0
- package/dist/components/Button/index.d.ts +3 -0
- package/dist/components/Button/index.d.ts.map +1 -0
- package/dist/components/Input/Input.d.ts +38 -0
- package/dist/components/Input/Input.d.ts.map +1 -0
- package/dist/components/Input/index.d.ts +3 -0
- package/dist/components/Input/index.d.ts.map +1 -0
- package/dist/icons/ArrowRight.d.ts +4 -0
- package/dist/icons/ArrowRight.d.ts.map +1 -0
- package/dist/icons/Check.d.ts +4 -0
- package/dist/icons/Check.d.ts.map +1 -0
- package/dist/icons/Icon.d.ts +14 -0
- package/dist/icons/Icon.d.ts.map +1 -0
- package/dist/icons/Search.d.ts +4 -0
- package/dist/icons/Search.d.ts.map +1 -0
- package/dist/icons/index.d.ts +6 -0
- package/dist/icons/index.d.ts.map +1 -0
- package/dist/index.css +1 -0
- package/dist/index.d.ts +121 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.esm.css +1 -0
- package/dist/index.esm.js +124 -0
- package/dist/index.esm.js.map +1 -0
- package/dist/index.js +136 -0
- package/dist/index.js.map +1 -0
- package/dist/utils/index.d.ts +35 -0
- package/dist/utils/index.d.ts.map +1 -0
- package/package.json +70 -0
- package/src/components/Button/Button.tsx +117 -0
- package/src/components/Button/index.ts +2 -0
- package/src/components/Input/Input.tsx +145 -0
- package/src/components/Input/index.ts +2 -0
- package/src/icons/ArrowRight.tsx +9 -0
- package/src/icons/Check.tsx +8 -0
- package/src/icons/Icon.tsx +40 -0
- package/src/icons/Search.tsx +9 -0
- package/src/icons/index.ts +5 -0
- package/src/index.ts +16 -0
- package/src/styles/index.css +95 -0
- package/src/utils/index.ts +68 -0
package/README.md
ADDED
|
@@ -0,0 +1,195 @@
|
|
|
1
|
+
# EWS Global Design System
|
|
2
|
+
|
|
3
|
+
A comprehensive design system for EWS (Erco Web Solutions) applications, providing reusable React components, icons, and utilities.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- 🎨 **Consistent Design**: Unified design language across all EWS applications
|
|
8
|
+
- 📦 **NPM Package**: Easy to install and use in any React project
|
|
9
|
+
- 📚 **Storybook**: Interactive component documentation and testing
|
|
10
|
+
- 🎯 **TypeScript**: Full TypeScript support with type definitions
|
|
11
|
+
- 🎨 **Customizable**: Flexible theming and styling options
|
|
12
|
+
- ♿ **Accessible**: Built with accessibility best practices
|
|
13
|
+
|
|
14
|
+
## Installation
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
pnpm add @ews-admin/global-design-system
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## Quick Start
|
|
21
|
+
|
|
22
|
+
```tsx
|
|
23
|
+
import { Button, Input, ArrowRight } from "@ews-admin/global-design-system";
|
|
24
|
+
|
|
25
|
+
function App() {
|
|
26
|
+
return (
|
|
27
|
+
<div>
|
|
28
|
+
<Button variant="primary" rightIcon={<ArrowRight />}>
|
|
29
|
+
Click me
|
|
30
|
+
</Button>
|
|
31
|
+
<Input label="Email" placeholder="Enter your email" type="email" />
|
|
32
|
+
</div>
|
|
33
|
+
);
|
|
34
|
+
}
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
## Components
|
|
38
|
+
|
|
39
|
+
### Button
|
|
40
|
+
|
|
41
|
+
A versatile button component with multiple variants and sizes.
|
|
42
|
+
|
|
43
|
+
```tsx
|
|
44
|
+
<Button variant="primary" size="md" loading={false}>
|
|
45
|
+
Button Text
|
|
46
|
+
</Button>
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
**Props:**
|
|
50
|
+
|
|
51
|
+
- `variant`: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'ghost'
|
|
52
|
+
- `size`: 'sm' | 'md' | 'lg'
|
|
53
|
+
- `loading`: boolean
|
|
54
|
+
- `fullWidth`: boolean
|
|
55
|
+
- `leftIcon`: ReactNode
|
|
56
|
+
- `rightIcon`: ReactNode
|
|
57
|
+
|
|
58
|
+
### Input
|
|
59
|
+
|
|
60
|
+
A flexible input component with validation states and icons.
|
|
61
|
+
|
|
62
|
+
```tsx
|
|
63
|
+
<Input
|
|
64
|
+
label="Email"
|
|
65
|
+
placeholder="Enter your email"
|
|
66
|
+
variant="default"
|
|
67
|
+
helperText="We'll never share your email"
|
|
68
|
+
/>
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
**Props:**
|
|
72
|
+
|
|
73
|
+
- `variant`: 'default' | 'error' | 'success'
|
|
74
|
+
- `size`: 'sm' | 'md' | 'lg'
|
|
75
|
+
- `label`: string
|
|
76
|
+
- `helperText`: string
|
|
77
|
+
- `error`: string
|
|
78
|
+
- `leftIcon`: ReactNode
|
|
79
|
+
- `rightIcon`: ReactNode
|
|
80
|
+
|
|
81
|
+
## Icons
|
|
82
|
+
|
|
83
|
+
The design system includes a set of commonly used icons:
|
|
84
|
+
|
|
85
|
+
```tsx
|
|
86
|
+
import { ArrowRight, Check, Search } from '@ews/global-design-system';
|
|
87
|
+
|
|
88
|
+
<ArrowRight size="md" color="#2563eb" />
|
|
89
|
+
<Check size="lg" />
|
|
90
|
+
<Search size="sm" />
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
## Utilities
|
|
94
|
+
|
|
95
|
+
### Class Name Utility
|
|
96
|
+
|
|
97
|
+
```tsx
|
|
98
|
+
import { cn } from "@ews-admin/global-design-system";
|
|
99
|
+
|
|
100
|
+
const className = cn("px-4 py-2", "bg-blue-500", "text-white");
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
### Formatting Utilities
|
|
104
|
+
|
|
105
|
+
```tsx
|
|
106
|
+
import { formatCurrency, formatDate } from "@ews-admin/global-design-system";
|
|
107
|
+
|
|
108
|
+
formatCurrency(1234.56); // "$1,234.56"
|
|
109
|
+
formatDate(new Date()); // "December 7, 2023"
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
### ID Generation
|
|
113
|
+
|
|
114
|
+
```tsx
|
|
115
|
+
import { generateId } from "@ews/global-design-system";
|
|
116
|
+
|
|
117
|
+
const id = generateId("prefix"); // "prefix-abc123def"
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
## Development
|
|
121
|
+
|
|
122
|
+
### Prerequisites
|
|
123
|
+
|
|
124
|
+
- Node.js 16+
|
|
125
|
+
- pnpm (recommended) or npm
|
|
126
|
+
|
|
127
|
+
### Setup
|
|
128
|
+
|
|
129
|
+
```bash
|
|
130
|
+
# Install dependencies
|
|
131
|
+
pnpm install
|
|
132
|
+
|
|
133
|
+
# Start Storybook
|
|
134
|
+
pnpm storybook
|
|
135
|
+
|
|
136
|
+
# Build the package
|
|
137
|
+
pnpm build
|
|
138
|
+
|
|
139
|
+
# Run linting
|
|
140
|
+
pnpm lint
|
|
141
|
+
|
|
142
|
+
# Run type checking
|
|
143
|
+
pnpm type-check
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
### Storybook
|
|
147
|
+
|
|
148
|
+
The design system includes a comprehensive Storybook for component documentation and testing:
|
|
149
|
+
|
|
150
|
+
```bash
|
|
151
|
+
npm run storybook
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
Visit `http://localhost:6006` to view the Storybook.
|
|
155
|
+
|
|
156
|
+
## Project Structure
|
|
157
|
+
|
|
158
|
+
```
|
|
159
|
+
src/
|
|
160
|
+
├── components/ # React components
|
|
161
|
+
│ ├── Button/
|
|
162
|
+
│ └── Input/
|
|
163
|
+
├── icons/ # Icon components
|
|
164
|
+
│ ├── Icon.tsx
|
|
165
|
+
│ ├── ArrowRight.tsx
|
|
166
|
+
│ ├── Check.tsx
|
|
167
|
+
│ └── Search.tsx
|
|
168
|
+
├── utils/ # Utility functions
|
|
169
|
+
│ └── index.ts
|
|
170
|
+
├── styles/ # Global styles
|
|
171
|
+
│ └── index.css
|
|
172
|
+
└── index.ts # Main export file
|
|
173
|
+
|
|
174
|
+
stories/ # Storybook stories
|
|
175
|
+
├── Components/
|
|
176
|
+
├── Icons/
|
|
177
|
+
└── Utils/
|
|
178
|
+
```
|
|
179
|
+
|
|
180
|
+
## Contributing
|
|
181
|
+
|
|
182
|
+
1. Fork the repository
|
|
183
|
+
2. Create a feature branch
|
|
184
|
+
3. Make your changes
|
|
185
|
+
4. Add stories for new components
|
|
186
|
+
5. Run tests and linting
|
|
187
|
+
6. Submit a pull request
|
|
188
|
+
|
|
189
|
+
## License
|
|
190
|
+
|
|
191
|
+
MIT License - see LICENSE file for details.
|
|
192
|
+
|
|
193
|
+
## Support
|
|
194
|
+
|
|
195
|
+
For questions and support, please contact the EWS development team.
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
3
|
+
/**
|
|
4
|
+
* Button variant
|
|
5
|
+
*/
|
|
6
|
+
variant?: "primary" | "secondary" | "success" | "warning" | "error" | "ghost";
|
|
7
|
+
/**
|
|
8
|
+
* Button size
|
|
9
|
+
*/
|
|
10
|
+
size?: "sm" | "md" | "lg";
|
|
11
|
+
/**
|
|
12
|
+
* Whether the button is in a loading state
|
|
13
|
+
*/
|
|
14
|
+
loading?: boolean;
|
|
15
|
+
/**
|
|
16
|
+
* Whether the button should take full width
|
|
17
|
+
*/
|
|
18
|
+
fullWidth?: boolean;
|
|
19
|
+
/**
|
|
20
|
+
* Icon to display before the button text
|
|
21
|
+
*/
|
|
22
|
+
leftIcon?: React.ReactNode;
|
|
23
|
+
/**
|
|
24
|
+
* Icon to display after the button text
|
|
25
|
+
*/
|
|
26
|
+
rightIcon?: React.ReactNode;
|
|
27
|
+
}
|
|
28
|
+
declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
29
|
+
export { Button };
|
|
30
|
+
//# sourceMappingURL=Button.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;IAC9E;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,QAAA,MAAM,MAAM,uFAiFX,CAAC;AAIF,OAAO,EAAE,MAAM,EAAE,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC"}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
|
|
3
|
+
/**
|
|
4
|
+
* Input variant
|
|
5
|
+
*/
|
|
6
|
+
variant?: "default" | "error" | "success";
|
|
7
|
+
/**
|
|
8
|
+
* Input size
|
|
9
|
+
*/
|
|
10
|
+
size?: "sm" | "md" | "lg";
|
|
11
|
+
/**
|
|
12
|
+
* Label for the input
|
|
13
|
+
*/
|
|
14
|
+
label?: string;
|
|
15
|
+
/**
|
|
16
|
+
* Helper text to display below the input
|
|
17
|
+
*/
|
|
18
|
+
helperText?: string;
|
|
19
|
+
/**
|
|
20
|
+
* Error message to display
|
|
21
|
+
*/
|
|
22
|
+
error?: string;
|
|
23
|
+
/**
|
|
24
|
+
* Icon to display before the input
|
|
25
|
+
*/
|
|
26
|
+
leftIcon?: React.ReactNode;
|
|
27
|
+
/**
|
|
28
|
+
* Icon to display after the input
|
|
29
|
+
*/
|
|
30
|
+
rightIcon?: React.ReactNode;
|
|
31
|
+
/**
|
|
32
|
+
* Whether the input should take full width
|
|
33
|
+
*/
|
|
34
|
+
fullWidth?: boolean;
|
|
35
|
+
}
|
|
36
|
+
declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
|
|
37
|
+
export { Input };
|
|
38
|
+
//# sourceMappingURL=Input.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IACjE;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IAC1C;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,QAAA,MAAM,KAAK,qFAqGV,CAAC;AAIF,OAAO,EAAE,KAAK,EAAE,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ArrowRight.d.ts","sourceRoot":"","sources":["../../src/icons/ArrowRight.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEzC,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAK5D,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Check.d.ts","sourceRoot":"","sources":["../../src/icons/Check.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEzC,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAIvD,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export interface IconProps extends React.SVGProps<SVGSVGElement> {
|
|
3
|
+
/**
|
|
4
|
+
* Icon size
|
|
5
|
+
*/
|
|
6
|
+
size?: "sm" | "md" | "lg" | "xl";
|
|
7
|
+
/**
|
|
8
|
+
* Icon color
|
|
9
|
+
*/
|
|
10
|
+
color?: string;
|
|
11
|
+
}
|
|
12
|
+
declare const Icon: React.ForwardRefExoticComponent<Omit<IconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
|
|
13
|
+
export { Icon };
|
|
14
|
+
//# sourceMappingURL=Icon.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/icons/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC;IAC9D;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,IAAI,8FAsBT,CAAC;AAIF,OAAO,EAAE,IAAI,EAAE,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Search.d.ts","sourceRoot":"","sources":["../../src/icons/Search.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEzC,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAKxD,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/icons/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}
|
package/dist/index.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
:root{--ews-primary:#2563eb;--ews-primary-hover:#1d4ed8;--ews-primary-light:#dbeafe;--ews-secondary:#64748b;--ews-secondary-hover:#475569;--ews-success:#059669;--ews-success-hover:#047857;--ews-warning:#d97706;--ews-warning-hover:#b45309;--ews-error:#dc2626;--ews-error-hover:#b91c1c;--ews-white:#fff;--ews-gray-50:#f8fafc;--ews-gray-100:#f1f5f9;--ews-gray-200:#e2e8f0;--ews-gray-300:#cbd5e1;--ews-gray-400:#94a3b8;--ews-gray-500:#64748b;--ews-gray-600:#475569;--ews-gray-700:#334155;--ews-gray-800:#1e293b;--ews-gray-900:#0f172a;--ews-space-1:0.25rem;--ews-space-2:0.5rem;--ews-space-3:0.75rem;--ews-space-4:1rem;--ews-space-5:1.25rem;--ews-space-6:1.5rem;--ews-space-8:2rem;--ews-space-10:2.5rem;--ews-space-12:3rem;--ews-radius-sm:0.25rem;--ews-radius-md:0.375rem;--ews-radius-lg:0.5rem;--ews-radius-xl:0.75rem;--ews-font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;--ews-font-mono:"SF Mono","Monaco","Inconsolata","Roboto Mono","Oxygen Mono","Ubuntu Monospace","Source Code Pro","Fira Code","Droid Sans Mono","Courier New",monospace;--ews-text-xs:0.75rem;--ews-text-sm:0.875rem;--ews-text-base:1rem;--ews-text-lg:1.125rem;--ews-text-xl:1.25rem;--ews-text-2xl:1.5rem;--ews-text-3xl:1.875rem;--ews-shadow-sm:0 1px 2px 0 #0000000d;--ews-shadow-md:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--ews-shadow-lg:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}*{box-sizing:border-box}body{background-color:var(--ews-white);color:var(--ews-gray-900);font-family:var(--ews-font-sans);line-height:1.5}.ews-sr-only{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ClassValue } from 'clsx';
|
|
3
|
+
|
|
4
|
+
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
5
|
+
/**
|
|
6
|
+
* Button variant
|
|
7
|
+
*/
|
|
8
|
+
variant?: "primary" | "secondary" | "success" | "warning" | "error" | "ghost";
|
|
9
|
+
/**
|
|
10
|
+
* Button size
|
|
11
|
+
*/
|
|
12
|
+
size?: "sm" | "md" | "lg";
|
|
13
|
+
/**
|
|
14
|
+
* Whether the button is in a loading state
|
|
15
|
+
*/
|
|
16
|
+
loading?: boolean;
|
|
17
|
+
/**
|
|
18
|
+
* Whether the button should take full width
|
|
19
|
+
*/
|
|
20
|
+
fullWidth?: boolean;
|
|
21
|
+
/**
|
|
22
|
+
* Icon to display before the button text
|
|
23
|
+
*/
|
|
24
|
+
leftIcon?: React.ReactNode;
|
|
25
|
+
/**
|
|
26
|
+
* Icon to display after the button text
|
|
27
|
+
*/
|
|
28
|
+
rightIcon?: React.ReactNode;
|
|
29
|
+
}
|
|
30
|
+
declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
31
|
+
|
|
32
|
+
interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
|
|
33
|
+
/**
|
|
34
|
+
* Input variant
|
|
35
|
+
*/
|
|
36
|
+
variant?: "default" | "error" | "success";
|
|
37
|
+
/**
|
|
38
|
+
* Input size
|
|
39
|
+
*/
|
|
40
|
+
size?: "sm" | "md" | "lg";
|
|
41
|
+
/**
|
|
42
|
+
* Label for the input
|
|
43
|
+
*/
|
|
44
|
+
label?: string;
|
|
45
|
+
/**
|
|
46
|
+
* Helper text to display below the input
|
|
47
|
+
*/
|
|
48
|
+
helperText?: string;
|
|
49
|
+
/**
|
|
50
|
+
* Error message to display
|
|
51
|
+
*/
|
|
52
|
+
error?: string;
|
|
53
|
+
/**
|
|
54
|
+
* Icon to display before the input
|
|
55
|
+
*/
|
|
56
|
+
leftIcon?: React.ReactNode;
|
|
57
|
+
/**
|
|
58
|
+
* Icon to display after the input
|
|
59
|
+
*/
|
|
60
|
+
rightIcon?: React.ReactNode;
|
|
61
|
+
/**
|
|
62
|
+
* Whether the input should take full width
|
|
63
|
+
*/
|
|
64
|
+
fullWidth?: boolean;
|
|
65
|
+
}
|
|
66
|
+
declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
|
|
67
|
+
|
|
68
|
+
interface IconProps extends React.SVGProps<SVGSVGElement> {
|
|
69
|
+
/**
|
|
70
|
+
* Icon size
|
|
71
|
+
*/
|
|
72
|
+
size?: "sm" | "md" | "lg" | "xl";
|
|
73
|
+
/**
|
|
74
|
+
* Icon color
|
|
75
|
+
*/
|
|
76
|
+
color?: string;
|
|
77
|
+
}
|
|
78
|
+
declare const Icon: React.ForwardRefExoticComponent<Omit<IconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
|
|
79
|
+
|
|
80
|
+
declare const ArrowRight: React.FC<Omit<IconProps, "children">>;
|
|
81
|
+
|
|
82
|
+
declare const Check: React.FC<Omit<IconProps, "children">>;
|
|
83
|
+
|
|
84
|
+
declare const Search: React.FC<Omit<IconProps, "children">>;
|
|
85
|
+
|
|
86
|
+
/**
|
|
87
|
+
* Utility function to merge class names
|
|
88
|
+
* @param inputs - Class values to merge
|
|
89
|
+
* @returns Merged class string
|
|
90
|
+
*/
|
|
91
|
+
declare function cn(...inputs: ClassValue[]): string;
|
|
92
|
+
/**
|
|
93
|
+
* Utility function to format currency
|
|
94
|
+
* @param amount - Amount to format
|
|
95
|
+
* @param currency - Currency code (default: 'USD')
|
|
96
|
+
* @returns Formatted currency string
|
|
97
|
+
*/
|
|
98
|
+
declare function formatCurrency(amount: number, currency?: string): string;
|
|
99
|
+
/**
|
|
100
|
+
* Utility function to format date
|
|
101
|
+
* @param date - Date to format
|
|
102
|
+
* @param options - Intl.DateTimeFormat options
|
|
103
|
+
* @returns Formatted date string
|
|
104
|
+
*/
|
|
105
|
+
declare function formatDate(date: Date | string | number, options?: Intl.DateTimeFormatOptions): string;
|
|
106
|
+
/**
|
|
107
|
+
* Utility function to debounce function calls
|
|
108
|
+
* @param func - Function to debounce
|
|
109
|
+
* @param wait - Wait time in milliseconds
|
|
110
|
+
* @returns Debounced function
|
|
111
|
+
*/
|
|
112
|
+
declare function debounce<T extends (...args: any[]) => any>(func: T, wait: number): (...args: Parameters<T>) => void;
|
|
113
|
+
/**
|
|
114
|
+
* Utility function to generate unique ID
|
|
115
|
+
* @param prefix - Optional prefix for the ID
|
|
116
|
+
* @returns Unique ID string
|
|
117
|
+
*/
|
|
118
|
+
declare function generateId(prefix?: string): string;
|
|
119
|
+
|
|
120
|
+
export { ArrowRight, Button, Check, Icon, Input, Search, cn, debounce, formatCurrency, formatDate, generateId };
|
|
121
|
+
export type { ButtonProps, IconProps, InputProps };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,YAAY,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAEvD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,YAAY,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGrD,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAC1D,YAAY,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAGzC,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,cAAc,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAG/E,OAAO,oBAAoB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
:root{--ews-primary:#2563eb;--ews-primary-hover:#1d4ed8;--ews-primary-light:#dbeafe;--ews-secondary:#64748b;--ews-secondary-hover:#475569;--ews-success:#059669;--ews-success-hover:#047857;--ews-warning:#d97706;--ews-warning-hover:#b45309;--ews-error:#dc2626;--ews-error-hover:#b91c1c;--ews-white:#fff;--ews-gray-50:#f8fafc;--ews-gray-100:#f1f5f9;--ews-gray-200:#e2e8f0;--ews-gray-300:#cbd5e1;--ews-gray-400:#94a3b8;--ews-gray-500:#64748b;--ews-gray-600:#475569;--ews-gray-700:#334155;--ews-gray-800:#1e293b;--ews-gray-900:#0f172a;--ews-space-1:0.25rem;--ews-space-2:0.5rem;--ews-space-3:0.75rem;--ews-space-4:1rem;--ews-space-5:1.25rem;--ews-space-6:1.5rem;--ews-space-8:2rem;--ews-space-10:2.5rem;--ews-space-12:3rem;--ews-radius-sm:0.25rem;--ews-radius-md:0.375rem;--ews-radius-lg:0.5rem;--ews-radius-xl:0.75rem;--ews-font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;--ews-font-mono:"SF Mono","Monaco","Inconsolata","Roboto Mono","Oxygen Mono","Ubuntu Monospace","Source Code Pro","Fira Code","Droid Sans Mono","Courier New",monospace;--ews-text-xs:0.75rem;--ews-text-sm:0.875rem;--ews-text-base:1rem;--ews-text-lg:1.125rem;--ews-text-xl:1.25rem;--ews-text-2xl:1.5rem;--ews-text-3xl:1.875rem;--ews-shadow-sm:0 1px 2px 0 #0000000d;--ews-shadow-md:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--ews-shadow-lg:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}*{box-sizing:border-box}body{background-color:var(--ews-white);color:var(--ews-gray-900);font-family:var(--ews-font-sans);line-height:1.5}.ews-sr-only{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}
|
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
|
|
4
|
+
function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* Utility function to merge class names
|
|
8
|
+
* @param inputs - Class values to merge
|
|
9
|
+
* @returns Merged class string
|
|
10
|
+
*/
|
|
11
|
+
function cn(...inputs) {
|
|
12
|
+
return clsx(inputs);
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* Utility function to format currency
|
|
16
|
+
* @param amount - Amount to format
|
|
17
|
+
* @param currency - Currency code (default: 'USD')
|
|
18
|
+
* @returns Formatted currency string
|
|
19
|
+
*/
|
|
20
|
+
function formatCurrency(amount, currency = "USD") {
|
|
21
|
+
return new Intl.NumberFormat("en-US", {
|
|
22
|
+
style: "currency",
|
|
23
|
+
currency,
|
|
24
|
+
}).format(amount);
|
|
25
|
+
}
|
|
26
|
+
/**
|
|
27
|
+
* Utility function to format date
|
|
28
|
+
* @param date - Date to format
|
|
29
|
+
* @param options - Intl.DateTimeFormat options
|
|
30
|
+
* @returns Formatted date string
|
|
31
|
+
*/
|
|
32
|
+
function formatDate(date, options) {
|
|
33
|
+
const dateObj = new Date(date);
|
|
34
|
+
return new Intl.DateTimeFormat("en-US", {
|
|
35
|
+
year: "numeric",
|
|
36
|
+
month: "long",
|
|
37
|
+
day: "numeric",
|
|
38
|
+
...options,
|
|
39
|
+
}).format(dateObj);
|
|
40
|
+
}
|
|
41
|
+
/**
|
|
42
|
+
* Utility function to debounce function calls
|
|
43
|
+
* @param func - Function to debounce
|
|
44
|
+
* @param wait - Wait time in milliseconds
|
|
45
|
+
* @returns Debounced function
|
|
46
|
+
*/
|
|
47
|
+
function debounce(func, wait) {
|
|
48
|
+
let timeout;
|
|
49
|
+
return (...args) => {
|
|
50
|
+
clearTimeout(timeout);
|
|
51
|
+
timeout = setTimeout(() => func(...args), wait);
|
|
52
|
+
};
|
|
53
|
+
}
|
|
54
|
+
/**
|
|
55
|
+
* Utility function to generate unique ID
|
|
56
|
+
* @param prefix - Optional prefix for the ID
|
|
57
|
+
* @returns Unique ID string
|
|
58
|
+
*/
|
|
59
|
+
function generateId(prefix = "ews") {
|
|
60
|
+
return `${prefix}-${Math.random().toString(36).substr(2, 9)}`;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
const Button = React.forwardRef(({ className, variant = "primary", size = "md", loading = false, fullWidth = false, leftIcon, rightIcon, children, disabled, ...props }, ref) => {
|
|
64
|
+
const baseStyles = "inline-flex items-center justify-center font-medium rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none";
|
|
65
|
+
const variants = {
|
|
66
|
+
primary: "bg-[var(--ews-primary)] text-white hover:bg-[var(--ews-primary-hover)] focus:ring-[var(--ews-primary)]",
|
|
67
|
+
secondary: "bg-[var(--ews-gray-200)] text-[var(--ews-gray-900)] hover:bg-[var(--ews-gray-300)] focus:ring-[var(--ews-gray-500)]",
|
|
68
|
+
success: "bg-[var(--ews-success)] text-white hover:bg-[var(--ews-success-hover)] focus:ring-[var(--ews-success)]",
|
|
69
|
+
warning: "bg-[var(--ews-warning)] text-white hover:bg-[var(--ews-warning-hover)] focus:ring-[var(--ews-warning)]",
|
|
70
|
+
error: "bg-[var(--ews-error)] text-white hover:bg-[var(--ews-error-hover)] focus:ring-[var(--ews-error)]",
|
|
71
|
+
ghost: "bg-transparent text-[var(--ews-gray-700)] hover:bg-[var(--ews-gray-100)] focus:ring-[var(--ews-gray-500)]",
|
|
72
|
+
};
|
|
73
|
+
const sizes = {
|
|
74
|
+
sm: "px-3 py-1.5 text-sm",
|
|
75
|
+
md: "px-4 py-2 text-base",
|
|
76
|
+
lg: "px-6 py-3 text-lg",
|
|
77
|
+
};
|
|
78
|
+
return (jsxs("button", { className: cn(baseStyles, variants[variant], sizes[size], fullWidth && "w-full", className), ref: ref, disabled: disabled || loading, ...props, children: [loading && (jsxs("svg", { className: "animate-spin -ml-1 mr-2 h-4 w-4", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] })), !loading && leftIcon && jsx("span", { className: "mr-2", children: leftIcon }), children, !loading && rightIcon && jsx("span", { className: "ml-2", children: rightIcon })] }));
|
|
79
|
+
});
|
|
80
|
+
Button.displayName = "Button";
|
|
81
|
+
|
|
82
|
+
const Input = React.forwardRef(({ className, variant = "default", size = "md", label, helperText, error, leftIcon, rightIcon, fullWidth = false, id, ...props }, ref) => {
|
|
83
|
+
const inputId = id || `input-${Math.random().toString(36).substr(2, 9)}`;
|
|
84
|
+
const hasError = Boolean(error);
|
|
85
|
+
const actualVariant = hasError ? "error" : variant;
|
|
86
|
+
const baseStyles = "block w-full rounded-md border transition-colors focus:outline-none focus:ring-2 focus:ring-offset-0";
|
|
87
|
+
const variants = {
|
|
88
|
+
default: "border-[var(--ews-gray-300)] focus:border-[var(--ews-primary)] focus:ring-[var(--ews-primary)]",
|
|
89
|
+
error: "border-[var(--ews-error)] focus:border-[var(--ews-error)] focus:ring-[var(--ews-error)]",
|
|
90
|
+
success: "border-[var(--ews-success)] focus:border-[var(--ews-success)] focus:ring-[var(--ews-success)]",
|
|
91
|
+
};
|
|
92
|
+
const sizes = {
|
|
93
|
+
sm: "px-3 py-1.5 text-sm",
|
|
94
|
+
md: "px-3 py-2 text-base",
|
|
95
|
+
lg: "px-4 py-3 text-lg",
|
|
96
|
+
};
|
|
97
|
+
const iconSizes = {
|
|
98
|
+
sm: "h-4 w-4",
|
|
99
|
+
md: "h-5 w-5",
|
|
100
|
+
lg: "h-6 w-6",
|
|
101
|
+
};
|
|
102
|
+
return (jsxs("div", { className: cn("space-y-1", fullWidth ? "w-full" : "w-auto"), children: [label && (jsx("label", { htmlFor: inputId, className: "block text-sm font-medium text-[var(--ews-gray-700)]", children: label })), jsxs("div", { className: "relative", children: [leftIcon && (jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none", children: jsx("span", { className: cn("text-[var(--ews-gray-400)]", iconSizes[size]), children: leftIcon }) })), jsx("input", { id: inputId, className: cn(baseStyles, variants[actualVariant], sizes[size], leftIcon && "pl-10", rightIcon && "pr-10", className), ref: ref, ...props }), rightIcon && (jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none", children: jsx("span", { className: cn("text-[var(--ews-gray-400)]", iconSizes[size]), children: rightIcon }) }))] }), (error || helperText) && (jsx("p", { className: cn("text-sm", error ? "text-[var(--ews-error)]" : "text-[var(--ews-gray-500)]"), children: error || helperText }))] }));
|
|
103
|
+
});
|
|
104
|
+
Input.displayName = "Input";
|
|
105
|
+
|
|
106
|
+
const Icon = React.forwardRef(({ size = "md", color = "currentColor", className, ...props }, ref) => {
|
|
107
|
+
const sizes = {
|
|
108
|
+
sm: "h-4 w-4",
|
|
109
|
+
md: "h-5 w-5",
|
|
110
|
+
lg: "h-6 w-6",
|
|
111
|
+
xl: "h-8 w-8",
|
|
112
|
+
};
|
|
113
|
+
return (jsx("svg", { ref: ref, className: `${sizes[size]} ${className || ""}`, fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props }));
|
|
114
|
+
});
|
|
115
|
+
Icon.displayName = "Icon";
|
|
116
|
+
|
|
117
|
+
const ArrowRight = (props) => (jsxs(Icon, { ...props, children: [jsx("path", { d: "M5 12h14" }), jsx("path", { d: "m12 5 7 7-7 7" })] }));
|
|
118
|
+
|
|
119
|
+
const Check = (props) => (jsx(Icon, { ...props, children: jsx("path", { d: "M20 6 9 17l-5-5" }) }));
|
|
120
|
+
|
|
121
|
+
const Search = (props) => (jsxs(Icon, { ...props, children: [jsx("circle", { cx: "11", cy: "11", r: "8" }), jsx("path", { d: "m21 21-4.35-4.35" })] }));
|
|
122
|
+
|
|
123
|
+
export { ArrowRight, Button, Check, Icon, Input, Search, cn, debounce, formatCurrency, formatDate, generateId };
|
|
124
|
+
//# sourceMappingURL=index.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.esm.js","sources":["../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs","../src/utils/index.ts","../src/components/Button/Button.tsx","../src/components/Input/Input.tsx","../src/icons/Icon.tsx","../src/icons/ArrowRight.tsx","../src/icons/Check.tsx","../src/icons/Search.tsx"],"sourcesContent":["function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f)}else for(f in e)e[f]&&(n&&(n+=\" \"),n+=f);return n}export function clsx(){for(var e,t,f=0,n=\"\",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;","import { clsx, type ClassValue } from \"clsx\";\n\n/**\n * Utility function to merge class names\n * @param inputs - Class values to merge\n * @returns Merged class string\n */\nexport function cn(...inputs: ClassValue[]) {\n return clsx(inputs);\n}\n\n/**\n * Utility function to format currency\n * @param amount - Amount to format\n * @param currency - Currency code (default: 'USD')\n * @returns Formatted currency string\n */\nexport function formatCurrency(amount: number, currency = \"USD\"): string {\n return new Intl.NumberFormat(\"en-US\", {\n style: \"currency\",\n currency,\n }).format(amount);\n}\n\n/**\n * Utility function to format date\n * @param date - Date to format\n * @param options - Intl.DateTimeFormat options\n * @returns Formatted date string\n */\nexport function formatDate(\n date: Date | string | number,\n options?: Intl.DateTimeFormatOptions\n): string {\n const dateObj = new Date(date);\n return new Intl.DateTimeFormat(\"en-US\", {\n year: \"numeric\",\n month: \"long\",\n day: \"numeric\",\n ...options,\n }).format(dateObj);\n}\n\n/**\n * Utility function to debounce function calls\n * @param func - Function to debounce\n * @param wait - Wait time in milliseconds\n * @returns Debounced function\n */\nexport function debounce<T extends (...args: any[]) => any>(\n func: T,\n wait: number\n): (...args: Parameters<T>) => void {\n let timeout: ReturnType<typeof setTimeout>;\n return (...args: Parameters<T>) => {\n clearTimeout(timeout);\n timeout = setTimeout(() => func(...args), wait);\n };\n}\n\n/**\n * Utility function to generate unique ID\n * @param prefix - Optional prefix for the ID\n * @returns Unique ID string\n */\nexport function generateId(prefix = \"ews\"): string {\n return `${prefix}-${Math.random().toString(36).substr(2, 9)}`;\n}\n","import React from \"react\";\nimport { cn } from \"../../utils\";\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n /**\n * Button variant\n */\n variant?: \"primary\" | \"secondary\" | \"success\" | \"warning\" | \"error\" | \"ghost\";\n /**\n * Button size\n */\n size?: \"sm\" | \"md\" | \"lg\";\n /**\n * Whether the button is in a loading state\n */\n loading?: boolean;\n /**\n * Whether the button should take full width\n */\n fullWidth?: boolean;\n /**\n * Icon to display before the button text\n */\n leftIcon?: React.ReactNode;\n /**\n * Icon to display after the button text\n */\n rightIcon?: React.ReactNode;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n className,\n variant = \"primary\",\n size = \"md\",\n loading = false,\n fullWidth = false,\n leftIcon,\n rightIcon,\n children,\n disabled,\n ...props\n },\n ref\n ) => {\n const baseStyles =\n \"inline-flex items-center justify-center font-medium rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none\";\n\n const variants = {\n primary:\n \"bg-[var(--ews-primary)] text-white hover:bg-[var(--ews-primary-hover)] focus:ring-[var(--ews-primary)]\",\n secondary:\n \"bg-[var(--ews-gray-200)] text-[var(--ews-gray-900)] hover:bg-[var(--ews-gray-300)] focus:ring-[var(--ews-gray-500)]\",\n success:\n \"bg-[var(--ews-success)] text-white hover:bg-[var(--ews-success-hover)] focus:ring-[var(--ews-success)]\",\n warning:\n \"bg-[var(--ews-warning)] text-white hover:bg-[var(--ews-warning-hover)] focus:ring-[var(--ews-warning)]\",\n error:\n \"bg-[var(--ews-error)] text-white hover:bg-[var(--ews-error-hover)] focus:ring-[var(--ews-error)]\",\n ghost:\n \"bg-transparent text-[var(--ews-gray-700)] hover:bg-[var(--ews-gray-100)] focus:ring-[var(--ews-gray-500)]\",\n };\n\n const sizes = {\n sm: \"px-3 py-1.5 text-sm\",\n md: \"px-4 py-2 text-base\",\n lg: \"px-6 py-3 text-lg\",\n };\n\n return (\n <button\n className={cn(\n baseStyles,\n variants[variant],\n sizes[size],\n fullWidth && \"w-full\",\n className\n )}\n ref={ref}\n disabled={disabled || loading}\n {...props}\n >\n {loading && (\n <svg\n className=\"animate-spin -ml-1 mr-2 h-4 w-4\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n >\n <circle\n className=\"opacity-25\"\n cx=\"12\"\n cy=\"12\"\n r=\"10\"\n stroke=\"currentColor\"\n strokeWidth=\"4\"\n />\n <path\n className=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n />\n </svg>\n )}\n {!loading && leftIcon && <span className=\"mr-2\">{leftIcon}</span>}\n {children}\n {!loading && rightIcon && <span className=\"ml-2\">{rightIcon}</span>}\n </button>\n );\n }\n);\n\nButton.displayName = \"Button\";\n\nexport { Button };\n","import React from \"react\";\nimport { cn } from \"../../utils\";\n\nexport interface InputProps\n extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\"> {\n /**\n * Input variant\n */\n variant?: \"default\" | \"error\" | \"success\";\n /**\n * Input size\n */\n size?: \"sm\" | \"md\" | \"lg\";\n /**\n * Label for the input\n */\n label?: string;\n /**\n * Helper text to display below the input\n */\n helperText?: string;\n /**\n * Error message to display\n */\n error?: string;\n /**\n * Icon to display before the input\n */\n leftIcon?: React.ReactNode;\n /**\n * Icon to display after the input\n */\n rightIcon?: React.ReactNode;\n /**\n * Whether the input should take full width\n */\n fullWidth?: boolean;\n}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n (\n {\n className,\n variant = \"default\",\n size = \"md\",\n label,\n helperText,\n error,\n leftIcon,\n rightIcon,\n fullWidth = false,\n id,\n ...props\n },\n ref\n ) => {\n const inputId = id || `input-${Math.random().toString(36).substr(2, 9)}`;\n const hasError = Boolean(error);\n const actualVariant = hasError ? \"error\" : variant;\n\n const baseStyles =\n \"block w-full rounded-md border transition-colors focus:outline-none focus:ring-2 focus:ring-offset-0\";\n\n const variants = {\n default:\n \"border-[var(--ews-gray-300)] focus:border-[var(--ews-primary)] focus:ring-[var(--ews-primary)]\",\n error:\n \"border-[var(--ews-error)] focus:border-[var(--ews-error)] focus:ring-[var(--ews-error)]\",\n success:\n \"border-[var(--ews-success)] focus:border-[var(--ews-success)] focus:ring-[var(--ews-success)]\",\n };\n\n const sizes = {\n sm: \"px-3 py-1.5 text-sm\",\n md: \"px-3 py-2 text-base\",\n lg: \"px-4 py-3 text-lg\",\n };\n\n const iconSizes = {\n sm: \"h-4 w-4\",\n md: \"h-5 w-5\",\n lg: \"h-6 w-6\",\n };\n\n return (\n <div className={cn(\"space-y-1\", fullWidth ? \"w-full\" : \"w-auto\")}>\n {label && (\n <label\n htmlFor={inputId}\n className=\"block text-sm font-medium text-[var(--ews-gray-700)]\"\n >\n {label}\n </label>\n )}\n <div className=\"relative\">\n {leftIcon && (\n <div className=\"absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none\">\n <span\n className={cn(\"text-[var(--ews-gray-400)]\", iconSizes[size])}\n >\n {leftIcon}\n </span>\n </div>\n )}\n <input\n id={inputId}\n className={cn(\n baseStyles,\n variants[actualVariant],\n sizes[size],\n leftIcon && \"pl-10\",\n rightIcon && \"pr-10\",\n className\n )}\n ref={ref}\n {...props}\n />\n {rightIcon && (\n <div className=\"absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none\">\n <span\n className={cn(\"text-[var(--ews-gray-400)]\", iconSizes[size])}\n >\n {rightIcon}\n </span>\n </div>\n )}\n </div>\n {(error || helperText) && (\n <p\n className={cn(\n \"text-sm\",\n error ? \"text-[var(--ews-error)]\" : \"text-[var(--ews-gray-500)]\"\n )}\n >\n {error || helperText}\n </p>\n )}\n </div>\n );\n }\n);\n\nInput.displayName = \"Input\";\n\nexport { Input };\n","import React from \"react\";\n\nexport interface IconProps extends React.SVGProps<SVGSVGElement> {\n /**\n * Icon size\n */\n size?: \"sm\" | \"md\" | \"lg\" | \"xl\";\n /**\n * Icon color\n */\n color?: string;\n}\n\nconst Icon = React.forwardRef<SVGSVGElement, IconProps>(\n ({ size = \"md\", color = \"currentColor\", className, ...props }, ref) => {\n const sizes = {\n sm: \"h-4 w-4\",\n md: \"h-5 w-5\",\n lg: \"h-6 w-6\",\n xl: \"h-8 w-8\",\n };\n\n return (\n <svg\n ref={ref}\n className={`${sizes[size]} ${className || \"\"}`}\n fill=\"none\"\n stroke={color}\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n {...props}\n />\n );\n }\n);\n\nIcon.displayName = \"Icon\";\n\nexport { Icon };\n","import React from \"react\";\nimport { Icon, IconProps } from \"./Icon\";\n\nexport const ArrowRight: React.FC<Omit<IconProps, \"children\">> = (props) => (\n <Icon {...props}>\n <path d=\"M5 12h14\" />\n <path d=\"m12 5 7 7-7 7\" />\n </Icon>\n);\n","import React from \"react\";\nimport { Icon, IconProps } from \"./Icon\";\n\nexport const Check: React.FC<Omit<IconProps, \"children\">> = (props) => (\n <Icon {...props}>\n <path d=\"M20 6 9 17l-5-5\" />\n </Icon>\n);\n","import React from \"react\";\nimport { Icon, IconProps } from \"./Icon\";\n\nexport const Search: React.FC<Omit<IconProps, \"children\">> = (props) => (\n <Icon {...props}>\n <circle cx=\"11\" cy=\"11\" r=\"8\" />\n <path d=\"m21 21-4.35-4.35\" />\n </Icon>\n);\n"],"names":["_jsxs","_jsx"],"mappings":"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","x_google_ignoreList":[0]}
|