@spree/dashboard-ui 0.1.0

package/src/ui/slot.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react'
+import { cn } from '../lib/utils'
+
+/**
+ * A simple Slot component that merges props onto its single child element.
+ * This replaces the Radix UI `Slot` primitive for `asChild`-style composition.
+ */
+function Slot({
+  children,
+  ...props
+}: React.HTMLAttributes<HTMLElement> & { children?: React.ReactNode }) {
+  if (React.isValidElement(children)) {
+    const childProps = children.props as Record<string, unknown>
+    return React.cloneElement(children, {
+      ...props,
+      ...childProps,
+      className: cn(
+        (props as Record<string, unknown>).className as string | undefined,
+        childProps.className as string | undefined,
+      ),
+      style: {
+        ...((props as Record<string, unknown>).style as React.CSSProperties | undefined),
+        ...(childProps.style as React.CSSProperties | undefined),
+      },
+    } as React.HTMLAttributes<HTMLElement>)
+  }
+
+  if (React.Children.count(children) > 1) {
+    React.Children.only(null)
+  }
+
+  return null
+}
+
+export { Slot }

package/src/ui/sonner.tsx

@@ -0,0 +1,47 @@
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  OctagonXIcon,
+  TriangleAlertIcon,
+} from 'lucide-react'
+import type { CSSProperties } from 'react'
+import { Toaster as Sonner, type ToasterProps } from 'sonner'
+import { useTheme } from '../spree/theme-provider'
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  // The shadcn-default Sonner template assumes `next-themes`. This app has its
+  // own ThemeProvider that exposes a `mode` (the user's selection: light/dark/system)
+  // — Sonner's `theme` prop accepts the same three values, so we forward it.
+  const { mode } = useTheme()
+
+  return (
+    <Sonner
+      theme={mode as ToasterProps['theme']}
+      className="toaster group"
+      icons={{
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
+      }}
+      style={
+        {
+          '--normal-bg': 'var(--popover)',
+          '--normal-text': 'var(--popover-foreground)',
+          '--normal-border': 'var(--border)',
+          '--border-radius': 'var(--radius)',
+        } as CSSProperties
+      }
+      toastOptions={{
+        classNames: {
+          toast: 'cn-toast',
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

package/src/ui/switch.tsx

@@ -0,0 +1,39 @@
+import { Switch as SwitchPrimitive } from '@base-ui/react/switch'
+import type * as React from 'react'
+import { cn } from '../lib/utils'
+
+function Switch({
+  className,
+  checked,
+  defaultChecked,
+  onCheckedChange,
+  disabled,
+  name,
+  ...props
+}: Omit<React.ComponentProps<typeof SwitchPrimitive.Root>, 'children'> & {
+  onCheckedChange?: (checked: boolean) => void
+}) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      checked={checked}
+      defaultChecked={defaultChecked}
+      onCheckedChange={onCheckedChange ? (checked) => onCheckedChange(checked) : undefined}
+      disabled={disabled}
+      name={name}
+      className={cn(
+        'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[checked]:bg-blue-600 data-[unchecked]:bg-input',
+        className,
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        className={cn(
+          'pointer-events-none block h-4 w-4 rounded-full bg-white shadow-lg ring-0 transition-transform data-[checked]:translate-x-4 data-[unchecked]:translate-x-0',
+        )}
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }

package/src/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react'
+
+import { cn } from '../lib/utils'
+
+function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        'flex field-sizing-content min-h-16 w-full rounded-lg border border-border bg-card px-2.5 py-1.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',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

package/src/ui/tooltip.tsx

@@ -0,0 +1,100 @@
+'use client'
+
+import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip'
+import * as React from 'react'
+
+import { cn } from '../lib/utils'
+
+function TooltipProvider({
+  delayDuration = 0,
+  children,
+  ...props
+}: {
+  delayDuration?: number
+  children: React.ReactNode
+} & Omit<React.ComponentProps<typeof TooltipPrimitive.Provider>, 'delay'>) {
+  return (
+    <TooltipPrimitive.Provider data-slot="tooltip-provider" delay={delayDuration} {...props}>
+      {children}
+    </TooltipPrimitive.Provider>
+  )
+}
+
+function Tooltip({
+  children,
+  ...props
+}: {
+  children?: React.ReactNode
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean, eventDetails: TooltipPrimitive.Root.ChangeEventDetails) => void
+}) {
+  return (
+    <TooltipPrimitive.Root data-slot="tooltip" {...props}>
+      {children}
+    </TooltipPrimitive.Root>
+  )
+}
+
+function TooltipTrigger({
+  asChild,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger> & {
+  asChild?: boolean
+}) {
+  if (asChild && React.isValidElement(children)) {
+    return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" render={children} {...props} />
+  }
+
+  return (
+    <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props}>
+      {children}
+    </TooltipPrimitive.Trigger>
+  )
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 4,
+  side = 'top',
+  align = 'center',
+  children,
+  hidden,
+  ...props
+}: {
+  className?: string
+  sideOffset?: number
+  side?: 'top' | 'bottom' | 'left' | 'right'
+  align?: 'start' | 'center' | 'end'
+  children?: React.ReactNode
+  hidden?: boolean
+} & Omit<React.ComponentProps<typeof TooltipPrimitive.Popup>, 'className'>) {
+  if (hidden) {
+    return null
+  }
+
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        className="z-50"
+      >
+        <TooltipPrimitive.Popup
+          data-slot="tooltip-content"
+          className={cn(
+            'z-50 inline-flex w-fit max-w-[200px] items-center gap-1.5 rounded-lg border border-border bg-popover px-2 py-1 text-sm font-normal text-popover-foreground shadow-md data-[starting-style]:opacity-0 data-[starting-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:scale-95 transition-[opacity,transform] duration-100',
+            className,
+          )}
+          {...props}
+        >
+          {children}
+        </TooltipPrimitive.Popup>
+      </TooltipPrimitive.Positioner>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }