@kenshinx/ui 0.0.0-development
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/dist/index.d.ts +56 -0
- package/dist/index.js +245 -0
- package/dist/styles.css +119 -0
- package/dist/tailwind-preset.d.ts +23 -0
- package/dist/tailwind-preset.js +76 -0
- package/package.json +86 -0
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { ClassValue } from 'clsx';
|
|
2
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { VariantProps } from 'class-variance-authority';
|
|
5
|
+
import * as LabelPrimitive from '@radix-ui/react-label';
|
|
6
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
7
|
+
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
8
|
+
import * as SwitchPrimitives from '@radix-ui/react-switch';
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* Utility function to merge Tailwind CSS classes with clsx
|
|
12
|
+
* Combines clsx for conditional classes with tailwind-merge for deduplication
|
|
13
|
+
*/
|
|
14
|
+
declare function cn(...inputs: ClassValue[]): string;
|
|
15
|
+
|
|
16
|
+
declare const buttonVariants: (props?: ({
|
|
17
|
+
variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
|
|
18
|
+
size?: "default" | "sm" | "lg" | "icon" | null | undefined;
|
|
19
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
20
|
+
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
|
|
21
|
+
asChild?: boolean;
|
|
22
|
+
}
|
|
23
|
+
declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
24
|
+
|
|
25
|
+
type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
|
|
26
|
+
declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
|
|
27
|
+
|
|
28
|
+
declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: class_variance_authority_types.ClassProp | undefined) => string> & React.RefAttributes<HTMLLabelElement>>;
|
|
29
|
+
|
|
30
|
+
declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
31
|
+
declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
32
|
+
declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLParagraphElement>>;
|
|
33
|
+
declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
|
|
34
|
+
declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
35
|
+
declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
36
|
+
|
|
37
|
+
declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
|
|
38
|
+
declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
39
|
+
declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
|
|
40
|
+
declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
|
|
41
|
+
declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
42
|
+
declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
43
|
+
declare const DialogHeader: {
|
|
44
|
+
({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
|
|
45
|
+
displayName: string;
|
|
46
|
+
};
|
|
47
|
+
declare const DialogFooter: {
|
|
48
|
+
({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
|
|
49
|
+
displayName: string;
|
|
50
|
+
};
|
|
51
|
+
declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
|
|
52
|
+
declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
|
|
53
|
+
|
|
54
|
+
declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
55
|
+
|
|
56
|
+
export { Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Input, type InputProps, Label, Switch, buttonVariants, cn };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,245 @@
|
|
|
1
|
+
import { clsx } from 'clsx';
|
|
2
|
+
import { twMerge } from 'tailwind-merge';
|
|
3
|
+
import * as React4 from 'react';
|
|
4
|
+
import { Slot } from '@radix-ui/react-slot';
|
|
5
|
+
import { cva } from 'class-variance-authority';
|
|
6
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
7
|
+
import * as LabelPrimitive from '@radix-ui/react-label';
|
|
8
|
+
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
9
|
+
import { X } from 'lucide-react';
|
|
10
|
+
import * as SwitchPrimitives from '@radix-ui/react-switch';
|
|
11
|
+
|
|
12
|
+
// src/lib/utils.ts
|
|
13
|
+
function cn(...inputs) {
|
|
14
|
+
return twMerge(clsx(inputs));
|
|
15
|
+
}
|
|
16
|
+
var buttonVariants = cva(
|
|
17
|
+
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
|
18
|
+
{
|
|
19
|
+
variants: {
|
|
20
|
+
variant: {
|
|
21
|
+
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
|
22
|
+
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
|
|
23
|
+
outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
|
|
24
|
+
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
|
25
|
+
ghost: "hover:bg-accent hover:text-accent-foreground",
|
|
26
|
+
link: "text-primary underline-offset-4 hover:underline"
|
|
27
|
+
},
|
|
28
|
+
size: {
|
|
29
|
+
default: "h-10 px-4 py-2",
|
|
30
|
+
sm: "h-9 rounded-md px-3",
|
|
31
|
+
lg: "h-11 rounded-md px-8",
|
|
32
|
+
icon: "h-10 w-10"
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
defaultVariants: {
|
|
36
|
+
variant: "default",
|
|
37
|
+
size: "default"
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
);
|
|
41
|
+
var Button = React4.forwardRef(
|
|
42
|
+
({ className, variant, size, asChild = false, ...props }, ref) => {
|
|
43
|
+
const Comp = asChild ? Slot : "button";
|
|
44
|
+
return /* @__PURE__ */ jsx(
|
|
45
|
+
Comp,
|
|
46
|
+
{
|
|
47
|
+
className: cn(buttonVariants({ variant, size, className })),
|
|
48
|
+
ref,
|
|
49
|
+
...props
|
|
50
|
+
}
|
|
51
|
+
);
|
|
52
|
+
}
|
|
53
|
+
);
|
|
54
|
+
Button.displayName = "Button";
|
|
55
|
+
var Input = React4.forwardRef(
|
|
56
|
+
({ className, type, ...props }, ref) => {
|
|
57
|
+
return /* @__PURE__ */ jsx(
|
|
58
|
+
"input",
|
|
59
|
+
{
|
|
60
|
+
type,
|
|
61
|
+
className: cn(
|
|
62
|
+
"border-input bg-background ring-offset-background file:text-foreground placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
|
63
|
+
className
|
|
64
|
+
),
|
|
65
|
+
ref,
|
|
66
|
+
...props
|
|
67
|
+
}
|
|
68
|
+
);
|
|
69
|
+
}
|
|
70
|
+
);
|
|
71
|
+
Input.displayName = "Input";
|
|
72
|
+
var labelVariants = cva(
|
|
73
|
+
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
|
74
|
+
);
|
|
75
|
+
var Label = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
76
|
+
LabelPrimitive.Root,
|
|
77
|
+
{
|
|
78
|
+
ref,
|
|
79
|
+
className: cn(labelVariants(), className),
|
|
80
|
+
...props
|
|
81
|
+
}
|
|
82
|
+
));
|
|
83
|
+
Label.displayName = LabelPrimitive.Root.displayName;
|
|
84
|
+
var Card = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
85
|
+
"div",
|
|
86
|
+
{
|
|
87
|
+
ref,
|
|
88
|
+
className: cn(
|
|
89
|
+
"bg-card text-card-foreground rounded-lg border shadow-sm",
|
|
90
|
+
className
|
|
91
|
+
),
|
|
92
|
+
...props
|
|
93
|
+
}
|
|
94
|
+
));
|
|
95
|
+
Card.displayName = "Card";
|
|
96
|
+
var CardHeader = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
97
|
+
"div",
|
|
98
|
+
{
|
|
99
|
+
ref,
|
|
100
|
+
className: cn("flex flex-col space-y-1.5 p-6", className),
|
|
101
|
+
...props
|
|
102
|
+
}
|
|
103
|
+
));
|
|
104
|
+
CardHeader.displayName = "CardHeader";
|
|
105
|
+
var CardTitle = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
106
|
+
"h3",
|
|
107
|
+
{
|
|
108
|
+
ref,
|
|
109
|
+
className: cn(
|
|
110
|
+
"text-2xl font-semibold leading-none tracking-tight",
|
|
111
|
+
className
|
|
112
|
+
),
|
|
113
|
+
...props
|
|
114
|
+
}
|
|
115
|
+
));
|
|
116
|
+
CardTitle.displayName = "CardTitle";
|
|
117
|
+
var CardDescription = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
118
|
+
"p",
|
|
119
|
+
{
|
|
120
|
+
ref,
|
|
121
|
+
className: cn("text-muted-foreground text-sm", className),
|
|
122
|
+
...props
|
|
123
|
+
}
|
|
124
|
+
));
|
|
125
|
+
CardDescription.displayName = "CardDescription";
|
|
126
|
+
var CardContent = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
|
|
127
|
+
CardContent.displayName = "CardContent";
|
|
128
|
+
var CardFooter = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
129
|
+
"div",
|
|
130
|
+
{
|
|
131
|
+
ref,
|
|
132
|
+
className: cn("flex items-center p-6 pt-0", className),
|
|
133
|
+
...props
|
|
134
|
+
}
|
|
135
|
+
));
|
|
136
|
+
CardFooter.displayName = "CardFooter";
|
|
137
|
+
var Dialog = DialogPrimitive.Root;
|
|
138
|
+
var DialogTrigger = DialogPrimitive.Trigger;
|
|
139
|
+
var DialogPortal = DialogPrimitive.Portal;
|
|
140
|
+
var DialogClose = DialogPrimitive.Close;
|
|
141
|
+
var DialogOverlay = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
142
|
+
DialogPrimitive.Overlay,
|
|
143
|
+
{
|
|
144
|
+
ref,
|
|
145
|
+
className: cn(
|
|
146
|
+
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
|
|
147
|
+
className
|
|
148
|
+
),
|
|
149
|
+
...props
|
|
150
|
+
}
|
|
151
|
+
));
|
|
152
|
+
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
|
|
153
|
+
var DialogContent = React4.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
|
|
154
|
+
/* @__PURE__ */ jsx(DialogOverlay, {}),
|
|
155
|
+
/* @__PURE__ */ jsxs(
|
|
156
|
+
DialogPrimitive.Content,
|
|
157
|
+
{
|
|
158
|
+
ref,
|
|
159
|
+
className: cn(
|
|
160
|
+
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
|
|
161
|
+
className
|
|
162
|
+
),
|
|
163
|
+
...props,
|
|
164
|
+
children: [
|
|
165
|
+
children,
|
|
166
|
+
/* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none", children: [
|
|
167
|
+
/* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
|
|
168
|
+
/* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
|
|
169
|
+
] })
|
|
170
|
+
]
|
|
171
|
+
}
|
|
172
|
+
)
|
|
173
|
+
] }));
|
|
174
|
+
DialogContent.displayName = DialogPrimitive.Content.displayName;
|
|
175
|
+
var DialogHeader = ({
|
|
176
|
+
className,
|
|
177
|
+
...props
|
|
178
|
+
}) => /* @__PURE__ */ jsx(
|
|
179
|
+
"div",
|
|
180
|
+
{
|
|
181
|
+
className: cn(
|
|
182
|
+
"flex flex-col space-y-1.5 text-center sm:text-left",
|
|
183
|
+
className
|
|
184
|
+
),
|
|
185
|
+
...props
|
|
186
|
+
}
|
|
187
|
+
);
|
|
188
|
+
DialogHeader.displayName = "DialogHeader";
|
|
189
|
+
var DialogFooter = ({
|
|
190
|
+
className,
|
|
191
|
+
...props
|
|
192
|
+
}) => /* @__PURE__ */ jsx(
|
|
193
|
+
"div",
|
|
194
|
+
{
|
|
195
|
+
className: cn(
|
|
196
|
+
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
|
|
197
|
+
className
|
|
198
|
+
),
|
|
199
|
+
...props
|
|
200
|
+
}
|
|
201
|
+
);
|
|
202
|
+
DialogFooter.displayName = "DialogFooter";
|
|
203
|
+
var DialogTitle = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
204
|
+
DialogPrimitive.Title,
|
|
205
|
+
{
|
|
206
|
+
ref,
|
|
207
|
+
className: cn(
|
|
208
|
+
"text-lg font-semibold leading-none tracking-tight",
|
|
209
|
+
className
|
|
210
|
+
),
|
|
211
|
+
...props
|
|
212
|
+
}
|
|
213
|
+
));
|
|
214
|
+
DialogTitle.displayName = DialogPrimitive.Title.displayName;
|
|
215
|
+
var DialogDescription = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
216
|
+
DialogPrimitive.Description,
|
|
217
|
+
{
|
|
218
|
+
ref,
|
|
219
|
+
className: cn("text-muted-foreground text-sm", className),
|
|
220
|
+
...props
|
|
221
|
+
}
|
|
222
|
+
));
|
|
223
|
+
DialogDescription.displayName = DialogPrimitive.Description.displayName;
|
|
224
|
+
var Switch = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
225
|
+
SwitchPrimitives.Root,
|
|
226
|
+
{
|
|
227
|
+
className: cn(
|
|
228
|
+
"focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
|
229
|
+
className
|
|
230
|
+
),
|
|
231
|
+
...props,
|
|
232
|
+
ref,
|
|
233
|
+
children: /* @__PURE__ */ jsx(
|
|
234
|
+
SwitchPrimitives.Thumb,
|
|
235
|
+
{
|
|
236
|
+
className: cn(
|
|
237
|
+
"bg-background pointer-events-none block h-5 w-5 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
|
|
238
|
+
)
|
|
239
|
+
}
|
|
240
|
+
)
|
|
241
|
+
}
|
|
242
|
+
));
|
|
243
|
+
Switch.displayName = SwitchPrimitives.Root.displayName;
|
|
244
|
+
|
|
245
|
+
export { Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Input, Label, Switch, buttonVariants, cn };
|
package/dist/styles.css
ADDED
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @kenshinx/ui - Design Tokens
|
|
3
|
+
*
|
|
4
|
+
* These CSS variables define the theme for all components.
|
|
5
|
+
* Consumers can override any of these values in their own CSS.
|
|
6
|
+
*
|
|
7
|
+
* Color format: HSL values without the hsl() wrapper
|
|
8
|
+
* Example: --primary: 220 90% 56%;
|
|
9
|
+
* Usage in Tailwind: hsl(var(--primary))
|
|
10
|
+
*/
|
|
11
|
+
|
|
12
|
+
@tailwind base;
|
|
13
|
+
|
|
14
|
+
@layer base {
|
|
15
|
+
:root {
|
|
16
|
+
/* Background & Foreground */
|
|
17
|
+
--background: 283 41% 97%;
|
|
18
|
+
--foreground: 217 19% 26%;
|
|
19
|
+
|
|
20
|
+
/* Card */
|
|
21
|
+
--card: 0 0% 100%;
|
|
22
|
+
--card-foreground: 217 19% 26%;
|
|
23
|
+
|
|
24
|
+
/* Popover */
|
|
25
|
+
--popover: 0 0% 100%;
|
|
26
|
+
--popover-foreground: 217 19% 26%;
|
|
27
|
+
|
|
28
|
+
/* Primary */
|
|
29
|
+
--primary: 255 93% 76%;
|
|
30
|
+
--primary-foreground: 0 0% 100%;
|
|
31
|
+
|
|
32
|
+
/* Secondary */
|
|
33
|
+
--secondary: 300 100% 98%;
|
|
34
|
+
--secondary-foreground: 216 15% 35%;
|
|
35
|
+
|
|
36
|
+
/* Muted */
|
|
37
|
+
--muted: 269 100% 96%;
|
|
38
|
+
--muted-foreground: 220 8% 46%;
|
|
39
|
+
|
|
40
|
+
/* Accent */
|
|
41
|
+
--accent: 293 53% 93%;
|
|
42
|
+
--accent-foreground: 217 19% 26%;
|
|
43
|
+
|
|
44
|
+
/* Destructive */
|
|
45
|
+
--destructive: 0 91% 82%;
|
|
46
|
+
--destructive-foreground: 0 0% 100%;
|
|
47
|
+
|
|
48
|
+
/* Border, Input & Ring */
|
|
49
|
+
--border: 267 85% 92%;
|
|
50
|
+
--input: 267 85% 92%;
|
|
51
|
+
--ring: 255 93% 76%;
|
|
52
|
+
|
|
53
|
+
/* Border Radius */
|
|
54
|
+
--radius: 1.5rem;
|
|
55
|
+
|
|
56
|
+
/* Chart Colors (for data visualization) */
|
|
57
|
+
--chart-1: 255 93% 76%;
|
|
58
|
+
--chart-2: 258 92% 67%;
|
|
59
|
+
--chart-3: 262 84% 58%;
|
|
60
|
+
--chart-4: 263 69% 50%;
|
|
61
|
+
--chart-5: 263 70% 42%;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.dark {
|
|
65
|
+
/* Background & Foreground */
|
|
66
|
+
--background: 23 15% 10%;
|
|
67
|
+
--foreground: 227 88% 94%;
|
|
68
|
+
|
|
69
|
+
/* Card */
|
|
70
|
+
--card: 270 18% 18%;
|
|
71
|
+
--card-foreground: 227 88% 94%;
|
|
72
|
+
|
|
73
|
+
/* Popover */
|
|
74
|
+
--popover: 270 18% 18%;
|
|
75
|
+
--popover-foreground: 227 88% 94%;
|
|
76
|
+
|
|
77
|
+
/* Primary */
|
|
78
|
+
--primary: 256 100% 83%;
|
|
79
|
+
--primary-foreground: 23 15% 10%;
|
|
80
|
+
|
|
81
|
+
/* Secondary */
|
|
82
|
+
--secondary: 273 18% 24%;
|
|
83
|
+
--secondary-foreground: 218 13% 84%;
|
|
84
|
+
|
|
85
|
+
/* Muted */
|
|
86
|
+
--muted: 270 18% 18%;
|
|
87
|
+
--muted-foreground: 218 10% 65%;
|
|
88
|
+
|
|
89
|
+
/* Accent */
|
|
90
|
+
--accent: 267 19% 30%;
|
|
91
|
+
--accent-foreground: 218 13% 84%;
|
|
92
|
+
|
|
93
|
+
/* Destructive */
|
|
94
|
+
--destructive: 0 91% 82%;
|
|
95
|
+
--destructive-foreground: 0 0% 100%;
|
|
96
|
+
|
|
97
|
+
/* Border, Input & Ring */
|
|
98
|
+
--border: 273 18% 24%;
|
|
99
|
+
--input: 273 18% 24%;
|
|
100
|
+
--ring: 256 100% 83%;
|
|
101
|
+
|
|
102
|
+
/* Chart Colors (for data visualization) */
|
|
103
|
+
--chart-1: 256 100% 83%;
|
|
104
|
+
--chart-2: 255 93% 76%;
|
|
105
|
+
--chart-3: 258 92% 67%;
|
|
106
|
+
--chart-4: 262 84% 58%;
|
|
107
|
+
--chart-5: 263 69% 50%;
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
@layer base {
|
|
112
|
+
* {
|
|
113
|
+
@apply border-border;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
body {
|
|
117
|
+
@apply bg-background text-foreground;
|
|
118
|
+
}
|
|
119
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { Config } from 'tailwindcss';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* @kenshinx/ui Tailwind CSS Preset
|
|
5
|
+
*
|
|
6
|
+
* This preset provides:
|
|
7
|
+
* - Color tokens mapped to CSS variables
|
|
8
|
+
* - Border radius based on --radius variable
|
|
9
|
+
* - Animation plugin for component animations
|
|
10
|
+
*
|
|
11
|
+
* Usage in consumer's tailwind.config.ts:
|
|
12
|
+
* ```ts
|
|
13
|
+
* import kenshinPreset from "@kenshinx/ui/tailwind-preset";
|
|
14
|
+
*
|
|
15
|
+
* export default {
|
|
16
|
+
* presets: [kenshinPreset],
|
|
17
|
+
* content: ["./src/**\/*.{ts,tsx}"],
|
|
18
|
+
* } satisfies Config;
|
|
19
|
+
* ```
|
|
20
|
+
*/
|
|
21
|
+
declare const kenshinPreset: Config;
|
|
22
|
+
|
|
23
|
+
export { kenshinPreset as default };
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
import tailwindcssAnimate from 'tailwindcss-animate';
|
|
2
|
+
|
|
3
|
+
// src/tailwind/preset.ts
|
|
4
|
+
var kenshinPreset = {
|
|
5
|
+
content: [],
|
|
6
|
+
darkMode: ["class"],
|
|
7
|
+
theme: {
|
|
8
|
+
extend: {
|
|
9
|
+
colors: {
|
|
10
|
+
background: "hsl(var(--background))",
|
|
11
|
+
foreground: "hsl(var(--foreground))",
|
|
12
|
+
card: {
|
|
13
|
+
DEFAULT: "hsl(var(--card))",
|
|
14
|
+
foreground: "hsl(var(--card-foreground))"
|
|
15
|
+
},
|
|
16
|
+
popover: {
|
|
17
|
+
DEFAULT: "hsl(var(--popover))",
|
|
18
|
+
foreground: "hsl(var(--popover-foreground))"
|
|
19
|
+
},
|
|
20
|
+
primary: {
|
|
21
|
+
DEFAULT: "hsl(var(--primary))",
|
|
22
|
+
foreground: "hsl(var(--primary-foreground))"
|
|
23
|
+
},
|
|
24
|
+
secondary: {
|
|
25
|
+
DEFAULT: "hsl(var(--secondary))",
|
|
26
|
+
foreground: "hsl(var(--secondary-foreground))"
|
|
27
|
+
},
|
|
28
|
+
muted: {
|
|
29
|
+
DEFAULT: "hsl(var(--muted))",
|
|
30
|
+
foreground: "hsl(var(--muted-foreground))"
|
|
31
|
+
},
|
|
32
|
+
accent: {
|
|
33
|
+
DEFAULT: "hsl(var(--accent))",
|
|
34
|
+
foreground: "hsl(var(--accent-foreground))"
|
|
35
|
+
},
|
|
36
|
+
destructive: {
|
|
37
|
+
DEFAULT: "hsl(var(--destructive))",
|
|
38
|
+
foreground: "hsl(var(--destructive-foreground))"
|
|
39
|
+
},
|
|
40
|
+
border: "hsl(var(--border))",
|
|
41
|
+
input: "hsl(var(--input))",
|
|
42
|
+
ring: "hsl(var(--ring))",
|
|
43
|
+
chart: {
|
|
44
|
+
"1": "hsl(var(--chart-1))",
|
|
45
|
+
"2": "hsl(var(--chart-2))",
|
|
46
|
+
"3": "hsl(var(--chart-3))",
|
|
47
|
+
"4": "hsl(var(--chart-4))",
|
|
48
|
+
"5": "hsl(var(--chart-5))"
|
|
49
|
+
}
|
|
50
|
+
},
|
|
51
|
+
borderRadius: {
|
|
52
|
+
lg: "var(--radius)",
|
|
53
|
+
md: "calc(var(--radius) - 2px)",
|
|
54
|
+
sm: "calc(var(--radius) - 4px)"
|
|
55
|
+
},
|
|
56
|
+
keyframes: {
|
|
57
|
+
"accordion-down": {
|
|
58
|
+
from: { height: "0" },
|
|
59
|
+
to: { height: "var(--radix-accordion-content-height)" }
|
|
60
|
+
},
|
|
61
|
+
"accordion-up": {
|
|
62
|
+
from: { height: "var(--radix-accordion-content-height)" },
|
|
63
|
+
to: { height: "0" }
|
|
64
|
+
}
|
|
65
|
+
},
|
|
66
|
+
animation: {
|
|
67
|
+
"accordion-down": "accordion-down 0.2s ease-out",
|
|
68
|
+
"accordion-up": "accordion-up 0.2s ease-out"
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
},
|
|
72
|
+
plugins: [tailwindcssAnimate]
|
|
73
|
+
};
|
|
74
|
+
var preset_default = kenshinPreset;
|
|
75
|
+
|
|
76
|
+
export { preset_default as default };
|
package/package.json
ADDED
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@kenshinx/ui",
|
|
3
|
+
"version": "0.0.0-development",
|
|
4
|
+
"description": "Personal React UI component library based on shadcn/ui patterns",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"sideEffects": false,
|
|
7
|
+
"main": "./dist/index.js",
|
|
8
|
+
"module": "./dist/index.js",
|
|
9
|
+
"types": "./dist/index.d.ts",
|
|
10
|
+
"exports": {
|
|
11
|
+
".": {
|
|
12
|
+
"types": "./dist/index.d.ts",
|
|
13
|
+
"import": "./dist/index.js",
|
|
14
|
+
"require": "./dist/index.js"
|
|
15
|
+
},
|
|
16
|
+
"./styles.css": "./dist/styles.css",
|
|
17
|
+
"./tailwind-preset": {
|
|
18
|
+
"types": "./dist/tailwind-preset.d.ts",
|
|
19
|
+
"import": "./dist/tailwind-preset.js",
|
|
20
|
+
"require": "./dist/tailwind-preset.js"
|
|
21
|
+
}
|
|
22
|
+
},
|
|
23
|
+
"files": [
|
|
24
|
+
"dist"
|
|
25
|
+
],
|
|
26
|
+
"scripts": {
|
|
27
|
+
"build": "tsup && cp src/styles/tokens.css dist/styles.css",
|
|
28
|
+
"dev": "tsup --watch",
|
|
29
|
+
"lint": "eslint src/ && prettier --check src/",
|
|
30
|
+
"lint:fix": "eslint src/ --fix && prettier --write src/",
|
|
31
|
+
"format": "prettier --write src/",
|
|
32
|
+
"test": "echo \"No tests yet\" && exit 0",
|
|
33
|
+
"clean": "rm -rf dist"
|
|
34
|
+
},
|
|
35
|
+
"dependencies": {
|
|
36
|
+
"@radix-ui/react-dialog": "^1.1.4",
|
|
37
|
+
"@radix-ui/react-label": "^2.1.1",
|
|
38
|
+
"@radix-ui/react-slot": "^1.1.0",
|
|
39
|
+
"@radix-ui/react-switch": "^1.1.2",
|
|
40
|
+
"class-variance-authority": "^0.7.1",
|
|
41
|
+
"clsx": "^2.1.1",
|
|
42
|
+
"tailwind-merge": "^2.6.0",
|
|
43
|
+
"lucide-react": "^0.469.0",
|
|
44
|
+
"tailwindcss-animate": "^1.0.7"
|
|
45
|
+
},
|
|
46
|
+
"peerDependencies": {
|
|
47
|
+
"react": "^18.0.0 || ^19.0.0",
|
|
48
|
+
"react-dom": "^18.0.0 || ^19.0.0",
|
|
49
|
+
"tailwindcss": "^3.4.0"
|
|
50
|
+
},
|
|
51
|
+
"devDependencies": {
|
|
52
|
+
"@eslint/js": "^9.0.0",
|
|
53
|
+
"@types/react": "^18.3.0",
|
|
54
|
+
"@types/react-dom": "^18.3.0",
|
|
55
|
+
"@typescript-eslint/eslint-plugin": "^8.0.0",
|
|
56
|
+
"@typescript-eslint/parser": "^8.0.0",
|
|
57
|
+
"eslint": "^9.0.0",
|
|
58
|
+
"eslint-config-prettier": "^9.1.0",
|
|
59
|
+
"eslint-plugin-react-hooks": "^5.0.0",
|
|
60
|
+
"prettier": "^3.4.0",
|
|
61
|
+
"prettier-plugin-tailwindcss": "^0.6.0",
|
|
62
|
+
"react": "^18.3.1",
|
|
63
|
+
"react-dom": "^18.3.1",
|
|
64
|
+
"tailwindcss": "^3.4.17",
|
|
65
|
+
"tsup": "^8.3.0",
|
|
66
|
+
"typescript": "^5.7.0"
|
|
67
|
+
},
|
|
68
|
+
"keywords": [
|
|
69
|
+
"react",
|
|
70
|
+
"ui",
|
|
71
|
+
"components",
|
|
72
|
+
"tailwind",
|
|
73
|
+
"shadcn"
|
|
74
|
+
],
|
|
75
|
+
"author": "Mauro Cicerchia",
|
|
76
|
+
"license": "MIT",
|
|
77
|
+
"repository": {
|
|
78
|
+
"type": "git",
|
|
79
|
+
"url": "git+https://github.com/MauroCicerchia/kenshinx-ui.git",
|
|
80
|
+
"directory": "packages/ui"
|
|
81
|
+
},
|
|
82
|
+
"publishConfig": {
|
|
83
|
+
"access": "public",
|
|
84
|
+
"provenance": true
|
|
85
|
+
}
|
|
86
|
+
}
|