@stridge/kit 0.1.0-alpha.0

package/dist/shared/widgets/amount-entry/compound/types.d.ts

@@ -0,0 +1,224 @@
+import { DialogShellControls } from "../../../dialog/DialogShell.js";
+import { AssetDescriptor } from "../../asset-descriptor.js";
+import { ComponentProps, ReactNode } from "react";
+
+//#region src/shared/widgets/amount-entry/compound/types.d.ts
+/**
+ * A token rendered inside the AmountEntry FlowPill or surfaced through the widget's context.
+ * Used by both the "send" (source) and "receive" (destination) sides of the flow. Aliased to the
+ * kit-wide {@link AssetDescriptor} so the shape stays in sync across every "asset to display"
+ * prop the kit's widgets accept.
+ */
+type AmountEntryToken = AssetDescriptor;
+/**
+ * A percent-preset chip rendered inside `AmountEntry.Pills`. The value
+ * is opaque to the kit — typically `0.25 | 0.5 | 0.75 | 1` but any
+ * stable id works for the host's controlled selection state.
+ */
+interface AmountEntryPercentPreset {
+  /** Stable id used as the `activeValue` discriminator and React key. */
+  value: string;
+  /** Rendered label inside the chip (e.g. `"25%"`, `"Max"`). */
+  label: string;
+}
+/**
+ * Props for `<AmountEntry.Dialog>` — the dialog form of the AmountEntry
+ * widget. Combines the widget root props with the shared dialog shell
+ * controls (`open` / `defaultOpen` / `onOpenChange` / `trigger`).
+ */
+type AmountEntryDialogProps = AmountEntryProps & DialogShellControls;
+/**
+ * Public props accepted by the {@link AmountEntry} root.
+ */
+interface AmountEntryProps {
+  /**
+   * The amount the user has entered, as a raw number. `null` is the
+   * empty state — the input renders empty so the host can drive
+   * "amount cleared" without inventing a sentinel like `NaN`.
+   */
+  amount: number | null;
+  /**
+   * Source token rendered on the left side of the FlowPill. The user
+   * is sending this token.
+   */
+  sendToken: AmountEntryToken;
+  /**
+   * Destination token rendered on the right side of the FlowPill, and
+   * surfaced as the title fallback (`Deposit ${symbol}` — appends ` to ${brandName}`
+   * when `<KitProvider brandName="…">` is configured).
+   */
+  receiveToken: AmountEntryToken;
+  /**
+   * Locale used to format the displayed amount when the input isn't
+   * focused. Defaults to the user's runtime locale.
+   */
+  locale?: Intl.LocalesArgument;
+  /**
+   * Display formatting options applied to the amount. Defaults to locale
+   * grouping with up to 8 fraction digits; pass `useGrouping: false`
+   * for raw crypto-style amounts.
+   */
+  format?: Intl.NumberFormatOptions;
+  /**
+   * Minimum allowed value. Defaults to `0` so the input can't go
+   * negative — overriding to `undefined` removes the floor.
+   */
+  min?: number;
+  /** Optional maximum value (e.g. the user's balance). */
+  max?: number;
+  /**
+   * Fired as the user types or when a parent updates the amount via
+   * the percent presets. The kit forwards the parsed numeric value
+   * (`null` when the field is cleared).
+   */
+  onAmountChange?: (next: number | null) => void;
+  /**
+   * Optional override for the `Header` title. Defaults to
+   * `"Deposit {symbol}"` (filled from `receiveToken.symbol`).
+   */
+  headerTitle?: string;
+  /**
+   * Optional back-button callback for the `Header`. When undefined the
+   * chevron is hidden.
+   */
+  onBack?: () => void;
+  /**
+   * Currency-symbol glyph rendered before the hero amount digits.
+   * Defaults to `"$"`.
+   */
+  currencySymbol?: string;
+  /**
+   * Sub-line slot rendered below the hero amount. When omitted, a
+   * default sub-line composed from `subLineAmount` (or the receive
+   * token's symbol) is rendered.
+   */
+  subLine?: ReactNode;
+  /**
+   * Pre-formatted converted amount used in the default sub-line. When
+   * omitted, the hero falls back to `${amount} ${receiveToken.symbol}`.
+   */
+  subLineAmount?: string;
+  /**
+   * Preset chips rendered inside `AmountEntry.Pills`. Defaults to an
+   * empty list — pass `25% / 50% / 75% / Max` (or whatever the host
+   * needs) to populate the row.
+   */
+  presets?: ReadonlyArray<AmountEntryPercentPreset>;
+  /**
+   * Currently-active preset id. When `undefined`, no chip is marked
+   * active.
+   */
+  activePreset?: string;
+  /**
+   * Fired when a preset chip is clicked. When undefined the chips
+   * render inert.
+   */
+  onPresetSelect?: (value: string) => void;
+  /**
+   * Optional override for the bridge glyph between Send and Receive.
+   * Defaults to a 16×16 chevron-right.
+   */
+  bridge?: ReactNode;
+  /**
+   * Footer CTA label. Defaults to `"Continue"`.
+   */
+  footerLabel?: string;
+  /**
+   * Footer CTA click handler. When undefined the CTA renders inert.
+   */
+  onContinue?: () => void;
+  /** Compound parts; see `AmountEntry.Header`, `AmountEntry.Hero`, etc. */
+  children?: ReactNode;
+}
+/**
+ * Body slot part props. Forwards every native `<div>` prop through to the
+ * underlying `Card.Body`, which becomes the scrollable region when the
+ * widget is mounted inside `Dialog.Content`.
+ */
+type AmountEntryBodyProps = ComponentProps<"div">;
+/**
+ * Header part props.
+ */
+interface AmountEntryHeaderProps {
+  /**
+   * Optional override for the title rendered in this slot. Defaults to
+   * the `headerTitle` set on the {@link AmountEntry} root, falling back
+   * to `"Deposit {symbol}"` (filled from the receive token in context).
+   */
+  title?: string;
+  /**
+   * Optional override for the back-button callback. Defaults to the
+   * `onBack` set on the {@link AmountEntry} root. Pass `null` to force
+   * the chevron hidden even when the root supplies a callback.
+   */
+  onBack?: (() => void) | null;
+}
+/**
+ * Hero (large fiat amount block) part props.
+ */
+interface AmountEntryHeroProps {
+  /**
+   * Optional override for the currency-symbol glyph. Defaults to the
+   * `currencySymbol` set on the {@link AmountEntry} root, falling back
+   * to `"$"`.
+   */
+  currencySymbol?: string;
+  /**
+   * Optional override for the sub-line slot. Defaults to the `subLine`
+   * set on the {@link AmountEntry} root.
+   */
+  subLine?: ReactNode;
+  /**
+   * Optional override for the pre-formatted converted amount. Defaults
+   * to the `subLineAmount` set on the {@link AmountEntry} root.
+   */
+  subLineAmount?: string;
+}
+/**
+ * Pills (percent-preset row) part props.
+ */
+interface AmountEntryPillsProps {
+  /**
+   * Optional override for the rendered preset chips. Defaults to the
+   * `presets` set on the {@link AmountEntry} root.
+   */
+  presets?: ReadonlyArray<AmountEntryPercentPreset>;
+  /**
+   * Optional override for the active chip id. Defaults to the
+   * `activePreset` set on the {@link AmountEntry} root.
+   */
+  activeValue?: string;
+  /**
+   * Optional override for the chip-click handler. Defaults to the
+   * `onPresetSelect` set on the {@link AmountEntry} root.
+   */
+  onSelect?: (value: string) => void;
+}
+/**
+ * Flow (Send → Receive pill) part props.
+ */
+interface AmountEntryFlowProps {
+  /**
+   * Optional override for the bridge glyph between Send and Receive.
+   * Defaults to the `bridge` set on the {@link AmountEntry} root,
+   * falling back to a 16×16 chevron-right.
+   */
+  bridge?: ReactNode;
+}
+/**
+ * Footer part props — owns the full-width primary Continue CTA.
+ */
+interface AmountEntryFooterProps {
+  /**
+   * Optional override for the CTA label. Defaults to the `footerLabel`
+   * set on the {@link AmountEntry} root, falling back to `"Continue"`.
+   */
+  label?: string;
+  /**
+   * Optional override for the CTA click handler. Defaults to the
+   * `onContinue` set on the {@link AmountEntry} root.
+   */
+  onContinue?: () => void;
+}
+//#endregion
+export { AmountEntryBodyProps, AmountEntryDialogProps, AmountEntryFlowProps, AmountEntryFooterProps, AmountEntryHeaderProps, AmountEntryHeroProps, AmountEntryPercentPreset, AmountEntryPillsProps, AmountEntryProps, AmountEntryToken };

