@leitware/dockets 0.1.0

package/templates/separator.tsx

@@ -0,0 +1 @@
+export { Separator } from '@/components/ui/separator'

package/templates/sheet.tsx

@@ -0,0 +1,12 @@
+export {
+	Sheet,
+	SheetTrigger,
+	SheetClose,
+	SheetPortal,
+	SheetOverlay,
+	SheetContent,
+	SheetHeader,
+	SheetFooter,
+	SheetTitle,
+	SheetDescription,
+} from '@/components/ui/sheet'

package/templates/sidebar.tsx

@@ -0,0 +1,15 @@
+export {
+	SidebarProvider,
+	Sidebar,
+	SidebarHeader,
+	SidebarContent,
+	SidebarFooter,
+	SidebarNav,
+	SidebarNavItem,
+	SidebarGroup,
+	SidebarGroupLabel,
+	SidebarTrigger,
+	SidebarInset,
+	SidebarRail,
+	useSidebar,
+} from '@/components/ui/sidebar'

package/templates/simple-footer.tsx

@@ -0,0 +1,43 @@
+import { Link } from '@tanstack/react-router'
+
+interface SimpleFooterProps {
+	/**
+	 * Maximum width class for the footer content
+	 * @default "max-w-[768px]"
+	 */
+	maxWidth?: string
+	/**
+	 * Company name to display
+	 * @default "Leitware Ltd"
+	 */
+	companyName?: string
+}
+
+export function SimpleFooter({
+	maxWidth = 'max-w-[768px]',
+	companyName = 'Leitware Ltd',
+}: SimpleFooterProps) {
+	return (
+		<footer>
+			<div className={`${maxWidth} mx-auto px-6 py-8`}>
+				<div className="text-center text-[var(--muted-color)] text-[10px] uppercase mb-2">
+					© {new Date().getFullYear()} {companyName}
+				</div>
+				<div className="flex gap-4 justify-center">
+					<Link
+						to="/terms-and-conditions"
+						className="text-[var(--muted-color)] text-[10px] uppercase no-underline hover:underline"
+					>
+						Terms & Conditions
+					</Link>
+					<Link
+						to="/privacy"
+						className="text-[var(--muted-color)] text-[10px] uppercase no-underline hover:underline"
+					>
+						Privacy Policy
+					</Link>
+				</div>
+			</div>
+		</footer>
+	)
+}

package/templates/simple-header.tsx

@@ -0,0 +1,77 @@
+import { useQuery } from 'convex/react'
+import { Link } from '@tanstack/react-router'
+import { api } from '../../convex/_generated/api'
+import { Logo } from '@/components/logo'
+import { ThemeToggle } from '@/components/theme-toggle'
+
+interface NavLinkConfig {
+	to: string
+	label: string
+	useLink?: boolean
+}
+
+interface SimpleHeaderProps {
+	/**
+	 * Single navigation link (shorthand for navLinks with one item)
+	 */
+	navLink?: NavLinkConfig
+	/**
+	 * Additional navigation links rendered alongside the primary link
+	 */
+	navLinks?: NavLinkConfig[]
+	/**
+	 * Whether to use Link component (for internal pages) or anchor (for home page)
+	 * @default true
+	 */
+	useLink?: boolean
+	/**
+	 * Where the "For Agents" link points
+	 * @default '/for-agents'
+	 */
+	agentsTo?: string
+}
+
+export function SimpleHeader({
+	navLink,
+	navLinks,
+	useLink = true,
+	agentsTo = '/for-agents',
+}: SimpleHeaderProps) {
+	const user = useQuery(api.myFunctions.currentUser)
+
+	return (
+		<nav className="w-full sticky top-0 z-50">
+			<div className="wrap flex justify-between items-center h-16">
+				<div className="flex items-center gap-4">
+					<Link to="/" className="flex items-center gap-2 no-underline">
+						<Logo className="w-6 h-6" />
+						<span className="font-bold">LEITWARE</span>
+					</Link>
+					<a href={agentsTo} className="text-[10px] uppercase no-underline">
+						For Agents
+					</a>
+				</div>
+				<div className="flex items-center gap-4">
+					{[...(navLink ? [navLink] : []), ...(navLinks ?? [])].map((link) => {
+						const useLinkComponent = link.useLink ?? useLink
+						return useLinkComponent ? (
+							<Link key={link.to} to={link.to} className="text-[10px] uppercase no-underline">
+								{link.label}
+							</Link>
+						) : (
+							<a key={link.to} href={link.to} className="text-[10px] uppercase no-underline">
+								{link.label}
+							</a>
+						)
+					})}
+					{user !== undefined && (
+						<Link to="/account" className="text-[10px] uppercase no-underline">
+							{user ? `Signed in as ${user.email}` : 'Sign In / Sign Up'}
+						</Link>
+					)}
+					<ThemeToggle />
+				</div>
+			</div>
+		</nav>
+	)
+}

