@pantoia/ui 0.2.0 → 0.4.0

package/toast/index.module.css

@@ -0,0 +1,187 @@
+@keyframes swipe-out-left {
+  from { transform: var(--toast-y) translateX(var(--toast-swipe-movement-x)); opacity: 1; }
+  to   { transform: var(--toast-y) translateX(calc(var(--toast-swipe-movement-x) - 100%)); opacity: 0; }
+}
+
+@keyframes swipe-out-right {
+  from { transform: var(--toast-y) translateX(var(--toast-swipe-movement-x)); opacity: 1; }
+  to   { transform: var(--toast-y) translateX(calc(var(--toast-swipe-movement-x) + 100%)); opacity: 0; }
+}
+
+@keyframes swipe-out-up {
+  from { transform: var(--toast-y) translateY(var(--toast-swipe-movement-y)); opacity: 1; }
+  to   { transform: var(--toast-y) translateY(calc(var(--toast-swipe-movement-y) - 100%)); opacity: 0; }
+}
+
+@keyframes swipe-out-down {
+  from { transform: var(--toast-y) translateY(var(--toast-swipe-movement-y)); opacity: 1; }
+  to   { transform: var(--toast-y) translateY(calc(var(--toast-swipe-movement-y) + 100%)); opacity: 0; }
+}
+
+.viewport {
+  --toast-gap: 8px;
+  --toast-inset: 16px;
+  position: fixed;
+  box-sizing: border-box;
+  width: 356px;
+  margin: 0;
+  padding: 0;
+  outline: none;
+  transition: transform 400ms ease;
+}
+
+.viewport[data-position$='right']  { right: var(--toast-inset); }
+.viewport[data-position$='left']   { left: var(--toast-inset); }
+.viewport[data-position$='center'] { left: 50%; transform: translateX(-50%); }
+.viewport[data-position^='top']    { top: var(--toast-inset); }
+.viewport[data-position^='bottom'] { bottom: var(--toast-inset); }
+
+.toast {
+  --toast-lift: -1;
+  --toast-y: translateY(0);
+  position: absolute;
+  bottom: 0;
+  z-index: calc(1000 - var(--toast-index));
+  box-sizing: border-box;
+  outline: none;
+  overflow-wrap: anywhere;
+  touch-action: none;
+  opacity: 1;
+  transform: var(--toast-y);
+  transition: transform 400ms, opacity 400ms, height 400ms, box-shadow 200ms;
+}
+
+.toast:focus-visible {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(0, 0, 0, 0.2);
+}
+
+.toast > * {
+  transition: opacity 400ms;
+}
+
+.viewport[data-position^='top'] .toast   { --toast-lift: 1; top: 0; bottom: auto; }
+.viewport[data-position$='right'] .toast { right: 0; }
+.viewport[data-position$='left'] .toast  { left: 0; }
+
+.toast:not([data-expanded]) {
+  --toast-y: translateY(calc(var(--toast-lift) * var(--toast-gap) * var(--toast-index))) scale(calc(1 - var(--toast-index) * 0.05));
+}
+
+.toast:not([data-expanded]):not([data-front]) {
+  height: var(--toast-frontmost-height);
+}
+
+.toast[data-expanded],
+.viewport[data-expand] .toast {
+  --toast-y: translateY(calc(var(--toast-lift) * (var(--toast-offset-y) + var(--toast-index) * var(--toast-gap))));
+  height: var(--toast-height);
+}
+
+.viewport[data-expand] .toast {
+  height: auto;
+}
+
+.toast[data-expanded]::after,
+.viewport[data-expand] .toast::after {
+  content: '';
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  width: 100%;
+  height: calc(var(--toast-gap) + 1px);
+}
+
+.viewport .toast[data-starting-style] {
+  --toast-y: translateY(calc(var(--toast-lift) * -100%));
+  opacity: 0;
+}
+
+.toast[data-limited] {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.viewport .toast[data-ending-style]:not([data-swipe-direction]) {
+  opacity: 0;
+}
+
+.viewport .toast[data-ending-style][data-front]:not([data-swipe-direction]) {
+  --toast-y: translateY(calc(var(--toast-lift) * -100%));
+}
+
+.viewport .toast[data-ending-style][data-expanded]:not([data-front]):not([data-swipe-direction]),
+.viewport[data-expand] .toast[data-ending-style]:not([data-front]):not([data-swipe-direction]) {
+  --toast-y: translateY(calc(var(--toast-lift) * (var(--toast-offset-y) + var(--toast-index) * var(--toast-gap)) + var(--toast-lift) * -100%));
+}
+
+.viewport:not([data-expand]) .toast[data-ending-style]:not([data-expanded]):not([data-front]):not([data-swipe-direction]) {
+  --toast-y: translateY(40%);
+  transition: transform 500ms, opacity 200ms;
+}
+
+.toast[data-swiping] {
+  transition: none;
+}
+
+.toast[data-swiping]::before {
+  content: '';
+  position: absolute;
+  left: -100%;
+  right: -100%;
+  z-index: -1;
+  height: 100%;
+  top: 50%;
+  transform: scaleY(3) translateY(-50%);
+}
+
+.viewport[data-position^='top'] .toast[data-swiping]::before {
+  top: auto;
+  bottom: 50%;
+  transform: scaleY(3) translateY(50%);
+}
+
+.toast[data-ending-style]:not([data-swiping])::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  transform: scaleY(2);
+}
+
+.toast[data-ending-style][data-swipe-direction] {
+  animation-duration: 200ms;
+  animation-timing-function: ease-out;
+  animation-fill-mode: forwards;
+}
+
+.toast[data-ending-style][data-swipe-direction='left']  { animation-name: swipe-out-left; }
+.toast[data-ending-style][data-swipe-direction='right'] { animation-name: swipe-out-right; }
+.toast[data-ending-style][data-swipe-direction='up']    { animation-name: swipe-out-up; }
+.toast[data-ending-style][data-swipe-direction='down']  { animation-name: swipe-out-down; }
+
+@media (max-width: 600px) {
+  .viewport {
+    right: var(--toast-inset);
+    left: var(--toast-inset);
+    width: 100%;
+  }
+
+  .viewport .toast {
+    right: 0;
+    left: 0;
+    width: calc(100% - var(--toast-inset) * 2);
+  }
+
+  .viewport[data-position$='center'] {
+    left: var(--toast-inset);
+    right: var(--toast-inset);
+    transform: none;
+  }
+}
+
+@media (prefers-reduced-motion) {
+  .toast,
+  .toast > * {
+    transition: none !important;
+    animation: none !important;
+  }
+}