package/dist/shared/widgets/asset-descriptor.d.ts

@@ -0,0 +1,27 @@
+//#region src/shared/widgets/asset-descriptor.d.ts
+/**
+ * Canonical view-model for any "asset to display" prop the kit's widgets accept. Deposit and
+ * withdraw flows both build this shape in 8+ places (`creditedAsset`, `sendToken`, `receiveAsset`,
+ * `sourceAsset`, `receiveChain`, …) when projecting driver payloads into compound props; this
+ * type plus the `toAssetDescriptor` mapper collapse those into one funnel.
+ *
+ * Every compound that takes an asset prop (`AmountEntryToken`, `WithdrawFormAsset`,
+ * `ErrorStateAsset`, `ProcessingStateAsset`, `SuccessStateAsset`, …) aliases or extends this
+ * type so drift between flows becomes a compile error.
+ */
+interface AssetDescriptor {
+  /** Symbol shown as the row's primary label (e.g. `"USDC"`). */
+  symbol: string;
+  /** Optional longer caption rendered alongside the symbol (e.g. `"You send"`, `"Polygon"`). */
+  label?: string;
+  /** EIP-155 chain id used to resolve the asset's logo. */
+  chainId?: number;
+  /** ERC-20 contract address on `chainId`. Omit for chain-native tokens. */
+  address?: string;
+  /** `true` for chain-native tokens (ETH, MATIC, …) and for chain-row entries. */
+  isNative?: boolean;
+  /** Logo URL — final URL fallback before the kit's gradient + letter visual. */
+  logoUrl?: string;
+}
+//#endregion
+export { AssetDescriptor };

