orbital-ds 0.5.0 → 0.6.0

package/dist/themes/tactile.scoped.css

@@ -0,0 +1,399 @@
+/*
+ * TEMA tactile — interfaz táctil de papel y tinta, con rotulador.
+ *
+ * Dirección ORIGINAL (no copia ninguna referencia: toma un principio de cada una).
+ *   - Lo que se pulsa lleva TINTA: contorno de 2px y una arista inferior de 5px que
+ *     baja al pulsar, como una tecla. Las superficies llevan filete suave.
+ *   - Un ROTULADOR mostaza translúcido bajo los títulos.
+ *   - Papel cálido y tinta berenjena casi negra (nunca #000). Un acento vivo
+ *     (mostaza, con texto de tinta: contraste 10:1) y uno pequeño (pino).
+ *   - Formas: 8 · 12 · 14 · 16. Sin sombras difusas: la profundidad la dan las aristas.
+ *   - Titulares en Fraunces (serifa suave) y cuerpo en Figtree.
+ *
+ * Importar DESPUÉS de la estructura. Variables `--zw-*`: privadas de este tema.
+ * Fuentes: `tactile.fonts.css`, lo primero del CSS de la app.
+ */
+
+/* ── VARIABLES · PIEL CLARA («papel») ────────────────────────────────────── */
+:root[data-theme='tactile'] {
+  --radius: 16px;
+
+  --ds-font-sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  --ds-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
+  --ds-font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
+  --ds-heading-tracking: -0.01em;
+
+  --background: #f6f0e3;
+  --foreground: #2a2233;
+
+  --card: #fffcf4;
+  --card-foreground: #2a2233;
+  --popover: #fffcf4;
+  --popover-foreground: #2a2233;
+
+  --primary: #f2b33d;
+  --primary-foreground: #2a2233;
+  --secondary: #ede3cd;
+  --secondary-foreground: #2a2233;
+  --muted: #ede3cd;
+  --muted-foreground: rgba(42, 34, 51, 0.7);
+  --accent: rgba(242, 179, 61, 0.3);
+  --accent-foreground: #2a2233;
+  --destructive: #b53a22;
+  --destructive-foreground: #fffcf4;
+
+  --border: rgba(42, 34, 51, 0.14);
+  --input: #2a2233;
+  --ring: #17624f;
+
+  --chart-1: #f2b33d;
+  --chart-2: #17624f;
+  --chart-3: #2f6fb0;
+  --chart-4: #b53a22;
+  --chart-5: #8b5a9e;
+
+  --sidebar: #ede3cd;
+  --sidebar-foreground: #2a2233;
+  --sidebar-primary: #f2b33d;
+  --sidebar-primary-foreground: #2a2233;
+  --sidebar-accent: #fffcf4;
+  --sidebar-accent-foreground: #2a2233;
+  --sidebar-border: rgba(42, 34, 51, 0.26);
+  --sidebar-ring: #17624f;
+
+  --danger: #b53a22;
+  --danger-soft: rgba(214, 69, 43, 0.13);
+  --warning: #7a5200;
+  --warning-soft: rgba(242, 179, 61, 0.3);
+  --success: #17624f;
+  --success-soft: rgba(23, 98, 79, 0.12);
+  --info: #2f6fb0;
+  --info-soft: rgba(47, 111, 176, 0.12);
+  --neutral: rgba(42, 34, 51, 0.72);
+  --neutral-soft: rgba(42, 34, 51, 0.08);
+
+  --link: #17624f;
+  --link-hover: #0f4538;
+  --inset: #ede3cd;
+  --inset-foreground: #2a2233;
+  --brand: #f2b33d;
+  --brand-bright: #f7c566;
+
+  /* Formas */
+  --ds-radius-sm: 8px;
+  --ds-radius-md: 12px;
+  --ds-radius-lg: 14px;
+  --ds-radius-xl: 16px;
+  --ds-radius-2xl: 20px;
+  --ds-radius-control: 12px;
+  --ds-radius-overlay: 18px;
+
+  /* Sin sombras difusas: la profundidad la dan las aristas (ver la personalidad) */
+  --ds-shadow-card: 0 0 #0000;
+  --ds-shadow-card-hover: 0 0 #0000;
+  --ds-shadow-control: 0 0 #0000;
+  --ds-shadow-raised: 0 0 #0000;
+  --ds-shadow-overlay: 0 8px 0 rgba(42, 34, 51, 0.12);
+  --ds-shadow-popover: 0 6px 0 rgba(42, 34, 51, 0.12);
+
+  /* Medidas: teclas generosas */
+  --ds-control-h-sm: 2.25rem;
+  --ds-control-h-md: 2.75rem;
+  --ds-control-h-lg: 3.25rem;
+  --ds-button-px-sm: 0.875rem;
+  --ds-button-px-md: 1.125rem;
+  --ds-button-px-lg: 1.5rem;
+  --ds-field-px: 0.875rem;
+  --ds-card-spacing: 1.25rem;
+  --ds-card-spacing-sm: 1rem;
+
+  /* Materiales: ninguno */
+  --ds-card-backdrop: none;
+  --ds-overlay-backdrop: none;
+  --ds-field-backdrop: none;
+  --ds-sidebar-backdrop: none;
+  --ds-page-backdrop: none;
+
+  /* Sidebar a ras de borde, papel más hondo, filas como teclas */
+  --ds-sidebar-pad: 0px;
+  --ds-sidebar-radius: 0px;
+  --ds-sidebar-shadow: 0 0 #0000;
+  --ds-sidebar-ring: 0px;
+  --ds-sidebar-edge: 2px solid var(--sidebar-border);
+  --ds-sidebar-item-radius: 14px;
+  --ds-sidebar-item-h: 2.75rem;
+
+  /* Baldosas de icono: grandes, tintadas y con relleno duotono suave */
+  --ds-icon-tile-sm: 2.25rem;
+  --ds-icon-tile-md: 3.5rem;
+  --ds-icon-tile-lg: 4.5rem;
+  --ds-icon-tile-radius: var(--ds-radius-xl);
+  --ds-icon-tile-fill: 0.2;
+
+  /* Privadas de tactile */
+  --zw-outline: #2a2233;
+  --zw-edge: rgba(42, 34, 51, 0.26);
+  --zw-mark: rgba(242, 179, 61, 0.62);
+}
+
+/* ── VARIABLES · PIEL OSCURA («noche») ───────────────────────────────────── */
+:root[data-theme='tactile'].dark {
+  --background: #1d1824;
+  --foreground: #f4ebda;
+
+  --card: #2c2636;
+  --card-foreground: #f4ebda;
+  --popover: #2c2636;
+  --popover-foreground: #f4ebda;
+
+  --primary: #f2b33d;
+  --primary-foreground: #1d1824;
+  --secondary: #25202e;
+  --secondary-foreground: #f4ebda;
+  --muted: #25202e;
+  --muted-foreground: rgba(244, 235, 218, 0.72);
+  --accent: rgba(242, 179, 61, 0.18);
+  --accent-foreground: #f7c566;
+  --destructive: #ff8266;
+  --destructive-foreground: #1d1824;
+
+  --border: rgba(244, 235, 218, 0.14);
+  --input: rgba(244, 235, 218, 0.92);
+  --ring: #5cc9a8;
+
+  --chart-1: #f2b33d;
+  --chart-2: #5cc9a8;
+  --chart-3: #7db3f0;
+  --chart-4: #ff8266;
+  --chart-5: #c79ad8;
+
+  --sidebar: #25202e;
+  --sidebar-foreground: #f4ebda;
+  --sidebar-primary: #f2b33d;
+  --sidebar-primary-foreground: #1d1824;
+  --sidebar-accent: #2c2636;
+  --sidebar-accent-foreground: #f4ebda;
+  --sidebar-border: rgba(244, 235, 218, 0.26);
+  --sidebar-ring: #5cc9a8;
+
+  --danger: #ff8266;
+  --danger-soft: rgba(255, 130, 102, 0.16);
+  --warning: #f2b33d;
+  --warning-soft: rgba(242, 179, 61, 0.18);
+  --success: #5cc9a8;
+  --success-soft: rgba(92, 201, 168, 0.16);
+  --info: #7db3f0;
+  --info-soft: rgba(125, 179, 240, 0.16);
+  --neutral: rgba(244, 235, 218, 0.72);
+  --neutral-soft: rgba(244, 235, 218, 0.1);
+
+  --link: #5cc9a8;
+  --link-hover: #8ee0c4;
+  --inset: #25202e;
+  --inset-foreground: #f4ebda;
+  --brand: #f2b33d;
+  --brand-bright: #f7c566;
+
+  --ds-shadow-overlay: 0 8px 0 rgba(0, 0, 0, 0.4);
+  --ds-shadow-popover: 0 6px 0 rgba(0, 0, 0, 0.4);
+
+  --zw-outline: rgba(244, 235, 218, 0.92);
+  --zw-edge: rgba(244, 235, 218, 0.26);
+  --zw-mark: rgba(242, 179, 61, 0.45);
+}
+
+/* ── PERSONALIDAD ────────────────────────────────────────────────────────────
+ * Sin capa: gana a las utilidades de los componentes. Solo variables. No usa
+ * box-shadow en los controles, así el anillo de foco sigue funcionando.
+ */
+:root[data-theme='tactile'] {
+  /* Teclas: contorno de tinta y arista inferior; al pulsar, se hunden */
+  [data-slot='button'] {
+    border: 2px solid var(--zw-outline);
+    border-bottom-width: 5px;
+    border-radius: 14px;
+    font-weight: 700;
+    transition:
+      transform var(--ds-motion-fast) ease,
+      border-bottom-width var(--ds-motion-fast) ease,
+      background-color var(--ds-motion-base) ease;
+  }
+  [data-slot='button']:active:not(:disabled) {
+    transform: translateY(3px);
+    border-bottom-width: 2px;
+  }
+  [data-slot='button']:disabled {
+    opacity: 0.45;
+  }
+  [data-slot='button'][data-variant='default']:hover:not(:disabled) {
+    background-color: color-mix(in oklch, var(--primary) 78%, var(--card));
+  }
+  [data-slot='button'][data-variant='secondary'],
+  [data-slot='button'][data-variant='outline'] {
+    background: var(--card);
+    color: var(--foreground);
+  }
+  [data-slot='button'][data-variant='outline'] {
+    background: transparent;
+  }
+  [data-slot='button'][data-variant='secondary']:hover:not(:disabled),
+  [data-slot='button'][data-variant='outline']:hover:not(:disabled) {
+    background: var(--secondary);
+  }
+  [data-slot='button'][data-variant='ghost'] {
+    border-color: transparent;
+    border-bottom-width: 2px;
+  }
+  [data-slot='button'][data-variant='ghost']:hover:not(:disabled) {
+    background: var(--secondary);
+  }
+  [data-slot='button'][data-variant='destructive'] {
+    background: var(--destructive);
+    color: var(--destructive-foreground);
+  }
+  [data-slot='button'][data-variant='link'] {
+    border: 0;
+    font-weight: 700;
+  }
+  [data-slot='button'][data-variant='link']:active:not(:disabled) {
+    transform: none;
+  }
+
+  /* Superficies: filete suave y una arista inferior más marcada */
+  [data-slot='card'] {
+    border: 2px solid var(--border);
+    border-bottom: 5px solid var(--zw-edge);
+    box-shadow: none;
+  }
+
+  /* Campos: contorno de tinta */
+  [data-slot='input'],
+  [data-slot='textarea'],
+  [data-slot='select-trigger'] {
+    background: var(--card);
+    border: 2px solid var(--input);
+  }
+
+  /* Etiquetas: esquina de 8px, no píldora */
+  [data-slot='badge'] {
+    border-radius: 8px;
+    font-weight: 700;
+  }
+
+  /* Pestañas: teclas pequeñas; la activa, en mostaza */
+  [data-slot='tabs-list'] {
+    background: transparent;
+    gap: 8px;
+  }
+  [data-slot='tabs-trigger'] {
+    border: 2px solid var(--border);
+    border-bottom-width: 4px;
+    border-radius: 12px;
+    font-weight: 700;
+    background: transparent;
+  }
+  [data-slot='tabs-trigger'][data-active] {
+    background: var(--primary);
+    color: var(--primary-foreground);
+    border-color: var(--zw-outline);
+  }
+
+  /* Interruptor, casilla y progreso, con tinta */
+  [data-slot='switch'] {
+    border: 2px solid var(--zw-outline);
+    border-bottom-width: 4px;
+    border-radius: 12px;
+  }
+  [data-slot='switch'][data-checked] {
+    background: var(--primary);
+  }
+  [data-slot='switch-thumb'] {
+    border-radius: 7px;
+    background: var(--zw-outline);
+  }
+  [data-slot='checkbox'] {
+    border: 2px solid var(--zw-outline);
+    border-radius: 8px;
+  }
+  [data-slot='checkbox'][data-checked] {
+    background: var(--primary);
+    color: var(--primary-foreground);
+  }
+  [data-slot='progress'] {
+    border: 2px solid var(--zw-outline);
+    border-radius: 8px;
+    background: var(--background);
+  }
+  [data-slot='progress-indicator'] {
+    background: var(--primary);
+  }
+
+  /* Capas flotantes: contorno de tinta y arista inferior */
+  [data-slot='dialog-content'],
+  [data-slot='sheet-content'] {
+    border: 2px solid var(--zw-outline);
+    border-bottom-width: 6px;
+  }
+  [data-slot='popover-content'],
+  [data-slot='dropdown-menu-content'],
+  [data-slot='select-content'] {
+    border: 2px solid var(--zw-outline);
+    border-bottom-width: 4px;
+  }
+
+  /* Avisos con tinta */
+  [data-slot='alert'] {
+    border: 2px solid var(--zw-outline);
+    border-radius: 14px;
+  }
+
+  /* Tablas: filetes de 2px */
+  [data-slot='table-row'] {
+    border-top: 2px solid var(--border);
+  }
+  [data-slot='table-head'] {
+    text-transform: uppercase;
+    font-size: 0.75rem;
+    letter-spacing: 0.08em;
+    font-weight: 700;
+    color: var(--muted-foreground);
+  }
+
+  /* Teclas del teclado */
+  [data-slot='kbd'] {
+    border: 2px solid var(--zw-outline);
+    border-bottom-width: 4px;
+    border-radius: 8px;
+    background: var(--card);
+    font-weight: 700;
+  }
+
+  /* ROTULADOR: franja translúcida bajo el título (la mitad inferior de la letra) */
+  [data-slot='card-title'],
+  [data-slot='dialog-title'],
+  [data-slot='sheet-title'],
+  header h1 {
+    width: fit-content;
+    max-width: 100%;
+    background: linear-gradient(transparent 56%, var(--zw-mark) 56%);
+    padding-inline: 0.14em;
+    margin-inline: -0.14em;
+    -webkit-box-decoration-break: clone;
+    box-decoration-break: clone;
+  }
+
+  /* Sidebar: filas como teclas; la activa, elevada */
+  [data-sidebar='menu-button'] {
+    border: 2px solid transparent;
+    border-radius: 14px;
+    font-weight: 600;
+  }
+  [data-sidebar='menu-button']:hover:not([data-active='true']) {
+    background: var(--card);
+  }
+  [data-sidebar='menu-button'][data-active='true'] {
+    background: var(--card);
+    border-color: var(--zw-outline);
+    border-bottom-width: 5px;
+  }
+}