package/toast/index.tsx

@@ -1,65 +1,160 @@
 'use client'
 
-import type { ComponentProps } from 'react'
-import { Toaster as SonnerToaster } from 'sonner'
+import { Toast as ToastPrimitive, type ToastManager, type ToastManagerAddOptions } from '@base-ui/react/toast'
+import type { MouseEvent, ReactNode } from 'react'
 
+import { button } from '../button'
 import { tv } from '../tv'
 
-const toaster = tv({ base: 'z-toast' })
+import s from './index.module.css'
 
-export { toast } from 'sonner'
+export type ToastPosition = 'top-left' | 'top-center' | 'top-right'
+  | 'bottom-left' | 'bottom-center' | 'bottom-right'
 
-export interface ToastProps
-  extends Omit<ComponentProps<typeof SonnerToaster>, 'id' | 'position' | 'duration' | 'expand'> {
-  toasterId?: string
-  position?: 'top-left' | 'top-center' | 'top-right'
-    | 'bottom-left' | 'bottom-center' | 'bottom-right'
-  duration?: number
+export type ToastOptions = Omit<ToastManagerAddOptions<object>, 'title' | 'type' | 'actionProps' | 'transitionStatus'> & {
+  action?: {
+    label: ReactNode
+    onClick: (event: MouseEvent<HTMLButtonElement>) => void
+  }
+}
+
+type Kind = 'success' | 'error' | 'warning' | 'info'
+
+export function createToast(manager: ToastManager = ToastPrimitive.createToastManager()) {
+  const show = (type?: Kind) => (message: ReactNode, { action, ...options }: ToastOptions = {}) => {
+    const id: string = manager.add({
+      ...options,
+      type,
+      title: message,
+      actionProps: action && {
+        children: action.label,
+        onClick: event => {
+          action.onClick(event)
+          if (!event.defaultPrevented) manager.close(id)
+        },
+      },
+    })
+    return id
+  }
+
+  return Object.assign(show(), {
+    success: show('success'),
+    error: show('error'),
+    warning: show('warning'),
+    info: show('info'),
+    dismiss: (id?: string) => manager.close(id),
+    manager,
+  })
+}
+
+export const toast = createToast()
+
+const toastViewport = tv({ base: 'z-toast' })
+
+const toastRoot = tv({
+  base: 'float rounded-r8 flex w-full items-center gap-stack p-4',
+  variants: {
+    type: {
+      success: 'text-fg-success',
+      error: 'text-fg-danger',
+      warning: 'text-fg-warning',
+      info: 'text-fg-info',
+    },
+  },
+})
+
+const toastContent = tv({ base: 'min-w-0 flex-1' })
+
+const toastTitle = tv({ base: 'text-label text-fg' })
+
+const toastDescription = tv({ base: 'text-caption text-fg-muted' })
+
+const icons: Record<Kind, ReactNode> = {
+  success: (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" height="20" width="20" aria-hidden="true" className="size-5">
+      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clipRule="evenodd" />
+    </svg>
+  ),
+  warning: (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" height="20" width="20" aria-hidden="true" className="size-5">
+      <path fillRule="evenodd" d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z" clipRule="evenodd" />
+    </svg>
+  ),
+  info: (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" height="20" width="20" aria-hidden="true" className="size-5">
+      <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clipRule="evenodd" />
+    </svg>
+  ),
+  error: (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" height="20" width="20" aria-hidden="true" className="size-5">
+      <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z" clipRule="evenodd" />
+    </svg>
+  ),
+}
+
+type Swipe = 'up' | 'down' | 'left' | 'right'
+
+function swipeOf(position: ToastPosition): Swipe[] {
+  const [y, x] = position.split('-')
+  const out: Swipe[] = [y === 'top' ? 'up' : 'down']
+  if (x === 'left' || x === 'right') out.push(x)
+  return out
+}
+
+function ToastList({ position }: { position: ToastPosition }) {
+  const { toasts } = ToastPrimitive.useToastManager()
+  const swipe = swipeOf(position)
+
+  return toasts.map((item, index) => {
+    const icon = item.type ? icons[item.type as Kind] : undefined
+
+    return (
+      <ToastPrimitive.Root
+        key={item.id}
+        toast={item}
+        swipeDirection={swipe}
+        data-front={index === 0 ? '' : undefined}
+        className={toastRoot({ type: item.type as Kind | undefined, className: s.toast })}
+      >
+        {icon && <div className="shrink-0">{icon}</div>}
+        <ToastPrimitive.Content className={toastContent()}>
+          <ToastPrimitive.Title className={toastTitle()} />
+          <ToastPrimitive.Description className={toastDescription()} />
+        </ToastPrimitive.Content>
+        <ToastPrimitive.Action className={button({ color: 'neutral', emphasis: 'weak', size: 'sm' })} />
+      </ToastPrimitive.Root>
+    )
+  })
+}
+
+export type ToastProps = Omit<ToastPrimitive.Provider.Props, 'children'> & {
+  position?: ToastPosition
   expand?: boolean
+  className?: string
+  'aria-label'?: string
 }
 
 export function Toast({
-  toasterId,
+  toastManager = toast.manager,
+  timeout = 4000,
   position = 'bottom-center',
-  duration = 4000,
   expand = false,
-  offset = 16,
-  gap = 8,
   className,
-  toastOptions,
+  'aria-label': label,
   ...rest
 }: ToastProps) {
   return (
-    <SonnerToaster
-      {...rest}
-      id={toasterId}
-      position={position}
-      duration={duration}
-      expand={expand}
-      offset={offset}
-      gap={gap}
-      className={toaster({ className })}
-      toastOptions={{
-        unstyled: true,
-        ...toastOptions,
-        classNames: {
-          toast: 'float rounded-r8'
-            + ' flex w-full items-center gap-stack p-4',
-          content: 'min-w-0 flex-1',
-          title: 'text-label text-foreground',
-          description: 'text-caption text-foreground-muted',
-          icon: 'shrink-0',
-          actionButton: 'text-label text-foreground shrink-0 rounded-r8 px-3 h-8'
-            + ' bg-background-well transition-state press press-shrink enabled:hover:bg-bg-neutral-solid/10'
-            + ' focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-line-focus-ring'
-            + ' disabled:text-foreground-disabled disabled:cursor-not-allowed',
-          success: 'text-fg-success',
-          error: 'text-fg-danger',
-          warning: 'text-fg-warning',
-          info: 'text-fg-info',
-          ...toastOptions?.classNames,
-        },
-      }}
-    />
+    <ToastPrimitive.Provider {...rest} toastManager={toastManager} timeout={timeout}>
+      <ToastPrimitive.Portal>
+        <ToastPrimitive.Viewport
+          {...(label && { 'aria-label': label })}
+          data-position={position}
+          data-expand={expand ? '' : undefined}
+          className={toastViewport({ className: [s.viewport, className] })}
+        >
+          <ToastList position={position} />
+        </ToastPrimitive.Viewport>
+      </ToastPrimitive.Portal>
+    </ToastPrimitive.Provider>
   )
 }

package/toggle/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { Toggle as TogglePrimitive } from 'radix-ui'
+import { Toggle as TogglePrimitive } from '@base-ui/react/toggle'
 import type { ComponentProps } from 'react'
 
 import { tv } from '../tv'
@@ -9,29 +9,30 @@ export const toggle = tv({
   base: 'text-label rounded-full inline-flex h-8 items-center gap-tight px-3'
     + ' [&_svg]:size-4'
     + ' ring-1 ring-inset ring-line-strong transition-state press press-shrink'
-    + ' text-foreground-muted'
+    + ' text-fg-muted'
     + ' enabled:hover:bg-bg-neutral-hover'
     + ' on:bg-bg-neutral-solid on:ring-line-neutral-solid on:enabled:text-fg-neutral-solid-contrast'
     + ' on:enabled:hover:bg-bg-neutral-solid-hover'
     + ' focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-line-focus-ring'
-    + ' disabled:text-foreground-disabled disabled:ring-line disabled:cursor-not-allowed'
+    + ' disabled:text-fg-disabled disabled:ring-line disabled:cursor-not-allowed'
     + ' on:disabled:bg-bg-neutral-solid-checked-disabled on:disabled:ring-transparent on:disabled:text-fg-neutral-solid-contrast',
 
   variants: {
     surface: {
       bare: '',
-      well: 'bg-background-well',
-      panel: 'bg-background-panel',
+      well: 'bg-bg-well',
+      panel: 'bg-bg-panel',
     },
   },
 
   defaultVariants: { surface: 'bare' },
 })
 
-export interface ToggleProps extends ComponentProps<typeof TogglePrimitive.Root> {
+export type ToggleProps = Omit<ComponentProps<typeof TogglePrimitive>, 'className'> & {
   surface?: 'bare' | 'well' | 'panel'
+  className?: string
 }
 
 export function Toggle({ surface, className, ...rest }: ToggleProps) {
-  return <TogglePrimitive.Root {...rest} className={toggle({ surface, className })} />
+  return <TogglePrimitive {...rest} className={toggle({ surface, className })} />
 }