@xyhp915/slack-base-ui 0.0.4 → 0.0.6

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.6",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/src/components/Dialog.tsx

@@ -10,7 +10,7 @@ import React, {
 import { X } from 'lucide-react'
 import { Button } from './Button'
 
-export type DialogSize = 'sm' | 'md' | 'lg' | 'xl';
+export type DialogSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
 
 export interface DialogProps {
   open?: boolean;
@@ -29,7 +29,7 @@ export const Dialog = ({
   title,
   description,
   children,
-  size = 'md',
+  size = 'xl',
   showCloseButton = true,
   className,
 }: DialogProps) => {
@@ -38,6 +38,9 @@ export const Dialog = ({
     md: 'max-w-md',
     lg: 'max-w-lg',
     xl: 'max-w-xl',
+    '2xl': 'max-w-2xl',
+    '3xl': 'max-w-3xl',
+    '4xl': 'max-w-4xl',
   }
 
   return (
@@ -242,27 +245,27 @@ export const DialogProvider: React.FC<{ children: React.ReactNode }> = ({ childr
   }, [])
 
   const value = useMemo<UseDialogReturn>(
-    () => ({ show, confirm, alert }),
-    [show, confirm, alert],
+      () => ({ show, confirm, alert }),
+      [show, confirm, alert],
   )
 
   return (
-    <DialogImperativeContext.Provider value={value}>
-      {children}
-      {dialogs.map(dialog => (
-        <ImperativeDialogItem
-          key={dialog.id}
-          dialog={dialog}
-          onRemove={() => removeDialog(dialog.id)}
-        />
-      ))}
-    </DialogImperativeContext.Provider>
+      <DialogImperativeContext.Provider value={value}>
+        {children}
+        {dialogs.map(dialog => (
+            <ImperativeDialogItem
+                key={dialog.id}
+                dialog={dialog}
+                onRemove={() => removeDialog(dialog.id)}
+            />
+        ))}
+      </DialogImperativeContext.Provider>
   )
 }
 
 DialogProvider.displayName = 'DialogProvider'
 
-function ImperativeDialogItem({
+function ImperativeDialogItem ({
   dialog,
   onRemove,
 }: {
@@ -272,13 +275,13 @@ function ImperativeDialogItem({
   const [open, setOpen] = useState(true)
 
   const handleClose = useCallback(
-    (result: boolean) => {
-      setOpen(false)
-      dialog.resolve(result)
-      // Allow close animation to finish before unmounting
-      setTimeout(onRemove, 300)
-    },
-    [dialog, onRemove],
+      (result: boolean) => {
+        setOpen(false)
+        dialog.resolve(result)
+        // Allow close animation to finish before unmounting
+        setTimeout(onRemove, 300)
+      },
+      [dialog, onRemove],
   )
 
   const commonProps = {
@@ -291,55 +294,55 @@ function ImperativeDialogItem({
 
   if (dialog.type === 'show') {
     return (
-      <Dialog
-        {...commonProps}
-        showCloseButton={dialog.showCloseButton ?? true}
-        onOpenChange={o => !o && handleClose(false)}
-      >
-        {dialog.content}
-      </Dialog>
+        <Dialog
+            {...commonProps}
+            showCloseButton={dialog.showCloseButton ?? true}
+            onOpenChange={o => !o && handleClose(false)}
+        >
+          {dialog.content}
+        </Dialog>
     )
   }
 
   if (dialog.type === 'confirm') {
     return (
+        <Dialog
+            {...commonProps}
+            size={dialog.size ?? 'sm'}
+            showCloseButton={false}
+            onOpenChange={o => !o && handleClose(false)}
+        >
+          {dialog.content}
+          <DialogFooter>
+            <Button variant="secondary" onClick={() => handleClose(false)}>
+              {dialog.cancelLabel ?? 'Cancel'}
+            </Button>
+            <Button
+                variant={dialog.confirmVariant ?? 'primary'}
+                onClick={() => handleClose(true)}
+            >
+              {dialog.confirmLabel ?? 'Confirm'}
+            </Button>
+          </DialogFooter>
+        </Dialog>
+    )
+  }
+
+  // alert
+  return (
       <Dialog
-        {...commonProps}
-        size={dialog.size ?? 'sm'}
-        showCloseButton={false}
-        onOpenChange={o => !o && handleClose(false)}
+          {...commonProps}
+          size={dialog.size ?? 'sm'}
+          showCloseButton={false}
+          onOpenChange={o => !o && handleClose(true)}
       >
         {dialog.content}
         <DialogFooter>
-          <Button variant="secondary" onClick={() => handleClose(false)}>
-            {dialog.cancelLabel ?? 'Cancel'}
-          </Button>
-          <Button
-            variant={dialog.confirmVariant ?? 'primary'}
-            onClick={() => handleClose(true)}
-          >
-            {dialog.confirmLabel ?? 'Confirm'}
+          <Button variant="primary" onClick={() => handleClose(true)}>
+            {dialog.confirmLabel ?? 'OK'}
           </Button>
         </DialogFooter>
       </Dialog>
-    )
-  }
-
-  // alert
-  return (
-    <Dialog
-      {...commonProps}
-      size={dialog.size ?? 'sm'}
-      showCloseButton={false}
-      onOpenChange={o => !o && handleClose(true)}
-    >
-      {dialog.content}
-      <DialogFooter>
-        <Button variant="primary" onClick={() => handleClose(true)}>
-          {dialog.confirmLabel ?? 'OK'}
-        </Button>
-      </DialogFooter>
-    </Dialog>
   )
 }
 
@@ -363,7 +366,7 @@ function ImperativeDialogItem({
  * await alert({ title: 'Error', description: 'Something went wrong.' })
  * ```
  */
-export function useDialog(): UseDialogReturn {
+export function useDialog (): UseDialogReturn {
   const ctx = useContext(DialogImperativeContext)
   if (!ctx) throw new Error('useDialog must be used within <DialogProvider>')
   return ctx

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;