@manta-eu/react 0.1.0

package/dist/components/input/input-field.d.ts

@@ -0,0 +1,122 @@
+import React, { type ComponentProps, type ReactNode } from "react";
+import { type VariantPropsOf } from "#style";
+export declare const inputConfig: {
+    base: string[];
+    variants: {
+        variant: {
+            text: string;
+            search: string;
+            currency: string;
+            multiplier: string;
+        };
+        size: {
+            xs: string;
+            sm: string;
+            default: string;
+            lg: string;
+        };
+    };
+    compoundVariants: ({
+        readonly variant: "search";
+        readonly size: "xs";
+        readonly className: "pl-8";
+    } | {
+        readonly variant: "search";
+        readonly size: "sm";
+        readonly className: "pl-8";
+    } | {
+        readonly variant: "search";
+        readonly size: "default";
+        readonly className: "pl-8";
+    } | {
+        readonly variant: "search";
+        readonly size: "lg";
+        readonly className: "pl-10";
+    } | {
+        readonly variant: "currency";
+        readonly size: "xs";
+        readonly className: "!pl-10";
+    } | {
+        readonly variant: "currency";
+        readonly size: "sm";
+        readonly className: "!pl-11";
+    } | {
+        readonly variant: "currency";
+        readonly size: "default";
+        readonly className: "!pl-12";
+    } | {
+        readonly variant: "currency";
+        readonly size: "lg";
+        readonly className: "!pl-14";
+    })[];
+    defaultVariants: {
+        readonly variant: "text";
+        readonly size: "default";
+    };
+};
+export declare const inputVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        text: string;
+        search: string;
+        currency: string;
+        multiplier: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        default: string;
+        lg: string;
+    };
+}, undefined, string[], {
+    variant: {
+        text: string;
+        search: string;
+        currency: string;
+        multiplier: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        default: string;
+        lg: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        text: string;
+        search: string;
+        currency: string;
+        multiplier: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        default: string;
+        lg: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export type BaseInputArgs = {
+    label?: string;
+    error?: string;
+    warning?: string;
+    helperText?: string;
+    description?: string;
+    descriptionInLabelTooltip?: boolean;
+    required?: boolean;
+    containerClassName?: string;
+    leadingElement?: ReactNode;
+    hiddenLabel?: boolean;
+    clearValue?: () => void;
+    showCharacterCount?: boolean;
+    inlineCharacterCount?: boolean;
+    dontEnforceMaxLength?: boolean;
+    onAiComplete?: () => Promise<string> | string;
+    onRefine?: (_currentValue: string) => Promise<string> | string;
+    refineContent?: ReactNode | ((args: {
+        setRefineLoading: (v: boolean) => void;
+        onClose: () => void;
+    }) => ReactNode);
+    onRemove?: () => void;
+};
+export type InputArgs = Omit<ComponentProps<"input">, "size"> & VariantPropsOf<typeof inputConfig> & BaseInputArgs;
+export declare const Input: React.ForwardRefExoticComponent<Omit<InputArgs, "ref"> & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=input-field.d.ts.map

package/dist/components/input/input-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-field.d.ts","sourceRoot":"","sources":["../../../src/components/input/input-field.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAQZ,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAOf,OAAO,EAAM,KAAK,cAAc,EAAE,MAAM,QAAQ,CAAC;AAOjD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BvB,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qDAAkB,CAAC;AAE7C,MAAM,MAAM,aAAa,GAAG;IAC1B,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,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,oBAAoB,CAAC,EAAE,OAAO,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;QAAE,gBAAgB,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,SAAS,CAAC,CAAC;IACnH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,GAAG,cAAc,CAAC,OAAO,WAAW,CAAC,GAAG,aAAa,CAAC;AAEnH,eAAO,MAAM,KAAK,iGA6VhB,CAAC"}

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

@@ -0,0 +1,167 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isPresent } from "@manta-eu/lib/present";
+import { CircleX, HelpCircle, OctagonAlertIcon, SearchIcon } from "lucide-react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import React, { useCallback, useEffect, useId, useMemo, useRef, useState, } from "react";
+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, helperText } = props;
+    return !isPresent(error) && isPresent(helperText);
+}
+export const inputConfig = {
+    base: ["w-full min-w-0 form-field", "aria-invalid:pl-9"],
+    variants: {
+        variant: {
+            text: "",
+            search: "pl-9",
+            currency: "",
+            multiplier: "pr-9",
+        },
+        size: {
+            xs: "px-2 py-1.5 typography-small h-7",
+            sm: "px-3 py-2 typography-small h-8",
+            default: "px-3 py-2.5 typography-caption leading-[18px] h-10",
+            lg: "px-4 py-3 typography-body h-12",
+        },
+    },
+    compoundVariants: [
+        { variant: "search", size: "xs", className: "pl-8" },
+        { variant: "search", size: "sm", className: "pl-8" },
+        { variant: "search", size: "default", className: "pl-8" },
+        { variant: "search", size: "lg", className: "pl-10" },
+        { variant: "currency", size: "xs", className: "!pl-10" },
+        { variant: "currency", size: "sm", className: "!pl-11" },
+        { variant: "currency", size: "default", className: "!pl-12" },
+        { variant: "currency", size: "lg", className: "!pl-14" },
+    ],
+    defaultVariants: {
+        variant: "text",
+        size: "default",
+    },
+};
+export const inputVariants = tv(inputConfig);
+export const Input = React.forwardRef(function Input(props, forwardedRef) {
+    const { className, variant, size, label, error, warning, helperText, description, descriptionInLabelTooltip, required, containerClassName, leadingElement, hiddenLabel, clearValue, maxLength, showCharacterCount, inlineCharacterCount, dontEnforceMaxLength, onAiComplete, onRefine, refineContent, onRemove, value, defaultValue, onChange, id, "aria-describedby": ariaDescribedByProp, ...rest } = props;
+    const generatedId = useId();
+    const inputId = id ?? generatedId;
+    const errorId = useId();
+    const warningId = useId();
+    const helperId = useId();
+    const descriptionId = useId();
+    const fieldIdRef = useRef(`input-${generatedId}`);
+    const inputRef = 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 [isLoading, setIsLoading] = useState(false);
+    const [actionWidth, setActionWidth] = useState(0);
+    const setRefineLoading = useCallback((v) => {
+        setIsLoading(v);
+    }, []);
+    const onCloseRefinePopover = useCallback(() => {
+        setIsPopoverOpen(false);
+    }, []);
+    const resolvedRefineContent = onRefine && refineContent !== undefined
+        ? typeof refineContent === "function"
+            ? refineContent({ setRefineLoading, onClose: onCloseRefinePopover })
+            : refineContent
+        : undefined;
+    const count = useMemo(() => {
+        if (value !== undefined)
+            return String(value).length;
+        return internalCount;
+    }, [value, internalCount]);
+    const triggerAiComplete = async () => {
+        if (!onAiComplete || !inputRef.current)
+            return;
+        setIsLoading(true);
+        try {
+            const result = await Promise.resolve(onAiComplete());
+            const next = typeof result === "string" ? result : "";
+            if (!inputRef.current)
+                return;
+            inputRef.current.value = next;
+            setInternalCount(next.length);
+            onChange?.({ target: inputRef.current });
+            // eslint-disable-next-line no-useless-catch
+        }
+        catch (error) {
+            throw error;
+        }
+        finally {
+            setIsLoading(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);
+        rest.onFocus?.(e);
+    };
+    const handleBlur = (e) => {
+        setIsFocused(false);
+        rest.onBlur?.(e);
+    };
+    const hasError = isPresent(error);
+    const showHelper = shouldShowHelper({ error, helperText });
+    const forceShow = isFocused || isPopoverOpen || isButtonGroupFocused || isLoading;
+    const showCountAlways = maxLength && showCharacterCount && !hasAiActions;
+    const showCountOnFocus = maxLength && hasAiActions;
+    const showCountInline = showCountAlways && inlineCharacterCount;
+    const showClearButton = clearValue && variant === "search" && value && !rest.disabled;
+    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 && !hiddenLabel);
+    const inputAriaDescribedBy = [
+        descriptionInTooltipMode ? descriptionId : undefined,
+        showHelper ? helperId : undefined,
+        ariaDescribedByProp,
+    ]
+        .filter(isPresent)
+        .join(" ");
+    const inputEl = (_jsx("input", { id: inputId, ref: mergeRefs(inputRef, forwardedRef), className: cn(inputVariants({ variant, size }), showCountInline && "pr-14", className), "aria-invalid": hasError, "aria-errormessage": hasError ? errorId : displayWarning ? warningId : undefined, "aria-describedby": inputAriaDescribedBy || undefined, maxLength: dontEnforceMaxLength ? undefined : maxLength, value: value, defaultValue: defaultValue, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, style: hasAiActions && forceShow ? { paddingRight: actionWidth ? actionWidth - 20 : undefined } : undefined, placeholder: isLoading ? "" : rest.placeholder, ...rest }));
+    const inputWrapper = hasAiActions ? (_jsxs("div", { className: "w-full @container/input", children: [_jsxs("div", { className: "relative w-full group", "data-force-show": forceShow || undefined, children: [variant === "search" && (_jsx(SearchIcon, { className: cn("absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none z-[1]", size === "xs" || size === "sm" ? "size-3.5" : size === "lg" ? "size-5" : "size-4") })), leadingElement, inputEl, isLoading && (_jsx("div", { className: "absolute inset-0 pointer-events-none p-2 flex items-center", children: _jsx(Skeleton, { className: "h-full w-3/4 rounded-sm" }) })), _jsxs("div", { ref: actionRef, className: cn("inline-flex items-center gap-1 absolute pl-2 pr-1.5 py-1.5 right-px top-px bottom-px rounded-r-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("div", { className: "hidden @[25rem]/input:contents", children: _jsx(AnimatePresence, { children: showCountOnFocus && isFocused && (_jsx(motion.div, { initial: shouldReduceMotion ? false : { opacity: 0, x: 2 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: 2 }, transition: { duration: 0.15, ease: [0.23, 1, 0.32, 1] }, className: "pointer-events-none mr-2 flex items-center", children: _jsxs("span", { className: "typography-small text-muted-foreground/70", children: [count, "/", maxLength] }) })) }) }), _jsx(AiActionButtons, { refineContent: resolvedRefineContent, onAiComplete: onAiComplete ? triggerAiComplete : undefined, isLoading: isLoading, onPopoverOpenChange: setIsPopoverOpen, onRemove: onRemove, className: "inline-flex items-center rounded-sm border border-input overflow-hidden [&>*]:pointer-events-auto gap-0.5", refineLabel: "Refine content", generateLabel: "Generate content" })] })] }), _jsx("div", { className: "@[25rem]/input:hidden", children: _jsx(AnimatePresence, { children: showCountOnFocus && 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] }) })) }) })] })) : (_jsxs("div", { className: "relative", children: [variant === "search" && (_jsx(SearchIcon, { className: cn("absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none", size === "xs" || size === "sm" ? "size-3.5" : size === "lg" ? "size-5" : "size-4") })), leadingElement, inputEl, variant === "multiplier" && (_jsx("span", { className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground typography-caption pointer-events-none", children: "x" })), hasError && variant !== "search" && variant !== "currency" && (_jsx(OctagonAlertIcon, { className: "absolute left-3 top-1/2 -translate-y-1/2 size-4 text-error-foreground pointer-events-none" })), showClearButton && (_jsx("button", { type: "button", className: "absolute top-1/2 -translate-y-1/2 right-3", onClick: clearValue, children: _jsx(CircleX, { className: "size-4 text-muted-foreground hover:text-default-foreground" }) })), showCountInline && (_jsxs("span", { className: "absolute right-3 top-1/2 -translate-y-1/2 typography-small text-muted-foreground pointer-events-none", children: [count, "/", maxLength] }))] }));
+    return (_jsxs("div", { className: cn("flex flex-col gap-1.5 w-full", containerClassName), children: [label && !groupContext && (_jsxs("div", { className: cn("flex justify-between items-end gap-2", hiddenLabel && "sr-only"), children: [_jsxs("div", { className: "flex items-end gap-1 min-w-0", children: [_jsxs("label", { htmlFor: inputId, className: "typography-small", children: [label, required && _jsx("span", { className: "text-error-foreground ml-1", 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 })] }) }))] }), showCountAlways && (_jsxs("span", { className: "typography-small text-muted-foreground shrink-0", children: [count, "/", maxLength] }))] })), !label && showCountAlways && !showCountInline && (_jsx("div", { className: "flex justify-end", children: _jsxs("span", { className: "typography-small text-muted-foreground", children: [count, "/", maxLength] }) })), descriptionInTooltipMode && (_jsx("span", { id: descriptionId, className: "sr-only", children: description })), description && !descriptionInTooltipMode && (_jsx("p", { className: "typography-small text-muted-foreground", children: description })), inputWrapper, 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 }))] }));
+});
+Input.displayName = "Input";

