@rinzai/zen 0.5.0 → 0.6.0

package/dist/inset/index.js

@@ -0,0 +1,23 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { Slot as t } from "../utils/slot.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region packages/inset/index.tsx
+var r = {
+	default: "bg-tint/[0.03]",
+	positive: "bg-primary/10",
+	negative: "bg-destructive/10"
+}, i = {
+	default: "border-tint/[0.08] bg-tint/[0.03]",
+	positive: "border-primary/30 bg-primary/[0.07]",
+	negative: "border-destructive/35 bg-destructive/[0.08]"
+};
+function a({ bordered: a = !1, tone: o = "default", asChild: s, className: c, ...l }) {
+	let u = {
+		...l,
+		className: e("zen__inset", a ? e("rounded-xl border p-4", i[o]) : e("rounded-lg px-3 py-2.5", r[o]), c)
+	};
+	return n(s ? t : "div", { ...u });
+}
+//#endregion
+export { a as default };

package/dist/lib.js

@@ -0,0 +1,74 @@
+"use client";
+/* empty css      */
+import { cx as e } from "./utils/cx.js";
+import { applyGraphicsMode as t, detectGraphicsMode as n } from "./utils/graphics.js";
+import { useAnchoredPopup as r } from "./utils/useAnchoredPopup.js";
+import i, { MenuContent as a, MenuHeader as o, MenuItem as s, MenuSeparator as c, MenuTrigger as l } from "./menu/index.js";
+import { MoneyParseError as u, currencySymbol as d, formatAmount as f, formatMoney as p, minorDigits as m, parseMoney as h, parseMoneyInput as g } from "./utils/money.js";
+import _, { AnimatedMoney as v } from "./animated-number/index.js";
+import y, { ImageCropError as b, cropImageToSquare as x } from "./avatar/index.js";
+import S from "./backdrop/index.js";
+import { cva as C } from "./utils/cva.js";
+import w from "./badge/index.js";
+import T from "./spinner/index.js";
+import E, { buttonVariants as D } from "./button/index.js";
+import O, { CardDescription as k, CardHeader as A, CardTitle as j, Stat as M, StatRow as N } from "./card/index.js";
+import P from "./code-block/index.js";
+import F from "./chip/index.js";
+import I, { PopoverClose as L, PopoverContent as R, PopoverTrigger as z } from "./popover/index.js";
+import B from "./collapse/index.js";
+import { AlertIcon as V, CheckIcon as H, InfoIcon as U } from "./utils/status-icons.js";
+import W, { FormMessage as G, useField as K, useFieldProps as q } from "./field/index.js";
+import J from "./icons/search.js";
+import Y from "./icons/x-mark.js";
+import X, { InputGroupAddon as Z, InputGroupInput as Q } from "./input-group/index.js";
+import { FieldChevron as $ } from "./utils/field-chevron.js";
+import { useVirtualList as ee } from "./utils/useVirtualList.js";
+import te, { ComboboxCreate as ne, ComboboxEmpty as re, ComboboxItem as ie, ComboboxList as ae, ComboboxPopup as oe, ComboboxSearch as se, ComboboxTrigger as ce } from "./combobox/index.js";
+import le, { useToast as ue, useToastHost as de } from "./toast/index.js";
+import fe, { DialogClose as pe, DialogFooter as me } from "./dialog/index.js";
+import he from "./confirm-dialog/index.js";
+import ge from "./editable-cell/index.js";
+import _e, { DisclosureContent as ve, DisclosureTrigger as ye } from "./disclosure/index.js";
+import be from "./header/index.js";
+import xe from "./inset/index.js";
+import Se from "./icons/chevron-down.js";
+import Ce from "./icons/chevron-left.js";
+import we from "./icons/chevron-right.js";
+import Te from "./icons/chevron-up.js";
+import Ee from "./icons/ellipsis.js";
+import De from "./input/index.js";
+import Oe from "./meter/index.js";
+import { addMonths as ke, currentMonth as Ae, formatMonth as je, fromMonthIndex as Me, isMonth as Ne, monthIndex as Pe, monthNames as Fe, monthRange as Ie, monthsBetween as Le } from "./utils/month.js";
+import Re from "./month-picker/index.js";
+import ze from "./checkbox/index.js";
+import { ChartTooltipCard as Be } from "./chart/tooltip.js";
+import Ve from "./chart/donut.js";
+import He, { ChartArea as Ue, ChartBar as We, ChartLine as Ge, ChartReference as Ke, niceTicks as qe } from "./chart/index.js";
+import Je, { Radio as Ye } from "./radio-group/index.js";
+import { addDays as Xe, addMonthsToDate as Ze, dayIndex as Qe, dayOfWeek as $e, daysBetween as et, daysInMonth as tt, formatDate as nt, formatDateRange as rt, fromDayIndex as it, isDate as at, today as ot, weekStart as st, weekdayNames as ct } from "./utils/date.js";
+import lt from "./calendar/index.js";
+import ut, { DateRangePicker as dt } from "./date-picker/index.js";
+import { RateUnavailableError as ft, convertMinor as pt, isRateTable as mt, rateBetween as ht } from "./utils/fx.js";
+import gt, { MoneyConversionHint as _t, MoneyCurrencyMenu as vt, useMoneyInput as yt } from "./money-input/index.js";
+import bt, { RadioCard as xt } from "./radio-cards/index.js";
+import St, { Pill as Ct, PillIndicator as wt } from "./pills/index.js";
+import Tt from "./page-header/index.js";
+import Et from "./progress-ring/index.js";
+import Dt, { SegmentedItem as Ot } from "./segmented/index.js";
+import kt, { SelectGroup as At, SelectItem as jt, SelectSeparator as Mt } from "./select/index.js";
+import Nt, { SideNavGroup as Pt, SideNavLink as Ft } from "./side-nav/index.js";
+import It from "./skeleton/index.js";
+import Lt from "./slider/index.js";
+import Rt, { TabBarItem as zt } from "./tab-bar/index.js";
+import Bt, { TableBody as Vt, TableCell as Ht, TableContainer as Ut, TableEmpty as Wt, TableFooter as Gt, TableFooterCell as Kt, TableHead as qt, TableHeader as Jt, TableRow as Yt, TableSpacerRow as Xt, useSort as Zt } from "./table/index.js";
+import Qt from "./table-of-contents/index.js";
+import $t, { Tab as en, TabList as tn, TabPanel as nn } from "./tabs/index.js";
+import { TreeCell as rn, TreeLabel as an, TreeRow as on, TreeToggle as sn, useTree as cn } from "./tree/index.js";
+import ln from "./textarea/index.js";
+import un from "./toggle/index.js";
+import dn, { TooltipContent as fn, TooltipTrigger as pn } from "./tooltip/index.js";
+import mn, { ThemeScript as hn, themeScript as gn } from "./theme-toggle/index.js";
+import { DEFAULT_THEME as _n, INTENSITIES as vn, PRESETS as yn, applyPreset as bn, applyTheme as xn, contrastRatio as Sn, customize as Cn, normalizeTheme as wn, oklchToLinearRgb as Tn, resetTheme as En, themeVars as Dn } from "./utils/theme.js";
+import { useHydrated as On } from "./utils/useHydrated.js";
+export { V as AlertTriangle, v as AnimatedMoney, _ as AnimatedNumber, y as Avatar, S as Backdrop, w as Badge, E as Button, lt as Calendar, O as Card, k as CardDescription, A as CardHeader, j as CardTitle, He as Chart, Ue as ChartArea, We as ChartBar, Ge as ChartLine, Ke as ChartReference, Be as ChartTooltipCard, H as Check, ze as Checkbox, Se as ChevronDown, Ce as ChevronLeft, we as ChevronRight, Te as ChevronUp, F as Chip, P as CodeBlock, B as Collapse, te as Combobox, ne as ComboboxCreate, re as ComboboxEmpty, ie as ComboboxItem, ae as ComboboxList, oe as ComboboxPopup, se as ComboboxSearch, ce as ComboboxTrigger, he as ConfirmDialog, _n as DEFAULT_THEME, ut as DatePicker, dt as DateRangePicker, fe as Dialog, pe as DialogClose, me as DialogFooter, _e as Disclosure, ve as DisclosureContent, ye as DisclosureTrigger, Ve as DonutChart, ge as EditableCell, Ee as Ellipsis, W as Field, $ as FieldChevron, G as FormMessage, be as Header, vn as INTENSITIES, b as ImageCropError, U as InfoCircle, De as Input, X as InputGroup, Z as InputGroupAddon, Q as InputGroupInput, xe as Inset, i as Menu, a as MenuContent, o as MenuHeader, s as MenuItem, c as MenuSeparator, l as MenuTrigger, Oe as Meter, _t as MoneyConversionHint, vt as MoneyCurrencyMenu, gt as MoneyInput, u as MoneyParseError, Re as MonthPicker, yn as PRESETS, Tt as PageHeader, Ct as Pill, wt as PillIndicator, St as Pills, I as Popover, L as PopoverClose, R as PopoverContent, z as PopoverTrigger, Et as ProgressRing, Ye as Radio, xt as RadioCard, bt as RadioCards, Je as RadioGroup, ft as RateUnavailableError, J as Search, Dt as Segmented, Ot as SegmentedItem, kt as Select, At as SelectGroup, jt as SelectItem, Mt as SelectSeparator, Nt as SideNav, Pt as SideNavGroup, Ft as SideNavLink, It as Skeleton, Lt as Slider, T as Spinner, M as Stat, N as StatRow, en as Tab, Rt as TabBar, zt as TabBarItem, tn as TabList, nn as TabPanel, Bt as Table, Vt as TableBody, Ht as TableCell, Ut as TableContainer, Wt as TableEmpty, Gt as TableFooter, Kt as TableFooterCell, qt as TableHead, Jt as TableHeader, Qt as TableOfContents, Yt as TableRow, Xt as TableSpacerRow, $t as Tabs, ln as TextArea, hn as ThemeScript, mn as ThemeToggle, le as ToastProvider, un as Toggle, dn as Tooltip, fn as TooltipContent, pn as TooltipTrigger, rn as TreeCell, an as TreeLabel, on as TreeRow, sn as TreeToggle, Y as XMark, Xe as addDays, ke as addMonths, Ze as addMonthsToDate, t as applyGraphicsMode, bn as applyPreset, xn as applyTheme, D as buttonVariants, Sn as contrastRatio, pt as convertMinor, x as cropImageToSquare, d as currencySymbol, Ae as currentMonth, Cn as customize, C as cva, e as cx, Qe as dayIndex, $e as dayOfWeek, et as daysBetween, tt as daysInMonth, n as detectGraphicsMode, f as formatAmount, nt as formatDate, rt as formatDateRange, p as formatMoney, je as formatMonth, it as fromDayIndex, Me as fromMonthIndex, at as isDate, Ne as isMonth, mt as isRateTable, m as minorDigits, Pe as monthIndex, Fe as monthNames, Ie as monthRange, Le as monthsBetween, qe as niceTicks, wn as normalizeTheme, Tn as oklchToLinearRgb, h as parseMoney, g as parseMoneyInput, ht as rateBetween, En as resetTheme, gn as themeScript, Dn as themeVars, ot as today, r as useAnchoredPopup, K as useField, q as useFieldProps, On as useHydrated, yt as useMoneyInput, Zt as useSort, ue as useToast, de as useToastHost, cn as useTree, ee as useVirtualList, st as weekStart, ct as weekdayNames };

package/dist/menu/index.d.ts

@@ -0,0 +1,55 @@
+import { ComponentProps, ReactNode } from 'react';
+/**
+ * A list of actions that opens from a button: a native popover, so outside
+ * clicks and Escape close it and focus returns to the button. Arrow keys, Home
+ * and End move between items. Put a MenuTrigger (its content is yours: an icon,
+ * an avatar, a label) and a MenuContent inside; fill the content with MenuItem,
+ * MenuSeparator and MenuHeader.
+ */
+export default function Menu({ onOpenChange, children }: MenuProps): import('react').JSX.Element;
+/**
+ * The button that opens the menu. Give it an `aria-label` when it shows only an
+ * icon or avatar; the menu is named after it. With `asChild`, your own button instead.
+ */
+export declare function MenuTrigger({ asChild, style, children, ...rest }: MenuTriggerProps): import('react').JSX.Element;
+/** The menu panel: glass, below the button (above it if there's no room), lined up with its end edge by default. */
+export declare function MenuContent({ align, offset, className, style, children, ...rest }: MenuContentProps): import('react').JSX.Element;
+/**
+ * One choice in a Menu: closes the menu, then runs `onSelect`. An `icon` sits
+ * before the label (muted, or red with the label when `destructive`). With
+ * `asChild`, the item's role and styles go onto your own element instead, such
+ * as a router's Link.
+ */
+export declare function MenuItem({ icon, destructive, onSelect, asChild, className, children, onClick, ...rest }: MenuItemProps): import('react').JSX.Element;
+/** A hairline between groups of items. */
+export declare function MenuSeparator({ className }: {
+    className?: string;
+}): import('react').JSX.Element;
+/** Content at the top of a menu that isn't a choice, e.g. who is signed in. */
+export declare function MenuHeader({ className, ...rest }: ComponentProps<'div'>): import('react').JSX.Element;
+export interface MenuProps {
+    /** Every open and close: the trigger, choosing an item, outside clicks, Escape. */
+    onOpenChange?: (open: boolean) => void;
+    children?: ReactNode;
+}
+export interface MenuTriggerProps extends ComponentProps<'button'> {
+    /** Put the trigger's props on your own button element instead of rendering one. */
+    asChild?: boolean;
+}
+export interface MenuContentProps extends ComponentProps<'div'> {
+    /** Which edge of the button the menu lines up with (default end), or centred on it. */
+    align?: 'start' | 'end' | 'center';
+    /** Gap between the button and the menu, in px. */
+    offset?: number;
+}
+export interface MenuItemProps extends Omit<ComponentProps<'button'>, 'onSelect'> {
+    /** Shown before the label; size it yourself (e.g. size-4). */
+    icon?: ReactNode;
+    /** Red, for actions that remove or leave something. */
+    destructive?: boolean;
+    /** Runs after the menu closes. */
+    onSelect?: () => void;
+    /** Put the item's role and styles on the single child element (a link) instead of a button. */
+    asChild?: boolean;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/menu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/menu/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAA4C,SAAS,EAAqB,MAAM,OAAO,CAAC;AAkB/G;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE,SAAS,+BAejE;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,gBAAgB,+BAelF;AAED,oHAAoH;AACpH,wBAAgB,WAAW,CAAC,EAAE,KAAa,EAAE,MAAU,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,gBAAgB,+BAkC/G;AAKD;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,EACrB,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,OAAO,EACP,SAAS,EACT,QAAQ,EACR,OAAO,EACP,GAAG,IAAI,EACV,EAAE,aAAa,+BAwBf;AAED,0CAA0C;AAC1C,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAElE;AAED,+EAA+E;AAC/E,wBAAgB,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,+BAEvE;AAED,MAAM,WAAW,SAAS;IACtB,mFAAmF;IACnF,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB;AAED,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,QAAQ,CAAC;IAC9D,mFAAmF;IACnF,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC3D,uFAAuF;IACvF,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;IACnC,kDAAkD;IAClD,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC;IAC7E,8DAA8D;IAC9D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,uDAAuD;IACvD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,+FAA+F;IAC/F,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB"}

package/dist/menu/index.js

@@ -0,0 +1,118 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { useGraphicsMode as t } from "../utils/graphics.js";
+import { Slot as n } from "../utils/slot.js";
+import { anchoredStyle as r, useAnchoredPopup as i } from "../utils/useAnchoredPopup.js";
+import { createContext as a, useContext as o, useId as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region packages/menu/index.tsx
+var u = a(() => {}), d = a(null);
+function f(e) {
+	let t = o(d);
+	if (!t) throw Error(`<${e}> must be inside <Menu>`);
+	return t;
+}
+function p({ onOpenChange: e, children: n }) {
+	t();
+	let r = s(), a = i({ onOpenChange: (t) => {
+		t && a.popupRef.current?.focus(), e?.(t);
+	} });
+	return /* @__PURE__ */ c(d.Provider, {
+		value: {
+			popup: a,
+			triggerId: r
+		},
+		children: /* @__PURE__ */ c(u.Provider, {
+			value: () => a.setOpen(!1),
+			children: n
+		})
+	});
+}
+function m({ asChild: e, style: t, children: r, ...i }) {
+	let { popup: a, triggerId: o } = f("MenuTrigger"), s = {
+		id: o,
+		"aria-haspopup": "menu",
+		...a.triggerProps,
+		...i,
+		style: {
+			...a.triggerProps.style,
+			...t
+		}
+	};
+	return e ? /* @__PURE__ */ c(n, {
+		...s,
+		children: r
+	}) : /* @__PURE__ */ c("button", {
+		type: "button",
+		...s,
+		children: r
+	});
+}
+function h({ align: t = "end", offset: n = 6, className: i, style: a, children: o, ...s }) {
+	let { popup: l, triggerId: u } = f("MenuContent"), d = (e) => {
+		let t = Array.from(l.popupRef.current?.querySelectorAll("[role=\"menuitem\"]") ?? []), n = t.indexOf(document.activeElement), r = t.length - 1, i = {
+			ArrowDown: n + 1,
+			ArrowUp: n === -1 ? r : n - 1,
+			Home: 0,
+			End: r
+		}[e.key];
+		i !== void 0 && (e.preventDefault(), t[(i + t.length) % t.length]?.focus());
+	};
+	return /* @__PURE__ */ c("div", {
+		"aria-labelledby": u,
+		...s,
+		...l.popupProps,
+		role: "menu",
+		tabIndex: -1,
+		onKeyDown: (e) => {
+			s.onKeyDown?.(e), d(e);
+		},
+		style: {
+			...r(l.id, {
+				align: t,
+				offset: n
+			}),
+			...a
+		},
+		className: e("zen__popover glass glass-blur text-foreground min-w-44 rounded-xl p-1.5 outline-hidden", i),
+		children: o
+	});
+}
+var g = "flex w-full cursor-default items-center gap-3 rounded-lg px-3 py-2 text-left text-sm outline-hidden select-none hover:bg-tint/[0.07] focus:bg-tint/[0.07]";
+function _({ icon: t, destructive: r, onSelect: i, asChild: a, className: s, children: d, onClick: f, ...p }) {
+	let m = o(u), h = {
+		...p,
+		role: "menuitem",
+		tabIndex: -1,
+		className: e(g, r && "text-destructive", s),
+		onClick: (e) => {
+			f?.(e), m(), i?.();
+		}
+	};
+	return a ? /* @__PURE__ */ c(n, {
+		...h,
+		children: d
+	}) : /* @__PURE__ */ l("button", {
+		type: "button",
+		...h,
+		children: [t && /* @__PURE__ */ c("span", {
+			"aria-hidden": !0,
+			className: e("flex shrink-0", !r && "text-muted-foreground"),
+			children: t
+		}), d]
+	});
+}
+function v({ className: t }) {
+	return /* @__PURE__ */ c("div", {
+		role: "separator",
+		className: e("bg-tint/[0.07] mx-2 my-1 h-px", t)
+	});
+}
+function y({ className: t, ...n }) {
+	return /* @__PURE__ */ c("div", {
+		className: e("flex items-center gap-3 px-3 py-2.5", t),
+		...n
+	});
+}
+//#endregion
+export { h as MenuContent, y as MenuHeader, _ as MenuItem, v as MenuSeparator, m as MenuTrigger, p as default };

package/dist/meter/index.js

@@ -0,0 +1,41 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { useId as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region packages/meter/index.tsx
+function i({ value: i, max: a = 100, label: o, detail: s, hint: c, valueText: l, tone: u = "auto", warnAt: d = .85, className: f }) {
+	let p = t(), m = i > a, h = a > 0 ? i / a : +(i > 0), g = Math.min(100, Math.max(0, Math.round(h * 100))), _ = u === "auto" ? m ? "danger" : h >= d ? "warning" : "default" : u;
+	return /* @__PURE__ */ r("div", {
+		role: "meter",
+		"aria-labelledby": o ? p : void 0,
+		"aria-valuemin": 0,
+		"aria-valuemax": a,
+		"aria-valuenow": Math.min(i, a),
+		"aria-valuetext": l,
+		className: e("zen__meter grid grid-cols-2 gap-y-1.5", f),
+		children: [
+			o && /* @__PURE__ */ n("span", {
+				id: p,
+				className: "text-sm font-medium",
+				children: o
+			}),
+			s && /* @__PURE__ */ n("span", {
+				className: e("col-start-2 text-right text-sm tabular-nums", _ === "danger" ? "text-destructive" : "text-muted-foreground"),
+				children: s
+			}),
+			/* @__PURE__ */ n("div", {
+				className: "bg-muted col-span-2 h-2 overflow-hidden rounded-full",
+				children: /* @__PURE__ */ n("div", {
+					className: e("h-full rounded-full transition-[width] duration-700 ease-[cubic-bezier(0.2,0.8,0.2,1)]", _ === "danger" ? "bg-destructive shadow-[0_0_12px_oklch(var(--destructive)/0.7)]" : _ === "warning" ? "bg-accent-foreground shadow-[0_0_12px_oklch(var(--accent-foreground)/0.6)]" : "from-primary to-glow-2 bg-gradient-to-r shadow-[0_0_12px_oklch(var(--glow)/0.6)]"),
+					style: { width: `${g}%` }
+				})
+			}),
+			c && /* @__PURE__ */ n("span", {
+				className: e("col-span-2 text-xs", _ === "danger" ? "text-destructive" : "text-muted-foreground"),
+				children: c
+			})
+		]
+	});
+}
+//#endregion
+export { i as default };

package/dist/money-input/index.d.ts

@@ -1,18 +1,41 @@
+import { ForeignAmount, RateTable } from '../utils/fx';
 import { Money } from '../utils/money';
 import { ChangeEvent, KeyboardEvent, ReactNode } from 'react';
 /**
  * Amount input in one currency. Shows grouped digits for the locale (1,52,000
  * for en-IN) and accepts shorthand: 1.5L, 2cr, 10k, 1.2m. Commits on blur or
  * Enter; Escape reverts. Values are integer minor units (paise, cents), or null
- * when empty. Replace the symbol with `start` (e.g. a currency switcher), or
- * build your own field from useMoneyInput.
+ * when empty.
+ *
+ * With `convert`, the symbol becomes a currency switch: type an amount in e.g.
+ * USD and it's converted at the rates you load (in the browser; the amount is
+ * never sent anywhere). Replace the symbol with `start`, or build your own field
+ * from useMoneyInput, MoneyCurrencyMenu and MoneyConversionHint.
  */
 export default function MoneyInput({ start, end, compact, disabled, id, autoFocus, className, 'aria-label': ariaLabel, ...options }: MoneyInputProps): import('react').JSX.Element;
+/**
+ * The currency switch for a converting field (`convert`): shows the symbol, or
+ * the code of the foreign currency being typed in, and opens a menu of your
+ * currency and the ones with a rate. Put it in an InputGroup's start slot.
+ */
+export declare function MoneyCurrencyMenu({ money, className }: {
+    money: MoneyInputState;
+    className?: string;
+}): import('react').JSX.Element | null;
+/**
+ * The line under a converting field: getting the rate, the rate and what the
+ * typed amount comes to, or what the last amount was converted from.
+ */
+export declare function MoneyConversionHint({ money, className }: {
+    money: MoneyInputState;
+    className?: string;
+}): import('react').JSX.Element | null;
 /**
  * MoneyInput's behaviour without its markup: spread `inputProps` onto any
  * input (e.g. an InputGroupInput next to your own addons) and show `error`.
+ * With `convert`, `conversion` drives MoneyCurrencyMenu and MoneyConversionHint.
  */
-export declare function useMoneyInput({ value, onChange, currency, locale, allowNegative, allowEmpty, live, onCancel, }: MoneyInputOptions): {
+export declare function useMoneyInput({ value, onChange, currency, locale, allowNegative, allowEmpty, live, onCancel, convert, }: MoneyInputOptions): {
     inputProps: {
         readonly type: "text";
         readonly inputMode: "decimal";
@@ -26,16 +49,59 @@ export declare function useMoneyInput({ value, onChange, currency, locale, allow
         readonly onBlur: () => void;
         readonly onKeyDown: (e: KeyboardEvent<HTMLInputElement>) => void;
     };
-    /** The currency's symbol in this locale, e.g. "₹" or "$". */
+    /** The symbol of the currency being typed in, in this locale, e.g. "₹" or "$". */
     symbol: string;
     error: string | null;
     errorId: string;
+    /** Id of MoneyConversionHint's line, which the input is described by. */
+    hintId: string;
     text: string;
     setText: import('react').Dispatch<import('react').SetStateAction<string>>;
     commit: () => boolean;
     /** The value formatted with its symbol, e.g. "₹1,52,000.00". */
     formatted: string;
+    /** With `convert`: the currency switch and conversion state; null without. */
+    conversion: {
+        /** The field's own currency. */
+        home: string;
+        locale: string;
+        /** The currency being typed in. */
+        currency: string;
+        /** Whether that's another currency, converted into `home`. */
+        foreign: boolean;
+        /** Other currencies to offer: `convert.currencies`, less those the loaded rates lack. */
+        choices: string[];
+        pick: (cur: string) => void;
+        status: RatesStatus;
+        /** Units of `home` per 1 of `currency`, once loaded. */
+        rate: number | null;
+        /** Day of the rates, "YYYY-MM-DD", once loaded. */
+        date: string | null;
+        source: string | undefined;
+        /** What the typed amount comes to in `home`. */
+        preview: number | null;
+        /** What the shown amount was converted from, after a conversion. */
+        converted: ForeignAmount | null;
+    } | null;
 };
+export type MoneyInputState = ReturnType<typeof useMoneyInput>;
+type RatesStatus = 'idle' | 'loading' | 'ready' | 'error';
+/** Typing amounts in other currencies, converted into the field's own. */
+export interface CurrencyConversion {
+    /** Currencies to offer besides the field's own, in order. Those the loaded rates lack are left out. */
+    currencies: readonly string[];
+    /**
+     * Gets the rates, the first time another currency is picked. Return them
+     * (from a cache) or a promise; null when unavailable. Cache as you see fit.
+     */
+    loadRates: () => RateTable | null | Promise<RateTable | null>;
+    /** Named with the rate, e.g. "ECB". */
+    source?: string;
+    /** The original after a conversion, or null when the amount was typed in the field's currency. */
+    onForeign?: (original: ForeignAmount | null) => void;
+    /** Open showing a saved foreign amount (e.g. editing an entry that was converted). */
+    initial?: ForeignAmount | null;
+}
 export interface MoneyInputOptions {
     /** Amount in minor units (paise, cents), or null when empty. */
     value: Money | null;
@@ -47,15 +113,18 @@ export interface MoneyInputOptions {
     allowNegative?: boolean;
     allowEmpty?: boolean;
     /**
-     * For forms: report the amount on every keystroke instead of on blur, so a
-     * Save button can never miss it. Invalid text reports null.
+     * For forms: report the amount (converted, when typed in another currency) on
+     * every keystroke instead of on blur, so a Save button can never miss it.
+     * Invalid text reports null.
      */
     live?: boolean;
     /** Called on Escape, after reverting. */
     onCancel?: () => void;
+    /** Let people type in another currency, converted at the rates you load. */
+    convert?: CurrencyConversion;
 }
 export interface MoneyInputProps extends MoneyInputOptions {
-    /** Replaces the currency symbol, e.g. with a currency switcher. */
+    /** Replaces the currency symbol (or the currency switch), e.g. with your own. */
     start?: ReactNode;
     /** Content after the input, e.g. a unit or a clear button. */
     end?: ReactNode;
@@ -67,4 +136,5 @@ export interface MoneyInputProps extends MoneyInputOptions {
     className?: string;
     'aria-label'?: string;
 }
+export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/money-input/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/money-input/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA6C,KAAK,KAAK,EAAmB,MAAM,kBAAkB,CAAC;AAE1G,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,SAAS,EAA8B,MAAM,OAAO,CAAC;AAE1F;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAC/B,KAAK,EACL,GAAG,EACH,OAAe,EACf,QAAgB,EAChB,EAAE,EACF,SAAS,EACT,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,GAAG,OAAO,EACb,EAAE,eAAe,+BAgCjB;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,aAAqB,EACrB,UAAkB,EAClB,IAAY,EACZ,QAAQ,GACX,EAAE,iBAAiB;;;;;;;;;+BA8DE,WAAW,CAAC,gBAAgB,CAAC;;;gCAkB5B,aAAa,CAAC,gBAAgB,CAAC;;IAgB9C,6DAA6D;;;;;;kBAxD9C,OAAO;IA+DtB,gEAAgE;;EAGvE;AAED,MAAM,WAAW,iBAAiB;IAC9B,gEAAgE;IAChE,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,KAAK,IAAI,CAAC;IACxC,wCAAwC;IACxC,QAAQ,EAAE,MAAM,CAAC;IACjB,2FAA2F;IAC3F,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,MAAM,WAAW,eAAgB,SAAQ,iBAAiB;IACtD,mEAAmE;IACnE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,8DAA8D;IAC9D,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/money-input/index.tsx"],"names":[],"mappings":"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"}