package/templates/skeleton.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react'
+import { Skeleton, SkeletonText } from '@/components/ui/skeleton'
+import { cn } from '@/lib/utils'
+
+export interface SkeletonCardProps {
+	className?: string
+	lines?: number
+	showAvatar?: boolean
+}
+
+function SkeletonCard({ className, lines = 3, showAvatar = false }: SkeletonCardProps) {
+	return (
+		<div
+			className={cn(
+				'rounded-[var(--radius)] border-[length:var(--border-width)] border-foreground p-4',
+				className,
+			)}
+		>
+			{showAvatar && (
+				<div className="mb-3 flex items-center gap-2">
+					<Skeleton className="size-9 rounded-[var(--radius)]" />
+					<div className="flex flex-col gap-1.5">
+						<Skeleton className="h-3 w-24" />
+						<Skeleton className="h-3 w-16" />
+					</div>
+				</div>
+			)}
+			<SkeletonText lines={lines} />
+		</div>
+	)
+}
+
+export { SkeletonCard, Skeleton, SkeletonText }

package/templates/slider.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react'
+import { Slider } from '@/components/ui/slider'
+import { cn } from '@/lib/utils'
+
+export interface LabelledSliderProps {
+	value?: number[]
+	defaultValue?: number[]
+	min?: number
+	max?: number
+	step?: number
+	label?: string
+	showValue?: boolean
+	onValueChange?: (value: number[]) => void
+	className?: string
+	disabled?: boolean
+}
+
+function LabelledSlider({
+	value,
+	defaultValue,
+	min = 0,
+	max = 100,
+	step = 1,
+	label,
+	showValue = false,
+	onValueChange,
+	className,
+	disabled,
+}: LabelledSliderProps) {
+	const displayValue = value ?? defaultValue
+	return (
+		<div className={cn('flex flex-col gap-2', className)}>
+			{(label || showValue) && (
+				<div className="flex items-center justify-between text-xs font-medium uppercase tracking-wider">
+					{label && <span>{label}</span>}
+					{showValue && displayValue && (
+						<span className="text-muted-foreground">{displayValue.join(' – ')}</span>
+					)}
+				</div>
+			)}
+			<Slider
+				value={value}
+				defaultValue={defaultValue}
+				min={min}
+				max={max}
+				step={step}
+				onValueChange={onValueChange}
+				disabled={disabled}
+			/>
+		</div>
+	)
+}
+
+export { LabelledSlider as Slider }
+export { Slider as SliderRoot } from '@/components/ui/slider'

package/templates/styles/dockets.css

