# Hex

Shows a hex string, such as an address, truncated to fit.

[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/Hex.tsx)

## Overview

Hex shows a hex string, such as an address or hash, middle-truncated to fit its container. Screen readers receive the full value.

Truncation keeps both ends visible, so you can compare prefixes and checksum endings.

## Examples

### Basic

```tsx
import { Hex, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <div {...styles.stack()}>
      <Hex value="0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045" />
      <Hex value="0x1234" />
      <div {...styles.frame()}>
        <Hex value="0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045" />
      </div>
    </div>
  )
}

namespace styles {
  export const frame = style({
    borderColor: 'grayAlpha.300',
    borderRadius: 'md',
    borderStyle: 'dashed',
    borderWidth: '1px !custom',
    boxSizing: 'border-box',
    maxWidth: '100% !custom',
    padding: '2',
    width: '6rem !custom',
  })

  export const stack = style({ display: 'grid', gap: '3', justifyItems: 'start' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Hex/Basic.tsx)

### Copy

Set `copy` to add a button that copies the full value. Use `CopyButton` alone when the value is not displayed.

```tsx
import { CopyButton, Hex, style } from '@tempoxyz/ds'

const address = '0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045'
const transaction = '0x5c504ed432cb51138bcf09aa5e8a410dd4a1e204ef84bfed1be16dfba1b22060'

export function Demo() {
  return (
    <div {...styles.stack()}>
      <Hex copy value={transaction} />
      {(['32rem', '20rem', '12rem', '8rem'] as const).map((width) => (
        <div key={width} {...styles.frame({ style: { width } })}>
          <Hex copy value={transaction} />
        </div>
      ))}
      <div {...styles.row()}>
        <CopyButton value={address} />
        <CopyButton value={address} variant="secondary" />
        <CopyButton size="large" value={address} variant="primary" />
      </div>
    </div>
  )
}

namespace styles {
  export const frame = style({
    borderColor: 'grayAlpha.300',
    borderRadius: 'md',
    borderStyle: 'dashed',
    borderWidth: '1px !custom',
    boxSizing: 'border-box',
    maxWidth: '100% !custom',
    padding: '2',
  })

  export const row = style({ alignItems: 'center', display: 'flex', flexWrap: 'wrap', gap: '3' })

  export const stack = style({ display: 'grid', gap: '3', justifyItems: 'start' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Hex/Copy.tsx)

### Evm

Set `evm={false}` for values without a `0x` prefix. It defaults to `true`.

```tsx
import { Hex } from '@tempoxyz/ds'

export function Demo() {
  return <Hex evm={false} value="a1b2c3d4e5f60718293a4b5c6d7e8f90a1b2c3d4e5f60718" />
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Hex/Evm.tsx)

### Variant

Set `variant` to `inline` or `filled`. It defaults to `inline`.

```tsx
import { Hex, style } from '@tempoxyz/ds'

const transaction = '0x5c504ed432cb51138bcf09aa5e8a410dd4a1e204ef84bfed1be16dfba1b22060'

export function Demo() {
  return (
    <div {...styles.stack()}>
      <Hex copy value={transaction} variant="inline" />
      <div {...styles.resizable()}>
        <Hex copy value={transaction} variant="filled" />
      </div>
    </div>
  )
}

namespace styles {
  export const resizable = style({
    maxWidth: '100% !custom',
    minWidth: 'min(10rem, 100%) !custom',
    overflow: 'hidden',
    resize: 'horizontal !custom',
    width: '28rem !custom',
  })

  export const stack = style({ display: 'grid', gap: '3', justifyItems: 'start' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Hex/Variant.tsx)

### Size

Set `size` to `small`, `medium`, or `large`. It defaults to `medium`.

```tsx
import { Hex, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <div {...styles.stack()}>
      {(['small', 'medium', 'large'] as const).map((size) => (
        <Hex
          copy
          key={size}
          size={size}
          value="0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045"
          variant="filled"
        />
      ))}
    </div>
  )
}

namespace styles {
  export const stack = style({ display: 'grid', gap: '3', justifyItems: 'start' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Hex/Size.tsx)

## Guidelines

TODO: Write guidelines for Hex.