@leitware/dockets 0.1.0

package/templates/ui/dropdown-menu.tsx

@@ -0,0 +1,254 @@
+'use client'
+
+import { Menu as MenuPrimitive } from '@base-ui/react/menu'
+import { CheckIcon, ChevronRightIcon } from 'lucide-react'
+import type * as React from 'react'
+import { cn } from '@/lib/utils'
+
+function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
+	return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {
+	return <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+}
+
+function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {
+	return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />
+}
+
+function DropdownMenuContent({
+	align = 'start',
+	alignOffset = 0,
+	side = 'bottom',
+	sideOffset = 6,
+	className,
+	...props
+}: MenuPrimitive.Popup.Props &
+	Pick<MenuPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>) {
+	return (
+		<MenuPrimitive.Portal>
+			<MenuPrimitive.Positioner
+				className="isolate z-50 outline-none"
+				align={align}
+				alignOffset={alignOffset}
+				side={side}
+				sideOffset={sideOffset}
+			>
+				<MenuPrimitive.Popup
+					data-slot="dropdown-menu-content"
+					className={cn(
+						'z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 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 outline-none 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:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95',
+						className,
+					)}
+					{...props}
+				/>
+			</MenuPrimitive.Positioner>
+		</MenuPrimitive.Portal>
+	)
+}
+
+function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {
+	return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+}
+
+function DropdownMenuLabel({
+	className,
+	inset,
+	...props
+}: MenuPrimitive.GroupLabel.Props & {
+	inset?: boolean
+}) {
+	return (
+		<MenuPrimitive.GroupLabel
+			data-slot="dropdown-menu-label"
+			data-inset={inset}
+			className={cn('px-2 py-2 text-xs text-muted-foreground data-inset:pl-7', className)}
+			{...props}
+		/>
+	)
+}
+
+function DropdownMenuItem({
+	className,
+	inset,
+	variant = 'default',
+	...props
+}: MenuPrimitive.Item.Props & {
+	inset?: boolean
+	variant?: 'default' | 'destructive'
+}) {
+	return (
+		<MenuPrimitive.Item
+			data-slot="dropdown-menu-item"
+			data-inset={inset}
+			data-variant={variant}
+			className={cn(
+				"group/dropdown-menu-item 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 not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+				className,
+			)}
+			{...props}
+		/>
+	)
+}
+
+function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {
+	return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+	className,
+	inset,
+	children,
+	...props
+}: MenuPrimitive.SubmenuTrigger.Props & {
+	inset?: boolean
+}) {
+	return (
+		<MenuPrimitive.SubmenuTrigger
+			data-slot="dropdown-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 not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground 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 DropdownMenuSubContent({
+	align = 'start',
+	alignOffset = -3,
+	side = 'right',
+	sideOffset = 0,
+	className,
+	...props
+}: React.ComponentProps<typeof DropdownMenuContent>) {
+	return (
+		<DropdownMenuContent
+			data-slot="dropdown-menu-sub-content"
+			className={cn(
+				'w-auto min-w-[96px] rounded-[var(--radius)] border-[length:var(--border-width)] bg-popover text-popover-foreground duration-100 data-[side=bottom]:slide-in-from-top-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,
+			)}
+			align={align}
+			alignOffset={alignOffset}
+			side={side}
+			sideOffset={sideOffset}
+			{...props}
+		/>
+	)
+}
+
+function DropdownMenuCheckboxItem({
+	className,
+	children,
+	checked,
+	inset,
+	...props
+}: MenuPrimitive.CheckboxItem.Props & {
+	inset?: boolean
+}) {
+	return (
+		<MenuPrimitive.CheckboxItem
+			data-slot="dropdown-menu-checkbox-item"
+			data-inset={inset}
+			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 focus:**:text-accent-foreground data-inset:pl-7 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"
+				data-slot="dropdown-menu-checkbox-item-indicator"
+			>
+				<MenuPrimitive.CheckboxItemIndicator>
+					<CheckIcon />
+				</MenuPrimitive.CheckboxItemIndicator>
+			</span>
+			{children}
+		</MenuPrimitive.CheckboxItem>
+	)
+}
+
+function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
+	return <MenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />
+}
+
+function DropdownMenuRadioItem({
+	className,
+	children,
+	inset,
+	...props
+}: MenuPrimitive.RadioItem.Props & {
+	inset?: boolean
+}) {
+	return (
+		<MenuPrimitive.RadioItem
+			data-slot="dropdown-menu-radio-item"
+			data-inset={inset}
+			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 focus:**:text-accent-foreground data-inset:pl-7 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"
+				data-slot="dropdown-menu-radio-item-indicator"
+			>
+				<MenuPrimitive.RadioItemIndicator>
+					<CheckIcon />
+				</MenuPrimitive.RadioItemIndicator>
+			</span>
+			{children}
+		</MenuPrimitive.RadioItem>
+	)
+}
+
+function DropdownMenuSeparator({ className, ...props }: MenuPrimitive.Separator.Props) {
+	return (
+		<MenuPrimitive.Separator
+			data-slot="dropdown-menu-separator"
+			className={cn('-mx-1 h-[length:var(--border-width)] bg-border', className)}
+			{...props}
+		/>
+	)
+}
+
+function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<'span'>) {
+	return (
+		<span
+			data-slot="dropdown-menu-shortcut"
+			className={cn(
+				'ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground',
+				className,
+			)}
+			{...props}
+		/>
+	)
+}
+
+export {
+	DropdownMenu,
+	DropdownMenuPortal,
+	DropdownMenuTrigger,
+	DropdownMenuContent,
+	DropdownMenuGroup,
+	DropdownMenuLabel,
+	DropdownMenuItem,
+	DropdownMenuCheckboxItem,
+	DropdownMenuRadioGroup,
+	DropdownMenuRadioItem,
+	DropdownMenuSeparator,
+	DropdownMenuShortcut,
+	DropdownMenuSub,
+	DropdownMenuSubTrigger,
+	DropdownMenuSubContent,
+}

