@m5kdev/web-ui 0.1.3 → 0.1.5

package/dist/src/modules/auth/components/OrganizationSwitcher.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Select, SelectItem } from "@heroui/react";
+import { authClient } from "@m5kdev/frontend/modules/auth/auth.lib";
+import { useSession } from "@m5kdev/frontend/modules/auth/hooks/useSession";
+import { useQuery } from "@tanstack/react-query";
+import { Building2 } from "lucide-react";
+import { useCallback, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router";
+import { toast } from "sonner";
+import { useSidebar } from "#components/ui/sidebar";
+import { cn } from "#utils";
+export function OrganizationSwitcher({ onInvalidateScopedQueries, managerRoles = ["admin", "owner"], managerPath = "/organization/members", fallbackPath = "/", }) {
+    const { t } = useTranslation();
+    const { data: session, registerSession } = useSession();
+    const { open } = useSidebar();
+    const [isSwitching, setIsSwitching] = useState(false);
+    const activeOrganizationId = session?.session.activeOrganizationId ?? null;
+    const activeOrganizationRole = session?.session?.activeOrganizationRole ??
+        "";
+    const managerRoleSet = useMemo(() => new Set(managerRoles), [managerRoles]);
+    const canManageOrganization = managerRoleSet.has(activeOrganizationRole);
+    const { data: organizations = [], isError, error, refetch, } = useQuery({
+        queryKey: ["auth-organization-list"],
+        queryFn: async () => {
+            const { data, error } = await authClient.organization.list();
+            if (error) {
+                throw new Error(error.message ?? t("web-ui:organization.switcher.failedToLoadOrganizations"));
+            }
+            return (data ?? []);
+        },
+    });
+    const handleSwitchOrganization = useCallback(async (organizationId) => {
+        if (!organizationId || organizationId === activeOrganizationId || isSwitching) {
+            return;
+        }
+        try {
+            setIsSwitching(true);
+            const { error } = await authClient.organization.setActive({ organizationId });
+            if (error) {
+                throw new Error(error.message ?? t("web-ui:organization.switcher.failedToSwitchOrganization"));
+            }
+            registerSession(() => {
+                void onInvalidateScopedQueries?.();
+            });
+            toast.success(t("web-ui:organization.switcher.organizationSwitched"));
+        }
+        catch (error) {
+            toast.error(error instanceof Error
+                ? error.message
+                : t("web-ui:organization.switcher.failedToSwitchOrganization"));
+        }
+        finally {
+            setIsSwitching(false);
+        }
+    }, [activeOrganizationId, isSwitching, onInvalidateScopedQueries, registerSession, t]);
+    if (!open) {
+        return (_jsx(Button, { as: Link, to: canManageOrganization ? managerPath : fallbackPath, variant: "light", size: "sm", isIconOnly: true, "aria-label": t("web-ui:organization.switcher.label"), children: _jsx(Building2, { className: "h-4 w-4" }) }));
+    }
+    if (isError) {
+        return (_jsxs("div", { className: "mb-4 flex flex-col gap-2", children: [_jsx("p", { className: "text-sm text-destructive", children: error instanceof Error
+                        ? error.message
+                        : t("web-ui:organization.switcher.failedToLoadOrganizations") }), _jsx(Button, { size: "sm", variant: "flat", onPress: () => void refetch(), children: t("web-ui:organization.switcher.retry") })] }));
+    }
+    return (_jsx("div", { className: "mb-4", children: _jsx(Select, { size: "sm", label: t("web-ui:organization.switcher.label"), selectedKeys: activeOrganizationId ? [activeOrganizationId] : [], disallowEmptySelection: true, isDisabled: isSwitching || organizations.length === 0, onSelectionChange: (keys) => {
+                const selectedOrganizationId = Array.from(keys)[0];
+                if (selectedOrganizationId) {
+                    void handleSwitchOrganization(selectedOrganizationId);
+                }
+            }, classNames: {
+                trigger: cn("min-h-10"),
+                value: cn("text-sm"),
+            }, children: organizations.map((organization) => (_jsx(SelectItem, { children: organization.name }, organization.id))) }) }));
+}

package/dist/src/modules/auth/components/ProfileRoute.d.ts

@@ -0,0 +1 @@
+export declare function ProfileRoute(): import("react/jsx-runtime").JSX.Element;

package/dist/src/modules/auth/components/ProfileRoute.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Card, CardBody, CardHeader, Input } from "@heroui/react";
+import { authClient } from "@m5kdev/frontend/modules/auth/auth.lib";
+import { useSession } from "@m5kdev/frontend/modules/auth/hooks/useSession";
+import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import { z } from "zod";
+import { AvatarUpload } from "#components/AvatarUpload";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage, } from "#components/ui/form";
+const profileSchema = z.object({
+    name: z.string().min(2, "Name must be at least 2 characters"),
+    image: z.string().nullable(),
+});
+export function ProfileRoute() {
+    const { t } = useTranslation();
+    const { data: session } = useSession();
+    const form = useForm({
+        defaultValues: {
+            name: session?.user?.name || "",
+            image: session?.user?.image || null,
+        },
+    });
+    function onSubmit(data) {
+        authClient
+            .updateUser(data)
+            .then(() => {
+            toast.success(t("web-ui:profile.updated"), {
+                description: t("web-ui:profile.updateDescription"),
+            });
+        })
+            .catch(() => {
+            toast.error(t("web-ui:profile.error"), {
+                description: t("web-ui:profile.errorDescription"),
+            });
+        });
+    }
+    return (_jsx("div", { className: "container py-10 px-4", children: _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-col gap-1", children: [_jsx("p", { className: "text-xl font-semibold", children: t("web-ui:profile.settings.title") }), _jsx("p", { className: "text-sm text-default-600", children: t("web-ui:profile.settings.description") })] }), _jsx(CardBody, { children: _jsx(Form, { ...form, children: _jsxs("form", { onSubmit: form.handleSubmit(onSubmit), className: "space-y-6", children: [_jsx("div", { className: "flex justify-center", children: _jsx(FormField, { control: form.control, name: "image", render: ({ field }) => (_jsxs(FormItem, { children: [_jsx(FormControl, { children: _jsx(AvatarUpload, { currentAvatarUrl: field.value, onUploadComplete: (url) => {
+                                                            console.log(url);
+                                                            field.onChange(url);
+                                                        } }) }), _jsx(FormMessage, {})] })) }) }), _jsx(FormField, { control: form.control, name: "name", render: ({ field }) => (_jsxs(FormItem, { children: [_jsx(FormLabel, { children: "Name" }), _jsx(FormControl, { children: _jsx(Input, { placeholder: t("web-ui:profile.placeholders.name"), ...field }) }), _jsx(FormMessage, {})] })) }), _jsx(Button, { type: "submit", children: "Save Changes" })] }) }) })] }) }));
+}

