@manta-eu/react 0.1.0

package/dist/components/hover-media/index.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+export type HoverMediaProps = {
+    src: string;
+    alt: string;
+    className?: string;
+    containerClassName?: string;
+    isVideo?: boolean;
+    autoPlay?: boolean;
+    children?: ReactNode;
+    height?: number;
+    width?: number;
+};
+export declare function HoverMedia(props: HoverMediaProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/hover-media/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/hover-media/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,MAAM,eAAe,GAAG;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,2CA0ChD"}

package/dist/components/hover-media/index.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Image } from "@unpic/react";
+import { cn } from "#style";
+export function HoverMedia(props) {
+    const { src, alt, className = "w-full h-full object-cover", containerClassName, isVideo = false, autoPlay = false, height, width, children, } = props;
+    return (_jsxs("div", { className: cn("relative", containerClassName), children: [isVideo ? (_jsx("video", { src: src, className: className, muted: true, loop: true, autoPlay: autoPlay, playsInline: true, preload: autoPlay ? "auto" : "metadata", onMouseEnter: (e) => {
+                    void e.currentTarget.play();
+                }, onMouseLeave: (e) => {
+                    if (!autoPlay) {
+                        e.currentTarget.pause();
+                        e.currentTarget.currentTime = 0;
+                    }
+                } })) : width && height ? (_jsx(Image, { src: src, alt: alt, width: width, height: height, layout: "constrained", className: className })) : (_jsx(Image, { src: src, alt: alt, layout: "fullWidth", className: className })), children] }));
+}

package/dist/components/input/ai-action-buttons.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+export type LoadingState = "refine" | "generate" | "remove";
+type AiActionButtonsArgs = {
+    refineContent?: ReactNode;
+    onAiComplete?: () => void;
+    isLoading?: boolean | LoadingState;
+    disabled?: boolean;
+    onPopoverOpenChange?: (_open: boolean) => void;
+    open?: boolean;
+    onOpenChange?: (_open: boolean) => void;
+    refineLabel?: string;
+    generateLabel?: string;
+    showGenerate?: boolean;
+    onRemove?: () => void;
+    removeLabel?: string;
+    className?: string;
+    refineButtonTestId?: string;
+    generateButtonTestId?: string;
+};
+export declare function AiActionButtons(props: AiActionButtonsArgs): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=ai-action-buttons.d.ts.map

package/dist/components/input/ai-action-buttons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-action-buttons.d.ts","sourceRoot":"","sources":["../../../src/components/input/ai-action-buttons.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQvC,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,UAAU,GAAG,QAAQ,CAAC;AAE5D,KAAK,mBAAmB,GAAG;IACzB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,GAAG,YAAY,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B,CAAC;AAOF,wBAAgB,eAAe,CAAC,KAAK,EAAE,mBAAmB,kDAmHzD"}

package/dist/components/input/ai-action-buttons.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { isPresent } from "@manta-eu/lib/present";
+import { Trash2, Wand } from "lucide-react";
+import { useEffect, useState } from "react";
+import { Button } from "../button/index.js";
+import { MantaIcon } from "../channel-icon/index.js";
+import { Loader } from "../loader/index.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover/index.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../tooltip/index.js";
+import { cn } from "#style";
+function isLoadingState(state, target) {
+    if (typeof state === "boolean")
+        return state;
+    return state === target;
+}
+export function AiActionButtons(props) {
+    const { refineContent, onAiComplete, isLoading = false, disabled = false, onPopoverOpenChange, open: controlledOpen, onOpenChange, refineLabel = "Refine content", generateLabel = "Generate content", showGenerate = false, onRemove, removeLabel = "Remove", className, refineButtonTestId, generateButtonTestId, } = props;
+    const [internalOpen, setInternalOpen] = useState(false);
+    const isControlled = controlledOpen !== undefined && onOpenChange !== undefined;
+    const isPopoverOpen = isControlled ? controlledOpen : internalOpen;
+    const isRefineLoading = isLoadingState(isLoading, "refine");
+    const isGenerateLoading = isLoadingState(isLoading, "generate");
+    const isRemoveLoading = isLoadingState(isLoading, "remove");
+    const handlePopoverOpenChange = (open) => {
+        if (open && disabled)
+            return;
+        if (!isControlled)
+            setInternalOpen(open);
+        onOpenChange?.(open);
+        onPopoverOpenChange?.(open);
+    };
+    useEffect(() => {
+        if ((disabled || isRefineLoading) && isPopoverOpen) {
+            if (!isControlled)
+                setInternalOpen(false);
+            onOpenChange?.(false);
+            onPopoverOpenChange?.(false);
+        }
+    }, [disabled, isRefineLoading, isPopoverOpen, isControlled, onOpenChange, onPopoverOpenChange]);
+    const showRefine = isPresent(refineContent);
+    const showGenerateButton = isPresent(onAiComplete) || showGenerate;
+    if (!showRefine && !showGenerateButton && !isPresent(onRemove))
+        return null;
+    return (_jsx(TooltipProvider, { delayDuration: 400, children: _jsxs("div", { className: cn("inline-flex items-center gap-1", className), children: [(showRefine || showGenerateButton) && (_jsxs(_Fragment, { children: [showRefine && (_jsxs(Popover, { open: isPopoverOpen, onOpenChange: handlePopoverOpenChange, children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "tertiary", size: "xs", rounded: "sm", iconOnly: true, "aria-label": refineLabel, icon: isRefineLoading ? Loader : Wand, disabled: disabled || isRefineLoading, "data-testid": refineButtonTestId }) }) }), _jsx(TooltipContent, { children: refineLabel })] }), _jsx(PopoverContent, { className: "w-80", children: refineContent })] })), showGenerateButton && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: "tertiary", size: "xs", rounded: "sm", iconOnly: true, "aria-label": generateLabel, onClick: onAiComplete, icon: isGenerateLoading ? Loader : MantaIcon, disabled: disabled || isGenerateLoading, "data-testid": generateButtonTestId }) }), _jsx(TooltipContent, { children: generateLabel })] }))] })), onRemove && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: "tertiary", size: "xs", rounded: "sm", iconOnly: true, "aria-label": removeLabel, onClick: onRemove, icon: isRemoveLoading ? Loader : Trash2, disabled: isRemoveLoading }) }), _jsx(TooltipContent, { children: removeLabel })] }))] }) }));
+}

package/dist/components/input/country-selector.d.ts

@@ -0,0 +1,15 @@
+export type CountrySelectorSharedProps = {
+    selectedCountryCodes: string[];
+    label?: string;
+    className?: string;
+    required?: boolean;
+};
+export type CountrySelectorProps = (CountrySelectorSharedProps & {
+    disabled: true;
+    onChange?: (countryCodes: string[]) => void;
+}) | (CountrySelectorSharedProps & {
+    disabled?: false;
+    onChange: (countryCodes: string[]) => void;
+});
+export declare function CountrySelector(props: CountrySelectorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=country-selector.d.ts.map

package/dist/components/input/country-selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"country-selector.d.ts","sourceRoot":"","sources":["../../../src/components/input/country-selector.tsx"],"names":[],"mappings":"AAUA,MAAM,MAAM,0BAA0B,GAAG;IACvC,oBAAoB,EAAE,MAAM,EAAE,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAC5B,CAAC,0BAA0B,GAAG;IAC5B,QAAQ,EAAE,IAAI,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC7C,CAAC,GACF,CAAC,0BAA0B,GAAG;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,QAAQ,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC5C,CAAC,CAAC;AAqCP,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,2CAoK1D"}