package/dist/shared/widgets/asset-descriptor.js

@@ -0,0 +1 @@
+function e(e){if(!e)return;let t=typeof e.chainId==`number`?e.chainId:e.eip155Id===void 0?void 0:typeof e.eip155Id==`number`?e.eip155Id:Number(e.eip155Id),n=e.logoUrl??e.assetLogoUrl;return{symbol:e.symbol,...e.label===void 0?{}:{label:e.label},...t!==void 0&&!Number.isNaN(t)?{chainId:t}:{},...e.address===void 0?{}:{address:e.address},...e.isNative===void 0?{}:{isNative:e.isNative},...n===void 0?{}:{logoUrl:n}}}export{e as toAssetDescriptor};

package/dist/shared/widgets/asset-picker/compound/AssetPicker.d.ts

@@ -0,0 +1,51 @@
+import { AssetPickerAssetProps, AssetPickerBodyProps, AssetPickerDialogProps, AssetPickerFooterProps, AssetPickerHeaderProps, AssetPickerListProps, AssetPickerProps } from "./types.js";
+import { AssetPickerAsset } from "./components/Asset.js";
+import { AssetPickerFooter } from "./components/Footer.js";
+import { AssetPickerHeader } from "./components/Header.js";
+import { AssetPickerList } from "./components/List.js";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/shared/widgets/asset-picker/compound/AssetPicker.d.ts
+/**
+ * Root of the AssetPicker compound. Renders the modal-frame card surface and provides shared state
+ * (destination token, asset list, selection, footer wiring) to every compound part rendered inside it.
+ *
+ * Parts:
+ * - {@link AssetPicker.Header}
+ * - {@link AssetPicker.Body}
+ * - {@link AssetPicker.List}
+ * - {@link AssetPicker.Asset}
+ * - {@link AssetPicker.Footer}
+ *
+ * Dialog form: {@link AssetPicker.Dialog} pre-composes the widget into
+ * a `Dialog.Root + Dialog.Trigger + Dialog.Content` shell — the
+ * production-recommended entry point. Use the bare `AssetPicker` form
+ * when you want the widget mounted inline.
+ */
+declare function AssetPicker(props: AssetPickerProps): _$react_jsx_runtime0.JSX.Element;
+declare function AssetPickerBody(props: AssetPickerBodyProps): _$react_jsx_runtime0.JSX.Element;
+declare function AssetPickerDialog({
+  open,
+  defaultOpen,
+  onOpenChange,
+  trigger,
+  children,
+  ...rootProps
+}: AssetPickerDialogProps): _$react_jsx_runtime0.JSX.Element;
+declare namespace AssetPicker {
+  type Props = AssetPickerProps;
+  type HeaderProps = AssetPickerHeaderProps;
+  type BodyProps = AssetPickerBodyProps;
+  type ListProps = AssetPickerListProps;
+  type AssetProps = AssetPickerAssetProps;
+  type FooterProps = AssetPickerFooterProps;
+  type DialogProps = AssetPickerDialogProps;
+  const Header: typeof AssetPickerHeader;
+  const Body: typeof AssetPickerBody;
+  const List: typeof AssetPickerList;
+  const Asset: typeof AssetPickerAsset;
+  const Footer: typeof AssetPickerFooter;
+  const Dialog: typeof AssetPickerDialog;
+}
+//#endregion
+export { AssetPicker };

