@pantoia/ui 0.12.1 → 0.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pantoia/ui",
-  "version": "0.12.1",
+  "version": "0.13.0",
   "description": "Pantoia Design System",
   "homepage": "https://design.pantoia.com",
   "repository": {

package/registry.json

@@ -717,12 +717,10 @@
         "@base-ui/react"
       ],
       "registryDependencies": [
-        "button",
         "tv"
       ],
       "meta": {
-        "layer": "ui",
-        "radius": "rounded-r8"
+        "layer": "ui"
       }
     },
     {

package/toast/index.module.css

@@ -23,7 +23,7 @@
   --toast-inset: 16px;
   position: fixed;
   box-sizing: border-box;
-  width: 356px;
+  width: 352px;
   margin: 0;
   padding: 0;
   outline: none;
@@ -48,6 +48,7 @@
   touch-action: none;
   opacity: 1;
   transform: var(--toast-y);
+  backdrop-filter: blur(12px);
   transition: transform 400ms, opacity 400ms, height 400ms, box-shadow 200ms;
 }
 
@@ -62,6 +63,7 @@
 .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; }
+.viewport[data-position$='center'] .toast { left: 0; right: 0; margin-inline: auto; }
 
 .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));
@@ -69,6 +71,13 @@
 
 .toast:not([data-expanded]):not([data-front]) {
   height: var(--toast-frontmost-height);
+  width: var(--toast-frontmost-width, auto);
+  border-radius: 20px;
+  overflow: hidden;
+}
+
+.viewport:not([data-expand]) .toast:not([data-expanded]):not([data-front]) > * {
+  opacity: 0;
 }
 
 .toast[data-expanded],
@@ -162,13 +171,7 @@
   .viewport {
     right: var(--toast-inset);
     left: var(--toast-inset);
-    width: 100%;
-  }
-
-  .viewport .toast {
-    right: 0;
-    left: 0;
-    width: calc(100% - var(--toast-inset) * 2);
+    width: auto;
   }
 
   .viewport[data-position$='center'] {

package/toast/index.tsx

@@ -1,9 +1,8 @@
 'use client'
 
 import { Toast as ToastPrimitive, type ToastManager, type ToastManagerAddOptions } from '@base-ui/react/toast'
-import type { MouseEvent, ReactNode } from 'react'
+import { type MouseEvent, type ReactNode, useLayoutEffect, useRef, useState } from 'react'
 
-import { button } from '../button'
 import { tv } from '../tv'
 
 import s from './index.module.css'
@@ -52,41 +51,41 @@ 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',
-    },
-  },
+  base: 'bg-bg-neutral-toast text-fg-neutral-toast-contrast inset-ring inset-ring-line-neutral-toast flex min-h-10 w-fit max-w-full items-center gap-2.5 rounded-full px-4.5 py-2.5'
+    + ' data-multiline:rounded-r20 data-multiline:w-full data-multiline:items-start data-multiline:px-4 data-multiline:py-3',
 })
 
+const toastIcon = tv({ base: 'shrink-0 in-data-multiline:pt-px' })
+
 const toastContent = tv({ base: 'min-w-0 flex-1' })
 
-const toastTitle = tv({ base: 'text-label text-fg' })
+const toastTitle = tv({ base: 'text-t14 in-data-multiline:font-medium' })
+
+const toastDescription = tv({ base: 'text-t13 text-fg-neutral-toast-contrast/72 line-clamp-2' })
 
-const toastDescription = tv({ base: 'text-caption text-fg-muted' })
+const toastAction = tv({
+  base: 'text-t14 rounded-r4 shrink-0 cursor-pointer font-bold underline underline-offset-3 in-data-multiline:self-center'
+    + ' focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-line-focus-ring',
+})
 
 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">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" height="18" width="18" aria-hidden="true" className="size-4.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">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" height="18" width="18" aria-hidden="true" className="size-4.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">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" height="18" width="18" aria-hidden="true" className="size-4.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">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" height="18" width="18" aria-hidden="true" className="size-4.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>
   ),
@@ -101,30 +100,58 @@ function swipeOf(position: ToastPosition): Swipe[] {
   return out
 }
 
+const ONE_LINE = 28
+
+type Item = ReturnType<typeof ToastPrimitive.useToastManager>['toasts'][number]
+
+function ToastItem({ item, front, swipe }: { item: Item, front: boolean, swipe: Swipe[] }) {
+  const title = useRef<HTMLHeadingElement>(null)
+  const root = useRef<HTMLDivElement>(null)
+  const [wrapped, setWrapped] = useState(false)
+  const icon = item.type ? icons[item.type as Kind] : undefined
+  const multiline = wrapped || Boolean(item.description)
+
+  useLayoutEffect(() => {
+    if (multiline || !title.current) return
+    if (title.current.offsetHeight > ONE_LINE) setWrapped(true)
+  }, [multiline])
+
+  useLayoutEffect(() => {
+    const el = root.current
+    const viewport = el?.parentElement
+    if (!front || !el || !viewport) return
+    const sync = () => viewport.style.setProperty('--toast-frontmost-width', `${el.offsetWidth}px`)
+    sync()
+    if (typeof ResizeObserver === 'undefined') return
+    const observer = new ResizeObserver(sync)
+    observer.observe(el)
+    return () => observer.disconnect()
+  }, [front])
+
+  return (
+    <ToastPrimitive.Root
+      ref={root}
+      toast={item}
+      swipeDirection={swipe}
+      data-front={front ? '' : undefined}
+      data-multiline={multiline ? '' : undefined}
+      className={toastRoot({ className: s.toast })}
+    >
+      {icon && <div className={toastIcon()}>{icon}</div>}
+      <ToastPrimitive.Content className={toastContent()}>
+        <ToastPrimitive.Title ref={title} className={toastTitle()} />
+        <ToastPrimitive.Description className={toastDescription()} />
+      </ToastPrimitive.Content>
+      <ToastPrimitive.Action className={toastAction()} />
+    </ToastPrimitive.Root>
+  )
+}
+
 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>
