@payglocal_ui/flux-ui 0.1.0

package/src/code.tsx

@@ -0,0 +1,154 @@
+"use client";
+
+import { cn } from "./utils";
+import { forwardRef, type HTMLAttributes, useState, useCallback } from "react";
+import { Check, Copy } from "lucide-react";
+
+// ---------------------------------------------------------------------------
+// Code – inline
+// ---------------------------------------------------------------------------
+
+export type CodeProps = HTMLAttributes<HTMLElement>;
+
+export const Code = forwardRef<HTMLElement, CodeProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <code
+        ref={ref}
+        className={cn(
+          "rounded-md bg-muted px-1.5 py-0.5 font-mono text-[13px] text-foreground ring-1 ring-border",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </code>
+    );
+  }
+);
+Code.displayName = "Code";
+
+// ---------------------------------------------------------------------------
+// CodeBlock – multi-line
+// ---------------------------------------------------------------------------
+
+export interface CodeBlockProps extends HTMLAttributes<HTMLDivElement> {
+  /** The raw code string to display and optionally copy. */
+  code: string;
+  /** Optional filename shown in the header. */
+  filename?: string;
+  /** Optional language label shown as a badge in the header. */
+  language?: string;
+  /** Hide the copy button. Defaults to false. */
+  hideCopy?: boolean;
+}
+
+export const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
+  (
+    {
+      code,
+      filename,
+      language,
+      hideCopy = false,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const [copied, setCopied] = useState(false);
+
+    const handleCopy = useCallback(async () => {
+      try {
+        await navigator.clipboard.writeText(code);
+        setCopied(true);
+        const timer = setTimeout(() => setCopied(false), 2000);
+        return () => clearTimeout(timer);
+      } catch {
+        // Clipboard access denied — fail silently.
+      }
+    }, [code]);
+
+    const hasHeader = Boolean(filename || language);
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "relative overflow-hidden bg-[#0f1117] text-[#e5e7eb]",
+          hasHeader ? "rounded-xl" : "rounded-xl",
+          className
+        )}
+        {...props}
+      >
+        {/* Header */}
+        {hasHeader && (
+          <div className="flex items-center justify-between bg-[#1a1f2e] px-4 py-2 border-b border-[#2a3441]">
+            <div className="flex items-center gap-2.5">
+              {filename && (
+                <span className="text-[#9ca3af] text-xs font-mono">
+                  {filename}
+                </span>
+              )}
+              {language && (
+                <span className="rounded-md bg-[#2a3441] px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-[#6b7280]">
+                  {language}
+                </span>
+              )}
+            </div>
+            {!hideCopy && (
+              <CopyButton copied={copied} onClick={handleCopy} inHeader />
+            )}
+          </div>
+        )}
+
+        {/* Code area */}
+        <div className="relative">
+          <pre className="overflow-x-auto p-4 font-mono text-[13px] leading-relaxed">
+            <code>{code}</code>
+          </pre>
+
+          {/* Copy button (no header case) */}
+          {!hasHeader && !hideCopy && (
+            <div className="absolute top-3 right-3">
+              <CopyButton copied={copied} onClick={handleCopy} />
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+);
+CodeBlock.displayName = "CodeBlock";
+
+// ---------------------------------------------------------------------------
+// Internal: CopyButton
+// ---------------------------------------------------------------------------
+
+interface CopyButtonProps {
+  copied: boolean;
+  onClick: () => void;
+  inHeader?: boolean;
+}
+
+function CopyButton({ copied, onClick, inHeader = false }: CopyButtonProps) {
+  return (
+    <button
+      type="button"
+      aria-label={copied ? "Copied" : "Copy code"}
+      onClick={onClick}
+      className={cn(
+        "inline-flex items-center justify-center rounded-md transition-colors duration-pg-fast ease-pg-standard",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35",
+        inHeader
+          ? "size-6 text-[#6b7280] hover:bg-[#2a3441] hover:text-[#9ca3af]"
+          : "size-7 bg-[#1a1f2e]/80 text-[#6b7280] hover:bg-[#1a1f2e] hover:text-[#9ca3af]"
+      )}
+    >
+      {copied ? (
+        <Check className="size-3.5 text-green-400" />
+      ) : (
+        <Copy className="size-3.5" />
+      )}
+    </button>
+  );
+}

package/src/command.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import * as React from "react";
+import { Search } from "lucide-react";
+import { cn } from "./utils";
+
+export interface CommandProps extends React.HTMLAttributes<HTMLDivElement> {}
+export interface CommandInputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+export interface CommandListProps extends React.HTMLAttributes<HTMLDivElement> {}
+export interface CommandEmptyProps extends React.HTMLAttributes<HTMLDivElement> {}
+export interface CommandGroupProps extends React.HTMLAttributes<HTMLDivElement> { heading?: string; }
+export interface CommandItemProps extends React.HTMLAttributes<HTMLDivElement> { selected?: boolean; disabled?: boolean; onSelect?: () => void; }
+export interface CommandSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {}
+export interface CommandShortcutProps extends React.HTMLAttributes<HTMLSpanElement> {}
+
+const Command = React.forwardRef<HTMLDivElement, CommandProps>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("bg-card rounded-xl border border-border shadow-lg overflow-hidden", className)} {...props} />
+));
+Command.displayName = "Command";
+
+const CommandInput = React.forwardRef<HTMLInputElement, CommandInputProps>(({ className, ...props }, ref) => (
+  <div className="flex items-center gap-2 border-b border-border px-3 h-11">
+    <Search className="size-4 shrink-0 text-muted-foreground" aria-hidden />
+    <input ref={ref} className={cn("flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed", className)} {...props} />
+  </div>
+));
+CommandInput.displayName = "CommandInput";
+
+const CommandList = React.forwardRef<HTMLDivElement, CommandListProps>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("max-h-72 overflow-y-auto py-1", className)} role="listbox" {...props} />
+));
+CommandList.displayName = "CommandList";
+
+const CommandEmpty = React.forwardRef<HTMLDivElement, CommandEmptyProps>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("text-sm text-muted-foreground text-center py-6", className)} {...props} />
+));
+CommandEmpty.displayName = "CommandEmpty";
+
+const CommandGroup = React.forwardRef<HTMLDivElement, CommandGroupProps>(({ className, heading, children, ...props }, ref) => (
+  <div ref={ref} className={cn("px-1 py-1", className)} role="group" {...props}>
+    {heading && <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider">{heading}</div>}
+    {children}
+  </div>
+));
+CommandGroup.displayName = "CommandGroup";
+
+const CommandItem = React.forwardRef<HTMLDivElement, CommandItemProps>(({ className, selected, disabled, onSelect, children, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="option"
+    aria-selected={selected}
+    aria-disabled={disabled}
+    onClick={disabled ? undefined : onSelect}
+    className={cn(
+      "flex items-center gap-2 px-2 py-1.5 rounded-md text-sm cursor-pointer transition-colors duration-pg-fast ease-pg-standard select-none",
+      selected ? "bg-muted text-foreground" : "text-foreground hover:bg-muted",
+      disabled && "pointer-events-none opacity-50",
+      className
+    )}
+    {...props}
+  >
+    {children}
+  </div>
+));
+CommandItem.displayName = "CommandItem";
+
+const CommandSeparator = React.forwardRef<HTMLDivElement, CommandSeparatorProps>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("h-px bg-border my-1 -mx-1", className)} {...props} />
+));
+CommandSeparator.displayName = "CommandSeparator";
+
+const CommandShortcut = React.forwardRef<HTMLSpanElement, CommandShortcutProps>(({ className, ...props }, ref) => (
+  <span ref={ref} className={cn("ml-auto text-xs text-muted-foreground tracking-widest", className)} {...props} />
+));
+CommandShortcut.displayName = "CommandShortcut";
+
+export { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator, CommandShortcut };

