@proteos/ui 0.44.0 → 0.46.0

package/src/components/toast/toast.tsx

@@ -0,0 +1,121 @@
+import { CircleAlert, CircleCheck, Info, X as XLucide } from 'lucide-react'
+import {
+  Button as AriaButton,
+  Text as AriaText,
+  UNSTABLE_Toast as AriaToast,
+  UNSTABLE_ToastContent as AriaToastContent,
+  type ToastOptions as AriaToastOptions,
+  UNSTABLE_ToastQueue as AriaToastQueue,
+  UNSTABLE_ToastRegion as AriaToastRegion,
+} from 'react-aria-components'
+import { tv, type VariantProps } from 'tailwind-variants'
+
+import { cn } from '../../lib/cn'
+
+/* =========================================================================
+   Toast — brief, transient notification stack (bottom-right). Wraps RAC's
+   ToastRegion / Toast (queue, ARIA live region, focus management, timeouts).
+
+   Usage: create ONE queue per app (`createToastQueue()`), mount ONE
+   `<ToastRegion queue={queue} />` near the root, and push from anywhere
+   with `queue.add({ title, description?, variant? }, { timeout })`.
+   ========================================================================= */
+
+export type ToastVariant = 'info' | 'success' | 'danger'
+
+/** The payload a caller enqueues. Pure data — the region renders it. */
+export interface ToastContent {
+  title: string
+  description?: string
+  variant?: ToastVariant
+}
+
+export type ToastQueue = AriaToastQueue<ToastContent>
+export type ToastOptions = AriaToastOptions
+
+/** Creates the app-wide queue. `maxVisibleToasts` bounds the on-screen stack. */
+export function createToastQueue(options: { maxVisibleToasts?: number } = {}): ToastQueue {
+  return new AriaToastQueue<ToastContent>({ maxVisibleToasts: options.maxVisibleToasts ?? 3 })
+}
+
+export const toastStyles = tv({
+  slots: {
+    root: [
+      'flex items-start gap-3 w-[360px] max-w-[calc(100vw-32px)]',
+      'rounded-lg border border-rule bg-surface shadow-float',
+      'px-3.5 py-3 outline-none',
+      'focus-visible:shadow-focus',
+      'entering:animate-in entering:fade-in-0 entering:slide-in-from-bottom-2 entering:duration-200',
+      'exiting:animate-out exiting:fade-out-0 exiting:duration-150',
+    ],
+    icon: 'size-4 shrink-0 mt-0.5',
+    title: 'font-sans text-[13px] font-medium leading-[1.4] text-ink',
+    description: 'font-sans text-[12.5px] leading-[1.5] text-ink-3 break-words',
+  },
+  variants: {
+    variant: {
+      info: { icon: 'text-ink-3' },
+      success: { icon: 'text-success' },
+      danger: { icon: 'text-danger' },
+    },
+  },
+  defaultVariants: { variant: 'info' },
+})
+
+export type ToastVariants = VariantProps<typeof toastStyles>
+
+const VARIANT_ICON = {
+  info: Info,
+  success: CircleCheck,
+  danger: CircleAlert,
+} as const
+
+export interface ToastRegionProps {
+  queue: ToastQueue
+  className?: string
+}
+
+/** The single live region that renders queued toasts. */
+export function ToastRegion({ queue, className }: ToastRegionProps) {
+  return (
+    <AriaToastRegion
+      queue={queue}
+      className={cn(
+        'fixed bottom-4 right-4 z-[1300] flex flex-col-reverse gap-2 outline-none',
+        className,
+      )}
+    >
+      {({ toast }) => {
+        const variant = toast.content.variant ?? 'info'
+        const Icon = VARIANT_ICON[variant]
+        const { root, icon, title, description } = toastStyles({ variant })
+        return (
+          <AriaToast toast={toast} className={root()}>
+            <Icon className={icon()} aria-hidden />
+            <AriaToastContent className="flex flex-col gap-0.5 flex-1 min-w-0">
+              <AriaText slot="title" className={title()}>
+                {toast.content.title}
+              </AriaText>
+              {toast.content.description ? (
+                <AriaText slot="description" className={description()}>
+                  {toast.content.description}
+                </AriaText>
+              ) : null}
+            </AriaToastContent>
+            <AriaButton
+              slot="close"
+              aria-label="Dismiss"
+              className={cn(
+                'shrink-0 inline-flex items-center justify-center size-6 rounded-md',
+                'text-ink-4 hover:text-ink hover:bg-surface-2 cursor-pointer outline-none',
+                'focus-visible:shadow-focus',
+              )}
+            >
+              <XLucide className="size-3.5" />
+            </AriaButton>
+          </AriaToast>
+        )
+      }}
+    </AriaToastRegion>
+  )
+}

package/src/index.ts

@@ -9,6 +9,7 @@ export * from './components/button'
 export * from './components/card'
 export * from './components/channel-icon'
 export * from './components/checkbox'
+export * from './components/color-input'
 export * from './components/combobox'
 export * from './components/command'
 export * from './components/currency-input'
@@ -22,6 +23,7 @@ export * from './components/error-animation'
 export * from './components/field'
 export * from './components/file-field'
 export * from './components/file-viewer'
+export * from './components/icon-picker'
 export * from './components/image-attachment'
 export * from './components/image-lightbox'
 export * from './components/input'
@@ -47,6 +49,7 @@ export * from './components/tabs'
 export * from './components/tag-input'
 export * from './components/textarea'
 export * from './components/time-field'
+export * from './components/toast'
 export * from './components/tooltip'
 
 export { cn } from './lib/cn'