package/dist/components/input/country-selector.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, Pencil, Plus, X } from "lucide-react";
+import { useMemo, useState } from "react";
+import { Button } from "../button/index.js";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "../command/index.js";
+import { getIso2Territories, getIso2Territory } from "#lib/iso2-territories";
+import { searchItems } from "#lib/search";
+import { cn } from "#style";
+function FlagIcon(props) {
+    const { iso2, className } = props;
+    const [hasError, setHasError] = useState(false);
+    const iso2Upper = iso2.toUpperCase();
+    if (hasError) {
+        return (_jsx("span", { "aria-hidden": true, className: cn("inline-flex h-3.5 min-w-5 items-center justify-center rounded-sm border border-default-border bg-muted px-0.5 typography-tiny leading-none text-muted-foreground", className), children: iso2Upper }));
+    }
+    return (_jsx("img", { src: `https://flagcdn.com/${iso2Upper.toLowerCase()}.svg`, alt: `Flag of ${iso2Upper}`, "aria-hidden": true, className: cn("w-5 h-3.5 object-cover rounded-sm", className), onError: () => setHasError(true) }));
+}
+export function CountrySelector(props) {
+    const label = props.label ?? "Targeting Countries";
+    const { className, selectedCountryCodes, required, disabled } = props;
+    const onChange = disabled ? (props.onChange ?? (() => { })) : props.onChange;
+    const [editing, setEditing] = useState(false);
+    const [search, setSearch] = useState("");
+    const selectedCountryCodesUpper = useMemo(() => selectedCountryCodes.map((c) => c.toUpperCase()), [selectedCountryCodes]);
+    const selectedCountrySetUpper = useMemo(() => new Set(selectedCountryCodesUpper), [selectedCountryCodesUpper]);
+    const searchResults = useMemo(() => {
+        if (disabled)
+            return [];
+        const query = search.trim();
+        if (query.length < 2)
+            return [];
+        return searchItems([...getIso2Territories()], query, { keys: ["name", "iso2"] }).slice(0, 6);
+    }, [disabled, search]);
+    const handleAddCountry = (countryIso2) => {
+        const normalizedIso2 = countryIso2.toUpperCase();
+        if (selectedCountrySetUpper.has(normalizedIso2))
+            return;
+        onChange([...selectedCountryCodes, normalizedIso2]);
+        setSearch("");
+    };
+    const handleRemoveCountry = (countryIso2) => {
+        const normalizedIso2 = countryIso2.toUpperCase();
+        onChange(selectedCountryCodes.filter((code) => code.toUpperCase() !== normalizedIso2));
+    };
+    return (_jsxs("div", { className: cn("flex flex-col gap-2", className), children: [_jsx("p", { className: "typography-small text-default-foreground", children: label }), editing && !disabled ? (_jsxs("div", { className: "space-y-3", children: [_jsxs(Command, { shouldFilter: false, className: "border border-default-border", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex-1", children: _jsx(CommandInput, { placeholder: "Search countries...", value: search, onValueChange: setSearch, "aria-label": "Search countries", showEscHint: false, className: "form-input h-10" }) }), _jsx("button", { type: "button", "aria-label": "Done editing countries", onClick: () => {
+                                            setEditing(false);
+                                            setSearch("");
+                                        }, className: "p-2 text-muted-foreground hover:text-default-foreground transition-colors duration-150 ease motion-reduce:transition-none", children: _jsx(X, { className: "size-4" }) })] }), _jsxs(CommandList, { children: [search.trim().length >= 2 ? _jsx(CommandEmpty, { children: "No countries found." }) : null, searchResults.length > 0 ? (_jsx(CommandGroup, { children: searchResults.map((country) => {
+                                            const codeUpper = country.iso2.toUpperCase();
+                                            const isSelected = selectedCountrySetUpper.has(codeUpper);
+                                            const displayName = country.name ?? codeUpper;
+                                            return (_jsxs(CommandItem, { value: codeUpper, onSelect: () => handleAddCountry(codeUpper), disabled: isSelected, className: isSelected ? "opacity-50 cursor-not-allowed" : undefined, "aria-disabled": isSelected, children: [_jsx(FlagIcon, { iso2: codeUpper }), _jsx("span", { className: "flex-1", children: displayName }), isSelected ? (_jsx(Check, { className: "size-4 text-muted-foreground" })) : (_jsx(Plus, { className: "size-4 text-muted-foreground" }))] }, country.iso2));
+                                        }) })) : null] })] }), selectedCountryCodesUpper.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2", children: selectedCountryCodesUpper.map((codeUpper) => {
+                            const country = getIso2Territory(codeUpper);
+                            const displayName = country?.name ?? codeUpper;
+                            return (_jsxs("div", { className: "flex items-center gap-1.5 px-2.5 py-1 rounded-full border border-default-border bg-card typography-small", children: [_jsx(FlagIcon, { iso2: codeUpper }), _jsx("span", { children: displayName }), _jsx("button", { type: "button", onClick: () => handleRemoveCountry(codeUpper), "aria-label": `Remove ${displayName}`, className: "hover:text-error-foreground transition-colors duration-150 ease motion-reduce:transition-none", children: _jsx(X, { className: "size-3" }) })] }, codeUpper));
+                        }) }))] })) : (_jsxs("div", { className: "flex flex-wrap gap-2", children: [selectedCountryCodesUpper.map((codeUpper) => {
+                        const country = getIso2Territory(codeUpper);
+                        const displayName = country?.name ?? codeUpper;
+                        return (_jsxs("div", { className: "flex items-center gap-1.5 px-2.5 py-1 rounded-full border border-default-border bg-card typography-small", children: [_jsx(FlagIcon, { iso2: codeUpper }), _jsx("span", { children: displayName })] }, codeUpper));
+                    }), !disabled && !editing && (_jsx(Button, { variant: "ghost", size: "xs", onClick: () => {
+                            setEditing(true);
+                            setSearch("");
+                        }, iconOnly: true, icon: Pencil, "aria-label": "Edit countries" }))] })), required && selectedCountryCodes.length === 0 && (_jsx("p", { className: "typography-tiny text-muted-foreground mt-2", children: "At least one country must be selected" }))] }));
+}