package/src/country-select.tsx

@@ -0,0 +1,242 @@
+"use client";
+
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { Check, ChevronDown, Search } from "lucide-react";
+import { cn } from "./utils";
+
+export interface Country {
+  code: string;
+  name: string;
+  flag: string;
+  dialCode: string;
+}
+
+export const COUNTRIES: Country[] = [
+  { code: "US", name: "United States", flag: "🇺🇸", dialCode: "+1" },
+  { code: "GB", name: "United Kingdom", flag: "🇬🇧", dialCode: "+44" },
+  { code: "IN", name: "India", flag: "🇮🇳", dialCode: "+91" },
+  { code: "AU", name: "Australia", flag: "🇦🇺", dialCode: "+61" },
+  { code: "CA", name: "Canada", flag: "🇨🇦", dialCode: "+1" },
+  { code: "DE", name: "Germany", flag: "🇩🇪", dialCode: "+49" },
+  { code: "FR", name: "France", flag: "🇫🇷", dialCode: "+33" },
+  { code: "JP", name: "Japan", flag: "🇯🇵", dialCode: "+81" },
+  { code: "SG", name: "Singapore", flag: "🇸🇬", dialCode: "+65" },
+  { code: "AE", name: "United Arab Emirates", flag: "🇦🇪", dialCode: "+971" },
+  { code: "CN", name: "China", flag: "🇨🇳", dialCode: "+86" },
+  { code: "BR", name: "Brazil", flag: "🇧🇷", dialCode: "+55" },
+  { code: "MX", name: "Mexico", flag: "🇲🇽", dialCode: "+52" },
+  { code: "KR", name: "South Korea", flag: "🇰🇷", dialCode: "+82" },
+  { code: "IT", name: "Italy", flag: "🇮🇹", dialCode: "+39" },
+  { code: "ES", name: "Spain", flag: "🇪🇸", dialCode: "+34" },
+  { code: "NL", name: "Netherlands", flag: "🇳🇱", dialCode: "+31" },
+  { code: "SE", name: "Sweden", flag: "🇸🇪", dialCode: "+46" },
+  { code: "NO", name: "Norway", flag: "🇳🇴", dialCode: "+47" },
+  { code: "DK", name: "Denmark", flag: "🇩🇰", dialCode: "+45" },
+  { code: "FI", name: "Finland", flag: "🇫🇮", dialCode: "+358" },
+  { code: "CH", name: "Switzerland", flag: "🇨🇭", dialCode: "+41" },
+  { code: "NZ", name: "New Zealand", flag: "🇳🇿", dialCode: "+64" },
+  { code: "ZA", name: "South Africa", flag: "🇿🇦", dialCode: "+27" },
+  { code: "NG", name: "Nigeria", flag: "🇳🇬", dialCode: "+234" },
+  { code: "EG", name: "Egypt", flag: "🇪🇬", dialCode: "+20" },
+  { code: "PK", name: "Pakistan", flag: "🇵🇰", dialCode: "+92" },
+  { code: "BD", name: "Bangladesh", flag: "🇧🇩", dialCode: "+880" },
+  { code: "ID", name: "Indonesia", flag: "🇮🇩", dialCode: "+62" },
+  { code: "TH", name: "Thailand", flag: "🇹🇭", dialCode: "+66" },
+];
+
+export interface CountrySelectProps {
+  value?: string;
+  onValueChange?: (code: string) => void;
+  placeholder?: string;
+  showDialCode?: boolean;
+  disabled?: boolean;
+  className?: string;
+}
+
+const CountrySelect = React.forwardRef<HTMLButtonElement, CountrySelectProps>(
+  (
+    {
+      value,
+      onValueChange,
+      placeholder = "Select country",
+      showDialCode = false,
+      disabled = false,
+      className,
+    },
+    ref
+  ) => {
+    const [open, setOpen] = React.useState(false);
+    const [search, setSearch] = React.useState("");
+    const searchRef = React.useRef<HTMLInputElement>(null);
+
+    const selected = React.useMemo(
+      () => COUNTRIES.find((c) => c.code === value),
+      [value]
+    );
+
+    const filtered = React.useMemo(() => {
+      const q = search.trim().toLowerCase();
+      if (!q) return COUNTRIES;
+      return COUNTRIES.filter(
+        (c) =>
+          c.name.toLowerCase().includes(q) ||
+          c.code.toLowerCase().includes(q) ||
+          c.dialCode.includes(q)
+      );
+    }, [search]);
+
+    React.useEffect(() => {
+      if (open) {
+        // Delay focus until popover has mounted
+        const id = setTimeout(() => searchRef.current?.focus(), 0);
+        return () => clearTimeout(id);
+      } else {
+        setSearch("");
+      }
+    }, [open]);
+
+    return (
+      <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>
+        <PopoverPrimitive.Trigger asChild>
+          <button
+            ref={ref}
+            type="button"
+            disabled={disabled}
+            aria-expanded={open}
+            aria-haspopup="listbox"
+            className={cn(
+              "flex h-11 min-h-11 w-full items-center justify-between gap-2.5 rounded-lg border border-border bg-card px-4 text-[15px] text-foreground shadow-sm",
+              "transition-colors duration-pg-fast ease-pg-standard",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35",
+              "disabled:cursor-not-allowed disabled:opacity-50",
+              !selected && "text-muted-foreground",
+              className
+            )}
+          >
+            <span className="flex min-w-0 items-center gap-2.5">
+              {selected ? (
+                <>
+                  <span className="text-base leading-none" aria-hidden="true">
+                    {selected.flag}
+                  </span>
+                  <span className="truncate">{selected.name}</span>
+                  {showDialCode && (
+                    <span className="shrink-0 text-muted-foreground">
+                      {selected.dialCode}
+                    </span>
+                  )}
+                </>
+              ) : (
+                <span>{placeholder}</span>
+              )}
+            </span>
+            <ChevronDown
+              className={cn(
+                "h-4 w-4 shrink-0 text-muted-foreground opacity-70 transition-transform duration-pg-fast ease-pg-standard",
+                open && "rotate-180"
+              )}
+              aria-hidden="true"
+            />
+          </button>
+        </PopoverPrimitive.Trigger>
+
+        <PopoverPrimitive.Portal>
+          <PopoverPrimitive.Content
+            align="start"
+            sideOffset={6}
+            className={cn(
+              "z-[120] w-[var(--radix-popover-trigger-width)] min-w-[260px] rounded-xl border border-border bg-popover text-popover-foreground shadow-lg outline-none",
+              "data-[state=open]:opacity-100 data-[state=closed]:opacity-0 transition-opacity duration-150"
+            )}
+            onOpenAutoFocus={(e) => e.preventDefault()}
+          >
+            {/* Search */}
+            <div className="flex items-center gap-2 border-b border-border px-3 py-2.5">
+              <Search className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden="true" />
+              <input
+                ref={searchRef}
+                type="text"
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                placeholder="Search countries…"
+                className={cn(
+                  "flex-1 bg-transparent text-[14px] text-foreground placeholder:text-muted-foreground",
+                  "focus-visible:outline-none"
+                )}
+                aria-label="Search countries"
+              />
+              {search && (
+                <button
+                  type="button"
+                  onClick={() => setSearch("")}
+                  className="shrink-0 text-muted-foreground hover:text-foreground transition-colors duration-pg-fast ease-pg-standard"
+                  aria-label="Clear search"
+                >
+                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+                    <path d="M10.5 3.5L3.5 10.5M3.5 3.5L10.5 10.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+                  </svg>
+                </button>
+              )}
+            </div>
+
+            {/* List */}
+            <div
+              role="listbox"
+              aria-label="Countries"
+              className="max-h-64 overflow-y-auto p-1"
+            >
+              {filtered.length === 0 ? (
+                <div className="py-6 text-center text-sm text-muted-foreground">
+                  No countries found
+                </div>
+              ) : (
+                filtered.map((country) => {
+                  const isSelected = country.code === value;
+                  return (
+                    <button
+                      key={country.code}
+                      role="option"
+                      aria-selected={isSelected}
+                      type="button"
+                      onClick={() => {
+                        onValueChange?.(country.code);
+                        setOpen(false);
+                      }}
+                      className={cn(
+                        "flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left text-sm",
+                        "transition-colors duration-pg-fast ease-pg-standard",
+                        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35",
+                        "hover:bg-muted",
+                        isSelected && "bg-muted/60"
+                      )}
+                    >
+                      <span className="text-base leading-none" aria-hidden="true">
+                        {country.flag}
+                      </span>
+                      <span className="flex-1 truncate text-foreground">
+                        {country.name}
+                      </span>
+                      <span className="shrink-0 text-xs text-muted-foreground">
+                        {country.dialCode}
+                      </span>
+                      {isSelected && (
+                        <Check
+                          className="h-3.5 w-3.5 shrink-0 text-primary"
+                          aria-hidden="true"
+                        />
+                      )}
+                    </button>
+                  );
+                })
+              )}
+            </div>
+          </PopoverPrimitive.Content>
+        </PopoverPrimitive.Portal>
+      </PopoverPrimitive.Root>
+    );
+  }
+);
+CountrySelect.displayName = "CountrySelect";
+
+export { CountrySelect };

