@kadoui/react 1.9.6 → 1.9.8
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 +128 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1 +1,128 @@
|
|
|
1
|
-
# Kadoui
|
|
1
|
+
# Kadoui-react
|
|
2
|
+
|
|
3
|
+
Primitive components for `React` powered by `Kadoui-css` styles.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
### Components
|
|
8
|
+
|
|
9
|
+
You can just import them and use easily.
|
|
10
|
+
|
|
11
|
+
### AccessNavigation
|
|
12
|
+
|
|
13
|
+
For add arrow-key nagivations to your UIs.
|
|
14
|
+
|
|
15
|
+
```tsx
|
|
16
|
+
<AccessNavigation
|
|
17
|
+
direction="x"
|
|
18
|
+
className="join mt-6">
|
|
19
|
+
<button className="btn btn-soft">One</button>
|
|
20
|
+
<button className="btn btn-soft">Two</button>
|
|
21
|
+
<button className="btn btn-soft">Three</button>
|
|
22
|
+
<button className="btn btn-soft">Four</button>
|
|
23
|
+
</AccessNavigation>
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
### Accordion
|
|
27
|
+
|
|
28
|
+
```tsx
|
|
29
|
+
<Accordion>
|
|
30
|
+
<Accordion.Toggle className="btn btn-full data-[state=true]:btn-fill data-[state=false]:btn-soft justify-between mt-6 group">
|
|
31
|
+
<span>Open accordion</span>
|
|
32
|
+
<ChevronDownIcon className="transition-transform btn-icon-size group-data-[state=true]:-scale-y-100" />
|
|
33
|
+
</Accordion.Toggle>
|
|
34
|
+
<Accordion.Body>
|
|
35
|
+
<p className="p-3">
|
|
36
|
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos fugit accusamus unde,
|
|
37
|
+
repellendus dolores, fuga nam commodi sapiente omnis voluptatum error earum culpa
|
|
38
|
+
asperiores eaque ea enim possimus vero esse!
|
|
39
|
+
</p>
|
|
40
|
+
</Accordion.Body>
|
|
41
|
+
</Accordion>
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
### Breadcrumbs
|
|
45
|
+
|
|
46
|
+
```tsx
|
|
47
|
+
<Breadcrumbs className="breadcrumbs">
|
|
48
|
+
<Breadcrumbs.Item className="breadcrumbs-item">
|
|
49
|
+
<button className="btn btn-soft">Home</button>
|
|
50
|
+
</Breadcrumbs.Item>
|
|
51
|
+
<Breadcrumbs.Item className="breadcrumbs-item">
|
|
52
|
+
<button className="btn btn-soft">Articles</button>
|
|
53
|
+
</Breadcrumbs.Item>
|
|
54
|
+
<Breadcrumbs.Item
|
|
55
|
+
className="breadcrumbs-item"
|
|
56
|
+
isLastItem>
|
|
57
|
+
<button className="btn btn-fill">How to gain money?</button>
|
|
58
|
+
</Breadcrumbs.Item>
|
|
59
|
+
</Breadcrumbs>
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
or
|
|
63
|
+
|
|
64
|
+
```tsx
|
|
65
|
+
<Breadcrumbs className="breadcrumbs">
|
|
66
|
+
<Breadcrumbs.Item className="breadcrumbs-item">
|
|
67
|
+
<button className="btn btn-soft">Home</button>
|
|
68
|
+
</Breadcrumbs.Item>
|
|
69
|
+
<Breadcrumbs.Item className="breadcrumbs-item">
|
|
70
|
+
<button className="btn btn-soft">Articles</button>
|
|
71
|
+
</Breadcrumbs.Item>
|
|
72
|
+
<Breadcrumbs.Item
|
|
73
|
+
className="breadcrumbs-item"
|
|
74
|
+
isLastItem>
|
|
75
|
+
<button className="btn btn-fill">How to gain money?</button>
|
|
76
|
+
</Breadcrumbs.Item>
|
|
77
|
+
</Breadcrumbs>
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
### Carousel
|
|
81
|
+
|
|
82
|
+
```tsx
|
|
83
|
+
<Carousel className="carousel">
|
|
84
|
+
<Carousel.LeftFade className="carousel-left-fade" />
|
|
85
|
+
<Carousel.RightFade className="carousel-right-fade" />
|
|
86
|
+
|
|
87
|
+
<Carousel.Container className="carousel-container gap-3 scroll-smooth">
|
|
88
|
+
{Array.from({ length: 12 }).map((_, index) => (
|
|
89
|
+
<article
|
|
90
|
+
key={index}
|
|
91
|
+
className="carousel-children card slidable">
|
|
92
|
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores doloremque
|
|
93
|
+
error rem ex, necessitatibus dolore deleniti alias aperiam cum ipsum, suscipit
|
|
94
|
+
possimus porro provident totam mollitia? Voluptate, eaque quas. Culpa.
|
|
95
|
+
</article>
|
|
96
|
+
))}
|
|
97
|
+
</Carousel.Container>
|
|
98
|
+
|
|
99
|
+
<div className="f-center gap-3 mt-3">
|
|
100
|
+
<Carousel.PrevBtn className="btn btn-outline btn-square">
|
|
101
|
+
<ArrowLeftIcon className="btn-icon-size" />
|
|
102
|
+
</Carousel.PrevBtn>
|
|
103
|
+
<Carousel.NextBtn className="btn btn-outline btn-square">
|
|
104
|
+
<ArrowRightIcon className="btn-icon-size" />
|
|
105
|
+
</Carousel.NextBtn>
|
|
106
|
+
</div>
|
|
107
|
+
</Carousel>
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
### ClientOnly
|
|
111
|
+
|
|
112
|
+
```tsx
|
|
113
|
+
<p>There is server</p>
|
|
114
|
+
<ClientOnly>
|
|
115
|
+
<p>There is client</p>
|
|
116
|
+
</ClientOnly>
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
### Clipboard
|
|
120
|
+
|
|
121
|
+
```tsx
|
|
122
|
+
<Clipboard
|
|
123
|
+
text="Kadoui-react"
|
|
124
|
+
className="btn btn-soft btn-square"
|
|
125
|
+
copiedChildren={<CopyCheckIcon className="btn-icon-size" />}>
|
|
126
|
+
<CopyIcon className="btn-icon-size" />
|
|
127
|
+
</Clipboard>
|
|
128
|
+
```
|