'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Extras
CodeBlock, CopyButton, SplitText
Código con botón de copiar, un botón de copiar para cualquier valor y un titular que entra palabra por palabra. CodeSnippet copia un comando o un valor en línea; CodeBlock resalta líneas, ajusta el texto y corta el código largo con Ver más.
import { CodeBlock, CopyButton, SplitText, CodeSnippet } from '@alea/ui';
Ejemplos
CodeBlock
Código con título, números de línea y copiar.
:root { --alea-accent: #cd57ff; --alea-radius-md: 20px;}CopyButton
Copia cualquier valor; se anuncia "Copiado".
#CD57FF
SplitText
Un titular que aparece palabra por palabra.
Design that plays with you
Fragmentos, resaltados y Ver más
CodeSnippet copia un comando o un valor en línea; CodeBlock resalta líneas, ajusta líneas largas y recorta código largo con Ver más.
npm install @alea/ui @alea/motionYour token: (press to copy)
import { Tree } from '@alea/ui'; export function Files({ data }) { return ( <Tree aria-label="Files" data={data} directory showLinesTokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Color
--alea-accent…--alea-accent-subtle…--alea-border…--alea-focus…--alea-surface-deep…--alea-surface-hover…--alea-text…--alea-text-faint…--alea-text-muted…
Space
--alea-space-2…
Radius
--alea-radius-md…
Type
--alea-font-family-body…--alea-font-family-mono…--alea-font-size-sm…--alea-font-size-xs…--alea-font-weight-medium…
Props
CodeBlock props
Código con un botón de copiar, números de línea, líneas resaltadas, ajuste de línea y Ver más para fragmentos largos (no incluye resaltador de sintaxis).
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
codeobligatoria | string | - | El código. |
className | string | - | Clases extra para el elemento raíz. |
copy | boolean | true | Botón de copiar. Por defecto true. |
highlightLines | number[] | - | Números de línea a resaltar, desde 1: [3, 4, 5]. |
lineNumbers | boolean | - | Muestra los números de línea. |
maxLines | number | - | Muestra esta cantidad de líneas y un botón Ver más para el resto. |
title | ReactNode | - | Se muestra sobre el código, por ejemplo un nombre de archivo o "bash". |
wrap | boolean | - | Las líneas largas se ajustan en lugar de desplazarse de lado. |
CopyButton props
Copia un valor y lo confirma, con anuncio para lectores de pantalla.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
valueobligatoria | string | - | El texto a copiar. |
appearance | "button" | "icon" | 'icon' | icon (por defecto) o un botón con la etiqueta. |
label | string | - | Qué se copia, para la etiqueta ("Copiar hex"). Por defecto "Copiar". |
onCopy | (() => void) | - | Se llama después de copiar el texto. |
size | "sm" | "md" | 'sm' | sm o md (por defecto). |
SplitText props
Un titular que aparece palabra por palabra (se lee como un solo texto en lectores de pantalla; quieto con movimiento reducido).
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
childrenobligatoria | string | - | El texto a animar, palabra por palabra. |
stagger | number | 60 | Demora entre palabras en ms. Por defecto 60. |
CodeSnippet props
Un fragmento corto de código para copiar: en línea dentro de una oración (presiona para copiar), o una sola línea con un botón de copiar, como un comando de instalación.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
codeobligatoria | string | - | El código a mostrar y copiar. |
className | string | - | Clases extra. |
prompt | string | - | Un prompt mostrado antes de una sola línea, como $ (no se copia). |
variant | "inline" | "single" | 'single' | inline: dentro de una oración, copia al presionar; single: una línea en una caja con un botón de copiar. |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
CodeBlock
- Estados
- Keyboard focusHover (CSS)
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-codeblock.alea-codeblock-head.alea-codeblock-pre.alea-codeblock-line.alea-codeblock-more- Atributos data
data-line-numbersdata-highlightdata-wrapdata-cut
CopyButton
- Variantes
appearancebuttoniconsizesmmd- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-visually-hidden
SplitText
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-split.alea-split-word
CodeSnippet
- Variantes
variantinlinesingle- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-snippet-inline.alea-snippet.alea-snippet-code.alea-snippet-prompt
Accesibilidad
- CopyButton anuncia "Copiado".
- SplitText se lee como un solo texto; las palabras se ocultan a los lectores de pantalla.
Qué hacer y qué evitar
Hacer
- Ponle a los bloques de código un nombre de archivo o del lenguaje.
- Mantén los ejemplos lo bastante cortos para leerlos sin scroll.
Evitar
- No pongas secretos ni tokens reales en los ejemplos.
- No dependas de los colores de sintaxis para explicar el código.