-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
14 changed files
with
410 additions
and
19 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,17 +1,26 @@ | ||
| node_modules | ||
| # misc | ||
| .github | ||
| .husky | ||
| .gitignore | ||
| biome.jsonc | ||
| components.json | ||
| .husky | ||
| node_modules | ||
|
|
||
| # typescript | ||
| tsconfig.json | ||
| tsconfig.tsbuildinfo | ||
|
|
||
| # tests | ||
| *.test.* | ||
| *.spec.* | ||
| vitest.config.ts | ||
| setup-tests.ts | ||
| coverage | ||
| setup-tests.ts | ||
| vitest.config.ts | ||
|
|
||
| # stories | ||
| .ladle | ||
| tailwind.config.ts | ||
| postcss.config.cjs | ||
| stories | ||
| tsconfig.json | ||
|
|
||
| # config files only for risc0-ui | ||
| biome.jsonc | ||
| components.json | ||
| postcss.config.cjs | ||
| tailwind.config.ts |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| import { | ||
| Breadcrumb, | ||
| BreadcrumbEllipsis, | ||
| BreadcrumbItem, | ||
| BreadcrumbLink, | ||
| BreadcrumbList, | ||
| BreadcrumbPage, | ||
| BreadcrumbSeparator, | ||
| } from "breadcrumb"; | ||
| import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "dropdown-menu"; | ||
|
|
||
| export const Default = () => { | ||
| return ( | ||
| <Breadcrumb> | ||
| <BreadcrumbList> | ||
| <BreadcrumbItem> | ||
| <BreadcrumbLink href="/?story=breadcrumb--default">Home</BreadcrumbLink> | ||
| </BreadcrumbItem> | ||
| <BreadcrumbSeparator /> | ||
| <BreadcrumbItem> | ||
| <DropdownMenu> | ||
| <DropdownMenuTrigger className="flex items-center gap-1"> | ||
| <BreadcrumbEllipsis className="h-4 w-4" /> | ||
| <span className="sr-only">Toggle menu</span> | ||
| </DropdownMenuTrigger> | ||
| <DropdownMenuContent align="start"> | ||
| <DropdownMenuItem>Documentation</DropdownMenuItem> | ||
| <DropdownMenuItem>Themes</DropdownMenuItem> | ||
| <DropdownMenuItem>GitHub</DropdownMenuItem> | ||
| </DropdownMenuContent> | ||
| </DropdownMenu> | ||
| </BreadcrumbItem> | ||
| <BreadcrumbSeparator /> | ||
| <BreadcrumbItem> | ||
| <BreadcrumbLink href="/?story=breadcrumb--default">Components</BreadcrumbLink> | ||
| </BreadcrumbItem> | ||
| <BreadcrumbSeparator /> | ||
| <BreadcrumbItem> | ||
| <BreadcrumbPage>Breadcrumb</BreadcrumbPage> | ||
| </BreadcrumbItem> | ||
| </BreadcrumbList> | ||
| </Breadcrumb> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,179 @@ | ||
| import { Button, type ButtonProps } from "button"; | ||
| import { Label } from "label"; | ||
| import { RocketIcon } from "lucide-react"; | ||
| import { RadioGroup, RadioGroupItem } from "radio-group"; | ||
| import { useState } from "react"; | ||
|
|
||
| export const All = () => { | ||
| const [variant, setVariant] = useState<ButtonProps["variant"]>("default"); | ||
|
|
||
| return ( | ||
| <> | ||
| <RadioGroup | ||
| // @ts-expect-error | ||
| onValueChange={setVariant} | ||
| defaultValue="default" | ||
| className="mb-8 flex flex-row gap-8" | ||
| > | ||
| <div className="flex items-center space-x-2"> | ||
| <RadioGroupItem value="default" id="r1" /> | ||
| <Label htmlFor="r1">Default</Label> | ||
| </div> | ||
| <div className="flex items-center space-x-2"> | ||
| <RadioGroupItem value="secondary" id="r2" /> | ||
| <Label htmlFor="r2">Secondary</Label> | ||
| </div> | ||
| <div className="flex items-center space-x-2"> | ||
| <RadioGroupItem value="destructive" id="r3" /> | ||
| <Label htmlFor="r3">Destructive</Label> | ||
| </div> | ||
| <div className="flex items-center space-x-2"> | ||
| <RadioGroupItem value="outline" id="r4" /> | ||
| <Label htmlFor="r4">Outline</Label> | ||
| </div> | ||
| <div className="flex items-center space-x-2"> | ||
| <RadioGroupItem value="ghost" id="r5" /> | ||
| <Label htmlFor="r5">Ghost</Label> | ||
| </div> | ||
| </RadioGroup> | ||
|
|
||
| <div className="flex flex-col items-start gap-8"> | ||
| <div className="flex flex-row gap-5"> | ||
| <Button variant={variant} size="sm"> | ||
| Small | ||
| </Button> | ||
|
|
||
| <Button startIcon={<RocketIcon />} variant={variant} size="sm"> | ||
| With Start Icon | ||
| </Button> | ||
|
|
||
| <Button endIcon={<RocketIcon />} variant={variant} size="sm"> | ||
| With End Icon | ||
| </Button> | ||
|
|
||
| <Button variant={variant} size="sm" isLoading> | ||
| Loading | ||
| </Button> | ||
|
|
||
| <Button variant={variant} size="sm" disabled> | ||
| Disabled | ||
| </Button> | ||
|
|
||
| <Button variant={variant} isLoading size="sm" disabled> | ||
| Disabled Loading | ||
| </Button> | ||
| </div> | ||
|
|
||
| <div className="flex flex-row gap-5"> | ||
| <Button variant={variant} size="default"> | ||
| Medium | ||
| </Button> | ||
|
|
||
| <Button startIcon={<RocketIcon />} variant={variant} size="default"> | ||
| With Start Icon | ||
| </Button> | ||
|
|
||
| <Button endIcon={<RocketIcon />} variant={variant} size="default"> | ||
| With End Icon | ||
| </Button> | ||
|
|
||
| <Button variant={variant} size="default" isLoading> | ||
| Loading | ||
| </Button> | ||
|
|
||
| <Button variant={variant} size="default" disabled> | ||
| Disabled | ||
| </Button> | ||
|
|
||
| <Button variant={variant} isLoading size="default" disabled> | ||
| Disabled Loading | ||
| </Button> | ||
| </div> | ||
|
|
||
| <div className="flex flex-row gap-5"> | ||
| <Button variant={variant} size="lg"> | ||
| Large | ||
| </Button> | ||
|
|
||
| <Button startIcon={<RocketIcon />} variant={variant} size="lg"> | ||
| With Start Icon | ||
| </Button> | ||
|
|
||
| <Button endIcon={<RocketIcon />} variant={variant} size="lg"> | ||
| With End Icon | ||
| </Button> | ||
|
|
||
| <Button variant={variant} size="lg" isLoading> | ||
| Loading | ||
| </Button> | ||
|
|
||
| <Button variant={variant} size="lg" disabled> | ||
| Disabled | ||
| </Button> | ||
|
|
||
| <Button variant={variant} isLoading size="lg" disabled> | ||
| Disabled Loading | ||
| </Button> | ||
| </div> | ||
| </div> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export const IconButtons = () => { | ||
| const [variant, setVariant] = useState<ButtonProps["variant"]>("default"); | ||
|
|
||
| return ( | ||
| <> | ||
| <RadioGroup | ||
| // @ts-expect-error | ||
| onValueChange={setVariant} | ||
| defaultValue="default" | ||
| className="mb-8 flex flex-row gap-8" | ||
| > | ||
| <div className="flex items-center space-x-2"> | ||
| <RadioGroupItem value="default" id="r1" /> | ||
| <Label htmlFor="r1">Default</Label> | ||
| </div> | ||
| <div className="flex items-center space-x-2"> | ||
| <RadioGroupItem value="secondary" id="r2" /> | ||
| <Label htmlFor="r2">Secondary</Label> | ||
| </div> | ||
| <div className="flex items-center space-x-2"> | ||
| <RadioGroupItem value="destructive" id="r3" /> | ||
| <Label htmlFor="r3">Destructive</Label> | ||
| </div> | ||
| <div className="flex items-center space-x-2"> | ||
| <RadioGroupItem value="outline" id="r4" /> | ||
| <Label htmlFor="r4">Outline</Label> | ||
| </div> | ||
| <div className="flex items-center space-x-2"> | ||
| <RadioGroupItem value="ghost" id="r5" /> | ||
| <Label htmlFor="r5">Ghost</Label> | ||
| </div> | ||
| </RadioGroup> | ||
|
|
||
| <div className="flex flex-col items-start gap-8"> | ||
| <div className="flex flex-row gap-5"> | ||
| <Button startIcon={<RocketIcon />} variant={variant} size="icon-sm" /> | ||
|
|
||
| <Button startIcon={<RocketIcon />} variant={variant} size="icon-sm" isLoading /> | ||
|
|
||
| <Button startIcon={<RocketIcon />} variant={variant} size="icon-sm" disabled /> | ||
|
|
||
| <Button startIcon={<RocketIcon />} variant={variant} isLoading size="icon-sm" disabled /> | ||
| </div> | ||
|
|
||
| <div className="flex flex-row gap-5"> | ||
| <Button startIcon={<RocketIcon />} variant={variant} size="icon" /> | ||
|
|
||
| <Button startIcon={<RocketIcon />} variant={variant} size="icon" isLoading /> | ||
|
|
||
| <Button startIcon={<RocketIcon />} variant={variant} size="icon" disabled /> | ||
|
|
||
| <Button startIcon={<RocketIcon />} variant={variant} isLoading size="icon" disabled /> | ||
| </div> | ||
| </div> | ||
| </> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| import { Button } from "button"; | ||
| import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "card"; | ||
| import { Input } from "input"; | ||
| import { Label } from "label"; | ||
| import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "select"; | ||
|
|
||
| export const Default = () => { | ||
| return ( | ||
| <Card className="w-[350px]"> | ||
| <CardHeader> | ||
| <CardTitle>Create project</CardTitle> | ||
| <CardDescription>Deploy your new project in one-click</CardDescription> | ||
| </CardHeader> | ||
| <CardContent> | ||
| <form> | ||
| <div className="grid w-full items-center gap-4"> | ||
| <div className="flex flex-col space-y-1.5"> | ||
| <Label htmlFor="name">Name</Label> | ||
| <Input id="name" placeholder="Name of your project" /> | ||
| </div> | ||
| <div className="flex flex-col space-y-1.5"> | ||
| <Label htmlFor="framework">Framework</Label> | ||
| <Select> | ||
| <SelectTrigger id="framework"> | ||
| <SelectValue placeholder="Select" /> | ||
| </SelectTrigger> | ||
| <SelectContent position="popper"> | ||
| <SelectItem value="next">Next.js</SelectItem> | ||
| <SelectItem value="sveltekit">SvelteKit</SelectItem> | ||
| <SelectItem value="astro">Astro</SelectItem> | ||
| <SelectItem value="nuxt">Nuxt.js</SelectItem> | ||
| </SelectContent> | ||
| </Select> | ||
| </div> | ||
| </div> | ||
| </form> | ||
| </CardContent> | ||
| <CardFooter className="flex justify-between"> | ||
| <Button variant="outline">Cancel</Button> | ||
| <Button>Deploy</Button> | ||
| </CardFooter> | ||
| </Card> | ||
| ); | ||
| }; |
Oops, something went wrong.