package/dist/components/input/input-file.d.ts

@@ -0,0 +1,25 @@
+import type { ComponentType, InputHTMLAttributes } from "react";
+import { type ButtonProps } from "../button/index.js";
+export type InputFileArgs = {
+    variant?: ButtonProps["variant"];
+    size?: ButtonProps["size"];
+    onSelect: (file: File | undefined) => void;
+    selected?: File;
+    icon?: ComponentType<{
+        className?: string;
+    }>;
+    id: string;
+    className?: string;
+    disabled?: boolean;
+    containerClassName?: string;
+    text?: string;
+    accept?: InputHTMLAttributes<HTMLInputElement>["accept"];
+    /** With `onSelectMultiple`, hands over the whole FileList in one call and skips the crop path. */
+    multiple?: boolean;
+    onSelectMultiple?: (_files: File[]) => void;
+    disablePreview?: boolean;
+    aspectRatio?: number;
+    onCropRequired?: (file: File, aspectRatio: number) => Promise<File>;
+};
+export declare function InputFile(props: InputFileArgs): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=input-file.d.ts.map

package/dist/components/input/input-file.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-file.d.ts","sourceRoot":"","sources":["../../../src/components/input/input-file.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAe,aAAa,EAAE,mBAAmB,EAAc,MAAM,OAAO,CAAC;AAEzF,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC;AAGrD,MAAM,MAAM,aAAa,GAAG;IAC1B,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAE3B,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC;IAC3C,QAAQ,CAAC,EAAE,IAAI,CAAC;IAChB,IAAI,CAAC,EAAE,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC7C,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,mBAAmB,CAAC,gBAAgB,CAAC,CAAC,QAAQ,CAAC,CAAC;IACzD,kGAAkG;IAClG,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IAC5C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACrE,CAAC;AAMF,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,2CAqI7C"}

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

