@leitware/dockets 0.1.0

package/templates/combobox.tsx

@@ -0,0 +1,154 @@
+import type * as React from 'react'
+import { useRef, useState, useMemo } from 'react'
+import { XIcon } from 'lucide-react'
+
+import {
+	Combobox as ComboboxPrimitive,
+	ComboboxChipsInput,
+	ComboboxContent,
+	ComboboxEmpty,
+	ComboboxItem,
+	ComboboxList,
+} from '@/components/ui/combobox'
+import { cn } from '@/lib/utils'
+
+export interface ComboboxOption {
+	value: string
+	label: string
+	icon?: React.ReactNode
+	description?: string
+}
+
+export interface ComboboxProps {
+	options?: ComboboxOption[]
+	value?: string[]
+	onValueChange?: (ids: string[]) => void
+	placeholder?: string
+	emptyMessage?: string
+	label?: string
+	disabled?: boolean
+	className?: string
+	children?: React.ReactNode
+}
+
+function Combobox({
+	options,
+	value = [],
+	onValueChange,
+	placeholder = 'Search...',
+	emptyMessage = 'No results found.',
+	label,
+	disabled = false,
+	className,
+	children,
+}: ComboboxProps) {
+	const [inputValue, setInputValue] = useState('')
+	const anchorRef = useRef<HTMLDivElement>(null)
+
+	const optionsByValue = useMemo(() => {
+		const map = new Map<string, ComboboxOption>()
+		for (const opt of options ?? []) {
+			map.set(opt.value, opt)
+		}
+		return map
+	}, [options])
+
+	const filtered = useMemo(() => {
+		if (!options) return []
+		if (!inputValue) return options
+		const lower = inputValue.toLowerCase()
+		return options.filter(
+			(opt) =>
+				opt.label.toLowerCase().includes(lower) ||
+				opt.description?.toLowerCase().includes(lower),
+		)
+	}, [options, inputValue])
+
+	if (children) {
+		return (
+			<ComboboxPrimitive multiple disabled={disabled}>
+				{children}
+			</ComboboxPrimitive>
+		)
+	}
+
+	const removeValue = (v: string) => {
+		onValueChange?.(value.filter((x) => x !== v))
+	}
+
+	return (
+		<div className={cn('flex flex-col gap-1', className)}>
+			{label && (
+				<span className="text-xs font-medium uppercase tracking-wider">
+					{label}
+				</span>
+			)}
+			<ComboboxPrimitive
+				multiple
+				value={value}
+				onValueChange={(val) => onValueChange?.(val as string[])}
+				disabled={disabled}
+			>
+				{/* Selected chips + inline search input */}
+				<div ref={anchorRef} className="flex min-h-8 flex-wrap items-center gap-1 border border-input bg-transparent px-2.5 py-1 text-xs">
+					{value.map((v) => {
+						const opt = optionsByValue.get(v)
+						return (
+							<span
+								key={v}
+								className="flex items-center gap-1 bg-muted px-1.5 py-0.5 text-xs font-medium whitespace-nowrap"
+							>
+								{opt?.icon && <span className="shrink-0">{opt.icon}</span>}
+								{opt?.label ?? v}
+								<button
+									type="button"
+									onClick={(e) => {
+										e.stopPropagation()
+										removeValue(v)
+									}}
+									className="opacity-50 hover:opacity-100 cursor-pointer bg-transparent border-none p-0"
+									aria-label={`Remove ${opt?.label ?? v}`}
+								>
+									<XIcon className="w-3 h-3" />
+								</button>
+							</span>
+						)
+					})}
+					<ComboboxChipsInput
+						placeholder={value.length === 0 ? placeholder : ''}
+						value={inputValue}
+						onChange={(e: React.ChangeEvent<HTMLInputElement>) => setInputValue(e.target.value)}
+					/>
+				</div>
+				<ComboboxContent anchor={anchorRef}>
+					<ComboboxList>
+						{filtered.map((opt) => (
+							<ComboboxItem key={opt.value} value={opt.value}>
+								{opt.icon && (
+									<span className="shrink-0">{opt.icon}</span>
+								)}
+								<span className="flex-1 min-w-0">
+									<span className="text-xs">{opt.label}</span>
+									{opt.description && (
+										<span className="block text-[10px] text-muted-foreground">
+											{opt.description}
+										</span>
+									)}
+								</span>
+							</ComboboxItem>
+						))}
+					</ComboboxList>
+					<ComboboxEmpty>{emptyMessage}</ComboboxEmpty>
+				</ComboboxContent>
+			</ComboboxPrimitive>
+		</div>
+	)
+}
+
+export {
+	Combobox,
+	ComboboxContent,
+	ComboboxEmpty,
+	ComboboxItem,
+	ComboboxList,
+}

