@manta-eu/react 0.1.0

package/dist/components/input/phone-input.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getCountryCallingCode, parsePhoneNumberFromString } from "libphonenumber-js";
+import { Check, CheckCircle2, ChevronsUpDown } from "lucide-react";
+import { useEffect, useId, useState } from "react";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "../command/index.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover/index.js";
+import { inputVariants } from "./input-field.js";
+import { cn } from "#style";
+export function PhoneInput(props) {
+    const { countries, value = "", country: countryProp, onChange, disabled, error, label = "Your phone number", required, className, parentClassName, containerClassName, } = props;
+    const defaultId = useId();
+    const inputId = props.id || defaultId;
+    const errorId = useId();
+    const [open, setOpen] = useState(false);
+    const [number, setNumber] = useState(value);
+    const [valid, setValid] = useState(false);
+    const country = countryProp ?? countries[0];
+    const countryIso = country?.iso || "US";
+    useEffect(() => {
+        setNumber(value);
+        if (value) {
+            try {
+                const phone = parsePhoneNumberFromString(value, countryIso);
+                setValid(phone?.isValid() ?? false);
+            }
+            catch {
+                setValid(false);
+            }
+        }
+        else {
+            setValid(false);
+        }
+    }, [value, countryIso]);
+    function handleCountryChange(newCountry) {
+        setOpen(false);
+        const raw = number;
+        const newIso = newCountry.iso || "US";
+        if (raw) {
+            try {
+                const phone = parsePhoneNumberFromString(raw, newIso);
+                if (phone && phone.isValid()) {
+                    setValid(true);
+                    setNumber(phone.nationalNumber);
+                    onChange(phone.nationalNumber, newCountry, true);
+                }
+                else {
+                    setValid(false);
+                    onChange(raw, newCountry, false);
+                }
+            }
+            catch {
+                setValid(false);
+                onChange(raw, newCountry, false);
+            }
+        }
+        else {
+            setValid(false);
+            onChange("", newCountry, false);
+        }
+    }
+    function resolveCountry(detectedIso) {
+        if (detectedIso) {
+            const match = countries.find((c) => c.iso === detectedIso);
+            if (match)
+                return match;
+            return {
+                iso: detectedIso,
+                name: undefined,
+                callingCode: getCountryCallingCode(detectedIso),
+            };
+        }
+        return (country ?? {
+            iso: countryIso,
+            name: undefined,
+            callingCode: getCountryCallingCode(countryIso),
+        });
+    }
+    function handleNumberChange(e) {
+        const input = e.target.value;
+        let phone = parsePhoneNumberFromString(input, countryIso);
+        if (!phone) {
+            phone = parsePhoneNumberFromString(input);
+        }
+        setNumber(input);
+        if (phone && phone.isValid()) {
+            const nationalNumber = phone.nationalNumber;
+            setNumber(nationalNumber);
+            setValid(true);
+            onChange(nationalNumber, resolveCountry(phone.country), true);
+            return;
+        }
+        const sanitizedInput = input.replace(/\D/g, "");
+        const sanitizedPhone = parsePhoneNumberFromString(sanitizedInput, countryIso);
+        if (sanitizedPhone && sanitizedPhone.isValid()) {
+            setValid(true);
+            onChange(sanitizedPhone.nationalNumber, resolveCountry(sanitizedPhone.country), true);
+            return;
+        }
+        setValid(false);
+        const fallbackCountry = country ??
+            countries[0] ?? { iso: "US", name: "United States", callingCode: "1" };
+        onChange(sanitizedInput, fallbackCountry, false);
+    }
+    function displayName(c) {
+        return c.name ?? c.iso;
+    }
+    const wrapperClassName = parentClassName ?? containerClassName;
+    return (_jsxs("div", { className: wrapperClassName, children: [label && (_jsxs("div", { className: "flex flex-row align-middle gap-2 text-default-foreground", children: [_jsx("label", { htmlFor: inputId, className: "block typography-body-medium", children: label }), required && _jsx("p", { className: "typography-caption-medium text-default-foreground/80 my-auto flex-shrink-0", children: "*" })] })), _jsxs("div", { className: cn("flex mt-1 overflow-clip rounded-md-v4 border border-input-border bg-input text-default-foreground", "transition-[color,box-shadow] duration-150", "focus-within:border-input-border focus-within:ring-[1px] focus-within:ring-input-border", error && "border-error-border ring-[1px] ring-error-foreground/20", className), children: [_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { role: "combobox", "data-testid": "country-selector", "aria-expanded": open, className: "w-32 typography-body-medium px-4 flex items-center justify-center border-r border-input shrink-0", disabled: disabled, children: [_jsxs("div", { className: "flex items-center", children: [_jsx("img", { src: `https://flagcdn.com/${countryIso.toLowerCase()}.svg`, alt: countryIso, className: "size-4 mr-2 object-contain" }), " +", country?.callingCode ?? getCountryCallingCode(countryIso)] }), _jsx(ChevronsUpDown, { className: "size-4 ml-auto opacity-50" })] }) }), _jsx(PopoverContent, { className: "w-64", align: "start", children: _jsxs(Command, { children: [_jsx(CommandInput, { placeholder: "Search country...", className: "h-9" }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No country found." }), _jsx(CommandGroup, { className: "max-h-64 overflow-y-auto", children: countries.map((c) => {
+                                                        const name = displayName(c);
+                                                        const callingCode = c.callingCode;
+                                                        return (_jsxs(CommandItem, { value: `${c.iso}-${name.toLowerCase()} +${callingCode}`, onSelect: () => handleCountryChange(c), children: [_jsx("img", { src: `https://flagcdn.com/${c.iso.toLowerCase()}.svg`, alt: c.iso, className: "size-4 mr-2 object-contain", loading: "lazy" }), _jsx("span", { className: "flex-1", children: name }), _jsxs("span", { className: "text-muted-foreground", children: ["+", callingCode] }), _jsx(Check, { className: cn("ml-2 size-4", countryIso === c.iso ? "opacity-100" : "opacity-0") })] }, c.iso));
+                                                    }) })] })] }) })] }), _jsxs("div", { className: "relative flex-1", children: [_jsx("input", { id: inputId, type: "tel", value: number, onChange: handleNumberChange, disabled: disabled, placeholder: "Phone number", "data-testid": "phone-number-input", className: cn(inputVariants({
+                                    variant: "text",
+                                    size: "default",
+                                }), "border-transparent hover:border-transparent! active:border-transparent! focus:border-transparent! focus-visible:border-transparent! focus-within:ring-transparent!", error && "aria-invalid"), "aria-invalid": Boolean(error), required: required, name: "phone", autoComplete: "tel" }), valid && (_jsx(CheckCircle2, { size: 20, className: "absolute right-4 top-1/2 transform -translate-y-1/2 text-success" }))] })] }), error && (_jsx("p", { id: errorId, className: "typography-caption-medium text-error-foreground mt-1", children: error }))] }));
+}