@@ -0,0 +1,104 @@
+/**
+ * Dockets Design System — CSS Tokens
+ * ====================================
+ *
+ * Install this file alongside your Tailwind CSS and import it in your
+ * root layout:
+ *
+ *   import "@/styles/dockets.css";
+ *
+ * BORDER WIDTH
+ * ─────────────
+ * All dockets components use `--border-width` instead of a hardcoded `1px`.
+ * This lets you thicken every border in your app with a single variable:
+ *
+ *   :root { --border-width: 2px; }   ← chunky brutalist mode
+ *   :root { --border-width: 1px; }   ← default
+ *   :root { --border-width: 0.5px; } ← hairline
+ *
+ * In Tailwind, reference it with the arbitrary-length syntax:
+ *   border-[length:var(--border-width)]
+ *   border-t-[length:var(--border-width)]  etc.
+ *
+ * BORDER RADIUS
+ * ──────────────
+ * All dockets components use `--radius` instead of hardcoded values.
+ * Default is `0px` (brutalist). To soften edges:
+ *
+ *   :root { --radius: 4px; }   ← subtle rounding
+ *   :root { --radius: 8px; }   ← soft
+ *   :root { --radius: 0px; }   ← default (sharp corners)
+ *
+ * In Tailwind, reference it with:
+ *   rounded-[var(--radius)]
+ *
+ * NO COLOUR TRANSITIONS
+ * ──────────────────────
+ * Dockets components must NEVER use `transition-colors`,
+ * `transition-[background]`, or any property that animates colour changes.
+ * Hover/focus state changes are instant — no fade, no easing.
+ * Only structural transitions are allowed (e.g. `transition-transform`
+ * for sliding, `transition-[width]` for collapsing panels).
+ *
+ * "BORDERS NEVER STACK" RULE
+ * ───────────────────────────
+ * Adjacent components must never produce double borders. Enforce this with:
+ *
+ *   • List/stack items:  `border-b-[length:var(--border-width)] [&:last-child]:border-b-0`
+ *     on items, `border-[length:var(--border-width)]` on the container.
+ *
+ *   • Newspaper grid:   Container gets `border-t-[length:var(--border-width)] border-l-[length:var(--border-width)]`.
+ *     Cells get `border-b-[length:var(--border-width)] border-r-[length:var(--border-width)]`.
+ *     Result: every cell has exactly one border per side, no stacking.
+ *
+ *   • Tab triggers:     Use `[&:not(:first-child)]:border-l-[length:var(--border-width)]`
+ *     so only the separator between tabs is drawn once.
+ *
+ * SPACING SCALE
+ * ─────────────
+ * Dockets uses Tailwind's default spacing scale (1 = 4px, 2 = 8px, …).
+ * Custom named tokens are provided below for macro-level layout spacing.
+ *
+ *   --space-layout-sm   → tight sections / modals
+ *   --space-layout-md   → standard page sections
+ *   --space-layout-lg   → generous hero/landing sections
+ *
+ * RECEIPT AESTHETIC VARS
+ * ───────────────────────
+ * Legacy vars used by ReceiptCard and CodeBlock are kept for compatibility:
+ *   --border-color   (maps to your theme's border colour)
+ *   --receipt-bg     (maps to your theme's card background)
+ *   --bg-color       (maps to your theme's page background)
+ *   --text-color     (maps to your theme's foreground)
+ */
+
+@layer base {
+  :root {
+    /* ── Border width ──────────────────────────────── */
+    --border-width: 1px;
+
+    /* ── Border radius ─────────────────────────────── */
+    --radius: 0px;
+
+    /* ── Spacing (macro layout) ────────────────────── */
+    --space-layout-sm: 1.5rem;   /* 24px */
+    --space-layout-md: 3rem;     /* 48px */
+    --space-layout-lg: 6rem;     /* 96px */
+
+    /* ── Spacing scale aliases ─────────────────────── */
+    --space-1: 0.25rem;
+    --space-2: 0.5rem;
+    --space-3: 0.75rem;
+    --space-4: 1rem;
+    --space-5: 1.25rem;
+    --space-6: 1.5rem;
+    --space-7: 1.75rem;
+    --space-8: 2rem;
+
+    /* ── Receipt aesthetic (legacy compat) ─────────── */
+    --border-color: hsl(var(--border));
+    --receipt-bg:   hsl(var(--card));
+    --bg-color:     hsl(var(--background));
+    --text-color:   hsl(var(--foreground));
+  }
+}