@@ -0,0 +1,69 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* global File, URL, Image */
+import { UploadIcon, XIcon } from "lucide-react";
+import { useRef, useState } from "react";
+import { Button } from "../button/index.js";
+import { cn } from "#style";
+function createObjectURL(file) {
+    return URL.createObjectURL(file);
+}
+export function InputFile(props) {
+    const { selected, variant = "secondary", onSelect, containerClassName, accept, icon, text, className, size = "base", aspectRatio, disablePreview, disabled, onCropRequired, multiple, onSelectMultiple, } = props;
+    const [pendingFile, setPendingFile] = useState();
+    const fileInputRef = useRef(null);
+    const displayFile = selected ?? pendingFile;
+    const handleButtonClick = (e) => {
+        e.preventDefault();
+        if (fileInputRef.current) {
+            fileInputRef.current.click();
+        }
+    };
+    const handleFileChange = async (event) => {
+        event.preventDefault();
+        if (!event.target.files)
+            return;
+        // The batch path: full list out, and the value reset so the same files can be picked again.
+        if (multiple && onSelectMultiple) {
+            const files = Array.from(event.target.files);
+            event.target.value = "";
+            if (files.length > 0)
+                onSelectMultiple(files);
+            return;
+        }
+        const file = event.target.files[0];
+        if (!file)
+            return;
+        if (aspectRatio != null && file.type.startsWith("image/") && onCropRequired) {
+            const img = new Image();
+            img.src = createObjectURL(file);
+            img.onload = () => {
+                const currentRatio = img.width / img.height;
+                URL.revokeObjectURL(img.src);
+                if (Math.abs(currentRatio - aspectRatio) > 0.01) {
+                    setPendingFile(file);
+                    onCropRequired(file, aspectRatio)
+                        .then((croppedFile) => {
+                        onSelect(croppedFile);
+                        setPendingFile(undefined);
+                    })
+                        .catch(() => {
+                        setPendingFile(undefined);
+                    });
+                    return;
+                }
+                onSelect(file);
+            };
+            return;
+        }
+        onSelect(file);
+    };
+    if (displayFile === undefined || disablePreview) {
+        return (_jsxs("div", { className: "flex items-center", children: [_jsx("input", { type: "file", ref: fileInputRef, style: { display: "none" }, onChange: handleFileChange, accept: accept, disabled: disabled, multiple: Boolean(multiple && onSelectMultiple) }), _jsx(Button, { size: size, variant: variant, className: className, onClick: handleButtonClick, disabled: disabled, icon: icon ?? UploadIcon, label: text ?? "Upload file" })] }));
+    }
+    return (_jsxs("div", { className: cn("flex p-2 rounded-xl gap-2 w-full bg-card border border-default-border items-center", containerClassName), children: [displayFile ? (_jsx("img", { src: createObjectURL(displayFile), className: "size-10 rounded-md border border-default-border object-cover", alt: displayFile.name })) : (_jsx("div", { className: "size-10 rounded-md bg-muted" })), _jsxs("div", { className: "truncate flex-1 w-1", children: [_jsx("p", { className: "truncate w-full typography-small", children: displayFile.name }), _jsx("p", { className: "truncate w-full typography-tiny", children: displayFile.type })] }), _jsx(Button, { variant: "ghost", icon: XIcon, iconOnly: true, className: "shrink-0", onClick: (e) => {
+                    e.preventDefault();
+                    setPendingFile(undefined);
+                    onSelect(undefined);
+                }, "aria-label": "Remove file" })] }));
+}

package/dist/components/input/input-group.d.ts

@@ -0,0 +1,34 @@
+import React from "react";
+import { type LoadingState } from "./ai-action-buttons.js";
+export type InputGroupInputRef = {
+    triggerAiComplete: () => void;
+};
+export type InputGroupContextValue = {
+    registerInput: (_id: string, _ref: InputGroupInputRef) => void;
+    unregisterInput: (_id: string) => void;
+    setInputFilled: (_id: string, _filled: boolean) => void;
+};
+export declare function useInputGroup(): InputGroupContextValue | null;
+export type InputGroupRef = {
+    triggerAiComplete: () => void;
+};
+export type InputGroupProps = {
+    children: React.ReactNode;
+    className?: string;
+    onAiComplete?: () => Promise<void>;
+    refineContent?: React.ReactNode;
+    isLoading?: boolean | LoadingState;
+    ref?: React.Ref<InputGroupRef>;
+    title?: string;
+    collapsible?: boolean;
+    defaultCollapsed?: boolean;
+    onAdd?: () => void;
+    addLabel?: string;
+    addNewTestId?: string;
+    maxCount?: number;
+    currentCount?: number;
+    refineButtonTestId?: string;
+    generateButtonTestId?: string;
+};
+export declare const InputGroup: React.ForwardRefExoticComponent<Omit<InputGroupProps, "ref"> & React.RefAttributes<InputGroupRef>>;
+//# sourceMappingURL=input-group.d.ts.map

