@leitware/dockets 0.1.0

package/templates/pagination.tsx

@@ -0,0 +1,86 @@
+import * as React from 'react'
+import {
+	Pagination,
+	PaginationContent,
+	PaginationItem,
+	PaginationLink,
+	PaginationPrevious,
+	PaginationNext,
+	PaginationEllipsis,
+} from '@/components/ui/pagination'
+
+export interface SimplePaginationProps {
+	page: number
+	totalPages: number
+	onPageChange?: (page: number) => void
+	className?: string
+}
+
+function SimplePagination({ page, totalPages, onPageChange, className }: SimplePaginationProps) {
+	const pages = Array.from({ length: totalPages }, (_, i) => i + 1)
+	const showEllipsisStart = page > 4
+	const showEllipsisEnd = page < totalPages - 3
+
+	const visiblePages = showEllipsisStart || showEllipsisEnd
+		? [
+				1,
+				...(showEllipsisStart ? [] : [2, 3]),
+				...(showEllipsisStart ? ['ellipsis-start'] : []),
+				...(page > 2 && page < totalPages - 1 ? [page - 1, page, page + 1] : []),
+				...(showEllipsisEnd ? ['ellipsis-end'] : []),
+				...(showEllipsisEnd ? [] : [totalPages - 2, totalPages - 1]),
+				totalPages,
+		  ].filter((v, i, arr) => arr.indexOf(v) === i)
+		: pages
+
+	return (
+		<Pagination className={className}>
+			<PaginationContent>
+				<PaginationItem>
+					<PaginationPrevious
+						href="#"
+						onClick={(e) => { e.preventDefault(); page > 1 && onPageChange?.(page - 1) }}
+						aria-disabled={page <= 1}
+						disabled={page <= 1}
+					/>
+				</PaginationItem>
+				{visiblePages.map((p, i) =>
+					typeof p === 'string' ? (
+						<PaginationItem key={p}>
+							<PaginationEllipsis />
+						</PaginationItem>
+					) : (
+						<PaginationItem key={p}>
+							<PaginationLink
+								href="#"
+								isActive={p === page}
+								onClick={(e) => { e.preventDefault(); onPageChange?.(p) }}
+							>
+								{p}
+							</PaginationLink>
+						</PaginationItem>
+					),
+				)}
+				<PaginationItem>
+					<PaginationNext
+						href="#"
+						onClick={(e) => { e.preventDefault(); page < totalPages && onPageChange?.(page + 1) }}
+						aria-disabled={page >= totalPages}
+						disabled={page >= totalPages}
+					/>
+				</PaginationItem>
+			</PaginationContent>
+		</Pagination>
+	)
+}
+
+export {
+	SimplePagination as Pagination,
+	PaginationContent,
+	PaginationItem,
+	PaginationLink,
+	PaginationPrevious,
+	PaginationNext,
+	PaginationEllipsis,
+}
+export { Pagination as PaginationRoot } from '@/components/ui/pagination'

package/templates/popover.tsx

@@ -0,0 +1,8 @@
+export {
+	Popover,
+	PopoverTrigger,
+	PopoverPortal,
+	PopoverClose,
+	PopoverContent,
+	PopoverArrow,
+} from '@/components/ui/popover'

package/templates/pricing-receipt.tsx

