@leitware/dockets 0.1.0

package/templates/ui/input-otp.tsx

@@ -0,0 +1,153 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+interface InputOTPProps {
+	length?: number
+	value?: string
+	onChange?: (value: string) => void
+	disabled?: boolean
+	className?: string
+	pattern?: RegExp
+}
+
+function InputOTP({
+	length = 6,
+	value = '',
+	onChange,
+	disabled,
+	className,
+	pattern = /^[0-9]*$/,
+}: InputOTPProps) {
+	const inputRefs = React.useRef<(HTMLInputElement | null)[]>([])
+
+	const chars = Array.from({ length }, (_, i) => value[i] ?? '')
+
+	const handleChange = (idx: number, char: string) => {
+		if (char && !pattern.test(char)) return
+		const next = chars.map((c, i) => (i === idx ? char.slice(-1) : c)).join('')
+		onChange?.(next)
+		if (char && idx < length - 1) {
+			inputRefs.current[idx + 1]?.focus()
+		}
+	}
+
+	const handleKeyDown = (idx: number, e: React.KeyboardEvent<HTMLInputElement>) => {
+		if (e.key === 'Backspace' && !chars[idx] && idx > 0) {
+			inputRefs.current[idx - 1]?.focus()
+			const next = chars.map((c, i) => (i === idx - 1 ? '' : c)).join('')
+			onChange?.(next)
+		}
+		if (e.key === 'ArrowLeft' && idx > 0) inputRefs.current[idx - 1]?.focus()
+		if (e.key === 'ArrowRight' && idx < length - 1) inputRefs.current[idx + 1]?.focus()
+	}
+
+	const handlePaste = (e: React.ClipboardEvent) => {
+		e.preventDefault()
+		const pasted = e.clipboardData.getData('text').slice(0, length)
+		if (!pattern.test(pasted)) return
+		onChange?.(pasted.padEnd(0, ''))
+		const focusIdx = Math.min(pasted.length, length - 1)
+		inputRefs.current[focusIdx]?.focus()
+	}
+
+	return (
+		<div
+			data-slot="input-otp"
+			className={cn('flex items-center gap-0', className)}
+		>
+			{chars.map((char, idx) => (
+				<React.Fragment key={idx}>
+					{idx > 0 && idx % 3 === 0 && (
+						<div
+							data-slot="input-otp-separator"
+							className="flex w-4 items-center justify-center text-xs text-muted-foreground select-none"
+							aria-hidden
+						>
+							–
+						</div>
+					)}
+					<input
+						ref={(el) => { inputRefs.current[idx] = el }}
+						type="text"
+						inputMode="numeric"
+						maxLength={1}
+						value={char}
+						disabled={disabled}
+						onChange={(e) => handleChange(idx, e.target.value)}
+						onKeyDown={(e) => handleKeyDown(idx, e)}
+						onPaste={handlePaste}
+						onFocus={(e) => e.target.select()}
+						className={cn(
+							'flex h-10 w-10 items-center justify-center rounded-[var(--radius)] border-[length:var(--border-width)] border-foreground bg-transparent text-center text-sm font-medium caret-transparent outline-none',
+							'first-of-type:rounded-[var(--radius)]',
+							// No stacking: right border only on all-but-last boxes when not separated
+							idx > 0 && idx % 3 !== 0 && '-ml-[length:var(--border-width)]',
+							'focus:z-10 focus:border-foreground focus:ring-1 focus:ring-foreground/30',
+							'disabled:cursor-not-allowed disabled:opacity-50',
+						)}
+						aria-label={`Digit ${idx + 1}`}
+					/>
+				</React.Fragment>
+			))}
+		</div>
+	)
+}
+
+function InputOTPGroup({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="input-otp-group"
+			className={cn('flex items-center', className)}
+			{...props}
+		/>
+	)
+}
+
+function InputOTPSlot({
+	index,
+	active,
+	char,
+	className,
+}: {
+	index: number
+	active?: boolean
+	char?: string
+	className?: string
+}) {
+	return (
+		<div
+			data-slot="input-otp-slot"
+			data-active={active}
+			className={cn(
+				'relative flex h-10 w-10 items-center justify-center rounded-[var(--radius)] border-[length:var(--border-width)] border-foreground text-sm font-medium',
+				index !== 0 && '-ml-[length:var(--border-width)]',
+				active && 'z-10 ring-1 ring-foreground',
+				className,
+			)}
+		>
+			{char}
+			{active && (
+				<div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+					<div className="animate-caret-blink h-4 w-px bg-foreground duration-1000" />
+				</div>
+			)}
+		</div>
+	)
+}
+
+function InputOTPSeparator({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="input-otp-separator"
+			role="separator"
+			className={cn('flex w-4 items-center justify-center text-xs text-muted-foreground', className)}
+			{...props}
+		>
+			–
+		</div>
+	)
+}
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

package/templates/ui/input.tsx

@@ -0,0 +1,20 @@
+import { Input as InputPrimitive } from '@base-ui/react/input'
+import type * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
+	return (
+		<InputPrimitive
+			type={type}
+			data-slot="input"
+			className={cn(
+				'h-8 w-full min-w-0 rounded-[var(--radius)] border-[length:var(--border-width)] border-input bg-transparent px-2.5 py-1 text-xs file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-xs file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive md:text-xs dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50',
+				className,
+			)}
+			{...props}
+		/>
+	)
+}
+
+export { Input }

package/templates/ui/label.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+function Label({ className, ...props }: React.ComponentProps<'label'>) {
+	return (
+		<label
+			data-slot="label"
+			className={cn(
+				'text-xs font-medium uppercase tracking-wider leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+				className,
+			)}
+			{...props}
+		/>
+	)
+}
+
+export { Label }

package/templates/ui/layout.tsx

@@ -0,0 +1,252 @@
+// ─── Layout Primitives ────────────────────────────────────────────────────────
+//
+// These components enforce the dockets spacing and border system:
+//
+// BORDERS NEVER STACK RULES:
+//   • Stack/Row gaps use margin (not padding) so items never double-border
+//   • BentoGrid: container holds border-t + border-l.
+//     BentoCells add border-b + border-r → each edge drawn exactly once.
+//   • Use `border-[length:var(--border-width)]` throughout, never hardcoded 1px.
+//
+// SPACING:
+//   All padding/gap values pull from Tailwind's scale (1=4px, 2=8px, …).
+//   Macro layout values come from --space-layout-sm/md/lg defined in dockets.css.
+
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+// ─── Container ────────────────────────────────────────────────────────────────
+
+interface ContainerProps extends React.ComponentProps<'div'> {
+	size?: 'sm' | 'md' | 'lg' | 'xl' | 'full'
+}
+
+const containerSizes = {
+	sm: 'max-w-2xl',
+	md: 'max-w-4xl',
+	lg: 'max-w-6xl',
+	xl: 'max-w-7xl',
+	full: 'max-w-none',
+}
+
+function Container({ className, size = 'lg', ...props }: ContainerProps) {
+	return (
+		<div
+			data-slot="container"
+			className={cn('mx-auto w-full px-4 sm:px-6', containerSizes[size], className)}
+			{...props}
+		/>
+	)
+}
+
+// ─── Section ──────────────────────────────────────────────────────────────────
+
+interface SectionProps extends React.ComponentProps<'section'> {
+	spacing?: 'sm' | 'md' | 'lg'
+}
+
+const sectionSpacing = {
+	sm: 'py-[var(--space-layout-sm)]',
+	md: 'py-[var(--space-layout-md)]',
+	lg: 'py-[var(--space-layout-lg)]',
+}
+
+function Section({ className, spacing = 'md', ...props }: SectionProps) {
+	return (
+		<section
+			data-slot="section"
+			className={cn('w-full', sectionSpacing[spacing], className)}
+			{...props}
+		/>
+	)
+}
+
+// ─── Stack (vertical flex) ────────────────────────────────────────────────────
+
+interface StackProps extends React.ComponentProps<'div'> {
+	gap?: 1 | 2 | 3 | 4 | 5 | 6 | 8
+	align?: 'start' | 'center' | 'end' | 'stretch'
+}
+
+const stackGaps: Record<number, string> = {
+	1: 'gap-1', 2: 'gap-2', 3: 'gap-3', 4: 'gap-4', 5: 'gap-5', 6: 'gap-6', 8: 'gap-8',
+}
+
+const alignItems: Record<string, string> = {
+	start: 'items-start', center: 'items-center', end: 'items-end', stretch: 'items-stretch',
+}
+
+function Stack({ className, gap = 4, align = 'stretch', ...props }: StackProps) {
+	return (
+		<div
+			data-slot="stack"
+			className={cn('flex flex-col', stackGaps[gap], alignItems[align], className)}
+			{...props}
+		/>
+	)
+}
+
+// ─── Row (horizontal flex) ────────────────────────────────────────────────────
+
+interface RowProps extends React.ComponentProps<'div'> {
+	gap?: 1 | 2 | 3 | 4 | 5 | 6 | 8
+	align?: 'start' | 'center' | 'end' | 'baseline' | 'stretch'
+	justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'
+	wrap?: boolean
+}
+
+const justifyContent: Record<string, string> = {
+	start: 'justify-start', center: 'justify-center', end: 'justify-end',
+	between: 'justify-between', around: 'justify-around', evenly: 'justify-evenly',
+}
+
+function Row({ className, gap = 4, align = 'center', justify = 'start', wrap = false, ...props }: RowProps) {
+	return (
+		<div
+			data-slot="row"
+			className={cn(
+				'flex flex-row',
+				stackGaps[gap],
+				alignItems[align],
+				justifyContent[justify],
+				wrap && 'flex-wrap',
+				className,
+			)}
+			{...props}
+		/>
+	)
+}
+
+// ─── Spacer ───────────────────────────────────────────────────────────────────
+
+function Spacer({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="spacer"
+			className={cn('flex-1', className)}
+			aria-hidden
+			{...props}
+		/>
+	)
+}
+
+// ─── Divider ──────────────────────────────────────────────────────────────────
+
+interface DividerProps extends React.ComponentProps<'hr'> {
+	orientation?: 'horizontal' | 'vertical'
+}
+
+function Divider({ className, orientation = 'horizontal', ...props }: DividerProps) {
+	return (
+		<hr
+			data-slot="divider"
+			data-orientation={orientation}
+			className={cn(
+				'border-0 bg-border',
+				orientation === 'horizontal'
+					? 'h-[length:var(--border-width)] w-full'
+					: 'h-full w-[length:var(--border-width)] self-stretch',
+				className,
+			)}
+			{...props}
+		/>
+	)
+}
+
+// ─── Grid ─────────────────────────────────────────────────────────────────────
+
+interface GridProps extends React.ComponentProps<'div'> {
+	cols?: 1 | 2 | 3 | 4 | 6 | 12
+	gap?: 1 | 2 | 3 | 4 | 5 | 6 | 8
+}
+
+const gridCols: Record<number, string> = {
+	1: 'grid-cols-1', 2: 'grid-cols-2', 3: 'grid-cols-3',
+	4: 'grid-cols-4', 6: 'grid-cols-6', 12: 'grid-cols-12',
+}
+
+function Grid({ className, cols = 2, gap = 4, ...props }: GridProps) {
+	return (
+		<div
+			data-slot="grid"
+			className={cn('grid', gridCols[cols], stackGaps[gap], className)}
+			{...props}
+		/>
+	)
+}
+
+// ─── BentoGrid ────────────────────────────────────────────────────────────────
+//
+// Newspaper-grid border pattern:
+//   Container: border-t + border-l (outer frame top and left)
+//   Cells:     border-b + border-r  (completes each cell, never double)
+//
+// Result: every cell boundary is a single border line.
+
+interface BentoGridProps extends React.ComponentProps<'div'> {
+	cols?: 1 | 2 | 3 | 4
+}
+
+const bentoCols: Record<number, string> = {
+	1: 'grid-cols-1', 2: 'grid-cols-2', 3: 'grid-cols-3', 4: 'grid-cols-4',
+}
+
+function BentoGrid({ className, cols = 3, ...props }: BentoGridProps) {
+	return (
+		<div
+			data-slot="bento-grid"
+			className={cn(
+				'grid',
+				bentoCols[cols],
+				// Container provides top + left edge; cells fill right + bottom
+				'border-t-[length:var(--border-width)] border-l-[length:var(--border-width)] border-foreground',
+				className,
+			)}
+			{...props}
+		/>
+	)
+}
+
+// ─── BentoCell ────────────────────────────────────────────────────────────────
+
+interface BentoCellProps extends React.ComponentProps<'div'> {
+	span?: 1 | 2 | 3 | 4
+	rowSpan?: 1 | 2 | 3
+}
+
+const colSpans: Record<number, string> = {
+	1: 'col-span-1', 2: 'col-span-2', 3: 'col-span-3', 4: 'col-span-4',
+}
+
+const rowSpans: Record<number, string> = {
+	1: 'row-span-1', 2: 'row-span-2', 3: 'row-span-3',
+}
+
+function BentoCell({ className, span = 1, rowSpan = 1, ...props }: BentoCellProps) {
+	return (
+		<div
+			data-slot="bento-cell"
+			className={cn(
+				colSpans[span],
+				rowSpans[rowSpan],
+				// Cell provides bottom + right edge (newspaper rule — completes grid lines)
+				'border-b-[length:var(--border-width)] border-r-[length:var(--border-width)] border-foreground',
+				'p-4',
+				className,
+			)}
+			{...props}
+		/>
+	)
+}
+
+export {
+	Container,
+	Section,
+	Stack,
+	Row,
+	Spacer,
+	Divider,
+	Grid,
+	BentoGrid,
+	BentoCell,
+}

package/templates/ui/list-item.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react'
+import { cn, findNextFocusable } from '@/lib/utils'
+
+interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {}
+
+const ListItem = React.forwardRef<HTMLLIElement, ListItemProps>(
+	({ children, className, ...props }, ref) => {
+		const itemRef = React.useRef<HTMLLIElement>(null)
+		const combinedRef = ref || itemRef
+
+		const handleKeyDown = (event: React.KeyboardEvent<HTMLLIElement>) => {
+			switch (event.key) {
+				case 'Enter':
+					event.preventDefault()
+					;(combinedRef as React.RefObject<HTMLLIElement>).current?.click()
+					break
+				case 'ArrowUp':
+				case 'ArrowLeft': {
+					event.preventDefault()
+					const previousFocusable = findNextFocusable(document.activeElement, 'previous')
+					previousFocusable?.focus()
+					break
+				}
+				case 'ArrowDown':
+				case 'ArrowRight': {
+					event.preventDefault()
+					const nextFocusable = findNextFocusable(document.activeElement, 'next')
+					nextFocusable?.focus()
+					break
+				}
+			}
+		}
+
+		return (
+			<li
+				ref={combinedRef}
+				data-slot="list-item"
+				className={cn('pl-[1ch]', className)}
+				tabIndex={0}
+				onKeyDown={handleKeyDown}
+				{...props}
+			>
+				{children}
+			</li>
+		)
+	},
+)
+ListItem.displayName = 'ListItem'
+
+export { ListItem }