# React · Edge.Surface

Aplica iluminación a un elemento DOM.

Package: @bolerish/edge 0.4.0
Source: https://edge.bolerish.com/es/docs/react/surface/

<a id="lighting-surface"></a>

## Edge.Surface

Renderiza un elemento HTML conectado al Edge.Provider más cercano. La etiqueta elegida con `as` determina los atributos, eventos y refs disponibles.

```tsx
<Edge.Surface as="article" edgeStyle="raised">
  Your content
</Edge.Surface>
```

| Prop / opción | Tipo | Predeterminado | Descripción |
| --- | --- | --- | --- |
| `pseudoElement` | `'after' \| 'before'` | `'after'` | Pseudoelemento de decoración. Elige before para conservar un ::after existente. Si ambos están ocupados o el elemento es una entrada nativa, usa un contenedor. Los valores inválidos lanzan RangeError. |
| `edgeStyle` | `'raised' \| 'recessed' \| 'matte'` | `'raised'` | Cómo responde el borde a la luz. Los tres estilos conservan la apariencia del componente. |
| `color` | `string` | `currentColor` | Color del reflejo. Usa el color de texto del elemento por defecto. Acepta cualquier cadena de color CSS, incluidas variables. |
| `shadowColor` | `string` | `#0008` | Color del borde opuesto. Acepta cualquier color CSS; usa transparent para quitar esta sombra en superficies claras. |
| `borderWidth` | `number` | `1` | Grosor decorativo en píxeles; no cambia el borde del elemento. Los negativos se limitan a 0. Los valores no finitos usan el predeterminado. |
| `intensity` | `number` | `1` | Multiplicador de la intensidad compartida. Los valores finitos se limitan a 0–1; los no finitos usan el predeterminado. |
| `as` | `HTML tag name` | `'div'` | Elemento HTML que se renderiza. Sus atributos y ref corresponden a la etiqueta elegida; no admite componentes React personalizados. |
| `children` | `ReactNode` | `Unset` | Contenido del elemento. Usa un contenedor para entradas y otros elementos que no puedan mostrar la decoración. |
| `ref` | `Ref<HTMLElement for the chosen tag>` | `Unset` | Se reenvía al elemento junto con el ref de registro interno. Se conserva la limpieza de refs de callback de React 19. |
| `className` | `string` | `Unset` | Tus clases, combinadas con las clases de decoración. |
| `style` | `CSSProperties` | `Unset` | Tus estilos en línea, combinados después de la decoración. Conserva las variables CSS de Edge salvo que quieras sobrescribirlas. |

Usa `Edge.Surface` dentro de `Edge.Provider`. Renderizarlo fuera provoca un error. Para elementos input o conflictos con pseudoelementos existentes, consulta [Consideraciones de integración](https://edge.bolerish.com/es/docs/integration/).

El reflejo se alinea con el exterior del borde del elemento DOM. Para conectar el elemento de un componente existente, usa [useSurface](https://edge.bolerish.com/es/docs/react/use-surface/#use-surface).