@leitware/dockets 0.1.0

package/templates/ui/resizable.tsx

@@ -0,0 +1,140 @@
+'use client'
+
+import * as React from 'react'
+import { GripVerticalIcon } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+// Resizable panels implemented with pointer events — no heavy dependency.
+// "Borders never stack" rule: the handle IS the border, so panels have no border of their own.
+
+interface ResizablePanelGroupProps extends React.ComponentProps<'div'> {
+	direction?: 'horizontal' | 'vertical'
+}
+
+function ResizablePanelGroup({
+	className,
+	direction = 'horizontal',
+	children,
+	...props
+}: ResizablePanelGroupProps) {
+	return (
+		<div
+			data-slot="resizable-panel-group"
+			data-direction={direction}
+			className={cn(
+				'flex w-full rounded-[var(--radius)]',
+				direction === 'horizontal' ? 'flex-row' : 'flex-col',
+				className,
+			)}
+			{...props}
+		>
+			{children}
+		</div>
+	)
+}
+
+interface ResizablePanelProps extends React.ComponentProps<'div'> {
+	defaultSize?: number
+	minSize?: number
+}
+
+function ResizablePanel({
+	className,
+	defaultSize,
+	style,
+	...props
+}: ResizablePanelProps) {
+	return (
+		<div
+			data-slot="resizable-panel"
+			style={{ flexBasis: defaultSize ? `${defaultSize}%` : undefined, flexGrow: defaultSize ? 0 : 1, ...style }}
+			className={cn('overflow-hidden', className)}
+			{...props}
+		/>
+	)
+}
+
+interface ResizableHandleProps extends React.ComponentProps<'div'> {
+	withHandle?: boolean
+	direction?: 'horizontal' | 'vertical'
+}
+
+function ResizableHandle({
+	className,
+	withHandle = false,
+	direction = 'horizontal',
+	...props
+}: ResizableHandleProps) {
+	const handleRef = React.useRef<HTMLDivElement>(null)
+
+	const onPointerDown = React.useCallback(
+		(e: React.PointerEvent<HTMLDivElement>) => {
+			e.preventDefault()
+			const handle = handleRef.current
+			if (!handle) return
+
+			const prev = handle.previousElementSibling as HTMLElement | null
+			const next = handle.nextElementSibling as HTMLElement | null
+			if (!prev || !next) return
+
+			const startX = e.clientX
+			const startY = e.clientY
+			const prevSize = direction === 'horizontal' ? prev.offsetWidth : prev.offsetHeight
+			const nextSize = direction === 'horizontal' ? next.offsetWidth : next.offsetHeight
+			const total = prevSize + nextSize
+
+			handle.setPointerCapture(e.pointerId)
+
+			const onMove = (moveEvent: PointerEvent) => {
+				const delta =
+					direction === 'horizontal'
+						? moveEvent.clientX - startX
+						: moveEvent.clientY - startY
+				const newPrev = Math.min(Math.max(prevSize + delta, 80), total - 80)
+				const newNext = total - newPrev
+				prev.style.flexBasis = `${newPrev}px`
+				next.style.flexBasis = `${newNext}px`
+				prev.style.flexGrow = '0'
+				next.style.flexGrow = '0'
+			}
+
+			const onUp = () => {
+				handle.removeEventListener('pointermove', onMove as EventListener)
+				handle.removeEventListener('pointerup', onUp)
+			}
+
+			handle.addEventListener('pointermove', onMove as EventListener)
+			handle.addEventListener('pointerup', onUp)
+		},
+		[direction],
+	)
+
+	return (
+		<div
+			ref={handleRef}
+			data-slot="resizable-handle"
+			onPointerDown={onPointerDown}
+			className={cn(
+				'relative flex shrink-0 items-center justify-center bg-border',
+				direction === 'horizontal'
+					? 'w-[length:var(--border-width)] cursor-col-resize'
+					: 'h-[length:var(--border-width)] cursor-row-resize',
+				'after:absolute after:z-10',
+				direction === 'horizontal'
+					? 'after:inset-y-0 after:w-3 after:-translate-x-1/2'
+					: 'after:inset-x-0 after:h-3 after:-translate-y-1/2',
+				'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
+				className,
+			)}
+			{...props}
+		>
+			{withHandle && (
+				<div className="z-10 flex h-6 w-3 items-center justify-center rounded-[var(--radius)] border-[length:var(--border-width)] border-foreground bg-card">
+					<GripVerticalIcon className="size-2.5" />
+				</div>
+			)}
+		</div>
+	)
+}
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }

package/templates/ui/scroll-area.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+// Custom scrollbar via CSS — no heavy dependency.
+// Uses scrollbar-width: thin + custom track/thumb colours via @layer utilities
+// or explicit inline styles.
+
+function ScrollArea({
+	className,
+	children,
+	orientation = 'vertical',
+	...props
+}: React.ComponentProps<'div'> & {
+	orientation?: 'vertical' | 'horizontal' | 'both'
+}) {
+	const overflowClass =
+		orientation === 'both'
+			? 'overflow-auto'
+			: orientation === 'horizontal'
+			? 'overflow-x-auto overflow-y-hidden'
+			: 'overflow-y-auto overflow-x-hidden'
+
+	return (
+		<div
+			data-slot="scroll-area"
+			className={cn(
+				'relative rounded-[var(--radius)]',
+				overflowClass,
+				// Thin system scrollbar
+				'[scrollbar-width:thin] [scrollbar-color:hsl(var(--foreground)/0.3)_transparent]',
+				// Webkit
+				'[&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar]:h-1.5',
+				'[&::-webkit-scrollbar-track]:bg-transparent',
+				'[&::-webkit-scrollbar-thumb]:rounded-[var(--radius)] [&::-webkit-scrollbar-thumb]:bg-foreground/30 [&::-webkit-scrollbar-thumb]:hover:bg-foreground/50',
+				className,
+			)}
+			{...props}
+		>
+			{children}
+		</div>
+	)
+}
+
+function ScrollBar({ className, orientation = 'vertical', ...props }: React.ComponentProps<'div'> & {
+	orientation?: 'vertical' | 'horizontal'
+}) {
+	return (
+		<div
+			data-slot="scroll-bar"
+			data-orientation={orientation}
+			className={cn(
+				'flex touch-none select-none bg-transparent',
+				orientation === 'vertical' && 'h-full w-1.5 border-l-[length:var(--border-width)] border-l-transparent p-px',
+				orientation === 'horizontal' && 'h-1.5 w-full border-t-[length:var(--border-width)] border-t-transparent p-px flex-col',
+				className,
+			)}
+			{...props}
+		>
+			<div className="relative flex-1 rounded-[var(--radius)] bg-foreground/30 hover:bg-foreground/50" />
+		</div>
+	)
+}
+
+export { ScrollArea, ScrollBar }

package/templates/ui/select.tsx

