admin-ui-starter-kit 0.1.4 → 0.4.3

package/.agents/skills/component-library-rules/references/components/ui__inputs.md

@@ -1,7 +1,7 @@
 ---
 id: ui/inputs
 title: "UI · Inputs"
-description: "Input, Textarea, Select primitives."
+description: "Input, Textarea, Select, NativeSelect, InputOTP, Field, and Kbd primitives."
 layer: ui
 family: "Forms"
 sourcePath: src/components/ui
@@ -9,8 +9,16 @@ examples:
   - InputExample
   - TextareaExample
   - SelectExample
+  - NativeSelectExample
+  - InputOTPExample
+  - FieldExample
+  - KbdExample
 imports:
+  - @/components/ui/field
   - @/components/ui/input
+  - @/components/ui/input-otp
+  - @/components/ui/kbd
+  - @/components/ui/native-select
   - @/components/ui/select
   - @/components/ui/textarea
 tags:
@@ -24,16 +32,28 @@ tags:
 
 # UI · Inputs
 
-Input, Textarea, Select primitives.
+Input, Textarea, Select, NativeSelect, InputOTP, Field, and Kbd primitives.
 
-**Layer:** `ui`  
+**Layer:** `ui`
 **Source:** `src/components/ui`
 
 ## Examples
 
 ```tsx
 import { useState } from 'react';
+import {
+	Field,
+	FieldDescription,
+	FieldError,
+	FieldGroup,
+	FieldLabel,
+	FieldLegend,
+	FieldSet,
+} from '@/components/ui/field';
 import { Input } from '@/components/ui/input';
+import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from '@/components/ui/input-otp';
+import { Kbd, KbdGroup } from '@/components/ui/kbd';
+import { NativeSelect, NativeSelectOption } from '@/components/ui/native-select';
 import { Textarea } from '@/components/ui/textarea';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Col } from '../../PreviewLayout';
@@ -43,11 +63,11 @@ export function InputExample() {
 	return (
 		<>
 			<Col>
-								<Input placeholder="Type something…" value={text} onChange={(e) => setText(e.target.value)} />
-								<Input disabled placeholder="Disabled" />
-								<Input aria-invalid placeholder="Invalid state" />
-								<Input type="email" placeholder="email@example.com" />
-							</Col>
+				<Input placeholder="Type something…" value={text} onChange={(e) => setText(e.target.value)} />
+				<Input disabled placeholder="Disabled" />
+				<Input aria-invalid placeholder="Invalid state" />
+				<Input type="email" placeholder="email@example.com" />
+			</Col>
 		</>
 	);
 }
@@ -66,17 +86,92 @@ export function SelectExample() {
 	return (
 		<>
 			<Select value={fruit} onValueChange={setFruit}>
-								<SelectTrigger className="w-48">
-									<SelectValue placeholder="Pick a fruit" />
-								</SelectTrigger>
-								<SelectContent>
-									<SelectItem value="apple">Apple</SelectItem>
-									<SelectItem value="banana">Banana</SelectItem>
-									<SelectItem value="cherry">Cherry</SelectItem>
-									<SelectItem value="date">Date</SelectItem>
-								</SelectContent>
-							</Select>
-							<div className="mt-2 text-xs text-muted-foreground">value: {fruit || '—'}</div>
+				<SelectTrigger className="w-48">
+					<SelectValue placeholder="Pick a fruit" />
+				</SelectTrigger>
+				<SelectContent>
+					<SelectItem value="apple">Apple</SelectItem>
+					<SelectItem value="banana">Banana</SelectItem>
+					<SelectItem value="cherry">Cherry</SelectItem>
+					<SelectItem value="date">Date</SelectItem>
+				</SelectContent>
+			</Select>
+			<div className="mt-2 text-xs text-muted-foreground">value: {fruit || '—'}</div>
+		</>
+	);
+}
+
+export function NativeSelectExample() {
+	const [status, setStatus] = useState('open');
+
+	return (
+		<>
+			<NativeSelect
+				aria-label="Issue status"
+				value={status}
+				onChange={(event) => setStatus(event.target.value)}
+			>
+				<NativeSelectOption value="open">Open</NativeSelectOption>
+				<NativeSelectOption value="review">In review</NativeSelectOption>
+				<NativeSelectOption value="resolved">Resolved</NativeSelectOption>
+			</NativeSelect>
+			<div className="mt-2 text-xs text-muted-foreground">value: {status}</div>
+		</>
+	);
+}
+
+export function InputOTPExample() {
+	const [code, setCode] = useState('');
+
+	return (
+		<>
+			<InputOTP maxLength={6} value={code} onChange={setCode}>
+				<InputOTPGroup>
+					<InputOTPSlot index={0} />
+					<InputOTPSlot index={1} />
+					<InputOTPSlot index={2} />
+				</InputOTPGroup>
+				<InputOTPSeparator />
+				<InputOTPGroup>
+					<InputOTPSlot index={3} />
+					<InputOTPSlot index={4} />
+					<InputOTPSlot index={5} />
+				</InputOTPGroup>
+			</InputOTP>
+			<div className="mt-2 text-xs text-muted-foreground">value: {code || 'empty'}</div>
+		</>
+	);
+}
+
+export function FieldExample() {
+	return (
+		<>
+			<FieldSet className="max-w-md">
+				<FieldLegend variant="label">Notification settings</FieldLegend>
+				<FieldGroup>
+					<Field>
+						<FieldLabel htmlFor="ui-field-email">Email</FieldLabel>
+						<Input id="ui-field-email" type="email" defaultValue="kira@example.com" />
+						<FieldDescription>Used for critical account notifications.</FieldDescription>
+					</Field>
+					<Field data-invalid="true">
+						<FieldLabel htmlFor="ui-field-backup-email">Backup email</FieldLabel>
+						<Input id="ui-field-backup-email" type="email" aria-invalid defaultValue="invalid" />
+						<FieldError>Enter a valid email address.</FieldError>
+					</Field>
+				</FieldGroup>
+			</FieldSet>
+		</>
+	);
+}
+
+export function KbdExample() {
+	return (
+		<>
+			<KbdGroup>
+				<Kbd>Ctrl</Kbd>
+				<Kbd>K</Kbd>
+			</KbdGroup>
 		</>
 	);
 }
@@ -87,4 +182,8 @@ export function SelectExample() {
 - `InputExample`
 - `TextareaExample`
 - `SelectExample`
+- `NativeSelectExample`
+- `InputOTPExample`
+- `FieldExample`
+- `KbdExample`
 

package/.agents/skills/component-library-rules/references/components/ui__layout-primitives.md

@@ -0,0 +1,71 @@
+---
+id: ui/layout-primitives
+title: "UI · Layout primitives"
+description: "AspectRatio and Resizable primitives."
+layer: ui
+family: "Layout"
+sourcePath: src/components/ui
+examples:
+  - AspectRatioExample
+  - ResizableExample
+imports:
+  - @/components/ui/aspect-ratio
+  - @/components/ui/resizable
+tags:
+  - ui
+  - layout
+  - primitives
+  - aspectratio
+  - resizable
+---
+
+# UI · Layout primitives
+
+AspectRatio and Resizable primitives.
+
+**Layer:** `ui`
+**Source:** `src/components/ui`
+
+## Examples
+
+```tsx
+import { AspectRatio } from '@/components/ui/aspect-ratio';
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable';
+
+export function AspectRatioExample() {
+	return (
+		<AspectRatio ratio={16 / 9} className="overflow-hidden rounded-md border border-border bg-muted/40">
+			<div className="flex size-full items-center justify-center text-sm text-muted-foreground">
+				16:9 content well
+			</div>
+		</AspectRatio>
+	);
+}
+
+export function ResizableExample() {
+	return (
+		<ResizablePanelGroup
+			orientation="horizontal"
+			className="min-h-40 max-w-2xl rounded-md border border-border"
+		>
+			<ResizablePanel defaultSize={35}>
+				<div className="flex h-full items-center justify-center p-4 text-sm text-muted-foreground">
+					Navigation
+				</div>
+			</ResizablePanel>
+			<ResizableHandle withHandle />
+			<ResizablePanel defaultSize={65}>
+				<div className="flex h-full items-center justify-center p-4 text-sm text-muted-foreground">
+					Workspace
+				</div>
+			</ResizablePanel>
+		</ResizablePanelGroup>
+	);
+}
+```
+
+## Example exports
+
+- `AspectRatioExample`
+- `ResizableExample`
+

package/.agents/skills/component-library-rules/references/components/ui__menus.md

@@ -1,12 +1,14 @@
 ---
 id: ui/menus
 title: "UI · Menus"
-description: "DropdownMenu, ContextMenu, Command palette."
+description: "DropdownMenu, Menubar, NavigationMenu, ContextMenu, and Command palette."
 layer: ui
 family: "Overlays"
 sourcePath: src/components/ui
 examples:
   - DropdownMenuExample
+  - MenubarExample
+  - NavigationMenuExample
   - ContextMenuRightClick
   - CommandPalette
 imports:
@@ -14,26 +16,28 @@ imports:
   - @/components/ui/command
   - @/components/ui/context-menu
   - @/components/ui/dropdown-menu
+  - @/components/ui/menubar
+  - @/components/ui/navigation-menu
 tags:
   - ui
   - overlays
   - menus
   - dropdownmenu
-  - contextmenu
-  - command
+  - menubar
+  - navigationmenu
 ---
 
 # UI · Menus
 
-DropdownMenu, ContextMenu, Command palette.
+DropdownMenu, Menubar, NavigationMenu, ContextMenu, and Command palette.
 
-**Layer:** `ui`  
+**Layer:** `ui`
 **Source:** `src/components/ui`
 
 ## Examples
 
 ```tsx