package/templates/ui/form.tsx

@@ -0,0 +1,122 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+// Lightweight form context — no react-hook-form dependency.
+// Pass your own errors/touched state in or wire to your form library.
+
+interface FormFieldContextValue {
+	id: string
+	name: string
+	error?: string
+	required?: boolean
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>({
+	id: '',
+	name: '',
+})
+
+function useFormField() {
+	return React.useContext(FormFieldContext)
+}
+
+function Form({ className, ...props }: React.ComponentProps<'form'>) {
+	return (
+		<form
+			data-slot="form"
+			className={cn('space-y-4', className)}
+			{...props}
+		/>
+	)
+}
+
+interface FormFieldProps {
+	name: string
+	error?: string
+	required?: boolean
+	children: React.ReactNode
+	className?: string
+}
+
+function FormField({ name, error, required, children, className }: FormFieldProps) {
+	const id = React.useId()
+	return (
+		<FormFieldContext.Provider value={{ id, name, error, required }}>
+			<div data-slot="form-field" className={cn('flex flex-col gap-1', className)}>
+				{children}
+			</div>
+		</FormFieldContext.Provider>
+	)
+}
+
+function FormLabel({ className, children, ...props }: React.ComponentProps<'label'>) {
+	const { id, required, error } = useFormField()
+	return (
+		<label
+			data-slot="form-label"
+			htmlFor={id}
+			className={cn(
+				'text-xs font-medium uppercase tracking-wider',
+				error && 'text-destructive',
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			{required && <span className="ml-0.5 text-destructive">*</span>}
+		</label>
+	)
+}
+
+function FormControl({ className, ...props }: React.ComponentProps<'div'>) {
+	const { id, error } = useFormField()
+	return (
+		<div
+			data-slot="form-control"
+			id={id}
+			aria-invalid={!!error}
+			className={cn('', className)}
+			{...props}
+		/>
+	)
+}
+
+function FormDescription({ className, ...props }: React.ComponentProps<'p'>) {
+	return (
+		<p
+			data-slot="form-description"
+			className={cn('text-xs/relaxed text-muted-foreground', className)}
+			{...props}
+		/>
+	)
+}
+
+function FormMessage({ className, children, ...props }: React.ComponentProps<'p'>) {
+	const { error } = useFormField()
+	const message = children ?? error
+	if (!message) return null
+	return (
+		<p
+			data-slot="form-message"
+			role="alert"
+			className={cn('text-xs text-destructive', className)}
+			{...props}
+		>
+			{message}
+		</p>
+	)
+}
+
+function FormItem({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="form-item"
+			className={cn('flex flex-col gap-1', className)}
+			{...props}
+		/>
+	)
+}
+
+export { Form, FormField, FormLabel, FormControl, FormDescription, FormMessage, FormItem, useFormField }

package/templates/ui/hover-card.tsx

@@ -0,0 +1,44 @@
+'use client'
+
+import { PreviewCard as PreviewCardPrimitive } from '@base-ui/react/preview-card'
+import type * as React from 'react'
+import { cn } from '@/lib/utils'
+
+function HoverCard({ ...props }: PreviewCardPrimitive.Root.Props) {
+	return <PreviewCardPrimitive.Root data-slot="hover-card" {...props} />
+}
+
+function HoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props) {
+	return <PreviewCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+}
+
+function HoverCardContent({
+	className,
+	side = 'bottom',
+	sideOffset = 6,
+	align = 'center',
+	...props
+}: PreviewCardPrimitive.Popup.Props &
+	Pick<PreviewCardPrimitive.Positioner.Props, 'side' | 'sideOffset' | 'align'>) {
+	return (
+		<PreviewCardPrimitive.Portal>
+			<PreviewCardPrimitive.Positioner
+				side={side}
+				sideOffset={sideOffset}
+				align={align}
+				className="isolate z-50"
+			>
+				<PreviewCardPrimitive.Popup
+					data-slot="hover-card-content"
+					className={cn(
+						'z-50 w-64 origin-(--transform-origin) rounded-[var(--radius)] border-[length:var(--border-width)] border-dashed border-foreground bg-popover p-3 text-xs/relaxed text-popover-foreground shadow-none duration-100 data-[side=bottom]:slide-in-from-top-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}
+				/>
+			</PreviewCardPrimitive.Positioner>
+		</PreviewCardPrimitive.Portal>
+	)
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }

package/templates/ui/input-group.tsx

@@ -0,0 +1,148 @@
+'use client'
+
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Textarea } from '@/components/ui/textarea'
+
+function InputGroup({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="input-group"
+			role="group"
+			className={cn(
+				'group/input-group relative flex h-8 w-full min-w-0 items-center rounded-[var(--radius)] border-[length:var(--border-width)] border-input outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-1 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-1 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5',
+				className,
+			)}
+			{...props}
+		/>
+	)
+}
+
+const inputGroupAddonVariants = cva(
+	"flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-xs font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[var(--radius)] [&>svg:not([class*='size-'])]:size-4",
+	{
+		variants: {
+			align: {
+				'inline-start':
+					'order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]',
+				'inline-end':
+					'order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]',
+				'block-start':
+					'order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2',
+				'block-end':
+					'order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2',
+			},
+		},
+		defaultVariants: {
+			align: 'inline-start',
+		},
+	},
+)
+
+function InputGroupAddon({
+	className,
+	align = 'inline-start',
+	...props
+}: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>) {
+	return (
+		<div
+			role="group"
+			data-slot="input-group-addon"
+			data-align={align}
+			className={cn(inputGroupAddonVariants({ align }), className)}
+			onClick={(e) => {
+				if ((e.target as HTMLElement).closest('button')) {
+					return
+				}
+				e.currentTarget.parentElement?.querySelector('input')?.focus()
+			}}
+			{...props}
+		/>
+	)
+}
+
+const inputGroupButtonVariants = cva('flex items-center gap-2 text-xs shadow-none', {
+	variants: {
+		size: {
+			xs: "h-6 gap-1 rounded-[var(--radius)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+			sm: '',
+			'icon-xs': 'size-6 rounded-[var(--radius)] p-0 has-[>svg]:p-0',
+			'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
+		},
+	},
+	defaultVariants: {
+		size: 'xs',
+	},
+})
+
+function InputGroupButton({
+	className,
+	type = 'button',
+	variant = 'ghost',
+	size = 'xs',
+	...props
+}: Omit<React.ComponentProps<typeof Button>, 'size' | 'type'> &
+	VariantProps<typeof inputGroupButtonVariants> & {
+		type?: 'button' | 'submit' | 'reset'
+	}) {
+	return (
+		<Button
+			type={type}
+			data-size={size}
+			variant={variant}
+			className={cn(inputGroupButtonVariants({ size }), className)}
+			{...props}
+		/>
+	)
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {
+	return (
+		<span
+			className={cn(
+				"flex items-center gap-2 text-xs text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		/>
+	)
+}
+
+function InputGroupInput({ className, ...props }: React.ComponentProps<'input'>) {
+	return (
+		<Input
+			data-slot="input-group-control"
+			className={cn(
+				'flex-1 rounded-[var(--radius)] border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent',
+				className,
+			)}
+			{...props}
+		/>
+	)
+}
+
+function InputGroupTextarea({ className, ...props }: React.ComponentProps<'textarea'>) {
+	return (
+		<Textarea
+			data-slot="input-group-control"
+			className={cn(
+				'flex-1 resize-none rounded-[var(--radius)] border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent',
+				className,
+			)}
+			{...props}
+		/>
+	)
+}
+
+export {
+	InputGroup,
+	InputGroupAddon,
+	InputGroupButton,
+	InputGroupText,
+	InputGroupInput,
+	InputGroupTextarea,
+}