package/dist/themes/twitter.guide.md

@@ -0,0 +1,35 @@
+# Tema `twitter` — guía de diseño
+
+## Esencia
+La interfaz de Twitter anterior a X (rediseño de 2021): plana, de alto contraste, con pocas decoraciones.
+
+## Gesto firma
+Separación por **filetes de 1px**, botones en píldora de peso 700, sidebar a ras sin fondo con filas en píldora (la activa en negrita) y pestañas con subrayado de acento.
+
+## Principios
+- Sin sombras ni cristal en el contenido.
+- «Menos azul»: la acción más importante puede ir en tinta (negro/blanco).
+- Tarjetas de 16px sin elevación.
+
+## Referencias y qué se tomó de cada una
+- **Twitter (2021)**: azul de marca `#1D9BF0` (confirmado), fuente Chirp (confirmada, propietaria), estructura plana y filetes. El resto se tomó de memoria.
+
+## Paleta
+- Claro: fondo `#FFFFFF`, texto `#0F1419`, primario `#1D9BF0`, borde `#EFF3F4`.
+- Oscuro («Dim»): fondo `#15202B`, texto `#F7F9F9`.
+
+## Tipografía
+Chirp no se puede distribuir: el tema usa la **pila del sistema** como respaldo. No hay fuente que cargar (`twitter.fonts.css` solo lo documenta).
+
+## Formas y profundidad
+Radio 16px; sin sombras; filetes 1px.
+
+## Qué evita
+Sombras, cristal, elevación en tarjetas.
+
+## Accesibilidad
+Azul `#1D9BF0` con texto blanco: contraste limitado (≈3:1); por eso se admite la acción primaria en tinta.
+
+## Estado de los valores
+- **Confirmados**: azul `#1D9BF0` y la fuente Chirp.
+- **Aproximados (de memoria)**: grises, bordes y fondos de «Dim»; contrastarlos con una captura de referencia antes de darlos por buenos.