-import { Edit, Trash2, Copy } from 'lucide-react';
+import { Copy, Edit, ExternalLink, Trash2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import {
 	DropdownMenu,
@@ -59,21 +63,97 @@ import {
 	CommandItem,
 	CommandList,
 } from '@/components/ui/command';
+import {
+	Menubar,
+	MenubarContent,
+	MenubarItem,
+	MenubarMenu,
+	MenubarSeparator,
+	MenubarTrigger,
+} from '@/components/ui/menubar';
+import {
+	NavigationMenu,
+	NavigationMenuContent,
+	NavigationMenuItem,
+	NavigationMenuLink,
+	NavigationMenuList,
+	NavigationMenuTrigger,
+} from '@/components/ui/navigation-menu';
 
 export function DropdownMenuExample() {
 	return (
 		<>
 			<DropdownMenu>
-								<DropdownMenuTrigger render={(p) => <Button variant="outline" {...p}>Open menu</Button>} />
-								<DropdownMenuContent>
-									<DropdownMenuLabel>Actions</DropdownMenuLabel>
-									<DropdownMenuSeparator />
-									<DropdownMenuItem><Edit className="size-3.5" /> Edit</DropdownMenuItem>
-									<DropdownMenuItem><Copy className="size-3.5" /> Duplicate</DropdownMenuItem>
-									<DropdownMenuSeparator />
-									<DropdownMenuItem variant="destructive"><Trash2 className="size-3.5" /> Delete</DropdownMenuItem>
-								</DropdownMenuContent>
-							</DropdownMenu>
+				<DropdownMenuTrigger render={(p) => <Button variant="outline" {...p}>Open menu</Button>} />
+				<DropdownMenuContent>
+					<DropdownMenuLabel>Actions</DropdownMenuLabel>
+					<DropdownMenuSeparator />
+					<DropdownMenuItem><Edit className="size-3.5" /> Edit</DropdownMenuItem>
+					<DropdownMenuItem><Copy className="size-3.5" /> Duplicate</DropdownMenuItem>
+					<DropdownMenuSeparator />
+					<DropdownMenuItem variant="destructive"><Trash2 className="size-3.5" /> Delete</DropdownMenuItem>
+				</DropdownMenuContent>
+			</DropdownMenu>
+		</>
+	);
+}
+
+export function MenubarExample() {
+	return (
+		<>
+			<Menubar>
+				<MenubarMenu>
+					<MenubarTrigger>File</MenubarTrigger>
+					<MenubarContent>
+						<MenubarItem>New workspace</MenubarItem>
+						<MenubarItem>Import data</MenubarItem>
+						<MenubarSeparator />
+						<MenubarItem variant="destructive">Archive</MenubarItem>
+					</MenubarContent>
+				</MenubarMenu>
+				<MenubarMenu>
+					<MenubarTrigger>View</MenubarTrigger>
+					<MenubarContent>
+						<MenubarItem>Compact rows</MenubarItem>
+						<MenubarItem>Show filters</MenubarItem>
+					</MenubarContent>
+				</MenubarMenu>
+			</Menubar>
+		</>
+	);
+}
+
+export function NavigationMenuExample() {
+	return (
+		<>
+			<NavigationMenu>
+				<NavigationMenuList>
+					<NavigationMenuItem>
+						<NavigationMenuTrigger>Operations</NavigationMenuTrigger>
+						<NavigationMenuContent>
+							<div className="grid w-[360px] gap-1">
+								<NavigationMenuLink href="#orders">
+									<ExternalLink className="size-4" />
+									<div>
+										<div className="font-medium">Orders</div>
+										<div className="text-xs text-muted-foreground">Review active fulfillment queues.</div>
+									</div>
+								</NavigationMenuLink>
+								<NavigationMenuLink href="#inventory">
+									<ExternalLink className="size-4" />
+									<div>
+										<div className="font-medium">Inventory</div>
+										<div className="text-xs text-muted-foreground">Monitor low-stock and replenishment signals.</div>
+									</div>
+								</NavigationMenuLink>
+							</div>
+						</NavigationMenuContent>
+					</NavigationMenuItem>
+					<NavigationMenuItem>
+						<NavigationMenuLink href="#reports">Reports</NavigationMenuLink>
+					</NavigationMenuItem>
+				</NavigationMenuList>
+			</NavigationMenu>
 		</>
 	);
 }
@@ -82,20 +162,20 @@ export function ContextMenuRightClick() {
 	return (
 		<>
 			<ContextMenu>
-								<ContextMenuTrigger>
-									<div className="flex h-24 w-full items-center justify-center rounded-md border border-dashed border-border text-sm text-muted-foreground">
-										Right-click here
-									</div>
-								</ContextMenuTrigger>
-								<ContextMenuContent>
-									<ContextMenuLabel>File</ContextMenuLabel>
-									<ContextMenuSeparator />
-									<ContextMenuItem><Edit className="size-3.5" /> Rename</ContextMenuItem>
-									<ContextMenuItem><Copy className="size-3.5" /> Copy</ContextMenuItem>
-									<ContextMenuSeparator />
-									<ContextMenuItem variant="destructive"><Trash2 className="size-3.5" /> Delete</ContextMenuItem>
-								</ContextMenuContent>
-							</ContextMenu>
+				<ContextMenuTrigger>
+					<div className="flex h-24 w-full items-center justify-center rounded-md border border-dashed border-border text-sm text-muted-foreground">
+						Right-click here
+					</div>
+				</ContextMenuTrigger>
+				<ContextMenuContent>
+					<ContextMenuLabel>File</ContextMenuLabel>
+					<ContextMenuSeparator />
+					<ContextMenuItem><Edit className="size-3.5" /> Rename</ContextMenuItem>
+					<ContextMenuItem><Copy className="size-3.5" /> Copy</ContextMenuItem>
+					<ContextMenuSeparator />
+					<ContextMenuItem variant="destructive"><Trash2 className="size-3.5" /> Delete</ContextMenuItem>
+				</ContextMenuContent>
+			</ContextMenu>
 		</>
 	);
 }
@@ -104,20 +184,20 @@ export function CommandPalette() {
 	return (
 		<>
 			<Command className="rounded-md border border-border">
-								<CommandInput placeholder="Type a command…" />
-								<CommandList>
-									<CommandEmpty>No results.</CommandEmpty>
-									<CommandGroup heading="Actions">
-										<CommandItem>Create order</CommandItem>
-										<CommandItem>Add customer</CommandItem>
-										<CommandItem>Generate invoice</CommandItem>
-									</CommandGroup>
-									<CommandGroup heading="Navigation">
-										<CommandItem>Go to Orders</CommandItem>
-										<CommandItem>Go to Settings</CommandItem>
-									</CommandGroup>
-								</CommandList>
-							</Command>
+				<CommandInput placeholder="Type a command…" />
+				<CommandList>
+					<CommandEmpty>No results.</CommandEmpty>
+					<CommandGroup heading="Actions">
+						<CommandItem>Create order</CommandItem>
+						<CommandItem>Add customer</CommandItem>
+						<CommandItem>Generate invoice</CommandItem>
+					</CommandGroup>
+					<CommandGroup heading="Navigation">
+						<CommandItem>Go to Orders</CommandItem>
+						<CommandItem>Go to Settings</CommandItem>
+					</CommandGroup>
+				</CommandList>
+			</Command>
 		</>
 	);
 }
@@ -126,6 +206,8 @@ export function CommandPalette() {
 ## Example exports
 
 - `DropdownMenuExample`
+- `MenubarExample`
+- `NavigationMenuExample`
 - `ContextMenuRightClick`
 - `CommandPalette`