@leitware/dockets 0.1.0

package/templates/ui/command.tsx

@@ -0,0 +1,148 @@
+'use client'
+
+import * as React from 'react'
+import { SearchIcon } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+interface CommandContextValue {
+	query: string
+	setQuery: (q: string) => void
+}
+
+const CommandContext = React.createContext<CommandContextValue>({
+	query: '',
+	setQuery: () => {},
+})
+
+function Command({ className, children, ...props }: React.ComponentProps<'div'>) {
+	const [query, setQuery] = React.useState('')
+	return (
+		<CommandContext.Provider value={{ query, setQuery }}>
+			<div
+				data-slot="command"
+				className={cn(
+					'flex flex-col rounded-[var(--radius)] border-[length:var(--border-width)] border-foreground bg-popover text-popover-foreground',
+					className,
+				)}
+				{...props}
+			>
+				{children}
+			</div>
+		</CommandContext.Provider>
+	)
+}
+
+function CommandInput({ className, ...props }: React.ComponentProps<'input'>) {
+	const { setQuery } = React.useContext(CommandContext)
+	return (
+		<div
+			data-slot="command-input-wrapper"
+			className="flex items-center border-b-[length:var(--border-width)] border-foreground px-2"
+		>
+			<SearchIcon className="size-3.5 shrink-0 text-muted-foreground" />
+			<input
+				data-slot="command-input"
+				type="text"
+				role="combobox"
+				autoComplete="off"
+				autoCorrect="off"
+				spellCheck={false}
+				onChange={(e) => setQuery(e.target.value)}
+				className={cn(
+					'h-9 w-full bg-transparent px-2 text-xs placeholder:text-muted-foreground outline-none disabled:cursor-not-allowed disabled:opacity-50',
+					className,
+				)}
+				{...props}
+			/>
+		</div>
+	)
+}
+
+function CommandList({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="command-list"
+			role="listbox"
+			className={cn('max-h-64 overflow-y-auto overflow-x-hidden', className)}
+			{...props}
+		/>
+	)
+}
+
+function CommandEmpty({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="command-empty"
+			className={cn('py-6 text-center text-xs text-muted-foreground', className)}
+			{...props}
+		/>
+	)
+}
+
+function CommandGroup({ className, heading, children, ...props }: React.ComponentProps<'div'> & { heading?: string }) {
+	return (
+		<div data-slot="command-group" className={cn('py-1', className)} {...props}>
+			{heading && (
+				<div className="px-2 py-1 text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
+					{heading}
+				</div>
+			)}
+			{children}
+		</div>
+	)
+}
+
+function CommandItem({ className, onSelect, children, ...props }: React.ComponentProps<'div'> & { onSelect?: () => void }) {
+	return (
+		<div
+			data-slot="command-item"
+			role="option"
+			onClick={onSelect}
+			onKeyDown={(e) => {
+				if (e.key === 'Enter' || e.key === ' ') {
+					e.preventDefault()
+					onSelect?.()
+				}
+			}}
+			tabIndex={0}
+			className={cn(
+				'flex cursor-default select-none items-center gap-2 rounded-[var(--radius)] px-2 py-1.5 text-xs outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+				className,
+			)}
+			{...props}
+		>
+			{children}
+		</div>
+	)
+}
+
+function CommandSeparator({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="command-separator"
+			className={cn('-mx-1 h-[length:var(--border-width)] bg-border', className)}
+			{...props}
+		/>
+	)
+}
+
+function CommandShortcut({ className, ...props }: React.ComponentProps<'span'>) {
+	return (
+		<span
+			data-slot="command-shortcut"
+			className={cn('ml-auto text-[10px] tracking-widest text-muted-foreground', className)}
+			{...props}
+		/>
+	)
+}
+
+export {
+	Command,
+	CommandInput,
+	CommandList,
+	CommandEmpty,
+	CommandGroup,
+	CommandItem,
+	CommandSeparator,
+	CommandShortcut,
+}

package/templates/ui/context-menu.tsx

