/* Travel Pals e-Visa — UI primitives (exports components to window) */ /* global React */ const { useState, useRef, useEffect } = React; /* ---------------- icons ---------------- */ const I = { lock: , shield: , check: , checkc: , arrowR: , arrowL: , upload: , scan: , info: , warn: , edit: , user: , spark: , card: }; function Eyebrow({ n, children }) { return

{n}{children}

; } function Group({ title, children }) { return (

{title &&

{title}

} {children}

); } function Note({ kind = "info", children }) { return

{kind === "warn" ? I.warn : I.info}

{children}

; } /* ---------------- field wrapper ---------------- */ function Field({ label, req, opt, hint, error, col = 6, children }) { return (

{label && ( {label}{req && *} {opt && (optional)} )} {children} {hint && !error &&

{hint}

} {error &&

{I.warn}{error}

}

); } function Text({ value, onChange, placeholder, autofilled, type = "text", disabled, ...p }) { return ( onChange(e.target.value)} /> ); } function Area({ value, onChange, placeholder, rows, ...p }) { return (

onChange(e.target.value)} />
    </Field>
  );
}

function DateF({ value, onChange, min, max, autofilled, ...p }) {
  return (
    <Field {...p}>
      <input className={"tp-input" + (autofilled ? " autofilled" : "")} type="date"
        value={value || ""} min={min} max={max} onChange={(e) => onChange(e.target.value)} />
    </Field>
  );
}

/* segmented chips (single select) */
function Seg({ value, onChange, options, yn, col = 6, ...p }) {
  return (
    <Field col={col} {...p}>
      <div className={"tp-seg" + (yn ? " yn" : "")}>
        {options.map((o) => {
          const val = typeof o === "string" ? o : o.value;
          const lab = typeof o === "string" ? o : o.label;
          const on = value === val;
          return (
            <button type="button" key={val} className="tp-chip" aria-pressed={on}
              onClick={() => onChange(val)}>
              {on && <span className="tick">{I.check}</span>}{lab}
            </button>
          );
        })}
      </div>
    </Field>
  );
}

function YesNo({ value, onChange, label, req, hint, error, col = 12 }) {
  return (
    <Seg col={col} label={label} req={req} hint={hint} error={error}
      yn value={value} onChange={onChange} options={[{ value: "Yes", label: "Yes" }, { value: "No", label: "No" }]} />
  );
}

function Check({ checked, onChange, children }) {
  return (
    <label className="tp-check">
      <input type="checkbox" checked={!!checked} onChange={(e) => onChange(e.target.checked)} />
      <span className="box">{I.check}</span>
      <span>{children}</span>
    </label>
  );
}

/* radio cards (visa sub-type) */
function RadioCards({ value, onChange, items }) {
  return (
    <div className="tp-cards c3">
      {items.map((it) => (
        <div key={it.id} className={"tp-radio-card" + (it.popular ? " is-pop" : "")} role="button" tabIndex={0}
          aria-pressed={value === it.id} onClick={() => onChange(it.id)}
          onKeyDown={(e) => (e.key === "Enter" || e.key === " ") && onChange(it.id)}>
          <span className="mark" />
          {it.popular && <span className="rc-pop">Popular</span>}
          <div className="rc-t">{it.name}</div>
          <div className="rc-d">{it.entries} · {it.duration}</div>
          <div className="rc-d" style={{ marginTop: 6, fontWeight: 600, color: "var(--ink)" }}>
            Govt fee {it.fee}
          </div>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, {
  TPI: I, Eyebrow, Group, Note, Field, Text, Area, Select, DateF, Seg, YesNo, Check, RadioCards
});