package/dist/themes/twitter.meta.json

@@ -0,0 +1,14 @@
+{
+  "name": "twitter",
+  "label": "Twitter (2021)",
+  "essence": "Plano y de alto contraste: filetes de 1px, píldoras, sin sombras.",
+  "signature": ["filetes de 1px", "botones en píldora de peso 700", "sidebar a ras con filas en píldora"],
+  "fonts": { "display": "Chirp (sistema como respaldo)", "body": "Chirp (sistema como respaldo)", "file": "twitter.fonts.css", "distributable": false },
+  "palette": { "light": { "background": "#FFFFFF", "foreground": "#0F1419", "primary": "#1D9BF0" }, "dark": { "background": "#15202B" } },
+  "radii": [16, 999],
+  "references": [
+    { "name": "Twitter (2021)", "tookFromIt": "estructura plana, azul de marca, filetes", "source": "memoria; azul y fuente documentados" }
+  ],
+  "status": { "verified": ["azul #1D9BF0", "fuente Chirp"], "approximate": ["grises", "bordes", "fondos de Dim"], "designed": [], "pending": ["contrastar con captura de referencia"] },
+  "guide": "twitter.guide.md"
+}

package/dist/themes/zyro.guide.md

@@ -0,0 +1,33 @@
+# Tema `zyro` — guía de diseño
+
+## Esencia
+«Liquid glass»: lavanda claro / azul muy oscuro, con cristal en la navegación y los controles y contenido casi opaco.
+
+## Gesto firma
+**Cristal** en sidebar, campos y menús; acción primaria como **píldora con degradado de marca y brillo**; sidebar a ras de borde.
+
+## Principios
+- El cristal vive en la capa de navegación y controles; el contenido (tarjetas) se mantiene casi opaco, como indican las guías de cristal.
+- Radio generoso (18px).
+
+## Referencias y qué se tomó de cada una
+- **faro-orbital-zyro-ui** (biblioteca interna de Fractalia): paleta, fondo con deriva de color en CSS, cristal y botón primario. El tema es una traducción de ese diseño. La malla animada con shader no está activa (sería un componente opcional).
+
+## Paleta
+- Claro: fondo `#EAEEFB`, primario `#0349FE`, texto `rgba(14,22,48,.92)`, tarjeta casi opaca.
+- Oscuro: fondo `#0E3148`, acento cian.
+
+## Tipografía
+Titulares **Montserrat**, cuerpo **Roboto** (`zyro.fonts.css`, lo primero del CSS de la app).
+
+## Formas y profundidad
+Radio 18px; translucidez y desenfoque en navegación; brillo en el primario.
+
+## Qué evita
+Cristal en el contenido principal (afecta a la legibilidad).
+
+## Accesibilidad
+Cristal sobre fondos variables exige vigilar el contraste del texto de navegación. Limitación conocida: la sombra de sus botones anula el anillo de foco (corrección prevista).
+
+## Estado de los valores
+Traducidos de la biblioteca interna de origen; no contrastados de nuevo en esta versión.