package/dist/shared/widgets/asset-picker/compound/AssetPicker.js

@@ -0,0 +1 @@
+"use client";import{DialogShell as e}from"../../../dialog/DialogShell.js";import{Card as t}from"../../../ui/Card/Card.js";import{Tooltip as n}from"../../../ui/Tooltip/Tooltip.js";import"../../../ui/Tooltip/index.js";import"../../../../ui/index.js";import{Frame as r}from"../../../dialog/Frame.js";import{ASSET_PICKER_SLOTS as i}from"./AssetPicker.slots.js";import{styles as a}from"./AssetPicker.styles.js";import{AssetPickerContext as o}from"./context.js";import{AssetPickerAsset as s}from"./components/Asset.js";import{AssetPickerFooter as c}from"./components/Footer.js";import{AssetPickerHeader as l}from"./components/Header.js";import{AssetPickerList as u}from"./components/List.js";import{useMemo as d}from"react";import{jsx as f}from"react/jsx-runtime";import*as p from"@stylexjs/stylex";const m=[];function h(e){let{token:t,selectedId:s,onSelect:c,assets:l=m,headerTitle:u,onBack:h,footerLabel:g,onContinue:_,children:v}=e,y=d(()=>({token:t,selectedId:s,onSelect:c,assets:l,headerTitle:u,onBack:h,footerLabel:g,onContinue:_}),[t,s,c,l,u,h,g,_]);return f(o.Provider,{value:y,children:f(n.Provider,{children:f(r,{"data-stridge-slot":i.root,...p.props(a.root),children:v})})})}function g(e){return f(t.Body,{"data-stridge-slot":i.body,...e})}function _({open:t,defaultOpen:n,onOpenChange:r,trigger:i,children:a,...o}){return f(e,{open:t,defaultOpen:n,onOpenChange:r,trigger:i,children:f(h,{...o,children:a})})}(function(e){e.Header=l,e.Body=g,e.List=u,e.Asset=s,e.Footer=c,e.Dialog=_})(h||={});export{h as AssetPicker};

package/dist/shared/widgets/asset-picker/compound/AssetPicker.slots.d.ts

@@ -0,0 +1,11 @@
+//#region src/shared/widgets/asset-picker/compound/AssetPicker.slots.d.ts
+declare const ASSET_PICKER_SLOTS: {
+  readonly root: "asset-picker";
+  readonly header: "asset-picker-header";
+  readonly body: "asset-picker-body";
+  readonly footer: "asset-picker-footer";
+  readonly list: "asset-picker-list";
+};
+type AssetPickerSlot = (typeof ASSET_PICKER_SLOTS)[keyof typeof ASSET_PICKER_SLOTS];
+//#endregion
+export { ASSET_PICKER_SLOTS, AssetPickerSlot };

package/dist/shared/widgets/asset-picker/compound/AssetPicker.slots.js

@@ -0,0 +1 @@
+const e={root:`asset-picker`,header:`asset-picker-header`,body:`asset-picker-body`,footer:`asset-picker-footer`,list:`asset-picker-list`};export{e as ASSET_PICKER_SLOTS};

package/dist/shared/widgets/asset-picker/compound/AssetPicker.styles.js