package/templates/command.tsx

@@ -0,0 +1,50 @@
+'use client'
+
+import * as React from 'react'
+import {
+	Command,
+	CommandInput,
+	CommandList,
+	CommandEmpty,
+	CommandGroup,
+	CommandItem,
+	CommandSeparator,
+	CommandShortcut,
+} from '@/components/ui/command'
+import { Dialog as DialogPrimitive } from '@base-ui/react/dialog'
+import { cn } from '@/lib/utils'
+
+function CommandDialog({
+	open,
+	onOpenChange,
+	children,
+}: {
+	open?: boolean
+	onOpenChange?: (open: boolean) => void
+	children?: React.ReactNode
+}) {
+	return (
+		<DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>
+			<DialogPrimitive.Portal>
+				<DialogPrimitive.Backdrop className="fixed inset-0 z-50 bg-black/10 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0" />
+				<DialogPrimitive.Popup className="fixed top-[20%] left-1/2 z-50 w-full max-w-lg -translate-x-1/2 rounded-[var(--radius)] border-[length:var(--border-width)] border-foreground bg-popover text-popover-foreground shadow-none outline-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95">
+					<Command className="border-0">
+						{children}
+					</Command>
+				</DialogPrimitive.Popup>
+			</DialogPrimitive.Portal>
+		</DialogPrimitive.Root>
+	)
+}
+
+export {
+	Command,
+	CommandDialog,
+	CommandInput,
+	CommandList,
+	CommandEmpty,
+	CommandGroup,
+	CommandItem,
+	CommandSeparator,
+	CommandShortcut,
+}

package/templates/contact-footer.tsx