package/dist/components/input/textarea.d.ts

@@ -0,0 +1,46 @@
+import React from "react";
+import type { ComponentProps, ReactNode } from "react";
+import { type VariantPropsOf } from "#style";
+export type RefineContentRenderArgs = {
+    setRefineLoading: (v: boolean) => void;
+    onClose: () => void;
+};
+export declare const textareaConfig: {
+    base: string[];
+    variants: {
+        size: {
+            xs: string;
+            sm: string;
+            default: string;
+            lg: string;
+        };
+    };
+    defaultVariants: {
+        readonly size: "default";
+    };
+};
+export type BaseTextareaArgs = {
+    label?: string;
+    error?: string;
+    warning?: string;
+    helperText?: string;
+    description?: string;
+    descriptionInLabelTooltip?: boolean;
+    required?: boolean;
+    containerClassName?: string;
+    maxLength?: number;
+    showCharacterCount?: boolean;
+    dontEnforceMaxLength?: boolean;
+    hideLabel?: boolean;
+    customCountElement?: ReactNode;
+    onAiComplete?: () => Promise<string> | string;
+    onRefine?: (_currentValue: string) => Promise<string> | string;
+    refineContent?: ReactNode | ((args: RefineContentRenderArgs) => ReactNode);
+    onRemove?: () => void;
+    minRows?: number;
+    maxRows?: number;
+};
+export type TextareaArgs = Omit<ComponentProps<"textarea">, "size"> & VariantPropsOf<typeof textareaConfig> & BaseTextareaArgs;
+export type TextareaProps = TextareaArgs;
+export declare const Textarea: React.ForwardRefExoticComponent<Omit<TextareaArgs, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
+//# sourceMappingURL=textarea.d.ts.map

package/dist/components/input/textarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/components/input/textarea.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAmE,MAAM,OAAO,CAAC;AACxF,OAAO,KAAK,EAAe,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASpE,OAAO,EAAM,KAAK,cAAc,EAAE,MAAM,QAAQ,CAAC;AAEjD,MAAM,MAAM,uBAAuB,GAAG;IACpC,gBAAgB,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AA0BF,eAAO,MAAM,cAAc;;;;;;;;;;;;;CAa1B,CAAC;AAOF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAC/B,YAAY,CAAC,EAAE,MAAM,OAAO,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC;IAC9C,QAAQ,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC;IAC/D,aAAa,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE,uBAAuB,KAAK,SAAS,CAAC,CAAC;IAC3E,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC,GACjE,cAAc,CAAC,OAAO,cAAc,CAAC,GACrC,gBAAgB,CAAC;AAEnB,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC;AAEzC,eAAO,MAAM,QAAQ,uGAyTnB,CAAC"}

