@medway-ui/native 1.0.2

package/src/components/Toast.tsx

@@ -0,0 +1,265 @@
+import { useState, useEffect, type ReactElement, type ReactNode } from "react";
+import { View, Text, Pressable, type ViewProps } from "react-native";
+import {
+  Info,
+  CircleCheck,
+  TriangleWarning,
+  OctagonWarning,
+  CloseMd,
+} from "@medway-ui/icons/native";
+import { cva } from "class-variance-authority";
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  withDelay,
+  runOnJS,
+} from "react-native-reanimated";
+import { cn } from "@/lib/utils";
+import { Button, type ButtonProps } from "@/components/Button";
+import { useToast } from "@/hooks/use-toast";
+
+type ToastVariant = "primary" | "secondary" | "success" | "warning" | "error";
+type ToastActionVariant = ToastVariant;
+
+type ToastActionElement = ReactElement<typeof ToastAction>;
+
+interface ToastProps extends ViewProps {
+  variant?: ToastVariant;
+  showIcon?: boolean;
+  duration?: number;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children?: ReactNode;
+}
+
+interface ToastActionProps extends Omit<ButtonProps, "variant"> {
+  variant?: ToastActionVariant;
+  altText?: string;
+  onPress?: () => void;
+}
+
+interface ToastCloseProps extends Omit<ViewProps, "children"> {
+  onPress?: () => void;
+  label?: string;
+}
+
+const toastVariants = cva(
+  "flex-row items-center gap-3 w-full rounded-md bg-surface-elevated p-3 shadow-lg",
+  {
+    variants: {
+      variant: {
+        primary: "border-l-4 border-primary-foreground",
+        secondary: "border-l-4 border-secondary-foreground",
+        success: "border-l-4 border-feedback-success-foreground",
+        warning: "border-l-4 border-feedback-warning-foreground",
+        error: "border-l-4 border-feedback-error-foreground",
+      },
+    },
+    defaultVariants: { variant: "primary" },
+  }
+);
+
+const toastIconVariants = cva("shrink-0", {
+  variants: {
+    variant: {
+      primary: "text-primary-foreground",
+      secondary: "text-secondary-foreground",
+      success: "text-feedback-success-foreground",
+      warning: "text-feedback-warning-foreground",
+      error: "text-feedback-error-foreground",
+    },
+  },
+  defaultVariants: { variant: "primary" },
+});
+
+const toastActionButtonVariantMap: Record<ToastActionVariant, ButtonProps["variant"]> = {
+  primary: "regular-soft",
+  secondary: "emphasis-soft",
+  success: "success-soft",
+  warning: "warning-soft",
+  error: "error-soft",
+};
+
+const variantIcons: Record<ToastVariant, typeof Info> = {
+  primary: Info,
+  secondary: Info,
+  success: CircleCheck,
+  warning: TriangleWarning,
+  error: OctagonWarning,
+};
+
+function ToastItem({
+  className,
+  variant = "primary",
+  showIcon = true,
+  open = true,
+  onOpenChange,
+  children,
+  ...props
+}: ToastProps) {
+  const [visible, setVisible] = useState(open);
+  const translateY = useSharedValue(open ? 0 : -80);
+  const opacity = useSharedValue(open ? 1 : 0);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ translateY: translateY.value }],
+    opacity: opacity.value,
+  }));
+
+  useEffect(() => {
+    if (open) {
+      setVisible(true);
+      translateY.value = withTiming(0, { duration: 300 });
+      opacity.value = withTiming(1, { duration: 300 });
+    } else {
+      translateY.value = withDelay(50, withTiming(-80, { duration: 200 }));
+      opacity.value = withTiming(0, { duration: 200 }, (finished) => {
+        if (finished) runOnJS(setVisible)(false);
+      });
+    }
+  }, [open]);
+
+  if (!visible) return null;
+
+  const IconComponent = variantIcons[variant];
+
+  return (
+    <Animated.View style={animatedStyle}>
+      <View className={cn(toastVariants({ variant }), className)} {...props}>
+        {showIcon && (
+          <IconComponent size={20} className={cn(toastIconVariants({ variant }))} />
+        )}
+        <View className="flex-1 flex-row items-center justify-between gap-3">
+          {children}
+        </View>
+        <Pressable
+          onPress={() => onOpenChange?.(false)}
+          className="rounded-pill p-1 active:bg-gray-background-soft"
+        >
+          <CloseMd size={16} className="text-gray-foreground" />
+        </Pressable>
+      </View>
+    </Animated.View>
+  );
+}
+
+function Toast({
+  variant = "primary",
+  showIcon = true,
+  duration,
+  open,
+  onOpenChange,
+  children,
+  ...props
+}: ToastProps) {
+  return (
+    <ToastItem
+      variant={variant}
+      showIcon={showIcon}
+      duration={duration}
+      open={open}
+      onOpenChange={onOpenChange}
+      {...props}
+    >
+      {children}
+    </ToastItem>
+  );
+}
+
+function ToastAction({
+  className,
+  variant = "primary",
+  size = "sm",
+  altText,
+  children,
+  ...props
+}: ToastActionProps) {
+  return (
+    <Button
+      size={size}
+      variant={toastActionButtonVariantMap[variant]}
+      className={cn(className)}
+      {...props}
+    >
+      {children as ReactNode}
+    </Button>
+  );
+}
+
+function ToastTitle({ className, children }: ViewProps & { children?: ReactNode }) {
+  return (
+    <Text className={cn("text-md font-medium text-content-title flex-1", className)}>
+      {children}
+    </Text>
+  );
+}
+
+function ToastDescription({ className, children }: ViewProps & { children?: ReactNode }) {
+  return (
+    <Text className={cn("text-xs text-content-paragraph", className)}>
+      {children}
+    </Text>
+  );
+}
+
+function ToastViewport({ className, children, ...props }: ViewProps & { children?: ReactNode }) {
+  return (
+    <View
+      pointerEvents="box-none"
+      className={cn("absolute top-0 left-0 right-0 z-50 px-4 pt-12 gap-2", className)}
+      {...props}
+    >
+      {children}
+    </View>
+  );
+}
+
+function ToastClose({ className, onPress, label = "Close", ...props }: ToastCloseProps) {
+  return (
+    <Pressable
+      onPress={onPress}
+      accessibilityLabel={label}
+      className={cn("rounded-pill p-1 active:bg-gray-background-soft", className)}
+      {...props}
+    >
+      <CloseMd size={16} className="text-gray-foreground" />
+    </Pressable>
+  );
+}
+
+function ToastProvider() {
+  const { toasts, dismiss } = useToast();
+
+  return (
+    <ToastViewport>
+      {toasts.map(({ id, title, description, action, open = true, variant, showIcon }) => (
+        <Toast
+          key={id}
+          variant={variant}
+          showIcon={showIcon}
+          open={open}
+          onOpenChange={(isOpen) => !isOpen && dismiss(id)}
+        >
+          <View className="flex-col gap-0.5">
+            {title && <ToastTitle>{title}</ToastTitle>}
+            {description && <ToastDescription>{description}</ToastDescription>}
+          </View>
+          {action}
+        </Toast>
+      ))}
+    </ToastViewport>
+  );
+}
+
+export {
+  Toast,
+  ToastAction,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+  toastVariants,
+};
+export type { ToastActionElement, ToastProps };

package/src/components/Tooltip.tsx

@@ -0,0 +1,49 @@
+import { type ReactNode } from "react";
+import { Text } from "react-native";
+import * as TooltipPrimitive from "@rn-primitives/tooltip";
+import { cn } from "@/lib/utils";
+
+interface TooltipContentProps extends TooltipPrimitive.ContentProps {
+  sideOffset?: number;
+}
+
+function TooltipProvider({ children }: { children?: ReactNode }) {
+  return <>{children}</>;
+}
+
+function Tooltip({ ...props }: TooltipPrimitive.RootProps) {
+  return <TooltipPrimitive.Root {...props} />;
+}
+
+function TooltipTrigger({ ...props }: TooltipPrimitive.TriggerProps) {
+  return <TooltipPrimitive.Trigger {...props} />;
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: TooltipContentProps) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 rounded-md bg-surface-elevated px-3 py-2 shadow-md",
+          className
+        )}
+        {...props}
+      >
+        {typeof children === "string" ? (
+          <Text className="text-sm font-medium text-gray-foreground-emphasis">{children}</Text>
+        ) : (
+          children
+        )}
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
+export type { TooltipContentProps };

package/src/hooks/use-toast.ts

@@ -0,0 +1,144 @@
+import { useState, useEffect, type ReactNode } from "react";
+
+import type { ToastActionElement, ToastProps } from "@/components/Toast";
+
+const TOAST_LIMIT = 3;
+const TOAST_REMOVE_DELAY = 5000;
+
+type ToasterToast = ToastProps & {
+  id: string;
+  title?: ReactNode;
+  description?: ReactNode;
+  action?: ToastActionElement;
+};
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+} as const;
+
+let count = 0;
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER;
+  return count.toString();
+}
+
+type ActionType = typeof actionTypes;
+
+type Action =
+  | { type: ActionType["ADD_TOAST"]; toast: ToasterToast }
+  | { type: ActionType["UPDATE_TOAST"]; toast: Partial<ToasterToast> }
+  | { type: ActionType["DISMISS_TOAST"]; toastId?: ToasterToast["id"] }
+  | { type: ActionType["REMOVE_TOAST"]; toastId?: ToasterToast["id"] };
+
+interface State {
+  toasts: ToasterToast[];
+}
+
+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: actionTypes.REMOVE_TOAST, toastId });
+  }, TOAST_REMOVE_DELAY);
+
+  toastTimeouts.set(toastId, timeout);
+};
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case actionTypes.ADD_TOAST:
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      };
+    case actionTypes.UPDATE_TOAST:
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t
+        ),
+      };
+    case actionTypes.DISMISS_TOAST: {
+      const { toastId } = action;
+      if (toastId) {
+        addToRemoveQueue(toastId);
+      } else {
+        state.toasts.forEach((t) => addToRemoveQueue(t.id));
+      }
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined ? { ...t, open: false } : t
+        ),
+      };
+    }
+    case actionTypes.REMOVE_TOAST:
+      if (action.toastId === undefined) return { ...state, toasts: [] };
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      };
+  }
+};
+
+const listeners: Array<(state: State) => void> = [];
+let memoryState: State = { toasts: [] };
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action);
+  [...listeners].forEach((listener) => listener(memoryState));
+}
+
+type Toast = Omit<ToasterToast, "id">;
+
+function toast(props: Toast) {
+  const id = genId();
+
+  const update = (p: ToasterToast) =>
+    dispatch({ type: actionTypes.UPDATE_TOAST, toast: { ...p, id } });
+  const dismiss = () =>
+    dispatch({ type: actionTypes.DISMISS_TOAST, toastId: id });
+
+  dispatch({
+    type: actionTypes.ADD_TOAST,
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss();
+      },
+    },
+  });
+
+  return { id, dismiss, update };
+}
+
+function useToast() {
+  const [state, setState] = useState<State>(memoryState);
+
+  useEffect(() => {
+    listeners.push(setState);
+    return () => {
+      const index = listeners.indexOf(setState);
+      if (index > -1) listeners.splice(index, 1);
+    };
+  }, []);
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) =>
+      dispatch({ type: actionTypes.DISMISS_TOAST, toastId }),
+  };
+}
+
+export { useToast, toast };
+export type { ToasterToast };

