@leitware/dockets 0.1.0

package/templates/ui/toggle-group.tsx

@@ -0,0 +1,68 @@
+'use client'
+
+import { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group'
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+import { toggleVariants } from '@/components/ui/toggle'
+import type { VariantProps } from 'class-variance-authority'
+
+interface ToggleGroupContextValue extends VariantProps<typeof toggleVariants> {}
+
+const ToggleGroupContext = React.createContext<ToggleGroupContextValue>({
+	variant: 'default',
+	size: 'default',
+})
+
+function ToggleGroup({
+	className,
+	variant = 'outline',
+	size = 'default',
+	children,
+	...props
+}: ToggleGroupPrimitive.Root.Props & VariantProps<typeof toggleVariants>) {
+	return (
+		<ToggleGroupContext.Provider value={{ variant, size }}>
+			<ToggleGroupPrimitive.Root
+				data-slot="toggle-group"
+				className={cn(
+					// Container holds left+top border; items add right+bottom (newspaper pattern)
+					'inline-flex items-center rounded-[var(--radius)] border-[length:var(--border-width)] border-foreground',
+					className,
+				)}
+				{...props}
+			>
+				{children}
+			</ToggleGroupPrimitive.Root>
+		</ToggleGroupContext.Provider>
+	)
+}
+
+function ToggleGroupItem({
+	className,
+	variant,
+	size,
+	children,
+	...props
+}: ToggleGroupPrimitive.Item.Props & VariantProps<typeof toggleVariants>) {
+	const ctx = React.useContext(ToggleGroupContext)
+	const resolvedVariant = variant ?? ctx.variant
+	const resolvedSize = size ?? ctx.size
+
+	return (
+		<ToggleGroupPrimitive.Item
+			data-slot="toggle-group-item"
+			className={cn(
+				toggleVariants({ variant: resolvedVariant, size: resolvedSize }),
+				// No stacking: container owns left border; items add right border except last
+				'rounded-[var(--radius)] border-0',
+				'[&:not(:last-child)]:border-r-[length:var(--border-width)] [&:not(:last-child)]:border-foreground',
+				className,
+			)}
+			{...props}
+		>
+			{children}
+		</ToggleGroupPrimitive.Item>
+	)
+}
+
+export { ToggleGroup, ToggleGroupItem }

package/templates/ui/toggle.tsx

@@ -0,0 +1,47 @@
+'use client'
+
+import { Toggle as TogglePrimitive } from '@base-ui/react/toggle'
+import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+const toggleVariants = cva(
+	'inline-flex items-center justify-center gap-2 rounded-[var(--radius)] 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:
+					'border-[length:var(--border-width)] border-dashed border-transparent hover:border-foreground/30 hover:bg-accent hover:text-accent-foreground data-pressed:border-foreground data-pressed:bg-foreground data-pressed:text-background',
+				outline:
+					'border-[length:var(--border-width)] border-dashed border-foreground bg-transparent hover:bg-accent hover:text-accent-foreground data-pressed:bg-foreground data-pressed:text-background',
+			},
+			size: {
+				default: 'h-9 px-3',
+				sm: 'h-8 px-2.5',
+				lg: 'h-10 px-4',
+				icon: 'h-9 w-9',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'default',
+		},
+	},
+)
+
+function Toggle({
+	className,
+	variant,
+	size,
+	...props
+}: TogglePrimitive.Root.Props & VariantProps<typeof toggleVariants>) {
+	return (
+		<TogglePrimitive.Root
+			data-slot="toggle"
+			className={cn(toggleVariants({ variant, size }), className)}
+			{...props}
+		/>
+	)
+}
+
+export { Toggle, toggleVariants }

package/templates/ui/tooltip.tsx

@@ -0,0 +1,53 @@
+'use client'
+
+import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip'
+
+import { cn } from '@/lib/utils'
+
+function TooltipProvider({ delay = 0, ...props }: TooltipPrimitive.Provider.Props) {
+	return <TooltipPrimitive.Provider data-slot="tooltip-provider" delay={delay} {...props} />
+}
+
+function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
+	return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
+	return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+	className,
+	side = 'top',
+	sideOffset = 4,
+	align = 'center',
+	alignOffset = 0,
+	children,
+	...props
+}: TooltipPrimitive.Popup.Props &
+	Pick<TooltipPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>) {
+	return (
+		<TooltipPrimitive.Portal>
+			<TooltipPrimitive.Positioner
+				align={align}
+				alignOffset={alignOffset}
+				side={side}
+				sideOffset={sideOffset}
+				className="isolate z-50"
+			>
+				<TooltipPrimitive.Popup
+					data-slot="tooltip-content"
+					className={cn(
+						'z-50 w-fit max-w-xs origin-(--transform-origin) rounded-[var(--radius)] border-[length:var(--border-width)] border-dashed border-foreground bg-popover px-3 py-1.5 text-xs text-popover-foreground 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}
+				>
+					{children}
+				</TooltipPrimitive.Popup>
+			</TooltipPrimitive.Positioner>
+		</TooltipPrimitive.Portal>
+	)
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/templates/ui/tree-view.tsx

@@ -0,0 +1,76 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+interface TreeViewProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue'> {
+	defaultValue?: boolean
+	depth?: number
+	isFile?: boolean
+	isLastChild?: boolean
+	isRoot?: boolean
+	parentLines?: boolean[]
+	title: string
+}
+
+const TreeView = React.forwardRef<HTMLDivElement, TreeViewProps>(
+	(
+		{
+			defaultValue = false,
+			title,
+			children,
+			depth = 0,
+			isFile = false,
+			isLastChild = false,
+			parentLines = [],
+			className,
+			...props
+		},
+		ref,
+	) => {
+		const [show, setShow] = React.useState<boolean>(defaultValue)
+
+		const onToggleShow = (): void => {
+			if (!isFile) setShow((prevShow) => !prevShow)
+		}
+
+		const hasChildren = React.Children.count(children) > 0
+
+		const spacing = parentLines.map((line) => (line ? '│ . ' : '. . ')).join('')
+		const endPrefix = isLastChild ? '└───' : '├───'
+		const prefix = `${spacing}${endPrefix}`
+		const icon = isFile ? ' ' : show ? '╦ ' : '╤ '
+
+		const updatedParentLines = [...parentLines, !isLastChild]
+
+		return (
+			<div ref={ref} data-slot="tree-view" className={cn('whitespace-nowrap', className)} {...props}>
+				<div
+					tabIndex={0}
+					role="button"
+					onClick={onToggleShow}
+					className="cursor-pointer border-0"
+					aria-expanded={show}
+				>
+					{prefix}
+					{icon}
+					{title}
+				</div>
+				{show && hasChildren && (
+					<div>
+						{React.Children.map(children, (child, index) =>
+							React.isValidElement(child)
+								? React.cloneElement(child as React.ReactElement<TreeViewProps>, {
+										depth: depth + 1,
+										isLastChild: index === React.Children.count(children) - 1,
+										parentLines: updatedParentLines,
+									})
+								: child,
+						)}
+					</div>
+				)}
+			</div>
+		)
+	},
+)
+TreeView.displayName = 'TreeView'
+
+export { TreeView }