saafe-redirection-flow 2.0.0

package/src/components/ui/mobile-footer.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { cn } from "@/lib/utils";
+import Logo from "../../assets/brand/saafe-logo.svg"
+import { useMediaQuery } from "@/hooks/use-media-query";
+import { useTrustedCount } from "@/hooks/use-trusted-count";
+import { VersionDisplay } from "./version-display";
+
+interface MobileFooterProps {
+  children: React.ReactNode;
+  show: boolean;
+  className?: string;
+}
+
+export function MobileFooter({
+  children,
+  show,
+  className
+}: MobileFooterProps) {
+  const isMobile = useMediaQuery("(max-width: 768px)");
+  const { data: trustedCount, isLoading } = useTrustedCount();
+  
+  return (
+    <AnimatePresence>
+      {(show && isMobile) ? (
+        <motion.div
+          initial={{ y: 100, opacity: 0 }}
+          animate={{ y: 0, opacity: 1 }}
+          exit={{ y: 100, opacity: 0 }}
+          transition={{ duration: 0.3 }}
+          className={cn(
+            "fixed bottom-0 left-0 right-0 bg-white drop-shadow-[0_35px_35px_rgba(0,0,0,0.25)] rounded-t-2xl z-50 dark:bg-card",
+            className
+          )}
+        >
+          <div className="w-full pt-8 px-8">{children}</div>
+          <div className="flex-col justify-center items-center text-center py-3">
+            <p className="text-muted-secondary text-xs font-medium text-nowrap flex justify-center items-center gap-2 w-full">
+              Powered by <img src={Logo} alt="Saafe Logo" className="w-12 h-auto" />
+            </p>
+            {!isLoading && trustedCount?.displayText && (
+              <p className="text-muted-secondary text-xs font-light mt-1.5">
+                {trustedCount.displayText}
+              </p>
+            )}
+            <div className="flex justify-center">
+              <VersionDisplay variant="minimal" showIcon={false} className="text-muted-secondary" />
+            </div>
+          </div>
+        </motion.div>
+      ) : null}
+    </AnimatePresence>
+  );
+} 

package/src/components/ui/modal.tsx

