@spree/dashboard-ui 1.0.0-rc.2 → 1.0.0-rc.4

package/src/ui/item.tsx

@@ -0,0 +1,188 @@
+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 * as React from 'react'
+import { cn } from '../lib/utils'
+
+import { Separator } from './separator'
+
+function ItemGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      role="list"
+      data-slot="item-group"
+      className={cn(
+        'group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="item-separator"
+      orientation="horizontal"
+      className={cn('my-2', className)}
+      {...props}
+    />
+  )
+}
+
+const itemVariants = cva(
+  'group/item flex w-full flex-wrap items-center rounded-lg border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent',
+        outline: 'border-border',
+        muted: 'border-transparent bg-muted/50',
+      },
+      size: {
+        default: 'gap-2.5 px-3 py-2.5',
+        sm: 'gap-2.5 px-3 py-2.5',
+        xs: 'gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+function Item({
+  className,
+  variant = 'default',
+  size = 'default',
+  render,
+  ...props
+}: useRender.ComponentProps<'div'> & VariantProps<typeof itemVariants>) {
+  return useRender({
+    defaultTagName: 'div',
+    props: mergeProps<'div'>(
+      {
+        className: cn(itemVariants({ variant, size, className })),
+      },
+      props,
+    ),
+    render,
+    state: {
+      slot: 'item',
+      variant,
+      size,
+    },
+  })
+}
+
+const itemMediaVariants = cva(
+  'flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        icon: "[&_svg:not([class*='size-'])]:size-4",
+        image:
+          'size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+function ItemMedia({
+  className,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof itemMediaVariants>) {
+  return (
+    <div
+      data-slot="item-media"
+      data-variant={variant}
+      className={cn(itemMediaVariants({ variant, className }))}
+      {...props}
+    />
+  )
+}
+
+function ItemContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="item-content"
+      className={cn(
+        'flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="item-title"
+      className={cn(
+        'line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemDescription({ className, ...props }: React.ComponentProps<'p'>) {
+  return (
+    <p
+      data-slot="item-description"
+      className={cn(
+        'line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemActions({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div data-slot="item-actions" className={cn('flex items-center gap-2', className)} {...props} />
+  )
+}
+
+function ItemHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="item-header"
+      className={cn('flex basis-full items-center justify-between gap-2', className)}
+      {...props}
+    />
+  )
+}
+
+function ItemFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="item-footer"
+      className={cn('flex basis-full items-center justify-between gap-2', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemFooter,
+  ItemGroup,
+  ItemHeader,
+  ItemMedia,
+  ItemSeparator,
+  ItemTitle,
+}

package/src/ui/toast.tsx

@@ -12,6 +12,7 @@ import {
   TriangleAlertIcon,
   XIcon,
 } from '../spree/icons'
+import { Button } from './button'
 
 /**
  * App-wide toast manager. Created outside React so a toast can be raised from
@@ -26,18 +27,89 @@ import {
 export const toastManager = ToastPrimitive.createToastManager()
 
 const ICONS: Record<string, React.ReactNode> = {
-  success: <CircleCheckIcon className="size-4 text-emerald-600 dark:text-emerald-400" />,
-  error: <OctagonXIcon className="size-4 text-destructive" />,
-  warning: <TriangleAlertIcon className="size-4 text-amber-600 dark:text-amber-400" />,
-  info: <InfoIcon className="size-4 text-muted-foreground" />,
-  loading: <Loader2Icon className="size-4 animate-spin text-muted-foreground" />,
+  success: <CircleCheckIcon className="text-emerald-600 dark:text-emerald-400" />,
+  error: <OctagonXIcon className="text-destructive" />,
+  warning: <TriangleAlertIcon className="text-amber-600 dark:text-amber-400" />,
+  info: <InfoIcon className="text-muted-foreground" />,
+  loading: <Loader2Icon className="animate-spin text-muted-foreground" />,
+}
+
+function ToastViewport({ className, ...props }: ToastPrimitive.Viewport.Props) {
+  return (
+    <ToastPrimitive.Viewport
+      data-slot="toast-viewport"
+      className={cn(
+        // `z-40`, below the overlay layer (`z-50`) rather than above
+        // everything: the stack sits bottom-right, which is exactly where a
+        // side sheet's footer buttons are, and a toast drifting over Save is
+        // both unclickable and a click the merchant did not intend.
+        'pointer-events-none fixed inset-x-4 bottom-[max(1rem,env(safe-area-inset-bottom))] z-40 mx-auto w-auto max-w-sm outline-none sm:right-4 sm:left-auto sm:mx-0 sm:w-full',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function Toast({ className, ...props }: ToastPrimitive.Root.Props) {
+  return (
+    <ToastPrimitive.Root
+      data-slot="toast"
+      className={cn(
+        'group/toast pointer-events-auto absolute right-0 bottom-0 z-[calc(1000-var(--toast-index))] w-full origin-bottom rounded-2xl border bg-popover text-popover-foreground shadow-lg will-change-transform outline-none select-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
+        '[--gap:0.75rem] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))]',
+        'h-(--height) [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] [transition:transform_500ms_cubic-bezier(0.22,1,0.36,1),opacity_500ms,height_150ms]',
+        "after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']",
+        'data-expanded:h-(--toast-height) data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(var(--offset-y))]',
+        'data-limited:opacity-0 data-starting-style:[transform:translateY(150%)]',
+        '[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)]',
+        'data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]',
+        'data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]',
+        'data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]',
+        'data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]',
+        'data-expanded:data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]',
+        'data-expanded:data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]',
+        'data-expanded:data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]',
+        'data-expanded:data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ToastContent({ className, ...props }: ToastPrimitive.Content.Props) {
+  return (
+    <ToastPrimitive.Content
+      data-slot="toast-content"
+      className={cn(
+        'flex items-center gap-3 overflow-hidden p-4 transition-opacity duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] data-behind:opacity-0 data-expanded:opacity-100',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ToastIcon({ type }: { type: string | undefined }) {
+  const icon = type ? ICONS[type] : null
+  if (!icon) return null
+
+  return (
+    <span
+      data-slot="toast-icon"
+      className="shrink-0 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4"
+    >
+      {icon}
+    </span>
+  )
 }
 
 function ToastList() {
   const { toasts } = ToastPrimitive.useToastManager()
 
   return toasts.map((toast) => (
-    <ToastPrimitive.Root
+    <Toast
       key={toast.id}
       toast={toast}
       // Base UI types a toast as `dialog`, which puts every transient
@@ -45,37 +117,31 @@ function ToastList() {
       // lookup, ours or a screen reader user's, matches whatever toast happens
       // to be on screen. `status` is what a passive notification should expose.
       role={toast.type === 'error' ? 'alert' : 'status'}
-      // `--toast-index` / `--toast-offset-y` drive the stacked-card effect:
-      // toasts behind the front one scale down and sit slightly higher.
-      className={cn(
-        // Normal flow inside a bottom-anchored column, not absolute
-        // positioning: a zero-height viewport gives an absolutely-positioned
-        // child nothing to sit on, and it renders below the fold.
-        'pointer-events-auto w-full',
-        'rounded-xl border border-border bg-popover p-4 text-popover-foreground shadow-lg',
-        'transition-all duration-200 ease-out',
-        'data-[starting-style]:translate-y-2 data-[starting-style]:opacity-0',
-        'data-[ending-style]:translate-y-2 data-[ending-style]:opacity-0',
-      )}
     >
-      <div className="flex items-start gap-3">
-        {toast.type && ICONS[toast.type] && (
-          <span className="mt-0.5 shrink-0">{ICONS[toast.type]}</span>
-        )}
+      <ToastContent>
+        <ToastIcon type={toast.type} />
         <div className="flex min-w-0 flex-1 flex-col gap-1">
-          <ToastPrimitive.Title className="font-medium text-sm leading-snug" />
-          <ToastPrimitive.Description className="text-muted-foreground text-sm leading-snug" />
+          <ToastPrimitive.Title data-slot="toast-title" className="font-medium text-sm" />
+          <ToastPrimitive.Description
+            data-slot="toast-description"
+            className="text-muted-foreground text-sm"
+          />
         </div>
+        <ToastPrimitive.Action
+          data-slot="toast-action"
+          render={<Button variant="outline" size="sm" />}
+          className="shrink-0"
+        />
         <ToastPrimitive.Close
-          // 44px tap target on touch, compact for a pointer — the same rule the
-          // rest of the app follows for icon-only controls.
-          className="-mt-1 -mr-1 inline-flex size-7 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+          data-slot="toast-close"
           aria-label={i18n.t('admin.actions.close')}
+          render={<Button variant="ghost" size="icon-sm" />}
+          className="relative shrink-0 text-muted-foreground after:absolute after:-inset-2 after:content-[''] hover:text-foreground"
         >
-          <XIcon className="size-4" />
+          <XIcon aria-hidden="true" />
         </ToastPrimitive.Close>
-      </div>
-    </ToastPrimitive.Root>
+      </ToastContent>
+    </Toast>
   ))
 }
 
@@ -90,22 +156,10 @@ export function Toaster({ children }: { children?: React.ReactNode }) {
   return (
     <ToastPrimitive.Provider toastManager={toastManager}>
       {children}
-      <ToastPrimitive.Portal>
-        <ToastPrimitive.Viewport
-          className={cn(
-            // Below the overlay layer (`z-50`) rather than above everything:
-            // the stack sits bottom-right, which is exactly where a side
-            // sheet's footer buttons are, and a toast drifting over Save is
-            // both unclickable and a click the merchant did not intend.
-            'fixed right-4 z-40 flex w-[min(22rem,calc(100vw-2rem))] flex-col gap-2',
-            // `pointer-events-none` on the column so the empty space above the
-            // stack never blocks the page; each toast takes them back.
-            'pointer-events-none',
-            'bottom-[max(1rem,env(safe-area-inset-bottom))]',
-          )}
-        >
+      <ToastPrimitive.Portal data-slot="toast-portal">
+        <ToastViewport>
           <ToastList />
-        </ToastPrimitive.Viewport>
+        </ToastViewport>
       </ToastPrimitive.Portal>
     </ToastPrimitive.Provider>
   )