@leitware/dockets 0.1.0

package/templates/layouts.tsx

@@ -0,0 +1,346 @@
+import { cn } from '@/lib/utils'
+
+// ─── BORDER SYSTEM ────────────────────────────────────────────────────────────
+//
+// container: border border-[var(--border-color)] bg-[var(--border-color)] gap-px
+// cells:     bg-[var(--receipt-bg)]
+//
+// Gap IS the border. Never add `border` to cells (stacks).
+// Nested sub-grids: bg-[var(--border-color)] gap-px grid — no `border` on sub-containers.
+
+// ─── STAT CELL ────────────────────────────────────────────────────────────────
+//
+// Helper primitive used as a direct grid child in layout components.
+// Participates in the gap border system — no border of its own.
+
+export function StatCell({
+	label,
+	value,
+	large,
+}: {
+	label: string
+	value: string
+	large?: boolean
+}) {
+	return (
+		<div className="bg-[var(--receipt-bg)] p-4">
+			<div className="text-[10px] uppercase text-[var(--muted-color)] mb-1">{label}</div>
+			<div className={cn('font-bold', large ? 'text-xl' : 'text-xs')}>{value}</div>
+		</div>
+	)
+}
+
+// ─── BENTO SPLIT ──────────────────────────────────────────────────────────────
+//
+// icon (200px, row-span-2) | content + stats
+// Mobile: single column stack. Desktop: 200px icon col | 1fr content col.
+// Icon is first in DOM — spans 2 rows via md:row-span-2 so content + stats
+// auto-place into column 2.
+
+export function BentoSplit({
+	icon,
+	content,
+	stats,
+	className,
+}: {
+	icon: React.ReactNode
+	content: React.ReactNode
+	stats: React.ReactNode
+	className?: string
+}) {
+	return (
+		<div
+			className={cn(
+				'grid grid-cols-1 md:grid-cols-[200px_1fr]',
+				'border border-[var(--border-color)] bg-[var(--border-color)] gap-px',
+				className,
+			)}
+		>
+			{/* Icon — spans both rows on desktop */}
+			<div className="bg-[var(--receipt-bg)] flex items-center justify-center p-10 md:row-span-2">
+				{icon}
+			</div>
+			{/* Content — auto-places into col 2, row 1 */}
+			<div className="bg-[var(--receipt-bg)] p-4">{content}</div>
+			{/* Stats — auto-places into col 2, row 2 */}
+			<div>{stats}</div>
+		</div>
+	)
+}
+
+// ─── BENTO LEADER ─────────────────────────────────────────────────────────────
+//
+// Full-width header spanning all N columns, then N equal columns below.
+// Desktop column count from lookup — static strings for Tailwind JIT scanner.
+
+const LEADER_COLS: Record<2 | 3 | 4, string> = {
+	2: 'md:grid-cols-2',
+	3: 'md:grid-cols-3',
+	4: 'md:grid-cols-4',
+}
+
+export function BentoLeader({
+	header,
+	columns,
+	className,
+}: {
+	header: React.ReactNode
+	columns: React.ReactNode[]
+	className?: string
+}) {
+	const n = Math.min(Math.max(columns.length, 2), 4) as 2 | 3 | 4
+	return (
+		<div
+			className={cn(
+				'grid grid-cols-1',
+				LEADER_COLS[n],
+				'border border-[var(--border-color)] bg-[var(--border-color)] gap-px',
+				className,
+			)}
+		>
+			{/* Header spans all columns */}
+			<div className="bg-[var(--receipt-bg)] md:[grid-column:1/-1]">{header}</div>
+			{columns.map((col, i) => (
+				<div key={i} className="bg-[var(--receipt-bg)]">
+					{col}
+				</div>
+			))}
+		</div>
+	)
+}
+
+// ─── BENTO QUAD ───────────────────────────────────────────────────────────────
+//
+// 2×2 grid with 2fr | 1fr column ratio.
+// Cell wrappers provide bg-[var(--receipt-bg)] only — slots control their own padding.
+
+export function BentoQuad({
+	topLeft,
+	topRight,
+	bottomLeft,
+	bottomRight,
+	className,
+}: {
+	topLeft: React.ReactNode
+	topRight: React.ReactNode
+	bottomLeft: React.ReactNode
+	bottomRight: React.ReactNode
+	className?: string
+}) {
+	return (
+		<div
+			className={cn(
+				'grid grid-cols-1 md:grid-cols-[2fr_1fr]',
+				'border border-[var(--border-color)] bg-[var(--border-color)] gap-px',
+				className,
+			)}
+		>
+			<div className="bg-[var(--receipt-bg)]">{topLeft}</div>
+			<div className="bg-[var(--receipt-bg)]">{topRight}</div>
+			<div>{bottomLeft}</div>
+			<div className="bg-[var(--receipt-bg)]">{bottomRight}</div>
+		</div>
+	)
+}
+
+// ─── BENTO TRIPLE ─────────────────────────────────────────────────────────────
+//
+// 3-row layout: header (full width) | aside + body | footer (full width)
+// Desktop: 1fr | 2fr columns. Header and footer span both columns.
+// Mobile stack order: header → aside → body → footer (natural DOM order).
+
+export function BentoTriple({
+	header,
+	aside,
+	body,
+	footer,
+	className,
+}: {
+	header: React.ReactNode
+	aside: React.ReactNode
+	body: React.ReactNode
+	footer: React.ReactNode
+	className?: string
+}) {
+	return (
+		<div
+			className={cn(
+				'grid grid-cols-1 md:grid-cols-[1fr_2fr]',
+				'border border-[var(--border-color)] bg-[var(--border-color)] gap-px',
+				className,
+			)}
+		>
+			{/* Header spans both columns */}
+			<div className="bg-[var(--receipt-bg)] md:[grid-column:1/-1]">{header}</div>
+			{/* Aside — col 1, row 2 */}
+			<div className="bg-[var(--receipt-bg)] flex items-center justify-center">{aside}</div>
+			{/* Body — col 2, row 2 */}
+			<div className="bg-[var(--receipt-bg)]">{body}</div>
+			{/* Footer spans both columns */}
+			<div className="bg-[var(--border-color)] md:[grid-column:1/-1]">{footer}</div>
+		</div>
+	)
+}
+
+// ─── HERO PRIMARY ─────────────────────────────────────────────────────────────
+//
+// Side panel (5fr, row-span-3) | 3-row content area (8fr).
+// Side is first in DOM — md:row-span-3 lets header/body/footer auto-place into col 2.
+// footer slot is opaque ReactNode (use StatCell sub-grid or anything).
+
+export function HeroPrimary({
+	side,
+	header,
+	body,
+	footer,
+	className,
+}: {
+	side: React.ReactNode
+	header: React.ReactNode
+	body: React.ReactNode
+	footer: React.ReactNode
+	className?: string
+}) {
+	return (
+		<div
+			className={cn(
+				'grid grid-cols-1 md:grid-cols-[5fr_8fr]',
+				'border border-[var(--border-color)] bg-[var(--border-color)] gap-px',
+				className,
+			)}
+		>
+			{/* Side — spans 3 rows on desktop */}
+			<div className="bg-[var(--receipt-bg)] flex items-center justify-center p-16 md:row-span-3">
+				{side}
+			</div>
+			{/* Header — auto-places into col 2, row 1 */}
+			<div className="bg-[var(--receipt-bg)] p-5">{header}</div>
+			{/* Body — auto-places into col 2, row 2 */}
+			<div className="bg-[var(--receipt-bg)] p-5">{body}</div>
+			{/* Footer — auto-places into col 2, row 3 */}
+			<div>{footer}</div>
+		</div>
+	)
+}
+
+// ─── CELL GRID ────────────────────────────────────────────────────────────────
+//
+// Rule A: equal-column grid with gap-as-border.
+// Mobile: single column. Desktop: N equal columns.
+// Grid bg IS the border color — gap-px exposes it as 1px lines.
+// Cells need bg-[var(--receipt-bg)] on themselves.
+
+const CELL_GRID_COLS: Record<2 | 3 | 4 | 5, string> = {
+	2: 'md:grid-cols-2',
+	3: 'md:grid-cols-3',
+	4: 'md:grid-cols-4',
+	5: 'md:grid-cols-5',
+}
+
+export function CellGrid({
+	cols,
+	subtle,
+	className,
+	children,
+}: {
+	cols: 2 | 3 | 4 | 5
+	subtle?: boolean
+	className?: string
+	children: React.ReactNode
+}) {
+	return (
+		<div
+			className={cn(
+				'grid grid-cols-1',
+				CELL_GRID_COLS[cols],
+				'gap-px',
+				subtle
+					? 'border border-[var(--border-subtle)] bg-[var(--border-subtle)]'
+					: 'border border-[var(--border-color)] bg-[var(--border-color)]',
+				className,
+			)}
+		>
+			{children}
+		</div>
+	)
+}
+
+// ─── CELL ROW ─────────────────────────────────────────────────────────────────
+//
+// Rule B: flex direction flip with gap-as-divider.
+// Mobile: flex-col (stacked). Desktop: flex-row (side by side).
+// Children control their own widths via md:w-N md:shrink-0.
+
+export function CellRow({
+	className,
+	children,
+}: {
+	className?: string
+	children: React.ReactNode
+}) {
+	return (
+		<div
+			className={cn(
+				'border border-[var(--border-color)]',
+				'flex flex-col md:flex-row',
+				'divide-y divide-[var(--border-color)] md:divide-y-0 md:divide-x divide-[var(--border-color)]',
+				className,
+			)}
+		>
+			{children}
+		</div>
+	)
+}
+
+// ─── HERO SECONDARY ───────────────────────────────────────────────────────────
+//
+// 3-row content (3fr) | side panel (1fr, explicit right column).
+// statsRow: ReactNode[] — rendered in a nested sub-grid (each item a direct child).
+// Side is last in DOM, explicitly placed at col 2 spanning all 3 rows.
+// Mobile: natural DOM stack (side at bottom).
+
+const STATS_COLS: Record<2 | 3 | 4, string> = {
+	2: 'md:grid-cols-2',
+	3: 'md:grid-cols-3',
+	4: 'md:grid-cols-4',
+}
+
+export function HeroSecondary({
+	header,
+	statsRow,
+	content,
+	side,
+	className,
+}: {
+	header: React.ReactNode
+	statsRow: React.ReactNode[]
+	content: React.ReactNode
+	side: React.ReactNode
+	className?: string
+}) {
+	const n = Math.min(Math.max(statsRow.length, 2), 4) as 2 | 3 | 4
+	return (
+		<div
+			className={cn(
+				'grid grid-cols-1 md:grid-cols-[3fr_1fr]',
+				'border border-[var(--border-color)] bg-[var(--border-color)] gap-px',
+				className,
+			)}
+		>
+			{/* Header — col 1, row 1 */}
+			<div className="bg-[var(--receipt-bg)] p-4">{header}</div>
+			{/* Stats row — col 1, row 2: nested sub-grid */}
+			<div className={cn('bg-[var(--border-color)] gap-px grid grid-cols-1', STATS_COLS[n])}>
+				{statsRow.map((stat, i) => (
+					<div key={i}>{stat}</div>
+				))}
+			</div>
+			{/* Content — col 1, row 3 */}
+			<div className="bg-[var(--receipt-bg)] p-4">{content}</div>
+			{/* Side — explicitly placed at col 2, rows 1–4 on desktop */}
+			<div className="bg-[var(--receipt-bg)] flex items-center justify-center p-12 md:[grid-column:2] md:[grid-row:1/4]">
+				{side}
+			</div>
+		</div>
+	)
+}