@@ -0,0 +1,71 @@
+import { ReceiptDivider, SectionHeader } from './contact-footer'
+
+export interface PricingProduct {
+	id: string
+	orderNum: string
+	title: string
+	subtitle?: string
+	items: { name: string; value: string }[]
+	total: string
+	cta: string
+	link: string
+	learnMoreLink?: string
+}
+
+interface PricingReceiptProps {
+	product: PricingProduct
+}
+
+export function PricingReceipt({ product }: PricingReceiptProps) {
+	return (
+		<div className="bg-[var(--receipt-bg)] border w-full min-w-[288px] max-w-[336px] flex-1 p-6 text-sm leading-tight">
+			{/* Header */}
+			<div className="text-center h-12 mb-3">
+				<div className="text-base font-bold mb-1"># {product.orderNum}</div>
+				<div className="text-xs uppercase">{product.title}</div>
+				<div className="text-[10px] text-[var(--muted-color)] mt-0.5 h-4">
+					{product.subtitle || '\u00A0'}
+				</div>
+			</div>
+
+			<ReceiptDivider />
+
+			<SectionHeader>INCLUDES</SectionHeader>
+
+			{/* Items */}
+			<div className="h-24 mb-4">
+				{product.items.map((item) => (
+					<div key={item.name} className="flex justify-between items-start mb-px text-xs">
+						<span className="flex-1 uppercase break-words">{item.name}</span>
+						<span className="min-w-[72px] text-right shrink-0">{item.value}</span>
+					</div>
+				))}
+			</div>
+
+			<ReceiptDivider />
+
+			{/* Total */}
+			<div className="h-6 mb-4">
+				<div className="flex justify-between text-xs mb-0.5">
+					<span>TOTAL:</span>
+					<span>{product.total}</span>
+				</div>
+			</div>
+
+			{/* CTA */}
+			<a
+				href={product.link}
+				className="inline-flex items-center justify-center gap-2 px-6 py-3 text-[11px] uppercase tracking-wide border bg-[var(--border-color)] text-[var(--receipt-bg)] no-underline cursor-pointer w-full text-center"
+			>
+				{product.cta}
+			</a>
+
+			{/* Footer */}
+			<div className="text-center h-6 pt-4 text-[11px]">
+				<a href={product.learnMoreLink || product.link} className="text-[11px] no-underline lowercase">
+					learn more
+				</a>
+			</div>
+		</div>
+	)
+}

package/templates/pricing-tabs.tsx

@@ -0,0 +1,60 @@
+import { useState } from 'react'
+import { type PricingProduct, PricingReceipt } from './pricing-receipt'
+import { Button } from '@/components/button'
+
+interface PricingTabsProps {
+	catchUpProducts: PricingProduct[]
+	keepUpProducts: PricingProduct[]
+	catchUpDescription?: string
+	keepUpDescription?: string
+	footer?: React.ReactNode
+}
+
+export function PricingTabs({
+	catchUpProducts,
+	keepUpProducts,
+	catchUpDescription = 'One-time projects · Get set up and running',
+	keepUpDescription = 'Monthly plans · Ongoing maintenance and support',
+	footer,
+}: PricingTabsProps) {
+	const [activeTab, setActiveTab] = useState<'catchup' | 'keepup'>('catchup')
+
+	return (
+		<>
+			{/* Tabs */}
+			<div className="flex justify-center mb-3 w-full max-w-[336px] mx-auto border border-solid border-foreground">
+				<Button
+					variant={activeTab === 'catchup' ? 'default' : 'secondary'}
+					className="flex-1 rounded-[var(--radius)]"
+					onClick={() => setActiveTab('catchup')}
+				>
+					Catch Up
+				</Button>
+				<Button
+					variant={activeTab === 'keepup' ? 'default' : 'secondary'}
+					className={`flex-1 rounded-[var(--radius)] border-l border-solid border-foreground`}
+					onClick={() => setActiveTab('keepup')}
+				>
+					Keep Up
+				</Button>
+			</div>
+
+			{/* Tab Description */}
+			<div className="text-center mb-8">
+				<p className="text-[var(--muted-color)] text-[11px]">
+					{activeTab === 'catchup' ? catchUpDescription : keepUpDescription}
+				</p>
+			</div>
+
+			{/* Receipts */}
+			<div className="flex flex-wrap gap-12 justify-center items-start">
+				{(activeTab === 'catchup' ? catchUpProducts : keepUpProducts).map((product) => (
+					<PricingReceipt key={product.id} product={product} />
+				))}
+			</div>
+
+			{/* Footer */}
+			{footer && <div className="text-center mt-8">{footer}</div>}
+		</>
+	)
+}

package/templates/progress.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react'
+import { Progress } from '@/components/ui/progress'
+import { cn } from '@/lib/utils'
+
+export interface LabelledProgressProps {
+	value?: number
+	max?: number
+	label?: string
+	showValue?: boolean
+	className?: string
+}
+
+function LabelledProgress({ value, max = 100, label, showValue = false, className }: LabelledProgressProps) {
+	const pct = value != null ? Math.round((value / max) * 100) : undefined
+	return (
+		<div className={cn('flex flex-col gap-1', className)}>
+			{(label || showValue) && (
+				<div className="flex items-center justify-between text-xs font-medium uppercase tracking-wider">
+					{label && <span>{label}</span>}
+					{showValue && <span className="text-muted-foreground">{pct != null ? `${pct}%` : '–'}</span>}
+				</div>
+			)}
+			<Progress value={value} max={max} />
+		</div>
+	)
+}
+
+export { LabelledProgress as Progress }
+export { Progress as ProgressRoot } from '@/components/ui/progress'

