feat(toast): add toast placement prop

Author: vvv-sss

src/components/toast/toast.styles.ts

@@ -3,7 +3,16 @@ import { tv } from 'tailwind-variants';
 import { combineStyles } from '../../helpers/theme/utils/combine-styles';
 
 const root = tv({
-  base: 'absolute top-0 left-0 right-0 rounded-3xl p-4 bg-surface shadow-2xl shadow-black/10',
+  base: 'absolute left-0 right-0 rounded-3xl p-4 bg-surface shadow-2xl shadow-black/10',
+  variants: {
+    placement: {
+      top: 'top-0',
+      bottom: 'bottom-0',
+    },
+  },
+  defaultVariants: {
+    placement: 'top',
+  },
 });
 
 const label = tv({

src/components/toast/toast.tsx

@@ -27,12 +27,14 @@ const ToastRoot = forwardRef<ViewRef, ToastRootProps>((props, ref) => {
   const {
     children,
     variant = 'default',
+    placement = 'top',
     className,
     style,
     ...restProps
   } = props;
 
   const tvStyles = toastStyles.root({
+    placement,
     className,
   });
 

src/components/toast/toast.types.ts

@@ -12,6 +12,11 @@ export type ToastVariant =
   | 'warning'
   | 'danger';
 
+/**
+ * Toast placement types
+ */
+export type ToastPlacement = 'top' | 'bottom';
+
 /**
  * Props for the Toast.Root component
  */
@@ -21,6 +26,11 @@ export interface ToastRootProps extends ToastPrimitive.RootProps {
    * @default 'default'
    */
   variant?: ToastVariant;
+  /**
+   * Placement of the toast
+   * @default 'top'
+   */
+  placement?: ToastPlacement;
   /**
    * Additional CSS class for the toast container
    */

src/providers/toast/provider.tsx

@@ -37,7 +37,11 @@ export function Toaster({ insets }: ToastProviderProps) {
         }}
       >
         <View className="flex-1">
-          <Toast variant="accent" className="flex-row items-center gap-3">
+          <Toast
+            variant="accent"
+            placement="bottom"
+            className="flex-row items-center gap-3"
+          >
             <View className="flex-1">
               <Toast.Label>Accent notification</Toast.Label>
               <Toast.Description>