package/dist/components/input/textarea.js

@@ -0,0 +1,174 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { isPresent } from "@manta-eu/lib/present";
+import { HelpCircle } from "lucide-react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import TextareaAutosize from "react-textarea-autosize";
+import { tv } from "tailwind-variants";
+import { Skeleton } from "../skeleton/index.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../tooltip/index.js";
+import { AiActionButtons } from "./ai-action-buttons.js";
+import { useInputGroup } from "./input-group.js";
+import { mergeRefs } from "#lib/merge-refs";
+import { cn } from "#style";
+function shouldShowHelper(props) {
+    const { error, warning, helperText } = props;
+    return !isPresent(error) && !isPresent(warning) && isPresent(helperText);
+}
+const wrapperVariants = tv({
+    base: [
+        "relative flex flex-col min-w-0 rounded-md-v4 border border-input-border bg-input",
+        "text-default-foreground/80 group-hover:text-default-foreground focus-within:text-default-foreground",
+        "focus-within:border-input-border focus-within:ring-input-border focus-within:ring-[1px]",
+        "transition-[color,box-shadow] duration-150 overflow-hidden",
+    ],
+    variants: {
+        hasError: {
+            true: "border-error-border",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        hasError: false,
+        size: "default",
+    },
+});
+export const textareaConfig = {
+    base: ["inline-block form-field resize-none min-w-0  !border-0 !ring-0"],
+    variants: {
+        size: {
+            xs: "px-2 pt-1.5 typography-small",
+            sm: "px-3 pt-2 typography-small",
+            default: "px-3 pt-2 typography-caption",
+            lg: "px-4 pt-3 typography-body",
+        },
+    },
+    defaultVariants: {
+        size: "default",
+    },
+};
+const textareaVariants = tv(textareaConfig);
+const sizeToMinRows = { xs: 2, sm: 2, default: 3, lg: 4 };
+const defaultMaxRows = 12;
+export const Textarea = React.forwardRef(function Textarea(props, forwardedRef) {
+    const { className, size, label, error, warning, helperText, description, descriptionInLabelTooltip, required, containerClassName, maxLength, showCharacterCount = true, dontEnforceMaxLength, hideLabel, customCountElement, onAiComplete, onRefine, refineContent, onRemove, minRows, maxRows, value, defaultValue, onChange, onFocus, onBlur, id, style: styleProp, "aria-describedby": ariaDescribedByProp, ...rest } = props;
+    const effectiveMinRows = minRows ?? sizeToMinRows[size ?? "default"];
+    const effectiveMaxRows = maxRows ?? defaultMaxRows;
+    const generatedId = useId();
+    const textareaId = id ?? generatedId;
+    const errorId = useId();
+    const warningId = useId();
+    const helperId = useId();
+    const descriptionId = useId();
+    const fieldIdRef = useRef(`textarea-${generatedId}`);
+    const textareaRef = useRef(null);
+    const actionRef = useRef(null);
+    const groupContext = useInputGroup();
+    const hasAiActions = Boolean(onAiComplete ?? onRefine ?? onRemove);
+    const shouldReduceMotion = useReducedMotion();
+    const [internalCount, setInternalCount] = useState(() => {
+        if (value !== undefined)
+            return String(value).length;
+        if (defaultValue !== undefined)
+            return String(defaultValue).length;
+        return 0;
+    });
+    const [isFocused, setIsFocused] = useState(false);
+    const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+    const [isButtonGroupFocused, setIsButtonGroupFocused] = useState(false);
+    const [loadingState, setLoadingState] = useState(false);
+    const [actionWidth, setActionWidth] = useState(0);
+    const setRefineLoading = useCallback((v) => {
+        setLoadingState((prev) => (v ? "refine" : prev === "refine" ? false : prev));
+    }, []);
+    const onCloseRefinePopover = useCallback(() => {
+        setIsPopoverOpen(false);
+    }, []);
+    const count = useMemo(() => {
+        if (value !== undefined)
+            return String(value).length;
+        return internalCount;
+    }, [value, internalCount]);
+    const triggerAiComplete = async () => {
+        if (!onAiComplete || !textareaRef.current)
+            return;
+        setIsPopoverOpen(false);
+        setLoadingState("generate");
+        try {
+            const result = await Promise.resolve(onAiComplete());
+            const next = typeof result === "string" ? result : "";
+            if (!textareaRef.current)
+                return;
+            textareaRef.current.value = next;
+            setInternalCount(next.length);
+            onChange?.({ target: textareaRef.current });
+            // eslint-disable-next-line no-useless-catch
+        }
+        catch (error) {
+            throw error;
+        }
+        finally {
+            setIsButtonGroupFocused(false);
+            setLoadingState(false);
+        }
+    };
+    useEffect(() => {
+        if (!groupContext)
+            return;
+        const idKey = fieldIdRef.current;
+        const ref = { triggerAiComplete };
+        groupContext.registerInput(idKey, ref);
+        return () => groupContext.unregisterInput(idKey);
+    }, [groupContext]);
+    useEffect(() => {
+        if (!groupContext)
+            return;
+        groupContext.setInputFilled(fieldIdRef.current, count > 0);
+    }, [groupContext, count]);
+    useEffect(() => {
+        const el = actionRef.current;
+        if (!el)
+            return;
+        const observer = new globalThis.ResizeObserver(() => setActionWidth(el.offsetWidth));
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, [hasAiActions]);
+    const handleChange = (e) => {
+        setInternalCount(e.currentTarget.value.length);
+        onChange?.(e);
+    };
+    const handleFocus = (e) => {
+        setIsFocused(true);
+        onFocus?.(e);
+    };
+    const handleBlur = (e) => {
+        setIsFocused(false);
+        onBlur?.(e);
+    };
+    const hasError = isPresent(error);
+    const showHelper = shouldShowHelper({ error, warning, helperText });
+    const forceShow = isFocused || isPopoverOpen || isButtonGroupFocused || !!loadingState;
+    const showCountAlways = maxLength && showCharacterCount && !hasAiActions;
+    const showCountOnFocus = maxLength && hasAiActions;
+    const isOverRecommended = dontEnforceMaxLength && maxLength && count > maxLength;
+    const displayWarning = warning || (isOverRecommended ? `You should have at most ${maxLength} characters` : undefined);
+    const descriptionInTooltipMode = Boolean(descriptionInLabelTooltip && isPresent(description) && isPresent(label) && !groupContext && !hideLabel);
+    const textareaAriaDescribedBy = [
+        descriptionInTooltipMode ? descriptionId : undefined,
+        showHelper ? helperId : undefined,
+        ariaDescribedByProp,
+    ]
+        .filter(isPresent)
+        .join(" ");
+    const textareaStyle = hasAiActions && forceShow && actionWidth ? { ...styleProp, paddingRight: actionWidth - 12 } : styleProp;
+    const textareaEl = (_jsx(TextareaAutosize, { id: textareaId, ref: mergeRefs(textareaRef, forwardedRef), className: cn(textareaVariants({ size }), className), "aria-invalid": hasError, "aria-errormessage": hasError ? errorId : warning ? warningId : undefined, "aria-describedby": textareaAriaDescribedBy || undefined, maxLength: dontEnforceMaxLength ? undefined : maxLength, minRows: effectiveMinRows, maxRows: effectiveMaxRows, value: value, defaultValue: defaultValue, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, style: textareaStyle, placeholder: loadingState === "generate" ? "" : rest.placeholder, ...rest }));
+    const resolvedRefineContent = onRefine && refineContent !== undefined
+        ? typeof refineContent === "function"
+            ? refineContent({ setRefineLoading, onClose: onCloseRefinePopover })
+            : refineContent
+        : undefined;
+    const innerContent = hasAiActions ? (_jsxs(_Fragment, { children: [textareaEl, loadingState === "generate" && (_jsx("div", { className: "absolute inset-0 pointer-events-none p-3 flex items-start", children: _jsx(Skeleton, { className: "h-12 w-3/4 rounded-sm" }) })), _jsx("div", { ref: actionRef, className: cn("inline-flex items-center gap-1 absolute top-px right-px pl-2 pr-1.5 py-1.5 rounded-bl-sm-v4", "opacity-0 translate-x-1.5 transition-all duration-150", "group-hover:opacity-100 group-hover:translate-x-0", "group-data-[force-show]:opacity-100 group-data-[force-show]:translate-x-0"), onFocus: () => setIsButtonGroupFocused(true), onBlur: () => setIsButtonGroupFocused(false), children: _jsx(AiActionButtons, { refineContent: resolvedRefineContent, onAiComplete: onAiComplete ? triggerAiComplete : undefined, isLoading: loadingState, open: isPopoverOpen, onOpenChange: setIsPopoverOpen, onPopoverOpenChange: setIsPopoverOpen, onRemove: onRemove, refineLabel: "Refine content", generateLabel: "Generate content", className: "inline-flex " }) })] })) : (_jsxs(_Fragment, { children: [textareaEl, showCountAlways && (_jsxs("span", { className: cn("px-3 pb-3 text-right typography-small self-end", isOverRecommended ? "text-warning-foreground" : "text-placeholder-foreground"), children: [count, "/", maxLength] }))] }));
+    return (_jsxs("div", { className: cn("flex flex-col gap-1.5 w-full min-w-0", containerClassName), children: [label && !groupContext && (_jsxs("div", { className: cn("flex justify-between items-end gap-2", hideLabel && "sr-only"), children: [_jsxs("div", { className: "flex items-end gap-1 min-w-0", children: [_jsxs("label", { htmlFor: textareaId, className: "typography-small", children: [label, required && _jsx("span", { className: "text-error-foreground ml-0.5", children: "*" })] }), descriptionInTooltipMode && (_jsx(TooltipProvider, { delayDuration: 200, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "inline-flex shrink-0 text-default-foreground hover:text-default-foreground rounded-sm my-auto", "aria-label": `${label} description`, children: _jsx(HelpCircle, { className: "size-3.5 text-default-foreground hover:text-default-foreground my-auto" }) }) }), _jsx(TooltipContent, { side: "top", className: "max-w-xs text-left typography-small", children: description })] }) }))] }), customCountElement] })), descriptionInTooltipMode && (_jsx("span", { id: descriptionId, className: "sr-only", children: description })), description && !descriptionInTooltipMode && (_jsx("p", { className: "typography-small text-muted-foreground", children: description })), _jsx("div", { className: cn(wrapperVariants({ hasError }), hasAiActions && "group"), "data-force-show": hasAiActions && forceShow ? true : undefined, children: innerContent }), showCountOnFocus && (_jsx("div", { children: _jsx(AnimatePresence, { children: isFocused && (_jsx(motion.div, { initial: shouldReduceMotion ? false : { opacity: 0, height: 0 }, animate: { opacity: 1, height: "auto" }, exit: { opacity: 0, height: 0 }, transition: { duration: 0.15, ease: [0.23, 1, 0.32, 1] }, className: "overflow-hidden pointer-events-none", children: _jsxs("span", { className: "typography-small text-muted-foreground/70 pl-1 pt-1 block", children: [count, "/", maxLength] }) })) }) })), error && (_jsx("p", { id: errorId, className: "typography-small text-error-foreground", children: error })), displayWarning && !error && (_jsx("p", { id: warningId, className: "typography-small text-warning-foreground", children: displayWarning })), showHelper && (_jsx("p", { id: helperId, className: "typography-small text-muted-foreground", children: helperText }))] }));
+});
+Textarea.displayName = "Textarea";