package/dist/src/modules/auth/components/RangeNuqsDatePicker.d.ts

@@ -0,0 +1,31 @@
+export interface RangeNuqsDatePickerProps {
+    /**
+     * The column ID to use for the date filter (e.g., "startedAt")
+     */
+    columnId?: string;
+    /**
+     * The end column ID for range filters (e.g., "endedAt")
+     */
+    endColumnId?: string;
+    /**
+     * Label for the date range picker
+     */
+    dateRangeLabel?: string;
+    /**
+     * Label for the quick range selector
+     */
+    quickRangeLabel?: string;
+    /**
+     * Translation namespace for i18n
+     */
+    translationNamespace?: string;
+    /**
+     * Whether to show quick range selector
+     */
+    showQuickRange?: boolean;
+    /**
+     * Custom className for the container
+     */
+    className?: string;
+}
+export declare const RangeNuqsDatePicker: ({ columnId, endColumnId, dateRangeLabel, quickRangeLabel, translationNamespace, showQuickRange, className, }: RangeNuqsDatePickerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/modules/auth/components/RangeNuqsDatePicker.js

@@ -0,0 +1,236 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DateRangePicker, Select, SelectItem, } from "@heroui/react";
+import { CalendarDate, getLocalTimeZone, today } from "@internationalized/date";
+import { useNuqsQueryParams } from "@m5kdev/frontend/modules/table/hooks/useNuqsQueryParams";
+import { calendarDateToEndOfDayUTC, calendarDateToUTC, dateFilterToRangeValue, } from "@m5kdev/web-ui/modules/table/filterTransformers";
+import { DateTime } from "luxon";
+import { useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+const toCalendarDate = (dt) => new CalendarDate(dt.year, dt.month, dt.day);
+const isSameCalendarDate = (a, b) => a.year === b.year && a.month === b.month && a.day === b.day;
+export const RangeNuqsDatePicker = ({ columnId = "startedAt", endColumnId = "endedAt", dateRangeLabel, quickRangeLabel, translationNamespace = "horecaai-app", showQuickRange = true, className, }) => {
+    const { t } = useTranslation();
+    const { filters, setFilters } = useNuqsQueryParams();
+    const [quickRange, setQuickRange] = useState(null);
+    const [hasInitialized, setHasInitialized] = useState(false);
+    // Extract date range from filters using shared helper
+    const dateRange = useMemo(() => {
+        return dateFilterToRangeValue(filters, columnId);
+    }, [filters, columnId]);
+    const todayIso = DateTime.utc().toISODate();
+    const quickRangeOptions = useMemo(() => {
+        const now = DateTime.utc();
+        const todayStart = now.startOf("day");
+        const weekStart = todayStart.startOf("week");
+        const monthStart = todayStart.startOf("month");
+        const lastWeekStart = weekStart.minus({ weeks: 1 });
+        const lastMonthStart = monthStart.minus({ months: 1 });
+        const yearStart = todayStart.startOf("year");
+        const lastYearStart = yearStart.minus({ years: 1 });
+        const options = [
+            {
+                key: "today",
+                label: t(`${translationNamespace}:reports.quickRange.today`, { defaultValue: "Today" }),
+                start: todayStart,
+                end: todayStart,
+            },
+            {
+                key: "yesterday",
+                label: t(`${translationNamespace}:reports.quickRange.yesterday`, {
+                    defaultValue: "Yesterday",
+                }),
+                start: todayStart.minus({ days: 1 }),
+                end: todayStart.minus({ days: 1 }),
+            },
+            {
+                key: "last7",
+                label: t(`${translationNamespace}:reports.quickRange.last7`, {
+                    defaultValue: "Last 7 days",
+                }),
+                start: todayStart.minus({ days: 6 }),
+                end: todayStart,
+            },
+            {
+                key: "last30",
+                label: t(`${translationNamespace}:reports.quickRange.last30`, {
+                    defaultValue: "Last 30 days",
+                }),
+                start: todayStart.minus({ days: 29 }),
+                end: todayStart,
+            },
+            {
+                key: "thisWeek",
+                label: t(`${translationNamespace}:reports.quickRange.thisWeek`, {
+                    defaultValue: "This week",
+                }),
+                start: weekStart,
+                end: todayStart,
+            },
+            {
+                key: "lastWeek",
+                label: t(`${translationNamespace}:reports.quickRange.lastWeek`, {
+                    defaultValue: "Last week",
+                }),
+                start: lastWeekStart,
+                end: lastWeekStart.plus({ days: 6 }),
+            },
+            {
+                key: "thisMonth",
+                label: t(`${translationNamespace}:reports.quickRange.thisMonth`, {
+                    defaultValue: "This month",
+                }),
+                start: monthStart,
+                end: todayStart,
+            },
+            {
+                key: "lastMonth",
+                label: t(`${translationNamespace}:reports.quickRange.lastMonth`, {
+                    defaultValue: "Last month",
+                }),
+                start: lastMonthStart,
+                end: lastMonthStart.endOf("month"),
+            },
+            {
+                key: "thisYear",
+                label: t(`${translationNamespace}:reports.quickRange.thisYear`, {
+                    defaultValue: "This year",
+                }),
+                start: yearStart,
+                end: todayStart,
+            },
+            {
+                key: "lastYear",
+                label: t(`${translationNamespace}:reports.quickRange.lastYear`, {
+                    defaultValue: "Last year",
+                }),
+                start: lastYearStart,
+                end: lastYearStart.endOf("year"),
+            },
+        ];
+        return options.map((opt) => ({
+            key: opt.key,
+            label: opt.label,
+            range: {
+                start: toCalendarDate(opt.start),
+                end: toCalendarDate(opt.end),
+            },
+        }));
+    }, [t, todayIso, translationNamespace]);
+    // Set default to "this month" on initial load if no date range is set
+    useEffect(() => {
+        if (hasInitialized || !setFilters)
+            return;
+        // Check if there's already a valid date range from URL
+        if (dateRange) {
+            setHasInitialized(true);
+            return;
+        }
+        // No date range set, initialize to "this month"
+        const thisMonthOption = quickRangeOptions.find((opt) => opt.key === "thisMonth");
+        if (thisMonthOption) {
+            setHasInitialized(true);
+            setQuickRange("thisMonth");
+            // Set filters directly for "this month" range
+            const startDate = thisMonthOption.range.start;
+            const endDate = thisMonthOption.range.end;
+            const newFilters = [
+                ...(filters?.filter((f) => f.columnId !== columnId && f.columnId !== endColumnId) ?? []),
+                {
+                    columnId,
+                    type: "date",
+                    method: "intersect",
+                    value: calendarDateToUTC(startDate),
+                    valueTo: calendarDateToEndOfDayUTC(endDate),
+                    endColumnId,
+                },
+            ];
+            setFilters(newFilters);
+        }
+    }, [dateRange, columnId, endColumnId, quickRangeOptions, hasInitialized, setFilters]);
+    useEffect(() => {
+        // Don't sync quickRange if we're still initializing
+        if (!hasInitialized)
+            return;
+        if (!dateRange?.start || !dateRange?.end) {
+            setQuickRange(null);
+            return;
+        }
+        const start = dateRange.start;
+        const end = dateRange.end;
+        const matches = quickRangeOptions.filter((option) => isSameCalendarDate(option.range.start, start) && isSameCalendarDate(option.range.end, end));
+        if (matches.length === 0) {
+            setQuickRange(null);
+            return;
+        }
+        // If the current quick range still matches, keep it
+        const currentStillMatches = quickRange ? matches.find((m) => m.key === quickRange) : null;
+        if (currentStillMatches) {
+            return;
+        }
+        // Otherwise pick the highest-priority match to keep intent (week/month over last7 overlap)
+        const priority = [
+            "today",
+            "yesterday",
+            "thisWeek",
+            "lastWeek",
+            "thisMonth",
+            "lastMonth",
+            "last7",
+            "last30",
+        ];
+        const preferred = priority.map((key) => matches.find((m) => m.key === key)).find((m) => Boolean(m)) ??
+            matches[0];
+        setQuickRange(preferred?.key ?? null);
+    }, [dateRange, quickRangeOptions, quickRange, hasInitialized]);
+    // Handle date range changes
+    const handleDateRangeChange = (range) => {
+        if (!setFilters)
+            return;
+        if (!range?.start || !range?.end) {
+            // Remove date filters
+            const newFilters = filters?.filter((f) => f.columnId !== columnId && f.columnId !== endColumnId) ?? [];
+            setFilters(newFilters);
+            return;
+        }
+        // Use intersect to find records where [startedAt, endedAt] overlaps with the selected range
+        // This includes ongoing records (endedAt = NULL) and records that overlap the range
+        const startDate = range.start;
+        const endDate = range.end;
+        const newFilters = [
+            ...(filters?.filter((f) => f.columnId !== columnId && f.columnId !== endColumnId) ?? []),
+            {
+                columnId,
+                type: "date",
+                method: "intersect",
+                value: calendarDateToUTC(startDate),
+                valueTo: calendarDateToEndOfDayUTC(endDate),
+                endColumnId,
+            },
+        ];
+        setFilters(newFilters);
+    };
+    const handleQuickRangeChange = (key) => {
+        if (!key) {
+            setQuickRange(null);
+            return;
+        }
+        const option = quickRangeOptions.find((opt) => opt.key === key);
+        if (!option)
+            return;
+        setQuickRange(key);
+        handleDateRangeChange({
+            start: option.range.start,
+            end: option.range.end,
+        });
+    };
+    return (_jsxs("div", { className: `flex gap-4 flex-row ${className ?? ""}`, children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("span", { className: "text-sm text-muted-foreground", children: dateRangeLabel ??
+                            t(`${translationNamespace}:reports.dateRange`, { defaultValue: "Date range" }) }), _jsx(DateRangePicker, { value: dateRange ?? undefined, onChange: handleDateRangeChange, className: "w-[300px]", granularity: "day", showMonthAndYearPickers: true, maxValue: today(getLocalTimeZone()), popoverProps: {
+                            portalContainer: document.body,
+                            disableAnimation: true,
+                        } })] }), showQuickRange && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("span", { className: "text-sm text-muted-foreground", children: quickRangeLabel ??
+                            t(`${translationNamespace}:reports.quickRange.label`, {
+                                defaultValue: "Quick range",
+                            }) }), _jsx(Select, { selectedKeys: quickRange ? [quickRange] : [], onChange: (e) => handleQuickRangeChange(e.target.value ?? null), className: "w-[300px]", popoverProps: {
+                            portalContainer: document.body,
+                        }, children: quickRangeOptions.map((option) => (_jsx(SelectItem, { children: option.label }, option.key))) })] }))] }));
+};

