Currency Input

1"use client";
2 
3import { CircleXFilledIcon } from "blode-icons-react";
4import type * as React from "react";
5import CurrencyInputField from "react-currency-input-field";
6import type { CurrencyInputProps } from "react-currency-input-field";
7 
8import { cn } from "@/lib/utils";
9 
10export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
11  clearable?: boolean;
12  clearClassName?: string;
13  hasError?: boolean;
14  leftAddon?: React.ReactNode | null;
15  leftControl?: React.ReactNode | null;
16  onClear?: () => void;
17  rightAddon?: React.ReactNode | null;
18  rightControl?: React.ReactNode | null;
19}
20 
21export const CurrencyInput = ({
22  className,
23  clearClassName,
24  hasError,
25  clearable,
26  onClear,
27  leftAddon,
28  rightAddon,
29  leftControl,
30  rightControl,
31  ...props
32}: CurrencyInputProps & InputProps) => (
33  <label
34    className={cn("relative w-full", {
35      "input-group": !!leftAddon || !!rightAddon,
36    })}
37    htmlFor={props.id}
38  >
39    {leftAddon && <span className="shrink-0 cursor-pointer">{leftAddon}</span>}
40 
41    {leftControl && (
42      <div className="absolute left-3 flex h-full flex-row place-items-center items-center justify-center">
43        {leftControl}
44      </div>
45    )}
46 
47    <div className="w-full">
48      <CurrencyInputField
49        aria-invalid={hasError || undefined}
50        className={cn(
51          "input flex h-[var(--field-height)] w-full rounded-[var(--field-radius)] border border-input bg-card px-[var(--field-padding-x)] py-[var(--field-padding-y)] font-normal font-sans text-base text-foreground leading-snug shadow-input placeholder:text-placeholder-foreground focus:border-ring focus:outline-hidden focus:ring-2 focus:ring-ring/15 focus:ring-offset-1 focus:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
52          {
53            "border-destructive-foreground": hasError,
54            "pr-9": clearable && !!props.value,
55          },
56          className,
57        )}
58        {...props}
59      />
60 
61      {clearable && !!props.value && (
62        <div className="absolute top-0 right-0 flex flex-row gap-1 pr-3">
63          <button
64            aria-label="clear input"
65            className={cn(
66              "flex h-[var(--field-height)] cursor-pointer items-center justify-center p-0! text-muted-foreground",
67              clearClassName,
68            )}
69            onClick={() => onClear?.()}
70            tabIndex={-1}
71            type="button"
72          >
73// … truncated