package/src/currency-amount-input.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { ChevronDown } from "lucide-react";
+import { cn } from "./utils";
+
+const CURRENCIES = ["USD", "INR", "EUR", "GBP", "SGD", "AED", "JPY"];
+
+interface CurrencyAmountInputProps {
+  currency: string;
+  amount: string;
+  onCurrencyChange: (currency: string) => void;
+  onAmountChange: (amount: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  required?: boolean;
+  currencies?: string[];
+  id?: string;
+}
+
+export function CurrencyAmountInput({
+  currency,
+  amount,
+  onCurrencyChange,
+  onAmountChange,
+  placeholder = "0.00",
+  disabled = false,
+  required = false,
+  currencies = CURRENCIES,
+  id,
+}: CurrencyAmountInputProps) {
+  return (
+    <div className="flex h-12 min-h-12 items-stretch overflow-hidden rounded-xl border border-border bg-card text-[15px] transition-all focus-within:border-muted-foreground/50 focus-within:ring-2 focus-within:ring-ring/20">
+      <div className="relative flex min-w-[5.25rem] shrink-0 items-center border-r border-border bg-muted/25 px-3">
+        <select
+          value={currency}
+          onChange={(e) => onCurrencyChange(e.target.value)}
+          disabled={disabled}
+          aria-label="Currency"
+          className={cn(
+            "h-full min-h-0 w-full min-w-0 cursor-pointer bg-transparent py-2 pl-1 pr-9 text-[15px] font-semibold text-foreground",
+            "focus:outline-none disabled:opacity-50",
+            "appearance-none [-webkit-appearance:none] [-moz-appearance:none]",
+            "[&::-ms-expand]:hidden"
+          )}
+        >
+          {currencies.map((c) => (
+            <option key={c} value={c}>
+              {c}
+            </option>
+          ))}
+        </select>
+        <ChevronDown
+          className="pointer-events-none absolute right-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground opacity-80"
+          aria-hidden
+        />
+      </div>
+
+      <input
+        id={id}
+        type="number"
+        value={amount}
+        onChange={(e) => onAmountChange(e.target.value)}
+        placeholder={placeholder}
+        disabled={disabled}
+        required={required}
+        min="0"
+        step="0.01"
+        className="min-h-0 min-w-0 flex-1 bg-transparent px-4 py-3 text-[15px] tabular-nums text-foreground placeholder:text-muted-foreground focus:outline-none disabled:opacity-50"
+      />
+    </div>
+  );
+}