package/src/index.ts

@@ -0,0 +1,193 @@
+// Alert
+export {
+  Alert,
+  AlertActions,
+  AlertButton,
+  alertButtonVariants,
+  AlertContainer,
+  AlertContent,
+  AlertDescription,
+  AlertIcon,
+  AlertTitle,
+  alertVariants,
+} from "@/components/Alert";
+export type { AlertButtonProps, AlertProps } from "@/components/Alert";
+
+// Badge
+export { Badge, badgeVariants } from "@/components/Badge";
+export type { BadgeAnimation, BadgeProps } from "@/components/Badge";
+
+// Button
+export { Button, buttonVariants, buttonTextVariants } from "@/components/Button";
+export type { ButtonProps } from "@/components/Button";
+
+// Checkbox
+export { Checkbox, checkboxVariants } from "@/components/Checkbox";
+export type { CheckboxProps } from "@/components/Checkbox";
+
+// Input
+export {
+  Input,
+  InputAdornment,
+  applyInputIconSize,
+  InputEndIcon,
+  InputField,
+  InputLabel,
+  InputNumeric,
+  InputPassword,
+  InputStartIcon,
+  InputText,
+  InputWrapper,
+  inputVariants,
+} from "@/components/Input";
+export type {
+  InputLabelProps,
+  InputNumericProps,
+  InputPasswordProps,
+  InputProps,
+  InputTextProps,
+  InputType,
+} from "@/components/Input";
+
+// Label
+export { Label, labelVariants, labelTextVariants } from "@/components/Label";
+export type { LabelProps } from "@/components/Label";
+
+// Loading
+export { Loading } from "@/components/Loading";
+export type { LoadingProps } from "@/components/Loading";
+
+// RadioGroup
+export { RadioGroup, RadioGroupItem, radioGroupVariants } from "@/components/RadioGroup";
+export type { RadioGroupItemProps } from "@/components/RadioGroup";
+
+// Select
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectHeader,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectText,
+  SelectTrigger,
+  SelectValue,
+  SelectWrapper,
+  selectVariants,
+} from "@/components/Select";
+export type { SelectProps, SelectItemProps, SelectSize } from "@/components/Select";
+
+// Separator
+export { Separator } from "@/components/Separator";
+export type { SeparatorProps } from "@/components/Separator";
+
+// Switch
+export { Switch, switchVariants } from "@/components/Switch";
+export type { SwitchProps } from "@/components/Switch";
+
+// AlertDialog
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogIcon,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTag,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/AlertDialog";
+export type {
+  AlertDialogActionProps,
+  AlertDialogCancelProps,
+  AlertDialogContentProps,
+  AlertDialogIconProps,
+  AlertDialogProps,
+  AlertDialogTagProps,
+  AlertDialogVariant,
+} from "@/components/AlertDialog";
+
+// Dialog
+export {
+  Dialog,
+  DialogClose,
+  DialogContainer,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/Dialog";
+export type {
+  DialogContainerProps,
+  DialogFooterProps,
+  DialogHeaderProps,
+  DialogTitleProps,
+} from "@/components/Dialog";
+
+// Popover
+export {
+  Popover,
+  PopoverClose,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/Popover";
+export type { PopoverContentProps } from "@/components/Popover";
+
+// Sheet
+export {
+  Sheet,
+  SheetClose,
+  SheetContainer,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/Sheet";
+export type {
+  SheetContainerProps,
+  SheetFooterProps,
+  SheetHeaderProps,
+  SheetSide,
+} from "@/components/Sheet";
+
+// Tag
+export { Tag, tagVariants, tagTextVariants } from "@/components/Tag";
+export type { TagProps } from "@/components/Tag";
+
+// Toast
+export {
+  Toast,
+  ToastAction,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+  toastVariants,
+} from "@/components/Toast";
+export type { ToastActionElement, ToastProps } from "@/components/Toast";
+
+// Tooltip
+export {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/Tooltip";
+export type { TooltipContentProps } from "@/components/Tooltip";
+
+// Hooks
+export { useToast, toast } from "@/hooks/use-toast";

package/src/lib/utils.ts

@@ -0,0 +1,63 @@
+import { clsx, type ClassValue } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+
+const customTwMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [
+        "text-xxs",
+        "text-xs",
+        "text-sm",
+        "text-base",
+        "text-md",
+        "text-lg",
+        "text-xl",
+        "text-title-xs",
+        "text-title-sm",
+        "text-title-md",
+        "text-title-lg",
+        "text-title-xl",
+        "text-title-xxl",
+        "text-display-sm",
+        "text-display-md",
+        "text-display-lg",
+      ],
+      leading: [
+        "leading-xxs",
+        "leading-xs",
+        "leading-sm",
+        "leading-md",
+        "leading-lg",
+        "leading-title-xs",
+        "leading-title-sm",
+        "leading-title-md",
+        "leading-title-lg",
+        "leading-title-xl",
+        "leading-title-xxl",
+        "leading-display-sm",
+        "leading-display-md",
+        "leading-display-lg",
+      ],
+      "font-weight": [
+        "font-regular",
+        "font-medium",
+        "font-semibold",
+        "font-bold",
+        "font-extrabold",
+      ],
+      rounded: [
+        "rounded-none",
+        "rounded-sm",
+        "rounded-md",
+        "rounded-lg",
+        "rounded-pill",
+        "rounded-circular",
+        "rounded-full",
+      ],
+    },
+  },
+});
+
+export function cn(...inputs: ClassValue[]) {
+  return customTwMerge(clsx(inputs));
+}

package/src/nativewind-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="nativewind/types" />