@@ -0,0 +1,193 @@
+import { useMutation } from 'convex/react'
+import { Check } from 'lucide-react'
+import { BlockLoader } from '@/components/block-loader'
+import { useState } from 'react'
+import { FormInput } from '@/components/form-input'
+import { Button } from '@/components/button'
+import { CAL_LINK, COMPANY_EMAIL, COMPANY_PHONE } from '@/lib/constants'
+import { api } from '../../convex/_generated/api'
+
+interface ContactFooterProps {
+	/**
+	 * Override the Cal.com booking link
+	 * @default CAL_LINK
+	 */
+	calLink?: string
+}
+
+export function ReceiptDivider() {
+	return (
+		<div className="text-xs my-3 tracking-[-1px] h-[1em] relative text-center overflow-hidden">
+			<span className="absolute left-1/2 top-0 -translate-x-1/2 whitespace-nowrap tracking-[-1px]">
+				..................................................
+			</span>
+		</div>
+	)
+}
+
+export function SectionHeader({ children }: { children: React.ReactNode }) {
+	return (
+		<div className="text-[11px] font-bold mb-2 text-center py-[3px] border-t border-b bg-[var(--border-color)] text-[var(--receipt-bg)]">
+			{children}
+		</div>
+	)
+}
+
+export function ContactFooter({ calLink = CAL_LINK }: ContactFooterProps) {
+	return (
+		<footer className="mt-12 max-w-[1152px] mx-auto px-6">
+			<div className="bg-[var(--receipt-bg)] border border-b-0">
+				<div className="max-w-[576px] mx-auto px-6 pt-6 pb-12">
+					<div className="text-center h-12 mb-3">
+						<div className="text-base font-bold mb-1"># CONTACT</div>
+						<div className="text-xs uppercase">request follow up</div>
+						<div className="text-[10px] text-[var(--muted-color)] mt-0.5 h-4">
+							or{' '}
+							<a href={calLink} className="underline">
+								book a call instead
+							</a>
+						</div>
+					</div>
+
+					<ReceiptDivider />
+
+					<SectionHeader>YOUR DETAILS</SectionHeader>
+
+					<FollowUpForm calLink={calLink} />
+
+					<div className="mt-6">
+						<ReceiptDivider />
+					</div>
+
+					<div className="text-center pt-4 text-[11px]">
+						<div className="mb-4">Thank You</div>
+							<div className="text-[var(--muted-color)] text-[10px] uppercase mb-1">
+							© {new Date().getFullYear()} LEITWARE
+						</div>
+						<div className="text-[var(--muted-color)] text-[10px] mb-1">
+							<a href={`mailto:${COMPANY_EMAIL}`} className="no-underline hover:underline">
+								{COMPANY_EMAIL}
+							</a>
+						</div>
+						<div className="text-[var(--muted-color)] text-[10px] mb-2">
+							<a href={`tel:${COMPANY_PHONE}`} className="no-underline hover:underline">
+								+44 778 004 2494
+							</a>
+						</div>
+						<div className="flex gap-4 justify-center">
+							<a
+								href="/terms-and-conditions"
+								className="text-[var(--muted-color)] text-[10px] uppercase no-underline hover:underline"
+							>
+								Terms &amp; Conditions
+							</a>
+							<a
+								href="/privacy"
+								className="text-[var(--muted-color)] text-[10px] uppercase no-underline hover:underline"
+							>
+								Privacy Policy
+							</a>
+						</div>
+					</div>
+				</div>
+			</div>
+		</footer>
+	)
+}
+
+function FollowUpForm({ calLink = CAL_LINK }: { calLink?: string }) {
+	const submitFollowUp = useMutation(api.myFunctions.submitFollowUp)
+	const [isSubmitting, setIsSubmitting] = useState(false)
+	const [isSubmitted, setIsSubmitted] = useState(false)
+	const [error, setError] = useState<string | null>(null)
+
+	const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+		e.preventDefault()
+		setIsSubmitting(true)
+		setError(null)
+
+		const formData = new FormData(e.currentTarget)
+
+		try {
+			await submitFollowUp({
+				email: formData.get('email') as string,
+				name: formData.get('name') as string,
+				companyName: formData.get('companyName') as string,
+				website: (formData.get('website') as string) || undefined,
+				useCases: formData.get('useCases') as string,
+				otherDetails: (formData.get('otherDetails') as string) || undefined,
+			})
+			setIsSubmitted(true)
+		} catch {
+			setError('Something went wrong. Please try again.')
+		} finally {
+			setIsSubmitting(false)
+		}
+	}
+
+	if (isSubmitted) {
+		return (
+			<div className="text-center py-8">
+				<Check className="w-6 h-6 mx-auto mb-3" />
+				<div className="font-bold uppercase text-xs">Received!</div>
+				<div className="text-[var(--muted-color)] text-[11px] mt-1">We'll be in touch soon.</div>
+			</div>
+		)
+	}
+
+	return (
+		<form onSubmit={handleSubmit}>
+			<div className="grid grid-cols-2 gap-3 mb-3">
+				<FormInput label="Name" required name="name" autoComplete="name" />
+				<FormInput label="Email" required name="email" type="email" autoComplete="email" />
+			</div>
+			<div className="grid grid-cols-2 gap-3 mb-3">
+				<FormInput label="Company" required name="companyName" autoComplete="organization" />
+				<FormInput label="Website" name="website" type="url" placeholder="https://..." autoComplete="url" />
+			</div>
+			<div className="mb-3">
+				<label htmlFor="useCases" className="text-xs font-medium uppercase tracking-wider">
+					What do you want to automate?<span className="text-destructive ml-0.5">*</span>
+				</label>
+				<textarea
+					id="useCases"
+					name="useCases"
+					required
+					rows={3}
+					className="w-full p-2 text-xs border bg-[var(--receipt-bg)] text-[var(--text-color)] resize-none mt-1"
+				/>
+			</div>
+			<div className="mb-4">
+				<label htmlFor="otherDetails" className="text-xs font-medium uppercase tracking-wider">
+					Other Details
+				</label>
+				<textarea
+					id="otherDetails"
+					name="otherDetails"
+					rows={2}
+					className="w-full p-2 text-xs border bg-[var(--receipt-bg)] text-[var(--text-color)] resize-none mt-1"
+				/>
+			</div>
+			{error && <p className="text-[11px] text-destructive mb-3">{error}</p>}
+			<Button type="submit" disabled={isSubmitting} className="w-full">
+				{isSubmitting ? (
+					<>
+						<BlockLoader />
+						Processing...
+					</>
+				) : (
+					'Request Follow Up'
+				)}
+			</Button>
+			<div className="text-center mt-3">
+				<Button
+					render={<a href={calLink} />}
+					variant="link"
+					className="text-[10px] text-muted-foreground"
+				>
+					or book a call instead →
+				</Button>
+			</div>
+		</form>
+	)
+}

