@examplary/ui 1.43.0 → 1.44.0

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.
Files changed (2) hide show
  1. package/AGENTS.md +172 -0
  2. package/package.json +3 -2
package/AGENTS.md ADDED
@@ -0,0 +1,172 @@
1
+ # @examplary/ui - Component Reference
2
+
3
+ Import from `@examplary/ui`. Uses Tailwind CSS. Combine classes with the exported `cn()` utility.
4
+
5
+ ## Layout
6
+
7
+ **Card** - Container with `Card`, `CardHeader`, `CardTitle`, `CardDescription`, `CardContent`, `CardFooter`.
8
+
9
+ ```tsx
10
+ <Card>
11
+ <CardHeader><CardTitle>Title</CardTitle></CardHeader>
12
+ <CardContent>Body</CardContent>
13
+ </Card>
14
+ ```
15
+
16
+ **Separator** - Divider line. Props: `orientation` (horizontal | vertical).
17
+
18
+ **Tabs** - Tabbed panels with `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`.
19
+
20
+ ```tsx
21
+ <Tabs defaultValue="a">
22
+ <TabsList><TabsTrigger value="a">Tab A</TabsTrigger></TabsList>
23
+ <TabsContent value="a">Content A</TabsContent>
24
+ </Tabs>
25
+ ```
26
+
27
+ **Resizable** - Resizable split panels: `ResizablePanelGroup`, `ResizablePanel`, `ResizableHandle`.
28
+
29
+ ## Forms
30
+
31
+ **Input** - Standard text input. Accepts all `<input>` props.
32
+
33
+ **Textarea** - Multi-line input. Props: `autoGrow` auto-expands height.
34
+
35
+ **Label** - Form label. Props: `helpText` shows a tooltip icon.
36
+
37
+ **Select** - Dropdown with `Select`, `SelectTrigger`, `SelectValue`, `SelectContent`, `SelectItem`.
38
+
39
+ ```tsx
40
+ <Select onValueChange={setValue}>
41
+ <SelectTrigger><SelectValue placeholder="Pick one" /></SelectTrigger>
42
+ <SelectContent>
43
+ <SelectItem value="a">Option A</SelectItem>
44
+ </SelectContent>
45
+ </Select>
46
+ ```
47
+
48
+ **Checkbox** - Boolean toggle checkbox.
49
+
50
+ **Switch** - Toggle switch. Props: `size` (default | sm).
51
+
52
+ **RadioGroup** - Single selection with `RadioGroup`, `RadioGroupItem`.
53
+
54
+ **Slider** - Range input. Props: `value`, `min`, `max`, `orientation`.
55
+
56
+ **ColorPicker** - Hex color picker. Props: `value`, `onChange`, `swatches`, `allowCustom`.
57
+
58
+ **IconPicker** - Lucide icon selector. Props: `value`, `onValueChange`, `searchable`.
59
+
60
+ **Form** - react-hook-form integration: `Form`, `FormField`, `FormItem`, `FormLabel`, `FormControl`, `FormDescription`, `FormMessage`.
61
+
62
+ ```tsx
63
+ <Form {...form}>
64
+ <FormField control={form.control} name="email" render={({ field }) => (
65
+ <FormItem>
66
+ <FormLabel>Email</FormLabel>
67
+ <FormControl><Input {...field} /></FormControl>
68
+ <FormMessage />
69
+ </FormItem>
70
+ )} />
71
+ </Form>
72
+ ```
73
+
74
+ ## Buttons & Badges
75
+
76
+ **Button** - Props: `variant` (default | primary | secondary | destructive | white | plain | dashed | rounded | roundedPrimary | roundedSecondary | roundedWhite), `size` (default | sm | lg | icon | icon-sm | icon-lg), `asChild`.
77
+
78
+ ```tsx
79
+ <Button variant="primary" size="sm">Save</Button>
80
+ ```
81
+
82
+ **Badge** - Status tag. Props: `variant` (default | blue | bright | positive | orange | secondary).
83
+
84
+ ## Overlays
85
+
86
+ **Dialog** - Modal with `Dialog`, `DialogTrigger`, `DialogContent`, `DialogHeader`, `DialogTitle`, `DialogDescription`, `DialogFooter`, `DialogClose`.
87
+
88
+ ```tsx
89
+ <Dialog>
90
+ <DialogTrigger asChild><Button>Open</Button></DialogTrigger>
91
+ <DialogContent>
92
+ <DialogHeader><DialogTitle>Confirm</DialogTitle></DialogHeader>
93
+ <DialogFooter><Button>OK</Button></DialogFooter>
94
+ </DialogContent>
95
+ </Dialog>
96
+ ```
97
+
98
+ **Sheet** - Side drawer. Same pattern as Dialog. `SheetContent` accepts `side` (top | bottom | left | right).
99
+
100
+ **Popover** - Floating panel with `Popover`, `PopoverTrigger`, `PopoverContent`.
101
+
102
+ **Tooltip** - Hover tooltip with `Tooltip`, `TooltipTrigger`, `TooltipContent`. Wrap app in `TooltipProvider`.
103
+
104
+ **HelpIcon** - Question mark icon with built-in tooltip. Props: `align`, `side`.
105
+
106
+ ## Menus
107
+
108
+ **DropdownMenu** - Dropdown with `DropdownMenu`, `DropdownMenuTrigger`, `DropdownMenuContent`, `DropdownMenuItem`, `DropdownMenuSeparator`, `DropdownMenuCheckboxItem`, `DropdownMenuSub`, `DropdownMenuSubTrigger`, `DropdownMenuSubContent`.
109
+
110
+ **ContextMenu** - Right-click menu. Same pattern as DropdownMenu.
111
+
112
+ **Command** - Searchable command list: `Command`, `CommandInput`, `CommandList`, `CommandGroup`, `CommandItem`, `CommandEmpty`.
113
+
114
+ **CommandPalette** - Cmd+K command palette. Props: `placeholderText`, `noResultsText`. Register commands via `useCommand` hook.
115
+
116
+ ## Data Display
117
+
118
+ **Table** - Semantic table: `Table`, `TableHeader`, `TableBody`, `TableRow`, `TableHead`, `TableCell`.
119
+
120
+ **Alert** - Alert box with `Alert`, `AlertTitle`, `AlertDescription`. Props: `variant` (default | secondary | destructive | warning | info).
121
+
122
+ **Skeleton** - Loading placeholder. Style with className for size.
123
+
124
+ **ProgressBar** - Linear progress. Props: `value` (0-100).
125
+
126
+ ## Rich Text
127
+
128
+ **RichTextDisplay** - Renders HTML content (with LaTeX math support). Props: `as`, `children` (HTML string).
129
+
130
+ **RichTextField** - Tiptap rich text editor. Props: `value`, `onChange`, `placeholder`, `singleLine`, `showFormattingMenu`, `uploadFile`.
131
+
132
+ **RichTextToolbar** - Formatting toolbar. Props: `editor` (Tiptap editor instance).
133
+
134
+ ## Chat
135
+
136
+ **ChatView** - Message display. Props: `messages` (array of `{role, content}`), `typing`, `botAvatar`.
137
+
138
+ **ChatInput** - Message input with send. Props: `submit`, `loading`, `placeholder`. Enter to send, Shift+Enter for newline.
139
+
140
+ ## Interactive
141
+
142
+ **Sortable** - Drag-and-drop reordering: `Sortable`, `SortableContent`, `SortableItem`, `SortableItemHandle`, `SortableOverlay`.
143
+
144
+ ```tsx
145
+ <Sortable value={items} onValueChange={setItems}>
146
+ <SortableContent>
147
+ {items.map(item => (
148
+ <SortableItem key={item.id} value={item.id}>
149
+ <SortableItemHandle /> {item.label}
150
+ </SortableItem>
151
+ ))}
152
+ </SortableContent>
153
+ <SortableOverlay />
154
+ </Sortable>
155
+ ```
156
+
157
+ ## Misc
158
+
159
+ **AiIcon** - Sparkle AI icon SVG.
160
+
161
+ **AiSpinner** - Rotating AI icon for loading states.
162
+
163
+ **AiPromptSuggestion** - Clickable AI suggestion pill. Props: `active`.
164
+
165
+ **TickIcon** - Checkmark SVG icon.
166
+
167
+ **TickLoader** - Animated checkmark animation. Props: `size`.
168
+
169
+ ## Utilities
170
+
171
+ - `cn(...classes)` - Merges Tailwind classes (clsx + tailwind-merge).
172
+ - `registerWebComponents()` - Registers `<file-attachment>`, `<page-clipping>`, `<inline-math>` custom elements for rich text rendering.
package/package.json CHANGED
@@ -2,12 +2,13 @@
2
2
  "name": "@examplary/ui",
3
3
  "description": "UI components for the Examplary testing platform.",
4
4
  "packageManager": "yarn@4.5.3",
5
- "version": "1.43.0",
5
+ "version": "1.44.0",
6
6
  "type": "module",
7
7
  "main": "dist/index.js",
8
8
  "files": [
9
9
  "dist",
10
- "src/global.css"
10
+ "src/global.css",
11
+ "AGENTS.md"
11
12
  ],
12
13
  "scripts": {
13
14
  "dev": "yarn build --watch",