@@ -0,0 +1,90 @@
+import React, { ReactNode } from "react";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "./dialog";
+import { cn } from "@/lib/utils";
+
+interface ModalProps {
+  title?: string | boolean;
+  description?: string;
+  children: ReactNode;
+  withCloseIcon?: boolean;
+  footer?: ReactNode;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  className?: string;
+}
+
+interface ModalTriggerProps {
+  children: ReactNode;
+}
+
+interface ModalFooterProps {
+  children: ReactNode;
+}
+
+interface ModalCloseProps {
+  children: ReactNode;
+  className?: string;
+}
+
+const Modal = ({ title, description, children, withCloseIcon = true, open, onOpenChange, className }: ModalProps) => {
+  let triggerElement: ReactNode = null;
+  let footerElement: ReactNode = null;
+  const contentElements: ReactNode[] = [];
+
+  // Separate trigger, footer, and content elements
+  React.Children.forEach(children, (child) => {
+    if (React.isValidElement(child)) {
+      if (child.type === Modal.Trigger) {
+        triggerElement = child;
+      } else if (child.type === Modal.Footer) {
+        footerElement = child;
+      } else {
+        contentElements.push(child);
+      }
+    }
+  });
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      {triggerElement} {/* Renders only the trigger outside the modal */}
+      <DialogContent className={cn("md:max-w-[800px] sm:max-w-[425px]", className)} withCloseIcon={withCloseIcon}>
+        <DialogHeader>
+          {title && <DialogTitle className="dark:text-white">{title}</DialogTitle>}
+          {description && <DialogDescription>{description}</DialogDescription>}
+        </DialogHeader>
+        <div>{contentElements}</div> {/* Renders modal content */}
+        {footerElement}
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+const ModalTrigger = ({ children }: ModalTriggerProps) => {
+  if (!children) return null;
+  return <DialogTrigger asChild>{children}</DialogTrigger>;
+};
+
+const ModalFooter = ({ children }: ModalFooterProps) => {
+  if (!children) return null;
+  return <DialogFooter>{children}</DialogFooter>;
+};
+
+const ModalClose = ({ children, className }: ModalCloseProps) => {
+  if (!children) return null;
+  return <DialogClose className={className}>{children}</DialogClose>;
+};
+
+Modal.Trigger = ModalTrigger;
+Modal.Footer = ModalFooter;
+Modal.Close = ModalClose;
+
+export default Modal;

package/src/components/ui/otp-input.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { OTPInputComponent } from "./otp-input";
+
+const meta: Meta<typeof OTPInputComponent> = {
+  title: "UI/OTPInput",
+  component: OTPInputComponent,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof OTPInputComponent>;
+
+export const Default: Story = {
+  args: {
+    title: "Enter OTP",
+    mobileNumber: "+91 9876543210",
+    onResend: () => alert("Resend clicked"),
+    countdownTime: 30,
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    title: "Enter OTP",
+    mobileNumber: "+91 9876543210",
+    onResend: () => alert("Resend clicked"),
+    countdownTime: 30,
+    error: true,
+    errorMessage: "Invalid OTP. Please try again.",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    title: "Enter OTP",
+    mobileNumber: "+91 9876543210",
+    onResend: () => alert("Resend clicked"),
+    countdownTime: 30,
+    disabled: true,
+  },
+};
+
+export const CustomTitle: Story = {
+  args: {
+    title: "Verify Your Phone Number",
+    mobileNumber: "+91 9876543210",
+    onResend: () => alert("Resend clicked"),
+    countdownTime: 30,
+  },
+};
+
+export const ShortCountdown: Story = {
+  args: {
+    title: "Enter OTP",
+    mobileNumber: "+91 9876543210",
+    onResend: () => alert("Resend clicked"),
+    countdownTime: 5,
+  },
+}; 

package/src/components/ui/otp-input.tsx

@@ -0,0 +1,221 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { Label } from "@/components/ui/label";
+import { OTPInput, SlotProps } from "input-otp";
+import { useId, useState, useEffect, forwardRef } from "react";
+import { useTranslation } from "react-i18next";
+import { Eye, EyeOff } from "lucide-react";
+import { Button } from "./button";
+
+interface OTPInputComponentProps {
+  title?: string;
+  mobileNumber?: string;
+  onResend?: () => void;
+  countdownTime?: number;
+  maxLength?: number;
+  errorMessage?: string;
+  error?: boolean;
+  disabled?: boolean;
+  handleEdit?: () => void;
+  value?: string;
+  onChange?: (value: string) => void;
+  handleLogin?: () => void;
+  name?: string;
+  editable?: boolean;
+  autoFocus?: boolean;
+  resendLoading?: boolean
+}
+
+// Extend SlotProps with our custom isError property
+interface ExtendedSlotProps extends SlotProps {
+  isError?: boolean;
+  isVisible?: boolean;
+  onKeyDown?: (e: React.KeyboardEvent) => void;
+}
+
+const OTPInputComponent = forwardRef<HTMLDivElement, OTPInputComponentProps>(({
+  title = "Sign up for Saafe",
+  mobileNumber = "+91 1234567890",
+  onResend = () => { },
+  countdownTime = 10,
+  maxLength = 6,
+  editable = false,
+  errorMessage = "",
+  error = false,
+  disabled = false,
+  handleEdit = () => { },
+  resendLoading = false,
+  handleLogin = () => { },
+  value = "",
+  onChange,
+  name,
+  autoFocus = true
+}, ref) => {
+
+  const id = useId();
+  const [countdown, setCountdown] = useState(countdownTime);
+  const [otpValue, setOtpValue] = useState(value);
+  const [otpLoadingObj, setOTPLoadingObj] = useState({ loading: false, isResent: false });
+  const [isOtpVisible, setIsOtpVisible] = useState(false);
+  const { t } = useTranslation();
+
+  // Handle OTP value changes
+  const handleOtpChange = (newValue: string) => {
+    // Only allow numeric values
+    const numericValue = newValue.replace(/\D/g, '');
+    setOtpValue(numericValue);
+    if (onChange) {
+      onChange(numericValue);
+    }
+  };
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      if (countdown > 0) {
+        setCountdown(countdown - 1);
+      }
+    }, 1000);
+    return () => clearInterval(intervalId);
+  }, [countdown]);
+
+  // Update internal state when value prop changes
+  useEffect(() => {
+    setOtpValue(value);
+  }, [value]);
+
+  const handleResend = () => {
+    setTimeout(() => {
+      setOTPLoadingObj({ loading: false, isResent: true })
+      setCountdown(countdownTime);
+    }, 1000)
+    if (onResend) onResend();
+  };
+
+  const toggleOtpVisibility = () => {
+    setIsOtpVisible(!isOtpVisible);
+  };
+
+  return (
+    <div ref={ref}>
+      <div className="flex flex-col items-center space-y-2 min-w-[300px]">
+        <h1 className="text-2xl font-semibold dark:text-white">{title}</h1>
+        <Label htmlFor={id} className="font-normal mt-3 text-muted-secondary">
+          <p className="leading-5">
+            {t('login.enterOtp')} {t('login.sentTo')}{" "}
+            <span className="font-semibold">+91 {mobileNumber}</span> {" "}
+            {editable && <span className="text-foreground decoration-black cursor-pointer underline" onClick={handleEdit}>{t('common.edit')}</span>}
+          </p>
+        </Label>
+        <div className="relative w-full flex flex-col items-center">
+          <OTPInput
+            id={id}
+            containerClassName={cn(
+              "flex items-center gap-3 has-[:disabled]:opacity-50 mt-2",
+              { "border-red-500": error, "opacity-50": disabled }
+            )}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                handleLogin(); // trigger login explicitly
+              }
+            }}
+            maxLength={maxLength}
+            value={otpValue}
+            onChange={handleOtpChange}
+            name={name}
+            render={({ slots }) => (
+              <div className="flex gap-2">
+                {slots.map((slot, idx) => (
+                  <Slot 
+                    key={idx} 
+                    {...slot} 
+                    isError={error} 
+                    isVisible={isOtpVisible}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') {
+                        e.preventDefault();
+                        handleLogin(); // trigger login only
+                      }
+                    }} 
+                  />
+                ))}
+              </div>
+            )}
+            disabled={disabled}
+            autoFocus={autoFocus}
+          />
+          <Button
+            type="button"
+            variant="link"
+            size="icon"
+            className="absolute top-1/2 -translate-y-1/2 -translate-x-1/2 right-0 sm:right-2 z-10 mt-1"
+            onClick={toggleOtpVisibility}
+          >
+            {isOtpVisible ? (
+              <EyeOff className="h-4 w-4" />
+            ) : (
+              <Eye className="h-4 w-4" />
+            )}
+            <span className="sr-only">
+              {isOtpVisible ? "Hide OTP" : "Show OTP"}
+            </span>
+          </Button>
+        </div>
+      </div>
+      <div className="flex flex-col mt-1 justify-center items-center">
+        {errorMessage && (
+          <p className="text-danger text-sm mt-1 w-[216px]">
+            {errorMessage}
+          </p>
+        )}
+        <p className="text-sm mt-1 text-muted-secondary w-[216px]">
+          {countdown > 0 && !otpLoadingObj?.isResent ? t('login.resendCodeIn') : null}
+          {countdown > 0 && otpLoadingObj?.isResent ? t('login.resendCodeInNew') : null}<span>{countdown > 0 ? `${String(Math.floor(countdown / 60)).padStart(2, '0')}:${String(countdown % 60).padStart(2, '0')}s` : null}</span>
+          {(countdown === 0 && !otpLoadingObj?.loading) && (
+            <button
+              className={cn("font-medium text-primary cursor-pointer", {
+                "opacity-50": disabled,
+              })}
+              disabled={disabled}
+              type='button'
+              onClick={() => {
+                setOTPLoadingObj({ loading: true, isResent: true });
+                handleResend();
+              }}
+            >
+              {t('login.resend')}
+            </button>
+          )}
+          {(resendLoading || otpLoadingObj?.loading) ? t("login.resending") : null}
+        </p>
+      </div>
+    </div>
+  );
+});
+
+OTPInputComponent.displayName = "OTPInputComponent";
+
+// Custom Slot component with isError prop
+function Slot(props: ExtendedSlotProps) {
+  return (
+    <div
+      className={cn(
+        "flex size-9 items-center justify-center rounded-lg border border-input bg-background font-medium text-foreground shadow-sm shadow-primary/5 transition-shadow w-12 h-12",
+        {
+          "z-10 border ring-[3px] ring-ring border-primary/40":
+            props.isActive && !props.isError,
+          "z-10 border border-danger ring-[3px] ring-red-200/50":
+            props.isActive && props.isError,
+        },
+        { "border-danger": props.isError },
+      )}
+      onKeyDown={props.onKeyDown}
+    >
+      {props.char !== null && (
+        <div>{props.isVisible ? props.char : "•"}</div>
+      )}
+    </div>
+  );
+}
+
+export { OTPInputComponent };