@@ -0,0 +1,212 @@
+'use client'
+
+import { Menu as MenuPrimitive } from '@base-ui/react/menu'
+import { CheckIcon, ChevronRightIcon } from 'lucide-react'
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+function ContextMenu({ ...props }: MenuPrimitive.Root.Props) {
+	return <MenuPrimitive.Root data-slot="context-menu" {...props} />
+}
+
+function ContextMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {
+	return <MenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
+}
+
+function ContextMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {
+	return <MenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
+}
+
+function ContextMenuContent({
+	className,
+	side = 'bottom',
+	align = 'start',
+	sideOffset = 4,
+	...props
+}: MenuPrimitive.Popup.Props &
+	Pick<MenuPrimitive.Positioner.Props, 'align' | 'side' | 'sideOffset'>) {
+	return (
+		<MenuPrimitive.Portal>
+			<MenuPrimitive.Positioner
+				side={side}
+				align={align}
+				sideOffset={sideOffset}
+				className="isolate z-50 outline-none"
+			>
+				<MenuPrimitive.Popup
+					data-slot="context-menu-content"
+					className={cn(
+						'z-50 min-w-32 origin-(--transform-origin) overflow-hidden rounded-[var(--radius)] border-[length:var(--border-width)] border-foreground bg-popover text-popover-foreground shadow-none duration-100 outline-none 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}
+				/>
+			</MenuPrimitive.Positioner>
+		</MenuPrimitive.Portal>
+	)
+}
+
+function ContextMenuItem({
+	className,
+	inset,
+	variant = 'default',
+	...props
+}: MenuPrimitive.Item.Props & {
+	inset?: boolean
+	variant?: 'default' | 'destructive'
+}) {
+	return (
+		<MenuPrimitive.Item
+			data-slot="context-menu-item"
+			data-inset={inset}
+			data-variant={variant}
+			className={cn(
+				"relative flex cursor-default items-center gap-2 rounded-[var(--radius)] px-2 py-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		/>
+	)
+}
+
+function ContextMenuCheckboxItem({
+	className,
+	children,
+	checked,
+	...props
+}: MenuPrimitive.CheckboxItem.Props) {
+	return (
+		<MenuPrimitive.CheckboxItem
+			data-slot="context-menu-checkbox-item"
+			className={cn(
+				"relative flex 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 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			checked={checked}
+			{...props}
+		>
+			<span className="pointer-events-none absolute right-2 flex items-center justify-center">
+				<MenuPrimitive.CheckboxItemIndicator>
+					<CheckIcon className="size-3" />
+				</MenuPrimitive.CheckboxItemIndicator>
+			</span>
+			{children}
+		</MenuPrimitive.CheckboxItem>
+	)
+}
+
+function ContextMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
+	return <MenuPrimitive.RadioGroup data-slot="context-menu-radio-group" {...props} />
+}
+
+function ContextMenuRadioItem({
+	className,
+	children,
+	...props
+}: MenuPrimitive.RadioItem.Props) {
+	return (
+		<MenuPrimitive.RadioItem
+			data-slot="context-menu-radio-item"
+			className={cn(
+				"relative flex 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 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		>
+			<span className="pointer-events-none absolute right-2 flex items-center justify-center">
+				<MenuPrimitive.RadioItemIndicator>
+					<CheckIcon className="size-3" />
+				</MenuPrimitive.RadioItemIndicator>
+			</span>
+			{children}
+		</MenuPrimitive.RadioItem>
+	)
+}
+
+function ContextMenuLabel({
+	className,
+	inset,
+	...props
+}: React.ComponentProps<'div'> & { inset?: boolean }) {
+	return (
+		<div
+			data-slot="context-menu-label"
+			data-inset={inset}
+			className={cn('px-2 py-2 text-xs text-muted-foreground data-inset:pl-7', className)}
+			{...props}
+		/>
+	)
+}
+
+function ContextMenuSeparator({ className, ...props }: MenuPrimitive.Separator.Props) {
+	return (
+		<MenuPrimitive.Separator
+			data-slot="context-menu-separator"
+			className={cn('-mx-1 h-[length:var(--border-width)] bg-border', className)}
+			{...props}
+		/>
+	)
+}
+
+function ContextMenuShortcut({ className, ...props }: React.ComponentProps<'span'>) {
+	return (
+		<span
+			data-slot="context-menu-shortcut"
+			className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}
+			{...props}
+		/>
+	)
+}
+
+function ContextMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {
+	return <MenuPrimitive.SubmenuRoot data-slot="context-menu-sub" {...props} />
+}
+
+function ContextMenuSubTrigger({
+	className,
+	children,
+	inset,
+	...props
+}: MenuPrimitive.SubmenuTrigger.Props & { inset?: boolean }) {
+	return (
+		<MenuPrimitive.SubmenuTrigger
+			data-slot="context-menu-sub-trigger"
+			data-inset={inset}
+			className={cn(
+				"flex cursor-default items-center gap-2 rounded-[var(--radius)] px-2 py-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<ChevronRightIcon className="ml-auto" />
+		</MenuPrimitive.SubmenuTrigger>
+	)
+}
+
+function ContextMenuSubContent({ className, ...props }: React.ComponentProps<typeof ContextMenuContent>) {
+	return (
+		<ContextMenuContent
+			data-slot="context-menu-sub-content"
+			className={cn('w-auto min-w-[96px]', className)}
+			{...props}
+		/>
+	)
+}
+
+export {
+	ContextMenu,
+	ContextMenuTrigger,
+	ContextMenuPortal,
+	ContextMenuContent,
+	ContextMenuItem,
+	ContextMenuCheckboxItem,
+	ContextMenuRadioGroup,
+	ContextMenuRadioItem,
+	ContextMenuLabel,
+	ContextMenuSeparator,
+	ContextMenuShortcut,
+	ContextMenuSub,
+	ContextMenuSubTrigger,
+	ContextMenuSubContent,
+}

package/templates/ui/dialog.tsx

@@ -0,0 +1,138 @@
+'use client'
+
+import { Dialog as DialogPrimitive } from '@base-ui/react/dialog'
+import { XIcon } from 'lucide-react'
+import type * as React from 'react'
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+
+function Dialog({ ...props }: DialogPrimitive.Root.Props) {
+	return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
+	return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
+	return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
+	return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({ className, ...props }: DialogPrimitive.Backdrop.Props) {
+	return (
+		<DialogPrimitive.Backdrop
+			data-slot="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 DialogContent({
+	className,
+	children,
+	showCloseButton = true,
+	...props
+}: DialogPrimitive.Popup.Props & {
+	showCloseButton?: boolean
+}) {
+	return (
+		<DialogPortal>
+			<DialogOverlay />
+			<DialogPrimitive.Popup
+				data-slot="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}
+				{showCloseButton && (
+					<DialogPrimitive.Close
+						data-slot="dialog-close"
+						render={<Button variant="ghost" className="absolute top-2 right-2" size="icon" />}
+					>
+						<XIcon />
+						<span className="sr-only">Close</span>
+					</DialogPrimitive.Close>
+				)}
+			</DialogPrimitive.Popup>
+		</DialogPortal>
+	)
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="dialog-header"
+			className={cn('flex flex-col gap-1 text-left', className)}
+			{...props}
+		/>
+	)
+}
+
+function DialogFooter({
+	className,
+	showCloseButton = false,
+	children,
+	...props
+}: React.ComponentProps<'div'> & {
+	showCloseButton?: boolean
+}) {
+	return (
+		<div
+			data-slot="dialog-footer"
+			className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
+			{...props}
+		>
+			{children}
+			{showCloseButton && (
+				<DialogPrimitive.Close render={<Button variant="outline" />}>Close</DialogPrimitive.Close>
+			)}
+		</div>
+	)
+}
+
+function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
+	return (
+		<DialogPrimitive.Title
+			data-slot="dialog-title"
+			className={cn('text-sm font-medium', className)}
+			{...props}
+		/>
+	)
+}
+
+function DialogDescription({ className, ...props }: DialogPrimitive.Description.Props) {
+	return (
+		<DialogPrimitive.Description
+			data-slot="dialog-description"
+			className={cn(
+				'text-xs/relaxed text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground',
+				className,
+			)}
+			{...props}
+		/>
+	)
+}
+
+export {
+	Dialog,
+	DialogClose,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogOverlay,
+	DialogPortal,
+	DialogTitle,
+	DialogTrigger,
+}

package/templates/ui/drawer.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 DrawerSide = 'left' | 'right' | 'top' | 'bottom'
+
+function Drawer({ ...props }: DialogPrimitive.Root.Props) {
+	return <DialogPrimitive.Root data-slot="drawer" {...props} />
+}
+
+function DrawerTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
+	return <DialogPrimitive.Trigger data-slot="drawer-trigger" {...props} />
+}
+
+function DrawerClose({ ...props }: DialogPrimitive.Close.Props) {
+	return <DialogPrimitive.Close data-slot="drawer-close" {...props} />
+}
+
+function DrawerPortal({ ...props }: DialogPrimitive.Portal.Props) {
+	return <DialogPrimitive.Portal data-slot="drawer-portal" {...props} />
+}
+
+function DrawerOverlay({ className, ...props }: DialogPrimitive.Backdrop.Props) {
+	return (
+		<DialogPrimitive.Backdrop
+			data-slot="drawer-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 sideClasses: Record<DrawerSide, string> = {
+	left: 'inset-y-0 left-0 h-full w-3/4 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 max-w-sm border-l-[length:var(--border-width)] data-open:slide-in-from-right data-closed:slide-out-to-right',
+	top: 'inset-x-0 top-0 w-full border-b-[length:var(--border-width)] data-open:slide-in-from-top data-closed:slide-out-to-top',
+	bottom: 'inset-x-0 bottom-0 w-full border-t-[length:var(--border-width)] data-open:slide-in-from-bottom data-closed:slide-out-to-bottom',
+}
+
+function DrawerContent({
+	className,
+	children,
+	side = 'right',
+	showCloseButton = true,
+	...props
+}: DialogPrimitive.Popup.Props & {
+	side?: DrawerSide
+	showCloseButton?: boolean
+}) {
+	return (
+		<DrawerPortal>
+			<DrawerOverlay />
+			<DialogPrimitive.Popup
+				data-slot="drawer-content"
+				className={cn(
+					'fixed z-50 flex flex-col gap-4 rounded-[var(--radius)] border-foreground bg-card p-4 text-xs/relaxed text-card-foreground duration-200 outline-none data-open:animate-in data-closed:animate-out data-closed:duration-200',
+					sideClasses[side],
+					className,
+				)}
+				{...props}
+			>
+				{showCloseButton && (
+					<DialogPrimitive.Close
+						data-slot="drawer-close"
+						className="absolute top-3 right-3 flex size-7 items-center justify-center text-muted-foreground hover:text-foreground"
+						aria-label="Close drawer"
+					>
+						<XIcon className="size-4" />
+					</DialogPrimitive.Close>
+				)}
+				{children}
+			</DialogPrimitive.Popup>
+		</DrawerPortal>
+	)
+}
+
+function DrawerHeader({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="drawer-header"
+			className={cn('flex flex-col gap-1', className)}
+			{...props}
+		/>
+	)
+}
+
+function DrawerFooter({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="drawer-footer"
+			className={cn('mt-auto flex flex-col gap-2', className)}
+			{...props}
+		/>
+	)
+}
+
+function DrawerTitle({ className, ...props }: DialogPrimitive.Title.Props) {
+	return (
+		<DialogPrimitive.Title
+			data-slot="drawer-title"
+			className={cn('text-sm font-medium uppercase tracking-wider', className)}
+			{...props}
+		/>
+	)
+}
+
+function DrawerDescription({ className, ...props }: DialogPrimitive.Description.Props) {
+	return (
+		<DialogPrimitive.Description
+			data-slot="drawer-description"
+			className={cn('text-xs/relaxed text-muted-foreground', className)}
+			{...props}
+		/>
+	)
+}
+
+export {
+	Drawer,
+	DrawerTrigger,
+	DrawerClose,
+	DrawerPortal,
+	DrawerOverlay,
+	DrawerContent,
+	DrawerHeader,
+	DrawerFooter,
+	DrawerTitle,
+	DrawerDescription,
+}