package/templates/switch.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react'
+import { Switch } from '@/components/ui/switch'
+import { Label } from '@/components/ui/label'
+import { cn } from '@/lib/utils'
+
+export interface SwitchFieldProps {
+	id?: string
+	label?: React.ReactNode
+	description?: string
+	checked?: boolean
+	defaultChecked?: boolean
+	onCheckedChange?: (checked: boolean) => void
+	disabled?: boolean
+	className?: string
+}
+
+function SwitchField({
+	id,
+	label,
+	description,
+	checked,
+	defaultChecked,
+	onCheckedChange,
+	disabled,
+	className,
+}: SwitchFieldProps) {
+	const fieldId = id ?? React.useId()
+	return (
+		<div className={cn('flex items-center justify-between gap-4', className)}>
+			{label && (
+				<div className="grid gap-0.5">
+					<Label htmlFor={fieldId}>{label}</Label>
+					{description && (
+						<p className="text-xs/relaxed text-muted-foreground">{description}</p>
+					)}
+				</div>
+			)}
+			<Switch
+				id={fieldId}
+				checked={checked}
+				defaultChecked={defaultChecked}
+				onCheckedChange={onCheckedChange}
+				disabled={disabled}
+			/>
+		</div>
+	)
+}
+
+export { SwitchField, Switch }

package/templates/table.tsx

@@ -0,0 +1,73 @@
+import * as React from 'react'
+import {
+	Table,
+	TableHeader,
+	TableBody,
+	TableFooter,
+	TableRow,
+	TableHead,
+	TableCell,
+	TableCaption,
+} from '@/components/ui/table'
+
+export interface Column<T> {
+	key: keyof T | string
+	header: string
+	cell?: (row: T) => React.ReactNode
+	align?: 'left' | 'center' | 'right'
+}
+
+export interface DataTableProps<T> {
+	columns: Column<T>[]
+	data: T[]
+	caption?: string
+	keyField?: keyof T
+}
+
+function DataTable<T extends Record<string, unknown>>({
+	columns,
+	data,
+	caption,
+	keyField,
+}: DataTableProps<T>) {
+	return (
+		<Table>
+			{caption && <TableCaption>{caption}</TableCaption>}
+			<TableHeader>
+				<TableRow>
+					{columns.map((col) => (
+						<TableHead
+							key={String(col.key)}
+							style={{ textAlign: col.align ?? 'left' }}
+						>
+							{col.header}
+						</TableHead>
+					))}
+				</TableRow>
+			</TableHeader>
+			<TableBody>
+				{data.map((row, i) => (
+					<TableRow key={keyField ? String(row[keyField as string]) : i}>
+						{columns.map((col) => (
+							<TableCell key={String(col.key)} style={{ textAlign: col.align ?? 'left' }}>
+								{col.cell ? col.cell(row) : String(row[col.key as string] ?? '')}
+							</TableCell>
+						))}
+					</TableRow>
+				))}
+			</TableBody>
+		</Table>
+	)
+}
+
+export {
+	DataTable,
+	Table,
+	TableHeader,
+	TableBody,
+	TableFooter,
+	TableRow,
+	TableHead,
+	TableCell,
+	TableCaption,
+}

package/templates/tabs.tsx

