@leitware/dockets 0.1.0

package/templates/ui/accordion.tsx

@@ -0,0 +1,73 @@
+import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion'
+import { ChevronDownIcon, ChevronUpIcon } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
+	return (
+		<AccordionPrimitive.Root
+			data-slot="accordion"
+			className={cn(
+				'flex w-full flex-col border-[length:var(--border-width)] border-foreground',
+				className,
+			)}
+			{...props}
+		/>
+	)
+}
+
+function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
+	return (
+		<AccordionPrimitive.Item
+			data-slot="accordion-item"
+			// Border-never-stack: items use border-b only; outer container holds border-t + sides
+			className={cn('border-b-[length:var(--border-width)] border-foreground last:border-b-0', className)}
+			{...props}
+		/>
+	)
+}
+
+function AccordionTrigger({ className, children, ...props }: AccordionPrimitive.Trigger.Props) {
+	return (
+		<AccordionPrimitive.Header className="flex">
+			<AccordionPrimitive.Trigger
+				data-slot="accordion-trigger"
+				className={cn(
+					'group/accordion-trigger relative flex flex-1 items-start justify-between rounded-[var(--radius)] border border-transparent py-2.5 text-left text-xs font-medium hover:underline aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground',
+					className,
+				)}
+				{...props}
+			>
+				{children}
+				<ChevronDownIcon
+					data-slot="accordion-trigger-icon"
+					className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
+				/>
+				<ChevronUpIcon
+					data-slot="accordion-trigger-icon"
+					className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
+				/>
+			</AccordionPrimitive.Trigger>
+		</AccordionPrimitive.Header>
+	)
+}
+
+function AccordionContent({ className, children, ...props }: AccordionPrimitive.Panel.Props) {
+	return (
+		<AccordionPrimitive.Panel
+			data-slot="accordion-content"
+			className="overflow-hidden text-xs data-open:animate-accordion-down data-closed:animate-accordion-up"
+			{...props}
+		>
+			<div
+				className={cn(
+					'h-(--accordion-panel-height) pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4',
+					className,
+				)}
+			>
+				{children}
+			</div>
+		</AccordionPrimitive.Panel>
+	)
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

package/templates/ui/alert-dialog.tsx

@@ -0,0 +1,128 @@
+'use client'
+
+import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog'
+import type * as React from 'react'
+import { cn } from '@/lib/utils'
+
+function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
+	return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
+	return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+}
+
+function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
+	return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+}
+
+function AlertDialogOverlay({ className, ...props }: AlertDialogPrimitive.Backdrop.Props) {
+	return (
+		<AlertDialogPrimitive.Backdrop
+			data-slot="alert-dialog-overlay"
+			className={cn(
+				'fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0',
+				className,
+			)}
+			{...props}
+		/>
+	)
+}
+
+function AlertDialogContent({ className, children, ...props }: AlertDialogPrimitive.Popup.Props) {
+	return (
+		<AlertDialogPortal>
+			<AlertDialogOverlay />
+			<AlertDialogPrimitive.Popup
+				data-slot="alert-dialog-content"
+				className={cn(
+					'fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-[var(--radius)] border-[length:var(--border-width)] border-foreground bg-card p-4 text-xs/relaxed text-card-foreground duration-100 outline-none sm:max-w-sm 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',
+					className,
+				)}
+				{...props}
+			>
+				{children}
+			</AlertDialogPrimitive.Popup>
+		</AlertDialogPortal>
+	)
+}
+
+function AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="alert-dialog-header"
+			className={cn('flex flex-col gap-1 text-left', className)}
+			{...props}
+		/>
+	)
+}
+
+function AlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="alert-dialog-footer"
+			className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
+			{...props}
+		/>
+	)
+}
+
+function AlertDialogTitle({ className, ...props }: AlertDialogPrimitive.Title.Props) {
+	return (
+		<AlertDialogPrimitive.Title
+			data-slot="alert-dialog-title"
+			className={cn('text-sm font-medium uppercase tracking-wider', className)}
+			{...props}
+		/>
+	)
+}
+
+function AlertDialogDescription({ className, ...props }: AlertDialogPrimitive.Description.Props) {
+	return (
+		<AlertDialogPrimitive.Description
+			data-slot="alert-dialog-description"
+			className={cn('text-xs/relaxed text-muted-foreground', className)}
+			{...props}
+		/>
+	)
+}
+
+function AlertDialogAction({ className, ...props }: AlertDialogPrimitive.Close.Props) {
+	return (
+		<AlertDialogPrimitive.Close
+			data-slot="alert-dialog-action"
+			className={cn(
+				'inline-flex h-10 items-center justify-center rounded-[var(--radius)] bg-foreground px-6 py-2 text-xs font-medium uppercase tracking-wider text-background hover:bg-foreground/90 disabled:pointer-events-none disabled:opacity-50',
+				className,
+			)}
+			{...props}
+		/>
+	)
+}
+
+function AlertDialogCancel({ className, ...props }: AlertDialogPrimitive.Close.Props) {
+	return (
+		<AlertDialogPrimitive.Close
+			data-slot="alert-dialog-cancel"
+			className={cn(
+				'inline-flex h-10 items-center justify-center rounded-[var(--radius)] border-[length:var(--border-width)] border-dashed border-foreground bg-transparent px-6 py-2 text-xs font-medium uppercase tracking-wider hover:bg-foreground/5 disabled:pointer-events-none disabled:opacity-50',
+				className,
+			)}
+			{...props}
+		/>
+	)
+}
+
+export {
+	AlertDialog,
+	AlertDialogTrigger,
+	AlertDialogPortal,
+	AlertDialogOverlay,
+	AlertDialogContent,
+	AlertDialogHeader,
+	AlertDialogFooter,
+	AlertDialogTitle,
+	AlertDialogDescription,
+	AlertDialogAction,
+	AlertDialogCancel,
+}

package/templates/ui/alert.tsx

@@ -0,0 +1,56 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+const alertVariants = cva(
+	'relative w-full rounded-[var(--radius)] border-[length:var(--border-width)] border-dashed p-4 text-xs/relaxed [&>svg]:absolute [&>svg]:top-4 [&>svg]:left-4 [&>svg]:size-4 [&>svg~*]:pl-6',
+	{
+		variants: {
+			variant: {
+				default: 'border-foreground bg-card text-card-foreground',
+				destructive:
+					'border-destructive/50 bg-destructive/5 text-destructive dark:border-destructive [&>svg]:text-destructive',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	},
+)
+
+function Alert({
+	className,
+	variant,
+	...props
+}: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {
+	return (
+		<div
+			data-slot="alert"
+			role="alert"
+			className={cn(alertVariants({ variant }), className)}
+			{...props}
+		/>
+	)
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="alert-title"
+			className={cn('mb-1 font-medium uppercase tracking-wider leading-none', className)}
+			{...props}
+		/>
+	)
+}
+
+function AlertDescription({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="alert-description"
+			className={cn('text-xs/relaxed [&_p]:leading-relaxed', className)}
+			{...props}
+		/>
+	)
+}
+
+export { Alert, AlertTitle, AlertDescription, alertVariants }

package/templates/ui/aspect-ratio.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+interface AspectRatioProps extends React.ComponentProps<'div'> {
+	ratio?: number
+}
+
+function AspectRatio({ ratio = 1, className, style, ...props }: AspectRatioProps) {
+	return (
+		<div
+			data-slot="aspect-ratio"
+			style={{ aspectRatio: ratio, ...style }}
+			className={cn('relative w-full overflow-hidden', className)}
+			{...props}
+		/>
+	)
+}
+
+export { AspectRatio }

package/templates/ui/avatar.tsx

@@ -0,0 +1,74 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+interface AvatarProps extends React.ComponentProps<'span'> {
+	src?: string
+	alt?: string
+	fallback?: React.ReactNode
+	size?: 'sm' | 'default' | 'lg'
+}
+
+const sizeClasses = {
+	sm: 'size-7 text-[10px]',
+	default: 'size-9 text-xs',
+	lg: 'size-12 text-sm',
+}
+
+function Avatar({ className, src, alt, fallback, size = 'default', ...props }: AvatarProps) {
+	const [imgError, setImgError] = React.useState(false)
+	const showFallback = !src || imgError
+
+	return (
+		<span
+			data-slot="avatar"
+			className={cn(
+				'relative inline-flex shrink-0 overflow-hidden rounded-[var(--radius)] border-[length:var(--border-width)] border-dashed border-foreground',
+				sizeClasses[size],
+				className,
+			)}
+			{...props}
+		>
+			{!showFallback && (
+				<img
+					src={src}
+					alt={alt ?? ''}
+					className="h-full w-full object-cover"
+					onError={() => setImgError(true)}
+				/>
+			)}
+			{showFallback && (
+				<span
+					data-slot="avatar-fallback"
+					className="flex h-full w-full items-center justify-center bg-muted font-medium uppercase tracking-wider text-muted-foreground"
+				>
+					{fallback}
+				</span>
+			)}
+		</span>
+	)
+}
+
+function AvatarImage({ className, ...props }: React.ComponentProps<'img'>) {
+	return (
+		<img
+			data-slot="avatar-image"
+			className={cn('h-full w-full object-cover', className)}
+			{...props}
+		/>
+	)
+}
+
+function AvatarFallback({ className, ...props }: React.ComponentProps<'span'>) {
+	return (
+		<span
+			data-slot="avatar-fallback"
+			className={cn(
+				'flex h-full w-full items-center justify-center bg-muted font-medium uppercase tracking-wider text-muted-foreground',
+				className,
+			)}
+			{...props}
+		/>
+	)
+}
+
+export { Avatar, AvatarImage, AvatarFallback }

package/templates/ui/badge.tsx

@@ -0,0 +1,48 @@
+import { mergeProps } from '@base-ui/react/merge-props'
+import { useRender } from '@base-ui/react/use-render'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const badgeVariants = cva(
+	'group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-[var(--radius)] border border-transparent px-2 py-0.5 text-xs font-medium uppercase tracking-wider whitespace-nowrap has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 [&>svg]:pointer-events-none [&>svg]:size-3!',
+	{
+		variants: {
+			variant: {
+				default: 'bg-foreground text-background',
+				secondary: 'bg-card text-card-foreground',
+				destructive: 'bg-destructive text-destructive-foreground',
+				outline: 'border-foreground border-dashed text-foreground',
+				ghost: 'text-foreground/60',
+				link: 'text-foreground underline-offset-4 underline',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	},
+)
+
+function Badge({
+	className,
+	variant = 'default',
+	render,
+	...props
+}: useRender.ComponentProps<'span'> & VariantProps<typeof badgeVariants>) {
+	return useRender({
+		defaultTagName: 'span',
+		props: mergeProps<'span'>(
+			{
+				className: cn(badgeVariants({ variant }), className),
+			},
+			props,
+		),
+		render,
+		state: {
+			slot: 'badge',
+			variant,
+		},
+	})
+}
+
+export { Badge, badgeVariants }

package/templates/ui/block-loader.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+const SEQUENCES = [
+	['⠁', '⠂', '⠄', '⡀', '⢀', '⠠', '⠐', '⠈'],
+	['⣾', '⣽', '⣻', '⢿', '⡿', '⣟', '⣯', '⣷'],
+	['▖', '▘', '▝', '▗'],
+	['▁', '▂', '▃', '▄', '▅', '▆', '▇', '█', '▇', '▆', '▅', '▄', '▃', '▁'],
+	['▉', '▊', '▋', '▌', '▍', '▎', '▏', '▎', '▍', '▌', '▋', '▊', '▉'],
+	['←', '↖', '↑', '↗', '→', '↘', '↓', '↙'],
+	['┤', '┘', '┴', '└', '├', '┌', '┬', '┐'],
+	['◢', '◣', '◤', '◥'],
+	['◰', '◳', '◲', '◱'],
+	['◴', '◷', '◶', '◵'],
+	['◐', '◓', '◑', '◒'],
+] as const
+
+interface BlockLoaderProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {
+	mode?: number
+}
+
+function BlockLoader({ mode = 1, className, ...props }: BlockLoaderProps) {
+	const sequence = SEQUENCES[mode] ?? SEQUENCES[0]
+	const [index, setIndex] = React.useState(0)
+
+	React.useEffect(() => {
+		const id = window.setInterval(() => {
+			setIndex((prev) => (prev + 1) % sequence.length)
+		}, 100)
+		return () => clearInterval(id)
+	}, [sequence.length])
+
+	return (
+		<span data-slot="block-loader" className={cn('inline-block w-[1em] text-center', className)} aria-label="Loading" {...props}>
+			{sequence[index]}
+		</span>
+	)
+}
+
+export { BlockLoader, SEQUENCES }

package/templates/ui/button.tsx

@@ -0,0 +1,77 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+const buttonVariants = cva(
+	'inline-flex items-center justify-center gap-2 whitespace-nowrap text-xs font-medium uppercase tracking-wider disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+	{
+		variants: {
+			variant: {
+				default: 'bg-foreground text-background hover:bg-foreground/90',
+				destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+				outline:
+					'border-[length:var(--border-width)] border-dashed border-foreground bg-transparent hover:bg-foreground/5',
+				secondary: 'bg-card text-card-foreground',
+				ghost: 'hover:text-foreground',
+				link: 'text-foreground underline-offset-4 hover:underline',
+			},
+			size: {
+				default: 'h-10 px-6 py-2',
+				sm: 'h-9 px-4',
+				lg: 'h-11 px-6',
+				xl: 'h-12 px-8',
+				icon: 'h-10 w-10',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'default',
+		},
+	},
+)
+
+export interface ButtonProps
+	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+		VariantProps<typeof buttonVariants> {
+	asChild?: boolean
+	render?: React.ReactElement<Record<string, unknown>>
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+	({ className, variant, size, asChild = false, render, children, ...props }, ref) => {
+		const classes = cn(buttonVariants({ variant, size, className }))
+
+		// Base UI render prop pattern (preferred)
+		if (render) {
+			const renderProps = render.props as Record<string, unknown>
+			return React.cloneElement(render, {
+				...props,
+				ref,
+				className: cn(classes, renderProps.className as string | undefined),
+				children: (renderProps.children as React.ReactNode) ?? children,
+			})
+		}
+
+		// Legacy asChild pattern (backwards-compatible without Radix Slot)
+		if (asChild && React.isValidElement(children)) {
+			const childProps = (children as React.ReactElement<Record<string, unknown>>).props as Record<
+				string,
+				unknown
+			>
+			return React.cloneElement(children as React.ReactElement<Record<string, unknown>>, {
+				...props,
+				ref,
+				className: cn(classes, childProps.className as string | undefined),
+			})
+		}
+
+		return (
+			<button data-slot="button" className={classes} ref={ref} {...props}>
+				{children}
+			</button>
+		)
+	},
+)
+Button.displayName = 'Button'
+
+export { Button, buttonVariants }

package/templates/ui/calendar.tsx

@@ -0,0 +1,160 @@
+'use client'
+
+import * as React from 'react'
+import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+const DAYS = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT']
+const MONTHS = [
+	'JANUARY', 'FEBRUARY', 'MARCH', 'APRIL', 'MAY', 'JUNE',
+	'JULY', 'AUGUST', 'SEPTEMBER', 'OCTOBER', 'NOVEMBER', 'DECEMBER',
+]
+
+interface CalendarProps {
+	className?: string
+	selected?: Date
+	onSelect?: (date: Date) => void
+	defaultMonth?: Date
+	disabled?: (date: Date) => boolean
+	mode?: 'single'
+}
+
+function Calendar({
+	className,
+	selected,
+	onSelect,
+	defaultMonth,
+	disabled,
+}: CalendarProps) {
+	const today = new Date()
+	const [viewDate, setViewDate] = React.useState(
+		defaultMonth ?? selected ?? today,
+	)
+
+	const year = viewDate.getFullYear()
+	const month = viewDate.getMonth()
+
+	const firstDay = new Date(year, month, 1).getDay()
+	const daysInMonth = new Date(year, month + 1, 0).getDate()
+
+	const cells: (number | null)[] = [
+		...Array(firstDay).fill(null),
+		...Array.from({ length: daysInMonth }, (_, i) => i + 1),
+	]
+	// Pad to complete last row
+	while (cells.length % 7 !== 0) cells.push(null)
+
+	const prevMonth = () => setViewDate(new Date(year, month - 1, 1))
+	const nextMonth = () => setViewDate(new Date(year, month + 1, 1))
+
+	const isSelected = (day: number) => {
+		if (!selected) return false
+		return (
+			selected.getFullYear() === year &&
+			selected.getMonth() === month &&
+			selected.getDate() === day
+		)
+	}
+
+	const isToday = (day: number) =>
+		today.getFullYear() === year &&
+		today.getMonth() === month &&
+		today.getDate() === day
+
+	const isDisabled = (day: number) => {
+		if (!disabled) return false
+		return disabled(new Date(year, month, day))
+	}
+
+	return (
+		<div
+			data-slot="calendar"
+			className={cn(
+				'w-full max-w-xs rounded-[var(--radius)] border-[length:var(--border-width)] border-foreground bg-card text-card-foreground',
+				className,
+			)}
+		>
+			{/* Header — no stacking: outer border owns top+sides */}
+			<div className="flex items-center justify-between border-b-[length:var(--border-width)] border-foreground px-3 py-2">
+				<button
+					type="button"
+					onClick={prevMonth}
+					className="flex size-6 items-center justify-center text-muted-foreground hover:text-foreground"
+					aria-label="Previous month"
+				>
+					<ChevronLeftIcon className="size-3.5" />
+				</button>
+				<span className="text-xs font-medium uppercase tracking-wider">
+					{MONTHS[month]} {year}
+				</span>
+				<button
+					type="button"
+					onClick={nextMonth}
+					className="flex size-6 items-center justify-center text-muted-foreground hover:text-foreground"
+					aria-label="Next month"
+				>
+					<ChevronRightIcon className="size-3.5" />
+				</button>
+			</div>
+
+			{/* Day-of-week header */}
+			{/* Newspaper grid: container holds border-t + border-l; cells add border-r + border-b */}
+			<div className="grid grid-cols-7 border-b-[length:var(--border-width)] border-foreground">
+				{DAYS.map((d) => (
+					<div
+						key={d}
+						className="flex h-7 items-center justify-center text-[10px] font-medium uppercase tracking-wider text-muted-foreground"
+					>
+						{d.slice(0, 2)}
+					</div>
+				))}
+			</div>
+
+			{/* Day cells */}
+			<div className="grid grid-cols-7">
+				{cells.map((day, idx) => {
+					if (day === null) {
+						return (
+							<div
+								key={`empty-${idx}`}
+								className={cn(
+									'h-8',
+									// Newspaper border rule: right+bottom only
+									(idx + 1) % 7 !== 0 && 'border-r-[length:var(--border-width)] border-foreground/20',
+									idx < cells.length - 7 && 'border-b-[length:var(--border-width)] border-foreground/20',
+								)}
+							/>
+						)
+					}
+					const sel = isSelected(day)
+					const tod = isToday(day)
+					const dis = isDisabled(day)
+					return (
+						<button
+							key={day}
+							type="button"
+							disabled={dis}
+							onClick={() => !dis && onSelect?.(new Date(year, month, day))}
+							className={cn(
+								'flex h-8 items-center justify-center text-xs',
+								// Newspaper border rule
+								(idx + 1) % 7 !== 0 && 'border-r-[length:var(--border-width)] border-foreground/20',
+								idx < cells.length - 7 && 'border-b-[length:var(--border-width)] border-foreground/20',
+								sel
+									? 'bg-foreground text-background'
+									: tod
+									? 'border-[length:var(--border-width)] border-dashed border-foreground font-medium'
+									: 'hover:bg-accent hover:text-accent-foreground',
+								dis && 'pointer-events-none opacity-30',
+							)}
+						>
+							{day}
+						</button>
+					)
+				})}
+			</div>
+		</div>
+	)
+}
+
+export { Calendar }