package/dist/components/input/input-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-group.d.ts","sourceRoot":"","sources":["../../../src/components/input/input-group.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAwF,MAAM,OAAO,CAAC;AAG7G,OAAO,EAAmB,KAAK,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGzE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,iBAAiB,EAAE,MAAM,IAAI,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC/D,eAAe,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CACzD,CAAC;AAIF,wBAAgB,aAAa,kCAE5B;AAED,MAAM,MAAM,aAAa,GAAG;IAC1B,iBAAiB,EAAE,MAAM,IAAI,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACnC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,GAAG,YAAY,CAAC;IACnC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B,CAAC;AAEF,eAAO,MAAM,UAAU,oGA6IrB,CAAC"}

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

@@ -0,0 +1,56 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronUp, Plus } from "lucide-react";
+import { motion } from "motion/react";
+import React, { createContext, useCallback, useContext, useImperativeHandle, useRef, useState } from "react";
+import { Button } from "../button/index.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../tooltip/index.js";
+import { AiActionButtons } from "./ai-action-buttons.js";
+import { cn } from "#style";
+const InputGroupContext = createContext(null);
+export function useInputGroup() {
+    return useContext(InputGroupContext);
+}
+export const InputGroup = React.forwardRef(function InputGroup({ children, className, onAiComplete, refineContent, isLoading: externalIsLoading, title, collapsible, defaultCollapsed = false, onAdd, addLabel = "Add", addNewTestId, maxCount, currentCount, refineButtonTestId, generateButtonTestId, }, ref) {
+    const inputRefs = useRef(new Map());
+    const filledRef = useRef(new Map());
+    const [internalLoadingState, setInternalLoadingState] = useState(false);
+    const [hasRegisteredInputs, setHasRegisteredInputs] = useState(false);
+    const [filledCount, setFilledCount] = useState(0);
+    const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
+    const loadingState = externalIsLoading !== undefined ? externalIsLoading : internalLoadingState;
+    const registerInput = useCallback((id, inputRef) => {
+        inputRefs.current.set(id, inputRef);
+        setHasRegisteredInputs(true);
+    }, []);
+    const unregisterInput = useCallback((id) => {
+        inputRefs.current.delete(id);
+        filledRef.current.delete(id);
+        setFilledCount(Array.from(filledRef.current.values()).filter(Boolean).length);
+        setHasRegisteredInputs(inputRefs.current.size > 0);
+    }, []);
+    const setInputFilled = useCallback((id, filled) => {
+        filledRef.current.set(id, filled);
+        setFilledCount(Array.from(filledRef.current.values()).filter(Boolean).length);
+    }, []);
+    const triggerAiComplete = useCallback(() => {
+        setInternalLoadingState("generate");
+        inputRefs.current.forEach((inputRef) => {
+            inputRef.triggerAiComplete();
+        });
+        if (onAiComplete) {
+            void Promise.resolve(onAiComplete()).finally(() => {
+                globalThis.setTimeout(() => setInternalLoadingState(false), 700);
+            });
+        }
+        else {
+            globalThis.setTimeout(() => setInternalLoadingState(false), 700);
+        }
+    }, [onAiComplete]);
+    useImperativeHandle(ref, () => ({ triggerAiComplete }), [triggerAiComplete]);
+    const showCollapsibleHeader = Boolean(collapsible && title);
+    const hasAiCallbacks = onAiComplete != null || refineContent != null;
+    return (_jsx(InputGroupContext.Provider, { value: { registerInput, unregisterInput, setInputFilled }, children: _jsxs("div", { className: cn(className), children: [_jsxs("div", { className: "flex items-center gap-1 w-full py-2", children: [_jsx("span", { className: "flex-1 typography-small-semibold text-default-foreground", role: "heading", "aria-level": 2, children: title }), maxCount !== undefined && (_jsxs("span", { className: "typography-tiny text-muted-foreground shrink-0", children: [currentCount !== undefined ? currentCount : filledCount, "/", maxCount] })), onAdd && (_jsx(TooltipProvider, { delayDuration: 400, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { type: "button", variant: "tertiary", size: "xs", rounded: "sm", iconOnly: true, onClick: onAdd, icon: Plus, "aria-label": addLabel, "data-testid": addNewTestId }) }), _jsx(TooltipContent, { children: _jsx("p", { children: addLabel }) })] }) })), hasAiCallbacks &&
+                            (onAiComplete ?? refineContent ?? hasRegisteredInputs) &&
+                            (!showCollapsibleHeader || !isCollapsed) && (_jsx(AiActionButtons, { refineContent: refineContent, onAiComplete: triggerAiComplete, isLoading: loadingState, disabled: loadingState !== false, showGenerate: hasRegisteredInputs, refineLabel: "Refine all content", generateLabel: "Generate all fields", refineButtonTestId: refineButtonTestId, generateButtonTestId: generateButtonTestId })), showCollapsibleHeader && (_jsx("button", { type: "button", onClick: () => setIsCollapsed((prev) => !prev), className: "shrink-0 p-1 rounded-sm text-muted-foreground hover:text-default-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-active-border", "aria-expanded": !isCollapsed, children: isCollapsed ? _jsx(ChevronDown, { className: "size-4" }) : _jsx(ChevronUp, { className: "size-4" }) }))] }), showCollapsibleHeader ? (_jsx(motion.div, { initial: false, animate: isCollapsed ? { height: 0, opacity: 0 } : { height: "auto", opacity: 1 }, transition: { duration: 0.2, ease: [0.23, 1, 0.32, 1] }, className: "overflow-hidden flex flex-col gap-2", children: children })) : (children)] }) }));
+});

