+
+
Naplata
-
-
{prompt}
- {children}
+
+
{title}
+ {children}
+
{footer}
+
);
diff --git a/web/src/components/motion/animated-toast-stack.tsx b/web/src/components/motion/animated-toast-stack.tsx
deleted file mode 100644
index cf4979d..0000000
--- a/web/src/components/motion/animated-toast-stack.tsx
+++ /dev/null
@@ -1,505 +0,0 @@
-"use client";
-
-import {
- AlertCircle,
- Bell,
- Check,
- Info,
- LoaderCircle,
- X,
- type LucideIcon,
-} from "lucide-react";
-import {
- AnimatePresence,
- motion,
- useReducedMotion,
- type Transition,
-} from "motion/react";
-import {
- memo,
- useCallback,
- useEffect,
- useMemo,
- useRef,
- useState,
- type ReactNode,
-} from "react";
-import { createPortal } from "react-dom";
-import { EASE_OUT } from "@/lib/ease";
-import { cn } from "@/lib/utils";
-
-export type ToastStatus = "neutral" | "info" | "loading" | "success" | "error";
-export type ToastPosition =
- | "top-left"
- | "top-center"
- | "top-right"
- | "bottom-left"
- | "bottom-center"
- | "bottom-right";
-
-export type AnimatedToastAction = {
- label: ReactNode;
- onClick: (toast: AnimatedToast) => void;
-};
-
-export type AnimatedToast = {
- id: string;
- title: ReactNode;
- description?: ReactNode;
- status?: ToastStatus;
- icon?: ReactNode;
- action?: AnimatedToastAction;
- duration?: number;
- dismissible?: boolean;
- createdAt?: number;
-};
-
-export type ToastInput = Omit
& {
- id?: string;
-};
-
-export type ToastClassNames = {
- root?: string;
- item?: string;
- surface?: string;
- iconWrap?: string;
- content?: string;
- title?: string;
- description?: string;
- action?: string;
- close?: string;
- progress?: string;
-};
-
-export interface AnimatedToastStackProps {
- toasts: AnimatedToast[];
- onDismiss?: (id: string) => void;
- position?: ToastPosition;
- placement?: "static" | "fixed" | "absolute";
- fixed?: boolean;
- portal?: boolean;
- portalRoot?: Element | null;
- maxVisible?: number;
- className?: string;
- classNames?: ToastClassNames;
- icons?: Partial>;
- renderToast?: (toast: AnimatedToast) => ReactNode;
-}
-
-export interface UseAnimatedToastStackOptions {
- initialToasts?: ToastInput[];
- defaultDuration?: number;
- limit?: number;
-}
-
-const STACK_SPRING: Transition = {
- type: "spring",
- stiffness: 420,
- damping: 34,
- mass: 0.75,
-};
-
-const CONTENT_TRANSITION = {
- duration: 0.28,
- ease: EASE_OUT,
-} as const;
-
-const STATUS_ICON: Record = {
- neutral: Bell,
- info: Info,
- loading: LoaderCircle,
- success: Check,
- error: AlertCircle,
-};
-
-const STATUS_CLASS: Record = {
- neutral: "text-muted-foreground bg-muted/60",
- info: "text-primary bg-muted",
- loading: "text-primary bg-muted",
- success: "text-emerald-600 bg-emerald-500/10 dark:text-emerald-400",
- error: "text-destructive bg-destructive/10",
-};
-
-const POSITION_CLASS: Record = {
- "top-left": "left-4 top-4",
- "top-center": "left-1/2 top-4 -translate-x-1/2",
- "top-right": "right-4 top-4",
- "bottom-left": "bottom-6 left-4",
- "bottom-center": "bottom-6 left-1/2 -translate-x-1/2",
- "bottom-right": "bottom-6 right-4",
-};
-
-let idSeed = 0;
-
-function createToast(input: ToastInput, defaultDuration: number): AnimatedToast {
- return {
- duration: defaultDuration,
- dismissible: true,
- ...input,
- id: input.id ?? `toast-${Date.now()}-${idSeed++}`,
- createdAt: Date.now(),
- };
-}
-
-export function useAnimatedToastStack({
- initialToasts = [],
- defaultDuration = 4200,
- limit,
-}: UseAnimatedToastStackOptions = {}) {
- const toastTimers = useRef>(new Map());
- const [toasts, setToasts] = useState(() =>
- initialToasts.map((toast) => createToast(toast, defaultDuration)),
- );
-
- const dismissToast = useCallback((id: string) => {
- setToasts((current) => current.filter((toast) => toast.id !== id));
- }, []);
-
- const clearToasts = useCallback(() => {
- setToasts([]);
- }, []);
-
- const showToast = useCallback(
- (input: ToastInput) => {
- const toast = createToast(input, defaultDuration);
- setToasts((current) => {
- const next = [...current, toast];
- return typeof limit === "number" ? next.slice(-limit) : next;
- });
- return toast.id;
- },
- [defaultDuration, limit],
- );
-
- const updateToast = useCallback((id: string, patch: Partial) => {
- setToasts((current) =>
- current.map((toast) =>
- toast.id === id
- ? {
- ...toast,
- ...patch,
- id,
- createdAt: patch.duration === undefined ? toast.createdAt : Date.now(),
- }
- : toast,
- ),
- );
- }, []);
-
- useEffect(() => {
- const activeIds = new Set(toasts.map((toast) => toast.id));
-
- toastTimers.current.forEach((entry, id) => {
- if (!activeIds.has(id)) {
- window.clearTimeout(entry.timer);
- toastTimers.current.delete(id);
- }
- });
-
- toasts.forEach((toast) => {
- const duration = toast.duration ?? defaultDuration;
- const existing = toastTimers.current.get(toast.id);
-
- if (duration <= 0) {
- if (existing) {
- window.clearTimeout(existing.timer);
- toastTimers.current.delete(toast.id);
- }
- return;
- }
-
- const createdAt = toast.createdAt ?? Date.now();
- const signature = `${createdAt}:${duration}`;
-
- if (existing?.signature === signature) {
- return;
- }
-
- if (existing) {
- window.clearTimeout(existing.timer);
- }
-
- const elapsed = Date.now() - createdAt;
- const remaining = Math.max(duration - elapsed, 0);
- const timer = window.setTimeout(() => {
- toastTimers.current.delete(toast.id);
- dismissToast(toast.id);
- }, remaining);
-
- toastTimers.current.set(toast.id, { timer, signature });
- });
- }, [defaultDuration, dismissToast, toasts]);
-
- useEffect(() => {
- const timers = toastTimers.current;
-
- return () => {
- timers.forEach((entry) => {
- window.clearTimeout(entry.timer);
- });
- timers.clear();
- };
- }, []);
-
- return useMemo(
- () => ({
- toasts,
- showToast,
- updateToast,
- dismissToast,
- clearToasts,
- setToasts,
- }),
- [clearToasts, dismissToast, showToast, toasts, updateToast],
- );
-}
-
-export function AnimatedToastStack({
- toasts,
- onDismiss,
- position = "bottom-right",
- placement,
- fixed = false,
- portal,
- portalRoot,
- maxVisible = 4,
- className,
- classNames,
- icons,
- renderToast,
-}: AnimatedToastStackProps) {
- const [portalTarget, setPortalTarget] = useState(null);
- const visibleToasts = toasts.slice(-maxVisible);
- const isBottom = position.startsWith("bottom");
- const resolvedPlacement = placement ?? (fixed ? "fixed" : "static");
- const shouldPortal = portal ?? resolvedPlacement === "fixed";
-
- useEffect(() => {
- setPortalTarget(shouldPortal ? (portalRoot ?? document.body) : null);
- }, [portalRoot, shouldPortal]);
-
- const stack = (
-
-
- {visibleToasts.map((toast, index) => (
-
- ))}
-
-
- );
-
- if (shouldPortal && !portalTarget) {
- return null;
- }
-
- if (shouldPortal && portalTarget) {
- return createPortal(stack, portalTarget);
- }
-
- return stack;
-}
-
-const ToastItem = memo(function ToastItem({
- toast,
- index,
- onDismiss,
- classNames,
- icons,
- renderToast,
-}: {
- toast: AnimatedToast;
- index: number;
- onDismiss?: (id: string) => void;
- classNames?: ToastClassNames;
- icons?: Partial>;
- renderToast?: (toast: AnimatedToast) => ReactNode;
-}) {
- const reduce = useReducedMotion();
- const status = toast.status ?? "neutral";
- const Icon = STATUS_ICON[status];
- const iconNode = icons?.[status] ?? toast.icon ?? ;
- const canDismiss = toast.dismissible !== false && Boolean(onDismiss);
- const hasDetails = Boolean(toast.description || toast.action);
-
- return (
- {
- if (!canDismiss || !onDismiss) return;
- if (Math.abs(info.offset.x) > 72 || Math.abs(info.velocity.x) > 520) {
- onDismiss(toast.id);
- }
- }}
- className={cn("pointer-events-auto relative will-change-transform", classNames?.item)}
- style={{ zIndex: 20 - index }}
- >
-
- {renderToast ? (
- renderToast(toast)
- ) : (
-
-
-
-
- {status === "loading" ? (
- {iconNode}
- ) : (
- iconNode
- )}
-
-
-
-
-
-
-
-
- {toast.title}
-
- {toast.description ? (
-
- {toast.description}
-
- ) : null}
-
-
-
- {toast.action ? (
-
- ) : null}
-
-
- {canDismiss ? (
-
- ) : null}
-
- )}
-
-
- {label ? (
-
- ) : null}
-
-
- {leftIcon ? (
-
- {leftIcon}
-
- ) : null}
-
- handleChange(e.target.value)}
- onFocus={(event) => {
- setFocused(true);
- onFocus?.(event);
- }}
- onBlur={(event) => {
- setFocused(false);
- onBlur?.(event);
- }}
- className={cn(
- "peer h-full w-full bg-transparent text-sm leading-6 text-foreground caret-foreground outline-none",
- "placeholder:text-muted-foreground/60",
- leftIcon ? "pl-10" : "pl-3.5",
- rightSlot || success ? "pr-10" : "pr-3.5",
- disabled && "cursor-not-allowed",
- classNames?.input,
- )}
- />
-
- {success ? (
-
-
-
- ) : rightSlot ? (
-
- {rightSlot}
-
- ) : null}
-
-
-
-
- {errorMessage ? (
-
- {errorMessage}
-
- ) : null}
-
-
-
+ {toasts.map((toast) => (
+ -
+
+
+
{toast.title}
+ {toast.description && (
+
{toast.description}
+ )}
+
+ ))}
+
);
}
diff --git a/web/src/components/toast/use-toast.ts b/web/src/components/toast/use-toast.ts
index 9c68acd..55f920a 100644
--- a/web/src/components/toast/use-toast.ts
+++ b/web/src/components/toast/use-toast.ts
@@ -1,13 +1,17 @@
import { createContext, useContext } from "react";
-import type { useAnimatedToastStack } from "@/components/motion/animated-toast-stack";
+export type ToastStatus = "info" | "success" | "error";
-type ToastStack = ReturnType;
+export type ToastInput = {
+ title: string;
+ description?: string;
+ status?: ToastStatus;
+};
-export type ToastContextValue = Pick<
- ToastStack,
- "showToast" | "updateToast" | "dismissToast" | "clearToasts"
->;
+export type ToastContextValue = {
+ showToast: (toast: ToastInput) => void;
+ dismissToast: (id: number) => void;
+};
export const ToastContext = createContext(null);
diff --git a/web/src/components/ui/button.tsx b/web/src/components/ui/button.tsx
new file mode 100644
index 0000000..f3b3215
--- /dev/null
+++ b/web/src/components/ui/button.tsx
@@ -0,0 +1,20 @@
+import type { ButtonHTMLAttributes } from "react";
+
+import { cn } from "@/lib/utils";
+
+export function Button({
+ className,
+ type = "button",
+ ...props
+}: ButtonHTMLAttributes) {
+ return (
+
+ );
+}
diff --git a/web/src/components/ui/checkbox.tsx b/web/src/components/ui/checkbox.tsx
new file mode 100644
index 0000000..f6573e1
--- /dev/null
+++ b/web/src/components/ui/checkbox.tsx
@@ -0,0 +1,27 @@
+import type { ReactNode } from "react";
+import { Check } from "lucide-react";
+
+type CheckboxProps = {
+ label: ReactNode;
+ checked: boolean;
+ error?: boolean;
+ onCheckedChange: (checked: boolean) => void;
+};
+
+export function Checkbox({ label, checked, error, onCheckedChange }: CheckboxProps) {
+ return (
+
+ );
+}
diff --git a/web/src/components/ui/input.tsx b/web/src/components/ui/input.tsx
new file mode 100644
index 0000000..d760d85
--- /dev/null
+++ b/web/src/components/ui/input.tsx
@@ -0,0 +1,49 @@
+import { useId, useState, type InputHTMLAttributes } from "react";
+import { Eye, EyeOff } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+interface InputProps extends InputHTMLAttributes {
+ error?: string;
+}
+
+export function Input({ error, className, id: idProp, type, ...props }: InputProps) {
+ const reactId = useId();
+ const id = idProp ?? reactId;
+ const [revealed, setRevealed] = useState(false);
+ const isPassword = type === "password";
+
+ return (
+
+
+
+ {isPassword && (
+
+ )}
+
+ {error && (
+
+ {error}
+
+ )}
+