package/dist/src/modules/auth/components/ResetPasswordForm.d.ts

@@ -0,0 +1 @@
+export declare function ResetPasswordForm(): import("react/jsx-runtime").JSX.Element;

package/dist/src/modules/auth/components/ResetPasswordForm.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Card, CardBody, CardHeader, Input } from "@heroui/react";
+import { authClient } from "@m5kdev/frontend/modules/auth/auth.lib";
+import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { Link, useSearchParams } from "react-router";
+import { toast } from "sonner";
+export function ResetPasswordForm() {
+    const { t } = useTranslation();
+    const { register, handleSubmit, setError, formState: { errors }, } = useForm();
+    const [searchParams] = useSearchParams();
+    const token = searchParams.get("token");
+    const onSubmit = (data) => {
+        if (data.password !== data.confirmPassword) {
+            setError("confirmPassword", { message: t("web-ui:auth.resetPassword.passwordMismatch") });
+            return;
+        }
+        if (!token) {
+            throw new Error(t("web-ui:auth.resetPassword.tokenRequired"));
+        }
+        authClient
+            .resetPassword({
+            newPassword: data.password,
+            token,
+        })
+            .then(() => {
+            toast.success(t("web-ui:auth.resetPassword.success"));
+            // Optionally, redirect
+        })
+            .catch(() => {
+            toast.error(t("web-ui:auth.resetPassword.error"));
+        });
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsxs(Card, { children: [_jsxs(CardHeader, { className: "text-center flex flex-col gap-1", children: [_jsx("h2", { className: "text-xl font-semibold", children: t("web-ui:auth.resetPassword.title") }), _jsx("p", { className: "text-sm text-default-600", children: t("web-ui:auth.resetPassword.description") })] }), _jsx(CardBody, { className: "gap-6", children: _jsxs("form", { onSubmit: handleSubmit(onSubmit), className: "grid gap-6", children: [_jsxs("div", { className: "grid gap-2", children: [_jsx(Input, { labelPlacement: "outside", label: t("web-ui:auth.resetPassword.newPassword"), placeholder: t("web-ui:auth.resetPassword.newPassword"), type: "password", variant: "bordered", isRequired: true, ...register("password", {
+                                                required: t("web-ui:auth.resetPassword.passwordRequired"),
+                                            }) }), errors.password && (_jsx("span", { className: "text-red-500 text-xs", children: errors.password.message }))] }), _jsxs("div", { className: "grid gap-2", children: [_jsx(Input, { labelPlacement: "outside", label: t("web-ui:auth.resetPassword.confirmPassword"), placeholder: t("web-ui:auth.resetPassword.confirmPassword"), type: "password", variant: "bordered", isRequired: true, ...register("confirmPassword", {
+                                                required: t("web-ui:auth.resetPassword.confirmPasswordRequired"),
+                                            }) }), errors.confirmPassword && (_jsx("span", { className: "text-red-500 text-xs", children: errors.confirmPassword.message }))] }), _jsx(Button, { type: "submit", className: "w-full", color: "primary", children: t("web-ui:auth.resetPassword.button") })] }) })] }), _jsxs("div", { className: "text-center text-xs text-muted-foreground", children: [t("web-ui:auth.forgotPassword.rememberPassword"), " ", _jsx(Link, { to: "/login", className: "underline underline-offset-4 hover:text-primary", children: t("web-ui:auth.login.button") })] })] }));
+}

