Skip to content

Commit e02badc

Browse files
tanerengiiintanerengiiin
committed
feat(tailwind): add new component presets
Add Chip, Drawer, InputNumber, Listbox, Message, Popover, ProgressBar, ScrollArea, Select, Skeleton, Splitter, Timeline, Toast, Toolbar, Tooltip
1 parent f78e7eb commit e02badc

237 files changed

Lines changed: 11996 additions & 127 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎apps/showcase/__store__/index.tsx‎

Lines changed: 558 additions & 54 deletions
Large diffs are not rendered by default.

‎apps/showcase/assets/menu/submenu/menu-tailwind.data.ts‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,10 @@ export const tailwindMenu = [
2828
name: 'InputColor',
2929
href: '/docs/tailwind/components/inputcolor'
3030
},
31+
{
32+
name: 'InputNumber',
33+
href: '/docs/tailwind/components/inputnumber'
34+
},
3135
{
3236
name: 'InputOtp',
3337
href: '/docs/tailwind/components/inputotp'
@@ -40,10 +44,18 @@ export const tailwindMenu = [
4044
name: 'Label',
4145
href: '/docs/tailwind/components/label'
4246
},
47+
{
48+
name: 'Listbox',
49+
href: '/docs/tailwind/components/listbox'
50+
},
4351
{
4452
name: 'RadioButton',
4553
href: '/docs/tailwind/components/radiobutton'
4654
},
55+
{
56+
name: 'Select',
57+
href: '/docs/tailwind/components/select'
58+
},
4759
{
4860
name: 'Slider',
4961
href: '/docs/tailwind/components/slider'
@@ -81,6 +93,10 @@ export const tailwindMenu = [
8193
{
8294
name: 'Paginator',
8395
href: '/docs/tailwind/components/paginator'
96+
},
97+
{
98+
name: 'Timeline',
99+
href: '/docs/tailwind/components/timeline'
84100
}
85101
]
86102
},
@@ -107,9 +123,21 @@ export const tailwindMenu = [
107123
name: 'Panel',
108124
href: '/docs/tailwind/components/panel'
109125
},
126+
{
127+
name: 'ScrollArea',
128+
href: '/docs/tailwind/components/scrollarea'
129+
},
130+
{
131+
name: 'Splitter',
132+
href: '/docs/tailwind/components/splitter'
133+
},
110134
{
111135
name: 'Tabs',
112136
href: '/docs/tailwind/components/tabs'
137+
},
138+
{
139+
name: 'Toolbar',
140+
href: '/docs/tailwind/components/toolbar'
113141
}
114142
]
115143
},
@@ -128,6 +156,31 @@ export const tailwindMenu = [
128156
{
129157
name: 'Dialog',
130158
href: '/docs/tailwind/components/dialog'
159+
},
160+
{
161+
name: 'Drawer',
162+
href: '/docs/tailwind/components/drawer'
163+
},
164+
{
165+
name: 'Popover',
166+
href: '/docs/tailwind/components/popover'
167+
},
168+
{
169+
name: 'Tooltip',
170+
href: '/docs/tailwind/components/tooltip'
171+
}
172+
]
173+
},
174+
{
175+
name: 'Messages',
176+
children: [
177+
{
178+
name: 'Message',
179+
href: '/docs/tailwind/components/message'
180+
},
181+
{
182+
name: 'Toast',
183+
href: '/docs/tailwind/components/toast'
131184
}
132185
]
133186
},
@@ -150,6 +203,18 @@ export const tailwindMenu = [
150203
{
151204
name: 'Badge',
152205
href: '/docs/tailwind/components/badge'
206+
},
207+
{
208+
name: 'Chip',
209+
href: '/docs/tailwind/components/chip'
210+
},
211+
{
212+
name: 'ProgressBar',
213+
href: '/docs/tailwind/components/progressbar'
214+
},
215+
{
216+
name: 'Skeleton',
217+
href: '/docs/tailwind/components/skeleton'
153218
}
154219
]
155220
}

‎apps/showcase/assets/styles/tailwind/main.css‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,22 @@
55

66
@theme inline {
77
--font-mono: var(--font-mono);
8+
--animate-slideright: slideright 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
9+
10+
@keyframes slideright {
11+
0% {
12+
inset-inline-start: -35%;
13+
inset-inline-end: 100%;
14+
}
15+
60% {
16+
inset-inline-start: 100%;
17+
inset-inline-end: -90%;
18+
}
19+
100% {
20+
inset-inline-start: 100%;
21+
inset-inline-end: -90%;
22+
}
23+
}
824
}
925