package/templates/radio-group.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react'
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
+import { Label } from '@/components/ui/label'
+import { cn } from '@/lib/utils'
+
+export interface RadioOption {
+	value: string
+	label: string
+	description?: string
+	disabled?: boolean
+}
+
+export interface RadioGroupFieldProps {
+	options: RadioOption[]
+	value?: string
+	defaultValue?: string
+	onValueChange?: (value: string) => void
+	className?: string
+	orientation?: 'horizontal' | 'vertical'
+}
+
+function RadioGroupField({
+	options,
+	value,
+	defaultValue,
+	onValueChange,
+	className,
+	orientation = 'vertical',
+}: RadioGroupFieldProps) {
+	return (
+		<RadioGroup
+			value={value}
+			defaultValue={defaultValue}
+			onValueChange={onValueChange}
+			className={cn(
+				orientation === 'horizontal' ? 'flex-row flex-wrap' : 'flex-col',
+				className,
+			)}
+		>
+			{options.map((opt) => {
+				const id = `radio-${opt.value}`
+				return (
+					<div key={opt.value} className="flex items-start gap-2">
+						<RadioGroupItem value={opt.value} id={id} disabled={opt.disabled} className="mt-0.5" />
+						<div className="grid gap-0.5">
+							<Label htmlFor={id}>{opt.label}</Label>
+							{opt.description && (
+								<p className="text-xs/relaxed text-muted-foreground">{opt.description}</p>
+							)}
+						</div>
+					</div>
+				)
+			})}
+		</RadioGroup>
+	)
+}
+
+export { RadioGroupField, RadioGroup, RadioGroupItem }

package/templates/receipt-card.tsx

@@ -0,0 +1 @@
+export { ReceiptCard } from '@/components/ui/receipt-card'

package/templates/receipt.tsx