@@ -0,0 +1,61 @@
+import type { Tabs as TabsPrimitiveBase } from '@base-ui/react/tabs'
+import type * as React from 'react'
+
+import {
+	TabsContent,
+	TabsList,
+	Tabs as TabsPrimitive,
+	TabsTrigger,
+	tabsListVariants,
+} from '@/components/ui/tabs'
+
+export interface TabItemData {
+	value: string
+	label: React.ReactNode
+	content: React.ReactNode
+	disabled?: boolean
+}
+
+export interface TabsProps extends Omit<TabsPrimitiveBase.Root.Props, 'children'> {
+	items?: TabItemData[]
+	variant?: 'default' | 'line'
+	className?: string
+	listClassName?: string
+	children?: React.ReactNode
+}
+
+function Tabs({
+	items,
+	variant = 'default',
+	className,
+	listClassName,
+	children,
+	...tabsProps
+}: TabsProps) {
+	if (items) {
+		return (
+			<TabsPrimitive className={className} {...tabsProps}>
+				<TabsList variant={variant} className={listClassName}>
+					{items.map((item) => (
+						<TabsTrigger key={item.value} value={item.value} disabled={item.disabled}>
+							{item.label}
+						</TabsTrigger>
+					))}
+				</TabsList>
+				{items.map((item) => (
+					<TabsContent key={item.value} value={item.value}>
+						{item.content}
+					</TabsContent>
+				))}
+			</TabsPrimitive>
+		)
+	}
+
+	return (
+		<TabsPrimitive className={className} {...tabsProps}>
+			{children}
+		</TabsPrimitive>
+	)
+}
+
+export { Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants }

package/templates/theme-toggle.tsx

@@ -0,0 +1,46 @@
+import { useEffect, useState } from 'react'
+import { Button } from '@/components/button'
+
+type Theme = 'light' | 'dark' | 'deep'
+
+const themes: Theme[] = ['light', 'dark', 'deep']
+
+const themeIcons: Record<Theme, string> = {
+	light: '☀︎',
+	dark: '☽',
+	deep: '✦',
+}
+
+export function ThemeToggle() {
+	const [theme, setTheme] = useState<Theme>('light')
+
+	useEffect(() => {
+		const saved = localStorage.getItem('theme') as Theme | null
+		if (saved && themes.includes(saved)) {
+			setTheme(saved)
+			document.documentElement.setAttribute('data-theme', saved)
+		}
+	}, [])
+
+	const cycleTheme = () => {
+		const currentIndex = themes.indexOf(theme)
+		const nextIndex = (currentIndex + 1) % themes.length
+		const newTheme = themes[nextIndex]
+		setTheme(newTheme)
+		localStorage.setItem('theme', newTheme)
+		document.documentElement.setAttribute('data-theme', newTheme)
+	}
+
+	return (
+		<Button
+			variant="ghost"
+			size="icon"
+			onClick={cycleTheme}
+			className="text-base"
+			aria-label={`Current theme: ${theme}. Click to switch theme.`}
+			title={`Switch theme (current: ${theme})`}
+		>
+			{themeIcons[theme]}
+		</Button>
+	)
+}

package/templates/toast.tsx

@@ -0,0 +1 @@
+export { ToastProvider, Toaster, Toast, useToast } from '@/components/ui/toast'

package/templates/toggle-group.tsx

@@ -0,0 +1 @@
+export { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'

package/templates/toggle.tsx

@@ -0,0 +1 @@
+export { Toggle, toggleVariants } from '@/components/ui/toggle'

package/templates/tooltip.tsx

@@ -0,0 +1,31 @@
+import type * as React from 'react'
+
+import {
+	TooltipContent,
+	Tooltip as TooltipPrimitive,
+	TooltipProvider,
+	TooltipTrigger,
+} from '@/components/ui/tooltip'
+
+export interface TooltipProps {
+	content: React.ReactNode
+	children: React.ReactNode
+	side?: 'top' | 'bottom' | 'left' | 'right'
+	align?: 'start' | 'center' | 'end'
+	className?: string
+}
+
+function Tooltip({ content, children, side = 'top', align = 'center', className }: TooltipProps) {
+	return (
+		<TooltipProvider delay={0}>
+			<TooltipPrimitive>
+				<TooltipTrigger>{children}</TooltipTrigger>
+				<TooltipContent side={side} align={align} className={className}>
+					{content}
+				</TooltipContent>
+			</TooltipPrimitive>
+		</TooltipProvider>
+	)
+}
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }

package/templates/tree-view.tsx

@@ -0,0 +1 @@
+export { TreeView } from '@/components/ui/tree-view'