@spree/dashboard-ui 0.1.0

package/src/ui/attachment.tsx

@@ -0,0 +1,187 @@
+'use client'
+
+import { mergeProps } from '@base-ui/react/merge-props'
+import { useRender } from '@base-ui/react/use-render'
+import { cva, type VariantProps } from 'class-variance-authority'
+import type * as React from 'react'
+
+import { cn } from '../lib/utils'
+import { Button } from './button'
+
+// Ported from the shadcn Base UI `attachment` registry component, with the
+// `cn-*` preset classes flattened into plain utilities (this package predates
+// the shadcn CSS layer).
+const attachmentVariants = cva(
+  'group/attachment relative flex max-w-full min-w-0 shrink-0 flex-wrap rounded-lg border bg-card text-card-foreground transition-colors has-[>a,>button]:hover:bg-muted/50 data-[state=error]:border-destructive/30 data-[state=idle]:border-dashed',
+  {
+    variants: {
+      size: {
+        default: 'gap-2.5 p-2 pr-2.5',
+        sm: 'gap-2 p-1.5 pr-2',
+        xs: 'gap-1.5 p-1 pr-1.5',
+      },
+      orientation: {
+        horizontal: 'items-center',
+        vertical: 'flex-col',
+      },
+    },
+  },
+)
+
+function Attachment({
+  className,
+  state = 'done',
+  size = 'default',
+  orientation = 'horizontal',
+  ...props
+}: React.ComponentProps<'div'> &
+  VariantProps<typeof attachmentVariants> & {
+    state?: 'idle' | 'uploading' | 'processing' | 'error' | 'done'
+  }) {
+  return (
+    <div
+      data-slot="attachment"
+      data-state={state}
+      data-size={size}
+      data-orientation={orientation}
+      className={cn(attachmentVariants({ size, orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+const attachmentMediaVariants = cva(
+  'relative flex aspect-square size-9 shrink-0 items-center justify-center overflow-hidden rounded-md group-data-[state=error]/attachment:bg-destructive/10 group-data-[state=error]/attachment:text-destructive [&_svg]:pointer-events-none [&_svg:not([class*=size-])]:size-4',
+  {
+    variants: {
+      variant: {
+        icon: 'bg-muted text-muted-foreground',
+        // Image fit is left to the caller's <img> classes — logos want
+        // `object-contain`, photos want `object-cover`.
+        image: 'bg-muted',
+      },
+    },
+    defaultVariants: {
+      variant: 'icon',
+    },
+  },
+)
+
+function AttachmentMedia({
+  className,
+  variant = 'icon',
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof attachmentMediaVariants>) {
+  return (
+    <div
+      data-slot="attachment-media"
+      data-variant={variant}
+      className={cn(attachmentMediaVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AttachmentContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="attachment-content"
+      className={cn('max-w-full min-w-0 flex-1', className)}
+      {...props}
+    />
+  )
+}
+
+function AttachmentTitle({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="attachment-title"
+      className={cn('block max-w-full min-w-0 truncate font-medium text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+function AttachmentDescription({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="attachment-description"
+      className={cn(
+        'block max-w-full min-w-0 truncate text-muted-foreground text-xs group-data-[state=error]/attachment:text-destructive/80',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AttachmentActions({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="attachment-actions"
+      className={cn('flex shrink-0 items-center gap-1', className)}
+      {...props}
+    />
+  )
+}
+
+function AttachmentAction({
+  className,
+  variant,
+  size = 'icon-xs',
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  return (
+    <Button
+      data-slot="attachment-action"
+      variant={variant ?? 'ghost'}
+      size={size}
+      className={className}
+      {...props}
+    />
+  )
+}
+
+function AttachmentTrigger({
+  className,
+  render,
+  type,
+  ...props
+}: useRender.ComponentProps<'button'>) {
+  return useRender({
+    defaultTagName: 'button',
+    props: mergeProps<'button'>(
+      {
+        type: render ? type : (type ?? 'button'),
+        className: cn('absolute inset-0 z-10 outline-none', className),
+      },
+      props,
+    ),
+    render,
+    state: {
+      slot: 'attachment-trigger',
+    },
+  })
+}
+
+function AttachmentGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="attachment-group"
+      className={cn('flex min-w-0 gap-2 overflow-x-auto', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Attachment,
+  AttachmentAction,
+  AttachmentActions,
+  AttachmentContent,
+  AttachmentDescription,
+  AttachmentGroup,
+  AttachmentMedia,
+  AttachmentTitle,
+  AttachmentTrigger,
+}

package/src/ui/avatar.tsx

@@ -0,0 +1,94 @@
+import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar'
+import type * as React from 'react'
+
+import { cn } from '../lib/utils'
+
+function Avatar({
+  className,
+  size = 'default',
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root> & {
+  size?: 'default' | 'sm' | 'lg'
+}) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      data-size={size}
+      className={cn(
+        'group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn('aspect-square size-full rounded-full object-cover', className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        'flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs uppercase',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarBadge({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="avatar-badge"
+      className={cn(
+        'absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-lg bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none',
+        'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden',
+        'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2',
+        'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="avatar-group"
+      className={cn(
+        'group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroupCount({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="avatar-group-count"
+      className={cn(
+        'relative flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage }

package/src/ui/badge.tsx

@@ -0,0 +1,161 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+import { CheckIcon } from 'lucide-react'
+import * as React from 'react'
+import { useTranslation } from 'react-i18next'
+import { cn } from '../lib/utils'
+import { Slot } from './slot'
+
+const badgeVariants = cva(
+  'group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
+        secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
+        destructive:
+          'bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20',
+        // Mirrors the `destructive` recipe (tinted bg + matching text) with a
+        // green hue for "succeeded / completed / paid / shipped" states. Dark
+        // mode bumps text to `green-400` so it stays legible on dark fills.
+        success:
+          'bg-green-500/15 text-green-700 dark:bg-green-500/15 dark:text-green-400 [a]:hover:bg-green-500/25',
+        outline:
+          'border-border text-foreground/75 [a]:hover:bg-muted [a]:hover:text-muted-foreground',
+        ghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+function Badge({
+  className,
+  variant = 'default',
+  asChild = false,
+  ...props
+}: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : 'span'
+
+  return (
+    <Comp
+      data-slot="badge"
+      data-variant={variant}
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+// Maps order/payment/etc. status strings to one of the canonical Badge
+// variants. Success-y states ("active", "paid", "shipped", …) route through
+// the `success` variant so the UI stays color-coded; everything else leans
+// on the canonical shadcn variants with shape + label carrying meaning.
+const statusVariantMap: Record<string, VariantProps<typeof badgeVariants>['variant']> = {
+  active: 'success',
+  complete: 'success',
+  completed: 'success',
+  paid: 'success',
+  shipped: 'success',
+  published: 'success',
+  approved: 'success',
+  ready: 'success',
+  draft: 'outline',
+  pending: 'outline',
+  processing: 'outline',
+  inactive: 'outline',
+  cart: 'outline',
+  address: 'outline',
+  delivery: 'outline',
+  payment: 'outline',
+  confirm: 'outline',
+  resumed: 'secondary',
+  partial: 'secondary',
+  archived: 'secondary',
+  returned: 'secondary',
+  backorder: 'secondary',
+  balance_due: 'secondary',
+  credit_owed: 'secondary',
+  canceled: 'destructive',
+  failed: 'destructive',
+  void: 'destructive',
+  error: 'destructive',
+  rejected: 'destructive',
+}
+
+/**
+ * Status pill whose color is derived from the raw status code. Stays headless:
+ * pass a translated `label` from the app layer; without one it humanizes the
+ * code itself (`balance_due` → `balance due`) as a best-effort fallback.
+ */
+function StatusBadge({
+  status,
+  label,
+  className,
+}: {
+  status: string
+  label?: string
+  className?: string
+}) {
+  const variant = statusVariantMap[status] ?? 'outline'
+  return (
+    <Badge variant={variant} className={cn('capitalize', className)}>
+      {label ?? status.replace(/_/g, ' ')}
+    </Badge>
+  )
+}
+
+/**
+ * Boolean-state badge — mirrors the Rails admin's `active_badge` helper.
+ *
+ * Renders a `success` (check + label) badge when `active`, an `outline`
+ * badge with the inactive label otherwise. Use it for "Yes/No" or
+ * "Enabled/Disabled" cells in tables and detail rows.
+ *
+ * @example  Default Yes/No
+ *   <ActiveBadge active={user.confirmed} />
+ *
+ * @example  Custom labels
+ *   <ActiveBadge active={sl.pickup_enabled} activeLabel="Enabled" inactiveLabel="Disabled" />
+ *
+ * @example  Hide inactive (renders a muted dash instead — matches the
+ *   pre-existing `<Badge> : <span>—</span>` pattern in stock-locations).
+ *   <ActiveBadge active={sl.pickup_enabled} activeLabel="Enabled" dashWhenInactive />
+ */
+function ActiveBadge({
+  active,
+  activeLabel,
+  inactiveLabel,
+  dashWhenInactive = false,
+  className,
+}: {
+  active: boolean | null | undefined
+  activeLabel?: string
+  inactiveLabel?: string
+  dashWhenInactive?: boolean
+  className?: string
+}) {
+  const { t } = useTranslation()
+  const resolvedActiveLabel = activeLabel ?? t('admin.common.yes')
+  const resolvedInactiveLabel = inactiveLabel ?? t('admin.common.no')
+  if (active) {
+    return (
+      <Badge variant="success" className={className}>
+        <CheckIcon />
+        {resolvedActiveLabel}
+      </Badge>
+    )
+  }
+  if (dashWhenInactive) {
+    return <span className={cn('text-muted-foreground', className)}>—</span>
+  }
+  return (
+    <Badge variant="outline" className={className}>
+      {resolvedInactiveLabel}
+    </Badge>
+  )
+}
+
+export { ActiveBadge, Badge, badgeVariants, StatusBadge }

package/src/ui/breadcrumb.tsx

@@ -0,0 +1,109 @@
+import i18n from 'i18next'
+import { ChevronRightIcon, MoreHorizontalIcon } from 'lucide-react'
+import type * as React from 'react'
+import { cn } from '../lib/utils'
+import { Slot } from './slot'
+
+function Breadcrumb({ className, ...props }: React.ComponentProps<'nav'>) {
+  return (
+    <nav
+      aria-label={i18n.t('admin.a11y.breadcrumb')}
+      data-slot="breadcrumb"
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        'flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn('inline-flex items-center gap-1', className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<'a'> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot : 'a'
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn('transition-colors hover:text-foreground', className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn('font-normal text-foreground', className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn('[&>svg]:size-3.5', className)}
+      {...props}
+    >
+      {children ?? <ChevronRightIcon />}
+    </li>
+  )
+}
+
+function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn('flex size-5 items-center justify-center [&>svg]:size-4', className)}
+      {...props}
+    >
+      <MoreHorizontalIcon />
+      <span className="sr-only">{i18n.t('admin.a11y.breadcrumb_more')}</span>
+    </span>
+  )
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+}

package/src/ui/button.tsx

@@ -0,0 +1,60 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+import type * as React from 'react'
+import { cn } from '../lib/utils'
+import { Slot } from './slot'
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center gap-2 rounded-xl border border-transparent text-sm font-medium whitespace-nowrap cursor-pointer select-none no-underline transition-[color,background-color,border-color,box-shadow] duration-100 ease-linear outline-none focus-visible:border-blue-500 focus-visible:shadow-[0_0_0_3px_rgba(59,130,246,0.15)] disabled:pointer-events-none disabled:opacity-70 disabled:cursor-not-allowed aria-invalid:border-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default:
+          'bg-primary text-primary-foreground shadow-xs hover:bg-primary/85 dark:bg-blue-600 dark:text-white dark:hover:bg-blue-500',
+        outline:
+          'border-border bg-muted text-foreground shadow-xs hover:bg-accent hover:text-foreground aria-expanded:bg-accent',
+        ghost: 'hover:bg-accent hover:text-accent-foreground aria-expanded:bg-accent',
+        destructive: 'text-destructive bg-muted border-border shadow-xs hover:bg-destructive/10',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-3 py-1.5',
+        xs: "h-6 gap-1 rounded-lg px-2 text-xs [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-lg px-2 py-1 text-sm [&_svg:not([class*='size-'])]:size-3.5",
+        lg: 'h-10 px-3 py-2 text-base',
+        icon: 'size-9',
+        'icon-xs': "size-6 rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        'icon-sm': 'size-7 rounded-lg',
+        'icon-lg': 'size-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+function Button({
+  className,
+  variant = 'default',
+  size = 'default',
+  asChild = false,
+  ...props
+}: React.ComponentProps<'button'> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : 'button'
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

package/src/ui/calendar.tsx

@@ -0,0 +1,66 @@
+import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react'
+import type * as React from 'react'
+import { DayPicker } from 'react-day-picker'
+import { activeDateLocale } from '../lib/date-locale'
+import { cn } from '../lib/utils'
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  locale,
+  ...props
+}: React.ComponentProps<typeof DayPicker>) {
+  return (
+    <DayPicker
+      // Month/weekday names follow the admin UI language unless a caller
+      // overrides `locale`.
+      locale={locale ?? activeDateLocale()}
+      showOutsideDays={showOutsideDays}
+      className={cn('p-3', className)}
+      classNames={{
+        months: 'flex flex-col sm:flex-row gap-2 relative',
+        month: 'flex flex-col gap-4',
+        month_caption: 'flex justify-center pt-1 relative items-center w-full',
+        caption_label: 'text-sm font-medium',
+        nav: 'absolute top-1 inset-x-0 flex items-center justify-between px-1 z-10',
+        button_previous:
+          'inline-flex size-7 items-center justify-center rounded-md border border-border bg-transparent p-0 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground',
+        button_next:
+          'inline-flex size-7 items-center justify-center rounded-md border border-border bg-transparent p-0 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground',
+        month_grid: 'w-full border-collapse',
+        weekdays: 'flex',
+        weekday: 'text-muted-foreground rounded-md w-8 font-normal text-xs',
+        week: 'flex w-full mt-2',
+        day: 'relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-blue-50 [&:has([aria-selected].day-outside)]:bg-blue-50/50 [&:has([aria-selected].day-range-end)]:rounded-r-md',
+        day_button: cn(
+          'inline-flex size-8 items-center justify-center rounded-md p-0 font-normal transition-colors',
+          'hover:bg-accent hover:text-foreground',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500',
+          'aria-selected:bg-blue-600 aria-selected:text-white aria-selected:hover:bg-blue-700 aria-selected:focus:bg-blue-700',
+        ),
+        range_start: 'day-range-start rounded-l-md',
+        range_end: 'day-range-end rounded-r-md',
+        selected: 'bg-blue-600 text-white hover:bg-blue-700 focus:bg-blue-700',
+        today: 'bg-accent text-foreground',
+        outside:
+          'day-outside text-muted-foreground opacity-50 aria-selected:bg-blue-500/15 aria-selected:text-muted-foreground aria-selected:opacity-60',
+        disabled: 'text-muted-foreground opacity-50',
+        range_middle: 'aria-selected:bg-blue-500/15 aria-selected:text-foreground',
+        hidden: 'invisible',
+        ...classNames,
+      }}
+      components={{
+        Chevron: ({ orientation }) =>
+          orientation === 'left' ? (
+            <ChevronLeftIcon className="size-4" />
+          ) : (
+            <ChevronRightIcon className="size-4" />
+          ),
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Calendar }