@byldpartners/ui 0.0.1

package/src/components/Textarea/Textarea.web.tsx

@@ -0,0 +1,21 @@
+import { forwardRef } from "react";
+import { cn } from "../../utils/cn";
+
+const Textarea = forwardRef<
+  HTMLTextAreaElement,
+  React.TextareaHTMLAttributes<HTMLTextAreaElement>
+>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+Textarea.displayName = "Textarea";
+
+export { Textarea };

package/src/components/Textarea/index.native.ts

@@ -0,0 +1,2 @@
+export { Textarea } from "./Textarea.native";
+export type { TextareaProps } from "./Textarea.types";

package/src/components/Textarea/index.ts

@@ -0,0 +1,2 @@
+export * from "./Textarea.web";
+export type * from "./Textarea.types";

package/src/components/Toast/Toast.native.tsx

@@ -0,0 +1,267 @@
+import {
+  useEffect,
+  useRef,
+  type ReactNode,
+} from "react";
+import {
+  View,
+  Text,
+  Pressable,
+  Animated,
+} from "react-native";
+import { cva } from "class-variance-authority";
+import { cn } from "../../utils/cn";
+import { toast, useToast, type ToasterToast } from "./useToast";
+import type {
+  ToastVariant,
+  ToastProps,
+  ToastProviderProps,
+  ToastViewportProps,
+  ToastTitleProps,
+  ToastDescriptionProps,
+  ToastActionProps,
+  ToastCloseProps,
+} from "./Toast.types";
+
+const toastContainerVariants = cva(
+  "flex-row items-center justify-between bg-background rounded-lg border-[0.5px] border-border p-4 shadow-lg elevation-5",
+  {
+    variants: {
+      variant: {
+        default: "",
+        destructive: "bg-destructive border-destructive",
+      } satisfies Record<ToastVariant, string>,
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+const toastTitleVariants = cva("text-sm font-semibold", {
+  variants: {
+    variant: {
+      default: "text-foreground",
+      destructive: "text-destructive-foreground",
+    } satisfies Record<ToastVariant, string>,
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+const toastDescriptionVariants = cva("text-[13px] mt-0.5", {
+  variants: {
+    variant: {
+      default: "text-muted-foreground",
+      destructive: "text-destructive-foreground",
+    } satisfies Record<ToastVariant, string>,
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+const toastCloseVariants = cva("text-lg", {
+  variants: {
+    variant: {
+      default: "text-muted-foreground",
+      destructive: "text-destructive-foreground",
+    } satisfies Record<ToastVariant, string>,
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+// ---- Toast UI Components ----
+
+function ToastProvider({ children }: ToastProviderProps) {
+  return <>{children}</>;
+}
+ToastProvider.displayName = "ToastProvider";
+
+function ToastViewport({ children, className }: ToastViewportProps & { children?: ReactNode }) {
+  const { toasts, dismiss } = useToast();
+
+  return (
+    <View
+      className={cn(
+        "absolute top-0 left-0 right-0 z-[100] p-4 gap-2",
+        className,
+      )}
+      style={{ paddingTop: 50 }}
+    >
+      {toasts.map((t) => (
+        <ToastItem key={t.id} toast={t} onDismiss={() => dismiss(t.id)} />
+      ))}
+      {children}
+    </View>
+  );
+}
+ToastViewport.displayName = "ToastViewport";
+
+function ToastItem({ toast: t, onDismiss }: { toast: ToasterToast; onDismiss: () => void }) {
+  const translateY = useRef(new Animated.Value(-100)).current;
+  const opacity = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.parallel([
+      Animated.spring(translateY, {
+        toValue: 0,
+        useNativeDriver: true,
+        damping: 15,
+        stiffness: 150,
+      }),
+      Animated.timing(opacity, {
+        toValue: 1,
+        duration: 200,
+        useNativeDriver: true,
+      }),
+    ]).start();
+
+    const duration = t.duration ?? 5000;
+    const timer = setTimeout(() => {
+      Animated.parallel([
+        Animated.timing(translateY, {
+          toValue: -100,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+        Animated.timing(opacity, {
+          toValue: 0,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+      ]).start(() => onDismiss());
+    }, duration);
+
+    return () => clearTimeout(timer);
+  }, [translateY, opacity, t.duration, onDismiss]);
+
+  const variant = t.variant ?? "default";
+
+  return (
+    <Animated.View
+      className={cn(toastContainerVariants({ variant }))}
+      style={[
+        { transform: [{ translateY }], opacity },
+      ]}
+    >
+      <View className="flex-1 mr-2">
+        {t.title && (
+          <Text className={cn(toastTitleVariants({ variant }))}>
+            {t.title}
+          </Text>
+        )}
+        {t.description && (
+          <Text className={cn(toastDescriptionVariants({ variant }))}>
+            {t.description}
+          </Text>
+        )}
+      </View>
+      <View className="flex-row items-center gap-1">
+        {t.action && (
+          <Pressable
+            className="px-3 py-1.5 rounded-sm border-[0.5px] border-border"
+            onPress={t.action.onPress}
+          >
+            <Text className="text-xs font-medium text-foreground">
+              {t.action.label}
+            </Text>
+          </Pressable>
+        )}
+        <Pressable onPress={onDismiss} className="p-1">
+          <Text className={cn(toastCloseVariants({ variant }))}>
+            ×
+          </Text>
+        </Pressable>
+      </View>
+    </Animated.View>
+  );
+}
+
+function Toast({ children, className }: ToastProps) {
+  return (
+    <View
+      className={cn(
+        "flex-row items-center justify-between bg-background rounded-lg border border-border p-4 shadow-lg elevation-5",
+        className,
+      )}
+    >
+      {children}
+    </View>
+  );
+}
+Toast.displayName = "Toast";
+
+function ToastTitle({ children, className }: ToastTitleProps) {
+  return (
+    <Text className={cn("text-sm font-semibold text-foreground", className)}>
+      {children}
+    </Text>
+  );
+}
+ToastTitle.displayName = "ToastTitle";
+
+function ToastDescription({ children, className }: ToastDescriptionProps) {
+  return (
+    <Text className={cn("text-[13px] text-muted-foreground mt-0.5", className)}>
+      {children}
+    </Text>
+  );
+}
+ToastDescription.displayName = "ToastDescription";
+
+interface ToastActionNativeProps extends ToastActionProps {
+  onPress?: () => void;
+}
+
+function ToastAction({
+  children,
+  onPress,
+  className,
+}: ToastActionNativeProps) {
+  return (
+    <Pressable
+      className={cn(
+        "px-3 py-1.5 rounded-sm border border-border",
+        className,
+      )}
+      onPress={onPress}
+    >
+      {children}
+    </Pressable>
+  );
+}
+ToastAction.displayName = "ToastAction";
+
+interface ToastCloseNativeProps extends ToastCloseProps {
+  onPress?: () => void;
+}
+
+function ToastClose({ onPress }: ToastCloseNativeProps) {
+  return (
+    <Pressable className="p-1" onPress={onPress}>
+      <Text className="text-lg text-muted-foreground">×</Text>
+    </Pressable>
+  );
+}
+ToastClose.displayName = "ToastClose";
+
+export {
+  Toast,
+  ToastProvider,
+  ToastViewport,
+  ToastTitle,
+  ToastDescription,
+  ToastAction,
+  ToastClose,
+  toast,
+  useToast,
+  toastContainerVariants,
+  toastTitleVariants,
+  toastDescriptionVariants,
+  toastCloseVariants,
+  type ToasterToast,
+};

package/src/components/Toast/Toast.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  Toast,
+  ToastProvider,
+  ToastViewport,
+  ToastTitle,
+  ToastDescription,
+} from "./Toast.web";
+
+const meta: Meta<typeof Toast> = {
+  title: "Components/Toast",
+  component: Toast,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Toast>;
+
+export const Default: Story = {
+  render: () => (
+    <ToastProvider>
+      <Toast open>
+        <ToastTitle>Notification</ToastTitle>
+        <ToastDescription>
+          Your changes have been saved successfully.
+        </ToastDescription>
+      </Toast>
+      <ToastViewport />
+    </ToastProvider>
+  ),
+};

package/src/components/Toast/Toast.types.ts

@@ -0,0 +1,50 @@
+import type { ReactNode } from "react";
+
+export type ToastVariant = "default" | "destructive";
+
+export interface ToastProps {
+  children?: ReactNode;
+  className?: string;
+  variant?: ToastVariant;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+export interface ToastProviderProps {
+  children?: ReactNode;
+}
+
+export interface ToastViewportProps {
+  className?: string;
+}
+
+export interface ToastTitleProps {
+  children?: ReactNode;
+  className?: string;
+}
+
+export interface ToastDescriptionProps {
+  children?: ReactNode;
+  className?: string;
+}
+
+export interface ToastActionProps {
+  children?: ReactNode;
+  className?: string;
+  altText: string;
+  onClick?: () => void;
+}
+
+export interface ToastCloseProps {
+  className?: string;
+}
+
+export interface ToasterToast {
+  id: string;
+  title?: ReactNode;
+  description?: ReactNode;
+  action?: ReactNode;
+  variant?: ToastVariant;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}

package/src/components/Toast/Toast.web.tsx

@@ -0,0 +1,282 @@
+import { forwardRef, useState, useEffect, type ReactNode } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../utils/cn";
+
+function XIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+      <path d="M18 6 6 18"/><path d="m6 6 12 12"/>
+    </svg>
+  );
+}
+
+const toastKeyframes = `@keyframes byld-toast-slide-in{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}`;
+let toastStyleInjected = false;
+
+const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg [animation:byld-toast-slide-in_0.3s_ease-out]",
+  {
+    variants: {
+      variant: {
+        default: "border bg-background text-foreground",
+        destructive:
+          "destructive group border-destructive bg-destructive text-destructive-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+// ---- Toast primitives (portal-based) ----
+
+const ToastProvider = ({ children }: { children?: ReactNode }) => {
+  return <>{children}</>;
+};
+ToastProvider.displayName = "ToastProvider";
+
+const ToastViewport = forwardRef<
+  HTMLOListElement,
+  React.HTMLAttributes<HTMLOListElement>
+>(({ className, ...props }, ref) => {
+  useEffect(() => {
+    if (toastStyleInjected) return;
+    toastStyleInjected = true;
+    const style = document.createElement("style");
+    style.textContent = toastKeyframes;
+    document.head.appendChild(style);
+  }, []);
+
+  return (
+    <ol
+      ref={ref}
+      className={cn(
+        "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+ToastViewport.displayName = "ToastViewport";
+
+interface ToastWebProps
+  extends React.HTMLAttributes<HTMLLIElement>,
+    VariantProps<typeof toastVariants> {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+const Toast = forwardRef<HTMLLIElement, ToastWebProps>(
+  ({ className, variant, open = true, onOpenChange, ...props }, ref) => {
+    if (!open) return null;
+    return (
+      <li
+        ref={ref}
+        className={cn(toastVariants({ variant }), className)}
+        data-state={open ? "open" : "closed"}
+        {...props}
+      />
+    );
+  },
+);
+Toast.displayName = "Toast";
+
+const ToastAction = forwardRef<
+  HTMLButtonElement,
+  React.ButtonHTMLAttributes<HTMLButtonElement> & { altText?: string }
+>(({ className, altText, ...props }, ref) => (
+  <button
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      className,
+    )}
+    {...props}
+  />
+));
+ToastAction.displayName = "ToastAction";
+
+const ToastClose = forwardRef<
+  HTMLButtonElement,
+  React.ButtonHTMLAttributes<HTMLButtonElement>
+>(({ className, ...props }, ref) => (
+  <button
+    ref={ref}
+    className={cn(
+      "absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      className,
+    )}
+    toast-close=""
+    {...props}
+  >
+    <XIcon className="h-4 w-4" />
+  </button>
+));
+ToastClose.displayName = "ToastClose";
+
+const ToastTitle = forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm font-semibold [&+div]:text-xs", className)}
+    {...props}
+  />
+));
+ToastTitle.displayName = "ToastTitle";
+
+const ToastDescription = forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm opacity-90", className)}
+    {...props}
+  />
+));
+ToastDescription.displayName = "ToastDescription";
+
+// ---- useToast hook ----
+
+type ToasterToast = {
+  id: string;
+  title?: ReactNode;
+  description?: ReactNode;
+  action?: ReactNode;
+  variant?: "default" | "destructive";
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+};
+
+type ToastAction =
+  | { type: "ADD_TOAST"; toast: ToasterToast }
+  | { type: "UPDATE_TOAST"; toast: Partial<ToasterToast> }
+  | { type: "DISMISS_TOAST"; toastId?: string }
+  | { type: "REMOVE_TOAST"; toastId?: string };
+
+const TOAST_LIMIT = 1;
+const TOAST_REMOVE_DELAY = 5000;
+
+let count = 0;
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER;
+  return count.toString();
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) return;
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId);
+    dispatch({ type: "REMOVE_TOAST", toastId });
+  }, TOAST_REMOVE_DELAY);
+
+  toastTimeouts.set(toastId, timeout);
+};
+
+const reducer = (state: ToasterToast[], action: ToastAction): ToasterToast[] => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return [action.toast, ...state].slice(0, TOAST_LIMIT);
+    case "UPDATE_TOAST":
+      return state.map((t) =>
+        t.id === action.toast.id ? { ...t, ...action.toast } : t,
+      );
+    case "DISMISS_TOAST": {
+      const { toastId } = action;
+      if (toastId) {
+        addToRemoveQueue(toastId);
+      } else {
+        state.forEach((t) => addToRemoveQueue(t.id));
+      }
+      return state.map((t) =>
+        t.id === toastId || toastId === undefined
+          ? { ...t, open: false }
+          : t,
+      );
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) return [];
+      return state.filter((t) => t.id !== action.toastId);
+    default:
+      return state;
+  }
+};
+
+const listeners: Array<(state: ToasterToast[]) => void> = [];
+let memoryState: ToasterToast[] = [];
+
+function dispatch(action: ToastAction) {
+  memoryState = reducer(memoryState, action);
+  listeners.forEach((listener) => listener(memoryState));
+}
+
+function toast({
+  ...props
+}: Omit<ToasterToast, "id">) {
+  const id = genId();
+
+  const update = (updateProps: Partial<ToasterToast>) =>
+    dispatch({ type: "UPDATE_TOAST", toast: { ...updateProps, id } });
+
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
+
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss();
+      },
+    },
+  });
+
+  // Auto-dismiss after delay
+  setTimeout(() => {
+    dismiss();
+  }, TOAST_REMOVE_DELAY);
+
+  return { id, dismiss, update };
+}
+
+function useToast() {
+  const [state, setState] = useState<ToasterToast[]>(memoryState);
+
+  useEffect(() => {
+    listeners.push(setState);
+    return () => {
+      const index = listeners.indexOf(setState);
+      if (index > -1) listeners.splice(index, 1);
+    };
+  }, []);
+
+  return {
+    toasts: state,
+    toast,
+    dismiss: (toastId?: string) =>
+      dispatch({ type: "DISMISS_TOAST", toastId }),
+  };
+}
+
+export {
+  Toast,
+  ToastProvider,
+  ToastViewport,
+  ToastTitle,
+  ToastDescription,
+  ToastAction,
+  ToastClose,
+  toast,
+  useToast,
+  toastVariants,
+  type ToasterToast,
+  type ToastWebProps,
+};

package/src/components/Toast/index.native.ts

@@ -0,0 +1,17 @@
+export {
+  Toast,
+  ToastProvider,
+  ToastViewport,
+  ToastTitle,
+  ToastDescription,
+  ToastAction,
+  ToastClose,
+  toast,
+  useToast,
+  toastContainerVariants,
+  toastTitleVariants,
+  toastDescriptionVariants,
+  toastCloseVariants,
+  type ToasterToast,
+} from "./Toast.native";
+export type { ToastProps } from "./Toast.types";

package/src/components/Toast/index.ts

@@ -0,0 +1,11 @@
+export * from "./Toast.web";
+export type {
+  ToastVariant,
+  ToastProps,
+  ToastProviderProps,
+  ToastViewportProps,
+  ToastTitleProps,
+  ToastDescriptionProps,
+  ToastActionProps,
+  ToastCloseProps,
+} from "./Toast.types";