@@ -0,0 +1,186 @@
+import { Select as SelectPrimitive } from '@base-ui/react/select'
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react'
+import type * as React from 'react'
+import { cn } from '@/lib/utils'
+
+const Select = SelectPrimitive.Root
+
+function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {
+	return (
+		<SelectPrimitive.Group
+			data-slot="select-group"
+			className={cn('scroll-my-1', className)}
+			{...props}
+		/>
+	)
+}
+
+function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
+	return (
+		<SelectPrimitive.Value
+			data-slot="select-value"
+			className={cn('flex flex-1 text-left', className)}
+			{...props}
+		/>
+	)
+}
+
+function SelectTrigger({
+	className,
+	size = 'default',
+	children,
+	...props
+}: SelectPrimitive.Trigger.Props & {
+	size?: 'sm' | 'default'
+}) {
+	return (
+		<SelectPrimitive.Trigger
+			data-slot="select-trigger"
+			data-size={size}
+			className={cn(
+				"flex w-fit items-center justify-between gap-1.5 rounded-[var(--radius)] border-[length:var(--border-width)] border-input bg-transparent py-2 pr-2 pl-2.5 text-xs whitespace-nowrap select-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[var(--radius)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<SelectPrimitive.Icon
+				render={<ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />}
+			/>
+		</SelectPrimitive.Trigger>
+	)
+}
+
+function SelectContent({
+	className,
+	children,
+	side = 'bottom',
+	sideOffset = 6,
+	align = 'start',
+	alignOffset = 0,
+	alignItemWithTrigger = false,
+	...props
+}: SelectPrimitive.Popup.Props &
+	Pick<
+		SelectPrimitive.Positioner.Props,
+		'align' | 'alignOffset' | 'side' | 'sideOffset' | 'alignItemWithTrigger'
+	>) {
+	return (
+		<SelectPrimitive.Portal>
+			<SelectPrimitive.Positioner
+				side={side}
+				sideOffset={sideOffset}
+				align={align}
+				alignOffset={alignOffset}
+				alignItemWithTrigger={alignItemWithTrigger}
+				className="isolate z-50"
+			>
+				<SelectPrimitive.Popup
+					data-slot="select-content"
+					className={cn(
+						'relative isolate z-50 max-h-(--available-height) min-w-(--anchor-width) w-max origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-[var(--radius)] border-[length:var(--border-width)] border-foreground bg-popover text-popover-foreground shadow-none duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 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}
+				>
+					<SelectScrollUpButton />
+					<SelectPrimitive.List>{children}</SelectPrimitive.List>
+					<SelectScrollDownButton />
+				</SelectPrimitive.Popup>
+			</SelectPrimitive.Positioner>
+		</SelectPrimitive.Portal>
+	)
+}
+
+function SelectLabel({ className, ...props }: SelectPrimitive.GroupLabel.Props) {
+	return (
+		<SelectPrimitive.GroupLabel
+			data-slot="select-label"
+			className={cn('px-2 py-2 text-xs text-muted-foreground', className)}
+			{...props}
+		/>
+	)
+}
+
+function SelectItem({ className, children, ...props }: SelectPrimitive.Item.Props) {
+	return (
+		<SelectPrimitive.Item
+			data-slot="select-item"
+			className={cn(
+				"relative flex w-full cursor-default items-center gap-2 rounded-[var(--radius)] py-2 pr-8 pl-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+				className,
+			)}
+			{...props}
+		>
+			<SelectPrimitive.ItemText className="flex flex-1 shrink-0 gap-2 whitespace-nowrap">
+				{children}
+			</SelectPrimitive.ItemText>
+			<SelectPrimitive.ItemIndicator
+				render={
+					<span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
+				}
+			>
+				<CheckIcon className="pointer-events-none" />
+			</SelectPrimitive.ItemIndicator>
+		</SelectPrimitive.Item>
+	)
+}
+
+function SelectSeparator({ className, ...props }: SelectPrimitive.Separator.Props) {
+	return (
+		<SelectPrimitive.Separator
+			data-slot="select-separator"
+			className={cn('pointer-events-none -mx-1 h-[length:var(--border-width)] bg-border', className)}
+			{...props}
+		/>
+	)
+}
+
+function SelectScrollUpButton({
+	className,
+	...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {
+	return (
+		<SelectPrimitive.ScrollUpArrow
+			data-slot="select-scroll-up-button"
+			className={cn(
+				"top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		>
+			<ChevronUpIcon />
+		</SelectPrimitive.ScrollUpArrow>
+	)
+}
+
+function SelectScrollDownButton({
+	className,
+	...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {
+	return (
+		<SelectPrimitive.ScrollDownArrow
+			data-slot="select-scroll-down-button"
+			className={cn(
+				"bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		>
+			<ChevronDownIcon />
+		</SelectPrimitive.ScrollDownArrow>
+	)
+}
+
+export {
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectScrollDownButton,
+	SelectScrollUpButton,
+	SelectSeparator,
+	SelectTrigger,
+	SelectValue,
+}

package/templates/ui/separator.tsx

@@ -0,0 +1,21 @@
+'use client'
+
+import { Separator as SeparatorPrimitive } from '@base-ui/react/separator'
+
+import { cn } from '@/lib/utils'
+
+function Separator({ className, orientation = 'horizontal', ...props }: SeparatorPrimitive.Props) {
+	return (
+		<SeparatorPrimitive
+			data-slot="separator"
+			orientation={orientation}
+			className={cn(
+				'shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch',
+				className,
+			)}
+			{...props}
+		/>
+	)
+}
+
+export { Separator }

package/templates/ui/sheet.tsx

@@ -0,0 +1,134 @@
+'use client'
+
+import { Dialog as DialogPrimitive } from '@base-ui/react/dialog'
+import { XIcon } from 'lucide-react'
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+type SheetSide = 'top' | 'bottom' | 'left' | 'right'
+
+function Sheet({ ...props }: DialogPrimitive.Root.Props) {
+	return <DialogPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
+	return <DialogPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({ ...props }: DialogPrimitive.Close.Props) {
+	return <DialogPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({ ...props }: DialogPrimitive.Portal.Props) {
+	return <DialogPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({ className, ...props }: DialogPrimitive.Backdrop.Props) {
+	return (
+		<DialogPrimitive.Backdrop
+			data-slot="sheet-overlay"
+			className={cn(
+				'fixed inset-0 z-50 bg-black/20 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0',
+				className,
+			)}
+			{...props}
+		/>
+	)
+}
+
+const sheetSideClasses: Record<SheetSide, string> = {
+	top: 'inset-x-0 top-0 border-b-[length:var(--border-width)] data-open:slide-in-from-top data-closed:slide-out-to-top',
+	bottom: 'inset-x-0 bottom-0 border-t-[length:var(--border-width)] data-open:slide-in-from-bottom data-closed:slide-out-to-bottom',
+	left: 'inset-y-0 left-0 h-full w-3/4 sm:max-w-sm border-r-[length:var(--border-width)] data-open:slide-in-from-left data-closed:slide-out-to-left',
+	right: 'inset-y-0 right-0 h-full w-3/4 sm:max-w-sm border-l-[length:var(--border-width)] data-open:slide-in-from-right data-closed:slide-out-to-right',
+}
+
+function SheetContent({
+	side = 'right',
+	className,
+	children,
+	showCloseButton = true,
+	...props
+}: DialogPrimitive.Popup.Props & {
+	side?: SheetSide
+	showCloseButton?: boolean
+}) {
+	return (
+		<SheetPortal>
+			<SheetOverlay />
+			<DialogPrimitive.Popup
+				data-slot="sheet-content"
+				className={cn(
+					'fixed z-50 flex flex-col gap-4 rounded-[var(--radius)] border-foreground bg-card p-6 text-xs/relaxed text-card-foreground duration-200 outline-none data-open:animate-in data-closed:animate-out',
+					sheetSideClasses[side],
+					className,
+				)}
+				{...props}
+			>
+				{showCloseButton && (
+					<DialogPrimitive.Close
+						data-slot="sheet-close"
+						className="absolute top-4 right-4 flex size-6 items-center justify-center text-muted-foreground hover:text-foreground"
+						aria-label="Close"
+					>
+						<XIcon className="size-4" />
+					</DialogPrimitive.Close>
+				)}
+				{children}
+			</DialogPrimitive.Popup>
+		</SheetPortal>
+	)
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="sheet-header"
+			className={cn('flex flex-col gap-1', className)}
+			{...props}
+		/>
+	)
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="sheet-footer"
+			className={cn('mt-auto flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
+			{...props}
+		/>
+	)
+}
+
+function SheetTitle({ className, ...props }: DialogPrimitive.Title.Props) {
+	return (
+		<DialogPrimitive.Title
+			data-slot="sheet-title"
+			className={cn('text-sm font-medium uppercase tracking-wider', className)}
+			{...props}
+		/>
+	)
+}
+
+function SheetDescription({ className, ...props }: DialogPrimitive.Description.Props) {
+	return (
+		<DialogPrimitive.Description
+			data-slot="sheet-description"
+			className={cn('text-xs/relaxed text-muted-foreground', className)}
+			{...props}
+		/>
+	)
+}
+
+export {
+	Sheet,
+	SheetTrigger,
+	SheetClose,
+	SheetPortal,
+	SheetOverlay,
+	SheetContent,
+	SheetHeader,
+	SheetFooter,
+	SheetTitle,
+	SheetDescription,
+}