package/dist/src/modules/auth/components/ResetPasswordRoute.d.ts

@@ -0,0 +1 @@
+export declare function ResetPasswordRoute(): import("react/jsx-runtime").JSX.Element;

package/dist/src/modules/auth/components/ResetPasswordRoute.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, CardBody, CardHeader } from "@heroui/react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router";
+import { ResetPasswordForm } from "#modules/auth/components/ResetPasswordForm";
+export function ResetPasswordRoute() {
+    const { t } = useTranslation();
+    return (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsxs(Card, { children: [_jsxs(CardHeader, { className: "text-center flex flex-col gap-1", children: [_jsx("h2", { className: "text-xl font-semibold", children: t("web-ui:auth.resetPassword.title") }), _jsx("p", { className: "text-sm text-default-600", children: t("web-ui:auth.resetPassword.description") })] }), _jsx(CardBody, { children: _jsx(ResetPasswordForm, {}) })] }), _jsxs("div", { className: "text-center text-xs text-muted-foreground", children: [t("web-ui:auth.forgotPassword.rememberPassword"), " ", _jsx(Link, { to: "/login", className: "underline underline-offset-4 hover:text-primary", children: t("web-ui:auth.login.button") })] })] }));
+}

package/dist/src/modules/auth/components/SignupFormRoute.d.ts