@@ -0,0 +1,269 @@
+import { cn } from '@/lib/utils'
+
+// ─── DIVIDER ──────────────────────────────────────────────────────────────────
+
+type DividerVariant = 'dots' | 'dashes' | 'equals'
+
+export function Divider({
+	variant = 'dots',
+	className,
+}: {
+	variant?: DividerVariant
+	className?: string
+}) {
+	const chars: Record<DividerVariant, string> = {
+		dots: '.'.repeat(200),
+		dashes: '-'.repeat(200),
+		equals: '='.repeat(200),
+	}
+	return (
+		<div className={cn('text-xs my-2 h-[1em] w-full relative overflow-hidden', className)}>
+			<span className="absolute inset-x-0 whitespace-nowrap tracking-[-1px] text-[var(--border-color)] select-none">
+				{chars[variant]}
+			</span>
+		</div>
+	)
+}
+
+// ─── SECTION LABEL ────────────────────────────────────────────────────────────
+
+export function SectionLabel({
+	children,
+	variant = 'default',
+	className,
+}: {
+	children: React.ReactNode
+	variant?: 'default' | 'bordered'
+	className?: string
+}) {
+	return (
+		<div
+			className={cn(
+				'text-xs font-bold uppercase py-[3px] px-2 border-t border-b',
+				variant === 'default'
+					? 'bg-[var(--border-color)] text-[var(--receipt-bg)]'
+					: 'bg-transparent text-[var(--text-color)]',
+				className,
+			)}
+		>
+			{children}
+		</div>
+	)
+}
+
+// ─── ROW ──────────────────────────────────────────────────────────────────────
+
+export function Row({
+	label,
+	value,
+	fill = false,
+	bold = false,
+	className,
+}: {
+	label: string
+	value: string
+	fill?: boolean
+	bold?: boolean
+	className?: string
+}) {
+	return (
+		<div
+			className={cn(
+				'flex items-end text-xs gap-0',
+				bold && 'font-bold',
+				className,
+			)}
+		>
+			<span className="uppercase shrink-0">{label}</span>
+			{fill ? (
+				<>
+					<span
+						aria-hidden
+						className="flex-1 min-w-[2ch] overflow-hidden tracking-[-1px] whitespace-nowrap opacity-20 text-[var(--border-color)] select-none"
+					>
+						{'.'.repeat(200)}
+					</span>
+					<span className="shrink-0">{value}</span>
+				</>
+			) : (
+				<span className="flex-1 text-right">{value}</span>
+			)}
+		</div>
+	)
+}
+
+// ─── DATA TABLE ───────────────────────────────────────────────────────────────
+//
+// Column widths are in `ch` units (character widths), so columns snap to the
+// monospace grid. Omit `width` on a column to have it fill remaining space.
+//
+// Example:
+//   columns={[{ label: 'service', width: 24 }, { label: 'total', align: 'right' }]}
+
+export interface ColDef {
+	label: string
+	width?: number // ch units
+	align?: 'left' | 'right'
+}
+
+export function DataTable({
+	columns,
+	rows,
+	className,
+}: {
+	columns: ColDef[]
+	rows: (string | React.ReactNode)[][]
+	className?: string
+}) {
+	return (
+		<div className={cn('text-xs', className)}>
+			{/* Header row */}
+			<div className="flex border-b border-[var(--border-color)] pb-px mb-px">
+				{columns.map((col, i) => (
+					<span
+						key={i}
+						className={cn(
+							'uppercase shrink-0 text-[var(--muted-color)]',
+							!col.width && 'flex-1',
+							col.align === 'right' && 'text-right',
+						)}
+						style={col.width ? { width: `${col.width}ch` } : undefined}
+					>
+						{col.label}
+					</span>
+				))}
+			</div>
+			{/* Data rows */}
+			{rows.map((row, ri) => (
+				<div
+					key={ri}
+					className="flex border-b border-[var(--border-subtle)] py-px last:border-b-0"
+				>
+					{row.map((cell, ci) => {
+						const col = columns[ci]
+						return (
+							<span
+								key={ci}
+								className={cn(
+									'shrink-0',
+									!col?.width && 'flex-1',
+									col?.align === 'right' && 'text-right',
+								)}
+								style={col?.width ? { width: `${col.width}ch` } : undefined}
+							>
+								{cell}
+							</span>
+						)
+					})}
+				</div>
+			))}
+		</div>
+	)
+}
+
+// ─── GLYPH ────────────────────────────────────────────────────────────────────
+//
+// Fixed-size square containing a centred character. Size must be a multiple of
+// 8 or 16. `--radius-full` is 0 in this theme so the inner circle is set via
+// inline style (borderRadius: '50%') rather than a Tailwind class.
+//
+// Variants:
+//   default          bordered square, normal bg
+//   filled           inverted (black bg, light text)
+//   circle           light bg + filled circle behind character (white text)
+//   circle-inverted  black bg + light circle behind character (dark text)
+
+export type GlyphSize = 16 | 24 | 32 | 48 | 64 | 96
+export type GlyphVariant = 'default' | 'filled' | 'circle' | 'circle-inverted'
+
+const GLYPH_FONT: Record<GlyphSize, string> = {
+	16: 'text-[9px]',
+	24: 'text-[11px]',
+	32: 'text-xs',
+	48: 'text-base',
+	64: 'text-xl',
+	96: 'text-3xl',
+}
+
+export function Glyph({
+	children,
+	size = 48,
+	variant = 'default',
+	className,
+}: {
+	children: React.ReactNode
+	size?: GlyphSize
+	variant?: GlyphVariant
+	className?: string
+}) {
+	const circleDiameter = Math.round(size * 0.68)
+
+	return (
+		<div
+			className={cn(
+				'relative inline-flex items-center justify-center shrink-0 border font-bold select-none',
+				GLYPH_FONT[size],
+				variant === 'default' && 'bg-[var(--receipt-bg)] text-[var(--text-color)]',
+				variant === 'filled' && 'bg-[var(--border-color)] text-[var(--receipt-bg)]',
+				variant === 'circle' && 'bg-[var(--receipt-bg)]',
+				variant === 'circle-inverted' && 'bg-[var(--border-color)]',
+				className,
+			)}
+			style={{ width: size, height: size }}
+		>
+			{(variant === 'circle' || variant === 'circle-inverted') && (
+				<div
+					className={cn(
+						'absolute',
+						variant === 'circle' && 'bg-[var(--border-color)]',
+						variant === 'circle-inverted' && 'bg-[var(--receipt-bg)]',
+					)}
+					style={{ width: circleDiameter, height: circleDiameter, borderRadius: '50%' }}
+				/>
+			)}
+			<span
+				className={cn(
+					'relative',
+					variant === 'circle' && 'text-[var(--receipt-bg)]',
+					variant === 'circle-inverted' && 'text-[var(--text-color)]',
+					(variant === 'default' || variant === 'filled') && 'text-inherit',
+				)}
+			>
+				{children}
+			</span>
+		</div>
+	)
+}
+
+// ─── LEDGER ───────────────────────────────────────────────────────────────────
+//
+// A self-contained block: optional section label, key/value rows, divider, total.
+
+export function Ledger({
+	title,
+	rows,
+	total,
+	className,
+}: {
+	title?: string
+	rows: { label: string; value: string; fill?: boolean }[]
+	total?: { label: string; value: string }
+	className?: string
+}) {
+	return (
+		<div className={cn('text-xs', className)}>
+			{title && <SectionLabel>{title}</SectionLabel>}
+			<div className="py-2 space-y-px">
+				{rows.map((row, i) => (
+					<Row key={i} label={row.label} value={row.value} fill={row.fill} />
+				))}
+			</div>
+			{total && (
+				<>
+					<Divider variant="equals" />
+					<Row label={total.label} value={total.value} bold />
+				</>
+			)}
+		</div>
+	)
+}