package/dist/themes/zyro.meta.json

@@ -0,0 +1,14 @@
+{
+  "name": "zyro",
+  "label": "Zyro",
+  "essence": "Liquid glass: cristal en navegación y controles, contenido casi opaco.",
+  "signature": ["cristal en sidebar, campos y menús", "primario en píldora con degradado y brillo"],
+  "fonts": { "display": "Montserrat", "body": "Roboto", "file": "zyro.fonts.css", "distributable": true },
+  "palette": { "light": { "background": "#EAEEFB", "foreground": "rgba(14,22,48,0.92)", "primary": "#0349FE" }, "dark": { "background": "#0E3148" } },
+  "radii": [18],
+  "references": [
+    { "name": "faro-orbital-zyro-ui", "tookFromIt": "paleta, cristal, botón primario, fondo con deriva", "source": "biblioteca interna" }
+  ],
+  "status": { "verified": [], "approximate": [], "designed": [], "pending": ["anillo de foco en botones", "malla animada opcional"] },
+  "guide": "zyro.guide.md"
+}

package/dist/ui/attachment.d.ts

@@ -5,7 +5,7 @@ import { VariantProps } from 'class-variance-authority';
 import { Button } from './button.js';
 
 declare const attachmentVariants: (props?: ({
-    size?: "default" | "xs" | "sm" | null | undefined;
+    size?: "default" | "sm" | "xs" | null | undefined;
     orientation?: "horizontal" | "vertical" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Attachment({ className, state, size, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof attachmentVariants> & {

package/dist/ui/button.d.ts

@@ -5,7 +5,7 @@ import { VariantProps } from 'class-variance-authority';
 
 declare const buttonVariants: (props?: ({
     variant?: "link" | "default" | "outline" | "secondary" | "ghost" | "destructive" | null | undefined;
-    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+    size?: "default" | "sm" | "xs" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Button({ className, variant, size, render, nativeButton: _nativeButton, ...props }: useRender.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
     nativeButton?: boolean;

package/dist/ui/icon-tile.d.ts

@@ -0,0 +1,11 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+declare const iconTileVariants: (props?: ({
+    tone?: "neutral" | "primary" | "accent" | "success" | "warning" | "danger" | "info" | null | undefined;
+    size?: "sm" | "lg" | "md" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function IconTile({ className, tone, size, ...props }: React.ComponentProps<"div"> & VariantProps<typeof iconTileVariants>): React.JSX.Element;
+
+export { IconTile, iconTileVariants };

package/dist/ui/icon-tile.js

@@ -0,0 +1,47 @@
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/utils";
+const iconTileVariants = cva(
+  "inline-flex shrink-0 items-center justify-center rounded-(--ds-icon-tile-radius) [&>svg]:size-1/2",
+  {
+    variants: {
+      tone: {
+        neutral: "bg-muted text-foreground",
+        primary: "bg-primary text-primary-foreground",
+        accent: "bg-accent text-accent-foreground",
+        success: "bg-success-soft text-success",
+        warning: "bg-warning-soft text-warning",
+        danger: "bg-danger-soft text-danger",
+        info: "bg-info-soft text-info"
+      },
+      size: {
+        sm: "size-(--ds-icon-tile-sm)",
+        md: "size-(--ds-icon-tile-md)",
+        lg: "size-(--ds-icon-tile-lg)"
+      }
+    },
+    defaultVariants: { tone: "accent", size: "md" }
+  }
+);
+function IconTile({
+  className,
+  tone,
+  size,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "icon-tile",
+      "data-tone": tone ?? "accent",
+      "data-size": size ?? "md",
+      "aria-hidden": "true",
+      className: cn(iconTileVariants({ tone, size }), className),
+      ...props
+    }
+  );
+}
+export {
+  IconTile,
+  iconTileVariants
+};

package/dist/ui/input-group.d.ts

@@ -10,7 +10,7 @@ declare const inputGroupAddonVariants: (props?: ({
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function InputGroupAddon({ className, align, ...props }: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>): React.JSX.Element;
 declare const inputGroupButtonVariants: (props?: ({
-    size?: "xs" | "sm" | "icon-xs" | "icon-sm" | null | undefined;
+    size?: "sm" | "xs" | "icon-xs" | "icon-sm" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function InputGroupButton({ className, type, variant, size, ...props }: Omit<React.ComponentProps<typeof Button>, "size" | "type"> & VariantProps<typeof inputGroupButtonVariants> & {
     type?: "button" | "submit" | "reset";

package/dist/ui/item.d.ts

@@ -9,7 +9,7 @@ declare function ItemGroup({ className, ...props }: React.ComponentProps<"div">)
 declare function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): React.JSX.Element;
 declare const itemVariants: (props?: ({
     variant?: "default" | "outline" | "muted" | null | undefined;
-    size?: "default" | "xs" | "sm" | null | undefined;
+    size?: "default" | "sm" | "xs" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Item({ className, variant, size, render, ...props }: useRender.ComponentProps<"div"> & VariantProps<typeof itemVariants>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 declare const itemMediaVariants: (props?: ({

package/dist/ui/marker.d.ts

@@ -4,7 +4,7 @@ import { useRender } from '@base-ui/react/use-render';
 import { VariantProps } from 'class-variance-authority';
 
 declare const markerVariants: (props?: ({
-    variant?: "separator" | "default" | "border" | null | undefined;
+    variant?: "default" | "separator" | "border" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Marker({ className, variant, render, ...props }: useRender.ComponentProps<"div"> & VariantProps<typeof markerVariants>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 declare function MarkerIcon({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orbital-ds",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Sistema de diseño genérico: estructura común + temas con personalidad (qratia, zyro) + ~60 componentes sobre Base UI y Tailwind v4, con contrato verificable y legible por agentes.",
   "keywords": [
     "design-system",
@@ -31,6 +31,8 @@
   "exports": {
     "./styles.css": "./dist/styles.css",
     "./themes/*.css": "./dist/themes/*.css",
+    "./themes/*.md": "./dist/themes/*.md",
+    "./themes/*.meta.json": "./dist/themes/*.meta.json",
     "./ui/*": {
       "types": "./dist/ui/*.d.ts",
       "import": "./dist/ui/*.js"