@xyhp915/slack-base-ui 0.0.4 → 0.0.5

package/package.json

@@ -2,7 +2,7 @@
   "name": "@xyhp915/slack-base-ui",
   "main": "libs/index.js",
   "types": "libs/index.d.ts",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/src/components/Toast.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { createContext, useContext, useState } from 'react'
 import { Toast as BaseToast } from '@base-ui/react'
 import clsx from 'clsx'
 import { X, Info, CheckCircle, AlertTriangle, XCircle } from 'lucide-react'
@@ -7,27 +7,71 @@ import { X, Info, CheckCircle, AlertTriangle, XCircle } from 'lucide-react'
 
 export type ToastType = 'default' | 'info' | 'success' | 'warning' | 'error'
 
+export type ToastPosition =
+  | 'top-left'
+  | 'top-center'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-center'
+  | 'bottom-right'
+
+// ── Position context ──────────────────────────────────────────────────────────
+
+interface ToastPositionState {
+  position: ToastPosition
+  setPosition: (p: ToastPosition) => void
+}
+
+const ToastPositionContext = createContext<ToastPositionState>({
+  position: 'bottom-right',
+  setPosition: () => {},
+})
+
+const positionClasses: Record<ToastPosition, string> = {
+  'top-left':     'top-4 left-4 flex-col',
+  'top-center':   'top-4 left-1/2 -translate-x-1/2 flex-col',
+  'top-right':    'top-4 right-4 flex-col',
+  'bottom-left':  'bottom-4 left-4 flex-col-reverse',
+  'bottom-center':'bottom-4 left-1/2 -translate-x-1/2 flex-col-reverse',
+  'bottom-right': 'bottom-4 right-4 flex-col-reverse',
+}
+
 // ── ToastProvider ─────────────────────────────────────────────────────────────
 
 export interface ToastProviderProps {
   children: React.ReactNode
   timeout?: number
   limit?: number
+  /** Where toasts appear on screen. Defaults to `'bottom-right'`. */
+  position?: ToastPosition
 }
 
 /**
  * Wrap your app (or part of it) with `ToastProvider` to enable toasts.
  * Then use the `useToast()` hook inside to add toasts.
+ *
+ * @example
+ * // Positon can be set at provider level:
+ * <ToastProvider position="top-center">...</ToastProvider>
+ *
+ * // Or changed at runtime via the hook:
+ * const { setPosition } = useToast()
+ * setPosition('top-right')
  */
 export const ToastProvider: React.FC<ToastProviderProps> = ({
   children,
   timeout = 5000,
   limit = 5,
+  position: defaultPosition = 'bottom-right',
 }) => {
+  const [position, setPosition] = useState<ToastPosition>(defaultPosition)
+
   return (
     <BaseToast.Provider timeout={timeout} limit={limit}>
-      {children}
-      <ToastViewport />
+      <ToastPositionContext.Provider value={{ position, setPosition }}>
+        {children}
+        <ToastViewport />
+      </ToastPositionContext.Provider>
     </BaseToast.Provider>
   )
 }
@@ -48,11 +92,14 @@ export interface ToastOptions {
 
 /**
  * Hook to imperatively add, close and update toasts.
+ * Also exposes `position` / `setPosition` for runtime position changes.
  *
  * Must be used inside `<ToastProvider>`.
  */
 export function useToast() {
   const manager = BaseToast.useToastManager()
+  const { position, setPosition } = useContext(ToastPositionContext)
+
   return {
     toast: (options: ToastOptions) =>
       manager.add({
@@ -65,6 +112,10 @@ export function useToast() {
           : undefined,
       }),
     dismiss: manager.close,
+    /** Current toast position */
+    position,
+    /** Dynamically change where toasts appear */
+    setPosition,
   }
 }
 
@@ -72,9 +123,15 @@ export function useToast() {
 
 function ToastViewport() {
   const { toasts } = BaseToast.useToastManager()
+  const { position } = useContext(ToastPositionContext)
 
   return (
-    <BaseToast.Viewport className="fixed bottom-4 right-4 z-[100] flex w-80 flex-col-reverse gap-2 outline-none">
+    <BaseToast.Viewport
+      className={clsx(
+        'fixed z-[100] flex w-80 gap-2 outline-none',
+        positionClasses[position],
+      )}
+    >
       {toasts.map((toast) => (
         <ToastItem key={toast.id} toast={toast} />
       ))}
@@ -84,49 +141,94 @@ function ToastViewport() {
 
 // ── ToastItem (internal) ──────────────────────────────────────────────────────
 
-const typeStyles: Record<ToastType, { icon: React.ReactNode; color: string }> = {
-  default: { icon: null, color: 'border-(--border-light)' },
+/**
+ * Per-type config — icon colors adapt to theme via dark: modifier.
+ * Accent strip colors stay the same in both modes.
+ */
+const typeConfig: Record<
+  ToastType,
+  {
+    icon: React.ReactNode
+    titleClass: string
+    surfaceClass: string
+    actionClass: string
+    closeClass: string
+  }
+> = {
+  default: {
+    icon: null,
+    titleClass: 'text-(--text-primary) dark:text-white',
+    surfaceClass: 'bg-(--bg-primary) border-(--border-light) dark:bg-[#2c2f33] dark:border-transparent',
+    actionClass: 'text-(--accent) hover:underline dark:text-white/85 dark:hover:text-white',
+    closeClass: 'text-(--text-muted) hover:bg-(--bg-hover) hover:text-(--text-primary) dark:text-white/40 dark:hover:bg-white/10 dark:hover:text-white',
+  },
   info: {
-    icon: <Info size={16} className="shrink-0 text-blue-500" />,
-    color: 'border-blue-200 dark:border-blue-900',
+    icon: <Info size={14} className="text-[#1164A3] dark:text-[#5ba4cf]" />,
+    titleClass: 'text-[#1164A3] dark:text-[#5ba4cf]',
+    surfaceClass: 'bg-[#F6FAFE] border-[#E3EFF9] dark:bg-[#102633] dark:border-[#1A4256]',
+    actionClass: 'text-[#0F5A94] hover:underline hover:text-[#0B4673] dark:text-[#7AB7DE] dark:hover:text-[#A7D1EC]',
+    closeClass: 'text-[#7C9BB4] hover:bg-[#E8F2FB] hover:text-[#1164A3] dark:text-[#8AA7BD] dark:hover:bg-[#173547] dark:hover:text-[#7AB7DE]',
   },
   success: {
-    icon: <CheckCircle size={16} className="shrink-0 text-(--slack-green)" />,
-    color: 'border-green-200 dark:border-green-900',
+    icon: <CheckCircle size={14} className="text-[#007a5a] dark:text-[#39c088]" />,
+    titleClass: 'text-[#007a5a] dark:text-[#39c088]',
+    surfaceClass: 'bg-[#F4FBF7] border-[#DFF1E8] dark:bg-[#102A20] dark:border-[#1A4B39]',
+    actionClass: 'text-[#0A6B51] hover:underline hover:text-[#08533F] dark:text-[#6FD4A3] dark:hover:text-[#96E6BB]',
+    closeClass: 'text-[#7A9E91] hover:bg-[#E7F6EE] hover:text-[#007A5A] dark:text-[#89A99E] dark:hover:bg-[#18372C] dark:hover:text-[#6FD4A3]',
   },
   warning: {
-    icon: <AlertTriangle size={16} className="shrink-0 text-amber-500" />,
-    color: 'border-amber-200 dark:border-amber-900',
+    icon: <AlertTriangle size={14} className="text-amber-500 dark:text-amber-400" />,
+    titleClass: 'text-amber-500 dark:text-amber-400',
+    surfaceClass: 'bg-[#FFFBF0] border-[#F7E9BF] dark:bg-[#3A2A09] dark:border-[#5C4514]',
+    actionClass: 'text-[#B26A00] hover:underline hover:text-[#8B5300] dark:text-[#F0C46B] dark:hover:text-[#F5D697]',
+    closeClass: 'text-[#AA9B73] hover:bg-[#FFF3D6] hover:text-[#B26A00] dark:text-[#A99668] dark:hover:bg-[#4B3810] dark:hover:text-[#F0C46B]',
   },
   error: {
-    icon: <XCircle size={16} className="shrink-0 text-(--danger)" />,
-    color: 'border-red-200 dark:border-red-900',
+    icon: <XCircle size={14} className="text-[#E01E5A] dark:text-[#e06082]" />,
+    titleClass: 'text-[#E01E5A] dark:text-[#e06082]',
+    surfaceClass: 'bg-[#FEF6F8] border-[#F8E2E8] dark:bg-[#3A1822] dark:border-[#5E2735]',
+    actionClass: 'text-[#C61B50] hover:underline hover:text-[#9E153F] dark:text-[#F08CA8] dark:hover:text-[#F5B0C2]',
+    closeClass: 'text-[#B0929C] hover:bg-[#FBE8EE] hover:text-[#E01E5A] dark:text-[#A88E96] dark:hover:bg-[#4A1F2C] dark:hover:text-[#F08CA8]',
   },
 }
 
 function ToastItem({ toast }: { toast: BaseToast.Root.ToastObject }) {
   const type = (toast.type ?? 'default') as ToastType
-  const style = typeStyles[type] ?? typeStyles.default
+  const config = typeConfig[type] ?? typeConfig.default
 
   return (
     <BaseToast.Root
       toast={toast}
+      swipeDirection={[]}
       className={clsx(
-        'flex w-full items-start gap-3 rounded-lg border bg-(--bg-primary) px-4 py-3 shadow-lg',
-        style.color,
-        'data-[ending]:animate-[fade-out_150ms_ease-in] data-[starting]:animate-[zoom-in_150ms_ease-out]',
+        'group relative flex w-full items-start gap-2.5 overflow-hidden',
+        'rounded-lg pl-3 pr-3 pt-3 pb-3',
+        'border border-(--border-light)',
+        'shadow-[0_2px_16px_rgba(0,0,0,0.08),0_1px_4px_rgba(0,0,0,0.05)]',
+        'dark:shadow-[0_4px_24px_rgba(0,0,0,0.45)]',
+        'data-[starting]:animate-[toast-slide-in_240ms_cubic-bezier(0.16,1,0.3,1)]',
+        'data-[ending]:animate-[toast-slide-out_180ms_ease-in_forwards]',
+        config.surfaceClass,
       )}
     >
-      {style.icon && <div className="pt-0.5">{style.icon}</div>}
+      {/* ── Icon ─────────────────────────────────────────── */}
+      {config.icon && (
+        <div className="flex h-5 shrink-0 items-center">{config.icon}</div>
+      )}
 
-      <div className="flex flex-1 flex-col gap-0.5 min-w-0">
+      {/* ── Content ──────────────────────────────────────── */}
+      <div className="flex min-w-0 flex-1 flex-col gap-0.5">
         {toast.title && (
-          <BaseToast.Title className="text-[14px] font-semibold text-(--text-primary) leading-snug">
+          <BaseToast.Title
+            className={clsx('text-[14px] font-semibold leading-snug', config.titleClass)}
+          >
             {toast.title}
           </BaseToast.Title>
         )}
         {toast.description && (
-          <BaseToast.Description className="text-[13px] text-(--text-secondary) leading-snug">
+          <BaseToast.Description
+            className="text-[13px] leading-snug text-(--text-secondary) dark:text-white/65"
+          >
             {toast.description}
           </BaseToast.Description>
         )}
@@ -134,15 +236,23 @@ function ToastItem({ toast }: { toast: BaseToast.Root.ToastObject }) {
           <button
             {...toast.actionProps}
             className={clsx(
-              'mt-1.5 self-start text-[13px] font-semibold text-(--accent) hover:underline outline-none',
-              'focus-visible:ring-1 focus-visible:ring-(--focus-ring) rounded',
+              'mt-1.5 self-start rounded text-[13px] font-semibold outline-none transition-colors',
+              config.actionClass,
+              'focus-visible:ring-1 focus-visible:ring-(--focus-ring) dark:focus-visible:ring-white/50',
             )}
           />
         )}
       </div>
 
-      <BaseToast.Close className="shrink-0 rounded p-0.5 text-(--text-muted) hover:text-(--text-primary) hover:bg-(--bg-hover) outline-none focus-visible:ring-1 focus-visible:ring-(--focus-ring) transition-colors">
-        <X size={14} />
+      {/* ── Close button ─────────────────────────────────── */}
+      <BaseToast.Close
+        className={clsx(
+          'ml-0.5 shrink-0 rounded p-1 outline-none transition-colors',
+          config.closeClass,
+          'focus-visible:ring-1 focus-visible:ring-(--focus-ring) dark:focus-visible:ring-white/50',
+        )}
+      >
+        <X size={13} />
       </BaseToast.Close>
     </BaseToast.Root>
   )

package/src/components/index.ts

@@ -174,7 +174,7 @@ export type { ProgressProps } from './Progress'
 
 // Toast Components
 export { ToastProvider, useToast } from './Toast'
-export type { ToastProviderProps, ToastOptions, ToastType } from './Toast'
+export type { ToastProviderProps, ToastOptions, ToastType, ToastPosition } from './Toast'
 
 // Loading Component
 export { Loading } from './Loading'

package/src/index.css

@@ -75,6 +75,28 @@
   }
 }
 
+@keyframes toast-slide-in {
+  from {
+    opacity: 0;
+    transform: translateY(10px) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes toast-slide-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.94);
+  }
+}
+
 :root {
   /* Colors - Slack Brand */
   --slack-aubergine: #3F0E40;

package/src/pages/ComponentShowcase.tsx

@@ -1,4 +1,5 @@
 import { Link } from 'react-router-dom'
+import clsx from 'clsx'
 import {
   ArrowLeft,
   Bell,
@@ -93,6 +94,7 @@ import { Switch } from '../components/Switch'
 import { Tabs, TabList, Tab, TabPanel } from '../components/Tabs'
 import { Progress } from '../components/Progress'
 import { useToast } from '../components/Toast'
+import type { ToastPosition } from '../components/Toast'
 import { Loading } from '../components/Loading'
 import { AutoComplete } from '../components/AutoComplete'
 
@@ -126,7 +128,7 @@ export const ComponentShowcase = () => {
   const [switchOn, setSwitchOn] = useState(false)
   const [notificationsOn, setNotificationsOn] = useState(true)
   const [progressValue, setProgressValue] = useState(60)
-  const { toast } = useToast()
+  const { toast, position: toastPosition, setPosition: setToastPosition } = useToast()
 
   // AutoComplete states
   const [acValue, setAcValue] = useState('')
@@ -1868,94 +1870,152 @@ export const ComponentShowcase = () => {
         <section className="max-w-5xl mx-auto px-8 pb-16 space-y-6">
           <div className="pb-2 border-b border-(--border-light)">
             <h2 className="text-2xl font-bold text-(--text-primary)">Toast</h2>
-            <p className="text-(--text-secondary) mt-1">Lightweight notification toasts with five semantic types.</p>
+            <p className="text-(--text-secondary) mt-1">
+              轻量通知条，支持五种语义类型和六个显示位置。通过{' '}
+              <code className="text-sm bg-(--bg-secondary) px-1.5 py-0.5 rounded border border-(--border-light) font-mono">useToast()</code>{' '}
+              命令式调用。
+            </p>
           </div>
+
           <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
+            {/* Types */}
             <div className="space-y-4">
-              <h3 className="font-semibold text-(--text-secondary)">Types</h3>
+              <h3 className="font-semibold text-(--text-secondary)">类型 Types</h3>
               <div className="flex flex-wrap gap-3">
                 <Button
-                    size="sm"
-                    onClick={() => toast(
-                        { title: 'Default notification', description: 'This is a default toast message.' })}
+                  size="sm"
+                  onClick={() => toast({ title: 'Default notification', description: 'This is a default toast message.' })}
                 >
                   Default
                 </Button>
                 <Button
-                    size="sm"
-                    onClick={() => toast(
-                        { type: 'info', title: 'Info', description: 'Your workspace is being updated.' })}
+                  size="sm"
+                  onClick={() => toast({ type: 'info', title: 'Info', description: 'Your workspace is being updated.' })}
                 >
                   Info
                 </Button>
                 <Button
-                    size="sm"
-                    variant="primary"
-                    onClick={() => toast({
-                      type: 'success',
-                      title: 'Message sent!',
-                      description: 'Your message was delivered to #general.',
-                    })}
+                  size="sm"
+                  variant="primary"
+                  onClick={() => toast({ type: 'success', title: 'Message sent!', description: 'Your message was delivered to #general.' })}
                 >
                   Success
                 </Button>
                 <Button
-                    size="sm"
-                    onClick={() => toast({
-                      type: 'warning',
-                      title: 'Storage almost full',
-                      description: 'You have used 90% of your storage.',
-                    })}
+                  size="sm"
+                  onClick={() => toast({ type: 'warning', title: 'Storage almost full', description: 'You have used 90% of your storage.' })}
                 >
                   Warning
                 </Button>
                 <Button
-                    size="sm"
-                    variant="danger"
-                    onClick={() => toast({
-                      type: 'error',
-                      title: 'Failed to send',
-                      description: 'Could not deliver the message. Try again.',
-                    })}
+                  size="sm"
+                  variant="danger"
+                  onClick={() => toast({ type: 'error', title: 'Failed to send', description: 'Could not deliver the message. Try again.' })}
                 >
                   Error
                 </Button>
               </div>
             </div>
+
+            {/* With action */}
             <div className="space-y-4">
-              <h3 className="font-semibold text-(--text-secondary)">With action</h3>
+              <h3 className="font-semibold text-(--text-secondary)">带操作按钮 With action</h3>
               <div className="flex flex-wrap gap-3">
                 <Button
-                    size="sm"
-                    onClick={() =>
-                        toast({
-                          type: 'info',
-                          title: 'New message in #general',
-                          description: 'Alice: "Hey everyone, quick update…"',
-                          action: {
-                            label: 'View',
-                            onClick: () => {},
-                          },
-                        })
-                    }
+                  size="sm"
+                  onClick={() =>
+                    toast({
+                      type: 'info',
+                      title: 'New message in #general',
+                      description: 'Alice: "Hey everyone, quick update…"',
+                      action: { label: 'View', onClick: () => {} },
+                    })
+                  }
                 >
                   Notification with action
                 </Button>
                 <Button
-                    size="sm"
-                    onClick={() =>
-                        toast({
-                          type: 'success',
-                          title: 'Invite sent',
-                          description: 'bob@example.com will receive an invitation.',
-                          timeout: 8000,
-                        })
-                    }
+                  size="sm"
+                  onClick={() =>
+                    toast({
+                      type: 'success',
+                      title: 'Invite sent',
+                      description: 'bob@example.com will receive an invitation.',
+                      timeout: 8000,
+                    })
+                  }
                 >
                   Custom timeout (8s)
                 </Button>
               </div>
             </div>
+
+            {/* Position picker — spans full width */}
+            <div className="space-y-4 md:col-span-2">
+              <h3 className="font-semibold text-(--text-secondary)">自定义位置 Position</h3>
+              <p className="text-sm text-(--text-secondary)">
+                可在 <code className="text-xs bg-(--bg-secondary) px-1 py-0.5 rounded border border-(--border-light) font-mono">&lt;ToastProvider position="…"&gt;</code> 设置默认位置，
+                或运行时通过 <code className="text-xs bg-(--bg-secondary) px-1 py-0.5 rounded border border-(--border-light) font-mono">setPosition()</code> 动态切换。
+                点击下方格子即可预览对应位置。
+              </p>
+
+              {/* Visual 3×2 position grid */}
+              <div className="relative w-full h-44 rounded-xl border-2 border-dashed border-(--border-light) bg-(--bg-muted) overflow-hidden">
+                {/* 3 cols × 2 rows grid */}
+                <div className="absolute inset-0 grid grid-cols-3 grid-rows-2">
+                  {(
+                    [
+                      ['top-left',     '↖', 'top-left'],
+                      ['top-center',   '↑', 'top-center'],
+                      ['top-right',    '↗', 'top-right'],
+                      ['bottom-left',  '↙', 'bottom-left'],
+                      ['bottom-center','↓', 'bottom-center'],
+                      ['bottom-right', '↘', 'bottom-right'],
+                    ] as [ToastPosition, string, string][]
+                  ).map(([pos, arrow]) => {
+                    const active = toastPosition === pos
+                    return (
+                      <button
+                        key={pos}
+                        onClick={() => {
+                          setToastPosition(pos)
+                          toast({
+                            type: 'info',
+                            title: pos,
+                            description: `Toast 显示在 ${pos}`,
+                            timeout: 3000,
+                          })
+                        }}
+                        className={clsx(
+                          'relative flex flex-col items-center justify-center gap-1 transition-all duration-150',
+                          'border border-(--border-light) text-xs font-medium',
+                          active
+                            ? 'bg-(--accent-action) text-(--accent-contrast) font-semibold shadow-inner'
+                            : 'text-(--text-muted) hover:bg-(--bg-hover) hover:text-(--text-primary)',
+                        )}
+                      >
+                        <span className="text-xl leading-none">{arrow}</span>
+                        <span className="text-[10px] opacity-80 px-1 text-center leading-tight">
+                          {pos.replace('-', '\u00A0')}
+                        </span>
+                      </button>
+                    )
+                  })}
+                </div>
+
+                {/* Center label */}
+                <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
+                  <span className="text-[11px] text-(--text-muted) select-none px-2 py-1 bg-(--bg-muted)/80 rounded">
+                    点击格子切换位置
+                  </span>
+                </div>
+              </div>
+
+              <p className="text-xs text-(--text-muted)">
+                当前位置：
+                <span className="font-semibold text-(--text-primary) ml-1">{toastPosition}</span>
+              </p>
+            </div>
           </div>
         </section>