package/templates/lib/utils.ts

@@ -0,0 +1,49 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs))
+}
+
+export function leftPad(input: string, length: number): string {
+	const zerosNeeded = length - input.length
+	if (zerosNeeded <= 0) {
+		return input
+	}
+	return '0'.repeat(zerosNeeded) + input
+}
+
+export function findNextFocusable(
+	element: Element | null,
+	direction: 'next' | 'previous' = 'next'
+): HTMLElement | null {
+	if (!element) return null
+
+	const focusableSelectors = [
+		'a[href]',
+		'button',
+		'input',
+		'select',
+		'textarea',
+		'[tabindex]:not([tabindex="-1"])',
+		'[contenteditable="true"]',
+	]
+
+	const focusableElements = Array.from(
+		document.querySelectorAll<HTMLElement>(focusableSelectors.join(', '))
+	)
+
+	const currentIndex = focusableElements.indexOf(element as HTMLElement)
+
+	if (currentIndex !== -1) {
+		const nextIndex =
+			direction === 'next'
+				? (currentIndex + 1) % focusableElements.length
+				: (currentIndex - 1 + focusableElements.length) %
+					focusableElements.length
+
+		return focusableElements[nextIndex]
+	}
+
+	return null
+}

package/templates/list-item.tsx

@@ -0,0 +1 @@
+export { ListItem } from '@/components/ui/list-item'

package/templates/list-items.tsx

@@ -0,0 +1,41 @@
+import { Check } from 'lucide-react'
+
+interface ArrowListItemProps {
+	children: React.ReactNode
+}
+
+export function ArrowListItem({ children }: ArrowListItemProps) {
+	return (
+		<li className="flex items-start gap-3">
+			<span className="text-klein text-sm">→</span>
+			<span className="text-muted-foreground">{children}</span>
+		</li>
+	)
+}
+
+interface CheckListItemProps {
+	children: React.ReactNode
+	/**
+	 * Whether to display with a border and padding (card style)
+	 * @default false
+	 */
+	bordered?: boolean
+}
+
+export function CheckListItem({ children, bordered = false }: CheckListItemProps) {
+	if (bordered) {
+		return (
+			<li className="flex items-start gap-3 border p-4">
+				<Check className="w-5 h-5 text-klein flex-shrink-0 mt-0.5" aria-hidden="true" />
+				<span className="text-sm">{children}</span>
+			</li>
+		)
+	}
+
+	return (
+		<li className="flex items-start gap-3">
+			<Check className="w-4 h-4 text-klein flex-shrink-0 mt-1" aria-hidden="true" />
+			<span className="text-muted-foreground text-sm">{children}</span>
+		</li>
+	)
+}

package/templates/list.tsx

@@ -0,0 +1,89 @@
+import type * as React from 'react'
+import { Check } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { ListItem } from '@/components/ui/list-item'
+
+/* ─── Item data types ─── */
+
+export interface ListItemData {
+	content: React.ReactNode
+}
+
+/* ─── Variant definitions ─── */
+
+type ListVariant = 'arrow' | 'check' | 'check-bordered' | 'bullet'
+
+/* ─── Props ─── */
+
+export interface ListProps {
+	items?: ListItemData[]
+	variant?: ListVariant
+	className?: string
+	children?: React.ReactNode
+}
+
+/* ─── Item renderers ─── */
+
+function ArrowItem({ content }: ListItemData) {
+	return (
+		<li className="flex items-start gap-3">
+			<span className="text-klein text-sm">→</span>
+			<span className="text-muted-foreground">{content}</span>
+		</li>
+	)
+}
+
+function CheckItem({ content }: ListItemData) {
+	return (
+		<li className="flex items-start gap-3">
+			<Check className="w-4 h-4 text-klein flex-shrink-0 mt-1" aria-hidden="true" />
+			<span className="text-muted-foreground text-sm">{content}</span>
+		</li>
+	)
+}
+
+function CheckBorderedItem({ content }: ListItemData) {
+	return (
+		<li className="flex items-start gap-3 border p-4">
+			<Check className="w-5 h-5 text-klein flex-shrink-0 mt-0.5" aria-hidden="true" />
+			<span className="text-sm">{content}</span>
+		</li>
+	)
+}
+
+function BulletItem({ content }: ListItemData) {
+	return <li>{content}</li>
+}
+
+const VARIANT_ITEM: Record<ListVariant, React.FC<ListItemData>> = {
+	arrow: ArrowItem,
+	check: CheckItem,
+	'check-bordered': CheckBorderedItem,
+	bullet: BulletItem,
+}
+
+const VARIANT_UL_CLASS: Record<ListVariant, string> = {
+	arrow: 'space-y-4',
+	check: 'space-y-3',
+	'check-bordered': 'grid md:grid-cols-2 gap-4',
+	bullet: 'list-disc list-inside space-y-1',
+}
+
+/* ─── Component ─── */
+
+function List({ items, variant = 'bullet', className, children }: ListProps) {
+	if (items) {
+		const ItemComponent = VARIANT_ITEM[variant]
+		return (
+			<ul className={cn(VARIANT_UL_CLASS[variant], className)}>
+				{items.map((item, i) => (
+					<ItemComponent key={i} content={item.content} />
+				))}
+			</ul>
+		)
+	}
+
+	return <ul className={cn(className)}>{children}</ul>
+}
+
+export { List, ListItem }

package/templates/logo.tsx

@@ -0,0 +1,12 @@
+export function Logo({ className }: { className?: string }) {
+	return (
+		<svg viewBox="0 0 24 24" fill="currentColor" className={className} aria-hidden="true">
+			<rect x="0" y="0" width="3" height="24" />
+			<rect x="21" y="0" width="3" height="24" />
+			<rect x="0" y="0" width="24" height="3" />
+			<rect x="0" y="7" width="24" height="3" />
+			<rect x="0" y="14" width="24" height="3" />
+			<rect x="0" y="21" width="24" height="3" />
+		</svg>
+	)
+}

package/templates/marketing-footer.tsx

@@ -0,0 +1,33 @@
+import { CAL_LINK } from '@/lib/constants'
+
+interface MarketingFooterProps {
+	/**
+	 * The call-to-action link URL
+	 * @default CAL_LINK
+	 */
+	ctaLink?: string
+	/**
+	 * The call-to-action text
+	 * @default "Book a Call"
+	 */
+	ctaText?: string
+}
+
+export function MarketingFooter({
+	ctaLink = CAL_LINK,
+	ctaText = 'Book a Call',
+}: MarketingFooterProps) {
+	return (
+		<footer className="border-t border-[var(--border-subtle)] py-6">
+			<div className="wrap flex flex-col md:flex-row items-center justify-between gap-4">
+				<p className="text-xs text-muted-foreground">© {new Date().getFullYear()} LEITWARE</p>
+				<a
+					href={ctaLink}
+					className="text-xs text-muted-foreground hover:text-klein focus-ring"
+				>
+					{ctaText}
+				</a>
+			</div>
+		</footer>
+	)
+}

package/templates/marketing-header.tsx

@@ -0,0 +1,46 @@
+import { Logo } from '@/components/logo'
+import { ThemeToggle } from '@/components/theme-toggle'
+import { Button } from '@/components/button'
+import { CAL_LINK } from '@/lib/constants'
+
+interface MarketingHeaderProps {
+	/**
+	 * The call-to-action link URL
+	 * @default CAL_LINK
+	 */
+	ctaLink?: string
+	/**
+	 * The call-to-action button text
+	 * @default "Get Started"
+	 */
+	ctaText?: string
+}
+
+export function MarketingHeader({
+	ctaLink = CAL_LINK,
+	ctaText = 'Get Started',
+}: MarketingHeaderProps) {
+	return (
+		<nav
+			className="sticky top-0 z-50 bg-background/80 backdrop-blur-md border-b border-[var(--border-subtle)]"
+			aria-label="Main navigation"
+		>
+			<div className="wrap flex items-center justify-between h-16">
+				<a
+					href="/"
+					className="flex items-center gap-2 font-medium focus-ring"
+					aria-label="LEITWARE home"
+				>
+					<Logo className="w-7 h-7" />
+					<span>LEITWARE</span>
+				</a>
+				<div className="flex items-center gap-3">
+					<ThemeToggle />
+					<Button asChild size="sm">
+						<a href={ctaLink}>{ctaText}</a>
+					</Button>
+				</div>
+			</div>
+		</nav>
+	)
+}

package/templates/menubar.tsx

@@ -0,0 +1,16 @@
+export {
+	Menubar,
+	MenubarMenu,
+	MenubarTrigger,
+	MenubarContent,
+	MenubarItem,
+	MenubarCheckboxItem,
+	MenubarRadioGroup,
+	MenubarRadioItem,
+	MenubarLabel,
+	MenubarSeparator,
+	MenubarShortcut,
+	MenubarSub,
+	MenubarSubTrigger,
+	MenubarSubContent,
+} from '@/components/ui/menubar'

package/templates/navigation-menu.tsx

@@ -0,0 +1,11 @@
+export {
+	NavigationMenu,
+	NavigationMenuList,
+	NavigationMenuItem,
+	NavigationMenuTrigger,
+	NavigationMenuContent,
+	NavigationMenuLink,
+	NavigationMenuViewport,
+	NavigationMenuIndicator,
+	navigationMenuTriggerStyle,
+} from '@/components/ui/navigation-menu'