package/dist/components/input-otp/index.d.ts

@@ -0,0 +1,39 @@
+import type { ComponentProps } from "react";
+declare const InputOTP: import("react").ForwardRefExoticComponent<(Omit<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "maxLength" | "textAlign" | "containerClassName" | "onComplete" | "pushPasswordManagerStrategy" | "pasteTransformer" | "noScriptCSSFallback"> & {
+    value?: string;
+    onChange?: (newValue: string) => unknown;
+    maxLength: number;
+    textAlign?: "left" | "center" | "right";
+    onComplete?: (...args: any[]) => unknown;
+    pushPasswordManagerStrategy?: "increase-width" | "none";
+    pasteTransformer?: (pasted: string) => string;
+    containerClassName?: string;
+    noScriptCSSFallback?: string | null;
+} & {
+    render: (props: import("input-otp").RenderProps) => React.ReactNode;
+    children?: never;
+} & import("react").RefAttributes<HTMLInputElement> & {
+    containerClassName?: string;
+}, "ref"> | Omit<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "maxLength" | "textAlign" | "containerClassName" | "onComplete" | "pushPasswordManagerStrategy" | "pasteTransformer" | "noScriptCSSFallback"> & {
+    value?: string;
+    onChange?: (newValue: string) => unknown;
+    maxLength: number;
+    textAlign?: "left" | "center" | "right";
+    onComplete?: (...args: any[]) => unknown;
+    pushPasswordManagerStrategy?: "increase-width" | "none";
+    pasteTransformer?: (pasted: string) => string;
+    containerClassName?: string;
+    noScriptCSSFallback?: string | null;
+} & {
+    render?: never;
+    children: React.ReactNode;
+} & import("react").RefAttributes<HTMLInputElement> & {
+    containerClassName?: string;
+}, "ref">) & import("react").RefAttributes<HTMLInputElement>>;
+declare function InputOTPGroup(props: ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function InputOTPSlot(props: ComponentProps<"div"> & {
+    index: number;
+}): import("react/jsx-runtime").JSX.Element;
+declare function InputOTPSeparator(props: ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/input-otp/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/input-otp/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI5C,QAAA,MAAM,QAAQ;;;;;kBAUwD,GAAG;;;;;;;;;yBAPhD,MAAM;;;;;;kBAOuC,GAAG;;;;;;;;;yBAPhD,MAAM;6DAY7B,CAAC;AAIH,iBAAS,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CAGlD;AAED,iBAAS,YAAY,CACnB,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;CACf,2CAkCF;AAED,iBAAS,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CAMtD;AAED,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,iBAAiB,EAAE,YAAY,EAAE,CAAC"}

package/dist/components/input-otp/index.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { OTPInput, OTPInputContext } from "input-otp";
+import { MinusIcon } from "lucide-react";
+import { forwardRef, useContext } from "react";
+import { cn } from "#style";
+const InputOTP = forwardRef(({ className, containerClassName, ...props }, ref) => {
+    return (_jsx(OTPInput, { ref: ref, "data-slot": "input-otp", containerClassName: cn("group flex items-center gap-2 typography-body", containerClassName), className: cn("disabled:cursor-not-allowed", className), ...props }));
+});
+InputOTP.displayName = "InputOTP";
+function InputOTPGroup(props) {
+    const { className, ...rest } = props;
+    return _jsx("div", { "data-slot": "input-otp-group", className: cn("flex items-center rounded-full", className), ...rest });
+}
+function InputOTPSlot(props) {
+    const { index, className, ...rest } = props;
+    const inputOTPContext = useContext(OTPInputContext);
+    const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
+    return (_jsxs("div", { "data-slot": "input-otp-slot", "data-active": isActive, className: cn([
+            "relative flex items-center justify-center",
+            "h-14 w-10",
+            "border border-input-border first:rounded-l-2xl-v4 last:rounded-r-2xl-v4",
+            "typography-body text-default-foreground",
+            "shadow-xs",
+            "transition-all outline-none",
+            "-ml-px first:ml-0",
+            "group-has-[:disabled]:bg-disabled group-has-[:disabled]:text-disabled-foreground",
+        ], isActive && "z-10 ring-1 ring-input-border", className), ...rest, children: [char, hasFakeCaret && (_jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: _jsx("div", { className: "animate-blink bg-input-border h-4 w-px" }) }))] }));
+}
+function InputOTPSeparator(props) {
+    return (_jsx("div", { "data-slot": "input-otp-separator", role: "separator", ...props, children: _jsx(MinusIcon, { className: "group-has-[:disabled]:text-disabled-foreground" }) }));
+}
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };

package/dist/components/label/index.d.ts

@@ -0,0 +1,4 @@
+import * as LabelPrimitive from "@radix-ui/react-label";
+declare const Label: import("react").ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
+export { Label };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/label/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/label/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,cAAc,MAAM,uBAAuB,CAAC;AAUxD,QAAA,MAAM,KAAK,uLAIV,CAAC;AAGF,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/components/label/index.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { forwardRef } from "react";
+import { tv } from "tailwind-variants";
+import { cn } from "#style";
+const labelVariants = tv({
+    base: "typography-small peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+});
+const Label = forwardRef(({ className, ...props }, ref) => (_jsx(LabelPrimitive.Root, { ref: ref, className: cn(labelVariants(), className), ...props })));
+Label.displayName = LabelPrimitive.Root.displayName;
+export { Label };

package/dist/components/layouts/AnimatedChatTitle.d.ts

@@ -0,0 +1,6 @@
+type AnimatedChatTitleProps = {
+    title: string;
+};
+export declare function AnimatedChatTitle(props: AnimatedChatTitleProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=AnimatedChatTitle.d.ts.map

package/dist/components/layouts/AnimatedChatTitle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimatedChatTitle.d.ts","sourceRoot":"","sources":["../../../src/components/layouts/AnimatedChatTitle.tsx"],"names":[],"mappings":"AAGA,KAAK,sBAAsB,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAWF,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,2CA4C9D"}

package/dist/components/layouts/AnimatedChatTitle.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useReducedMotion } from "motion/react";
+import { useEffect, useRef, useState } from "react";
+const targetAnimationDurationMs = 1_200;
+const minimumCharacterIntervalMs = 18;
+const maximumCharacterIntervalMs = 45;
+function characterIntervalMs(title) {
+    const durationPerCharacter = targetAnimationDurationMs / Math.max(title.length, 1);
+    return Math.min(maximumCharacterIntervalMs, Math.max(minimumCharacterIntervalMs, durationPerCharacter));
+}
+export function AnimatedChatTitle(props) {
+    const { title } = props;
+    const shouldReduceMotion = useReducedMotion();
+    const previousTitleRef = useRef(title);
+    const [typewriter, setTypewriter] = useState({
+        displayedTitle: title,
+        isAnimating: false,
+    });
+    useEffect(() => {
+        const previousTitle = previousTitleRef.current;
+        previousTitleRef.current = title;
+        if (shouldReduceMotion || previousTitle === title) {
+            setTypewriter({ displayedTitle: title, isAnimating: false });
+            return;
+        }
+        let displayedLength = 0;
+        setTypewriter({ displayedTitle: "", isAnimating: true });
+        const timer = window.setInterval(() => {
+            displayedLength++;
+            const isAnimating = displayedLength < title.length;
+            setTypewriter({
+                displayedTitle: title.slice(0, displayedLength),
+                isAnimating,
+            });
+            if (!isAnimating)
+                window.clearInterval(timer);
+        }, characterIntervalMs(title));
+        return () => window.clearInterval(timer);
+    }, [shouldReduceMotion, title]);
+    return (_jsxs("span", { "aria-hidden": "true", children: [typewriter.displayedTitle, typewriter.isAnimating && (_jsx("span", { className: "ml-0.5 inline-block h-[1em] border-l border-current align-[-0.1em] animate-pulse" }))] }));
+}

package/dist/components/layouts/ChatHistoryItem.d.ts

@@ -0,0 +1,9 @@
+type ChatHistoryItemProps = {
+    title: string;
+    timestamp: string;
+    isActive?: boolean;
+    onClick?: () => void;
+};
+export declare function ChatHistoryItem(props: ChatHistoryItemProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ChatHistoryItem.d.ts.map

package/dist/components/layouts/ChatHistoryItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatHistoryItem.d.ts","sourceRoot":"","sources":["../../../src/components/layouts/ChatHistoryItem.tsx"],"names":[],"mappings":"AAGA,KAAK,oBAAoB,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,2CAwB1D"}

package/dist/components/layouts/ChatHistoryItem.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MessageCircle } from "lucide-react";
+import { cn } from "#lib/utils";
+export function ChatHistoryItem(props) {
+    const { title, timestamp, isActive = false, onClick } = props;
+    return (_jsx("li", { children: _jsxs("button", { type: "button", onClick: onClick, className: cn("flex w-full cursor-pointer items-center gap-3 rounded-sm px-3 py-2 typography-small text-left transition-colors", "hover:bg-secondary", isActive && "bg-accent-foreground/10 text-background"), children: [_jsx(MessageCircle, { size: 20, className: "shrink-0" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "truncate typography-small-medium", title: title, children: title }), _jsx("div", { className: "truncate typography-tiny text-muted-foreground", children: timestamp })] })] }) }));
+}

