@kenshinx/ui 1.0.2 → 1.1.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 +19 -1
- package/dist/index.js +161 -17
- package/package.json +3 -1
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,8 @@ 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';
|
|
9
11
|
|
|
10
12
|
/**
|
|
11
13
|
* Utility function to merge Tailwind CSS classes with clsx
|
|
@@ -53,4 +55,20 @@ declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrim
|
|
|
53
55
|
|
|
54
56
|
declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
55
57
|
|
|
56
|
-
|
|
58
|
+
declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
59
|
+
|
|
60
|
+
type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
|
|
61
|
+
declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
|
|
62
|
+
|
|
63
|
+
declare const Select: React.FC<SelectPrimitive.SelectProps>;
|
|
64
|
+
declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
|
|
65
|
+
declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
|
|
66
|
+
declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
67
|
+
declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
68
|
+
declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
69
|
+
declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
70
|
+
declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
71
|
+
declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
72
|
+
declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
73
|
+
|
|
74
|
+
export { 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, buttonVariants, cn };
|
package/dist/index.js
CHANGED
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
import { clsx } from 'clsx';
|
|
2
2
|
import { twMerge } from 'tailwind-merge';
|
|
3
|
-
import * as
|
|
3
|
+
import * as React9 from 'react';
|
|
4
4
|
import { Slot } from '@radix-ui/react-slot';
|
|
5
5
|
import { cva } from 'class-variance-authority';
|
|
6
6
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
7
7
|
import * as LabelPrimitive from '@radix-ui/react-label';
|
|
8
8
|
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
9
|
-
import { X } from 'lucide-react';
|
|
9
|
+
import { X, Check, ChevronDown, ChevronUp } from 'lucide-react';
|
|
10
10
|
import * as SwitchPrimitives from '@radix-ui/react-switch';
|
|
11
|
+
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
|
|
12
|
+
import * as SelectPrimitive from '@radix-ui/react-select';
|
|
11
13
|
|
|
12
14
|
// src/lib/utils.ts
|
|
13
15
|
function cn(...inputs) {
|
|
@@ -38,7 +40,7 @@ var buttonVariants = cva(
|
|
|
38
40
|
}
|
|
39
41
|
}
|
|
40
42
|
);
|
|
41
|
-
var Button =
|
|
43
|
+
var Button = React9.forwardRef(
|
|
42
44
|
({ className, variant, size, asChild = false, ...props }, ref) => {
|
|
43
45
|
const Comp = asChild ? Slot : "button";
|
|
44
46
|
return /* @__PURE__ */ jsx(
|
|
@@ -52,7 +54,7 @@ var Button = React4.forwardRef(
|
|
|
52
54
|
}
|
|
53
55
|
);
|
|
54
56
|
Button.displayName = "Button";
|
|
55
|
-
var Input =
|
|
57
|
+
var Input = React9.forwardRef(
|
|
56
58
|
({ className, type, ...props }, ref) => {
|
|
57
59
|
return /* @__PURE__ */ jsx(
|
|
58
60
|
"input",
|
|
@@ -72,7 +74,7 @@ Input.displayName = "Input";
|
|
|
72
74
|
var labelVariants = cva(
|
|
73
75
|
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
|
74
76
|
);
|
|
75
|
-
var Label =
|
|
77
|
+
var Label = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
76
78
|
LabelPrimitive.Root,
|
|
77
79
|
{
|
|
78
80
|
ref,
|
|
@@ -81,7 +83,7 @@ var Label = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
|
|
|
81
83
|
}
|
|
82
84
|
));
|
|
83
85
|
Label.displayName = LabelPrimitive.Root.displayName;
|
|
84
|
-
var Card =
|
|
86
|
+
var Card = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
85
87
|
"div",
|
|
86
88
|
{
|
|
87
89
|
ref,
|
|
@@ -93,7 +95,7 @@ var Card = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ j
|
|
|
93
95
|
}
|
|
94
96
|
));
|
|
95
97
|
Card.displayName = "Card";
|
|
96
|
-
var CardHeader =
|
|
98
|
+
var CardHeader = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
97
99
|
"div",
|
|
98
100
|
{
|
|
99
101
|
ref,
|
|
@@ -102,7 +104,7 @@ var CardHeader = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE_
|
|
|
102
104
|
}
|
|
103
105
|
));
|
|
104
106
|
CardHeader.displayName = "CardHeader";
|
|
105
|
-
var CardTitle =
|
|
107
|
+
var CardTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
106
108
|
"h3",
|
|
107
109
|
{
|
|
108
110
|
ref,
|
|
@@ -114,7 +116,7 @@ var CardTitle = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__
|
|
|
114
116
|
}
|
|
115
117
|
));
|
|
116
118
|
CardTitle.displayName = "CardTitle";
|
|
117
|
-
var CardDescription =
|
|
119
|
+
var CardDescription = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
118
120
|
"p",
|
|
119
121
|
{
|
|
120
122
|
ref,
|
|
@@ -123,9 +125,9 @@ var CardDescription = React4.forwardRef(({ className, ...props }, ref) => /* @__
|
|
|
123
125
|
}
|
|
124
126
|
));
|
|
125
127
|
CardDescription.displayName = "CardDescription";
|
|
126
|
-
var CardContent =
|
|
128
|
+
var CardContent = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
|
|
127
129
|
CardContent.displayName = "CardContent";
|
|
128
|
-
var CardFooter =
|
|
130
|
+
var CardFooter = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
129
131
|
"div",
|
|
130
132
|
{
|
|
131
133
|
ref,
|
|
@@ -138,7 +140,7 @@ var Dialog = DialogPrimitive.Root;
|
|
|
138
140
|
var DialogTrigger = DialogPrimitive.Trigger;
|
|
139
141
|
var DialogPortal = DialogPrimitive.Portal;
|
|
140
142
|
var DialogClose = DialogPrimitive.Close;
|
|
141
|
-
var DialogOverlay =
|
|
143
|
+
var DialogOverlay = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
142
144
|
DialogPrimitive.Overlay,
|
|
143
145
|
{
|
|
144
146
|
ref,
|
|
@@ -150,7 +152,7 @@ var DialogOverlay = React4.forwardRef(({ className, ...props }, ref) => /* @__PU
|
|
|
150
152
|
}
|
|
151
153
|
));
|
|
152
154
|
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
|
|
153
|
-
var DialogContent =
|
|
155
|
+
var DialogContent = React9.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
|
|
154
156
|
/* @__PURE__ */ jsx(DialogOverlay, {}),
|
|
155
157
|
/* @__PURE__ */ jsxs(
|
|
156
158
|
DialogPrimitive.Content,
|
|
@@ -200,7 +202,7 @@ var DialogFooter = ({
|
|
|
200
202
|
}
|
|
201
203
|
);
|
|
202
204
|
DialogFooter.displayName = "DialogFooter";
|
|
203
|
-
var DialogTitle =
|
|
205
|
+
var DialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
204
206
|
DialogPrimitive.Title,
|
|
205
207
|
{
|
|
206
208
|
ref,
|
|
@@ -212,7 +214,7 @@ var DialogTitle = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE
|
|
|
212
214
|
}
|
|
213
215
|
));
|
|
214
216
|
DialogTitle.displayName = DialogPrimitive.Title.displayName;
|
|
215
|
-
var DialogDescription =
|
|
217
|
+
var DialogDescription = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
216
218
|
DialogPrimitive.Description,
|
|
217
219
|
{
|
|
218
220
|
ref,
|
|
@@ -221,7 +223,7 @@ var DialogDescription = React4.forwardRef(({ className, ...props }, ref) => /* @
|
|
|
221
223
|
}
|
|
222
224
|
));
|
|
223
225
|
DialogDescription.displayName = DialogPrimitive.Description.displayName;
|
|
224
|
-
var Switch =
|
|
226
|
+
var Switch = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
225
227
|
SwitchPrimitives.Root,
|
|
226
228
|
{
|
|
227
229
|
className: cn(
|
|
@@ -241,5 +243,147 @@ var Switch = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
|
|
|
241
243
|
}
|
|
242
244
|
));
|
|
243
245
|
Switch.displayName = SwitchPrimitives.Root.displayName;
|
|
246
|
+
var Checkbox = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
247
|
+
CheckboxPrimitive.Root,
|
|
248
|
+
{
|
|
249
|
+
ref,
|
|
250
|
+
className: cn(
|
|
251
|
+
"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",
|
|
252
|
+
className
|
|
253
|
+
),
|
|
254
|
+
...props,
|
|
255
|
+
children: /* @__PURE__ */ jsx(
|
|
256
|
+
CheckboxPrimitive.Indicator,
|
|
257
|
+
{
|
|
258
|
+
className: cn("flex items-center justify-center text-current"),
|
|
259
|
+
children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" })
|
|
260
|
+
}
|
|
261
|
+
)
|
|
262
|
+
}
|
|
263
|
+
));
|
|
264
|
+
Checkbox.displayName = CheckboxPrimitive.Root.displayName;
|
|
265
|
+
var Textarea = React9.forwardRef(
|
|
266
|
+
({ className, ...props }, ref) => {
|
|
267
|
+
return /* @__PURE__ */ jsx(
|
|
268
|
+
"textarea",
|
|
269
|
+
{
|
|
270
|
+
className: cn(
|
|
271
|
+
"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",
|
|
272
|
+
className
|
|
273
|
+
),
|
|
274
|
+
ref,
|
|
275
|
+
...props
|
|
276
|
+
}
|
|
277
|
+
);
|
|
278
|
+
}
|
|
279
|
+
);
|
|
280
|
+
Textarea.displayName = "Textarea";
|
|
281
|
+
var Select = SelectPrimitive.Root;
|
|
282
|
+
var SelectGroup = SelectPrimitive.Group;
|
|
283
|
+
var SelectValue = SelectPrimitive.Value;
|
|
284
|
+
var SelectTrigger = React9.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
|
|
285
|
+
SelectPrimitive.Trigger,
|
|
286
|
+
{
|
|
287
|
+
ref,
|
|
288
|
+
className: cn(
|
|
289
|
+
"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",
|
|
290
|
+
className
|
|
291
|
+
),
|
|
292
|
+
...props,
|
|
293
|
+
children: [
|
|
294
|
+
children,
|
|
295
|
+
/* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 opacity-50" }) })
|
|
296
|
+
]
|
|
297
|
+
}
|
|
298
|
+
));
|
|
299
|
+
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
|
|
300
|
+
var SelectScrollUpButton = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
301
|
+
SelectPrimitive.ScrollUpButton,
|
|
302
|
+
{
|
|
303
|
+
ref,
|
|
304
|
+
className: cn(
|
|
305
|
+
"flex cursor-default items-center justify-center py-1",
|
|
306
|
+
className
|
|
307
|
+
),
|
|
308
|
+
...props,
|
|
309
|
+
children: /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4" })
|
|
310
|
+
}
|
|
311
|
+
));
|
|
312
|
+
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
|
|
313
|
+
var SelectScrollDownButton = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
314
|
+
SelectPrimitive.ScrollDownButton,
|
|
315
|
+
{
|
|
316
|
+
ref,
|
|
317
|
+
className: cn(
|
|
318
|
+
"flex cursor-default items-center justify-center py-1",
|
|
319
|
+
className
|
|
320
|
+
),
|
|
321
|
+
...props,
|
|
322
|
+
children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" })
|
|
323
|
+
}
|
|
324
|
+
));
|
|
325
|
+
SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
|
|
326
|
+
var SelectContent = React9.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
|
|
327
|
+
SelectPrimitive.Content,
|
|
328
|
+
{
|
|
329
|
+
ref,
|
|
330
|
+
className: cn(
|
|
331
|
+
"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",
|
|
332
|
+
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",
|
|
333
|
+
className
|
|
334
|
+
),
|
|
335
|
+
position,
|
|
336
|
+
...props,
|
|
337
|
+
children: [
|
|
338
|
+
/* @__PURE__ */ jsx(SelectScrollUpButton, {}),
|
|
339
|
+
/* @__PURE__ */ jsx(
|
|
340
|
+
SelectPrimitive.Viewport,
|
|
341
|
+
{
|
|
342
|
+
className: cn(
|
|
343
|
+
"p-1",
|
|
344
|
+
position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
|
|
345
|
+
),
|
|
346
|
+
children
|
|
347
|
+
}
|
|
348
|
+
),
|
|
349
|
+
/* @__PURE__ */ jsx(SelectScrollDownButton, {})
|
|
350
|
+
]
|
|
351
|
+
}
|
|
352
|
+
) }));
|
|
353
|
+
SelectContent.displayName = SelectPrimitive.Content.displayName;
|
|
354
|
+
var SelectLabel = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
355
|
+
SelectPrimitive.Label,
|
|
356
|
+
{
|
|
357
|
+
ref,
|
|
358
|
+
className: cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className),
|
|
359
|
+
...props
|
|
360
|
+
}
|
|
361
|
+
));
|
|
362
|
+
SelectLabel.displayName = SelectPrimitive.Label.displayName;
|
|
363
|
+
var SelectItem = React9.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
|
|
364
|
+
SelectPrimitive.Item,
|
|
365
|
+
{
|
|
366
|
+
ref,
|
|
367
|
+
className: cn(
|
|
368
|
+
"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",
|
|
369
|
+
className
|
|
370
|
+
),
|
|
371
|
+
...props,
|
|
372
|
+
children: [
|
|
373
|
+
/* @__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" }) }) }),
|
|
374
|
+
/* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
|
|
375
|
+
]
|
|
376
|
+
}
|
|
377
|
+
));
|
|
378
|
+
SelectItem.displayName = SelectPrimitive.Item.displayName;
|
|
379
|
+
var SelectSeparator = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
380
|
+
SelectPrimitive.Separator,
|
|
381
|
+
{
|
|
382
|
+
ref,
|
|
383
|
+
className: cn("bg-muted -mx-1 my-1 h-px", className),
|
|
384
|
+
...props
|
|
385
|
+
}
|
|
386
|
+
));
|
|
387
|
+
SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
|
|
244
388
|
|
|
245
|
-
export { Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Input, Label, Switch, buttonVariants, cn };
|
|
389
|
+
export { 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, buttonVariants, cn };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kenshinx/ui",
|
|
3
|
-
"version": "1.0
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "Personal React UI component library based on shadcn/ui patterns",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -33,8 +33,10 @@
|
|
|
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",
|