Skip to content

Commit a9d8ff0

Browse files
MarfuenMarfuen
committed
2 parents 4739f4e + 6dd2712 commit a9d8ff0

7 files changed

Lines changed: 330 additions & 28 deletions

File tree

‎apps/example/src/app/(app)/design/page.tsx‎

Lines changed: 302 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,302 @@
1+
'use client';
2+
3+
import {
4+
Badge,
5+
Button,
6+
Checkbox,
7+
Input,
8+
Kbd,
9+
Label,
10+
Progress,
11+
Separator,
12+
Slider,
13+
Spinner,
14+
Switch,
15+
Textarea,
16+
Toggle,
17+
Card,
18+
CardContent,
19+
CardHeader,
20+
CardTitle,
21+
CardDescription,
22+
} from '@trycompai/design-system';
23+
import { Bold, Italic, Underline, Plus, Settings } from 'lucide-react';
24+
25+
export default function DesignPage() {
26+
return (
27+
<div className="p-8 space-y-16 max-w-4xl">
28+
<header>
29+
<h1 className="text-2xl font-semibold">Design System</h1>
30+
<p className="text-muted-foreground">Theme testing & component inspection</p>
31+
</header>
32+
33+
{/* Border Radius */}
34+
<section className="space-y-4">
35+
<h2 className="text-xl font-semibold">Border Radius Tokens</h2>
36+
<div className="flex gap-6 items-end">
37+
<div className="space-y-2 text-center">
38+
<div className="size-16 bg-primary rounded-sm" />
39+
<code className="text-xs text-muted-foreground block">sm</code>
40+
</div>
41+
<div className="space-y-2 text-center">
42+
<div className="size-16 bg-primary rounded-md" />
43+
<code className="text-xs text-muted-foreground block">md</code>
44+
</div>
45+
<div className="space-y-2 text-center">
46+
<div className="size-16 bg-primary rounded-lg" />
47+
<code className="text-xs text-muted-foreground block">lg</code>
48+
</div>
49+
<div className="space-y-2 text-center">
50+
<div className="size-16 bg-primary rounded-xl" />
51+
<code className="text-xs text-muted-foreground block">xl</code>
52+
</div>
53+
</div>
54+
<div className="p-4 bg-muted rounded-md font-mono text-xs space-y-1">
55+
<div>--radius-sm: calc(var(--radius) - 2px)</div>
56+
<div>--radius-md: calc(var(--radius) - 1px)</div>
57+
<div>--radius-lg: var(--radius)</div>
58+
<div>--radius-xl: calc(var(--radius) + 2px)</div>
59+
</div>
60+
</section>
61+
62+
<Separator />
63+
64+
{/* Colors */}
65+
<section className="space-y-4">
66+
<h2 className="text-xl font-semibold">Colors</h2>
67+
<div className="grid grid-cols-6 gap-3">
68+
<div className="space-y-2 text-center">
69+
<div className="h-12 bg-primary rounded-md" />
70+
<code className="text-xs text-muted-foreground">primary</code>
71+
</div>
72+
<div className="space-y-2 text-center">
73+
<div className="h-12 bg-secondary rounded-md" />
74+
<code className="text-xs text-muted-foreground">secondary</code>
75+
</div>
76+
<div className="space-y-2 text-center">
77+
<div className="h-12 bg-muted rounded-md" />
78+
<code className="text-xs text-muted-foreground">muted</code>
79+
</div>
80+
<div className="space-y-2 text-center">
81+
<div className="h-12 bg-accent rounded-md" />
82+
<code className="text-xs text-muted-foreground">accent</code>
83+
</div>
84+
<div className="space-y-2 text-center">
85+
<div className="h-12 bg-destructive rounded-md" />
86+
<code className="text-xs text-muted-foreground">destructive</code>
87+
</div>
88+
<div className="space-y-2 text-center">
89+
<div className="h-12 bg-border rounded-md border" />
90+
<code className="text-xs text-muted-foreground">border</code>
91+
</div>
92+
</div>
93+
</section>
94+
95+
<Separator />
96+
97+
{/* Buttons */}
98+
<section className="space-y-4">
99+
<h2 className="text-xl font-semibold">Buttons</h2>
100+
101+
<div className="space-y-6">
102+
<div>
103+
<p className="text-sm text-muted-foreground mb-3">Variants</p>
104+
<div className="flex gap-3 flex-wrap">
105+
<Button>Default</Button>
106+
<Button variant="outline">Outline</Button>
107+
<Button variant="secondary">Secondary</Button>
108+
<Button variant="ghost">Ghost</Button>
109+
<Button variant="destructive">Destructive</Button>
110+
<Button variant="link">Link</Button>
111+
</div>
112+
</div>
113+
114+
<div>
115+
<p className="text-sm text-muted-foreground mb-3">Sizes</p>
116+
<div className="flex gap-3 items-center flex-wrap">
117+
<Button size="xs">Extra Small</Button>
118+
<Button size="sm">Small</Button>
119+
<Button size="default">Default</Button>
120+
<Button size="lg">Large</Button>
121+
</div>
122+
</div>
123+
124+
<div>
125+
<p className="text-sm text-muted-foreground mb-3">With Icons</p>
126+
<div className="flex gap-3 flex-wrap">
127+
<Button iconLeft={<Plus />}>Add Item</Button>
128+
<Button variant="outline" iconRight={<Settings />}>Settings</Button>
129+
<Button size="icon"><Plus /></Button>
130+
<Button size="icon" variant="outline"><Settings /></Button>
131+
</div>
132+
</div>
133+
134+
<div>
135+
<p className="text-sm text-muted-foreground mb-3">States</p>
136+
<div className="flex gap-3 flex-wrap">
137+
<Button disabled>Disabled</Button>
138+
<Button loading>Loading</Button>
139+
</div>
140+
</div>
141+
</div>
142+
</section>
143+
144+
<Separator />
145+
146+
{/* Badges */}
147+
<section className="space-y-4">
148+
<h2 className="text-xl font-semibold">Badges</h2>
149+
<div className="flex gap-3 flex-wrap">
150+
<Badge>Default</Badge>
151+
<Badge variant="secondary">Secondary</Badge>
152+
<Badge variant="outline">Outline</Badge>
153+
<Badge variant="destructive">Destructive</Badge>
154+
<Badge variant="ghost">Ghost</Badge>
155+
</div>
156+
</section>
157+
158+
<Separator />
159+
160+
{/* Form Controls */}
161+
<section className="space-y-4">
162+
<h2 className="text-xl font-semibold">Form Controls</h2>
163+
164+
<div className="grid grid-cols-2 gap-8">
165+
<div className="space-y-4">
166+
<div className="space-y-2">
167+
<Label htmlFor="input">Input</Label>
168+
<Input id="input" placeholder="Type something..." />
169+
</div>
170+
171+
<div className="space-y-2">
172+
<Label htmlFor="textarea">Textarea</Label>
173+
<Textarea id="textarea" placeholder="Type more..." />
174+
</div>
175+
</div>
176+
177+
<div className="space-y-4">
178+
<div className="flex items-center gap-2">
179+
<Checkbox id="checkbox" />
180+
<Label htmlFor="checkbox">Checkbox label</Label>
181+
</div>
182+
183+
<div className="flex items-center gap-2">
184+
<Switch id="switch" />
185+
<Label htmlFor="switch">Switch label</Label>
186+
</div>
187+
188+
<div className="space-y-2">
189+
<Label>Slider</Label>
190+
<Slider defaultValue={[50]} max={100} />
191+
</div>
192+
</div>
193+
</div>
194+
</section>
195+
196+
<Separator />
197+
198+
{/* Toggles */}
199+
<section className="space-y-4">
200+
<h2 className="text-xl font-semibold">Toggle</h2>
201+
<div className="flex gap-2">
202+
<Toggle aria-label="Bold">
203+
<Bold className="size-4" />
204+
</Toggle>
205+
<Toggle aria-label="Italic">
206+
<Italic className="size-4" />
207+
</Toggle>
208+
<Toggle aria-label="Underline">
209+
<Underline className="size-4" />
210+
</Toggle>
211+
</div>
212+
</section>
213+
214+
<Separator />
215+
216+
{/* Cards */}
217+
<section className="space-y-4">
218+
<h2 className="text-xl font-semibold">Card</h2>
219+
<div className="grid grid-cols-2 gap-4">
220+
<Card>
221+
<CardHeader>
222+
<CardTitle>Card Title</CardTitle>
223+
<CardDescription>Card description goes here</CardDescription>
224+
</CardHeader>
225+
<CardContent>
226+
<p>Card content with some text.</p>
227+
</CardContent>
228+
</Card>
229+
<Card>
230+
<CardHeader>
231+
<CardTitle>Another Card</CardTitle>
232+
<CardDescription>With different content</CardDescription>
233+
</CardHeader>
234+
<CardContent>
235+
<div className="flex gap-2">
236+
<Button size="sm">Action</Button>
237+
<Button size="sm" variant="outline">Cancel</Button>
238+
</div>
239+
</CardContent>
240+
</Card>
241+
</div>
242+
</section>
243+
244+
<Separator />
245+
246+
{/* Progress */}
247+
<section className="space-y-4">
248+
<h2 className="text-xl font-semibold">Progress</h2>
249+
<div className="space-y-3 max-w-md">
250+
<Progress value={25} />
251+
<Progress value={50} />
252+
<Progress value={75} />
253+
</div>
254+
</section>
255+
256+
<Separator />
257+
258+
{/* Kbd */}
259+
<section className="space-y-4">
260+
<h2 className="text-xl font-semibold">Keyboard</h2>
261+
<div className="flex items-center gap-2">
262+
<Kbd>⌘</Kbd>
263+
<Kbd>K</Kbd>
264+
<span className="text-muted-foreground mx-2">or</span>
265+
<Kbd>Ctrl</Kbd>
266+
<Kbd>Shift</Kbd>
267+
<Kbd>P</Kbd>
268+
</div>
269+
</section>
270+
271+
<Separator />
272+
273+
{/* Loading States */}
274+
<section className="space-y-4">
275+
<h2 className="text-xl font-semibold">Loading States</h2>
276+
<div className="flex items-center gap-6">
277+
<Spinner />
278+
<div className="space-y-2">
279+
<div className="h-4 w-48 bg-muted rounded animate-pulse" />
280+
<div className="h-4 w-32 bg-muted rounded animate-pulse" />
281+
</div>
282+
</div>
283+
</section>
284+
285+
<Separator />
286+
287+
{/* Typography */}
288+
<section className="space-y-4">
289+
<h2 className="text-xl font-semibold">Typography</h2>
290+
<div className="space-y-2">
291+
<h1 className="text-3xl font-semibold">Heading 1</h1>
292+
<h2 className="text-2xl font-semibold">Heading 2</h2>
293+
<h3 className="text-xl font-semibold">Heading 3</h3>
294+
<h4 className="text-lg font-semibold">Heading 4</h4>
295+
<p>Regular text paragraph</p>
296+
<p className="text-muted-foreground">Muted text</p>
297+
<p className="text-sm">Small text</p>
298+
</div>
299+
</section>
300+
</div>
301+
);
302+
}

