UI Components
Standalone UI primitives exported from @codecanon/waraq/ui.
All components are imported from @codecanon/waraq/ui and can be used independently
of the editor — drop them into any Tailwind + ShadCN project.
import { Button, Input, ColorPicker, /* … */ } from "@codecanon/waraq/ui"Button
import { Button } from "@codecanon/waraq/ui"<Button variant="primary">Primary</Button><Button variant="secondary">Secondary</Button><Button variant="outline">Outline</Button><Button variant="ghost">Ghost</Button><Button variant="destructive">Destructive</Button>Sizes
import { Button } from "@codecanon/waraq/ui"import { Pencil } from "lucide-react"<Button size="sm">Small</Button><Button size="default">Default</Button><Button size="lg">Large</Button><Button size="icon"><Pencil size={16} /></Button>| Prop | Type | Default |
|---|---|---|
variant | "primary" | "secondary" | "outline" | "ghost" | "destructive" | "link" | "secondary" |
size | "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | "default" |
asChild | boolean | false |
tooltip | string | — |
tooltipSide | "top" | "right" | "bottom" | "left" | — |
tooltipShortcut | string[] | — |
Input
import { Input } from "@codecanon/waraq/ui"<Input placeholder="Placeholder text" /><Input defaultValue="With a value" /><Input disabled placeholder="Disabled" />Textarea
import { Textarea } from "@codecanon/waraq/ui"<Textarea placeholder="Type something here…" rows={3} />ActionLabel
A small label variant used to caption form controls inside action panes.
import { ActionLabel, Input } from "@codecanon/waraq/ui"<ActionLabel htmlFor="name">Your name</ActionLabel><Input id="name" placeholder="Abdelrahman Salem" />InputNumber
Number input with optional stepper controls, min/max, suffix/prefix, and decimal scale.
import { InputNumber } from "@codecanon/waraq/ui"<InputNumber defaultValue={42} suffix="px" showControls min={0} max={1000} /><InputNumber defaultValue={0.75} decimalScale={2} min={0} max={1} stepper={0.05} />| Prop | Type | Description |
|---|---|---|
value | number | undefined | Controlled value |
onValueChange | (value: number | undefined) => void | Change handler |
min / max | number | Clamp bounds |
stepper | number | Step increment |
suffix / prefix | string | Unit label |
showControls | boolean | Show +/– spinner buttons |
decimalScale | number | Number of decimal places |
InputGroup
Wraps a label/addon next to an input for compact property rows.
import { InputGroup, InputGroupAddon, InputNumber } from "@codecanon/waraq/ui"<InputGroup> <InputGroupAddon>W</InputGroupAddon> <InputNumber defaultValue={300} suffix="px" /></InputGroup><InputGroup> <InputGroupAddon>H</InputGroupAddon> <InputNumber defaultValue={200} suffix="px" /></InputGroup>Slider
import { Slider } from "@codecanon/waraq/ui"<Slider defaultValue={[40]} min={0} max={100} step={1} />Select
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem,} from "@codecanon/waraq/ui"<Select defaultValue="solid"> <SelectTrigger className="w-40"> <SelectValue /> </SelectTrigger> <SelectContent> <SelectItem value="solid">Solid</SelectItem> <SelectItem value="dashed">Dashed</SelectItem> <SelectItem value="dotted">Dotted</SelectItem> <SelectItem value="double">Double</SelectItem> </SelectContent></Select>Tabs
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@codecanon/waraq/ui"<Tabs defaultValue="style"> <TabsList> <TabsTrigger value="style">Style</TabsTrigger> <TabsTrigger value="layout">Layout</TabsTrigger> <TabsTrigger value="effects">Effects</TabsTrigger> </TabsList> <TabsContent value="style">Style panel content</TabsContent> <TabsContent value="layout">Layout panel content</TabsContent> <TabsContent value="effects">Effects panel content</TabsContent></Tabs>ToggleGroup
Single or multiple selection toggle buttons.
import { ToggleGroup, ToggleGroupItem } from "@codecanon/waraq/ui"import { AlignLeft, AlignCenter, AlignRight, AlignJustify } from "lucide-react"<ToggleGroup type="single" defaultValue="left"> <ToggleGroupItem value="left"><AlignLeft size={14} /></ToggleGroupItem> <ToggleGroupItem value="center"><AlignCenter size={14} /></ToggleGroupItem> <ToggleGroupItem value="right"><AlignRight size={14} /></ToggleGroupItem> <ToggleGroupItem value="justify"><AlignJustify size={14} /></ToggleGroupItem></ToggleGroup>Separator
import { Separator } from "@codecanon/waraq/ui"{/* Horizontal */}<Separator />{/* Vertical */}<Separator orientation="vertical" />ColorPicker
Full color picker with hex input and optional eye dropper.
import { ColorPicker } from "@codecanon/waraq/ui"const [color, setColor] = useState("#3b82f6")<ColorPicker value={color} onChange={setColor} showInput showPreview/>| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | Controlled hex color |
onChange | (color: string) => void | — | Change handler |
showInput | boolean | false | Show hex text input |
showPreview | boolean | false | Show color swatch preview |
disabled | boolean | false | Disable interaction |
Compact variants
import { ColorPickerCompact, ColorPreview, ColorInput,} from "@codecanon/waraq/ui"const [color, setColor] = useState("#f59e0b"){/* Compact trigger — opens full picker in a popover */}<ColorPickerCompact value={color} onChange={setColor} />{/* Swatch only */}<ColorPreview value={color} />{/* Hex input only */}<ColorInput value={color} onChange={setColor} />Dialog
import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, Button,} from "@codecanon/waraq/ui"<Dialog> <DialogTrigger asChild> <Button variant="outline">Open dialog</Button> </DialogTrigger> <DialogContent> <DialogHeader> <DialogTitle>Are you sure?</DialogTitle> <DialogDescription> This action cannot be undone. </DialogDescription> </DialogHeader> <DialogFooter> <Button variant="outline">Cancel</Button> <Button variant="destructive">Confirm</Button> </DialogFooter> </DialogContent></Dialog>Popover
import { Popover, PopoverTrigger, PopoverContent, Button,} from "@codecanon/waraq/ui"<Popover> <PopoverTrigger asChild> <Button variant="outline">Open popover</Button> </PopoverTrigger> <PopoverContent className="w-56 p-3 text-sm"> Popover content goes here. </PopoverContent></Popover>