@@ -0,0 +1 @@
+const e={root:{"AssetPicker__styles.root":`AssetPicker__styles.root`,"position-kVAEAm":`x1n2onr6`,"width-kzqmXN":`xh8yej3`,"maxWidth-ks0D6T":`x17fpy1y`,$$css:`@stridge/kit:src/shared/widgets/asset-picker/compound/AssetPicker.styles.ts:5`},header:{"AssetPicker__styles.header":`AssetPicker__styles.header`,"gap-kOIVth":`x1v2ro7d`,"paddingTop-kLKAdn":`xyamay9`,"paddingInlineEnd-kwRFfy":`x1x5flf6`,"paddingBottom-kGO01o":`x1l90r2v`,"paddingInlineStart-kZCmMZ":`xf7dkkf`,$$css:`@stridge/kit:src/shared/widgets/asset-picker/compound/AssetPicker.styles.ts:12`},headerTitle:{"AssetPicker__styles.headerTitle":`AssetPicker__styles.headerTitle`,"flexGrow-kzQI83":`x1iyjqo2`,"margin-kogj98":`x1ghz6dp`,$$css:`@stridge/kit:src/shared/widgets/asset-picker/compound/AssetPicker.styles.ts:19`},backIcon:{"AssetPicker__styles.backIcon":`AssetPicker__styles.backIcon`,"width-kzqmXN":`x6jxa94`,"height-kZKoxP":`x1v9usgg`,"flexShrink-kmuXW":`x2lah0s`,"color-kMwMTN":`xzn0pkc`,"strokeWidth-kfJifR":`xhxwl1`,$$css:`@stridge/kit:src/shared/widgets/asset-picker/compound/AssetPicker.styles.ts:23`},closeIcon:{"AssetPicker__styles.closeIcon":`AssetPicker__styles.closeIcon`,"width-kzqmXN":`xsmyaan`,"height-kZKoxP":`x1kpxq89`,"flexShrink-kmuXW":`x2lah0s`,"color-kMwMTN":`xzn0pkc`,"strokeWidth-kfJifR":`xhr4kjn`,$$css:`@stridge/kit:src/shared/widgets/asset-picker/compound/AssetPicker.styles.ts:30`},list:{"AssetPicker__styles.list":`AssetPicker__styles.list`,"display-k1xSpc":`x78zum5`,"flexDirection-kXwgrk":`xdt5ytf`,"gap-kOIVth":`x167g77z`,"paddingTop-kLKAdn":`x109j2v6`,"paddingInlineEnd-kwRFfy":`x1x5flf6`,"paddingInlineStart-kZCmMZ":`xwn43p0`,$$css:`@stridge/kit:src/shared/widgets/asset-picker/compound/AssetPicker.styles.ts:38`},assetRow:{"AssetPicker__styles.assetRow":`AssetPicker__styles.assetRow`,"gap-kOIVth":`x1af02g3`,$$css:`@stridge/kit:src/shared/widgets/asset-picker/compound/AssetPicker.styles.ts:51`},textBlock:{"AssetPicker__styles.textBlock":`AssetPicker__styles.textBlock`,"display-k1xSpc":`x78zum5`,"flexDirection-kXwgrk":`xdt5ytf`,"flexBasis-kCS8Yb":`x1r8uery`,"flexGrow-kzQI83":`x1iyjqo2`,"flexShrink-kmuXW":`xs83m0k`,"minWidth-k7Eaqz":`xeuugli`,"gap-kOIVth":`x195vfkc`,$$css:`@stridge/kit:src/shared/widgets/asset-picker/compound/AssetPicker.styles.ts:55`},fiat:{"AssetPicker__styles.fiat":`AssetPicker__styles.fiat`,"flexShrink-kmuXW":`x2lah0s`,"whiteSpace-khDVqt":`xuxw1ft`,$$css:`@stridge/kit:src/shared/widgets/asset-picker/compound/AssetPicker.styles.ts:65`},lowBalanceBadge:{"AssetPicker__styles.lowBalanceBadge":`AssetPicker__styles.lowBalanceBadge`,"flexShrink-kmuXW":`x2lah0s`,"backgroundColor-kWkggS":`xp5aqsh`,"borderColor-kVAM5u":`x1bue7yx`,"color-kMwMTN":`x137ha3m`,"fontSize-kGuDYH":`x1j6dyjg`,"fontWeight-k63SB2":`xk50ysn`,"lineHeight-kLWn49":`x1xxsxie`,"letterSpacing-kb6lSQ":`x1ixy4ik`,"minHeight-kAzted":`xj9xw9b`,"paddingInlineStart-kZCmMZ":`x7coems`,"paddingInlineEnd-kwRFfy":`xrw5ot4`,$$css:`@stridge/kit:src/shared/widgets/asset-picker/compound/AssetPicker.styles.ts:78`},footer:{"AssetPicker__styles.footer":`AssetPicker__styles.footer`,"display-k1xSpc":`x78zum5`,"flexDirection-kXwgrk":`xdt5ytf`,"paddingTop-kLKAdn":`xyamay9`,"paddingInlineEnd-kwRFfy":`x1x5flf6`,"paddingBottom-kGO01o":`x1t4gjm`,"paddingInlineStart-kZCmMZ":`xwn43p0`,$$css:`@stridge/kit:src/shared/widgets/asset-picker/compound/AssetPicker.styles.ts:92`},cta:{"AssetPicker__styles.cta":`AssetPicker__styles.cta`,"width-kzqmXN":`xh8yej3`,$$css:`@stridge/kit:src/shared/widgets/asset-picker/compound/AssetPicker.styles.ts:100`},ctaInteractive:{"AssetPicker__styles.ctaInteractive":`AssetPicker__styles.ctaInteractive`,"cursor-kkrTdU":`x1ypdohk`,$$css:`@stridge/kit:src/shared/widgets/asset-picker/compound/AssetPicker.styles.ts:103`},ctaInert:{"AssetPicker__styles.ctaInert":`AssetPicker__styles.ctaInert`,"cursor-kkrTdU":`xt0e3qv`,$$css:`@stridge/kit:src/shared/widgets/asset-picker/compound/AssetPicker.styles.ts:106`}};export{e as styles};