‎package.json‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,15 @@
1515
"turbo": "^2.7.1",
1616
"typescript": "5.9.2"
1717
},
18-
"pnpm": {
19-
"overrides": {
20-
"esbuild": "0.25.12"
21-
}
22-
},
2318
"packageManager": "pnpm@9.0.0",
2419
"engines": {
2520
"node": ">=18"
26-
}
21+
},
22+
"overrides": {
23+
"esbuild": "0.25.12"
24+
},
25+
"workspaces": [
26+
"apps/*",
27+
"packages/*"
28+
]
2729
}

‎packages/design-system/src/components/atoms/badge.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { useRender } from '@base-ui/react/use-render';
33
import { cva, type VariantProps } from 'class-variance-authority';
44

55
const badgeVariants = cva(
6-
'gap-1 rounded-sm px-1.5 py-1 text-[10px] font-semibold uppercase tracking-wider leading-none transition-colors has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 [&>svg]:size-2.5! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:ring-ring/50 focus-visible:ring-[3px] overflow-hidden antialiased select-none',
6+
'gap-1 rounded-sm px-1.5 py-1 text-[10px] font-semibold uppercase tracking-wider leading-none [text-box-trim:both] [text-box-edge:cap_alphabetic] transition-colors has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 [&>svg]:size-2.5! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:ring-ring/50 focus-visible:ring-[3px] overflow-hidden antialiased select-none',
77
{
88
variants: {
99
variant: {

‎packages/design-system/src/components/atoms/button.tsx‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,20 @@ import * as React from 'react';
55
import { Spinner } from './spinner';
66

77
const buttonVariants = cva(
8-
"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all duration-150 ease-out active:scale-[0.98] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none cursor-pointer",
8+
"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent text-sm font-medium leading-none [text-box-trim:both] [text-box-edge:cap_alphabetic] focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all duration-200 ease-out active:scale-[0.97] active:duration-75 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none cursor-pointer",
99
{
1010
variants: {
1111
variant: {
12-
default: 'bg-primary text-primary-foreground hover:bg-primary/80',
12+
default:
13+
'bg-primary text-primary-foreground hover:bg-primary/90',
1314
outline:
14-
'border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs',
15+
'border-border! bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground',
1516
secondary:
1617
'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
1718
ghost:
1819
'hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground',
1920
destructive:
20-
'bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30',
21+
'bg-destructive/10 text-destructive hover:bg-destructive/15 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 focus-visible:border-destructive/40 dark:bg-destructive/20 dark:hover:bg-destructive/30',
2122
link: 'text-primary underline-offset-4 hover:underline',
2223
},
2324
width: {
@@ -26,15 +27,15 @@ const buttonVariants = cva(
2627
},
2728
size: {
2829
default:
29-
'h-8 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
30-
xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
31-
sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
30+
'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
31+
xs: "h-6 gap-1 px-2 text-xs has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
32+
sm: "h-7 gap-1 px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
3233
lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3',
3334
icon: 'size-8',
3435
'icon-xs':
35-
"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
36+
"size-6 [&_svg:not([class*='size-'])]:size-3",
3637
'icon-sm':
37-
'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
38+
'size-7',
3839
'icon-lg': 'size-9',
3940
// Round icon buttons - for avatar triggers and circular icons
4041
'icon-round': 'size-8 rounded-full',

0 commit comments

Comments
 (0)