1026
@source "../../**/*.{ts,tsx,js,jsx,mdx}";

‎apps/showcase/demo/tailwind/chip/basic-demo.tsx‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
'use client';
2+
import { Check } from '@primeicons/react';
3+
import { Chip, ChipLabel, ChipStart } from '@/components/ui/chip';
4+
import * as React from 'react';
5+
6+
export default function BasicDemo() {
7+
const [selectedIndex, setSelectedIndex] = React.useState([0, 4, 7, 10, 15]);
8+
9+
const onSelect = (index: number) => {
10+
if (selectedIndex.includes(index)) {
11+
setSelectedIndex((prev) => prev.filter((i) => i !== index));
12+
} else {
13+
setSelectedIndex((prev) => [...prev, index]);
14+
}
15+
};
16+
17+
return (
18+
<div className="max-w-xs mx-auto bg-surface-50/25 dark:bg-surface-900/25 p-4 rounded-lg border border-surface">
19+
<h2 className="font-bold mb-0.5">What are you interested in?</h2>
20+
<p className="text-surface-500 mb-3 text-sm">You can select multiple answers.</p>
21+
<div className="flex items-center justify-start flex-wrap gap-2.5">
22+
{chips.map((chip) => {
23+
const isSelected = selectedIndex.includes(chips.indexOf(chip));
24+
25+
return (
26+
<Chip
27+
key={chip.label}
28+
onClick={() => onSelect(chips.indexOf(chip))}
29+
variant={isSelected ? undefined : 'outlined'}
30+
className="cursor-pointer"
31+
>
32+
<ChipStart>
33+
{isSelected ? (
34+
<span className="size-4.5 inline-flex items-center justify-center bg-surface-900 dark:bg-surface-50 text-surface-0 dark:text-surface-900 rounded-full">
35+
<Check className="size-2.5!" />{' '}
36+
</span>
37+
) : (
38+
chip.emoji
39+
)}
40+
</ChipStart>
41+
<ChipLabel>{chip.label}</ChipLabel>
42+
</Chip>
43+
);
44+
})}
45+
</div>
46+
</div>
47+
);
48+
}
49+
50+
const chips = [
51+
{ label: 'Music', emoji: '🎵' },
52+
{ label: 'Movies', emoji: '🎬' },
53+
{ label: 'Travel', emoji: '✈️' },
54+
{ label: 'Food', emoji: '🍔' },
55+
{ label: 'Sports', emoji: '⚽' },
56+
{ label: 'Gaming', emoji: '🎮' },
57+
{ label: 'Reading', emoji: '📚' },
58+
{ label: 'Photography', emoji: '📸' },
59+
{ label: 'Fitness', emoji: '💪' },
60+
{ label: 'Technology', emoji: '💻' },
61+
{ label: 'Art', emoji: '🎨' },
62+
{ label: 'Nature', emoji: '🌿' },
63+
{ label: 'Shopping', emoji: '🛍️' },
64+
{ label: 'Cooking', emoji: '👨‍🍳' },
65+
{ label: 'Pets', emoji: '🐶' },
66+
{ label: 'Cars', emoji: '🚗' },
67+
{ label: 'Fashion', emoji: '👕' },
68+
{ label: 'Science', emoji: '🔬' }
69+
];

‎apps/showcase/demo/tailwind/chip/chip-pt.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { Microsoft, MinusCircle } from '@primeicons/react';
2+
import { Chip } from '@primereact/ui/chip';
3+
4+
export default function ChipPT() {
5+
return (
6+
<div className="flex flex-wrap gap-8">
7+
<Chip.Root>
8+
<Chip.Start>
9+
<Microsoft />
10+
</Chip.Start>
11+
<Chip.Label>Microsoft</Chip.Label>
12+
<Chip.End>
13+
<Chip.Remove>
14+
<MinusCircle />
15+
</Chip.Remove>
16+
</Chip.End>
17+
</Chip.Root>
18+
</div>
19+
);
20+
}