package/dist/components/input/input-time.d.ts

@@ -0,0 +1,11 @@
+export type InputTimeArgs = {
+    selected?: Date;
+    onChange: (date: Date) => void;
+    disabled?: boolean;
+    className?: string;
+    minDate?: Date;
+    maxDate?: Date;
+    align?: "start" | "center" | "end";
+};
+export declare function InputTime(props: InputTimeArgs): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=input-time.d.ts.map

package/dist/components/input/input-time.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-time.d.ts","sourceRoot":"","sources":["../../../src/components/input/input-time.tsx"],"names":[],"mappings":"AAUA,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,CAAC,EAAE,IAAI,CAAC;IAEhB,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;CACpC,CAAC;AAEF,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,2CA4D7C"}

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

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getHours, isAfter, isBefore, setHours, startOfHour } from "date-fns";
+import { ChevronDown } from "lucide-react";
+import { Button } from "../button/index.js";
+import { Dropdown, DropdownContent, DropdownItem, DropdownTrigger } from "../dropdown/index.js";
+import { cn } from "#style";
+function formatTime24(date) {
+    return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", hour12: false });
+}
+export function InputTime(props) {
+    const { selected, onChange, disabled, minDate, maxDate, className, align = "start" } = props;
+    const baseDate = selected ?? new Date();
+    const options = Array.from({ length: 24 }, (_, hour) => {
+        const d = setHours(startOfHour(baseDate), hour);
+        const minCheck = minDate ? startOfHour(minDate) : undefined;
+        const maxCheck = maxDate ? startOfHour(maxDate) : undefined;
+        const isDisabled = Boolean(minCheck && isBefore(d, minCheck)) || Boolean(maxCheck && isAfter(d, maxCheck));
+        return {
+            value: d.toISOString(),
+            label: formatTime24(d),
+            disabled: isDisabled,
+        };
+    });
+    const selectedValue = selected instanceof Date
+        ? (options.find((opt) => getHours(new Date(opt.value)) === getHours(selected))?.value ?? "")
+        : "";
+    const selectedLabel = selectedValue ? (options.find((opt) => opt.value === selectedValue)?.label ?? "") : "";
+    return (_jsxs(Dropdown, { children: [_jsx(DropdownTrigger, { asChild: true, children: _jsxs(Button, { variant: "tertiary", size: "base", rounded: "md", className: cn("w-fit min-w-32 justify-between", !selectedLabel && "text-muted-foreground", className), disabled: disabled, children: [selectedLabel || "Select hour", _jsx(ChevronDown, { className: "size-4 shrink-0 opacity-50" })] }) }), _jsx(DropdownContent, { align: align, children: options.map((opt) => (_jsx(DropdownItem, { disabled: opt.disabled, selected: opt.value === selectedValue, onSelect: () => {
+                        const dt = new Date(opt.value);
+                        if (!Number.isNaN(dt.getTime())) {
+                            onChange(dt);
+                        }
+                    }, children: opt.label }, opt.value))) })] }));
+}

package/dist/components/input/phone-input.d.ts

@@ -0,0 +1,22 @@
+import type { CountryCode } from "libphonenumber-js";
+export type CountryOption = {
+    iso: CountryCode;
+    name?: string;
+    callingCode: string;
+};
+export type PhoneInputProps = {
+    id?: string;
+    countries: CountryOption[];
+    value?: string;
+    country?: CountryOption;
+    onChange: (phone: string, country: CountryOption, valid: boolean) => void;
+    disabled?: boolean;
+    error?: string;
+    label?: string | null;
+    required?: boolean;
+    className?: string;
+    parentClassName?: string;
+    containerClassName?: string;
+};
+export declare function PhoneInput(props: PhoneInputProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=phone-input.d.ts.map

package/dist/components/input/phone-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"phone-input.d.ts","sourceRoot":"","sources":["../../../src/components/input/phone-input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAUrD,MAAM,MAAM,aAAa,GAAG;IAC1B,GAAG,EAAE,WAAW,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,aAAa,EAAE,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,2CAsOhD"}