package/templates/resizable.tsx

@@ -0,0 +1 @@
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@/components/ui/resizable'

package/templates/scroll-area.tsx

@@ -0,0 +1 @@
+export { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'

package/templates/select.tsx

@@ -0,0 +1,110 @@
+import type * as React from 'react'
+
+import {
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	Select as SelectPrimitive,
+	SelectTrigger,
+	SelectValue,
+} from '@/components/ui/select'
+import { cn } from '@/lib/utils'
+
+export interface SelectOptionData {
+	value: string
+	label: React.ReactNode
+	disabled?: boolean
+}
+
+export interface SelectGroupData {
+	label?: string
+	options: SelectOptionData[]
+}
+
+export interface SelectProps {
+	options?: SelectOptionData[]
+	groups?: SelectGroupData[]
+	placeholder?: string
+	label?: string
+	error?: string
+	disabled?: boolean
+	required?: boolean
+	className?: string
+	triggerClassName?: string
+	value?: string
+	defaultValue?: string
+	onValueChange?: (value: string) => void
+	children?: React.ReactNode
+}
+
+function Select({
+	options,
+	groups,
+	placeholder = 'Select...',
+	label,
+	error,
+	disabled = false,
+	required = false,
+	className,
+	triggerClassName,
+	value,
+	defaultValue,
+	onValueChange,
+	children,
+}: SelectProps) {
+	const hasError = Boolean(error)
+
+	const rootProps: Record<string, unknown> = { disabled }
+	if (value !== undefined) rootProps.value = value
+	if (defaultValue !== undefined) rootProps.defaultValue = defaultValue
+	if (onValueChange !== undefined) rootProps.onValueChange = onValueChange
+
+	const content = options ? (
+		<SelectContent>
+			{options.map((opt) => (
+				<SelectItem key={opt.value} value={opt.value} disabled={opt.disabled}>
+					{opt.label}
+				</SelectItem>
+			))}
+		</SelectContent>
+	) : groups ? (
+		<SelectContent>
+			{groups.map((group, i) => (
+				<SelectGroup key={`group-${i}`}>
+					{group.label && <SelectLabel>{group.label}</SelectLabel>}
+					{group.options.map((opt) => (
+						<SelectItem key={opt.value} value={opt.value} disabled={opt.disabled}>
+							{opt.label}
+						</SelectItem>
+					))}
+				</SelectGroup>
+			))}
+		</SelectContent>
+	) : null
+
+	return (
+		<div className={cn('flex flex-col gap-1', className)} data-invalid={hasError || undefined}>
+			{label && (
+				<span className="text-xs font-medium uppercase tracking-wider">
+					{label}
+					{required && <span className="text-destructive ml-0.5">*</span>}
+				</span>
+			)}
+			<SelectPrimitive {...rootProps}>
+				<SelectTrigger
+					className={triggerClassName}
+					aria-invalid={hasError}
+					aria-label={label || undefined}
+				>
+					<SelectValue placeholder={placeholder} />
+				</SelectTrigger>
+				{content}
+				{children}
+			</SelectPrimitive>
+			{error && <p className="text-[10px] text-destructive">{error}</p>}
+		</div>
+	)
+}
+
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue }