@leitware/dockets 0.1.0

package/templates/ui/sidebar.tsx

@@ -0,0 +1,222 @@
+'use client'
+
+// Sidebar layout primitives.
+// Implements a collapsible rail sidebar with "borders never stack" applied:
+//  - Sidebar has border-r-[length:var(--border-width)] (no left border — page edge is implied)
+//  - Content fills remaining space with no left border (avoids double border with sidebar)
+
+import * as React from 'react'
+import { PanelLeftIcon } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+interface SidebarContextValue {
+	open: boolean
+	setOpen: (v: boolean) => void
+	toggleOpen: () => void
+}
+
+const SidebarContext = React.createContext<SidebarContextValue>({
+	open: true,
+	setOpen: () => {},
+	toggleOpen: () => {},
+})
+
+function useSidebar() {
+	return React.useContext(SidebarContext)
+}
+
+interface SidebarProviderProps extends React.ComponentProps<'div'> {
+	defaultOpen?: boolean
+}
+
+function SidebarProvider({
+	defaultOpen = true,
+	className,
+	children,
+	...props
+}: SidebarProviderProps) {
+	const [open, setOpen] = React.useState(defaultOpen)
+	const toggleOpen = () => setOpen((v) => !v)
+	return (
+		<SidebarContext.Provider value={{ open, setOpen, toggleOpen }}>
+			<div
+				data-slot="sidebar-provider"
+				data-sidebar-open={open}
+				className={cn('flex h-full w-full', className)}
+				{...props}
+			>
+				{children}
+			</div>
+		</SidebarContext.Provider>
+	)
+}
+
+function Sidebar({ className, children, ...props }: React.ComponentProps<'aside'>) {
+	const { open } = useSidebar()
+	return (
+		<aside
+			data-slot="sidebar"
+			data-open={open}
+			className={cn(
+				'relative flex flex-col border-r-[length:var(--border-width)] border-foreground bg-card text-card-foreground transition-[width] duration-200',
+				open ? 'w-60' : 'w-12',
+				className,
+			)}
+			{...props}
+		>
+			{children}
+		</aside>
+	)
+}
+
+function SidebarHeader({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="sidebar-header"
+			className={cn(
+				'flex items-center border-b-[length:var(--border-width)] border-foreground px-3 py-2',
+				className,
+			)}
+			{...props}
+		/>
+	)
+}
+
+function SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="sidebar-content"
+			className={cn('flex flex-1 flex-col overflow-y-auto overflow-x-hidden py-2', className)}
+			{...props}
+		/>
+	)
+}
+
+function SidebarFooter({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="sidebar-footer"
+			className={cn(
+				'flex items-center border-t-[length:var(--border-width)] border-foreground px-3 py-2',
+				className,
+			)}
+			{...props}
+		/>
+	)
+}
+
+function SidebarNav({ className, ...props }: React.ComponentProps<'nav'>) {
+	return (
+		<nav
+			data-slot="sidebar-nav"
+			className={cn('flex flex-col gap-0 px-1', className)}
+			{...props}
+		/>
+	)
+}
+
+function SidebarNavItem({ className, active, ...props }: React.ComponentProps<'a'> & { active?: boolean }) {
+	const { open } = useSidebar()
+	return (
+		<a
+			data-slot="sidebar-nav-item"
+			data-active={active}
+			className={cn(
+				'flex min-h-9 items-center gap-2 rounded-[var(--radius)] px-2 text-xs font-medium uppercase tracking-wider',
+				'hover:bg-accent hover:text-accent-foreground',
+				active && 'bg-foreground text-background',
+				!open && 'justify-center px-0',
+				className,
+			)}
+			{...props}
+		/>
+	)
+}
+
+function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="sidebar-group"
+			className={cn('py-2', className)}
+			{...props}
+		/>
+	)
+}
+
+function SidebarGroupLabel({ className, ...props }: React.ComponentProps<'div'>) {
+	const { open } = useSidebar()
+	return (
+		<div
+			data-slot="sidebar-group-label"
+			className={cn(
+				'px-2 py-1 text-[10px] font-medium uppercase tracking-wider text-muted-foreground',
+				!open && 'sr-only',
+				className,
+			)}
+			{...props}
+		/>
+	)
+}
+
+function SidebarTrigger({ className, ...props }: React.ComponentProps<'button'>) {
+	const { toggleOpen } = useSidebar()
+	return (
+		<button
+			type="button"
+			data-slot="sidebar-trigger"
+			onClick={toggleOpen}
+			className={cn(
+				'flex size-8 items-center justify-center rounded-[var(--radius)] text-muted-foreground hover:text-foreground',
+				className,
+			)}
+			aria-label="Toggle sidebar"
+			{...props}
+		>
+			<PanelLeftIcon className="size-4" />
+		</button>
+	)
+}
+
+function SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {
+	return (
+		<main
+			data-slot="sidebar-inset"
+			className={cn('flex flex-1 flex-col overflow-hidden', className)}
+			{...props}
+		/>
+	)
+}
+
+function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
+	const { toggleOpen } = useSidebar()
+	return (
+		<button
+			type="button"
+			data-slot="sidebar-rail"
+			onClick={toggleOpen}
+			aria-label="Toggle sidebar"
+			tabIndex={-1}
+			className={cn(
+				'absolute inset-y-0 right-0 z-20 hidden w-1 cursor-col-resize hover:bg-foreground/10 sm:flex',
+				className,
+			)}
+			{...props}
+		/>
+	)
+}
+
+export {
+	SidebarProvider,
+	Sidebar,
+	SidebarHeader,
+	SidebarContent,
+	SidebarFooter,
+	SidebarNav,
+	SidebarNavItem,
+	SidebarGroup,
+	SidebarGroupLabel,
+	SidebarTrigger,
+	SidebarInset,
+	SidebarRail,
+	useSidebar,
+}

package/templates/ui/skeleton.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="skeleton"
+			className={cn('animate-pulse rounded-[var(--radius)] bg-muted', className)}
+			{...props}
+		/>
+	)
+}
+
+// Dot-fill pattern variant — matches the dockets receipt aesthetic
+function SkeletonText({ lines = 3, className, ...props }: React.ComponentProps<'div'> & { lines?: number }) {
+	return (
+		<div
+			data-slot="skeleton-text"
+			className={cn('flex flex-col gap-2', className)}
+			{...props}
+		>
+			{Array.from({ length: lines }, (_, i) => (
+				<div
+					key={i}
+					className={cn(
+						'h-3 animate-pulse rounded-[var(--radius)] bg-muted',
+						i === lines - 1 && 'w-3/4',
+					)}
+				/>
+			))}
+		</div>
+	)
+}
+
+export { Skeleton, SkeletonText }

package/templates/ui/slider.tsx

@@ -0,0 +1,60 @@
+'use client'
+
+import { Slider as SliderPrimitive } from '@base-ui/react/slider'
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+function Slider({ className, ...props }: SliderPrimitive.Root.Props) {
+	return (
+		<SliderPrimitive.Root
+			data-slot="slider"
+			className={cn('relative flex w-full touch-none items-center select-none', className)}
+			{...props}
+		>
+			<SliderTrack>
+				<SliderFill />
+				<SliderThumb />
+			</SliderTrack>
+		</SliderPrimitive.Root>
+	)
+}
+
+function SliderTrack({ className, ...props }: SliderPrimitive.Track.Props) {
+	return (
+		<SliderPrimitive.Track
+			data-slot="slider-track"
+			className={cn(
+				'relative h-1.5 w-full grow overflow-hidden rounded-[var(--radius)] bg-muted border-[length:var(--border-width)] border-foreground/30',
+				className,
+			)}
+			{...props}
+		/>
+	)
+}
+
+function SliderFill({ className, ...props }: SliderPrimitive.Fill.Props) {
+	return (
+		<SliderPrimitive.Fill
+			data-slot="slider-fill"
+			className={cn('absolute h-full bg-foreground', className)}
+			{...props}
+		/>
+	)
+}
+
+function SliderThumb({ className, ...props }: SliderPrimitive.Thumb.Props) {
+	return (
+		<SliderPrimitive.Thumb
+			data-slot="slider-thumb"
+			className={cn(
+				'block size-4 rounded-[var(--radius)] border-[length:var(--border-width)] border-foreground bg-card shadow-none',
+				'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
+				'disabled:pointer-events-none disabled:opacity-50',
+				className,
+			)}
+			{...props}
+		/>
+	)
+}
+
+export { Slider, SliderTrack, SliderFill, SliderThumb }

package/templates/ui/switch.tsx

@@ -0,0 +1,33 @@
+'use client'
+
+import { Switch as SwitchPrimitive } from '@base-ui/react/switch'
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+function Switch({ className, ...props }: SwitchPrimitive.Root.Props) {
+	return (
+		<SwitchPrimitive.Root
+			data-slot="switch"
+			className={cn(
+				'peer inline-flex h-5 w-9 shrink-0 items-center rounded-[var(--radius)] border-[length:var(--border-width)] border-foreground bg-transparent',
+				'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
+				'disabled:cursor-not-allowed disabled:opacity-50',
+				'data-checked:bg-foreground',
+				'aria-invalid:border-destructive',
+				className,
+			)}
+			{...props}
+		>
+			<SwitchPrimitive.Thumb
+				data-slot="switch-thumb"
+				className={cn(
+					'pointer-events-none block size-3.5 rounded-[var(--radius)] border-[length:var(--border-width)] border-foreground bg-foreground shadow-none ring-0 transition-transform duration-100',
+					'translate-x-0.5',
+					'data-checked:translate-x-4 data-checked:bg-background data-checked:border-transparent',
+				)}
+			/>
+		</SwitchPrimitive.Root>
+	)
+}
+
+export { Switch }

package/templates/ui/table.tsx

@@ -0,0 +1,114 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+// Receipt-style data table.
+// "Borders never stack" rule applied:
+//  - Table has border-[length:var(--border-width)] (outer frame)
+//  - <tr> cells use border-b-[length:var(--border-width)] except last row
+//  - <td>/<th> use border-r-[length:var(--border-width)] except last column
+//  No cell has a top or left border — the outer frame + sibling borders handle it.
+
+function Table({ className, ...props }: React.ComponentProps<'table'>) {
+	return (
+		<div
+			data-slot="table-wrapper"
+			className="relative w-full overflow-x-auto rounded-[var(--radius)] border-[length:var(--border-width)] border-foreground"
+		>
+			<table
+				data-slot="table"
+				className={cn('w-full caption-bottom border-collapse text-xs', className)}
+				{...props}
+			/>
+		</div>
+	)
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
+	return (
+		<thead
+			data-slot="table-header"
+			className={cn('bg-card', className)}
+			{...props}
+		/>
+	)
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
+	return (
+		<tbody
+			data-slot="table-body"
+			className={cn('[&_tr:last-child]:border-0', className)}
+			{...props}
+		/>
+	)
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {
+	return (
+		<tfoot
+			data-slot="table-footer"
+			className={cn(
+				'border-t-[length:var(--border-width)] border-foreground bg-card font-medium',
+				className,
+			)}
+			{...props}
+		/>
+	)
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
+	return (
+		<tr
+			data-slot="table-row"
+			className={cn(
+				// Row separator: border-b, except last row (handled by TableBody [last-child]:border-0)
+				'border-b-[length:var(--border-width)] border-foreground/30 hover:bg-accent/50 data-selected:bg-accent',
+				className,
+			)}
+			{...props}
+		/>
+	)
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
+	return (
+		<th
+			data-slot="table-head"
+			className={cn(
+				'h-9 px-3 text-left align-middle text-[10px] font-medium uppercase tracking-wider text-muted-foreground',
+				// Column separator: right border except last column
+				'[&:not(:last-child)]:border-r-[length:var(--border-width)] [&:not(:last-child)]:border-foreground/30',
+				'border-b-[length:var(--border-width)] border-foreground',
+				className,
+			)}
+			{...props}
+		/>
+	)
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
+	return (
+		<td
+			data-slot="table-cell"
+			className={cn(
+				'px-3 py-2 align-middle text-xs/relaxed',
+				// Column separator: right border except last column
+				'[&:not(:last-child)]:border-r-[length:var(--border-width)] [&:not(:last-child)]:border-foreground/20',
+				className,
+			)}
+			{...props}
+		/>
+	)
+}
+
+function TableCaption({ className, ...props }: React.ComponentProps<'caption'>) {
+	return (
+		<caption
+			data-slot="table-caption"
+			className={cn('mt-2 text-xs text-muted-foreground', className)}
+			{...props}
+		/>
+	)
+}
+
+export { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption }

package/templates/ui/tabs.tsx

@@ -0,0 +1,79 @@
+import { Tabs as TabsPrimitive } from '@base-ui/react/tabs'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+function Tabs({ className, orientation = 'horizontal', ...props }: TabsPrimitive.Root.Props) {
+	return (
+		<TabsPrimitive.Root
+			data-slot="tabs"
+			data-orientation={orientation}
+			className={cn('group/tabs flex flex-col gap-0', className)}
+			{...props}
+		/>
+	)
+}
+
+const tabsListVariants = cva(
+	'group/tabs-list flex w-full items-stretch rounded-[var(--radius)] text-foreground h-10 [&>*:not([role=tab])]:hidden',
+	{
+		variants: {
+			variant: {
+				default: 'border-[length:var(--border-width)] border-foreground',
+				line: 'border-b-[length:var(--border-width)] border-foreground',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	},
+)
+
+function TabsList({
+	className,
+	variant = 'default',
+	...props
+}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
+	return (
+		<TabsPrimitive.List
+			data-slot="tabs-list"
+			data-variant={variant}
+			className={cn(tabsListVariants({ variant }), className)}
+			{...props}
+		/>
+	)
+}
+
+function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
+	return (
+		<TabsPrimitive.Tab
+			data-slot="tabs-trigger"
+			className={cn(
+				'flex-1 inline-flex items-center justify-center h-full text-xs font-medium uppercase tracking-wider whitespace-nowrap',
+				'bg-card text-card-foreground',
+				// Separator between tabs — single border drawn only once (no stacking)
+				'[&:not(:first-child)]:border-l-[length:var(--border-width)] [&:not(:first-child)]:border-foreground',
+				'disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50',
+				'data-active:bg-foreground data-active:text-background',
+				'group-data-[variant=line]/tabs-list:border-l-0 group-data-[variant=line]/tabs-list:[&:not(:first-child)]:border-l-0',
+				'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:text-foreground/60',
+				'group-data-[variant=line]/tabs-list:data-active:bg-transparent group-data-[variant=line]/tabs-list:data-active:text-foreground group-data-[variant=line]/tabs-list:data-active:border-b-2 group-data-[variant=line]/tabs-list:data-active:border-b-foreground',
+				'[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',
+				className,
+			)}
+			{...props}
+		/>
+	)
+}
+
+function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
+	return (
+		<TabsPrimitive.Panel
+			data-slot="tabs-content"
+			className={cn('flex-1 text-xs/relaxed outline-none', className)}
+			{...props}
+		/>
+	)
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }

package/templates/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
+	return (
+		<textarea
+			data-slot="textarea"
+			className={cn(
+				'flex field-sizing-content min-h-16 w-full rounded-[var(--radius)] border-[length:var(--border-width)] border-input bg-transparent px-2.5 py-2 text-xs outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 md:text-xs dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',
+				className,
+			)}
+			{...props}
+		/>
+	)
+}
+
+export { Textarea }

package/templates/ui/toast.tsx

@@ -0,0 +1,139 @@
+'use client'
+
+// Lightweight toast system — no sonner dependency.
+// Usage:
+//   1. Wrap your app with <ToastProvider />
+//   2. Call useToast() to get the `toast` function
+//   3. <Toaster /> renders the stack (add to your root layout)
+
+import * as React from 'react'
+import { XIcon } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+export type ToastVariant = 'default' | 'destructive' | 'success'
+
+export interface ToastData {
+	id: string
+	title?: string
+	description?: string
+	variant?: ToastVariant
+	duration?: number
+}
+
+interface ToastContextValue {
+	toasts: ToastData[]
+	toast: (opts: Omit<ToastData, 'id'>) => void
+	dismiss: (id: string) => void
+}
+
+const ToastContext = React.createContext<ToastContextValue>({
+	toasts: [],
+	toast: () => {},
+	dismiss: () => {},
+})
+
+function ToastProvider({ children }: { children: React.ReactNode }) {
+	const [toasts, setToasts] = React.useState<ToastData[]>([])
+
+	const toast = React.useCallback((opts: Omit<ToastData, 'id'>) => {
+		const id = Math.random().toString(36).slice(2)
+		setToasts((prev) => [...prev, { ...opts, id }])
+		setTimeout(() => {
+			setToasts((prev) => prev.filter((t) => t.id !== id))
+		}, opts.duration ?? 4000)
+	}, [])
+
+	const dismiss = React.useCallback((id: string) => {
+		setToasts((prev) => prev.filter((t) => t.id !== id))
+	}, [])
+
+	return (
+		<ToastContext.Provider value={{ toasts, toast, dismiss }}>
+			{children}
+		</ToastContext.Provider>
+	)
+}
+
+function useToast() {
+	return React.useContext(ToastContext)
+}
+
+const variantClasses: Record<ToastVariant, string> = {
+	default: 'border-foreground bg-card text-card-foreground',
+	destructive: 'border-destructive bg-destructive/10 text-destructive',
+	success: 'border-foreground bg-foreground text-background',
+}
+
+function Toast({
+	title,
+	description,
+	variant = 'default',
+	onDismiss,
+	className,
+}: Omit<ToastData, 'id'> & {
+	onDismiss?: () => void
+	className?: string
+}) {
+	return (
+		<div
+			data-slot="toast"
+			role="status"
+			aria-live="polite"
+			className={cn(
+				'relative flex w-full max-w-sm flex-col gap-1 rounded-[var(--radius)] border-[length:var(--border-width)] p-3 text-xs/relaxed shadow-none',
+				variantClasses[variant],
+				className,
+			)}
+		>
+			{title && (
+				<div
+					data-slot="toast-title"
+					className="font-medium uppercase tracking-wider"
+				>
+					{title}
+				</div>
+			)}
+			{description && (
+				<div data-slot="toast-description" className="text-xs/relaxed opacity-90">
+					{description}
+				</div>
+			)}
+			{onDismiss && (
+				<button
+					type="button"
+					onClick={onDismiss}
+					className="absolute top-2 right-2 flex size-5 items-center justify-center opacity-60 hover:opacity-100"
+					aria-label="Dismiss"
+				>
+					<XIcon className="size-3.5" />
+				</button>
+			)}
+		</div>
+	)
+}
+
+function Toaster({ className }: { className?: string }) {
+	const { toasts, dismiss } = useToast()
+	if (toasts.length === 0) return null
+	return (
+		<div
+			data-slot="toaster"
+			className={cn(
+				'fixed bottom-4 right-4 z-[100] flex max-h-screen w-full max-w-sm flex-col-reverse gap-2 sm:bottom-4 sm:right-4',
+				className,
+			)}
+		>
+			{toasts.map((t) => (
+				<Toast
+					key={t.id}
+					title={t.title}
+					description={t.description}
+					variant={t.variant}
+					onDismiss={() => dismiss(t.id)}
+				/>
+			))}
+		</div>
+	)
+}
+
+export { ToastProvider, Toaster, Toast, useToast }