@spree/dashboard-ui 0.1.0

package/src/ui/input-group.tsx

@@ -0,0 +1,141 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
+import { cn } from '../lib/utils'
+import { Button } from './button'
+import { Input } from './input'
+import { Textarea } from './textarea'
+
+function InputGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        'group/input-group relative flex w-full min-w-0 items-center rounded-lg border border-border bg-card text-foreground shadow-xs transition-all duration-100 ease-in-out outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:shadow-none has-disabled:bg-muted has-disabled:border-border has-disabled:opacity-50 has-disabled:shadow-none has-[[data-slot=input-group-control]:focus-visible]:border-blue-500 has-[[data-slot=input-group-control]:focus-visible]:shadow-[0_0_0_3px_rgba(59,130,246,0.15)] has-[[data-slot][aria-invalid=true]]:border-destructive 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 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-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>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-sm shadow-none', {
+  variants: {
+    size: {
+      xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+      sm: '',
+      'icon-xs': 'size-6 rounded-[calc(var(--radius)-3px)] 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'> &
+  VariantProps<typeof inputGroupButtonVariants>) {
+  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-sm 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-none border-0 bg-transparent shadow-none ring-0 focus:border-0 focus:shadow-none focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupTextarea({ className, ...props }: React.ComponentProps<'textarea'>) {
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn(
+        'flex-1 resize-none rounded-none 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,
+  InputGroupInput,
+  InputGroupText,
+  InputGroupTextarea,
+}

package/src/ui/input.tsx

@@ -0,0 +1,19 @@
+import type * as React from 'react'
+
+import { cn } from '../lib/utils'
+
+function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        'block w-full min-w-0 min-h-8 rounded-lg border border-border bg-card py-1.5 px-2.5 text-base font-normal leading-normal text-foreground shadow-xs transition-all duration-100 ease-in-out outline-none placeholder:text-muted-foreground focus:border-blue-500 focus:shadow-[0_0_0_3px_rgba(59,130,246,0.15)] disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-muted disabled:border-border disabled:text-muted-foreground disabled:shadow-none aria-invalid:border-destructive file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

package/src/ui/label.tsx

@@ -0,0 +1,29 @@
+import { Field } from '@base-ui/react/field'
+import * as React from 'react'
+
+import { cn } from '../lib/utils'
+
+/**
+ * Label component backed by Base UI's Field.Label.
+ *
+ * Wraps each label in a Field.Root so it can be used standalone
+ * without requiring consumers to manually add Field.Root parents.
+ */
+function Label({ className, children, ...props }: React.ComponentProps<'label'>) {
+  return (
+    <Field.Root>
+      <Field.Label
+        data-slot="label"
+        className={cn(
+          'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </Field.Label>
+    </Field.Root>
+  )
+}
+
+export { Label }

package/src/ui/pagination.tsx

@@ -0,0 +1,123 @@
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ChevronsLeftIcon,
+  ChevronsRightIcon,
+} from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import { Button } from './button'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './select'
+
+interface PaginationMeta {
+  page: number
+  limit: number
+  count: number
+  pages: number
+  from: number
+  to: number
+  previous: number | null
+  next: number | null
+}
+
+interface PaginationProps {
+  meta: PaginationMeta
+  onPageChange: (page: number) => void
+  onPageSizeChange?: (size: number) => void
+  pageSizeOptions?: number[]
+}
+
+export function Pagination({
+  meta,
+  onPageChange,
+  onPageSizeChange,
+  pageSizeOptions = [10, 20, 25, 30, 50],
+}: PaginationProps) {
+  const { t } = useTranslation()
+
+  if (meta.pages <= 1 && !onPageSizeChange) return null
+
+  return (
+    <div className="flex items-center justify-between border-t border-border px-4 py-3">
+      <div className="text-sm text-muted-foreground">
+        {t('admin.components.pagination.range', {
+          from: meta.from,
+          to: meta.to,
+          count: meta.count,
+        })}
+      </div>
+      <div className="flex items-center gap-6">
+        {onPageSizeChange && (
+          <div className="flex items-center gap-2">
+            <span className="text-sm text-muted-foreground">
+              {t('admin.components.pagination.rows_per_page')}
+            </span>
+            <Select
+              value={`${meta.limit}`}
+              onValueChange={(value) => onPageSizeChange(Number(value))}
+            >
+              <SelectTrigger className="h-8 w-[70px]">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent side="top">
+                {pageSizeOptions.map((size) => (
+                  <SelectItem key={size} value={`${size}`}>
+                    {size}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        )}
+        {meta.pages > 1 && (
+          <>
+            <span className="text-sm text-muted-foreground">
+              {t('admin.common.page_of', { page: meta.page, total: meta.pages })}
+            </span>
+            <div className="flex items-center gap-1">
+              <Button
+                size="icon-sm"
+                variant="outline"
+                className="hidden lg:flex"
+                disabled={!meta.previous}
+                onClick={() => onPageChange(1)}
+              >
+                <span className="sr-only">{t('admin.components.pagination.first_page')}</span>
+                <ChevronsLeftIcon />
+              </Button>
+              <Button
+                size="icon-sm"
+                variant="outline"
+                disabled={!meta.previous}
+                onClick={() => meta.previous && onPageChange(meta.previous)}
+              >
+                <span className="sr-only">{t('admin.components.pagination.previous_page')}</span>
+                <ChevronLeftIcon />
+              </Button>
+              <Button
+                size="icon-sm"
+                variant="outline"
+                disabled={!meta.next}
+                onClick={() => meta.next && onPageChange(meta.next)}
+              >
+                <span className="sr-only">{t('admin.components.pagination.next_page')}</span>
+                <ChevronRightIcon />
+              </Button>
+              <Button
+                size="icon-sm"
+                className="hidden lg:flex"
+                variant="outline"
+                disabled={!meta.next}
+                onClick={() => onPageChange(meta.pages)}
+              >
+                <span className="sr-only">{t('admin.components.pagination.last_page')}</span>
+                <ChevronsRightIcon />
+              </Button>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export type { PaginationMeta }

package/src/ui/popover.tsx

@@ -0,0 +1,76 @@
+import { Popover as PopoverPrimitive } from '@base-ui/react/popover'
+import * as React from 'react'
+import { cn } from '../lib/utils'
+
+function Popover({
+  children,
+  ...props
+}: {
+  children?: React.ReactNode
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean, eventDetails: PopoverPrimitive.Root.ChangeEventDetails) => void
+  modal?: boolean
+}) {
+  return (
+    <PopoverPrimitive.Root data-slot="popover" {...props}>
+      {children}
+    </PopoverPrimitive.Root>
+  )
+}
+
+function PopoverTrigger({
+  asChild,
+  children,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger> & {
+  asChild?: boolean
+}) {
+  if (asChild && React.isValidElement(children)) {
+    return <PopoverPrimitive.Trigger data-slot="popover-trigger" render={children} {...props} />
+  }
+  return (
+    <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props}>
+      {children}
+    </PopoverPrimitive.Trigger>
+  )
+}
+
+function PopoverContent({
+  className,
+  align = 'center',
+  sideOffset = 4,
+  side = 'bottom',
+  children,
+  ...props
+}: {
+  className?: string
+  align?: 'start' | 'center' | 'end'
+  sideOffset?: number
+  side?: 'top' | 'bottom' | 'left' | 'right'
+  children?: React.ReactNode
+} & Omit<React.ComponentProps<typeof PopoverPrimitive.Popup>, 'className'>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Positioner side={side} sideOffset={sideOffset} align={align}>
+        <PopoverPrimitive.Popup
+          data-slot="popover-content"
+          className={cn(
+            'z-50 w-auto rounded-lg border border-border bg-popover p-3 text-popover-foreground shadow-md',
+            'duration-100 data-[starting-style]:opacity-0 data-[starting-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:scale-95 transition-[opacity,transform]',
+            className,
+          )}
+          {...props}
+        >
+          {children}
+        </PopoverPrimitive.Popup>
+      </PopoverPrimitive.Positioner>
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({ ...props }: React.ComponentProps<'div'>) {
+  return <div data-slot="popover-anchor" {...props} />
+}
+
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger }

package/src/ui/progress.tsx

@@ -0,0 +1,73 @@
+'use client'
+
+import { Progress as ProgressPrimitive } from '@base-ui/react/progress'
+
+import { cn } from '../lib/utils'
+
+/**
+ * Base UI progress bar. `value={null}` renders the indeterminate state
+ * (Base UI stamps `data-indeterminate` on every part). Compose
+ * `ProgressLabel`/`ProgressValue` as children when a caption is needed —
+ * the track always renders last.
+ */
+function Progress({ className, children, value, ...props }: ProgressPrimitive.Root.Props) {
+  return (
+    <ProgressPrimitive.Root
+      value={value}
+      data-slot="progress"
+      className={cn('flex w-full flex-wrap items-center gap-2', className)}
+      {...props}
+    >
+      {children}
+      <ProgressTrack>
+        <ProgressIndicator />
+      </ProgressTrack>
+    </ProgressPrimitive.Root>
+  )
+}
+
+function ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props) {
+  return (
+    <ProgressPrimitive.Track
+      data-slot="progress-track"
+      className={cn('relative h-2 w-full overflow-hidden rounded-full bg-primary/20', className)}
+      {...props}
+    />
+  )
+}
+
+function ProgressIndicator({ className, ...props }: ProgressPrimitive.Indicator.Props) {
+  return (
+    <ProgressPrimitive.Indicator
+      data-slot="progress-indicator"
+      className={cn(
+        'h-full rounded-full bg-primary transition-all',
+        'data-[indeterminate]:w-1/3 data-[indeterminate]:animate-pulse',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ProgressLabel({ className, ...props }: ProgressPrimitive.Label.Props) {
+  return (
+    <ProgressPrimitive.Label
+      data-slot="progress-label"
+      className={cn('font-medium text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+function ProgressValue({ className, ...props }: ProgressPrimitive.Value.Props) {
+  return (
+    <ProgressPrimitive.Value
+      data-slot="progress-value"
+      className={cn('ml-auto text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+export { Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue }

package/src/ui/radio-group.tsx

@@ -0,0 +1,42 @@
+import { Radio as RadioPrimitive } from '@base-ui/react/radio'
+import { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group'
+import type * as React from 'react'
+import { cn } from '../lib/utils'
+
+function RadioGroup({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive>) {
+  return (
+    <RadioGroupPrimitive
+      data-slot="radio-group"
+      className={cn('grid w-full gap-2', className)}
+      {...props}
+    />
+  )
+}
+
+function RadioGroupItem({ className, ...props }: React.ComponentProps<typeof RadioPrimitive.Root>) {
+  return (
+    <RadioPrimitive.Root
+      data-slot="radio-group-item"
+      className={cn(
+        'peer relative inline-block size-4 shrink-0 rounded-full border border-input align-[-3px] shadow-xs outline-none transition-shadow',
+        'focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
+        'disabled:cursor-not-allowed disabled:opacity-50',
+        'aria-invalid:border-destructive aria-invalid:ring-destructive/20',
+        'data-[checked]:border-blue-500 data-[checked]:bg-blue-500 data-[checked]:text-white',
+        'dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[checked]:bg-blue-500',
+        className,
+      )}
+      {...props}
+    >
+      <RadioPrimitive.Indicator
+        keepMounted
+        data-slot="radio-group-indicator"
+        className="absolute inset-0 flex items-center justify-center text-current transition-none data-[unchecked]:hidden"
+      >
+        <span className="size-1.5 rounded-full bg-current" />
+      </RadioPrimitive.Indicator>
+    </RadioPrimitive.Root>
+  )
+}
+
+export { RadioGroup, RadioGroupItem }