@kenshinx/ui 1.0.2 → 1.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 +171 -0
- package/dist/index.d.ts +40 -1
- package/dist/index.js +283 -17
- package/package.json +5 -2
package/README.md
ADDED
|
@@ -0,0 +1,171 @@
|
|
|
1
|
+
# @kenshinx/ui
|
|
2
|
+
|
|
3
|
+
> A React UI component library built with Tailwind CSS and shadcn/ui patterns
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@kenshinx/ui)
|
|
6
|
+
[](https://opensource.org/licenses/MIT)
|
|
7
|
+
|
|
8
|
+
## Installation
|
|
9
|
+
|
|
10
|
+
```bash
|
|
11
|
+
npm install @kenshinx/ui
|
|
12
|
+
# or
|
|
13
|
+
bun add @kenshinx/ui
|
|
14
|
+
# or
|
|
15
|
+
yarn add @kenshinx/ui
|
|
16
|
+
# or
|
|
17
|
+
pnpm add @kenshinx/ui
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## Peer Dependencies
|
|
21
|
+
|
|
22
|
+
This package requires the following peer dependencies:
|
|
23
|
+
|
|
24
|
+
- `react` ^18.0.0 || ^19.0.0
|
|
25
|
+
- `react-dom` ^18.0.0 || ^19.0.0
|
|
26
|
+
- `tailwindcss` ^3.4.0
|
|
27
|
+
|
|
28
|
+
Install them if you haven't already:
|
|
29
|
+
|
|
30
|
+
```bash
|
|
31
|
+
npm install react react-dom tailwindcss
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
## Quick Start
|
|
35
|
+
|
|
36
|
+
### 1. Configure Tailwind CSS
|
|
37
|
+
|
|
38
|
+
Add the Kenshin UI preset to your `tailwind.config.js`:
|
|
39
|
+
|
|
40
|
+
```js
|
|
41
|
+
import { kenshinPreset } from '@kenshinx/ui/tailwind-preset';
|
|
42
|
+
|
|
43
|
+
export default {
|
|
44
|
+
presets: [kenshinPreset],
|
|
45
|
+
content: [
|
|
46
|
+
'./src/**/*.{js,jsx,ts,tsx}',
|
|
47
|
+
'./node_modules/@kenshinx/ui/**/*.{js,jsx,ts,tsx}',
|
|
48
|
+
],
|
|
49
|
+
};
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
### 2. Import Styles
|
|
53
|
+
|
|
54
|
+
Import the CSS file in your app's entry point:
|
|
55
|
+
|
|
56
|
+
```js
|
|
57
|
+
// main.js or App.js
|
|
58
|
+
import '@kenshinx/ui/styles.css';
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
### 3. Use Components
|
|
62
|
+
|
|
63
|
+
```tsx
|
|
64
|
+
import { Button, Card, Input } from '@kenshinx/ui';
|
|
65
|
+
|
|
66
|
+
function App() {
|
|
67
|
+
return (
|
|
68
|
+
<Card>
|
|
69
|
+
<CardHeader>
|
|
70
|
+
<CardTitle>Hello World</CardTitle>
|
|
71
|
+
</CardHeader>
|
|
72
|
+
<CardContent>
|
|
73
|
+
<Input placeholder="Type something..." />
|
|
74
|
+
<Button>Click me</Button>
|
|
75
|
+
</CardContent>
|
|
76
|
+
</Card>
|
|
77
|
+
);
|
|
78
|
+
}
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
## Utilities
|
|
82
|
+
|
|
83
|
+
### `cn` - Class Name Utility
|
|
84
|
+
|
|
85
|
+
A utility function for merging Tailwind CSS classes, combining `clsx` and `tailwind-merge`.
|
|
86
|
+
|
|
87
|
+
```tsx
|
|
88
|
+
import { cn } from '@kenshinx/ui';
|
|
89
|
+
|
|
90
|
+
<div className={cn('base-class', condition && 'conditional-class', className)} />
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
## TypeScript
|
|
94
|
+
|
|
95
|
+
This package is written in TypeScript and includes type definitions. All components are fully typed:
|
|
96
|
+
|
|
97
|
+
```tsx
|
|
98
|
+
import { Button, type ButtonProps } from '@kenshinx/ui';
|
|
99
|
+
|
|
100
|
+
const props: ButtonProps = {
|
|
101
|
+
variant: 'default',
|
|
102
|
+
size: 'lg',
|
|
103
|
+
children: 'Click me',
|
|
104
|
+
};
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
## Theming
|
|
108
|
+
|
|
109
|
+
Components use CSS custom properties (CSS variables) for theming. You can customize the theme by overriding these variables in your CSS:
|
|
110
|
+
|
|
111
|
+
```css
|
|
112
|
+
:root {
|
|
113
|
+
--background: 0 0% 100%;
|
|
114
|
+
--foreground: 222.2 84% 4.9%;
|
|
115
|
+
--primary: 222.2 47.4% 11.2%;
|
|
116
|
+
--primary-foreground: 210 40% 98%;
|
|
117
|
+
/* ... more variables */
|
|
118
|
+
}
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
See `src/styles/tokens.css` for the complete list of design tokens.
|
|
122
|
+
|
|
123
|
+
## Tree Shaking
|
|
124
|
+
|
|
125
|
+
This package is tree-shakeable. Import only the components you need:
|
|
126
|
+
|
|
127
|
+
```tsx
|
|
128
|
+
// ✅ Good - only imports Button
|
|
129
|
+
import { Button } from '@kenshinx/ui';
|
|
130
|
+
|
|
131
|
+
// ❌ Avoid - imports everything
|
|
132
|
+
import * as UI from '@kenshinx/ui';
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
## Browser Support
|
|
136
|
+
|
|
137
|
+
- Chrome (latest)
|
|
138
|
+
- Firefox (latest)
|
|
139
|
+
- Safari (latest)
|
|
140
|
+
- Edge (latest)
|
|
141
|
+
|
|
142
|
+
## Development
|
|
143
|
+
|
|
144
|
+
### Building
|
|
145
|
+
|
|
146
|
+
```bash
|
|
147
|
+
bun run build
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
### Development Mode
|
|
151
|
+
|
|
152
|
+
```bash
|
|
153
|
+
bun run dev
|
|
154
|
+
```
|
|
155
|
+
|
|
156
|
+
### Linting
|
|
157
|
+
|
|
158
|
+
```bash
|
|
159
|
+
bun run lint
|
|
160
|
+
bun run lint:fix
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
## License
|
|
164
|
+
|
|
165
|
+
MIT © [Mauro Cicerchia](https://github.com/MauroCicerchia)
|
|
166
|
+
|
|
167
|
+
## Related
|
|
168
|
+
|
|
169
|
+
- [shadcn/ui](https://ui.shadcn.com/) - Design system inspiration
|
|
170
|
+
- [Radix UI](https://www.radix-ui.com/) - Accessible component primitives
|
|
171
|
+
- [Tailwind CSS](https://tailwindcss.com/) - Utility-first CSS framework
|
package/dist/index.d.ts
CHANGED
|
@@ -6,6 +6,10 @@ import * as LabelPrimitive from '@radix-ui/react-label';
|
|
|
6
6
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
7
7
|
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
8
8
|
import * as SwitchPrimitives from '@radix-ui/react-switch';
|
|
9
|
+
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
|
|
10
|
+
import * as SelectPrimitive from '@radix-ui/react-select';
|
|
11
|
+
import { ToasterProps } from 'sonner';
|
|
12
|
+
export { toast } from 'sonner';
|
|
9
13
|
|
|
10
14
|
/**
|
|
11
15
|
* Utility function to merge Tailwind CSS classes with clsx
|
|
@@ -53,4 +57,39 @@ declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrim
|
|
|
53
57
|
|
|
54
58
|
declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
55
59
|
|
|
56
|
-
|
|
60
|
+
declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
61
|
+
|
|
62
|
+
type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
|
|
63
|
+
declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
|
|
64
|
+
|
|
65
|
+
declare const Select: React.FC<SelectPrimitive.SelectProps>;
|
|
66
|
+
declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
|
|
67
|
+
declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
|
|
68
|
+
declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
69
|
+
declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
70
|
+
declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
71
|
+
declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
72
|
+
declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
73
|
+
declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
74
|
+
declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
75
|
+
|
|
76
|
+
declare const Toaster: ({ theme: themeProp, ...props }: ToasterProps) => react_jsx_runtime.JSX.Element;
|
|
77
|
+
|
|
78
|
+
declare const alertVariants: (props?: ({
|
|
79
|
+
variant?: "default" | "destructive" | null | undefined;
|
|
80
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
81
|
+
declare const Alert: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
|
|
82
|
+
variant?: "default" | "destructive" | null | undefined;
|
|
83
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
|
|
84
|
+
declare const AlertTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLParagraphElement>>;
|
|
85
|
+
declare const AlertDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
|
|
86
|
+
|
|
87
|
+
declare const badgeVariants: (props?: ({
|
|
88
|
+
variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
|
|
89
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
90
|
+
interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
|
|
91
|
+
asChild?: boolean;
|
|
92
|
+
}
|
|
93
|
+
declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLDivElement>>;
|
|
94
|
+
|
|
95
|
+
export { Alert, AlertDescription, AlertTitle, Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Input, type InputProps, Label, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Switch, Textarea, type TextareaProps, Toaster, alertVariants, badgeVariants, buttonVariants, cn };
|
package/dist/index.js
CHANGED
|
@@ -1,13 +1,18 @@
|
|
|
1
1
|
import { clsx } from 'clsx';
|
|
2
2
|
import { twMerge } from 'tailwind-merge';
|
|
3
|
-
import * as
|
|
3
|
+
import * as React9 from 'react';
|
|
4
|
+
import { useState, useEffect } from 'react';
|
|
4
5
|
import { Slot } from '@radix-ui/react-slot';
|
|
5
6
|
import { cva } from 'class-variance-authority';
|
|
6
7
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
7
8
|
import * as LabelPrimitive from '@radix-ui/react-label';
|
|
8
9
|
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
9
|
-
import { X } from 'lucide-react';
|
|
10
|
+
import { X, Check, ChevronDown, ChevronUp } from 'lucide-react';
|
|
10
11
|
import * as SwitchPrimitives from '@radix-ui/react-switch';
|
|
12
|
+
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
|
|
13
|
+
import * as SelectPrimitive from '@radix-ui/react-select';
|
|
14
|
+
import { Toaster as Toaster$1 } from 'sonner';
|
|
15
|
+
export { toast } from 'sonner';
|
|
11
16
|
|
|
12
17
|
// src/lib/utils.ts
|
|
13
18
|
function cn(...inputs) {
|
|
@@ -38,7 +43,7 @@ var buttonVariants = cva(
|
|
|
38
43
|
}
|
|
39
44
|
}
|
|
40
45
|
);
|
|
41
|
-
var Button =
|
|
46
|
+
var Button = React9.forwardRef(
|
|
42
47
|
({ className, variant, size, asChild = false, ...props }, ref) => {
|
|
43
48
|
const Comp = asChild ? Slot : "button";
|
|
44
49
|
return /* @__PURE__ */ jsx(
|
|
@@ -52,7 +57,7 @@ var Button = React4.forwardRef(
|
|
|
52
57
|
}
|
|
53
58
|
);
|
|
54
59
|
Button.displayName = "Button";
|
|
55
|
-
var Input =
|
|
60
|
+
var Input = React9.forwardRef(
|
|
56
61
|
({ className, type, ...props }, ref) => {
|
|
57
62
|
return /* @__PURE__ */ jsx(
|
|
58
63
|
"input",
|
|
@@ -72,7 +77,7 @@ Input.displayName = "Input";
|
|
|
72
77
|
var labelVariants = cva(
|
|
73
78
|
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
|
74
79
|
);
|
|
75
|
-
var Label =
|
|
80
|
+
var Label = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
76
81
|
LabelPrimitive.Root,
|
|
77
82
|
{
|
|
78
83
|
ref,
|
|
@@ -81,7 +86,7 @@ var Label = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
|
|
|
81
86
|
}
|
|
82
87
|
));
|
|
83
88
|
Label.displayName = LabelPrimitive.Root.displayName;
|
|
84
|
-
var Card =
|
|
89
|
+
var Card = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
85
90
|
"div",
|
|
86
91
|
{
|
|
87
92
|
ref,
|
|
@@ -93,7 +98,7 @@ var Card = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ j
|
|
|
93
98
|
}
|
|
94
99
|
));
|
|
95
100
|
Card.displayName = "Card";
|
|
96
|
-
var CardHeader =
|
|
101
|
+
var CardHeader = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
97
102
|
"div",
|
|
98
103
|
{
|
|
99
104
|
ref,
|
|
@@ -102,7 +107,7 @@ var CardHeader = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE_
|
|
|
102
107
|
}
|
|
103
108
|
));
|
|
104
109
|
CardHeader.displayName = "CardHeader";
|
|
105
|
-
var CardTitle =
|
|
110
|
+
var CardTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
106
111
|
"h3",
|
|
107
112
|
{
|
|
108
113
|
ref,
|
|
@@ -114,7 +119,7 @@ var CardTitle = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__
|
|
|
114
119
|
}
|
|
115
120
|
));
|
|
116
121
|
CardTitle.displayName = "CardTitle";
|
|
117
|
-
var CardDescription =
|
|
122
|
+
var CardDescription = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
118
123
|
"p",
|
|
119
124
|
{
|
|
120
125
|
ref,
|
|
@@ -123,9 +128,9 @@ var CardDescription = React4.forwardRef(({ className, ...props }, ref) => /* @__
|
|
|
123
128
|
}
|
|
124
129
|
));
|
|
125
130
|
CardDescription.displayName = "CardDescription";
|
|
126
|
-
var CardContent =
|
|
131
|
+
var CardContent = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
|
|
127
132
|
CardContent.displayName = "CardContent";
|
|
128
|
-
var CardFooter =
|
|
133
|
+
var CardFooter = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
129
134
|
"div",
|
|
130
135
|
{
|
|
131
136
|
ref,
|
|
@@ -138,7 +143,7 @@ var Dialog = DialogPrimitive.Root;
|
|
|
138
143
|
var DialogTrigger = DialogPrimitive.Trigger;
|
|
139
144
|
var DialogPortal = DialogPrimitive.Portal;
|
|
140
145
|
var DialogClose = DialogPrimitive.Close;
|
|
141
|
-
var DialogOverlay =
|
|
146
|
+
var DialogOverlay = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
142
147
|
DialogPrimitive.Overlay,
|
|
143
148
|
{
|
|
144
149
|
ref,
|
|
@@ -150,7 +155,7 @@ var DialogOverlay = React4.forwardRef(({ className, ...props }, ref) => /* @__PU
|
|
|
150
155
|
}
|
|
151
156
|
));
|
|
152
157
|
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
|
|
153
|
-
var DialogContent =
|
|
158
|
+
var DialogContent = React9.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
|
|
154
159
|
/* @__PURE__ */ jsx(DialogOverlay, {}),
|
|
155
160
|
/* @__PURE__ */ jsxs(
|
|
156
161
|
DialogPrimitive.Content,
|
|
@@ -200,7 +205,7 @@ var DialogFooter = ({
|
|
|
200
205
|
}
|
|
201
206
|
);
|
|
202
207
|
DialogFooter.displayName = "DialogFooter";
|
|
203
|
-
var DialogTitle =
|
|
208
|
+
var DialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
204
209
|
DialogPrimitive.Title,
|
|
205
210
|
{
|
|
206
211
|
ref,
|
|
@@ -212,7 +217,7 @@ var DialogTitle = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE
|
|
|
212
217
|
}
|
|
213
218
|
));
|
|
214
219
|
DialogTitle.displayName = DialogPrimitive.Title.displayName;
|
|
215
|
-
var DialogDescription =
|
|
220
|
+
var DialogDescription = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
216
221
|
DialogPrimitive.Description,
|
|
217
222
|
{
|
|
218
223
|
ref,
|
|
@@ -221,7 +226,7 @@ var DialogDescription = React4.forwardRef(({ className, ...props }, ref) => /* @
|
|
|
221
226
|
}
|
|
222
227
|
));
|
|
223
228
|
DialogDescription.displayName = DialogPrimitive.Description.displayName;
|
|
224
|
-
var Switch =
|
|
229
|
+
var Switch = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
225
230
|
SwitchPrimitives.Root,
|
|
226
231
|
{
|
|
227
232
|
className: cn(
|
|
@@ -241,5 +246,266 @@ var Switch = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
|
|
|
241
246
|
}
|
|
242
247
|
));
|
|
243
248
|
Switch.displayName = SwitchPrimitives.Root.displayName;
|
|
249
|
+
var Checkbox = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
250
|
+
CheckboxPrimitive.Root,
|
|
251
|
+
{
|
|
252
|
+
ref,
|
|
253
|
+
className: cn(
|
|
254
|
+
"border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer h-4 w-4 shrink-0 rounded-sm border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
|
255
|
+
className
|
|
256
|
+
),
|
|
257
|
+
...props,
|
|
258
|
+
children: /* @__PURE__ */ jsx(
|
|
259
|
+
CheckboxPrimitive.Indicator,
|
|
260
|
+
{
|
|
261
|
+
className: cn("flex items-center justify-center text-current"),
|
|
262
|
+
children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" })
|
|
263
|
+
}
|
|
264
|
+
)
|
|
265
|
+
}
|
|
266
|
+
));
|
|
267
|
+
Checkbox.displayName = CheckboxPrimitive.Root.displayName;
|
|
268
|
+
var Textarea = React9.forwardRef(
|
|
269
|
+
({ className, ...props }, ref) => {
|
|
270
|
+
return /* @__PURE__ */ jsx(
|
|
271
|
+
"textarea",
|
|
272
|
+
{
|
|
273
|
+
className: cn(
|
|
274
|
+
"border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[80px] w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
|
275
|
+
className
|
|
276
|
+
),
|
|
277
|
+
ref,
|
|
278
|
+
...props
|
|
279
|
+
}
|
|
280
|
+
);
|
|
281
|
+
}
|
|
282
|
+
);
|
|
283
|
+
Textarea.displayName = "Textarea";
|
|
284
|
+
var Select = SelectPrimitive.Root;
|
|
285
|
+
var SelectGroup = SelectPrimitive.Group;
|
|
286
|
+
var SelectValue = SelectPrimitive.Value;
|
|
287
|
+
var SelectTrigger = React9.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
|
|
288
|
+
SelectPrimitive.Trigger,
|
|
289
|
+
{
|
|
290
|
+
ref,
|
|
291
|
+
className: cn(
|
|
292
|
+
"border-input bg-background ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
|
|
293
|
+
className
|
|
294
|
+
),
|
|
295
|
+
...props,
|
|
296
|
+
children: [
|
|
297
|
+
children,
|
|
298
|
+
/* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 opacity-50" }) })
|
|
299
|
+
]
|
|
300
|
+
}
|
|
301
|
+
));
|
|
302
|
+
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
|
|
303
|
+
var SelectScrollUpButton = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
304
|
+
SelectPrimitive.ScrollUpButton,
|
|
305
|
+
{
|
|
306
|
+
ref,
|
|
307
|
+
className: cn(
|
|
308
|
+
"flex cursor-default items-center justify-center py-1",
|
|
309
|
+
className
|
|
310
|
+
),
|
|
311
|
+
...props,
|
|
312
|
+
children: /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4" })
|
|
313
|
+
}
|
|
314
|
+
));
|
|
315
|
+
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
|
|
316
|
+
var SelectScrollDownButton = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
317
|
+
SelectPrimitive.ScrollDownButton,
|
|
318
|
+
{
|
|
319
|
+
ref,
|
|
320
|
+
className: cn(
|
|
321
|
+
"flex cursor-default items-center justify-center py-1",
|
|
322
|
+
className
|
|
323
|
+
),
|
|
324
|
+
...props,
|
|
325
|
+
children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" })
|
|
326
|
+
}
|
|
327
|
+
));
|
|
328
|
+
SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
|
|
329
|
+
var SelectContent = React9.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
|
|
330
|
+
SelectPrimitive.Content,
|
|
331
|
+
{
|
|
332
|
+
ref,
|
|
333
|
+
className: cn(
|
|
334
|
+
"bg-popover text-popover-foreground 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md",
|
|
335
|
+
position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
|
336
|
+
className
|
|
337
|
+
),
|
|
338
|
+
position,
|
|
339
|
+
...props,
|
|
340
|
+
children: [
|
|
341
|
+
/* @__PURE__ */ jsx(SelectScrollUpButton, {}),
|
|
342
|
+
/* @__PURE__ */ jsx(
|
|
343
|
+
SelectPrimitive.Viewport,
|
|
344
|
+
{
|
|
345
|
+
className: cn(
|
|
346
|
+
"p-1",
|
|
347
|
+
position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
|
|
348
|
+
),
|
|
349
|
+
children
|
|
350
|
+
}
|
|
351
|
+
),
|
|
352
|
+
/* @__PURE__ */ jsx(SelectScrollDownButton, {})
|
|
353
|
+
]
|
|
354
|
+
}
|
|
355
|
+
) }));
|
|
356
|
+
SelectContent.displayName = SelectPrimitive.Content.displayName;
|
|
357
|
+
var SelectLabel = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
358
|
+
SelectPrimitive.Label,
|
|
359
|
+
{
|
|
360
|
+
ref,
|
|
361
|
+
className: cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className),
|
|
362
|
+
...props
|
|
363
|
+
}
|
|
364
|
+
));
|
|
365
|
+
SelectLabel.displayName = SelectPrimitive.Label.displayName;
|
|
366
|
+
var SelectItem = React9.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
|
|
367
|
+
SelectPrimitive.Item,
|
|
368
|
+
{
|
|
369
|
+
ref,
|
|
370
|
+
className: cn(
|
|
371
|
+
"focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
|
372
|
+
className
|
|
373
|
+
),
|
|
374
|
+
...props,
|
|
375
|
+
children: [
|
|
376
|
+
/* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
|
|
377
|
+
/* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
|
|
378
|
+
]
|
|
379
|
+
}
|
|
380
|
+
));
|
|
381
|
+
SelectItem.displayName = SelectPrimitive.Item.displayName;
|
|
382
|
+
var SelectSeparator = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
383
|
+
SelectPrimitive.Separator,
|
|
384
|
+
{
|
|
385
|
+
ref,
|
|
386
|
+
className: cn("bg-muted -mx-1 my-1 h-px", className),
|
|
387
|
+
...props
|
|
388
|
+
}
|
|
389
|
+
));
|
|
390
|
+
SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
|
|
391
|
+
var Toaster = ({ theme: themeProp, ...props }) => {
|
|
392
|
+
const [theme, setTheme] = useState("system");
|
|
393
|
+
useEffect(() => {
|
|
394
|
+
if (!themeProp && typeof document !== "undefined") {
|
|
395
|
+
const isDark = document.documentElement.classList.contains("dark");
|
|
396
|
+
setTheme(isDark ? "dark" : "light");
|
|
397
|
+
const observer = new MutationObserver((mutations) => {
|
|
398
|
+
mutations.forEach((mutation) => {
|
|
399
|
+
if (mutation.attributeName === "class") {
|
|
400
|
+
const isDark2 = document.documentElement.classList.contains("dark");
|
|
401
|
+
setTheme(isDark2 ? "dark" : "light");
|
|
402
|
+
}
|
|
403
|
+
});
|
|
404
|
+
});
|
|
405
|
+
observer.observe(document.documentElement, {
|
|
406
|
+
attributes: true,
|
|
407
|
+
attributeFilter: ["class"]
|
|
408
|
+
});
|
|
409
|
+
return () => observer.disconnect();
|
|
410
|
+
}
|
|
411
|
+
}, [themeProp]);
|
|
412
|
+
return /* @__PURE__ */ jsx(
|
|
413
|
+
Toaster$1,
|
|
414
|
+
{
|
|
415
|
+
theme: themeProp || theme,
|
|
416
|
+
className: "toaster group",
|
|
417
|
+
toastOptions: {
|
|
418
|
+
classNames: {
|
|
419
|
+
toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
|
|
420
|
+
description: "group-[.toast]:text-muted-foreground",
|
|
421
|
+
actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
|
|
422
|
+
cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
|
|
423
|
+
success: "group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border",
|
|
424
|
+
error: "group-[.toaster]:bg-destructive group-[.toaster]:text-destructive-foreground group-[.toaster]:border-destructive",
|
|
425
|
+
warning: "group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border",
|
|
426
|
+
info: "group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border"
|
|
427
|
+
}
|
|
428
|
+
},
|
|
429
|
+
style: {
|
|
430
|
+
"--normal-bg": "hsl(var(--popover))",
|
|
431
|
+
"--normal-text": "hsl(var(--popover-foreground))",
|
|
432
|
+
"--normal-border": "hsl(var(--border))"
|
|
433
|
+
},
|
|
434
|
+
...props
|
|
435
|
+
}
|
|
436
|
+
);
|
|
437
|
+
};
|
|
438
|
+
var alertVariants = cva(
|
|
439
|
+
"relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
|
|
440
|
+
{
|
|
441
|
+
variants: {
|
|
442
|
+
variant: {
|
|
443
|
+
default: "bg-background text-foreground",
|
|
444
|
+
destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive"
|
|
445
|
+
}
|
|
446
|
+
},
|
|
447
|
+
defaultVariants: {
|
|
448
|
+
variant: "default"
|
|
449
|
+
}
|
|
450
|
+
}
|
|
451
|
+
);
|
|
452
|
+
var Alert = React9.forwardRef(({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
453
|
+
"div",
|
|
454
|
+
{
|
|
455
|
+
ref,
|
|
456
|
+
role: "alert",
|
|
457
|
+
className: cn(alertVariants({ variant }), className),
|
|
458
|
+
...props
|
|
459
|
+
}
|
|
460
|
+
));
|
|
461
|
+
Alert.displayName = "Alert";
|
|
462
|
+
var AlertTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
463
|
+
"h5",
|
|
464
|
+
{
|
|
465
|
+
ref,
|
|
466
|
+
className: cn("mb-1 font-medium leading-none tracking-tight", className),
|
|
467
|
+
...props
|
|
468
|
+
}
|
|
469
|
+
));
|
|
470
|
+
AlertTitle.displayName = "AlertTitle";
|
|
471
|
+
var AlertDescription = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
472
|
+
"div",
|
|
473
|
+
{
|
|
474
|
+
ref,
|
|
475
|
+
className: cn("text-sm [&_p]:leading-relaxed", className),
|
|
476
|
+
...props
|
|
477
|
+
}
|
|
478
|
+
));
|
|
479
|
+
AlertDescription.displayName = "AlertDescription";
|
|
480
|
+
var badgeVariants = cva(
|
|
481
|
+
"inline-flex cursor-default items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
|
|
482
|
+
{
|
|
483
|
+
variants: {
|
|
484
|
+
variant: {
|
|
485
|
+
default: "border-transparent bg-primary text-primary-foreground",
|
|
486
|
+
secondary: "border-transparent bg-secondary text-secondary-foreground",
|
|
487
|
+
destructive: "border-transparent bg-destructive text-destructive-foreground",
|
|
488
|
+
outline: "text-foreground"
|
|
489
|
+
}
|
|
490
|
+
},
|
|
491
|
+
defaultVariants: {
|
|
492
|
+
variant: "default"
|
|
493
|
+
}
|
|
494
|
+
}
|
|
495
|
+
);
|
|
496
|
+
var Badge = React9.forwardRef(
|
|
497
|
+
({ className, variant, asChild = false, ...props }, ref) => {
|
|
498
|
+
const Comp = asChild ? Slot : "div";
|
|
499
|
+
return /* @__PURE__ */ jsx(
|
|
500
|
+
Comp,
|
|
501
|
+
{
|
|
502
|
+
ref,
|
|
503
|
+
className: cn(badgeVariants({ variant }), className),
|
|
504
|
+
...props
|
|
505
|
+
}
|
|
506
|
+
);
|
|
507
|
+
}
|
|
508
|
+
);
|
|
509
|
+
Badge.displayName = "Badge";
|
|
244
510
|
|
|
245
|
-
export { Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Input, Label, Switch, buttonVariants, cn };
|
|
511
|
+
export { Alert, AlertDescription, AlertTitle, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Input, Label, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Switch, Textarea, Toaster, alertVariants, badgeVariants, buttonVariants, cn };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kenshinx/ui",
|
|
3
|
-
"version": "1.0
|
|
3
|
+
"version": "1.2.0",
|
|
4
4
|
"description": "Personal React UI component library based on shadcn/ui patterns",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -33,14 +33,17 @@
|
|
|
33
33
|
"clean": "rm -rf dist"
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
|
+
"@radix-ui/react-checkbox": "^1.1.3",
|
|
36
37
|
"@radix-ui/react-dialog": "^1.1.4",
|
|
37
38
|
"@radix-ui/react-label": "^2.1.1",
|
|
39
|
+
"@radix-ui/react-select": "^2.1.5",
|
|
38
40
|
"@radix-ui/react-slot": "^1.1.0",
|
|
39
41
|
"@radix-ui/react-switch": "^1.1.2",
|
|
40
42
|
"class-variance-authority": "^0.7.1",
|
|
41
43
|
"clsx": "^2.1.1",
|
|
42
|
-
"tailwind-merge": "^2.6.0",
|
|
43
44
|
"lucide-react": "^0.469.0",
|
|
45
|
+
"sonner": "^2.0.7",
|
|
46
|
+
"tailwind-merge": "^2.6.0",
|
|
44
47
|
"tailwindcss-animate": "^1.0.7"
|
|
45
48
|
},
|
|
46
49
|
"peerDependencies": {
|