‎apps/showcase/demo/tailwind/chip/start-end-demo.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { Apple, Facebook, Github, Google, Microsoft, MinusCircle } from '@primeicons/react';
2+
import { Chip, ChipEnd, ChipLabel, ChipRemove, ChipStart } from '@/components/ui/chip';
3+
4+
export default function StartEndDemo() {
5+
return (
6+
<div className="flex items-center justify-center flex-wrap gap-2">
7+
<Chip>
8+
<ChipStart>
9+
<Apple />
10+
</ChipStart>
11+
<ChipLabel>Apple</ChipLabel>
12+
</Chip>
13+
<Chip>
14+
<ChipStart>
15+
<Facebook />
16+
</ChipStart>
17+
<ChipLabel>Facebook</ChipLabel>
18+
</Chip>
19+
<Chip>
20+
<ChipStart>
21+
<Google />
22+
</ChipStart>
23+
<ChipLabel>Google</ChipLabel>
24+
</Chip>
25+
<Chip>
26+
<ChipStart>
27+
<Microsoft />
28+
</ChipStart>
29+
<ChipLabel>Microsoft</ChipLabel>
30+
</Chip>
31+
<Chip>
32+
<ChipStart>
33+
<Github />
34+
</ChipStart>
35+
<ChipLabel>GitHub</ChipLabel>
36+
<ChipEnd>
37+
<ChipRemove>
38+
<MinusCircle />
39+
</ChipRemove>
40+
</ChipEnd>
41+
</Chip>
42+
</div>
43+
);
44+
}

‎apps/showcase/demo/tailwind/chip/template-demo.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { Apple, Facebook, Github, Google, Microsoft, MinusCircle } from '@primeicons/react';
2+
import { Chip, ChipEnd, ChipLabel, ChipRemove, ChipStart } from '@/components/ui/chip';
3+
4+
export default function TemplateDemo() {
5+
return (
6+
<div className="flex items-center justify-center flex-wrap gap-2">
7+
<Chip className="bg-neutral-900 dark:bg-neutral-50 **:text-neutral-50 dark:**:text-neutral-900">
8+
<ChipStart>
9+
<Apple />
10+
</ChipStart>
11+
<ChipLabel>Apple</ChipLabel>
12+
</Chip>
13+
<Chip className="bg-blue-50 dark:bg-blue-950 **:text-blue-700 dark:**:text-blue-300">
14+
<ChipStart>
15+
<Facebook />
16+
</ChipStart>
17+
<ChipLabel>Facebook</ChipLabel>
18+
</Chip>
19+
<Chip className="bg-red-50 dark:bg-red-950 **:text-red-700 dark:**:text-red-300">
20+
<ChipStart>
21+
<Google />
22+
</ChipStart>
23+
<ChipLabel>Google</ChipLabel>
24+
</Chip>
25+
<Chip className="bg-green-50 dark:bg-green-950 **:text-green-700 dark:**:text-green-300">
26+
<ChipStart>
27+
<Microsoft />
28+
</ChipStart>
29+
<ChipLabel>Microsoft</ChipLabel>
30+
</Chip>
31+
<Chip className="bg-purple-50 dark:bg-purple-950 **:text-purple-700 dark:**:text-purple-300">
32+
<ChipStart>
33+
<Github />
34+
</ChipStart>
35+
<ChipLabel>GitHub</ChipLabel>
36+
<ChipEnd>
37+
<ChipRemove>
38+
<MinusCircle />
39+
</ChipRemove>
40+
</ChipEnd>
41+
</Chip>
42+
</div>
43+
);
44+
}

‎apps/showcase/demo/tailwind/chip/variant-demo.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { Github, MinusCircle } from '@primeicons/react';
2+
import { Chip, ChipEnd, ChipLabel, ChipRemove, ChipStart } from '@/components/ui/chip';
3+
4+
export default function VariantDemo() {
5+
return (
6+
<div className="flex items-center justify-center flex-wrap gap-2">
7+
<Chip>
8+
<ChipStart>
9+
<Github />
10+
</ChipStart>
11+
<ChipLabel>GitHub</ChipLabel>
12+
<ChipEnd>
13+
<ChipRemove>
14+
<MinusCircle />
15+
</ChipRemove>
16+
</ChipEnd>
17+
</Chip>
18+
<Chip variant="outlined">
19+
<ChipStart>
20+
<Github />
21+
</ChipStart>
22+
<ChipLabel>GitHub</ChipLabel>
23+
<ChipEnd>
24+
<ChipRemove>
25+
<MinusCircle />
26+
</ChipRemove>
27+
</ChipEnd>
28+
</Chip>
29+
<Chip variant="text">
30+
<ChipStart>
31+
<Github />
32+
</ChipStart>
33+
<ChipLabel>GitHub</ChipLabel>
34+
<ChipEnd>
35+
<ChipRemove>
36+
<MinusCircle />
37+
</ChipRemove>
38+
</ChipEnd>
39+
</Chip>
40+
</div>
41+
);
42+
}

0 commit comments

Comments
 (0)