@leitware/dockets 0.1.0

package/templates/ui/card.tsx

@@ -0,0 +1,73 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+function Card({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="card"
+			className={cn(
+				'rounded-[var(--radius)] border-[length:var(--border-width)] border-foreground bg-card text-card-foreground',
+				className,
+			)}
+			{...props}
+		/>
+	)
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="card-header"
+			className={cn(
+				'flex flex-col gap-1 border-b-[length:var(--border-width)] border-foreground px-4 py-3',
+				className,
+			)}
+			{...props}
+		/>
+	)
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="card-title"
+			className={cn('text-xs font-medium uppercase tracking-wider', className)}
+			{...props}
+		/>
+	)
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="card-description"
+			className={cn('text-xs/relaxed text-muted-foreground', className)}
+			{...props}
+		/>
+	)
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="card-content"
+			className={cn('px-4 py-3 text-xs/relaxed', className)}
+			{...props}
+		/>
+	)
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="card-footer"
+			className={cn(
+				'flex items-center border-t-[length:var(--border-width)] border-foreground px-4 py-3',
+				className,
+			)}
+			{...props}
+		/>
+	)
+}
+
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter }

package/templates/ui/carousel.tsx

@@ -0,0 +1,149 @@
+'use client'
+
+import * as React from 'react'
+import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+interface CarouselContextValue {
+	scrollPrev: () => void
+	scrollNext: () => void
+	canScrollPrev: boolean
+	canScrollNext: boolean
+	listRef: React.RefObject<HTMLDivElement | null>
+}
+
+const CarouselContext = React.createContext<CarouselContextValue | null>(null)
+
+function useCarousel() {
+	const ctx = React.useContext(CarouselContext)
+	if (!ctx) throw new Error('useCarousel must be used within <Carousel>')
+	return ctx
+}
+
+interface CarouselProps extends React.ComponentProps<'div'> {
+	orientation?: 'horizontal' | 'vertical'
+}
+
+function Carousel({ className, orientation = 'horizontal', children, ...props }: CarouselProps) {
+	const listRef = React.useRef<HTMLDivElement>(null)
+	const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+	const [canScrollNext, setCanScrollNext] = React.useState(true)
+
+	const updateScroll = React.useCallback(() => {
+		const el = listRef.current
+		if (!el) return
+		if (orientation === 'horizontal') {
+			setCanScrollPrev(el.scrollLeft > 0)
+			setCanScrollNext(el.scrollLeft + el.clientWidth < el.scrollWidth - 1)
+		} else {
+			setCanScrollPrev(el.scrollTop > 0)
+			setCanScrollNext(el.scrollTop + el.clientHeight < el.scrollHeight - 1)
+		}
+	}, [orientation])
+
+	React.useEffect(() => {
+		const el = listRef.current
+		if (!el) return
+		el.addEventListener('scroll', updateScroll, { passive: true })
+		updateScroll()
+		return () => el.removeEventListener('scroll', updateScroll)
+	}, [updateScroll])
+
+	const scrollPrev = React.useCallback(() => {
+		const el = listRef.current
+		if (!el) return
+		const amount = orientation === 'horizontal' ? el.clientWidth : el.clientHeight
+		el.scrollBy({ [orientation === 'horizontal' ? 'left' : 'top']: -amount, behavior: 'smooth' })
+	}, [orientation])
+
+	const scrollNext = React.useCallback(() => {
+		const el = listRef.current
+		if (!el) return
+		const amount = orientation === 'horizontal' ? el.clientWidth : el.clientHeight
+		el.scrollBy({ [orientation === 'horizontal' ? 'left' : 'top']: amount, behavior: 'smooth' })
+	}, [orientation])
+
+	return (
+		<CarouselContext.Provider value={{ scrollPrev, scrollNext, canScrollPrev, canScrollNext, listRef }}>
+			<div
+				data-slot="carousel"
+				data-orientation={orientation}
+				className={cn('relative', className)}
+				{...props}
+			>
+				{children}
+			</div>
+		</CarouselContext.Provider>
+	)
+}
+
+function CarouselContent({ className, ...props }: React.ComponentProps<'div'>) {
+	const { listRef } = useCarousel()
+	return (
+		<div className="overflow-hidden">
+			<div
+				ref={listRef}
+				data-slot="carousel-content"
+				className={cn(
+					'flex scroll-smooth',
+					'overflow-x-auto snap-x snap-mandatory scrollbar-none',
+					'data-[orientation=vertical]:flex-col data-[orientation=vertical]:overflow-y-auto data-[orientation=vertical]:overflow-x-hidden',
+					className,
+				)}
+				{...props}
+			/>
+		</div>
+	)
+}
+
+function CarouselItem({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="carousel-item"
+			className={cn('min-w-0 shrink-0 grow-0 basis-full snap-start', className)}
+			{...props}
+		/>
+	)
+}
+
+function CarouselPrevious({ className, ...props }: React.ComponentProps<'button'>) {
+	const { scrollPrev, canScrollPrev } = useCarousel()
+	return (
+		<button
+			type="button"
+			data-slot="carousel-previous"
+			onClick={scrollPrev}
+			disabled={!canScrollPrev}
+			className={cn(
+				'absolute left-2 top-1/2 -translate-y-1/2 flex size-8 items-center justify-center rounded-[var(--radius)] border-[length:var(--border-width)] border-dashed border-foreground bg-card text-card-foreground hover:bg-accent disabled:pointer-events-none disabled:opacity-30',
+				className,
+			)}
+			aria-label="Previous slide"
+			{...props}
+		>
+			<ChevronLeftIcon className="size-4" />
+		</button>
+	)
+}
+
+function CarouselNext({ className, ...props }: React.ComponentProps<'button'>) {
+	const { scrollNext, canScrollNext } = useCarousel()
+	return (
+		<button
+			type="button"
+			data-slot="carousel-next"
+			onClick={scrollNext}
+			disabled={!canScrollNext}
+			className={cn(
+				'absolute right-2 top-1/2 -translate-y-1/2 flex size-8 items-center justify-center rounded-[var(--radius)] border-[length:var(--border-width)] border-dashed border-foreground bg-card text-card-foreground hover:bg-accent disabled:pointer-events-none disabled:opacity-30',
+				className,
+			)}
+			aria-label="Next slide"
+			{...props}
+		>
+			<ChevronRightIcon className="size-4" />
+		</button>
+	)
+}
+
+export { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext }

package/templates/ui/checkbox.tsx

@@ -0,0 +1,33 @@
+'use client'
+
+import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox'
+import { CheckIcon, MinusIcon } from 'lucide-react'
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
+	return (
+		<CheckboxPrimitive.Root
+			data-slot="checkbox"
+			className={cn(
+				'peer flex size-4 shrink-0 items-center justify-center rounded-[var(--radius)] border-[length:var(--border-width)] border-foreground bg-transparent',
+				'disabled:cursor-not-allowed disabled:opacity-50',
+				'data-checked:bg-foreground data-checked:border-foreground data-checked:text-background',
+				'data-indeterminate:bg-foreground data-indeterminate:border-foreground data-indeterminate:text-background',
+				'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
+				'aria-invalid:border-destructive',
+				className,
+			)}
+			{...props}
+		>
+			<CheckboxPrimitive.Indicator className="flex items-center justify-center">
+				{/* indeterminate */}
+				<MinusIcon className="hidden size-3 data-indeterminate:block" />
+				{/* checked */}
+				<CheckIcon className="size-3 data-indeterminate:hidden" />
+			</CheckboxPrimitive.Indicator>
+		</CheckboxPrimitive.Root>
+	)
+}
+
+export { Checkbox }

package/templates/ui/code-block.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react'
+import { cn, leftPad } from '@/lib/utils'
+
+interface CodeBlockProps extends React.HTMLAttributes<HTMLPreElement> {}
+
+const CodeBlock = React.forwardRef<HTMLPreElement, CodeBlockProps>(
+	({ children, className, ...props }, ref) => {
+		return (
+			<pre
+				data-slot="code-block"
+				ref={ref}
+				className={cn(
+					'block font-normal overflow-auto bg-[var(--receipt-bg)] scrollbar-none',
+					className,
+				)}
+				{...props}
+			>
+				{String(children)
+					.split('\n')
+					.map((line, index) => (
+						<div key={index} className="flex justify-between items-start">
+							<span className="inline-flex w-[3ch] text-right pr-[1ch] select-none bg-[var(--bg-color)] opacity-50">
+								{leftPad(String(index + 1), 3)}
+							</span>
+							<span className="min-w-[10%] w-full whitespace-pre bg-[var(--receipt-bg)] pl-[2ch]">
+								{line}
+							</span>
+						</div>
+					))}
+			</pre>
+		)
+	},
+)
+CodeBlock.displayName = 'CodeBlock'
+
+export { CodeBlock }