-    )
-  })
+  return toasts.map((item, index) => <ToastItem key={item.id} item={item} front={index === 0} swipe={swipe} />)
 }
 
 export type ToastProps = Omit<ToastPrimitive.Provider.Props, 'children'> & {

package/tokens.css

@@ -17,6 +17,7 @@
   --pds-bg-neutral-knob:                      #ffffff;
   --pds-bg-neutral-knob-off:                  #ffffff;
   --pds-bg-neutral-thumb:                     #ffffff;
+  --pds-bg-neutral-toast:                     rgba(25,31,40,0.94);
   --pds-bg-neutral-track:                     var(--pds-gray-300);
   --pds-bg-neutral-selected:                  rgba(2,32,71,0.05);
   --pds-bg-neutral-selected-hover:            rgba(0,27,55,0.1);
@@ -30,6 +31,7 @@
 
   --pds-fg-brand-contrast:                    var(--pds-brand-700);
   --pds-fg-brand-solid-contrast:              #ffffff;
+  --pds-fg-neutral-toast-contrast:            var(--pds-white);
   --pds-fg-danger:                            var(--pds-red-500);
   --pds-fg-danger-contrast:                   var(--pds-red-700);
   --pds-fg-info:                              var(--pds-blue-500);
@@ -48,6 +50,7 @@
   --pds-line-info:                            var(--pds-blue-500);
   --pds-line-info-weak:                       var(--pds-blue-200);
   --pds-line-neutral-solid:                   var(--pds-gray-900);
+  --pds-line-neutral-toast:                   transparent;
   --pds-line-strong:                          var(--pds-gray-300);
   --pds-line-success:                         var(--pds-green-500);
   --pds-line-success-weak:                    var(--pds-green-200);
@@ -83,6 +86,7 @@
   --pds-bg-neutral-knob:                      #2c2c35;
   --pds-bg-neutral-knob-off:                  var(--pds-gray-800);
   --pds-bg-neutral-thumb:                     #3c3c47;
+  --pds-bg-neutral-toast:                     rgba(0,0,0,0.92);
   --pds-bg-neutral-track:                     var(--pds-gray-300);
   --pds-bg-neutral-selected:                  rgba(217,217,255,0.11);
   --pds-bg-neutral-selected-hover:            rgba(222,222,255,0.19);
@@ -96,6 +100,7 @@
 
   --pds-fg-brand-contrast:                    var(--pds-brand-700);
   --pds-fg-brand-solid-contrast:              #ffffff;
+  --pds-fg-neutral-toast-contrast:            var(--pds-white);
   --pds-fg-danger:                            var(--pds-red-500);
   --pds-fg-danger-contrast:                   var(--pds-red-700);
   --pds-fg-info:                              var(--pds-blue-500);
@@ -114,6 +119,7 @@
   --pds-line-info:                            var(--pds-blue-500);
   --pds-line-info-weak:                       var(--pds-blue-200);
   --pds-line-neutral-solid:                   var(--pds-gray-900);
+  --pds-line-neutral-toast:                   rgba(255,255,255,0.1);
   --pds-line-strong:                          var(--pds-gray-300);
   --pds-line-success:                         var(--pds-green-500);
   --pds-line-success-weak:                    var(--pds-green-200);
@@ -148,6 +154,7 @@
   --color-bg-neutral-knob:                    var(--pds-bg-neutral-knob);
   --color-bg-neutral-knob-off:                var(--pds-bg-neutral-knob-off);
   --color-bg-neutral-thumb:                   var(--pds-bg-neutral-thumb);
+  --color-bg-neutral-toast:                   var(--pds-bg-neutral-toast);
   --color-bg-neutral-track:                   var(--pds-bg-neutral-track);
   --color-bg-neutral-selected:                var(--pds-bg-neutral-selected);
   --color-bg-neutral-selected-hover:          var(--pds-bg-neutral-selected-hover);
@@ -160,6 +167,7 @@
   --color-bg-warning-weak:                    var(--pds-bg-warning-weak);
   --color-fg-brand-contrast:                  var(--pds-fg-brand-contrast);
   --color-fg-brand-solid-contrast:            var(--pds-fg-brand-solid-contrast);
+  --color-fg-neutral-toast-contrast:          var(--pds-fg-neutral-toast-contrast);
   --color-fg-danger:                          var(--pds-fg-danger);
   --color-fg-danger-contrast:                 var(--pds-fg-danger-contrast);
   --color-fg-info:                            var(--pds-fg-info);
@@ -177,6 +185,7 @@
   --color-line-info:                          var(--pds-line-info);
   --color-line-info-weak:                     var(--pds-line-info-weak);
   --color-line-neutral-solid:                 var(--pds-line-neutral-solid);
+  --color-line-neutral-toast:                 var(--pds-line-neutral-toast);
   --color-line-strong:                        var(--pds-line-strong);
   --color-line-success:                       var(--pds-line-success);
   --color-line-success-weak:                  var(--pds-line-success-weak);