package/dist/components/input/date-range-presets.d.ts

@@ -0,0 +1,4 @@
+import type { DateRange } from "react-day-picker";
+export declare function getLast14DaysDateRange(): DateRange;
+export declare function getLast30DaysDateRange(): DateRange;
+//# sourceMappingURL=date-range-presets.d.ts.map

package/dist/components/input/date-range-presets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-range-presets.d.ts","sourceRoot":"","sources":["../../../src/components/input/date-range-presets.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAElD,wBAAgB,sBAAsB,IAAI,SAAS,CAKlD;AAED,wBAAgB,sBAAsB,IAAI,SAAS,CAKlD"}

package/dist/components/input/date-range-presets.js

@@ -0,0 +1,13 @@
+import { endOfToday, startOfToday, subDays } from "date-fns";
+export function getLast14DaysDateRange() {
+    return {
+        from: subDays(startOfToday(), 13),
+        to: endOfToday(),
+    };
+}
+export function getLast30DaysDateRange() {
+    return {
+        from: subDays(startOfToday(), 29),
+        to: endOfToday(),
+    };
+}

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

@@ -0,0 +1,36 @@
+import { Input, type InputArgs } from "./input-field.js";
+import { InputGroup, useInputGroup, type InputGroupRef, type InputGroupInputRef } from "./input-group.js";
+export type { InputArgs, InputGroupRef, InputGroupInputRef };
+export type InputProps = InputArgs;
+export { Input, InputGroup, useInputGroup };
+export type SearchInputArgs = Omit<InputArgs, "variant">;
+export declare function SearchInput(props: SearchInputArgs): import("react/jsx-runtime").JSX.Element;
+export type CurrencyInputArgs = Omit<InputArgs, "variant"> & {
+    currencySymbol: string;
+};
+export declare function CurrencyInput(props: CurrencyInputArgs): import("react/jsx-runtime").JSX.Element;
+export type MultiplierInputArgs = Omit<InputArgs, "variant">;
+export declare function MultiplierInput(props: MultiplierInputArgs): import("react/jsx-runtime").JSX.Element;
+export type { LoadingState } from "./ai-action-buttons.js";
+export { getLast14DaysDateRange, getLast30DaysDateRange } from "./date-range-presets.js";
+export { InputDate } from "./input-date.js";
+export { InputDateRange } from "./input-date-range.js";
+export { InputDateTime } from "./input-date-time.js";
+export { InputFile } from "./input-file.js";
+export { InputTime } from "./input-time.js";
+export { CountrySelector, type CountrySelectorProps } from "./country-selector.js";
+export { PhoneInput, type CountryOption } from "./phone-input.js";
+export { Textarea, type TextareaArgs, type TextareaProps } from "./textarea.js";
+export type { CountrySelectorSharedProps } from "./country-selector.js";
+export type { InputDateArgs } from "./input-date.js";
+export type { InputDateRangeProps } from "./input-date-range.js";
+export type { InputDateTimeProps } from "./input-date-time.js";
+export type { BaseInputArgs } from "./input-field.js";
+export type { InputFileArgs } from "./input-file.js";
+export type { InputGroupContextValue, InputGroupProps } from "./input-group.js";
+export type { InputTimeArgs } from "./input-time.js";
+export type { PhoneInputProps } from "./phone-input.js";
+export type { BaseTextareaArgs, RefineContentRenderArgs } from "./textarea.js";
+export { inputConfig } from "./input-field.js";
+export { textareaConfig } from "./textarea.js";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/input/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,KAAK,SAAS,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,KAAK,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAGvG,YAAY,EAAE,SAAS,EAAE,aAAa,EAAE,kBAAkB,EAAE,CAAC;AAC7D,MAAM,MAAM,UAAU,GAAG,SAAS,CAAC;AAEnC,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,CAAC;AAE5C,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;AAEzD,wBAAgB,WAAW,CAAC,KAAK,EAAE,eAAe,2CAEjD;AAED,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,GAAG;IAC3D,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,wBAAgB,aAAa,CAAC,KAAK,EAAE,iBAAiB,2CAuBrD;AAED,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;AAE7D,wBAAgB,eAAe,CAAC,KAAK,EAAE,mBAAmB,2CAEzD;AAED,YAAY,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AACtF,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAChF,OAAO,EAAE,UAAU,EAAE,KAAK,aAAa,EAAE,MAAM,eAAe,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,KAAK,YAAY,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAG7E,YAAY,EAAE,0BAA0B,EAAE,MAAM,oBAAoB,CAAC;AACrE,YAAY,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAC9D,YAAY,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAC5D,YAAY,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnD,YAAY,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,YAAY,EAAE,sBAAsB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAC7E,YAAY,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,YAAY,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAC5E,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/input/index.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Input } from "./input-field.js";
+import { InputGroup, useInputGroup } from "./input-group.js";
+import { cn } from "#style";
+export { Input, InputGroup, useInputGroup };
+export function SearchInput(props) {
+    return _jsx(Input, { variant: "search", ...props });
+}
+export function CurrencyInput(props) {
+    const { currencySymbol, className, size, ...rest } = props;
+    return (_jsx(Input, { variant: "currency", className: className, type: "number", step: "0.01", size: size, leadingElement: _jsx("span", { className: cn("absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none", size === "lg" ? "typography-body" : "typography-caption"), children: currencySymbol }), ...rest }));
+}
+export function MultiplierInput(props) {
+    return _jsx(Input, { variant: "multiplier", type: "number", step: "0.1", ...props });
+}
+export { getLast14DaysDateRange, getLast30DaysDateRange } from "./date-range-presets.js";
+export { InputDate } from "./input-date.js";
+export { InputDateRange } from "./input-date-range.js";
+export { InputDateTime } from "./input-date-time.js";
+export { InputFile } from "./input-file.js";
+export { InputTime } from "./input-time.js";
+export { CountrySelector } from "./country-selector.js";
+export { PhoneInput } from "./phone-input.js";
+export { Textarea } from "./textarea.js";
+export { inputConfig } from "./input-field.js";
+export { textareaConfig } from "./textarea.js";

