@leitware/dockets 0.1.0

package/templates/ui/menubar.tsx

@@ -0,0 +1,225 @@
+'use client'
+
+import { Menu as MenuPrimitive } from '@base-ui/react/menu'
+import { CheckIcon, ChevronDownIcon, ChevronRightIcon } from 'lucide-react'
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+function Menubar({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="menubar"
+			role="menubar"
+			className={cn(
+				'flex h-9 items-center rounded-[var(--radius)] border-[length:var(--border-width)] border-foreground bg-card text-card-foreground',
+				className,
+			)}
+			{...props}
+		/>
+	)
+}
+
+function MenubarMenu({ ...props }: MenuPrimitive.Root.Props) {
+	return <MenuPrimitive.Root data-slot="menubar-menu" {...props} />
+}
+
+function MenubarTrigger({ className, children, ...props }: MenuPrimitive.Trigger.Props) {
+	return (
+		<MenuPrimitive.Trigger
+			data-slot="menubar-trigger"
+			className={cn(
+				'flex h-full cursor-default items-center gap-1 px-3 text-xs font-medium uppercase tracking-wider select-none',
+				'hover:bg-accent hover:text-accent-foreground',
+				'data-popup-open:bg-foreground data-popup-open:text-background',
+				'focus-visible:outline-none focus-visible:bg-accent',
+				'disabled:pointer-events-none disabled:opacity-50',
+				// No stacking: each menu trigger gets right border except last
+				'[&:not(:last-child)]:border-r-[length:var(--border-width)] [&:not(:last-child)]:border-foreground',
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<ChevronDownIcon className="size-3 text-muted-foreground" />
+		</MenuPrimitive.Trigger>
+	)
+}
+
+function MenubarContent({
+	className,
+	align = 'start',
+	sideOffset = 2,
+	...props
+}: MenuPrimitive.Popup.Props &
+	Pick<MenuPrimitive.Positioner.Props, 'align' | 'sideOffset'>) {
+	return (
+		<MenuPrimitive.Portal>
+			<MenuPrimitive.Positioner
+				align={align}
+				sideOffset={sideOffset}
+				className="isolate z-50 outline-none"
+			>
+				<MenuPrimitive.Popup
+					data-slot="menubar-content"
+					className={cn(
+						'z-50 min-w-40 origin-(--transform-origin) overflow-hidden rounded-[var(--radius)] border-[length:var(--border-width)] border-foreground bg-popover text-popover-foreground shadow-none duration-100 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 MenubarItem({
+	className,
+	inset,
+	variant = 'default',
+	...props
+}: MenuPrimitive.Item.Props & {
+	inset?: boolean
+	variant?: 'default' | 'destructive'
+}) {
+	return (
+		<MenuPrimitive.Item
+			data-slot="menubar-item"
+			data-inset={inset}
+			data-variant={variant}
+			className={cn(
+				"relative flex cursor-default items-center gap-2 rounded-[var(--radius)] px-2 py-1.5 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 MenubarCheckboxItem({
+	className,
+	children,
+	checked,
+	...props
+}: MenuPrimitive.CheckboxItem.Props) {
+	return (
+		<MenuPrimitive.CheckboxItem
+			data-slot="menubar-checkbox-item"
+			className={cn(
+				"relative flex cursor-default items-center gap-2 rounded-[var(--radius)] py-1.5 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 MenubarRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
+	return <MenuPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
+}
+
+function MenubarRadioItem({ className, children, ...props }: MenuPrimitive.RadioItem.Props) {
+	return (
+		<MenuPrimitive.RadioItem
+			data-slot="menubar-radio-item"
+			className={cn(
+				"relative flex cursor-default items-center gap-2 rounded-[var(--radius)] py-1.5 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 MenubarLabel({ className, inset, ...props }: React.ComponentProps<'div'> & { inset?: boolean }) {
+	return (
+		<div
+			data-slot="menubar-label"
+			data-inset={inset}
+			className={cn('px-2 py-1.5 text-xs text-muted-foreground data-inset:pl-7', className)}
+			{...props}
+		/>
+	)
+}
+
+function MenubarSeparator({ className, ...props }: MenuPrimitive.Separator.Props) {
+	return (
+		<MenuPrimitive.Separator
+			data-slot="menubar-separator"
+			className={cn('-mx-1 h-[length:var(--border-width)] bg-border', className)}
+			{...props}
+		/>
+	)
+}
+
+function MenubarShortcut({ className, ...props }: React.ComponentProps<'span'>) {
+	return (
+		<span
+			data-slot="menubar-shortcut"
+			className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}
+			{...props}
+		/>
+	)
+}
+
+function MenubarSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {
+	return <MenuPrimitive.SubmenuRoot data-slot="menubar-sub" {...props} />
+}
+
+function MenubarSubTrigger({ className, children, inset, ...props }: MenuPrimitive.SubmenuTrigger.Props & { inset?: boolean }) {
+	return (
+		<MenuPrimitive.SubmenuTrigger
+			data-slot="menubar-sub-trigger"
+			data-inset={inset}
+			className={cn(
+				"flex cursor-default items-center gap-2 rounded-[var(--radius)] px-2 py-1.5 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 MenubarSubContent({ className, ...props }: React.ComponentProps<typeof MenubarContent>) {
+	return (
+		<MenubarContent
+			data-slot="menubar-sub-content"
+			className={cn('w-auto min-w-[96px]', className)}
+			{...props}
+		/>
+	)
+}
+
+export {
+	Menubar,
+	MenubarMenu,
+	MenubarTrigger,
+	MenubarContent,
+	MenubarItem,
+	MenubarCheckboxItem,
+	MenubarRadioGroup,
+	MenubarRadioItem,
+	MenubarLabel,
+	MenubarSeparator,
+	MenubarShortcut,
+	MenubarSub,
+	MenubarSubTrigger,
+	MenubarSubContent,
+}

package/templates/ui/navigation-menu.tsx

@@ -0,0 +1,117 @@
+import * as React from 'react'
+import { ChevronDownIcon } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+function NavigationMenu({ className, ...props }: React.ComponentProps<'nav'>) {
+	return (
+		<nav
+			data-slot="navigation-menu"
+			className={cn('relative flex items-center', className)}
+			{...props}
+		/>
+	)
+}
+
+function NavigationMenuList({ className, ...props }: React.ComponentProps<'ul'>) {
+	return (
+		<ul
+			data-slot="navigation-menu-list"
+			className={cn('flex items-center gap-0 list-none', className)}
+			{...props}
+		/>
+	)
+}
+
+function NavigationMenuItem({ className, ...props }: React.ComponentProps<'li'>) {
+	return (
+		<li
+			data-slot="navigation-menu-item"
+			className={cn('relative', className)}
+			{...props}
+		/>
+	)
+}
+
+const navigationMenuTriggerStyle = cn(
+	'group inline-flex h-9 items-center justify-center gap-1 rounded-[var(--radius)] px-3 py-2 text-xs font-medium uppercase tracking-wider hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:bg-accent disabled:pointer-events-none disabled:opacity-50',
+)
+
+function NavigationMenuTrigger({
+	className,
+	children,
+	...props
+}: React.ComponentProps<'button'>) {
+	return (
+		<button
+			data-slot="navigation-menu-trigger"
+			className={cn(navigationMenuTriggerStyle, 'cursor-default', className)}
+			{...props}
+		>
+			{children}
+			<ChevronDownIcon className="size-3 transition-transform duration-200 group-data-open:rotate-180" />
+		</button>
+	)
+}
+
+function NavigationMenuContent({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="navigation-menu-content"
+			className={cn(
+				'absolute top-full left-0 z-50 w-auto min-w-48 rounded-[var(--radius)] border-[length:var(--border-width)] border-foreground bg-popover p-2 text-popover-foreground 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}
+		/>
+	)
+}
+
+function NavigationMenuLink({ className, ...props }: React.ComponentProps<'a'>) {
+	return (
+		<a
+			data-slot="navigation-menu-link"
+			className={cn(
+				'block select-none rounded-[var(--radius)] px-3 py-2 text-xs leading-none outline-none hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground',
+				className,
+			)}
+			{...props}
+		/>
+	)
+}
+
+function NavigationMenuViewport({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="navigation-menu-viewport"
+			className={cn('absolute top-full left-0 z-50 mt-1', className)}
+			{...props}
+		/>
+	)
+}
+
+function NavigationMenuIndicator({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="navigation-menu-indicator"
+			className={cn(
+				'top-full z-[1] flex h-[length:var(--border-width)] items-end justify-center overflow-hidden',
+				className,
+			)}
+			{...props}
+		>
+			<div className="relative top-[60%] h-2 w-2 rotate-45 bg-foreground" />
+		</div>
+	)
+}
+
+export {
+	NavigationMenu,
+	NavigationMenuList,
+	NavigationMenuItem,
+	NavigationMenuTrigger,
+	NavigationMenuContent,
+	NavigationMenuLink,
+	NavigationMenuViewport,
+	NavigationMenuIndicator,
+	navigationMenuTriggerStyle,
+}

package/templates/ui/pagination.tsx

@@ -0,0 +1,110 @@
+import * as React from 'react'
+import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+function Pagination({ className, ...props }: React.ComponentProps<'nav'>) {
+	return (
+		<nav
+			data-slot="pagination"
+			role="navigation"
+			aria-label="pagination"
+			className={cn('mx-auto flex w-full justify-center', className)}
+			{...props}
+		/>
+	)
+}
+
+function PaginationContent({ className, ...props }: React.ComponentProps<'ul'>) {
+	return (
+		<ul
+			data-slot="pagination-content"
+			className={cn('flex items-center gap-0 list-none', className)}
+			{...props}
+		/>
+	)
+}
+
+function PaginationItem({ ...props }: React.ComponentProps<'li'>) {
+	return <li data-slot="pagination-item" {...props} />
+}
+
+type PaginationLinkProps = {
+	isActive?: boolean
+	disabled?: boolean
+} & React.ComponentProps<'a'>
+
+function PaginationLink({ className, isActive, disabled, ...props }: PaginationLinkProps) {
+	return (
+		<a
+			data-slot="pagination-link"
+			aria-current={isActive ? 'page' : undefined}
+			aria-disabled={disabled}
+			className={cn(
+				'flex h-9 min-w-9 items-center justify-center rounded-[var(--radius)] border-[length:var(--border-width)] border-foreground text-xs font-medium uppercase tracking-wider',
+				// No stacking: negative margin collapses adjacent item borders
+				'-ml-[length:var(--border-width)] first:ml-0',
+				isActive
+					? 'z-10 bg-foreground text-background'
+					: 'bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground',
+				disabled && 'pointer-events-none opacity-40',
+				className,
+			)}
+			{...props}
+		/>
+	)
+}
+
+function PaginationPrevious({ className, ...props }: React.ComponentProps<'a'>) {
+	return (
+		<PaginationLink
+			data-slot="pagination-previous"
+			aria-label="Previous page"
+			className={cn('gap-1 px-2.5', className)}
+			{...props}
+		>
+			<ChevronLeftIcon className="size-3.5" />
+			<span className="sr-only sm:not-sr-only">Prev</span>
+		</PaginationLink>
+	)
+}
+
+function PaginationNext({ className, ...props }: React.ComponentProps<'a'>) {
+	return (
+		<PaginationLink
+			data-slot="pagination-next"
+			aria-label="Next page"
+			className={cn('gap-1 px-2.5', className)}
+			{...props}
+		>
+			<span className="sr-only sm:not-sr-only">Next</span>
+			<ChevronRightIcon className="size-3.5" />
+		</PaginationLink>
+	)
+}
+
+function PaginationEllipsis({ className, ...props }: React.ComponentProps<'span'>) {
+	return (
+		<span
+			data-slot="pagination-ellipsis"
+			aria-hidden
+			className={cn(
+				'flex h-9 w-9 items-center justify-center rounded-[var(--radius)] border-[length:var(--border-width)] border-dashed border-foreground -ml-[length:var(--border-width)] first:ml-0 text-muted-foreground',
+				className,
+			)}
+			{...props}
+		>
+			<MoreHorizontalIcon className="size-3.5" />
+			<span className="sr-only">More pages</span>
+		</span>
+	)
+}
+
+export {
+	Pagination,
+	PaginationContent,
+	PaginationItem,
+	PaginationLink,
+	PaginationPrevious,
+	PaginationNext,
+	PaginationEllipsis,
+}

package/templates/ui/popover.tsx

@@ -0,0 +1,77 @@
+'use client'
+
+import { Popover as PopoverPrimitive } from '@base-ui/react/popover'
+import { XIcon } from 'lucide-react'
+import type * as React from 'react'
+import { cn } from '@/lib/utils'
+
+function Popover({ ...props }: PopoverPrimitive.Root.Props) {
+	return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {
+	return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverPortal({ ...props }: PopoverPrimitive.Portal.Props) {
+	return <PopoverPrimitive.Portal data-slot="popover-portal" {...props} />
+}
+
+function PopoverClose({ ...props }: PopoverPrimitive.Close.Props) {
+	return <PopoverPrimitive.Close data-slot="popover-close" {...props} />
+}
+
+function PopoverContent({
+	className,
+	side = 'bottom',
+	sideOffset = 6,
+	align = 'center',
+	showCloseButton = false,
+	children,
+	...props
+}: PopoverPrimitive.Popup.Props &
+	Pick<PopoverPrimitive.Positioner.Props, 'side' | 'sideOffset' | 'align'> & {
+		showCloseButton?: boolean
+	}) {
+	return (
+		<PopoverPortal>
+			<PopoverPrimitive.Positioner
+				side={side}
+				sideOffset={sideOffset}
+				align={align}
+				className="isolate z-50"
+			>
+				<PopoverPrimitive.Popup
+					data-slot="popover-content"
+					className={cn(
+						'relative z-50 w-72 origin-(--transform-origin) rounded-[var(--radius)] border-[length:var(--border-width)] border-foreground bg-popover p-4 text-xs/relaxed text-popover-foreground shadow-none duration-100 outline-none 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}
+				>
+					{children}
+					{showCloseButton && (
+						<PopoverPrimitive.Close
+							className="absolute top-2 right-2 flex size-6 items-center justify-center text-muted-foreground hover:text-foreground"
+							aria-label="Close"
+						>
+							<XIcon className="size-3.5" />
+						</PopoverPrimitive.Close>
+					)}
+				</PopoverPrimitive.Popup>
+			</PopoverPrimitive.Positioner>
+		</PopoverPortal>
+	)
+}
+
+function PopoverArrow({ className, ...props }: PopoverPrimitive.Arrow.Props) {
+	return (
+		<PopoverPrimitive.Arrow
+			data-slot="popover-arrow"
+			className={cn('fill-foreground', className)}
+			{...props}
+		/>
+	)
+}
+
+export { Popover, PopoverTrigger, PopoverPortal, PopoverClose, PopoverContent, PopoverArrow }

package/templates/ui/progress.tsx

@@ -0,0 +1,37 @@
+'use client'
+
+import { Progress as ProgressPrimitive } from '@base-ui/react/progress'
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+function Progress({
+	className,
+	value,
+	max = 100,
+	...props
+}: ProgressPrimitive.Root.Props) {
+	return (
+		<ProgressPrimitive.Root
+			data-slot="progress"
+			value={value}
+			max={max}
+			className={cn(
+				'relative h-2 w-full overflow-hidden rounded-[var(--radius)] border-[length:var(--border-width)] border-foreground bg-transparent',
+				className,
+			)}
+			{...props}
+		>
+			<ProgressPrimitive.Track
+				data-slot="progress-track"
+				className="relative h-full w-full overflow-hidden bg-muted"
+			>
+				<ProgressPrimitive.Indicator
+					data-slot="progress-indicator"
+					className="h-full w-[var(--progress-value)] bg-foreground transition-[width] duration-300"
+				/>
+			</ProgressPrimitive.Track>
+		</ProgressPrimitive.Root>
+	)
+}
+
+export { Progress }

package/templates/ui/radio-group.tsx

@@ -0,0 +1,41 @@
+'use client'
+
+import { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group'
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+function RadioGroup({ className, ...props }: RadioGroupPrimitive.Root.Props) {
+	return (
+		<RadioGroupPrimitive.Root
+			data-slot="radio-group"
+			className={cn('flex flex-col gap-2', className)}
+			{...props}
+		/>
+	)
+}
+
+function RadioGroupItem({ className, ...props }: RadioGroupPrimitive.Item.Props) {
+	return (
+		<RadioGroupPrimitive.Item
+			data-slot="radio-group-item"
+			className={cn(
+				'peer flex size-4 shrink-0 items-center justify-center rounded-[var(--radius)] border-[length:var(--border-width)] border-foreground bg-transparent',
+				'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
+				'disabled:cursor-not-allowed disabled:opacity-50',
+				'data-checked:bg-foreground',
+				'aria-invalid:border-destructive',
+				className,
+			)}
+			{...props}
+		>
+			<RadioGroupPrimitive.Indicator
+				data-slot="radio-group-indicator"
+				className="flex items-center justify-center"
+			>
+				<div className="size-1.5 rounded-[var(--radius)] bg-background" />
+			</RadioGroupPrimitive.Indicator>
+		</RadioGroupPrimitive.Item>
+	)
+}
+
+export { RadioGroup, RadioGroupItem }

package/templates/ui/receipt-card.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+interface CardProps extends React.HTMLAttributes<HTMLElement> {
+	title?: string
+	mode?: 'left' | 'right' | 'center'
+}
+
+const ReceiptCard = React.forwardRef<HTMLElement, CardProps>(
+	({ children, mode = 'center', title, className, ...props }, ref) => {
+		const leftClasses =
+			'min-w-[10%] w-full shadow-[inset_1px_0_0_0_var(--border-color),inset_0_1px_0_0_var(--border-color)] py-2 px-[2ch]'
+
+		const leftCornerClasses =
+			'shrink-0 shadow-[inset_1px_0_0_0_var(--border-color),inset_0_1px_0_0_var(--border-color)] py-2 px-[1ch]'
+
+		const rightClasses =
+			'min-w-[10%] w-full shadow-[inset_-1px_0_0_0_var(--border-color),inset_0_1px_0_0_var(--border-color)] py-2 px-[2ch]'
+
+		const rightCornerClasses =
+			'shrink-0 shadow-[inset_-1px_0_0_0_var(--border-color),inset_0_1px_0_0_var(--border-color)] py-2 px-[1ch]'
+
+		const titleClasses = 'shrink-0 px-[1ch] text-sm font-normal'
+
+		let titleElement = (
+			<header className="flex items-end justify-between">
+				<div className={leftClasses} aria-hidden="true" />
+				{title ? <h2 className={titleClasses}>{title}</h2> : null}
+				<div className={rightClasses} aria-hidden="true" />
+			</header>
+		)
+
+		if (mode === 'left') {
+			titleElement = (
+				<header className="flex items-end justify-between">
+					<div className={leftCornerClasses} aria-hidden="true" />
+					<h2 className={titleClasses}>{title}</h2>
+					<div className={rightClasses} aria-hidden="true" />
+				</header>
+			)
+		}
+
+		if (mode === 'right') {
+			titleElement = (
+				<header className="flex items-end justify-between">
+					<div className={leftClasses} aria-hidden="true" />
+					<h2 className={titleClasses}>{title}</h2>
+					<div className={rightCornerClasses} aria-hidden="true" />
+				</header>
+			)
+		}
+
+		return (
+			<article
+				ref={ref}
+				data-slot="receipt-card"
+				className={cn('relative block p-0 whitespace-pre-wrap', className)}
+				{...props}
+			>
+				{titleElement}
+				<section className="block py-2 px-[2ch] overflow-x-auto overflow-y-hidden shadow-[inset_1px_0_0_0_var(--border-color),inset_-1px_0_0_0_var(--border-color),inset_0_-1px_0_0_var(--border-color)] scrollbar-none">
+					{children}
+				</section>
+			</article>
+		)
+	},
+)
+ReceiptCard.displayName = 'ReceiptCard'
+
+export { ReceiptCard }