feat(Toast): new component (#50)

src/theme/index.ts

@@ -22,4 +22,6 @@ export { default as slideover } from './slideover'
 export { default as switch } from './switch'
 export { default as tabs } from './tabs'
 export { default as textarea } from './textarea'
+export { default as toast } from './toast'
+export { default as toaster } from './toaster'
 export { default as tooltip } from './tooltip'

src/theme/toast.ts

@@ -0,0 +1,33 @@
+export default (config: { colors: string[] }) => ({
+  slots: {
+    root: 'relative overflow-hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg ring ring-gray-200 dark:ring-gray-800 p-4 flex gap-2.5',
+    wrapper: 'w-0 flex-1 flex flex-col gap-1',
+    title: 'text-sm font-medium text-gray-900 dark:text-white',
+    description: 'text-sm text-gray-500 dark:text-gray-400',
+    icon: 'shrink-0 size-5',
+    avatar: 'shrink-0',
+    actions: 'flex gap-1.5 shrink-0',
+    progress: 'absolute inset-0 rounded-lg border-b-2 z-[-1]',
+    mask: 'absolute top-0 inset-0 bottom-[2px] bg-white dark:bg-gray-900 z-[-1]',
+    close: 'p-1'
+  },
+  variants: {
+    color: Object.fromEntries(config.colors.map((color: string) => [color, {
+      icon: `text-${color}-500 dark:text-${color}-400`,
+      progress: `border-${color}-500 dark:border-${color}-400`
+    }])),
+    multiline: {
+      true: {
+        root: 'items-start',
+        actions: 'items-start mt-1'
+      },
+      false: {
+        root: 'items-center',
+        actions: 'items-center'
+      }
+    }
+  },
+  defaultVariants: {
+    color: 'primary'
+  }
+})

src/theme/toaster.ts

@@ -0,0 +1,56 @@
+export default {
+  slots: {
+    viewport: 'fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[--height]',
+    base: 'absolute inset-x-0 z-[--index] transform-[--transform] data-[expanded=false]:data-[front=false]:h-[--front-height] data-[expanded=false]:data-[front=false]:*:invisible data-[swipe=move]:transition-none transition-[transform,height] will-change-[transform,height] duration-200 ease-out'
+  },
+  variants: {
+    position: {
+      'top-left': {
+        viewport: 'left-4'
+      },
+      'top-center': {
+        viewport: 'left-1/2 transform -translate-x-1/2'
+      },
+      'top-right': {
+        viewport: 'right-4'
+      },
+      'bottom-left': {
+        viewport: 'left-4'
+      },
+      'bottom-center': {
+        viewport: 'left-1/2 transform -translate-x-1/2'
+      },
+      'bottom-right': {
+        viewport: 'right-4'
+      }
+    },
+    swipeDirection: {
+      up: 'data-[swipe=end]:animate-[toast-slide-up_200ms_ease-out]',
+      right: 'data-[swipe=end]:animate-[toast-slide-right_200ms_ease-out]',
+      down: 'data-[swipe=end]:animate-[toast-slide-down_200ms_ease-out]',
+      left: 'data-[swipe=end]:animate-[toast-slide-left_200ms_ease-out]'
+    }
+  },
+  compoundVariants: [{
+    position: ['top-left', 'top-center', 'top-right'],
+    class: {
+      viewport: 'top-4',
+      base: 'top-0 data-[state=open]:animate-[slide-in-from-top_200ms_ease-in-out] data-[state=closed]:animate-[toast-slide-up_200ms_ease-in-out]'
+    }
+  }, {
+    position: ['bottom-left', 'bottom-center', 'bottom-right'],
+    class: {
+      viewport: 'bottom-4',
+      base: 'bottom-0 data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[toast-slide-down_200ms_ease-in-out]'
+    }
+  }, {
+    swipeDirection: ['left', 'right'],
+    class: 'data-[swipe=move]:translate-x-[--radix-toast-swipe-move-x] data-[swipe=end]:translate-x-[--radix-toast-swipe-end-x] data-[swipe=cancel]:translate-x-0'
+  }, {
+    swipeDirection: ['up', 'down'],
+    class: 'data-[swipe=move]:translate-y-[--radix-toast-swipe-move-y] data-[swipe=end]:translate-y-[--radix-toast-swipe-end-y] data-[swipe=cancel]:translate-y-0'
+  }],
+  defaultVariants: {
+    position: 'bottom-right'
+  }
+}