package/src/components/ui/platform-specific-behavior.tsx

@@ -0,0 +1,28 @@
+import { usePlatform } from "@/hooks/use-platform";
+import { useTheme } from "@/contexts/ThemeContext";
+import { cn } from "@/utils/cn";
+
+interface PlatformSpecificBehaviorProps {
+  className?: string;
+}
+
+export function PlatformSpecificBehavior({ className }: PlatformSpecificBehaviorProps) {
+  const { platform, isMobile, isNativeSDK } = usePlatform();
+  const { theme } = useTheme();
+  
+  return (
+    <div className={cn("p-4 rounded-lg border", className)}>
+      <div className="text-sm font-medium">
+        <p>Current Platform: <span className="font-bold">{platform}</span></p>
+        <p>Theme: <span className="font-bold">{theme}</span></p>
+        
+        {isNativeSDK && (
+          <div className="mt-2 p-2 bg-primary/10 rounded">
+            <p>Native SDK behaviors enabled!</p>
+            {isMobile && <p>Using mobile-optimized UI elements</p>}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+} 

package/src/components/ui/popover.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

package/src/components/ui/progress.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { motion } from "framer-motion";
+
+interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+  value: number;
+  max: number;
+  className?: string;
+  barClassName?: string;
+  barColor?: string;
+}
+
+export function LinearProgress({
+  value,
+  max,
+  className,
+  barClassName,
+  barColor = "#00b2c1",
+  ...props
+}: ProgressProps) {
+  const percentage = (value / max) * 100;
+
+  return (
+    <div
+      className={cn("w-full h-2 bg-gray-200 rounded-full overflow-hidden", className)}
+      {...props}
+    >
+      <motion.div
+        className={cn("h-full", barClassName)}
+        style={{ 
+          background: barColor,
+          width: `${percentage}%`
+        }}
+        initial={{ width: 0 }}
+        animate={{ width: `${percentage}%` }}
+        transition={{ duration: 0.5, ease: "easeInOut" }}
+      />
+    </div>
+  );
+}
+
+interface StepProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+  steps: number;
+  currentStep: number;
+  className?: string;
+  stepClassName?: string;
+  activeStepClassName?: string;
+  completedStepClassName?: string;
+  connectorClassName?: string;
+  activeConnectorClassName?: string;
+  completedConnectorClassName?: string;
+}
+
+export function StepProgress({
+  steps,
+  currentStep,
+  className,
+  stepClassName,
+  activeStepClassName,
+  completedStepClassName,
+  connectorClassName,
+  activeConnectorClassName,
+  completedConnectorClassName,
+  ...props
+}: StepProgressProps) {
+  return (
+    <div
+      className={cn("flex items-center w-full", className)}
+      {...props}
+    >
+      {Array.from({ length: steps }).map((_, index) => {
+        const isCompleted = index < currentStep - 1;
+        const isActive = index === currentStep - 1;
+        
+        return (
+          <React.Fragment key={index}>
+            <div 
+              className={cn(
+                "w-4 h-4 rounded-full bg-gray-300 flex-shrink-0",
+                isActive && cn("bg-primary", activeStepClassName),
+                isCompleted && cn("bg-primary", completedStepClassName),
+                stepClassName
+              )}
+            />
+            
+            {index < steps - 1 && (
+              <div 
+                className={cn(
+                  "h-1 flex-grow bg-gray-300",
+                  isActive && cn("bg-primary", activeConnectorClassName),
+                  isCompleted && cn("bg-primary", completedConnectorClassName),
+                  connectorClassName
+                )}
+              />
+            )}
+          </React.Fragment>
+        );
+      })}
+    </div>
+  );
+} 

package/src/components/ui/radio-group.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return <RadioGroupPrimitive.Root className={cn("grid gap-3", className)} {...props} ref={ref} />;
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square size-4 rounded-full border border-input shadow-sm shadow-black/5 outline-offset-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring/70 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+        className,
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center text-current">
+        <svg
+          width="6"
+          height="6"
+          viewBox="0 0 6 6"
+          fill="currentcolor"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle cx="3" cy="3" r="3" />
+        </svg>
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+export { RadioGroup, RadioGroupItem };