package/dist/components/input/input-date-range.d.ts

@@ -0,0 +1,14 @@
+import type { DateRange } from "react-day-picker";
+export type InputDateRangeProps = {
+    initialDateRange?: DateRange;
+    onChange: (dateRange?: DateRange) => void;
+    minDate?: Date;
+    maxDate?: Date;
+    showPresets?: boolean;
+    align?: "center" | "start" | "end";
+    disabled?: boolean;
+    className?: string;
+    testId?: string;
+};
+export declare function InputDateRange(props: InputDateRangeProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=input-date-range.d.ts.map

package/dist/components/input/input-date-range.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-date-range.d.ts","sourceRoot":"","sources":["../../../src/components/input/input-date-range.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAkBlD,MAAM,MAAM,mBAAmB,GAAG;IAChC,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,QAAQ,EAAE,CAAC,SAAS,CAAC,EAAE,SAAS,KAAK,IAAI,CAAC;IAC1C,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAOF,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,2CA+OxD"}

package/dist/components/input/input-date-range.js

@@ -0,0 +1,143 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { endOfToday, endOfYear, startOfMonth, startOfToday, startOfYear, subDays, subYears } from "date-fns";
+import { CalendarDays, ChevronDown } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { Button } from "../button/index.js";
+import { Calendar } from "../calendar/index.js";
+import { Dropdown, DropdownContent, DropdownItem, DropdownTrigger } from "../dropdown/index.js";
+import { Popover, PopoverClose, PopoverContent, PopoverTrigger } from "../popover/index.js";
+import { getLast14DaysDateRange } from "./date-range-presets.js";
+import { cn } from "#style";
+function dateRangeEquals(a, b) {
+    if (a === b)
+        return true;
+    if (!a || !b)
+        return !a && !b;
+    const aFrom = a.from?.getTime();
+    const aTo = a.to?.getTime();
+    const bFrom = b.from?.getTime();
+    const bTo = b.to?.getTime();
+    return aFrom === bFrom && aTo === bTo;
+}
+export function InputDateRange(props) {
+    const { initialDateRange, onChange, minDate, maxDate = new Date(), showPresets = false, align = "start", disabled, className, testId, } = props;
+    const [dateRange, setDateRange] = useState(initialDateRange);
+    const [tempDateRange, setTempDateRange] = useState(dateRange);
+    const prevInitialDateRangeRef = useRef(initialDateRange);
+    const lastEmittedDateRangeRef = useRef(initialDateRange);
+    const [month, setMonth] = useState(initialDateRange?.from);
+    const [open, setOpen] = useState(false);
+    useEffect(() => {
+        if (!dateRangeEquals(initialDateRange, prevInitialDateRangeRef.current)) {
+            prevInitialDateRangeRef.current = initialDateRange;
+            setDateRange(initialDateRange);
+            setTempDateRange(initialDateRange);
+        }
+    }, [initialDateRange]);
+    const lastYear = subYears(Date.now(), 1);
+    useEffect(() => {
+        if (!onChange)
+            return;
+        if (!dateRangeEquals(dateRange, lastEmittedDateRangeRef.current)) {
+            lastEmittedDateRangeRef.current = dateRange;
+            onChange(dateRange);
+        }
+    }, [dateRange, onChange]);
+    const presetButtons = [
+        {
+            label: "Today",
+            range: { from: startOfToday(), to: endOfToday() },
+        },
+        {
+            label: "Yesterday",
+            range: { from: subDays(startOfToday(), 1), to: subDays(endOfToday(), 1) },
+        },
+        {
+            label: "Last 7 Days",
+            range: {
+                from: subDays(startOfToday(), 6),
+                to: endOfToday(),
+            },
+        },
+        {
+            label: "Last 14 Days",
+            range: getLast14DaysDateRange(),
+        },
+        {
+            label: "Last 30 Days",
+            range: {
+                from: subDays(startOfToday(), 29),
+                to: endOfToday(),
+            },
+        },
+        {
+            label: "Last 90 Days",
+            range: {
+                from: subDays(startOfToday(), 89),
+                to: endOfToday(),
+            },
+        },
+        {
+            label: "Last 365 Days",
+            range: {
+                from: subDays(startOfToday(), 365),
+                to: endOfToday(),
+            },
+        },
+        {
+            label: "Last Year",
+            range: {
+                from: startOfYear(lastYear),
+                to: endOfYear(lastYear),
+            },
+        },
+        {
+            label: "This Year",
+            range: {
+                from: startOfYear(Date.now()),
+                to: endOfToday(),
+            },
+        },
+        {
+            label: "All Time",
+            range: undefined,
+        },
+    ];
+    const matchingPreset = presetButtons.find((preset) => {
+        if (!dateRange && !preset.range)
+            return false;
+        return dateRangeEquals(preset.range, dateRange);
+    });
+    const tempMatchingPreset = presetButtons.find((preset) => dateRangeEquals(preset.range, tempDateRange));
+    const handlePresetSelect = (preset) => {
+        setTempDateRange(preset.range);
+        if (preset.range?.from) {
+            setMonth(startOfMonth(preset.range.from));
+        }
+    };
+    const getButtonText = () => {
+        if (matchingPreset)
+            return matchingPreset.label;
+        if (dateRange?.from && dateRange?.to) {
+            return `${dateRange.from.toLocaleDateString(undefined, {
+                month: "short",
+                day: "numeric",
+                year: "2-digit",
+            })} - ${dateRange.to.toLocaleDateString(undefined, { month: "short", day: "numeric", year: "2-digit" })}`;
+        }
+        return undefined;
+    };
+    const buttonText = getButtonText();
+    return (_jsxs(Popover, { open: open, onOpenChange: (nextOpen) => {
+            if (nextOpen) {
+                setTempDateRange(dateRange);
+                setMonth(dateRange?.from ? startOfMonth(dateRange.from) : undefined);
+            }
+            setOpen(nextOpen);
+        }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "tertiary", rounded: "md", disabled: disabled, className: cn(className, "px-3 whitespace-nowrap"), "data-testid": testId ? `${testId}-trigger` : undefined, children: [_jsx(CalendarDays, { strokeWidth: 1.5 }), buttonText ?? "All time", _jsx(ChevronDown, { className: "size-md text-muted-foreground" })] }) }), _jsx(PopoverContent, { className: "flex flex-col w-auto overflow-hidden gap-2 p-0 rounded-[20px]", align: align, children: _jsxs("div", { className: "flex flex-col md:flex-row", children: [showPresets && (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex flex-col gap-4 items-center pt-4 rounded-tr-[20px] rounded-br-[20px] md:hidden", children: _jsxs(Dropdown, { children: [_jsx(DropdownTrigger, { asChild: true, children: _jsxs(Button, { variant: "tertiary", size: "base", "data-testid": testId ? `${testId}-preset-dropdown` : undefined, children: [_jsx(CalendarDays, { strokeWidth: 1.5 }), tempMatchingPreset?.label ?? "Presets", _jsx(ChevronDown, { className: "size-md text-muted-foreground" })] }) }), _jsx(DropdownContent, { align: "start", className: "max-h-[min(60vh,400px)] overflow-y-auto", children: presetButtons.map((preset) => (_jsx(DropdownItem, { selected: dateRangeEquals(preset.range, tempDateRange), onClick: () => handlePresetSelect(preset), children: preset.label }, preset.label))) })] }) }), _jsx("div", { className: "hidden flex-col gap-4 items-center bg-muted rounded-tr-[20px] rounded-br-[20px] md:flex", children: _jsxs("div", { className: "flex flex-col p-6 gap-y-4", "data-testid": testId ? `${testId}-presets` : undefined, children: [_jsx("span", { className: "typography-small text-muted-foreground", children: "Presets" }), _jsx("div", { className: "grid", children: presetButtons.map((preset) => (_jsx(Button, { variant: "ghost", className: cn("justify-start hover:bg-accent typography-small! transition-all", dateRangeEquals(preset.range, tempDateRange) && "bg-accent w-fit"), label: preset.label, onClick: () => handlePresetSelect(preset) }, preset.label))) })] }) })] })), _jsxs("div", { className: "grid p-6 gap-y-4", children: [_jsx(Calendar, { className: "border-none shadow-none p-0!", mode: "range", month: month, onMonthChange: setMonth, selected: tempDateRange, onSelect: setTempDateRange, fixedWeeks: true, showOutsideDays: true, disabled: {
+                                        before: minDate,
+                                        after: maxDate,
+                                    } }), _jsxs("div", { className: "flex justify-end gap-2 items-end", children: [_jsx(PopoverClose, { asChild: true, children: _jsx(Button, { variant: "tertiary", size: "sm", children: "Cancel" }) }), _jsx(PopoverClose, { asChild: true, children: _jsx(Button, { variant: "secondary", size: "sm", onClick: () => {
+                                                    setDateRange(tempDateRange);
+                                                }, children: "Apply" }) })] })] })] }) })] }));
+}

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

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

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

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

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { InputDate } from "./input-date.js";
+import { InputTime } from "./input-time.js";
+export function InputDateTime(props) {
+    return (_jsxs("span", { id: props.id, className: "flex items-center gap-2", children: [_jsx(InputDate, { ...props }), _jsx(InputTime, { ...props })] }));
+}

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

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

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

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

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

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getHours, getMinutes, setHours, setMinutes, startOfDay } from "date-fns";
+import { Calendar as CalendarBlank, ChevronDown } from "lucide-react";
+import { Button } from "../button/index.js";
+import { Calendar } from "../calendar/index.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover/index.js";
+import { cn } from "#style";
+export function InputDate(props) {
+    const { selected, onChange, minDate = startOfDay(new Date()), maxDate, disabled, className, align = "start" } = props;
+    function handleOnChange(date) {
+        if (!date)
+            return;
+        const originalDate = selected ?? new Date();
+        const hours = getHours(originalDate);
+        const minutes = getMinutes(originalDate);
+        const withHours = setHours(date, hours);
+        const withMinutes = setMinutes(withHours, minutes);
+        onChange(withMinutes);
+    }
+    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { rounded: "md", variant: "tertiary", disabled: disabled, className: cn(className, "px-3 whitespace-nowrap"), children: [_jsx(CalendarBlank, { className: "size-md" }), selected ? (selected.toLocaleDateString(undefined, {
+                            month: "short",
+                            day: "numeric",
+                            year: "2-digit",
+                        })) : (_jsx("span", { className: "text-muted-foreground", children: "Select date" })), _jsx(ChevronDown, { className: "size-md text-muted-foreground" })] }) }), _jsx(PopoverContent, { className: "w-auto overflow-hidden p-0 rounded-xl-v4", align: align, children: _jsx(Calendar, { className: "w-full", mode: "single", required: true, defaultMonth: selected, selected: selected, onSelect: handleOnChange, fixedWeeks: true, showOutsideDays: true, disabled: {
+                        before: minDate,
+                        after: maxDate,
+                    } }) })] }));
+}