package/templates/ui/collapsible.tsx

@@ -0,0 +1,48 @@
+'use client'
+
+import { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible'
+import { ChevronDownIcon, ChevronUpIcon } from 'lucide-react'
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+function Collapsible({ className, ...props }: CollapsiblePrimitive.Root.Props) {
+	return (
+		<CollapsiblePrimitive.Root
+			data-slot="collapsible"
+			className={cn('rounded-[var(--radius)]', className)}
+			{...props}
+		/>
+	)
+}
+
+function CollapsibleTrigger({ className, children, ...props }: CollapsiblePrimitive.Trigger.Props) {
+	return (
+		<CollapsiblePrimitive.Trigger
+			data-slot="collapsible-trigger"
+			className={cn(
+				'group/collapsible-trigger flex w-full items-center justify-between rounded-[var(--radius)] py-2 text-xs font-medium uppercase tracking-wider hover:underline disabled:pointer-events-none disabled:opacity-50',
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<ChevronDownIcon className="size-4 shrink-0 text-muted-foreground transition-transform group-data-open/collapsible-trigger:hidden" />
+			<ChevronUpIcon className="hidden size-4 shrink-0 text-muted-foreground transition-transform group-data-open/collapsible-trigger:block" />
+		</CollapsiblePrimitive.Trigger>
+	)
+}
+
+function CollapsibleContent({ className, ...props }: CollapsiblePrimitive.Panel.Props) {
+	return (
+		<CollapsiblePrimitive.Panel
+			data-slot="collapsible-content"
+			className={cn(
+				'overflow-hidden text-xs/relaxed data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0',
+				className,
+			)}
+			{...props}
+		/>
+	)
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

package/templates/ui/combobox.tsx

@@ -0,0 +1,295 @@
+import * as React from "react"
+import { Combobox as ComboboxPrimitive } from "@base-ui/react"
+
+import { cn } from "~/lib/utils"
+import { Button } from "~/components/ui/button"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "~/components/ui/input-group"
+import { ChevronDownIcon, XIcon, CheckIcon } from "lucide-react"
+
+const Combobox = ComboboxPrimitive.Root
+
+function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {
+  return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />
+}
+
+function ComboboxTrigger({
+  className,
+  children,
+  ...props
+}: ComboboxPrimitive.Trigger.Props) {
+  return (
+    <ComboboxPrimitive.Trigger
+      data-slot="combobox-trigger"
+      className={cn("[&_svg:not([class*='size-'])]:size-4", className)}
+      {...props}
+    >
+      {children}
+      <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
+    </ComboboxPrimitive.Trigger>
+  )
+}
+
+function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
+  return (
+    <ComboboxPrimitive.Clear
+      data-slot="combobox-clear"
+      render={<InputGroupButton variant="ghost" size="icon-xs" />}
+      className={cn(className)}
+      {...props}
+    >
+      <XIcon className="pointer-events-none" />
+    </ComboboxPrimitive.Clear>
+  )
+}
+
+function ComboboxInput({
+  className,
+  children,
+  disabled = false,
+  showTrigger = true,
+  showClear = false,
+  ...props
+}: ComboboxPrimitive.Input.Props & {
+  showTrigger?: boolean
+  showClear?: boolean
+}) {
+  return (
+    <InputGroup className={cn("w-auto", className)}>
+      <ComboboxPrimitive.Input
+        render={<InputGroupInput disabled={disabled} />}
+        {...props}
+      />
+      <InputGroupAddon align="inline-end">
+        {showTrigger && (
+          <InputGroupButton
+            size="icon-xs"
+            variant="ghost"
+            render={<ComboboxTrigger />}
+            data-slot="input-group-button"
+            className="group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent"
+            disabled={disabled}
+          />
+        )}
+        {showClear && <ComboboxClear disabled={disabled} />}
+      </InputGroupAddon>
+      {children}
+    </InputGroup>
+  )
+}
+
+function ComboboxContent({
+  className,
+  side = "bottom",
+  sideOffset = 6,
+  align = "start",
+  alignOffset = 0,
+  anchor,
+  ...props
+}: ComboboxPrimitive.Popup.Props &
+  Pick<
+    ComboboxPrimitive.Positioner.Props,
+    "side" | "align" | "sideOffset" | "alignOffset" | "anchor"
+  >) {
+  return (
+    <ComboboxPrimitive.Portal>
+      <ComboboxPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        anchor={anchor}
+        className="isolate z-50"
+      >
+        <ComboboxPrimitive.Popup
+          data-slot="combobox-content"
+          data-chips={!!anchor}
+          className={cn("group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-[var(--radius)] bg-popover text-popover-foreground shadow-none border border-foreground duration-100 data-[chips=true]:min-w-(--anchor-width) 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-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-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}
+        />
+      </ComboboxPrimitive.Positioner>
+    </ComboboxPrimitive.Portal>
+  )
+}
+
+function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {
+  return (
+    <ComboboxPrimitive.List
+      data-slot="combobox-list"
+      className={cn(
+        "no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain data-empty:p-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ComboboxItem({
+  className,
+  children,
+  ...props
+}: ComboboxPrimitive.Item.Props) {
+  return (
+    <ComboboxPrimitive.Item
+      data-slot="combobox-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 data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**: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}
+    >
+      {children}
+      <ComboboxPrimitive.ItemIndicator
+        render={
+          <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
+        }
+      >
+        <CheckIcon className="pointer-events-none" />
+      </ComboboxPrimitive.ItemIndicator>
+    </ComboboxPrimitive.Item>
+  )
+}
+
+function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {
+  return (
+    <ComboboxPrimitive.Group
+      data-slot="combobox-group"
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+function ComboboxLabel({
+  className,
+  ...props
+}: ComboboxPrimitive.GroupLabel.Props) {
+  return (
+    <ComboboxPrimitive.GroupLabel
+      data-slot="combobox-label"
+      className={cn("px-2 py-2 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {
+  return (
+    <ComboboxPrimitive.Collection data-slot="combobox-collection" {...props} />
+  )
+}
+
+function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {
+  return (
+    <ComboboxPrimitive.Empty
+      data-slot="combobox-empty"
+      className={cn(
+        "hidden w-full justify-center py-2 text-center text-xs text-muted-foreground group-data-empty/combobox-content:flex",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ComboboxSeparator({
+  className,
+  ...props
+}: ComboboxPrimitive.Separator.Props) {
+  return (
+    <ComboboxPrimitive.Separator
+      data-slot="combobox-separator"
+      className={cn("-mx-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function ComboboxChips({
+  className,
+  ...props
+}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &
+  ComboboxPrimitive.Chips.Props) {
+  return (
+    <ComboboxPrimitive.Chips
+      data-slot="combobox-chips"
+      className={cn(
+        "flex min-h-8 flex-wrap items-center gap-1 rounded-[var(--radius)] border border-input bg-transparent bg-clip-padding px-2.5 py-1 text-xs focus-within:border-ring focus-within:ring-1 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-1 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ComboboxChip({
+  className,
+  children,
+  showRemove = true,
+  ...props
+}: ComboboxPrimitive.Chip.Props & {
+  showRemove?: boolean
+}) {
+  return (
+    <ComboboxPrimitive.Chip
+      data-slot="combobox-chip"
+      className={cn(
+        "flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-[var(--radius)] bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showRemove && (
+        <ComboboxPrimitive.ChipRemove
+          render={<Button variant="ghost" size="icon" />}
+          className="-ml-1 opacity-50 hover:opacity-100"
+          data-slot="combobox-chip-remove"
+        >
+          <XIcon className="pointer-events-none" />
+        </ComboboxPrimitive.ChipRemove>
+      )}
+    </ComboboxPrimitive.Chip>
+  )
+}
+
+function ComboboxChipsInput({
+  className,
+  ...props
+}: ComboboxPrimitive.Input.Props) {
+  return (
+    <ComboboxPrimitive.Input
+      data-slot="combobox-chip-input"
+      className={cn("min-w-16 flex-1 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+function useComboboxAnchor() {
+  return React.useRef<HTMLDivElement | null>(null)
+}
+
+export {
+  Combobox,
+  ComboboxInput,
+  ComboboxContent,
+  ComboboxList,
+  ComboboxItem,
+  ComboboxGroup,
+  ComboboxLabel,
+  ComboboxCollection,
+  ComboboxEmpty,
+  ComboboxSeparator,
+  ComboboxChips,
+  ComboboxChip,
+  ComboboxChipsInput,
+  ComboboxTrigger,
+  ComboboxValue,
+  useComboboxAnchor,
+}