@ataraui/ataraui-react 0.1.1 → 0.2.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 +143 -0
- package/dist/index.d.mts +40 -1
- package/dist/index.d.ts +40 -1
- package/dist/index.js +180 -4
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +167 -4
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
<div align="center">
|
|
2
|
+
<img src="./public/ataraui-logo-final.jpg" alt="AtaraUI" height="80" />
|
|
3
|
+
<p>A calm, composable component library — built for developers who move fast without losing clarity.</p>
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@ataraui/ataraui-react)
|
|
6
|
+
[](./LICENSE)
|
|
7
|
+
</div>
|
|
8
|
+
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
## Installation
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
npm install @ataraui/ataraui-react
|
|
15
|
+
# or
|
|
16
|
+
pnpm add @ataraui/ataraui-react
|
|
17
|
+
# or
|
|
18
|
+
yarn add @ataraui/ataraui-react
|
|
19
|
+
# or
|
|
20
|
+
bun add @ataraui/ataraui-react
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
> **Peer dependencies:** `react >= 17`, `tailwindcss >= 4`
|
|
24
|
+
|
|
25
|
+
## Setup
|
|
26
|
+
|
|
27
|
+
Add the source and theme tokens to your `globals.css`:
|
|
28
|
+
|
|
29
|
+
```css
|
|
30
|
+
@import "tailwindcss";
|
|
31
|
+
@source "../../node_modules/@ataraui/ataraui-react/dist/**/*.js";
|
|
32
|
+
|
|
33
|
+
@theme {
|
|
34
|
+
--color-primary-50: #FFF4EE;
|
|
35
|
+
--color-primary-100: #FFE0CC;
|
|
36
|
+
--color-primary-200: #FFBF99;
|
|
37
|
+
--color-primary-300: #F08050;
|
|
38
|
+
--color-primary-400: #D4602A;
|
|
39
|
+
--color-primary-500: #C2440A;
|
|
40
|
+
--color-primary-600: #A03808;
|
|
41
|
+
--color-primary-700: #8F2F06;
|
|
42
|
+
--color-primary-800: #5C1C03;
|
|
43
|
+
--color-primary-900: #2E0D01;
|
|
44
|
+
}
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
## Usage
|
|
48
|
+
|
|
49
|
+
```tsx
|
|
50
|
+
import { Button, Input, Badge } from '@ataraui/ataraui-react'
|
|
51
|
+
|
|
52
|
+
export default function Page() {
|
|
53
|
+
return (
|
|
54
|
+
<div>
|
|
55
|
+
<Badge variant="default">New</Badge>
|
|
56
|
+
<Input
|
|
57
|
+
label="Email"
|
|
58
|
+
placeholder="you@example.com"
|
|
59
|
+
hint="We will never spam you."
|
|
60
|
+
/>
|
|
61
|
+
<Button variant="primary" size="md">
|
|
62
|
+
Ship it
|
|
63
|
+
</Button>
|
|
64
|
+
<Button variant="outline" isLoading>
|
|
65
|
+
Loading...
|
|
66
|
+
</Button>
|
|
67
|
+
</div>
|
|
68
|
+
)
|
|
69
|
+
}
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
## Components
|
|
73
|
+
|
|
74
|
+
| Component | Variants | Status |
|
|
75
|
+
|-----------|----------|--------|
|
|
76
|
+
| `Button` | `primary` `secondary` `outline` `ghost` `destructive` | ✅ Ready |
|
|
77
|
+
| `Input` | `default` `error` | ✅ Ready |
|
|
78
|
+
| `Badge` | `default` `secondary` `outline` `success` `warning` `destructive` | ✅ Ready |
|
|
79
|
+
|
|
80
|
+
## Button Props
|
|
81
|
+
|
|
82
|
+
| Prop | Type | Default | Description |
|
|
83
|
+
|------|------|---------|-------------|
|
|
84
|
+
| `variant` | `primary` \| `secondary` \| `outline` \| `ghost` \| `destructive` | `primary` | Visual style |
|
|
85
|
+
| `size` | `sm` \| `md` \| `lg` \| `icon` | `md` | Button size |
|
|
86
|
+
| `isLoading` | `boolean` | `false` | Show loading spinner |
|
|
87
|
+
|
|
88
|
+
## Input Props
|
|
89
|
+
|
|
90
|
+
| Prop | Type | Description |
|
|
91
|
+
|------|------|-------------|
|
|
92
|
+
| `label` | `string` | Label displayed above the input |
|
|
93
|
+
| `error` | `string` | Error message (also triggers error state) |
|
|
94
|
+
| `hint` | `string` | Helper text displayed below the input |
|
|
95
|
+
| `inputSize` | `sm` \| `md` \| `lg` | Input height size |
|
|
96
|
+
|
|
97
|
+
## Development
|
|
98
|
+
|
|
99
|
+
```bash
|
|
100
|
+
# Clone the repo
|
|
101
|
+
git clone https://github.com/ataraui/ataraui-react.git
|
|
102
|
+
cd ataraui-react
|
|
103
|
+
|
|
104
|
+
# Install dependencies
|
|
105
|
+
npm install
|
|
106
|
+
|
|
107
|
+
# Build the library
|
|
108
|
+
npm run build
|
|
109
|
+
|
|
110
|
+
# Watch mode
|
|
111
|
+
npm run dev
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
## Publishing
|
|
115
|
+
|
|
116
|
+
```bash
|
|
117
|
+
# Bump version in package.json, then:
|
|
118
|
+
npm run build
|
|
119
|
+
npm publish
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
## Roadmap
|
|
123
|
+
|
|
124
|
+
| Version | Components | Category |
|
|
125
|
+
|---------|-----------|----------|
|
|
126
|
+
| **v0.1.0** ✅ | `Button` `Input` `Badge` | Core + Tailwind v4 |
|
|
127
|
+
| **v0.2.0** | `Card` `Avatar` `Separator` `Spinner` | Layout primitives |
|
|
128
|
+
| **v0.3.0** | `Select` `Checkbox` `Radio` `Switch` | Form components |
|
|
129
|
+
| **v0.4.0** | `Modal/Dialog` `Drawer` `Tooltip` `Popover` | Overlay components |
|
|
130
|
+
| **v0.5.0** | `Toast/Alert` `Progress` `Skeleton` | Feedback components |
|
|
131
|
+
| **v0.6.0** | `Table` `Tabs` `Accordion` | Data display |
|
|
132
|
+
| **v0.7.0** | Dark mode `Storybook` docs | DX improvements |
|
|
133
|
+
| **v0.8.0** | `Navbar` `Sidebar` `Breadcrumb` | Navigation |
|
|
134
|
+
| **v0.9.0** | `DatePicker` `Combobox` `FileUpload` | Advanced inputs |
|
|
135
|
+
| **v1.0.0** 🎯 | API stable · Full docs · A11y tested · ataraui.com live | Stable release |
|
|
136
|
+
|
|
137
|
+
## Contributing
|
|
138
|
+
|
|
139
|
+
Contributions are welcome! Feel free to open an issue or submit a pull request.
|
|
140
|
+
|
|
141
|
+
## License
|
|
142
|
+
|
|
143
|
+
MIT © [Ryo Kurniawan](https://github.com/ryo-kurniawan)
|
package/dist/index.d.mts
CHANGED
|
@@ -101,4 +101,43 @@ declare const Badge: {
|
|
|
101
101
|
displayName: string;
|
|
102
102
|
};
|
|
103
103
|
|
|
104
|
-
|
|
104
|
+
declare const cardVariants: (props?: ({
|
|
105
|
+
variant?: "ghost" | "elevated" | "outlined" | null | undefined;
|
|
106
|
+
padding?: "sm" | "md" | "lg" | "none" | null | undefined;
|
|
107
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
108
|
+
interface CardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
|
|
109
|
+
}
|
|
110
|
+
declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
|
|
111
|
+
declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
112
|
+
declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
|
|
113
|
+
declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
|
|
114
|
+
declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
115
|
+
declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
116
|
+
|
|
117
|
+
declare const avatarVariants: (props?: ({
|
|
118
|
+
size?: "sm" | "md" | "lg" | "xs" | "xl" | null | undefined;
|
|
119
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
120
|
+
interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof avatarVariants> {
|
|
121
|
+
src?: string;
|
|
122
|
+
alt?: string;
|
|
123
|
+
fallback?: string;
|
|
124
|
+
}
|
|
125
|
+
declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
|
|
126
|
+
|
|
127
|
+
declare const separatorVariants: (props?: ({
|
|
128
|
+
orientation?: "horizontal" | "vertical" | null | undefined;
|
|
129
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
130
|
+
interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof separatorVariants> {
|
|
131
|
+
label?: string;
|
|
132
|
+
}
|
|
133
|
+
declare const Separator: React.ForwardRefExoticComponent<SeparatorProps & React.RefAttributes<HTMLDivElement>>;
|
|
134
|
+
|
|
135
|
+
declare const spinnerVariants: (props?: ({
|
|
136
|
+
size?: "sm" | "md" | "lg" | "xs" | "xl" | null | undefined;
|
|
137
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
138
|
+
interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof spinnerVariants> {
|
|
139
|
+
label?: string;
|
|
140
|
+
}
|
|
141
|
+
declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<HTMLSpanElement>>;
|
|
142
|
+
|
|
143
|
+
export { Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, Input, type InputProps, Separator, type SeparatorProps, Spinner, type SpinnerProps, avatarVariants, badgeVariants, buttonVariants, cardVariants, cn, colors, fontSize, inputVariants, radius, separatorVariants, spinnerVariants };
|
package/dist/index.d.ts
CHANGED
|
@@ -101,4 +101,43 @@ declare const Badge: {
|
|
|
101
101
|
displayName: string;
|
|
102
102
|
};
|
|
103
103
|
|
|
104
|
-
|
|
104
|
+
declare const cardVariants: (props?: ({
|
|
105
|
+
variant?: "ghost" | "elevated" | "outlined" | null | undefined;
|
|
106
|
+
padding?: "sm" | "md" | "lg" | "none" | null | undefined;
|
|
107
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
108
|
+
interface CardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
|
|
109
|
+
}
|
|
110
|
+
declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
|
|
111
|
+
declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
112
|
+
declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
|
|
113
|
+
declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
|
|
114
|
+
declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
115
|
+
declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
116
|
+
|
|
117
|
+
declare const avatarVariants: (props?: ({
|
|
118
|
+
size?: "sm" | "md" | "lg" | "xs" | "xl" | null | undefined;
|
|
119
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
120
|
+
interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof avatarVariants> {
|
|
121
|
+
src?: string;
|
|
122
|
+
alt?: string;
|
|
123
|
+
fallback?: string;
|
|
124
|
+
}
|
|
125
|
+
declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
|
|
126
|
+
|
|
127
|
+
declare const separatorVariants: (props?: ({
|
|
128
|
+
orientation?: "horizontal" | "vertical" | null | undefined;
|
|
129
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
130
|
+
interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof separatorVariants> {
|
|
131
|
+
label?: string;
|
|
132
|
+
}
|
|
133
|
+
declare const Separator: React.ForwardRefExoticComponent<SeparatorProps & React.RefAttributes<HTMLDivElement>>;
|
|
134
|
+
|
|
135
|
+
declare const spinnerVariants: (props?: ({
|
|
136
|
+
size?: "sm" | "md" | "lg" | "xs" | "xl" | null | undefined;
|
|
137
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
138
|
+
interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof spinnerVariants> {
|
|
139
|
+
label?: string;
|
|
140
|
+
}
|
|
141
|
+
declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<HTMLSpanElement>>;
|
|
142
|
+
|
|
143
|
+
export { Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, Input, type InputProps, Separator, type SeparatorProps, Spinner, type SpinnerProps, avatarVariants, badgeVariants, buttonVariants, cardVariants, cn, colors, fontSize, inputVariants, radius, separatorVariants, spinnerVariants };
|
package/dist/index.js
CHANGED
|
@@ -2,13 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
var clsx = require('clsx');
|
|
4
4
|
var tailwindMerge = require('tailwind-merge');
|
|
5
|
-
var
|
|
5
|
+
var React3 = require('react');
|
|
6
6
|
var classVarianceAuthority = require('class-variance-authority');
|
|
7
7
|
var jsxRuntime = require('react/jsx-runtime');
|
|
8
8
|
|
|
9
9
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
10
10
|
|
|
11
|
-
var
|
|
11
|
+
var React3__default = /*#__PURE__*/_interopDefault(React3);
|
|
12
12
|
|
|
13
13
|
// src/utils/cn.ts
|
|
14
14
|
function cn(...inputs) {
|
|
@@ -94,7 +94,7 @@ var buttonVariants = classVarianceAuthority.cva(
|
|
|
94
94
|
}
|
|
95
95
|
}
|
|
96
96
|
);
|
|
97
|
-
var Button =
|
|
97
|
+
var Button = React3__default.default.forwardRef(
|
|
98
98
|
({ className, variant, size, isLoading, children, disabled, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
99
99
|
"button",
|
|
100
100
|
{
|
|
@@ -133,7 +133,7 @@ var inputVariants = classVarianceAuthority.cva(
|
|
|
133
133
|
}
|
|
134
134
|
}
|
|
135
135
|
);
|
|
136
|
-
var Input =
|
|
136
|
+
var Input = React3__default.default.forwardRef(
|
|
137
137
|
({ className, label, error, hint, id, inputSize, ...props }, ref) => {
|
|
138
138
|
const inputId = id != null ? id : label == null ? void 0 : label.toLowerCase().replace(/\s+/g, "-");
|
|
139
139
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5 w-full", children: [
|
|
@@ -178,16 +178,192 @@ var badgeVariants = classVarianceAuthority.cva(
|
|
|
178
178
|
);
|
|
179
179
|
var Badge = ({ className, variant, size, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(badgeVariants({ variant, size }), className), ...props });
|
|
180
180
|
Badge.displayName = "Badge";
|
|
181
|
+
var cardVariants = classVarianceAuthority.cva(
|
|
182
|
+
"rounded-(--radius-lg) bg-white text-(--color-neutral-900)",
|
|
183
|
+
{
|
|
184
|
+
variants: {
|
|
185
|
+
variant: {
|
|
186
|
+
elevated: "shadow-md",
|
|
187
|
+
outlined: "border border-(--color-neutral-200)",
|
|
188
|
+
ghost: "bg-(--color-neutral-50)"
|
|
189
|
+
},
|
|
190
|
+
padding: {
|
|
191
|
+
none: "",
|
|
192
|
+
sm: "p-4",
|
|
193
|
+
md: "p-6",
|
|
194
|
+
lg: "p-8"
|
|
195
|
+
}
|
|
196
|
+
},
|
|
197
|
+
defaultVariants: {
|
|
198
|
+
variant: "elevated",
|
|
199
|
+
padding: "md"
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
);
|
|
203
|
+
var Card = React3__default.default.forwardRef(
|
|
204
|
+
({ className, variant, padding, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
205
|
+
"div",
|
|
206
|
+
{
|
|
207
|
+
ref,
|
|
208
|
+
className: cn(cardVariants({ variant, padding }), className),
|
|
209
|
+
...props
|
|
210
|
+
}
|
|
211
|
+
)
|
|
212
|
+
);
|
|
213
|
+
Card.displayName = "Card";
|
|
214
|
+
var CardHeader = React3__default.default.forwardRef(
|
|
215
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex flex-col gap-1.5 mb-4", className), ...props })
|
|
216
|
+
);
|
|
217
|
+
CardHeader.displayName = "CardHeader";
|
|
218
|
+
var CardTitle = React3__default.default.forwardRef(
|
|
219
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("h3", { ref, className: cn("text-lg font-semibold text-(--color-neutral-900)", className), ...props })
|
|
220
|
+
);
|
|
221
|
+
CardTitle.displayName = "CardTitle";
|
|
222
|
+
var CardDescription = React3__default.default.forwardRef(
|
|
223
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("p", { ref, className: cn("text-sm text-(--color-neutral-500)", className), ...props })
|
|
224
|
+
);
|
|
225
|
+
CardDescription.displayName = "CardDescription";
|
|
226
|
+
var CardContent = React3__default.default.forwardRef(
|
|
227
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("text-sm text-(--color-neutral-700)", className), ...props })
|
|
228
|
+
);
|
|
229
|
+
CardContent.displayName = "CardContent";
|
|
230
|
+
var CardFooter = React3__default.default.forwardRef(
|
|
231
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex items-center gap-2 mt-4", className), ...props })
|
|
232
|
+
);
|
|
233
|
+
CardFooter.displayName = "CardFooter";
|
|
234
|
+
var avatarVariants = classVarianceAuthority.cva(
|
|
235
|
+
"relative inline-flex items-center justify-center shrink-0 overflow-hidden rounded-full bg-(--color-neutral-200)",
|
|
236
|
+
{
|
|
237
|
+
variants: {
|
|
238
|
+
size: {
|
|
239
|
+
xs: "h-6 w-6 text-xs",
|
|
240
|
+
sm: "h-8 w-8 text-sm",
|
|
241
|
+
md: "h-10 w-10 text-base",
|
|
242
|
+
lg: "h-12 w-12 text-lg",
|
|
243
|
+
xl: "h-16 w-16 text-xl"
|
|
244
|
+
}
|
|
245
|
+
},
|
|
246
|
+
defaultVariants: {
|
|
247
|
+
size: "md"
|
|
248
|
+
}
|
|
249
|
+
}
|
|
250
|
+
);
|
|
251
|
+
var Avatar = React3__default.default.forwardRef(
|
|
252
|
+
({ className, size, src, alt, fallback, ...props }, ref) => {
|
|
253
|
+
const [imgError, setImgError] = React3__default.default.useState(false);
|
|
254
|
+
const initials = fallback == null ? void 0 : fallback.split(" ").map((word) => word[0]).slice(0, 2).join("").toUpperCase();
|
|
255
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
256
|
+
"span",
|
|
257
|
+
{
|
|
258
|
+
ref,
|
|
259
|
+
className: cn(avatarVariants({ size }), className),
|
|
260
|
+
...props,
|
|
261
|
+
children: src && !imgError ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
262
|
+
"img",
|
|
263
|
+
{
|
|
264
|
+
src,
|
|
265
|
+
alt: alt != null ? alt : "",
|
|
266
|
+
className: "h-full w-full object-cover",
|
|
267
|
+
onError: () => setImgError(true)
|
|
268
|
+
}
|
|
269
|
+
) : initials ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-(--color-neutral-700) select-none", children: initials }) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
270
|
+
"svg",
|
|
271
|
+
{
|
|
272
|
+
className: "h-[60%] w-[60%] text-(--color-neutral-400)",
|
|
273
|
+
fill: "currentColor",
|
|
274
|
+
viewBox: "0 0 24 24",
|
|
275
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z" })
|
|
276
|
+
}
|
|
277
|
+
)
|
|
278
|
+
}
|
|
279
|
+
);
|
|
280
|
+
}
|
|
281
|
+
);
|
|
282
|
+
Avatar.displayName = "Avatar";
|
|
283
|
+
var separatorVariants = classVarianceAuthority.cva(
|
|
284
|
+
"shrink-0 bg-(--color-neutral-200)",
|
|
285
|
+
{
|
|
286
|
+
variants: {
|
|
287
|
+
orientation: {
|
|
288
|
+
horizontal: "h-px w-full",
|
|
289
|
+
vertical: "h-full w-px"
|
|
290
|
+
}
|
|
291
|
+
},
|
|
292
|
+
defaultVariants: {
|
|
293
|
+
orientation: "horizontal"
|
|
294
|
+
}
|
|
295
|
+
}
|
|
296
|
+
);
|
|
297
|
+
var Separator = React3__default.default.forwardRef(
|
|
298
|
+
({ className, orientation, label, ...props }, ref) => {
|
|
299
|
+
if (label && orientation !== "vertical") {
|
|
300
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("flex items-center gap-3", className), ...props, children: [
|
|
301
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px flex-1 bg-(--color-neutral-200)" }),
|
|
302
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-(--color-neutral-400) font-medium select-none", children: label }),
|
|
303
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px flex-1 bg-(--color-neutral-200)" })
|
|
304
|
+
] });
|
|
305
|
+
}
|
|
306
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
307
|
+
"div",
|
|
308
|
+
{
|
|
309
|
+
ref,
|
|
310
|
+
role: "separator",
|
|
311
|
+
"aria-orientation": orientation != null ? orientation : "horizontal",
|
|
312
|
+
className: cn(separatorVariants({ orientation }), className),
|
|
313
|
+
...props
|
|
314
|
+
}
|
|
315
|
+
);
|
|
316
|
+
}
|
|
317
|
+
);
|
|
318
|
+
Separator.displayName = "Separator";
|
|
319
|
+
var spinnerVariants = classVarianceAuthority.cva(
|
|
320
|
+
"animate-spin rounded-full border-2 border-(--color-neutral-200) border-t-(--color-primary-500)",
|
|
321
|
+
{
|
|
322
|
+
variants: {
|
|
323
|
+
size: {
|
|
324
|
+
xs: "h-3 w-3",
|
|
325
|
+
sm: "h-4 w-4",
|
|
326
|
+
md: "h-6 w-6",
|
|
327
|
+
lg: "h-8 w-8",
|
|
328
|
+
xl: "h-12 w-12"
|
|
329
|
+
}
|
|
330
|
+
},
|
|
331
|
+
defaultVariants: {
|
|
332
|
+
size: "md"
|
|
333
|
+
}
|
|
334
|
+
}
|
|
335
|
+
);
|
|
336
|
+
var Spinner = React3__default.default.forwardRef(
|
|
337
|
+
({ className, size, label, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs("span", { ref, role: "status", className: cn("inline-flex flex-col items-center gap-2", className), ...props, children: [
|
|
338
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(spinnerVariants({ size })) }),
|
|
339
|
+
label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-(--color-neutral-500)", children: label }),
|
|
340
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: label != null ? label : "Loading..." })
|
|
341
|
+
] })
|
|
342
|
+
);
|
|
343
|
+
Spinner.displayName = "Spinner";
|
|
181
344
|
|
|
345
|
+
exports.Avatar = Avatar;
|
|
182
346
|
exports.Badge = Badge;
|
|
183
347
|
exports.Button = Button;
|
|
348
|
+
exports.Card = Card;
|
|
349
|
+
exports.CardContent = CardContent;
|
|
350
|
+
exports.CardDescription = CardDescription;
|
|
351
|
+
exports.CardFooter = CardFooter;
|
|
352
|
+
exports.CardHeader = CardHeader;
|
|
353
|
+
exports.CardTitle = CardTitle;
|
|
184
354
|
exports.Input = Input;
|
|
355
|
+
exports.Separator = Separator;
|
|
356
|
+
exports.Spinner = Spinner;
|
|
357
|
+
exports.avatarVariants = avatarVariants;
|
|
185
358
|
exports.badgeVariants = badgeVariants;
|
|
186
359
|
exports.buttonVariants = buttonVariants;
|
|
360
|
+
exports.cardVariants = cardVariants;
|
|
187
361
|
exports.cn = cn;
|
|
188
362
|
exports.colors = colors;
|
|
189
363
|
exports.fontSize = fontSize;
|
|
190
364
|
exports.inputVariants = inputVariants;
|
|
191
365
|
exports.radius = radius;
|
|
366
|
+
exports.separatorVariants = separatorVariants;
|
|
367
|
+
exports.spinnerVariants = spinnerVariants;
|
|
192
368
|
//# sourceMappingURL=index.js.map
|
|
193
369
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/utils/cn.ts","../src/tokens/index.ts","../src/components/Button/Button.tsx","../src/components/Input/Input.tsx","../src/components/Badge/Badge.tsx"],"names":["twMerge","clsx","cva","React","jsxs","jsx"],"mappings":"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","file":"index.js","sourcesContent":["import { clsx, type ClassValue } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}","export const colors = {\n primary: {\n 50: '#FFF4EE',\n 100: '#FFE0CC',\n 200: '#FFBF99',\n 300: '#F08050',\n 400: '#D4602A',\n 500: '#C2440A',\n 600: '#A03808',\n 700: '#8F2F06',\n 800: '#5C1C03',\n 900: '#2E0D01',\n },\n neutral: {\n 50: '#f9f7f5',\n 100: '#f0ece7',\n 200: '#ddd6cc',\n 300: '#c5bab0',\n 400: '#a89b8e',\n 500: '#8a7d72',\n 600: '#6f6358',\n 700: '#564d45',\n 800: '#3c3630',\n 900: '#252019',\n },\n danger: {\n 500: '#ef4444',\n 600: '#dc2626',\n },\n success: {\n 500: '#22c55e',\n 600: '#16a34a',\n },\n warning: {\n 500: '#f59e0b',\n 600: '#d97706',\n },\n} as const\n\nexport const radius = {\n none: '0',\n sm: '0.25rem',\n md: '0.375rem',\n lg: '0.5rem',\n xl: '0.75rem',\n '2xl':'1rem',\n full: '9999px',\n} as const\n\nexport const fontSize = {\n xs: ['0.75rem', { lineHeight: '1rem' }],\n sm: ['0.875rem', { lineHeight: '1.25rem' }],\n base: ['1rem', { lineHeight: '1.5rem' }],\n lg: ['1.125rem', { lineHeight: '1.75rem' }],\n xl: ['1.25rem', { lineHeight: '1.75rem' }],\n} as const","import React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../utils/cn'\n\nexport const buttonVariants = cva(\n 'inline-flex items-center justify-center font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n {\n variants: {\n variant: {\n primary: 'bg-(--color-primary-500) text-white hover:bg-(--color-primary-600) focus-visible:ring-(--color-primary-500)',\n secondary: 'bg-(--color-neutral-100) text-(--color-neutral-900) hover:bg-(--color-neutral-200)',\n outline: 'border border-(--color-primary-500) text-(--color-primary-500) bg-transparent hover:bg-(--color-primary-50)',\n ghost: 'text-(--color-neutral-700) hover:bg-(--color-neutral-100)',\n destructive: 'bg-(--color-danger-500) text-white hover:bg-(--color-danger-600)',\n },\n size: {\n sm: 'h-8 px-3 text-sm rounded-(--radius-md) gap-1.5',\n md: 'h-10 px-4 text-sm rounded-(--radius-md) gap-2',\n lg: 'h-12 px-6 text-base rounded-(--radius-lg) gap-2',\n icon: 'h-10 w-10 rounded-(--radius-md)',\n },\n },\n defaultVariants: {\n variant: 'primary',\n size: 'md',\n },\n }\n)\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {\n isLoading?: boolean\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n ({ className, variant, size, isLoading, children, disabled, ...props }, ref) => (\n <button\n ref={ref}\n className={cn(buttonVariants({ variant, size }), className)}\n disabled={disabled || isLoading}\n {...props}\n >\n {isLoading && (\n <svg className=\"animate-spin h-4 w-4\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\" />\n <path className=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8v8z\" />\n </svg>\n )}\n {children}\n </button>\n )\n)\nButton.displayName = 'Button'","import React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../utils/cn'\n\nexport const inputVariants = cva(\n 'w-full px-3 py-2 text-sm bg-white border rounded-(--radius-md) transition-colors placeholder:text-(--color-neutral-400) focus:outline-none focus:ring-2 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-(--color-neutral-50)',\n {\n variants: {\n state: {\n default: 'border-(--color-neutral-300) text-(--color-neutral-900) focus:border-(--color-primary-500) focus:ring-(--color-primary-500)/20',\n error: 'border-(--color-danger-500) text-(--color-neutral-900) focus:border-(--color-danger-500) focus:ring-(--color-danger-500)/20',\n },\n inputSize: {\n sm: 'h-8 text-xs',\n md: 'h-10 text-sm',\n lg: 'h-12 text-base',\n },\n },\n defaultVariants: {\n state: 'default',\n inputSize: 'md',\n },\n }\n)\n\nexport interface InputProps\n extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,\n VariantProps<typeof inputVariants> {\n label?: string\n error?: string\n hint?: string\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n ({ className, label, error, hint, id, inputSize, ...props }, ref) => {\n const inputId = id ?? label?.toLowerCase().replace(/\\s+/g, '-')\n return (\n <div className=\"flex flex-col gap-1.5 w-full\">\n {label && (\n <label htmlFor={inputId} className=\"text-sm font-medium text-(--color-neutral-700)\">\n {label}\n </label>\n )}\n <input\n ref={ref}\n id={inputId}\n className={cn(inputVariants({ state: error ? 'error' : 'default', inputSize }), className)}\n {...props}\n />\n {hint && !error && <p className=\"text-xs text-(--color-neutral-500)\">{hint}</p>}\n {error && <p className=\"text-xs text-(--color-danger-500)\">{error}</p>}\n </div>\n )\n }\n)\nInput.displayName = 'Input'","import React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../utils/cn'\n\nexport const badgeVariants = cva(\n 'inline-flex items-center rounded-full font-medium',\n {\n variants: {\n variant: {\n default: 'bg-(--color-primary-500) text-white',\n secondary: 'bg-(--color-neutral-100) text-(--color-neutral-700)',\n outline: 'border border-(--color-primary-500) text-(--color-primary-500)',\n success: 'bg-(--color-success-500)/10 text-(--color-success-600)',\n warning: 'bg-(--color-warning-500)/10 text-(--color-warning-600)',\n destructive: 'bg-(--color-danger-500)/10 text-(--color-danger-600)',\n },\n size: {\n sm: 'px-2 py-0.5 text-xs',\n md: 'px-2.5 py-0.5 text-sm',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'md',\n },\n }\n)\n\nexport interface BadgeProps\n extends React.HTMLAttributes<HTMLSpanElement>,\n VariantProps<typeof badgeVariants> {}\n\nexport const Badge = ({ className, variant, size, ...props }: BadgeProps) => (\n <span className={cn(badgeVariants({ variant, size }), className)} {...props} />\n)\nBadge.displayName = 'Badge'"]}
|
|
1
|
+
{"version":3,"sources":["../src/utils/cn.ts","../src/tokens/index.ts","../src/components/Button/Button.tsx","../src/components/Input/Input.tsx","../src/components/Badge/Badge.tsx","../src/components/Card/Card.tsx","../src/components/Avatar/Avatar.tsx","../src/components/Separator/Separator.tsx","../src/components/Spinner/Spinner.tsx"],"names":["twMerge","clsx","cva","React","jsxs","jsx"],"mappings":"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","file":"index.js","sourcesContent":["import { clsx, type ClassValue } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}","export const colors = {\n primary: {\n 50: '#FFF4EE',\n 100: '#FFE0CC',\n 200: '#FFBF99',\n 300: '#F08050',\n 400: '#D4602A',\n 500: '#C2440A',\n 600: '#A03808',\n 700: '#8F2F06',\n 800: '#5C1C03',\n 900: '#2E0D01',\n },\n neutral: {\n 50: '#f9f7f5',\n 100: '#f0ece7',\n 200: '#ddd6cc',\n 300: '#c5bab0',\n 400: '#a89b8e',\n 500: '#8a7d72',\n 600: '#6f6358',\n 700: '#564d45',\n 800: '#3c3630',\n 900: '#252019',\n },\n danger: {\n 500: '#ef4444',\n 600: '#dc2626',\n },\n success: {\n 500: '#22c55e',\n 600: '#16a34a',\n },\n warning: {\n 500: '#f59e0b',\n 600: '#d97706',\n },\n} as const\n\nexport const radius = {\n none: '0',\n sm: '0.25rem',\n md: '0.375rem',\n lg: '0.5rem',\n xl: '0.75rem',\n '2xl':'1rem',\n full: '9999px',\n} as const\n\nexport const fontSize = {\n xs: ['0.75rem', { lineHeight: '1rem' }],\n sm: ['0.875rem', { lineHeight: '1.25rem' }],\n base: ['1rem', { lineHeight: '1.5rem' }],\n lg: ['1.125rem', { lineHeight: '1.75rem' }],\n xl: ['1.25rem', { lineHeight: '1.75rem' }],\n} as const","import React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../utils/cn'\n\nexport const buttonVariants = cva(\n 'inline-flex items-center justify-center font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n {\n variants: {\n variant: {\n primary: 'bg-(--color-primary-500) text-white hover:bg-(--color-primary-600) focus-visible:ring-(--color-primary-500)',\n secondary: 'bg-(--color-neutral-100) text-(--color-neutral-900) hover:bg-(--color-neutral-200)',\n outline: 'border border-(--color-primary-500) text-(--color-primary-500) bg-transparent hover:bg-(--color-primary-50)',\n ghost: 'text-(--color-neutral-700) hover:bg-(--color-neutral-100)',\n destructive: 'bg-(--color-danger-500) text-white hover:bg-(--color-danger-600)',\n },\n size: {\n sm: 'h-8 px-3 text-sm rounded-(--radius-md) gap-1.5',\n md: 'h-10 px-4 text-sm rounded-(--radius-md) gap-2',\n lg: 'h-12 px-6 text-base rounded-(--radius-lg) gap-2',\n icon: 'h-10 w-10 rounded-(--radius-md)',\n },\n },\n defaultVariants: {\n variant: 'primary',\n size: 'md',\n },\n }\n)\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {\n isLoading?: boolean\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n ({ className, variant, size, isLoading, children, disabled, ...props }, ref) => (\n <button\n ref={ref}\n className={cn(buttonVariants({ variant, size }), className)}\n disabled={disabled || isLoading}\n {...props}\n >\n {isLoading && (\n <svg className=\"animate-spin h-4 w-4\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\" />\n <path className=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8v8z\" />\n </svg>\n )}\n {children}\n </button>\n )\n)\nButton.displayName = 'Button'","import React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../utils/cn'\n\nexport const inputVariants = cva(\n 'w-full px-3 py-2 text-sm bg-white border rounded-(--radius-md) transition-colors placeholder:text-(--color-neutral-400) focus:outline-none focus:ring-2 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-(--color-neutral-50)',\n {\n variants: {\n state: {\n default: 'border-(--color-neutral-300) text-(--color-neutral-900) focus:border-(--color-primary-500) focus:ring-(--color-primary-500)/20',\n error: 'border-(--color-danger-500) text-(--color-neutral-900) focus:border-(--color-danger-500) focus:ring-(--color-danger-500)/20',\n },\n inputSize: {\n sm: 'h-8 text-xs',\n md: 'h-10 text-sm',\n lg: 'h-12 text-base',\n },\n },\n defaultVariants: {\n state: 'default',\n inputSize: 'md',\n },\n }\n)\n\nexport interface InputProps\n extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,\n VariantProps<typeof inputVariants> {\n label?: string\n error?: string\n hint?: string\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n ({ className, label, error, hint, id, inputSize, ...props }, ref) => {\n const inputId = id ?? label?.toLowerCase().replace(/\\s+/g, '-')\n return (\n <div className=\"flex flex-col gap-1.5 w-full\">\n {label && (\n <label htmlFor={inputId} className=\"text-sm font-medium text-(--color-neutral-700)\">\n {label}\n </label>\n )}\n <input\n ref={ref}\n id={inputId}\n className={cn(inputVariants({ state: error ? 'error' : 'default', inputSize }), className)}\n {...props}\n />\n {hint && !error && <p className=\"text-xs text-(--color-neutral-500)\">{hint}</p>}\n {error && <p className=\"text-xs text-(--color-danger-500)\">{error}</p>}\n </div>\n )\n }\n)\nInput.displayName = 'Input'","import React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../utils/cn'\n\nexport const badgeVariants = cva(\n 'inline-flex items-center rounded-full font-medium',\n {\n variants: {\n variant: {\n default: 'bg-(--color-primary-500) text-white',\n secondary: 'bg-(--color-neutral-100) text-(--color-neutral-700)',\n outline: 'border border-(--color-primary-500) text-(--color-primary-500)',\n success: 'bg-(--color-success-500)/10 text-(--color-success-600)',\n warning: 'bg-(--color-warning-500)/10 text-(--color-warning-600)',\n destructive: 'bg-(--color-danger-500)/10 text-(--color-danger-600)',\n },\n size: {\n sm: 'px-2 py-0.5 text-xs',\n md: 'px-2.5 py-0.5 text-sm',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'md',\n },\n }\n)\n\nexport interface BadgeProps\n extends React.HTMLAttributes<HTMLSpanElement>,\n VariantProps<typeof badgeVariants> {}\n\nexport const Badge = ({ className, variant, size, ...props }: BadgeProps) => (\n <span className={cn(badgeVariants({ variant, size }), className)} {...props} />\n)\nBadge.displayName = 'Badge'","import React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../utils/cn'\n\nexport const cardVariants = cva(\n 'rounded-(--radius-lg) bg-white text-(--color-neutral-900)',\n {\n variants: {\n variant: {\n elevated: 'shadow-md',\n outlined: 'border border-(--color-neutral-200)',\n ghost: 'bg-(--color-neutral-50)',\n },\n padding: {\n none: '',\n sm: 'p-4',\n md: 'p-6',\n lg: 'p-8',\n },\n },\n defaultVariants: {\n variant: 'elevated',\n padding: 'md',\n },\n }\n)\n\nexport interface CardProps\n extends React.HTMLAttributes<HTMLDivElement>,\n VariantProps<typeof cardVariants> {}\n\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(\n ({ className, variant, padding, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(cardVariants({ variant, padding }), className)}\n {...props}\n />\n )\n)\nCard.displayName = 'Card'\n\n// ─── Sub-components ───────────────────────────────────────\n\nexport const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ className, ...props }, ref) => (\n <div ref={ref} className={cn('flex flex-col gap-1.5 mb-4', className)} {...props} />\n )\n)\nCardHeader.displayName = 'CardHeader'\n\nexport const CardTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(\n ({ className, ...props }, ref) => (\n <h3 ref={ref} className={cn('text-lg font-semibold text-(--color-neutral-900)', className)} {...props} />\n )\n)\nCardTitle.displayName = 'CardTitle'\n\nexport const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(\n ({ className, ...props }, ref) => (\n <p ref={ref} className={cn('text-sm text-(--color-neutral-500)', className)} {...props} />\n )\n)\nCardDescription.displayName = 'CardDescription'\n\nexport const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ className, ...props }, ref) => (\n <div ref={ref} className={cn('text-sm text-(--color-neutral-700)', className)} {...props} />\n )\n)\nCardContent.displayName = 'CardContent'\n\nexport const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ className, ...props }, ref) => (\n <div ref={ref} className={cn('flex items-center gap-2 mt-4', className)} {...props} />\n )\n)\nCardFooter.displayName = 'CardFooter'","import React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../utils/cn'\n\nexport const avatarVariants = cva(\n 'relative inline-flex items-center justify-center shrink-0 overflow-hidden rounded-full bg-(--color-neutral-200)',\n {\n variants: {\n size: {\n xs: 'h-6 w-6 text-xs',\n sm: 'h-8 w-8 text-sm',\n md: 'h-10 w-10 text-base',\n lg: 'h-12 w-12 text-lg',\n xl: 'h-16 w-16 text-xl',\n },\n },\n defaultVariants: {\n size: 'md',\n },\n }\n)\n\nexport interface AvatarProps\n extends React.HTMLAttributes<HTMLSpanElement>,\n VariantProps<typeof avatarVariants> {\n src?: string\n alt?: string\n fallback?: string\n}\n\nexport const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(\n ({ className, size, src, alt, fallback, ...props }, ref) => {\n const [imgError, setImgError] = React.useState(false)\n\n const initials = fallback\n ?.split(' ')\n .map((word) => word[0])\n .slice(0, 2)\n .join('')\n .toUpperCase()\n\n return (\n <span\n ref={ref}\n className={cn(avatarVariants({ size }), className)}\n {...props}\n >\n {src && !imgError ? (\n <img\n src={src}\n alt={alt ?? ''}\n className=\"h-full w-full object-cover\"\n onError={() => setImgError(true)}\n />\n ) : initials ? (\n <span className=\"font-medium text-(--color-neutral-700) select-none\">\n {initials}\n </span>\n ) : (\n <svg\n className=\"h-[60%] w-[60%] text-(--color-neutral-400)\"\n fill=\"currentColor\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z\" />\n </svg>\n )}\n </span>\n )\n }\n)\nAvatar.displayName = 'Avatar'","import React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../utils/cn'\n\nexport const separatorVariants = cva(\n 'shrink-0 bg-(--color-neutral-200)',\n {\n variants: {\n orientation: {\n horizontal: 'h-px w-full',\n vertical: 'h-full w-px',\n },\n },\n defaultVariants: {\n orientation: 'horizontal',\n },\n }\n)\n\nexport interface SeparatorProps\n extends React.HTMLAttributes<HTMLDivElement>,\n VariantProps<typeof separatorVariants> {\n label?: string\n}\n\nexport const Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(\n ({ className, orientation, label, ...props }, ref) => {\n if (label && orientation !== 'vertical') {\n return (\n <div ref={ref} className={cn('flex items-center gap-3', className)} {...props}>\n <div className=\"h-px flex-1 bg-(--color-neutral-200)\" />\n <span className=\"text-xs text-(--color-neutral-400) font-medium select-none\">\n {label}\n </span>\n <div className=\"h-px flex-1 bg-(--color-neutral-200)\" />\n </div>\n )\n }\n\n return (\n <div\n ref={ref}\n role=\"separator\"\n aria-orientation={orientation ?? 'horizontal'}\n className={cn(separatorVariants({ orientation }), className)}\n {...props}\n />\n )\n }\n)\nSeparator.displayName = 'Separator'","import React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../utils/cn'\n\nexport const spinnerVariants = cva(\n 'animate-spin rounded-full border-2 border-(--color-neutral-200) border-t-(--color-primary-500)',\n {\n variants: {\n size: {\n xs: 'h-3 w-3',\n sm: 'h-4 w-4',\n md: 'h-6 w-6',\n lg: 'h-8 w-8',\n xl: 'h-12 w-12',\n },\n },\n defaultVariants: {\n size: 'md',\n },\n }\n)\n\nexport interface SpinnerProps\n extends React.HTMLAttributes<HTMLSpanElement>,\n VariantProps<typeof spinnerVariants> {\n label?: string\n}\n\nexport const Spinner = React.forwardRef<HTMLSpanElement, SpinnerProps>(\n ({ className, size, label, ...props }, ref) => (\n <span ref={ref} role=\"status\" className={cn('inline-flex flex-col items-center gap-2', className)} {...props}>\n <span className={cn(spinnerVariants({ size }))} />\n {label && (\n <span className=\"text-sm text-(--color-neutral-500)\">{label}</span>\n )}\n <span className=\"sr-only\">{label ?? 'Loading...'}</span>\n </span>\n )\n)\nSpinner.displayName = 'Spinner'"]}
|
package/dist/index.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { clsx } from 'clsx';
|
|
2
2
|
import { twMerge } from 'tailwind-merge';
|
|
3
|
-
import
|
|
3
|
+
import React3 from 'react';
|
|
4
4
|
import { cva } from 'class-variance-authority';
|
|
5
5
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
6
6
|
|
|
@@ -88,7 +88,7 @@ var buttonVariants = cva(
|
|
|
88
88
|
}
|
|
89
89
|
}
|
|
90
90
|
);
|
|
91
|
-
var Button =
|
|
91
|
+
var Button = React3.forwardRef(
|
|
92
92
|
({ className, variant, size, isLoading, children, disabled, ...props }, ref) => /* @__PURE__ */ jsxs(
|
|
93
93
|
"button",
|
|
94
94
|
{
|
|
@@ -127,7 +127,7 @@ var inputVariants = cva(
|
|
|
127
127
|
}
|
|
128
128
|
}
|
|
129
129
|
);
|
|
130
|
-
var Input =
|
|
130
|
+
var Input = React3.forwardRef(
|
|
131
131
|
({ className, label, error, hint, id, inputSize, ...props }, ref) => {
|
|
132
132
|
const inputId = id != null ? id : label == null ? void 0 : label.toLowerCase().replace(/\s+/g, "-");
|
|
133
133
|
return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5 w-full", children: [
|
|
@@ -172,7 +172,170 @@ var badgeVariants = cva(
|
|
|
172
172
|
);
|
|
173
173
|
var Badge = ({ className, variant, size, ...props }) => /* @__PURE__ */ jsx("span", { className: cn(badgeVariants({ variant, size }), className), ...props });
|
|
174
174
|
Badge.displayName = "Badge";
|
|
175
|
+
var cardVariants = cva(
|
|
176
|
+
"rounded-(--radius-lg) bg-white text-(--color-neutral-900)",
|
|
177
|
+
{
|
|
178
|
+
variants: {
|
|
179
|
+
variant: {
|
|
180
|
+
elevated: "shadow-md",
|
|
181
|
+
outlined: "border border-(--color-neutral-200)",
|
|
182
|
+
ghost: "bg-(--color-neutral-50)"
|
|
183
|
+
},
|
|
184
|
+
padding: {
|
|
185
|
+
none: "",
|
|
186
|
+
sm: "p-4",
|
|
187
|
+
md: "p-6",
|
|
188
|
+
lg: "p-8"
|
|
189
|
+
}
|
|
190
|
+
},
|
|
191
|
+
defaultVariants: {
|
|
192
|
+
variant: "elevated",
|
|
193
|
+
padding: "md"
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
);
|
|
197
|
+
var Card = React3.forwardRef(
|
|
198
|
+
({ className, variant, padding, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
199
|
+
"div",
|
|
200
|
+
{
|
|
201
|
+
ref,
|
|
202
|
+
className: cn(cardVariants({ variant, padding }), className),
|
|
203
|
+
...props
|
|
204
|
+
}
|
|
205
|
+
)
|
|
206
|
+
);
|
|
207
|
+
Card.displayName = "Card";
|
|
208
|
+
var CardHeader = React3.forwardRef(
|
|
209
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col gap-1.5 mb-4", className), ...props })
|
|
210
|
+
);
|
|
211
|
+
CardHeader.displayName = "CardHeader";
|
|
212
|
+
var CardTitle = React3.forwardRef(
|
|
213
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx("h3", { ref, className: cn("text-lg font-semibold text-(--color-neutral-900)", className), ...props })
|
|
214
|
+
);
|
|
215
|
+
CardTitle.displayName = "CardTitle";
|
|
216
|
+
var CardDescription = React3.forwardRef(
|
|
217
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", { ref, className: cn("text-sm text-(--color-neutral-500)", className), ...props })
|
|
218
|
+
);
|
|
219
|
+
CardDescription.displayName = "CardDescription";
|
|
220
|
+
var CardContent = React3.forwardRef(
|
|
221
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("text-sm text-(--color-neutral-700)", className), ...props })
|
|
222
|
+
);
|
|
223
|
+
CardContent.displayName = "CardContent";
|
|
224
|
+
var CardFooter = React3.forwardRef(
|
|
225
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center gap-2 mt-4", className), ...props })
|
|
226
|
+
);
|
|
227
|
+
CardFooter.displayName = "CardFooter";
|
|
228
|
+
var avatarVariants = cva(
|
|
229
|
+
"relative inline-flex items-center justify-center shrink-0 overflow-hidden rounded-full bg-(--color-neutral-200)",
|
|
230
|
+
{
|
|
231
|
+
variants: {
|
|
232
|
+
size: {
|
|
233
|
+
xs: "h-6 w-6 text-xs",
|
|
234
|
+
sm: "h-8 w-8 text-sm",
|
|
235
|
+
md: "h-10 w-10 text-base",
|
|
236
|
+
lg: "h-12 w-12 text-lg",
|
|
237
|
+
xl: "h-16 w-16 text-xl"
|
|
238
|
+
}
|
|
239
|
+
},
|
|
240
|
+
defaultVariants: {
|
|
241
|
+
size: "md"
|
|
242
|
+
}
|
|
243
|
+
}
|
|
244
|
+
);
|
|
245
|
+
var Avatar = React3.forwardRef(
|
|
246
|
+
({ className, size, src, alt, fallback, ...props }, ref) => {
|
|
247
|
+
const [imgError, setImgError] = React3.useState(false);
|
|
248
|
+
const initials = fallback == null ? void 0 : fallback.split(" ").map((word) => word[0]).slice(0, 2).join("").toUpperCase();
|
|
249
|
+
return /* @__PURE__ */ jsx(
|
|
250
|
+
"span",
|
|
251
|
+
{
|
|
252
|
+
ref,
|
|
253
|
+
className: cn(avatarVariants({ size }), className),
|
|
254
|
+
...props,
|
|
255
|
+
children: src && !imgError ? /* @__PURE__ */ jsx(
|
|
256
|
+
"img",
|
|
257
|
+
{
|
|
258
|
+
src,
|
|
259
|
+
alt: alt != null ? alt : "",
|
|
260
|
+
className: "h-full w-full object-cover",
|
|
261
|
+
onError: () => setImgError(true)
|
|
262
|
+
}
|
|
263
|
+
) : initials ? /* @__PURE__ */ jsx("span", { className: "font-medium text-(--color-neutral-700) select-none", children: initials }) : /* @__PURE__ */ jsx(
|
|
264
|
+
"svg",
|
|
265
|
+
{
|
|
266
|
+
className: "h-[60%] w-[60%] text-(--color-neutral-400)",
|
|
267
|
+
fill: "currentColor",
|
|
268
|
+
viewBox: "0 0 24 24",
|
|
269
|
+
children: /* @__PURE__ */ jsx("path", { d: "M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z" })
|
|
270
|
+
}
|
|
271
|
+
)
|
|
272
|
+
}
|
|
273
|
+
);
|
|
274
|
+
}
|
|
275
|
+
);
|
|
276
|
+
Avatar.displayName = "Avatar";
|
|
277
|
+
var separatorVariants = cva(
|
|
278
|
+
"shrink-0 bg-(--color-neutral-200)",
|
|
279
|
+
{
|
|
280
|
+
variants: {
|
|
281
|
+
orientation: {
|
|
282
|
+
horizontal: "h-px w-full",
|
|
283
|
+
vertical: "h-full w-px"
|
|
284
|
+
}
|
|
285
|
+
},
|
|
286
|
+
defaultVariants: {
|
|
287
|
+
orientation: "horizontal"
|
|
288
|
+
}
|
|
289
|
+
}
|
|
290
|
+
);
|
|
291
|
+
var Separator = React3.forwardRef(
|
|
292
|
+
({ className, orientation, label, ...props }, ref) => {
|
|
293
|
+
if (label && orientation !== "vertical") {
|
|
294
|
+
return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex items-center gap-3", className), ...props, children: [
|
|
295
|
+
/* @__PURE__ */ jsx("div", { className: "h-px flex-1 bg-(--color-neutral-200)" }),
|
|
296
|
+
/* @__PURE__ */ jsx("span", { className: "text-xs text-(--color-neutral-400) font-medium select-none", children: label }),
|
|
297
|
+
/* @__PURE__ */ jsx("div", { className: "h-px flex-1 bg-(--color-neutral-200)" })
|
|
298
|
+
] });
|
|
299
|
+
}
|
|
300
|
+
return /* @__PURE__ */ jsx(
|
|
301
|
+
"div",
|
|
302
|
+
{
|
|
303
|
+
ref,
|
|
304
|
+
role: "separator",
|
|
305
|
+
"aria-orientation": orientation != null ? orientation : "horizontal",
|
|
306
|
+
className: cn(separatorVariants({ orientation }), className),
|
|
307
|
+
...props
|
|
308
|
+
}
|
|
309
|
+
);
|
|
310
|
+
}
|
|
311
|
+
);
|
|
312
|
+
Separator.displayName = "Separator";
|
|
313
|
+
var spinnerVariants = cva(
|
|
314
|
+
"animate-spin rounded-full border-2 border-(--color-neutral-200) border-t-(--color-primary-500)",
|
|
315
|
+
{
|
|
316
|
+
variants: {
|
|
317
|
+
size: {
|
|
318
|
+
xs: "h-3 w-3",
|
|
319
|
+
sm: "h-4 w-4",
|
|
320
|
+
md: "h-6 w-6",
|
|
321
|
+
lg: "h-8 w-8",
|
|
322
|
+
xl: "h-12 w-12"
|
|
323
|
+
}
|
|
324
|
+
},
|
|
325
|
+
defaultVariants: {
|
|
326
|
+
size: "md"
|
|
327
|
+
}
|
|
328
|
+
}
|
|
329
|
+
);
|
|
330
|
+
var Spinner = React3.forwardRef(
|
|
331
|
+
({ className, size, label, ...props }, ref) => /* @__PURE__ */ jsxs("span", { ref, role: "status", className: cn("inline-flex flex-col items-center gap-2", className), ...props, children: [
|
|
332
|
+
/* @__PURE__ */ jsx("span", { className: cn(spinnerVariants({ size })) }),
|
|
333
|
+
label && /* @__PURE__ */ jsx("span", { className: "text-sm text-(--color-neutral-500)", children: label }),
|
|
334
|
+
/* @__PURE__ */ jsx("span", { className: "sr-only", children: label != null ? label : "Loading..." })
|
|
335
|
+
] })
|
|
336
|
+
);
|
|
337
|
+
Spinner.displayName = "Spinner";
|
|
175
338
|
|
|
176
|
-
export { Badge, Button, Input, badgeVariants, buttonVariants, cn, colors, fontSize, inputVariants, radius };
|
|
339
|
+
export { Avatar, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Input, Separator, Spinner, avatarVariants, badgeVariants, buttonVariants, cardVariants, cn, colors, fontSize, inputVariants, radius, separatorVariants, spinnerVariants };
|
|
177
340
|
//# sourceMappingURL=index.mjs.map
|
|
178
341
|
//# sourceMappingURL=index.mjs.map
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/utils/cn.ts","../src/tokens/index.ts","../src/components/Button/Button.tsx","../src/components/Input/Input.tsx","../src/components/Badge/Badge.tsx"],"names":["cva","React","jsxs","jsx"],"mappings":"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","file":"index.mjs","sourcesContent":["import { clsx, type ClassValue } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}","export const colors = {\n primary: {\n 50: '#FFF4EE',\n 100: '#FFE0CC',\n 200: '#FFBF99',\n 300: '#F08050',\n 400: '#D4602A',\n 500: '#C2440A',\n 600: '#A03808',\n 700: '#8F2F06',\n 800: '#5C1C03',\n 900: '#2E0D01',\n },\n neutral: {\n 50: '#f9f7f5',\n 100: '#f0ece7',\n 200: '#ddd6cc',\n 300: '#c5bab0',\n 400: '#a89b8e',\n 500: '#8a7d72',\n 600: '#6f6358',\n 700: '#564d45',\n 800: '#3c3630',\n 900: '#252019',\n },\n danger: {\n 500: '#ef4444',\n 600: '#dc2626',\n },\n success: {\n 500: '#22c55e',\n 600: '#16a34a',\n },\n warning: {\n 500: '#f59e0b',\n 600: '#d97706',\n },\n} as const\n\nexport const radius = {\n none: '0',\n sm: '0.25rem',\n md: '0.375rem',\n lg: '0.5rem',\n xl: '0.75rem',\n '2xl':'1rem',\n full: '9999px',\n} as const\n\nexport const fontSize = {\n xs: ['0.75rem', { lineHeight: '1rem' }],\n sm: ['0.875rem', { lineHeight: '1.25rem' }],\n base: ['1rem', { lineHeight: '1.5rem' }],\n lg: ['1.125rem', { lineHeight: '1.75rem' }],\n xl: ['1.25rem', { lineHeight: '1.75rem' }],\n} as const","import React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../utils/cn'\n\nexport const buttonVariants = cva(\n 'inline-flex items-center justify-center font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n {\n variants: {\n variant: {\n primary: 'bg-(--color-primary-500) text-white hover:bg-(--color-primary-600) focus-visible:ring-(--color-primary-500)',\n secondary: 'bg-(--color-neutral-100) text-(--color-neutral-900) hover:bg-(--color-neutral-200)',\n outline: 'border border-(--color-primary-500) text-(--color-primary-500) bg-transparent hover:bg-(--color-primary-50)',\n ghost: 'text-(--color-neutral-700) hover:bg-(--color-neutral-100)',\n destructive: 'bg-(--color-danger-500) text-white hover:bg-(--color-danger-600)',\n },\n size: {\n sm: 'h-8 px-3 text-sm rounded-(--radius-md) gap-1.5',\n md: 'h-10 px-4 text-sm rounded-(--radius-md) gap-2',\n lg: 'h-12 px-6 text-base rounded-(--radius-lg) gap-2',\n icon: 'h-10 w-10 rounded-(--radius-md)',\n },\n },\n defaultVariants: {\n variant: 'primary',\n size: 'md',\n },\n }\n)\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {\n isLoading?: boolean\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n ({ className, variant, size, isLoading, children, disabled, ...props }, ref) => (\n <button\n ref={ref}\n className={cn(buttonVariants({ variant, size }), className)}\n disabled={disabled || isLoading}\n {...props}\n >\n {isLoading && (\n <svg className=\"animate-spin h-4 w-4\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\" />\n <path className=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8v8z\" />\n </svg>\n )}\n {children}\n </button>\n )\n)\nButton.displayName = 'Button'","import React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../utils/cn'\n\nexport const inputVariants = cva(\n 'w-full px-3 py-2 text-sm bg-white border rounded-(--radius-md) transition-colors placeholder:text-(--color-neutral-400) focus:outline-none focus:ring-2 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-(--color-neutral-50)',\n {\n variants: {\n state: {\n default: 'border-(--color-neutral-300) text-(--color-neutral-900) focus:border-(--color-primary-500) focus:ring-(--color-primary-500)/20',\n error: 'border-(--color-danger-500) text-(--color-neutral-900) focus:border-(--color-danger-500) focus:ring-(--color-danger-500)/20',\n },\n inputSize: {\n sm: 'h-8 text-xs',\n md: 'h-10 text-sm',\n lg: 'h-12 text-base',\n },\n },\n defaultVariants: {\n state: 'default',\n inputSize: 'md',\n },\n }\n)\n\nexport interface InputProps\n extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,\n VariantProps<typeof inputVariants> {\n label?: string\n error?: string\n hint?: string\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n ({ className, label, error, hint, id, inputSize, ...props }, ref) => {\n const inputId = id ?? label?.toLowerCase().replace(/\\s+/g, '-')\n return (\n <div className=\"flex flex-col gap-1.5 w-full\">\n {label && (\n <label htmlFor={inputId} className=\"text-sm font-medium text-(--color-neutral-700)\">\n {label}\n </label>\n )}\n <input\n ref={ref}\n id={inputId}\n className={cn(inputVariants({ state: error ? 'error' : 'default', inputSize }), className)}\n {...props}\n />\n {hint && !error && <p className=\"text-xs text-(--color-neutral-500)\">{hint}</p>}\n {error && <p className=\"text-xs text-(--color-danger-500)\">{error}</p>}\n </div>\n )\n }\n)\nInput.displayName = 'Input'","import React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../utils/cn'\n\nexport const badgeVariants = cva(\n 'inline-flex items-center rounded-full font-medium',\n {\n variants: {\n variant: {\n default: 'bg-(--color-primary-500) text-white',\n secondary: 'bg-(--color-neutral-100) text-(--color-neutral-700)',\n outline: 'border border-(--color-primary-500) text-(--color-primary-500)',\n success: 'bg-(--color-success-500)/10 text-(--color-success-600)',\n warning: 'bg-(--color-warning-500)/10 text-(--color-warning-600)',\n destructive: 'bg-(--color-danger-500)/10 text-(--color-danger-600)',\n },\n size: {\n sm: 'px-2 py-0.5 text-xs',\n md: 'px-2.5 py-0.5 text-sm',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'md',\n },\n }\n)\n\nexport interface BadgeProps\n extends React.HTMLAttributes<HTMLSpanElement>,\n VariantProps<typeof badgeVariants> {}\n\nexport const Badge = ({ className, variant, size, ...props }: BadgeProps) => (\n <span className={cn(badgeVariants({ variant, size }), className)} {...props} />\n)\nBadge.displayName = 'Badge'"]}
|
|
1
|
+
{"version":3,"sources":["../src/utils/cn.ts","../src/tokens/index.ts","../src/components/Button/Button.tsx","../src/components/Input/Input.tsx","../src/components/Badge/Badge.tsx","../src/components/Card/Card.tsx","../src/components/Avatar/Avatar.tsx","../src/components/Separator/Separator.tsx","../src/components/Spinner/Spinner.tsx"],"names":["React","cva","jsxs","jsx"],"mappings":"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","file":"index.mjs","sourcesContent":["import { clsx, type ClassValue } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}","export const colors = {\n primary: {\n 50: '#FFF4EE',\n 100: '#FFE0CC',\n 200: '#FFBF99',\n 300: '#F08050',\n 400: '#D4602A',\n 500: '#C2440A',\n 600: '#A03808',\n 700: '#8F2F06',\n 800: '#5C1C03',\n 900: '#2E0D01',\n },\n neutral: {\n 50: '#f9f7f5',\n 100: '#f0ece7',\n 200: '#ddd6cc',\n 300: '#c5bab0',\n 400: '#a89b8e',\n 500: '#8a7d72',\n 600: '#6f6358',\n 700: '#564d45',\n 800: '#3c3630',\n 900: '#252019',\n },\n danger: {\n 500: '#ef4444',\n 600: '#dc2626',\n },\n success: {\n 500: '#22c55e',\n 600: '#16a34a',\n },\n warning: {\n 500: '#f59e0b',\n 600: '#d97706',\n },\n} as const\n\nexport const radius = {\n none: '0',\n sm: '0.25rem',\n md: '0.375rem',\n lg: '0.5rem',\n xl: '0.75rem',\n '2xl':'1rem',\n full: '9999px',\n} as const\n\nexport const fontSize = {\n xs: ['0.75rem', { lineHeight: '1rem' }],\n sm: ['0.875rem', { lineHeight: '1.25rem' }],\n base: ['1rem', { lineHeight: '1.5rem' }],\n lg: ['1.125rem', { lineHeight: '1.75rem' }],\n xl: ['1.25rem', { lineHeight: '1.75rem' }],\n} as const","import React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../utils/cn'\n\nexport const buttonVariants = cva(\n 'inline-flex items-center justify-center font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n {\n variants: {\n variant: {\n primary: 'bg-(--color-primary-500) text-white hover:bg-(--color-primary-600) focus-visible:ring-(--color-primary-500)',\n secondary: 'bg-(--color-neutral-100) text-(--color-neutral-900) hover:bg-(--color-neutral-200)',\n outline: 'border border-(--color-primary-500) text-(--color-primary-500) bg-transparent hover:bg-(--color-primary-50)',\n ghost: 'text-(--color-neutral-700) hover:bg-(--color-neutral-100)',\n destructive: 'bg-(--color-danger-500) text-white hover:bg-(--color-danger-600)',\n },\n size: {\n sm: 'h-8 px-3 text-sm rounded-(--radius-md) gap-1.5',\n md: 'h-10 px-4 text-sm rounded-(--radius-md) gap-2',\n lg: 'h-12 px-6 text-base rounded-(--radius-lg) gap-2',\n icon: 'h-10 w-10 rounded-(--radius-md)',\n },\n },\n defaultVariants: {\n variant: 'primary',\n size: 'md',\n },\n }\n)\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {\n isLoading?: boolean\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n ({ className, variant, size, isLoading, children, disabled, ...props }, ref) => (\n <button\n ref={ref}\n className={cn(buttonVariants({ variant, size }), className)}\n disabled={disabled || isLoading}\n {...props}\n >\n {isLoading && (\n <svg className=\"animate-spin h-4 w-4\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\" />\n <path className=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8v8z\" />\n </svg>\n )}\n {children}\n </button>\n )\n)\nButton.displayName = 'Button'","import React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../utils/cn'\n\nexport const inputVariants = cva(\n 'w-full px-3 py-2 text-sm bg-white border rounded-(--radius-md) transition-colors placeholder:text-(--color-neutral-400) focus:outline-none focus:ring-2 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-(--color-neutral-50)',\n {\n variants: {\n state: {\n default: 'border-(--color-neutral-300) text-(--color-neutral-900) focus:border-(--color-primary-500) focus:ring-(--color-primary-500)/20',\n error: 'border-(--color-danger-500) text-(--color-neutral-900) focus:border-(--color-danger-500) focus:ring-(--color-danger-500)/20',\n },\n inputSize: {\n sm: 'h-8 text-xs',\n md: 'h-10 text-sm',\n lg: 'h-12 text-base',\n },\n },\n defaultVariants: {\n state: 'default',\n inputSize: 'md',\n },\n }\n)\n\nexport interface InputProps\n extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,\n VariantProps<typeof inputVariants> {\n label?: string\n error?: string\n hint?: string\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n ({ className, label, error, hint, id, inputSize, ...props }, ref) => {\n const inputId = id ?? label?.toLowerCase().replace(/\\s+/g, '-')\n return (\n <div className=\"flex flex-col gap-1.5 w-full\">\n {label && (\n <label htmlFor={inputId} className=\"text-sm font-medium text-(--color-neutral-700)\">\n {label}\n </label>\n )}\n <input\n ref={ref}\n id={inputId}\n className={cn(inputVariants({ state: error ? 'error' : 'default', inputSize }), className)}\n {...props}\n />\n {hint && !error && <p className=\"text-xs text-(--color-neutral-500)\">{hint}</p>}\n {error && <p className=\"text-xs text-(--color-danger-500)\">{error}</p>}\n </div>\n )\n }\n)\nInput.displayName = 'Input'","import React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../utils/cn'\n\nexport const badgeVariants = cva(\n 'inline-flex items-center rounded-full font-medium',\n {\n variants: {\n variant: {\n default: 'bg-(--color-primary-500) text-white',\n secondary: 'bg-(--color-neutral-100) text-(--color-neutral-700)',\n outline: 'border border-(--color-primary-500) text-(--color-primary-500)',\n success: 'bg-(--color-success-500)/10 text-(--color-success-600)',\n warning: 'bg-(--color-warning-500)/10 text-(--color-warning-600)',\n destructive: 'bg-(--color-danger-500)/10 text-(--color-danger-600)',\n },\n size: {\n sm: 'px-2 py-0.5 text-xs',\n md: 'px-2.5 py-0.5 text-sm',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'md',\n },\n }\n)\n\nexport interface BadgeProps\n extends React.HTMLAttributes<HTMLSpanElement>,\n VariantProps<typeof badgeVariants> {}\n\nexport const Badge = ({ className, variant, size, ...props }: BadgeProps) => (\n <span className={cn(badgeVariants({ variant, size }), className)} {...props} />\n)\nBadge.displayName = 'Badge'","import React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../utils/cn'\n\nexport const cardVariants = cva(\n 'rounded-(--radius-lg) bg-white text-(--color-neutral-900)',\n {\n variants: {\n variant: {\n elevated: 'shadow-md',\n outlined: 'border border-(--color-neutral-200)',\n ghost: 'bg-(--color-neutral-50)',\n },\n padding: {\n none: '',\n sm: 'p-4',\n md: 'p-6',\n lg: 'p-8',\n },\n },\n defaultVariants: {\n variant: 'elevated',\n padding: 'md',\n },\n }\n)\n\nexport interface CardProps\n extends React.HTMLAttributes<HTMLDivElement>,\n VariantProps<typeof cardVariants> {}\n\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(\n ({ className, variant, padding, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(cardVariants({ variant, padding }), className)}\n {...props}\n />\n )\n)\nCard.displayName = 'Card'\n\n// ─── Sub-components ───────────────────────────────────────\n\nexport const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ className, ...props }, ref) => (\n <div ref={ref} className={cn('flex flex-col gap-1.5 mb-4', className)} {...props} />\n )\n)\nCardHeader.displayName = 'CardHeader'\n\nexport const CardTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(\n ({ className, ...props }, ref) => (\n <h3 ref={ref} className={cn('text-lg font-semibold text-(--color-neutral-900)', className)} {...props} />\n )\n)\nCardTitle.displayName = 'CardTitle'\n\nexport const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(\n ({ className, ...props }, ref) => (\n <p ref={ref} className={cn('text-sm text-(--color-neutral-500)', className)} {...props} />\n )\n)\nCardDescription.displayName = 'CardDescription'\n\nexport const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ className, ...props }, ref) => (\n <div ref={ref} className={cn('text-sm text-(--color-neutral-700)', className)} {...props} />\n )\n)\nCardContent.displayName = 'CardContent'\n\nexport const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ className, ...props }, ref) => (\n <div ref={ref} className={cn('flex items-center gap-2 mt-4', className)} {...props} />\n )\n)\nCardFooter.displayName = 'CardFooter'","import React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../utils/cn'\n\nexport const avatarVariants = cva(\n 'relative inline-flex items-center justify-center shrink-0 overflow-hidden rounded-full bg-(--color-neutral-200)',\n {\n variants: {\n size: {\n xs: 'h-6 w-6 text-xs',\n sm: 'h-8 w-8 text-sm',\n md: 'h-10 w-10 text-base',\n lg: 'h-12 w-12 text-lg',\n xl: 'h-16 w-16 text-xl',\n },\n },\n defaultVariants: {\n size: 'md',\n },\n }\n)\n\nexport interface AvatarProps\n extends React.HTMLAttributes<HTMLSpanElement>,\n VariantProps<typeof avatarVariants> {\n src?: string\n alt?: string\n fallback?: string\n}\n\nexport const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(\n ({ className, size, src, alt, fallback, ...props }, ref) => {\n const [imgError, setImgError] = React.useState(false)\n\n const initials = fallback\n ?.split(' ')\n .map((word) => word[0])\n .slice(0, 2)\n .join('')\n .toUpperCase()\n\n return (\n <span\n ref={ref}\n className={cn(avatarVariants({ size }), className)}\n {...props}\n >\n {src && !imgError ? (\n <img\n src={src}\n alt={alt ?? ''}\n className=\"h-full w-full object-cover\"\n onError={() => setImgError(true)}\n />\n ) : initials ? (\n <span className=\"font-medium text-(--color-neutral-700) select-none\">\n {initials}\n </span>\n ) : (\n <svg\n className=\"h-[60%] w-[60%] text-(--color-neutral-400)\"\n fill=\"currentColor\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z\" />\n </svg>\n )}\n </span>\n )\n }\n)\nAvatar.displayName = 'Avatar'","import React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../utils/cn'\n\nexport const separatorVariants = cva(\n 'shrink-0 bg-(--color-neutral-200)',\n {\n variants: {\n orientation: {\n horizontal: 'h-px w-full',\n vertical: 'h-full w-px',\n },\n },\n defaultVariants: {\n orientation: 'horizontal',\n },\n }\n)\n\nexport interface SeparatorProps\n extends React.HTMLAttributes<HTMLDivElement>,\n VariantProps<typeof separatorVariants> {\n label?: string\n}\n\nexport const Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(\n ({ className, orientation, label, ...props }, ref) => {\n if (label && orientation !== 'vertical') {\n return (\n <div ref={ref} className={cn('flex items-center gap-3', className)} {...props}>\n <div className=\"h-px flex-1 bg-(--color-neutral-200)\" />\n <span className=\"text-xs text-(--color-neutral-400) font-medium select-none\">\n {label}\n </span>\n <div className=\"h-px flex-1 bg-(--color-neutral-200)\" />\n </div>\n )\n }\n\n return (\n <div\n ref={ref}\n role=\"separator\"\n aria-orientation={orientation ?? 'horizontal'}\n className={cn(separatorVariants({ orientation }), className)}\n {...props}\n />\n )\n }\n)\nSeparator.displayName = 'Separator'","import React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../utils/cn'\n\nexport const spinnerVariants = cva(\n 'animate-spin rounded-full border-2 border-(--color-neutral-200) border-t-(--color-primary-500)',\n {\n variants: {\n size: {\n xs: 'h-3 w-3',\n sm: 'h-4 w-4',\n md: 'h-6 w-6',\n lg: 'h-8 w-8',\n xl: 'h-12 w-12',\n },\n },\n defaultVariants: {\n size: 'md',\n },\n }\n)\n\nexport interface SpinnerProps\n extends React.HTMLAttributes<HTMLSpanElement>,\n VariantProps<typeof spinnerVariants> {\n label?: string\n}\n\nexport const Spinner = React.forwardRef<HTMLSpanElement, SpinnerProps>(\n ({ className, size, label, ...props }, ref) => (\n <span ref={ref} role=\"status\" className={cn('inline-flex flex-col items-center gap-2', className)} {...props}>\n <span className={cn(spinnerVariants({ size }))} />\n {label && (\n <span className=\"text-sm text-(--color-neutral-500)\">{label}</span>\n )}\n <span className=\"sr-only\">{label ?? 'Loading...'}</span>\n </span>\n )\n)\nSpinner.displayName = 'Spinner'"]}
|