Chain ID 42431

Fees Sponsored

)} setLoadingOpen((open) => !open)} > Pending {loadingOpen && ( )} ) } export function SurfaceRows() { const [activityOpen, setActivityOpen] = useState(true) const [syncLoaded, setSyncLoaded] = useState(false) const [syncLoading, setSyncLoading] = useState(false) const [syncOpen, setSyncOpen] = useState(false) useEffect(() => { if (!syncLoading) return const timeout = setTimeout(() => { setSyncLoaded(true) setSyncLoading(false) }, 700) return () => clearTimeout(timeout) }, [syncLoading]) const onSyncOpenChange = (open: boolean) => { setSyncOpen(open) if (open && !syncLoaded) setSyncLoading(true) if (!open) { setSyncLoaded(false) setSyncLoading(false) } } return ( setActivityOpen((open) => !open)} >

Access key activity 2 transactions

{activityOpen && ( } >

Access key spend EmailValidator

Now } >

Session closed DomainIntel

1m )} onSyncOpenChange(!syncOpen)} >

Syncing activity {syncLoading ? 'Loading rows' : syncLoaded ? '2 rows loaded' : 'Loads on open'}

{syncOpen && (syncLoading || syncLoaded) && ( {syncLoading ? ( ) : ( <> } >

Recipient checked 0xd8dA…6045

Now } >

Policy refreshed DomainIntel

Now )} )} ) } ``` ## API Reference ### Rows.Props | Prop | Type | Required | Default | Description | | --- | --- | --- | --- | --- | | children | ReactNode | Yes | None | Row items. | | dividers | 'full' \| 'inset' | No | Rows.defaultDividers[variant] | Horizontal row divider length. Defaults to `'inset'` for pane rows and `'full'` for surface rows. | | variant | 'pane' \| 'surface' | No | 'pane' | Visual row group surface. | | Inherits | HTMLAttributes<HTMLDivElement> | | | Inherited props. | ### Rows.Group.Props Props for nested rows rendered with `Rows.Group`. | Prop | Type | Required | Default | Description | | --- | --- | --- | --- | --- | | children | ReactNode | Yes | None | Nested row items. | | Inherits | HTMLAttributes<HTMLDivElement> | | | Inherited props. | ### Rows.Panel.Props Props for expanded content rendered with `Rows.Panel`. | Prop | Type | Required | Default | Description | | --- | --- | --- | --- | --- | | children | ReactNode | Yes | None | Panel content. | | Inherits | HTMLAttributes<HTMLDivElement> | | | Inherited props. | ### Rows.Row.Props | Prop | Type | Required | Default | Description | | --- | --- | --- | --- | --- | | action | ActionExpand \| ActionNavigation \| ActionNone | Conditional | 'none' | Row action affordance. | | onClick | OnClick | Conditional | None | Press handler. Update `action.expanded` and render adjacent content from here.
Press handler.
Press handler. When provided without `render` or a visual action, the row renders as a button. | | children | ReactNode | Yes | None | Row content. | | disabled | boolean | No | None | Disable interaction when the row is interactive. | | height | number | No | None | Row height in px. Defaults to the variant height. | | label | ReactNode | No | None | Left-side label for key-value rows. | | render | ReactElement | No | None | Element to render as instead of a div or button. | | spacing | 'both' \| 'end' \| 'none' \| 'start' | No | 'both' | Which sides keep the parent `` padding. Only applies to pane rows. | | Inherits | HTMLAttributes<HTMLElement> | | | Except action, onClick. | ### Rows.Row.ActionExpand Expand row action. Shows a chevron for rows that open adjacent content such as `Rows.Group`. | Prop | Type | Required | Default | Description | | --- | --- | --- | --- | --- | | expanded | boolean | Yes | None | Whether the adjacent content is currently open. | | type | 'expand' | Yes | None | Action type. | ### Rows.Row.ActionNavigation Navigation row action. | Prop | Type | Required | Default | Description | | --- | --- | --- | --- | --- | | type | 'navigation' | Yes | None | Action type. | ### Rows.Row.ActionNone No visual row action. | Prop | Type | Required | Default | Description | | --- | --- | --- | --- | --- | | type | 'none' | Yes | None | Action type. | --- # Select Composable select primitives for custom option rows. HTML: /select Markdown: /select.md ## Usage ```tsx import { useState } from 'react' import { Select, Token } from 'regen-ui' const assetItems = [ { label: 'pathUSD', prefix: ( ), suffix: '1,240.50', value: 'pathusd', }, { label: 'USDC.e', prefix: ( ), suffix: '845.00', value: 'usdce', }, ] export function AssetSelect() { const [value, setValue] = useState('pathusd') return