@chainberry/ui-components 1.0.6 → 1.0.8

package/dist/index.d.ts

@@ -27,6 +27,30 @@ export declare function ActionFooter({ actions, bleed, className, ...props }: {
     className?: string;
 } & Omit<ComponentProps<"div">, "className">): JSX.Element;
 
+export declare function AmountField({ id, label, value, onChange, 
+    /** trailing unit, e.g. the coin code */
+    suffix, 
+    /** right-aligned note beside the label, e.g. "Available: 1.2 BTC" */
+    hint, 
+    /** helper / error line under the input, e.g. a fiat estimate */
+    helper, 
+    /** show a "Max" button when provided */
+    onMax, maxDisabled, disabled, invalid, placeholder, className, }: {
+    id?: string;
+    label?: ReactNode;
+    value: string;
+    onChange: (value: string) => void;
+    suffix?: ReactNode;
+    hint?: ReactNode;
+    helper?: ReactNode;
+    onMax?: () => void;
+    maxDisabled?: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+    placeholder?: string;
+    className?: string;
+}): JSX.Element;
+
 export declare function AppHeaderV1({ user, navMode, onNavModeChange, headerMode, onHeaderModeChange, onAccount, onLogout, onTakeTour, onResetDemo, }: {
     user?: HeaderUser;
     navMode?: NavPreset;
@@ -244,7 +268,7 @@ export declare type Column<T> = {
     /** header label — also the label shown in the Columns menu */
     header: string;
     cell: (row: T) => ReactNode;
-    align?: "start" | "end";
+    align?: 'start' | 'end';
     /** enable click-to-sort on this column (requires `sortValue`) */
     sortable?: boolean;
     /** comparable value used for sorting (number sorts numerically) */
@@ -339,31 +363,6 @@ export declare function ConvertPanel({ currentUser, onSubmit, className, }: {
     className?: string;
 }): JSX.Element;
 
-export declare function ConvertPickerField({ id, label, value, options, onChange, placeholder, emptyMessage, disabled, className, }: {
-    id?: string;
-    label?: ReactNode;
-    value: string | null;
-    options: ConvertPickerOption[];
-    onChange: (value: string) => void;
-    placeholder?: ReactNode;
-    emptyMessage?: ReactNode;
-    disabled?: boolean;
-    className?: string;
-}): JSX.Element;
-
-export declare type ConvertPickerOption = {
-    value: string;
-    /** primary line — shown both in the list and in the closed trigger */
-    label: ReactNode;
-    /** muted secondary line */
-    sublabel?: ReactNode;
-    /** leading visual, e.g. <CoinLogo /> or <CurrencyNetwork /> */
-    leading?: ReactNode;
-    /** right-aligned trailing content, e.g. an available balance */
-    meta?: ReactNode;
-    disabled?: boolean;
-};
-
 export declare function ConvertSummary({ fromCoin, toCoin, payAmount, payFiat, receiveAmount, receiveFiat, rateLabel, rateCountdown, rateTtl, rateVersion, feeLabel, fromWalletName, fromWalletAddress, toWalletName, toWalletAddress, footer, className, }: {
     fromCoin: string | null;
     toCoin: string | null;
@@ -461,43 +460,28 @@ export declare function DailyBalancesTable({ data, pageSize, }: {
     pageSize?: number;
 }): JSX.Element;
 
-export declare function DataTable<T>({ columns, data, getRowId, layout, density, pageSize, loading, skeletonRows, searchable, searchPlaceholder, searchFilter, searchScopes, defaultSearchScope, onSearchScopeChange, query: queryProp, onQueryChange, columnToggle, columnVisibility: columnVisibilityProp, onColumnVisibilityChange, onRowClick, rowLeading, emptyMessage, toolbarFilters, toolbarActions, toolbarBelow, }: DataTableProps<T>): JSX.Element;
+export declare function DataTable<T>({ columns, data, getRowId, layout, density, pageSize, totalItems, currentPage, onPageChange, loading, skeletonRows, columnVisibility: columnVisibilityProp, onRowClick, rowLeading, emptyMessage, toolbarBelow, sort, onSortChange, }: DataTableProps<T>): JSX.Element;
 
 export declare type DataTableProps<T> = {
     columns: Column<T>[];
     data: T[];
     /** stable unique key per row */
     getRowId: (row: T) => string;
-    layout?: "auto" | "fill";
+    /** Sort */
+    sort?: SortState;
+    onSortChange?: (sort: SortState) => void;
+    layout?: 'auto' | 'fill';
     /** row vertical padding: "comfortable" (default) or "compact" (shorter rows) */
-    density?: "comfortable" | "compact";
+    density?: 'comfortable' | 'compact';
     /** rows per page; omit to show all rows and hide the footer */
     pageSize?: number;
+    totalItems?: number;
+    currentPage?: number;
+    onPageChange?: (page: number) => void;
     loading?: boolean;
     /** skeleton rows to render while loading (default 10) */
     skeletonRows?: number;
-    /** render a search input in the toolbar (needs `searchFilter`) */
-    searchable?: boolean;
-    searchPlaceholder?: string;
-    searchFilter?: (row: T, query: string) => boolean;
-    /** Optional field-scope dropdown at the right of the search box. UI only:
-     picking a scope swaps the placeholder to "Search by <label>" and notifies
-     `onSearchScopeChange`; it does NOT filter (that's the backend's job). */
-    searchScopes?: {
-        value: string;
-        label: string;
-    }[];
-    defaultSearchScope?: string;
-    onSearchScopeChange?: (value: string) => void;
-    /** controlled search query — drives filtering even when the built-in search
-     input isn't rendered (e.g. when an external toolbar owns it) */
-    query?: string;
-    onQueryChange?: (value: string) => void;
-    /** render the Columns visibility menu in the toolbar */
-    columnToggle?: boolean;
-    /** controlled column visibility (else internal state) */
     columnVisibility?: Record<string, boolean>;
-    onColumnVisibilityChange?: (id: string, next: boolean) => void;
     onRowClick?: (row: T) => void;
     /** leading cell before the first column (e.g. a status dot) */
     rowLeading?: (row: T) => ReactNode;
@@ -538,31 +522,6 @@ export declare function DepositPanel({ className }: {
     className?: string;
 }): JSX.Element;
 
-export declare function DepositPickerField({ id, label, value, options, onChange, placeholder, emptyMessage, disabled, className, }: {
-    id?: string;
-    label?: ReactNode;
-    value: string | null;
-    options: DepositPickerOption[];
-    onChange: (value: string) => void;
-    placeholder?: ReactNode;
-    emptyMessage?: ReactNode;
-    disabled?: boolean;
-    className?: string;
-}): JSX.Element;
-
-export declare type DepositPickerOption = {
-    value: string;
-    /** primary line — shown both in the list and in the closed trigger */
-    label: ReactNode;
-    /** muted secondary line */
-    sublabel?: ReactNode;
-    /** leading visual, e.g. <CoinLogo /> or <CurrencyNetwork /> */
-    leading?: ReactNode;
-    /** right-aligned trailing content, e.g. an available balance */
-    meta?: ReactNode;
-    disabled?: boolean;
-};
-
 export declare function DepositReceiveCard({ wallet, coin, network, networkName, className, }: {
     wallet: DepositWallet | null;
     coin: string | null;
@@ -1356,6 +1315,39 @@ declare type PeriodSelection = {
     label?: string;
 };
 
+declare function PickerField({ id, label, value, options, onChange, placeholder, emptyMessage, disabled, className, }: {
+    id?: string;
+    label?: ReactNode;
+    value: string | null;
+    options: PickerOption[];
+    onChange: (value: string) => void;
+    placeholder?: ReactNode;
+    emptyMessage?: ReactNode;
+    disabled?: boolean;
+    className?: string;
+}): JSX.Element;
+export { PickerField as ConvertPickerField }
+export { PickerField as DepositPickerField }
+export { PickerField }
+export { PickerField as WithdrawPickerField }
+
+declare type PickerOption = {
+    value: string;
+    /** primary line — shown both in the list and in the closed trigger */
+    label: ReactNode;
+    /** muted secondary line */
+    sublabel?: ReactNode;
+    /** leading visual, e.g. <CoinLogo /> or <CurrencyNetwork /> */
+    leading?: ReactNode;
+    /** right-aligned trailing content, e.g. an available balance */
+    meta?: ReactNode;
+    disabled?: boolean;
+};
+export { PickerOption as ConvertPickerOption }
+export { PickerOption as DepositPickerOption }
+export { PickerOption }
+export { PickerOption as WithdrawPickerOption }
+
 export declare function Popover(props: ComponentProps<typeof PopoverPrimitive.Root>): JSX.Element;
 
 export declare function PopoverAnchor(props: ComponentProps<typeof PopoverPrimitive.Anchor>): JSX.Element;
@@ -1661,6 +1653,11 @@ export declare function SortHeader({ label, sort, onSort, align, }: {
     align?: "start" | "end";
 }): JSX.Element;
 
+declare type SortState = {
+    id: string;
+    dir: 'asc' | 'desc';
+} | null;
+
 /** Named treasury wallets available as withdrawal sources. */
 declare const SOURCE_WALLETS: SourceWallet[];
 
@@ -1726,6 +1723,30 @@ export declare const tabsListVariants: (props?: ({
 
 export declare function TabsTrigger({ className, ...props }: React_2.ComponentProps<typeof Tabs_2.Trigger>): React_2.JSX.Element;
 
+export declare function TextField({ id, label, value, onChange, placeholder, 
+    /** right-aligned note beside the label */
+    hint, 
+    /** helper / error line under the input */
+    helper, disabled, invalid, inputMode, spellCheck, autoComplete, maxLength, 
+    /** extra classes on the <input> itself (e.g. font-mono, height) */
+    inputClassName, className, }: {
+    id?: string;
+    label?: ReactNode;
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    hint?: ReactNode;
+    helper?: ReactNode;
+    disabled?: boolean;
+    invalid?: boolean;
+    inputMode?: React.ComponentProps<"input">["inputMode"];
+    spellCheck?: boolean;
+    autoComplete?: string;
+    maxLength?: number;
+    inputClassName?: string;
+    className?: string;
+}): JSX.Element;
+
 export declare function TextLink({ href, className, children, ...props }: ComponentProps<"a">): JSX.Element;
 
 export declare function TextStack({ primary, secondary, align, tabularNums, primaryClassName, secondaryClassName, className, }: {
@@ -1906,7 +1927,7 @@ export declare namespace transactionsStatuses {
     }
 }
 
-export declare function TransactionsTable({ data, loading, onRowClick, query, columnVisibility, presets, }: TransactionsTableProps): JSX.Element;
+export declare function TransactionsTable({ data, loading, onRowClick, columnVisibility, presets, }: TransactionsTableProps): JSX.Element;
 
 export declare function TransactionsTableOptions({ search, onSearchChange, searchScopes, searchScope, onSearchScopeChange, searchPlaceholder, segment, onSegmentChange, tabs, tabCounts, onFilter, filterCount, columns, columnVisibility, onColumnChange, onRefresh, refreshing, onDownload, show, className, }: {
     search: string;
@@ -1944,8 +1965,6 @@ export declare type TransactionsTableProps = {
     data: Transaction[];
     loading?: boolean;
     onRowClick?: (tx: Transaction) => void;
-    /** controlled search query (owned by the page, shared with the toolbar) */
-    query?: string;
     /** controlled column visibility (owned by the page, shared with the toolbar) */
     columnVisibility?: Record<string, boolean>;
     /** the SavedPresetsBar row, rendered just above the table */
@@ -2048,6 +2067,34 @@ export declare function WalletBalancesTable({ balances, actionsVariant, classNam
     className?: string;
 }): JSX.Element;
 
+export declare function WalletField({ id, label, placeholder, value, onChange, wallets, emptyMessage, variant, disabled, className, }: {
+    id?: string;
+    label?: ReactNode;
+    placeholder?: ReactNode;
+    value: string | null;
+    onChange: (value: string) => void;
+    wallets: WalletOption[];
+    emptyMessage?: ReactNode;
+    /** "detailed" shows badge + address + balance; "simple" shows only the name */
+    variant?: "detailed" | "simple";
+    disabled?: boolean;
+    className?: string;
+}): JSX.Element;
+
+export declare type WalletOption = {
+    id: string;
+    /** primary line — the wallet name */
+    name: string;
+    /** detailed: short address / secondary line */
+    address?: string;
+    /** detailed: coin + network for the leading badge and balance unit */
+    coin?: string;
+    network?: string;
+    /** detailed: right-aligned balance */
+    amount?: string;
+    amountFiat?: string;
+};
+
 /** One end of a movement — a named treasury wallet or an on-chain address. */
 declare type WalletRef = {
     /** what's shown, e.g. "Low Risk Wallet" or a truncated address */
@@ -2118,31 +2165,6 @@ export declare function WithdrawPanel({ currentUser, onSubmit, className, }: {
     className?: string;
 }): JSX.Element;
 
-export declare function WithdrawPickerField({ id, label, value, options, onChange, placeholder, emptyMessage, disabled, className, }: {
-    id?: string;
-    label?: ReactNode;
-    value: string | null;
-    options: WithdrawPickerOption[];
-    onChange: (value: string) => void;
-    placeholder?: ReactNode;
-    emptyMessage?: ReactNode;
-    disabled?: boolean;
-    className?: string;
-}): JSX.Element;
-
-export declare type WithdrawPickerOption = {
-    value: string;
-    /** primary line — shown both in the list and in the closed trigger */
-    label: ReactNode;
-    /** muted secondary line */
-    sublabel?: ReactNode;
-    /** leading visual, e.g. <CoinLogo /> or <CurrencyNetwork /> */
-    leading?: ReactNode;
-    /** right-aligned trailing content, e.g. an available balance */
-    meta?: ReactNode;
-    disabled?: boolean;
-};
-
 export declare function WithdrawSummary({ coin, network, networkName, amount, amountFiat, from, to, footer, className, }: {
     coin: string | null;
     network: string | null;