package/templates/context-menu.tsx

@@ -0,0 +1,16 @@
+export {
+	ContextMenu,
+	ContextMenuTrigger,
+	ContextMenuPortal,
+	ContextMenuContent,
+	ContextMenuItem,
+	ContextMenuCheckboxItem,
+	ContextMenuRadioGroup,
+	ContextMenuRadioItem,
+	ContextMenuLabel,
+	ContextMenuSeparator,
+	ContextMenuShortcut,
+	ContextMenuSub,
+	ContextMenuSubTrigger,
+	ContextMenuSubContent,
+} from '@/components/ui/context-menu'

package/templates/dialog.tsx

@@ -0,0 +1,67 @@
+import type { Dialog as DialogPrimitiveBase } from '@base-ui/react/dialog'
+import type * as React from 'react'
+
+import {
+	DialogClose,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	Dialog as DialogPrimitive,
+	DialogTitle,
+	DialogTrigger,
+} from '@/components/ui/dialog'
+
+export interface DialogProps extends DialogPrimitiveBase.Root.Props {
+	trigger?: React.ReactNode
+	title?: React.ReactNode
+	description?: React.ReactNode
+	footer?: React.ReactNode
+	showCloseButton?: boolean
+	contentClassName?: string
+	children?: React.ReactNode
+}
+
+function Dialog({
+	trigger,
+	title,
+	description,
+	footer,
+	showCloseButton = true,
+	contentClassName,
+	children,
+	...dialogProps
+}: DialogProps) {
+	// Opinionated API: trigger + title + description + content + footer
+	if (trigger || title) {
+		return (
+			<DialogPrimitive {...dialogProps}>
+				{trigger && <DialogTrigger>{trigger}</DialogTrigger>}
+				<DialogContent showCloseButton={showCloseButton} className={contentClassName}>
+					{(title || description) && (
+						<DialogHeader>
+							{title && <DialogTitle>{title}</DialogTitle>}
+							{description && <DialogDescription>{description}</DialogDescription>}
+						</DialogHeader>
+					)}
+					{children}
+					{footer && <DialogFooter>{footer}</DialogFooter>}
+				</DialogContent>
+			</DialogPrimitive>
+		)
+	}
+
+	// Fallback: children-based composition
+	return <DialogPrimitive {...dialogProps}>{children}</DialogPrimitive>
+}
+
+export {
+	Dialog,
+	DialogClose,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+}

package/templates/drawer.tsx

@@ -0,0 +1,12 @@
+export {
+	Drawer,
+	DrawerTrigger,
+	DrawerClose,
+	DrawerPortal,
+	DrawerOverlay,
+	DrawerContent,
+	DrawerHeader,
+	DrawerFooter,
+	DrawerTitle,
+	DrawerDescription,
+} from '@/components/ui/drawer'

package/templates/dropdown-menu.tsx