@@ -0,0 +1,5 @@
+export declare function SignupForm({ code, email, waitlist, }: {
+    code?: string | null;
+    email?: string | null;
+    waitlist?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/src/modules/auth/components/SignupFormRoute.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Alert, Button, Input } from "@heroui/react";
+import { authClient } from "@m5kdev/frontend/modules/auth/auth.lib";
+import { useSession } from "@m5kdev/frontend/modules/auth/hooks/useSession";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router";
+import { toast } from "sonner";
+function getEmailProviderUrl(email) {
+    const domain = email.split("@")[1]?.toLowerCase();
+    if (!domain)
+        return null;
+    const EMAIL_URLS = {
+        GMAIL: "https://mail.google.com/mail/u/0/#inbox",
+        OUTLOOK: "https://outlook.live.com/mail/0/inbox",
+        YAHOO: "https://mail.yahoo.com",
+        ICLOUD: "https://www.icloud.com/mail",
+        PROTON: "https://mail.proton.me",
+    };
+    const domainMap = {
+        "gmail.com": EMAIL_URLS.GMAIL,
+        "googlemail.com": EMAIL_URLS.GMAIL,
+        "outlook.com": EMAIL_URLS.OUTLOOK,
+        "hotmail.com": EMAIL_URLS.OUTLOOK,
+        "live.com": EMAIL_URLS.OUTLOOK,
+        "msn.com": EMAIL_URLS.OUTLOOK,
+        "yahoo.com": EMAIL_URLS.YAHOO,
+        "yahoo.co.uk": EMAIL_URLS.YAHOO,
+        "yahoo.fr": EMAIL_URLS.YAHOO,
+        "ymail.com": EMAIL_URLS.YAHOO,
+        "icloud.com": EMAIL_URLS.ICLOUD,
+        "me.com": EMAIL_URLS.ICLOUD,
+        "mac.com": EMAIL_URLS.ICLOUD,
+        "protonmail.com": EMAIL_URLS.PROTON,
+        "proton.me": EMAIL_URLS.PROTON,
+    };
+    return domainMap[domain] || null;
+}
+export function SignupForm({ code, email, waitlist, }) {
+    const { t } = useTranslation();
+    const [status, setStatus] = useState("start");
+    const [userEmail, setUserEmail] = useState(email || "");
+    const { registerSession } = useSession();
+    const navigate = useNavigate();
+    const { register, handleSubmit, formState: { errors }, } = useForm();
+    const onSubmit = (data) => {
+        console.log(data);
+        setStatus("busy");
+        setUserEmail(data.email);
+        authClient.signUp
+            .email({
+            name: data.email,
+            email: data.email,
+            password: data.password,
+        }, {
+            headers: {
+                "Waitlist-Invitation-Code": code || "",
+            },
+        })
+            .then((result) => {
+            console.log(result);
+            if (result.error) {
+                toast.error(t("web-ui:auth.errors.invitationCodeInvalid"));
+                setStatus("start");
+                return;
+            }
+            if (waitlist) {
+                authClient.signIn
+                    .email({
+                    email: data.email,
+                    password: data.password,
+                })
+                    .then((res) => {
+                    console.log(res);
+                    if (res.data?.user) {
+                        registerSession(() => {
+                            navigate("/");
+                        });
+                    }
+                    else if (res.error) {
+                        toast.error(t("web-ui:auth.errors.authentication"), {
+                            description: res.error.message,
+                        });
+                    }
+                })
+                    .catch((error) => {
+                    toast.error(t("web-ui:auth.errors.server"), {
+                        description: error.message,
+                    });
+                });
+            }
+            else
+                setStatus("done");
+        })
+            .catch((error) => {
+            toast.error(error.message);
+            setStatus("start");
+        });
+    };
+    if (status === "done") {
+        const emailProviderUrl = userEmail ? getEmailProviderUrl(userEmail) : null;
+        return (_jsx(Alert, { color: "primary", variant: "faded", title: t("web-ui:auth.signup.verificationEmailSent.title"), children: _jsxs("div", { className: "mt-2", children: [t("web-ui:auth.signup.verificationEmailSent.description"), emailProviderUrl && (_jsx("div", { className: "mt-3", children: _jsx("a", { href: emailProviderUrl, target: "_blank", rel: "noopener noreferrer", className: "font-medium underline underline-offset-4 hover:opacity-80 transition-opacity", children: t("web-ui:auth.signup.verificationEmailSent.openEmail") }) }))] }) }));
+    }
+    return (_jsxs("form", { onSubmit: handleSubmit(onSubmit), className: "grid gap-6", children: [_jsxs("div", { className: "grid gap-2", children: [_jsx(Input, { labelPlacement: "outside", label: t("web-ui:auth.login.email"), type: "email", placeholder: t("web-ui:auth.login.placeholder.email"), variant: "bordered", isRequired: true, isDisabled: !!email, defaultValue: email ?? "", ...register("email", { required: true }) }), errors.email && (_jsx("span", { className: "text-red-500 text-xs", children: t("web-ui:auth.signup.emailRequired") }))] }), _jsxs("div", { className: "grid gap-2", children: [_jsx(Input, { labelPlacement: "outside", label: t("web-ui:auth.login.password"), placeholder: t("web-ui:auth.login.password"), type: "password", variant: "bordered", isRequired: true, ...register("password", { required: true }) }), errors.password && (_jsx("span", { className: "text-red-500 text-xs", children: t("web-ui:auth.signup.passwordRequired") }))] }), _jsx(Button, { type: "submit", className: "w-full", color: "primary", isDisabled: status === "busy", children: status === "busy" ? t("web-ui:auth.signup.signingUp") : t("web-ui:auth.signup.button") })] }));
+}

package/dist/src/modules/auth/components/SignupRoute.d.ts

@@ -0,0 +1,7 @@
+import type { UseBackendTRPC } from "#types";
+interface SignupRouteProps {
+    providers?: string[];
+    useTRPC?: UseBackendTRPC;
+}
+export declare function SignupRoute({ providers, useTRPC }: SignupRouteProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/modules/auth/components/SignupRoute.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, CardBody, CardHeader } from "@heroui/react";
+import { useQueryState } from "nuqs";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router";
+import { SignupForm } from "#modules/auth/components/SignupFormRoute";
+import { AuthProviders } from "./AuthProviders";
+import { WaitlistCard } from "./WaitlistCard";
+import { WaitlistCodeValidation } from "./WaitlistCodeValidation";
+export function SignupRoute({ providers, useTRPC }) {
+    const { t } = useTranslation();
+    const [code] = useQueryState("code");
+    const [email] = useQueryState("email");
+    const hasWaitlist = !!useTRPC;
+    return (_jsxs("div", { className: "flex flex-col gap-6", children: [hasWaitlist && !code ? (_jsx(WaitlistCard, { useTRPC: useTRPC })) : (_jsxs(Card, { children: [_jsxs(CardHeader, { className: "text-center flex flex-col gap-1", children: [_jsx("p", { className: "text-xl font-semibold", children: t("web-ui:auth.signup.createAccount") }), _jsx("p", { className: "text-sm text-default-600", children: t("web-ui:auth.signup.description") })] }), _jsx(CardBody, { children: _jsxs("div", { className: "grid gap-6", children: [hasWaitlist && code && useTRPC && (_jsx(WaitlistCodeValidation, { code: code, useTRPC: useTRPC })), _jsx(AuthProviders, { providers: providers, code: code, requestSignUp: true }), _jsx(SignupForm, { code: code, email: email, waitlist: hasWaitlist })] }) })] })), _jsxs("div", { className: "text-center text-xs text-muted-foreground", children: [t("web-ui:auth.signup.alreadyHaveAccount"), " ", _jsx(Link, { to: "/login", className: "underline underline-offset-4 hover:text-primary", children: t("web-ui:auth.login.button") })] })] }));
+}

package/dist/src/modules/auth/components/UserPreferences.d.ts

@@ -0,0 +1,30 @@
+import type { ReactElement } from "react";
+import type { z } from "zod";
+type UpdatePreferencesOptions = {
+    noOptimisticUpdate?: boolean;
+    onSuccess?: () => void;
+    onError?: (error: unknown) => void;
+};
+interface ControlDefinition {
+    label: string;
+    element: "switch" | "select" | "number";
+    options?: {
+        label: string;
+        value: string;
+    }[];
+    min?: number;
+    max?: number;
+    step?: number;
+}
+type ControlsFor<Preferences> = {
+    [K in keyof Preferences]: ControlDefinition;
+};
+export declare function UserPreferences<S extends z.ZodObject<z.ZodRawShape>>({ schema, controls, preferences, isLoading, isPending, updatePreferences, }: {
+    schema: S;
+    controls: ControlsFor<z.infer<S>>;
+    preferences: z.infer<S>;
+    isLoading: boolean;
+    isPending: boolean;
+    updatePreferences: (partialPreferences: Partial<z.infer<S>>, options: UpdatePreferencesOptions) => void;
+}): ReactElement;
+export {};