jengacore components · @jengacore/currency-input

CurrencyInput

Currency addon in mono on the left, value right-aligned with tabular figures.

Net debit cap

USD

Alert at 80% of the cap.

MSISDN

Enter 12 digits including country code.

Install

terminal

npx shadcn@latest add @jengacore/currency-input

Without the namespace configured: npx shadcn@latest add https://ui.jengacore.com/r/<new-york-v4|base-nova>/currency-input.json

Registry dependencies

@jengacore/input

Source

components/jc/currency-input.tsx

import * as React from "react"

import { Input } from "@/components/ui/input"
import { cn } from "@/lib/utils"

/** Amount field: currency addon on the left in mono, value right-aligned with tabular figures. */
export function CurrencyInput({ currency, className, ...props }: React.ComponentProps<"input"> & { currency: string }) {
  return (
    <div
      data-slot="currency-input"
      className="flex rounded-md border border-input bg-card transition-[border-color,box-shadow] duration-fast ease-jc focus-field-within"
    >
      <span className="inline-flex items-center rounded-l-md border-r border-input bg-muted px-2.5 font-mono text-xs font-medium text-muted-foreground">
        {currency}
      </span>
      <Input
        inputMode="decimal"
        className={cn(
          "rounded-l-none border-0 text-right text-base font-medium tabular-nums focus-visible:shadow-none [&[aria-invalid=true]]:shadow-none",
          className
        )}
        {...props}
      />
    </div>
  )
}