@@ -0,0 +1,95 @@
+import type { Menu as MenuPrimitiveBase } from '@base-ui/react/menu'
+import type * as React from 'react'
+
+import {
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenu as DropdownMenuPrimitive,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+
+export interface DropdownMenuItemData {
+	label: React.ReactNode
+	onClick?: () => void
+	icon?: React.ReactNode
+	variant?: 'default' | 'destructive'
+	disabled?: boolean
+	separator?: false
+}
+
+export interface DropdownMenuSeparatorData {
+	separator: true
+}
+
+export type DropdownMenuEntry = DropdownMenuItemData | DropdownMenuSeparatorData
+
+export interface DropdownMenuProps {
+	trigger: React.ReactNode
+	items?: DropdownMenuEntry[]
+	align?: 'start' | 'center' | 'end'
+	side?: 'top' | 'bottom' | 'left' | 'right'
+	contentClassName?: string
+	children?: React.ReactNode
+	open?: boolean
+	onOpenChange?: (open: boolean) => void
+}
+
+function DropdownMenu({
+	trigger,
+	items,
+	align = 'start',
+	side = 'bottom',
+	contentClassName,
+	children,
+	open,
+	onOpenChange,
+}: DropdownMenuProps) {
+	const rootProps: MenuPrimitiveBase.Root.Props = {}
+	if (open !== undefined) rootProps.open = open
+	if (onOpenChange !== undefined) rootProps.onOpenChange = onOpenChange
+
+	if (items) {
+		return (
+			<DropdownMenuPrimitive {...rootProps}>
+				<DropdownMenuTrigger>{trigger}</DropdownMenuTrigger>
+				<DropdownMenuContent align={align} side={side} className={contentClassName}>
+					{items.map((entry, i) => {
+						if (entry.separator) {
+							return <DropdownMenuSeparator key={`sep-${i}`} />
+						}
+						return (
+							<DropdownMenuItem
+								key={`item-${i}`}
+								onSelect={entry.onClick}
+								variant={entry.variant}
+								disabled={entry.disabled}
+							>
+								{entry.icon}
+								{entry.label}
+							</DropdownMenuItem>
+						)
+					})}
+				</DropdownMenuContent>
+			</DropdownMenuPrimitive>
+		)
+	}
+
+	return (
+		<DropdownMenuPrimitive {...rootProps}>
+			<DropdownMenuTrigger>{trigger}</DropdownMenuTrigger>
+			<DropdownMenuContent align={align} side={side} className={contentClassName}>
+				{children}
+			</DropdownMenuContent>
+		</DropdownMenuPrimitive>
+	)
+}
+
+// Re-export sub-components for advanced use
+export {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+}

package/templates/form-input.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react'
+
+import { Input } from '@/components/ui/input'
+import { cn } from '@/lib/utils'
+
+export interface FormInputProps extends Omit<React.ComponentProps<'input'>, 'size'> {
+	label?: string
+	description?: string
+	error?: string
+	disabled?: boolean
+	required?: boolean
+	className?: string
+}
+
+function FormInput({
+	label,
+	description,
+	error,
+	disabled = false,
+	required = false,
+	className,
+	id,
+	...inputProps
+}: FormInputProps) {
+	const generatedId = React.useId()
+	const inputId = id || generatedId
+	const hasError = Boolean(error)
+
+	return (
+		<div className={cn('flex flex-col gap-1', className)} data-invalid={hasError || undefined}>
+			{label && (
+				<label htmlFor={inputId} className="text-xs font-medium uppercase tracking-wider">
+					{label}
+					{required && <span className="text-destructive ml-0.5">*</span>}
+				</label>
+			)}
+			<Input
+				{...inputProps}
+				id={inputId}
+				disabled={disabled}
+				required={required}
+				aria-invalid={hasError}
+				aria-required={required}
+				aria-describedby={
+					[description ? `${inputId}-desc` : null, error ? `${inputId}-error` : null]
+						.filter(Boolean)
+						.join(' ') || undefined
+				}
+			/>
+			{description && (
+				<p id={`${inputId}-desc`} className="text-[10px] text-muted-foreground">
+					{description}
+				</p>
+			)}
+			{error && (
+				<p id={`${inputId}-error`} className="text-[10px] text-destructive">
+					{error}
+				</p>
+			)}
+		</div>
+	)
+}
+
+export { FormInput }

package/templates/form.tsx

@@ -0,0 +1,10 @@
+export {
+	Form,
+	FormField,
+	FormLabel,
+	FormControl,
+	FormDescription,
+	FormMessage,
+	FormItem,
+	useFormField,
+} from '@/components/ui/form'

package/templates/hover-card.tsx

@@ -0,0 +1,5 @@
+export {
+	HoverCard,
+	HoverCardTrigger,
+	HoverCardContent,
+} from '@/components/ui/hover-card'

package/templates/input-otp.tsx

@@ -0,0 +1,6 @@
+export {
+	InputOTP,
+	InputOTPGroup,
+	InputOTPSlot,
+	InputOTPSeparator,
+} from '@/components/ui/input-otp'

package/templates/label.tsx

@@ -0,0 +1 @@
+export { Label } from '@/components/ui/label'

package/templates/layout-primitives.tsx

@@ -0,0 +1,11 @@
+export {
+	Container,
+	Section,
+	Stack,
+	Row,
+	Spacer,
+	Divider,
+	Grid,
+	BentoGrid,
+	BentoCell,
+} from '@/components/ui/layout'