package/dist/components/layouts/ChatSplitLayout.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+type ChatSplitLayoutProps = {
+    chat: ReactNode;
+    chatOpen: boolean;
+    children: ReactNode;
+    className?: string;
+};
+export declare function ChatSplitLayout(props: ChatSplitLayoutProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ChatSplitLayout.d.ts.map

package/dist/components/layouts/ChatSplitLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatSplitLayout.d.ts","sourceRoot":"","sources":["../../../src/components/layouts/ChatSplitLayout.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAcvC,KAAK,oBAAoB,GAAG;IAC1B,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,2CA+E1D"}

package/dist/components/layouts/ChatSplitLayout.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AnimatePresence, motion, useMotionValue, useReducedMotion } from "motion/react";
+import { useCallback, useEffect } from "react";
+import { useLocalStorage } from "usehooks-ts";
+import { ResizeHandle } from "#components/resize-handle/index";
+import { useResizablePanel } from "#hooks/useResizablePanel";
+import { cn } from "#lib/utils";
+const defaultChatWidth = 480;
+const minChatWidth = 360;
+const minPlanWidth = 560;
+const storageKey = "plan-chat-panel-width";
+const easeOutQuart = [0.165, 0.84, 0.44, 1];
+export function ChatSplitLayout(props) {
+    const { chat, chatOpen, className, children } = props;
+    const shouldReduceMotion = useReducedMotion();
+    const [storedWidth, setStoredWidth] = useLocalStorage(storageKey, defaultChatWidth);
+    const widthMV = useMotionValue(storedWidth);
+    const contentWidthMV = useMotionValue(storedWidth);
+    const handleWidthChange = useCallback((width) => {
+        widthMV.jump(width);
+        contentWidthMV.jump(width);
+    }, [widthMV, contentWidthMV]);
+    const { panelRef, handleResizeStart } = useResizablePanel({
+        initialWidth: storedWidth,
+        minWidth: minChatWidth,
+        minRemainingWidth: minPlanWidth,
+        resizeFrom: "right",
+        onResize: handleWidthChange,
+        onResizeEnd: setStoredWidth,
+    });
+    const handleReset = useCallback(() => setStoredWidth(defaultChatWidth), [setStoredWidth]);
+    useEffect(() => {
+        contentWidthMV.set(storedWidth);
+    }, [storedWidth, contentWidthMV]);
+    return (_jsxs("div", { className: cn("flex h-full min-h-0 min-w-0", className), children: [_jsx(AnimatePresence, { initial: false, children: chatOpen && (_jsxs(motion.div, { ref: panelRef, style: { width: widthMV, maxWidth: `calc(100% - ${minPlanWidth}px)` }, initial: shouldReduceMotion ? false : { width: 0 }, animate: { width: storedWidth }, exit: {
+                        width: 0,
+                        transition: shouldReduceMotion ? { duration: 0 } : { duration: 0.2, ease: easeOutQuart },
+                    }, transition: shouldReduceMotion ? { duration: 0 } : { duration: 0.24, ease: easeOutQuart }, className: "relative flex shrink-0 flex-col border-r border-default-border", "aria-label": "Chat panel", children: [_jsx(ResizeHandle, { side: "right", ariaLabel: "Resize chat panel", onResizeStart: handleResizeStart, onReset: handleReset, className: "z-30" }), _jsx(motion.div, { className: "h-full min-h-0 w-full overflow-hidden", initial: shouldReduceMotion ? false : { opacity: 0 }, animate: { opacity: 1 }, exit: {
+                                opacity: 0,
+                                transition: shouldReduceMotion ? { duration: 0 } : { duration: 0.12, ease: "easeOut" },
+                            }, transition: shouldReduceMotion ? { duration: 0 } : { duration: 0.18, ease: easeOutQuart }, children: _jsx(motion.div, { className: "flex h-full min-h-0 flex-col overflow-hidden", style: { width: contentWidthMV, minWidth: minChatWidth }, children: chat }) })] }, "plan-chat-panel")) }), _jsx("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", children: children })] }));
+}