package/dist/shared/widgets/asset-picker/compound/components/Asset.d.ts

@@ -0,0 +1,30 @@
+import { AssetPickerAssetProps } from "../types.js";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/shared/widgets/asset-picker/compound/components/Asset.d.ts
+/**
+ * A single row inside `AssetPicker.List`, laid out as:
+ *
+ *     [icon + chain badge]   [symbol]               [low balance?]   [fiat]
+ *                            [balance]
+ *
+ * Selection state is read from context, so consumers only manage a single `selectedId` on the root rather than
+ * threading `isSelected` onto each row.
+ */
+declare function AssetPickerAsset({
+  id,
+  symbol,
+  chain,
+  balanceFormatted,
+  fiatFormatted,
+  lowBalance,
+  disabled,
+  chainId,
+  contractAddress,
+  isNative,
+  logoUrl,
+  chainLogoUrl,
+  pinnedLogoUrl
+}: AssetPickerAssetProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { AssetPickerAsset };

package/dist/shared/widgets/asset-picker/compound/components/Asset.js

@@ -0,0 +1 @@
+"use client";import{useLingui as e}from"../../../../i18n/useLingui.js";import"../../../../../i18n/index.js";import{Badge as t}from"../../../../ui/Badge/Badge.js";import"../../../../ui/Badge/index.js";import{SelectableTile as n}from"../../../../ui/SelectableTile/SelectableTile.js";import"../../../../ui/SelectableTile/index.js";import{text as r}from"../../../../ui/Text/Text.js";import{TokenLogo as i}from"../../../../ui/TokenLogo/TokenLogo.js";import"../../../../ui/TokenLogo/index.js";import"../../../../../ui/index.js";import{styles as a}from"../AssetPicker.styles.js";import{useAssetPickerContext as o}from"../context.js";import{jsx as s,jsxs as c}from"react/jsx-runtime";import*as l from"@stylexjs/stylex";function u({id:u,symbol:d,chain:f,balanceFormatted:p,fiatFormatted:m,lowBalance:h=!1,disabled:g=!1,chainId:_,contractAddress:v,isNative:y,logoUrl:b,chainLogoUrl:x,pinnedLogoUrl:S}){let C=o(`AssetPicker.Asset`),{_:w}=e();return c(n,{shape:`card`,value:u,selected:C.selectedId===u,disabled:g,"aria-label":`${d} on ${f}`,"data-asset-id":u,"data-chain":f,...l.props(a.assetRow),children:[s(i,{size:36,symbol:d,..._===void 0?{}:{chainId:_},...v===void 0?{}:{address:v},...y===void 0?{}:{isNative:y},...b===void 0?{}:{logoUrl:b},...x===void 0?{}:{chainLogoUrl:x},...S===void 0?{}:{pinnedLogoUrl:S}}),c(`span`,{...l.props(a.textBlock),children:[s(r.span,{size:`callout`,fontWeight:`semibold`,leading:`tight`,tracking:`tight`,truncate:!0,children:d}),s(r.span,{size:`meta`,fontWeight:`medium`,leading:`tight`,color:`subdued`,truncate:!0,children:p})]}),h?s(t,{variant:`outline`,color:`secondary`,size:`sm`,roundness:`lg`,...l.props(a.lowBalanceBadge),children:w({id:`Wqz0SO`,message:`Low Balance`})}):null,s(r.span,{size:`callout`,fontWeight:`semibold`,leading:`tight`,tracking:`tight`,...l.props(a.fiat),children:m})]})}export{u as AssetPickerAsset};

package/dist/shared/widgets/asset-picker/compound/components/Footer.d.ts

@@ -0,0 +1,16 @@
+import { AssetPickerFooterProps } from "../types.js";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/shared/widgets/asset-picker/compound/components/Footer.d.ts
+/**
+ * Footer row at the bottom of the modal, rendering the full-width Continue CTA.
+ *
+ * Reads the label and click handler from the {@link AssetPicker} root by
+ * default; pass `label` / `onContinue` to override per-instance.
+ */
+declare function AssetPickerFooter({
+  label,
+  onContinue
+}?: AssetPickerFooterProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { AssetPickerFooter };

package/dist/shared/widgets/asset-picker/compound/components/Footer.js

@@ -0,0 +1 @@
+"use client";import{useLingui as e}from"../../../../i18n/useLingui.js";import"../../../../../i18n/index.js";import{Button as t}from"../../../../ui/Button/Button.js";import"../../../../ui/Button/index.js";import{ASSET_PICKER_SLOTS as n}from"../AssetPicker.slots.js";import{styles as r}from"../AssetPicker.styles.js";import{useAssetPickerContext as i}from"../context.js";import{jsx as a}from"react/jsx-runtime";import*as o from"@stylexjs/stylex";function s({label:s,onContinue:c}={}){let l=i(`AssetPicker.Footer`),{_:u}=e(),d=c??l.onContinue,f=s??l.footerLabel??u({id:`xGVfLh`,message:`Continue`}),p=typeof d==`function`;return a(`div`,{"data-stridge-slot":n.footer,...o.props(r.footer),children:a(t,{size:`cta`,onClick:p?d:void 0,...o.props(r.cta,p?r.ctaInteractive:r.ctaInert),children:f})})}export{s as AssetPickerFooter};

package/dist/shared/widgets/asset-picker/compound/components/Header.d.ts

@@ -0,0 +1,19 @@
+import { AssetPickerHeaderProps } from "../types.js";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/shared/widgets/asset-picker/compound/components/Header.d.ts
+/**
+ * Header row with back chevron and title. `Dialog.CloseButton` renders
+ * as the trailing flex child only when the widget is mounted inside
+ * `Dialog.Content`; card-mode shows just `[back, title]`.
+ *
+ * Reads the title and back callback from the {@link AssetPicker} root by
+ * default; pass `title` / `onBack` to override per-instance, or `onBack:
+ * null` to force the chevron hidden even when the root supplies one.
+ */
+declare function AssetPickerHeader({
+  title,
+  onBack
+}?: AssetPickerHeaderProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { AssetPickerHeader };

package/dist/shared/widgets/asset-picker/compound/components/Header.js

@@ -0,0 +1 @@
+"use client";import{useLingui as e}from"../../../../i18n/useLingui.js";import"../../../../../i18n/index.js";import{ChevronLeftIcon as t}from"../../../../icons/ChevronLeftIcon.js";import"../../../../../icons/index.js";import{IconButton as n}from"../../../../ui/IconButton/IconButton.js";import{Dialog as r}from"../../../../ui/Dialog/Dialog.js";import"../../../../ui/Dialog/index.js";import{Card as i}from"../../../../ui/Card/Card.js";import{text as a}from"../../../../ui/Text/Text.js";import"../../../../../ui/index.js";import{ASSET_PICKER_SLOTS as o}from"../AssetPicker.slots.js";import{styles as s}from"../AssetPicker.styles.js";import{useAssetPickerContext as c}from"../context.js";import{jsx as l,jsxs as u}from"react/jsx-runtime";import*as d from"@stylexjs/stylex";function f({title:f,onBack:p}={}){let m=c(`AssetPicker.Header`),{_:h}=e(),g=m.token?.symbol??`USDC`,_=f??m.headerTitle??h({id:`oFmN8a`,message:`Deposit {symbol}`,values:{symbol:g}}),v=p===null?void 0:p??m.onBack;return u(i.Header,{"data-stridge-slot":o.header,...d.props(s.header),children:[typeof v==`function`?l(n,{"aria-label":h({id:`iH8pgl`,message:`Back`}),onClick:v,children:l(t,{"aria-hidden":!0,...d.props(s.backIcon)})}):null,l(a.span,{size:`base`,fontWeight:`semibold`,leading:`tight`,tracking:`tight`,truncate:!0,...d.props(s.headerTitle),children:_}),l(r.CloseButton,{})]})}export{f as AssetPickerHeader};

package/dist/shared/widgets/asset-picker/compound/components/List.d.ts

@@ -0,0 +1,22 @@
+import { AssetPickerListProps } from "../types.js";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/shared/widgets/asset-picker/compound/components/List.d.ts
+/**
+ * Vertical stack of `AssetPicker.Asset` rows. Single-select wired through
+ * `SelectableTileGroup` — Up / Down walks the rows, Home / End jumps to
+ * the ends, and clicking (or pressing Enter / Space on) a row sets the
+ * group's value. The picker context's `selectedId` is the controlled
+ * value; the row click is dispatched via `onValueChange` rather than a
+ * per-row handler.
+ *
+ * By default renders one `AssetPicker.Asset` per entry on the
+ * {@link AssetPicker} root's `assets` prop. Pass `children` to opt out of
+ * the default rendering and supply a bespoke list.
+ */
+declare function AssetPickerList({
+  assets,
+  children
+}?: AssetPickerListProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { AssetPickerList };

package/dist/shared/widgets/asset-picker/compound/components/List.js

@@ -0,0 +1 @@
+"use client";import{useLingui as e}from"../../../../i18n/useLingui.js";import"../../../../../i18n/index.js";import{SelectableTileGroup as t}from"../../../../ui/SelectableTile/SelectableTileGroup.js";import"../../../../ui/SelectableTile/index.js";import{ASSET_PICKER_SLOTS as n}from"../AssetPicker.slots.js";import{styles as r}from"../AssetPicker.styles.js";import{useAssetPickerContext as i}from"../context.js";import{AssetPickerAsset as a}from"./Asset.js";import{jsx as o}from"react/jsx-runtime";import*as s from"@stylexjs/stylex";function c({assets:c,children:l}={}){let u=i(`AssetPicker.List`),{_:d}=e(),f=u.selectedId?[u.selectedId]:[],p=c??u.assets;return o(t,{"data-stridge-slot":n.list,"aria-label":d({id:`GX8GKD`,message:`Assets`}),value:f,onValueChange:e=>{let t=e[0];t&&u.onSelect&&u.onSelect(t)},...s.props(r.list),children:l??p.map(e=>o(a,{...e},e.id))})}export{c as AssetPickerList};

package/dist/shared/widgets/asset-picker/compound/context.js

@@ -0,0 +1 @@
+"use client";import{createContext as e,use as t}from"react";const n=e(null);function r(e){let r=t(n);if(!r)throw Error(`${e} must be rendered inside <AssetPicker>.`);return r}export{n as AssetPickerContext,r as useAssetPickerContext};

package/dist/shared/widgets/asset-picker/compound/index.d.ts

@@ -0,0 +1,3 @@
+import { AssetOption, AssetPickerAssetProps, AssetPickerBodyProps, AssetPickerDialogProps, AssetPickerFooterProps, AssetPickerHeaderProps, AssetPickerListProps, AssetPickerProps, AssetPickerToken } from "./types.js";
+import { AssetPicker } from "./AssetPicker.js";
+import { ASSET_PICKER_SLOTS, AssetPickerSlot } from "./AssetPicker.slots.js";

package/dist/shared/widgets/asset-picker/compound/index.js

@@ -0,0 +1 @@
+import"./AssetPicker.slots.js";import"./AssetPicker.js";