package/dist/components/layouts/ChatToggleButton.d.ts

@@ -0,0 +1,6 @@
+type ChatToggleButtonProps = {
+    className?: string;
+};
+export declare function ChatToggleButton(props: ChatToggleButtonProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=ChatToggleButton.d.ts.map

package/dist/components/layouts/ChatToggleButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatToggleButton.d.ts","sourceRoot":"","sources":["../../../src/components/layouts/ChatToggleButton.tsx"],"names":[],"mappings":"AAYA,KAAK,qBAAqB,GAAG;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,kDAoD5D"}

package/dist/components/layouts/ChatToggleButton.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isPresent } from "@manta-eu/lib/present";
+import { MessageCircle } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useSessionStorage } from "usehooks-ts";
+import { Button } from "#components/button/index";
+import { Tooltip, TooltipContent, TooltipTrigger } from "#components/tooltip/index";
+import { cn } from "#lib/utils";
+import { useOptionalChatPanel } from "#providers/ChatPanelContext";
+const hintStorageKey = "manta-plan-chat-hinted";
+const hintDurationMs = 3000;
+export function ChatToggleButton(props) {
+    const { className } = props;
+    const panel = useOptionalChatPanel();
+    const [hinted, setHinted] = useSessionStorage(hintStorageKey, false);
+    const [open, setOpen] = useState(!hinted);
+    const showHint = isPresent(panel) && !panel?.chatOpen && !hinted;
+    useEffect(() => {
+        if (!showHint)
+            return;
+        setOpen(true);
+        const hintTimeout = setTimeout(() => {
+            setOpen(false);
+            setHinted(true);
+        }, hintDurationMs);
+        return () => clearTimeout(hintTimeout);
+    }, [showHint, setHinted]);
+    if (!panel || panel.chatOpen)
+        return null;
+    function handleClick() {
+        setHinted(true);
+        panel?.toggle();
+    }
+    return (_jsxs(Tooltip, { open: open, onOpenChange: setOpen, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { type: "button", variant: "tertiary", size: "base", rounded: "md", iconOnly: true, icon: MessageCircle, "aria-label": "Ask about this plan", onClick: handleClick, className: cn("shrink-0 text-accent-foreground hover:bg-accent", "focus:outline-none focus:ring-0 focus:border-muted-border focus-visible:ring-2", className) }) }), _jsx(TooltipContent, { side: "bottom", children: "Ask about this plan" })] }));
+}