orbital-ds 0.1.0 → 0.2.0

package/contract.json

@@ -0,0 +1,38 @@
+{
+  "version": 1,
+  "descripcion": "Contrato de tema de orbital-ds: todo tema (themes/*.css) debe definir estos tokens en :root. Nombres en inglés estándar; los de shadcn sin prefijo.",
+  "root": [
+    "radius",
+    "background", "foreground",
+    "card", "card-foreground",
+    "popover", "popover-foreground",
+    "primary", "primary-foreground",
+    "secondary", "secondary-foreground",
+    "muted", "muted-foreground",
+    "accent", "accent-foreground",
+    "destructive", "destructive-foreground",
+    "border", "input", "ring",
+    "chart-1", "chart-2", "chart-3", "chart-4", "chart-5",
+    "sidebar", "sidebar-foreground",
+    "sidebar-primary", "sidebar-primary-foreground",
+    "sidebar-accent", "sidebar-accent-foreground",
+    "sidebar-border", "sidebar-ring",
+    "danger", "danger-soft",
+    "warning", "warning-soft",
+    "success", "success-soft",
+    "info", "info-soft",
+    "neutral", "neutral-soft",
+    "link", "link-hover",
+    "inset", "inset-foreground",
+    "brand", "brand-bright"
+  ],
+  "fonts": ["font-sans"],
+  "dark": {
+    "descripcion": "Recomendados en .dark (si faltan, el tema hereda el valor claro y doctor avisa).",
+    "avisar_si_falta": [
+      "background", "foreground", "card", "card-foreground", "popover", "popover-foreground",
+      "primary", "primary-foreground", "muted", "muted-foreground", "border", "input", "ring",
+      "danger", "warning", "success", "info", "link"
+    ]
+  }
+}

package/dist/styles.css

@@ -60,9 +60,9 @@
    * ALTURA DE CONTROLES — una escala para botón, campo y select, así alineados
    * en una misma fila. Densidad distinta = cambiar estos tres valores.
    */
-  --control-h-sm: 2rem;
-  --control-h-md: 2.25rem;
-  --control-h-lg: 2.5rem;
+  --ds-control-h-sm: 2rem;
+  --ds-control-h-md: 2.25rem;
+  --ds-control-h-lg: 2.5rem;
 
   /*
    * SOMBRAS SEMÁNTICAS — un hueco por tipo de pieza. `control` vale `none` hoy:
@@ -80,20 +80,58 @@
    * número. raised: pieza que sobresale de su fila · sticky: barras fijas ·
    * overlay: menús, diálogos, paneles y tooltips.
    */
-  --z-raised: 10;
-  --z-sticky: 20;
-  --z-overlay: 50;
+  --ds-z-raised: 10;
+  --ds-z-sticky: 20;
+  --ds-z-overlay: 50;
 
   /* MOVIMIENTO — dos duraciones; `reduced-motion` ya se respeta en la capa base. */
-  --motion-fast: 100ms;
-  --motion-base: 200ms;
+  --ds-motion-fast: 100ms;
+  --ds-motion-base: 200ms;
+  --ds-motion-slow: 300ms;
+  --ds-motion-blink: 1s;
 
   /* FOCO — grosor del anillo de foco/error de todos los controles. */
-  --ring-width: 3px;
+  --ds-ring-width: 3px;
 
   /* Velo tras diálogos y paneles. Un tema puede cambiar su tinte u opacidad. */
   --color-scrim: oklch(0 0 0 / 0.8);
 
+  /*
+   * ESPACIADO INTERNO — un hueco por tipo de pieza. Los valores por defecto son
+   * los de siempre; un tema que quiera más aire (o más densidad) los cambia aquí,
+   * sin tocar ningún componente.
+   *   card  tarjeta (md / sm) · field  campos y selects · cell  celdas de tabla
+   *   overlay  diálogos y paneles · popover · menu / menu-item  menús
+   *   button  botones por tamaño · badge  etiquetas
+   */
+  --ds-card-spacing: 1.5rem;
+  --ds-card-spacing-sm: 1rem;
+  --ds-field-px: 0.75rem;
+  --ds-cell-p: 0.75rem;
+  --ds-overlay-p: 1.5rem;
+  --ds-overlay-gap: 1.5rem;
+  --ds-popover-p: 1rem;
+  --ds-menu-p: 0.25rem;
+  --ds-menu-item-px: 0.75rem;
+  --ds-menu-item-py: 0.5rem;
+  --ds-button-px-sm: 0.75rem;
+  --ds-button-px-md: 1rem;
+  --ds-button-px-lg: 1rem;
+  --ds-badge-px: 0.625rem;
+
+  /*
+   * MATERIALES — cómo es la superficie, más allá del color. Cada valor es un
+   * `backdrop-filter` completo (p. ej. `blur(28px) saturate(180%)`). Por defecto
+   * `none`: sin efecto y sin coste. Un tema de cristal (zyro) les da valores.
+   * El fondo de la página (`page-backdrop`) es un `background-image`: degradado,
+   * imagen o `none`.
+   */
+  --ds-card-backdrop: none;
+  --ds-overlay-backdrop: none;
+  --ds-field-backdrop: none;
+  --ds-sidebar-backdrop: none;
+  --ds-page-backdrop: none;
+
   /*
    * Dos sombras y no más: reposo y realce al señalar. Una tarjeta que no se
    * puede pulsar no necesita la segunda.
@@ -114,18 +152,18 @@
   --color-foreground: var(--foreground);
   --color-card: var(--card);
   --color-card-foreground: var(--card-foreground);
-  --
inset: var(
inset);
-  --
inset-foreground: var(
inset-foreground);
+  --color-inset: var(--inset);
+  --color-inset-foreground: var(--inset-foreground);
   --color-popover: var(--popover);
   --color-popover-foreground: var(--popover-foreground);
   --color-primary: var(--primary);
   --color-primary-foreground: var(--primary-foreground);
-  /* Texto acentuado: SIEMPRE `
link`, nunca el cian de marca — no alcanza
+  /* Texto acentuado: SIEMPRE `text-link`, nunca el cian de marca — no alcanza
    * contraste de texto sobre las superficies claras. */
-  --
link: var(
link);
-  --
link-hover: var(
link-hover);
-  --
brand: var(
brand);
-  --
brand-bright: var(
brand-bright);
+  --color-link: var(--link);
+  --color-link-hover: var(--link-hover);
+  --color-brand: var(--brand);
+  --color-brand-bright: var(--brand-bright);
   --color-secondary: var(--secondary);
   --color-secondary-foreground: var(--secondary-foreground);
   --color-muted: var(--muted);
@@ -186,7 +224,7 @@
   }
 
   a {
-    @apply 
link hover:
link-hover;
+    @apply text-link hover:text-link-hover;
   }
 
   /*
@@ -207,7 +245,7 @@
   }
 
   ::selection {
-    background: color-mix(in oklch, var(
brand) 25%, transparent);
+    background: color-mix(in oklch, var(--brand) 25%, transparent);
   }
 
   /*
@@ -345,3 +383,45 @@
     }
   }
 }
+
+
+/*
+ * Aplicación de los MATERIALES. Va en la capa base para que cualquier utilidad
+ * explícita la gane, y por `data-slot` para que lo hereden todos los
+ * componentes del paquete sin que ninguno escriba un efecto propio.
+ */
+@layer base {
+  body {
+    background-image: var(--ds-page-backdrop);
+    background-attachment: fixed;
+    background-size: cover;
+  }
+
+  [data-slot='card'] {
+    -webkit-backdrop-filter: var(--ds-card-backdrop);
+    backdrop-filter: var(--ds-card-backdrop);
+  }
+
+  [data-slot='popover-content'],
+  [data-slot='dropdown-menu-content'],
+  [data-slot='dropdown-menu-sub-content'],
+  [data-slot='select-content'],
+  [data-slot='dialog-content'],
+  [data-slot='sheet-content'],
+  [data-slot='tooltip-content'] {
+    -webkit-backdrop-filter: var(--ds-overlay-backdrop);
+    backdrop-filter: var(--ds-overlay-backdrop);
+  }
+
+  [data-slot='input'],
+  [data-slot='textarea'],
+  [data-slot='select-trigger'] {
+    -webkit-backdrop-filter: var(--ds-field-backdrop);
+    backdrop-filter: var(--ds-field-backdrop);
+  }
+
+  [data-slot='sidebar-inner'] {
+    -webkit-backdrop-filter: var(--ds-sidebar-backdrop);
+    backdrop-filter: var(--ds-sidebar-backdrop);
+  }
+}

package/dist/themes/qratia.css

@@ -33,8 +33,8 @@
    * paso más oscuro que `card` y uno más claro que `background` — el contenido
    * anidado se distingue sin una línea nueva.
    */
-	
inset: oklch(0.98 0.007 248); /* centro: --row #F5F9FD */
-	
inset-foreground: oklch(0.186 0.048 269);
+	--inset: oklch(0.98 0.007 248); /* centro: --row #F5F9FD */
+	--inset-foreground: oklch(0.186 0.048 269);
 
 	/* Con la tarjeta en blanco puro —el techo— el panel flotante ya no puede
    * elevarse más: se distingue hundiéndose un paso, no subiendo. */
@@ -68,12 +68,12 @@
    * marca (#00B4D8, L 0.711) NO alcanza 4.5:1 sobre blanco por mucho que se vea
    * bien. Usar `--accent` en texto es el error que este par de tokens evita.
    */
-	
link: oklch(0.534 0.107 231); /* centro: --link #00779F */
-	
link-hover: oklch(0.441 0.088 230); /* centro: --link-hover #005B7A */
+	--link: oklch(0.534 0.107 231); /* centro: --link #00779F */
+	--link-hover: oklch(0.441 0.088 230); /* centro: --link-hover #005B7A */
 
 	/* Cian pleno de marca. Superficies, trazos y focos — NUNCA texto sobre claro. */
-	
brand: oklch(0.711 0.129 219); /* centro: --accent #00B4D8 */
-	
brand-bright: oklch(
+	--brand: oklch(0.711 0.129 219); /* centro: --accent #00B4D8 */
+	--brand-bright: oklch(
 		0.844 0.146 209
 	); /* centro: --accent-bright #00E5FF */
 
@@ -137,7 +137,7 @@
    * un sólido inventado pesa de más y deja de leerse como tinte. */
 	--sidebar-accent: color-mix(
 		in oklch,
-		var(
brand-bright) 12%,
+		var(--brand-bright) 12%,
 		var(--sidebar)
 	);
 	--sidebar-accent-foreground: oklch(
@@ -164,8 +164,8 @@
 
 	/* Mismo tono, paso propio de la superficie oscura: un escalón MÁS OSCURO que
    * `card`, porque aquí elevar es aclarar y el incrustado va hundido. */
-	
inset: oklch(0.205 0.05 268);
-	
inset-foreground: oklch(0.952 0.013 252);
+	--inset: oklch(0.205 0.05 268);
+	--inset-foreground: oklch(0.952 0.013 252);
 
 	--popover: oklch(0.262 0.052 267);
 	--popover-foreground: oklch(0.952 0.013 252);
@@ -188,11 +188,11 @@
 	--accent-foreground: oklch(0.89 0.092 213);
 
 	/* Sobre fondo oscuro el cian SÍ se lee: aquí enlace y acento convergen. */
-	
link: oklch(0.89 0.092 213); /* centro: --link #66EDFF */
-	
link-hover: oklch(0.93 0.07 210); /* centro: --link-hover #9BF3FF */
+	--link: oklch(0.89 0.092 213); /* centro: --link #66EDFF */
+	--link-hover: oklch(0.93 0.07 210); /* centro: --link-hover #9BF3FF */
 
-	
brand: oklch(0.844 0.146 209);
-	
brand-bright: oklch(0.844 0.146 209);
+	--brand: oklch(0.844 0.146 209);
+	--brand-bright: oklch(0.844 0.146 209);
 
 	/* Sobre un rojo claro, el texto legible es el oscuro (medido: el claro daba 2.77:1). */
 	--destructive: oklch(0.711 0.166 22); /* centro: --risk #F87171 */

package/dist/themes/zyro.css

@@ -0,0 +1,189 @@
+/*
+ * TEMA zyro — «liquid glass» (traducido de faro-orbital-zyro-ui/global.css).
+ *
+ * Identidad: lienzo lavanda claro / azul muy oscuro, acento azul profundo
+ * (claro) y cian (oscuro), cristal traslúcido con desenfoque y saturación, y
+ * un fondo vivo. Cumple el MISMO contrato de tema que `qratia` (ver
+ * `contract.json`): todo lo que cambia respecto a qratia es aspecto, no API.
+ *
+ * Importar DESPUÉS de la estructura (`orbital-ds/styles.css`), para que este
+ * tema pueda sobrescribir también la escala de radios y las sombras:
+ *
+ *   @import 'orbital-ds/styles.css';
+ *   @import 'orbital-ds/themes/zyro.css';
+ *
+ * Valores derivados (no vienen tal cual de zyro-ui): danger, danger-soft,
+ * neutral(-soft), link-hover, brand-bright y inset, que zyro no define con
+ * esos nombres; y el texto sobre el primario en oscuro, que se oscurece para
+ * alcanzar contraste AA.
+ *
+ * Tipografía: Montserrat (titulares) + Roboto (cuerpo). Cárgalas en la app
+ * (<link> a Google Fonts o self-host).
+ */
+
+@theme inline {
+  /* Tipografía */
+  --font-sans: 'Roboto', system-ui, -apple-system, sans-serif;
+  --font-display: 'Montserrat', system-ui, -apple-system, sans-serif;
+  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
+
+  /* Escala de radios Zyro: el radio crece con el tamaño del contenedor. */
+  --radius-sm: 7px;
+  --radius-md: 10px;
+  --radius-lg: 14px;
+  --radius-xl: 18px;
+  --radius-2xl: 22px;
+  --radius-control: 10px;
+  --radius-overlay: 22px;
+
+  /* Sombras de cristal: capa tensa + difusa y brillo interior en el borde. */
+  --shadow-card: 0 2px 14px rgba(28, 48, 100, 0.07);
+  --shadow-card-hover:
+    0 4px 30px rgba(28, 48, 100, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.85);
+  --shadow-raised:
+    0 4px 30px rgba(28, 48, 100, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.85);
+  --shadow-overlay:
+    0 14px 52px rgba(28, 48, 100, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95);
+  --shadow-popover:
+    0 14px 52px rgba(28, 48, 100, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95);
+}
+
+/* ── PIEL CLARA ─────────────────────────────────────────────────────────── */
+:root {
+  --radius: 18px;
+
+  --background: #eaeefb;
+  --foreground: rgba(14, 22, 48, 0.92);
+
+  --card: rgba(255, 255, 255, 0.98);
+  --card-foreground: rgba(14, 22, 48, 0.92);
+  --popover: #ffffff;
+  --popover-foreground: rgba(14, 22, 48, 0.92);
+
+  --primary: #0349fe;
+  --primary-foreground: #ffffff;
+  --secondary: rgba(243, 246, 253, 0.9);
+  --secondary-foreground: rgba(14, 22, 48, 0.92);
+  --muted: rgba(243, 246, 253, 0.9);
+  --muted-foreground: rgba(14, 22, 48, 0.66);
+  --accent: rgba(3, 73, 254, 0.09);
+  --accent-foreground: #0349fe;
+  --destructive: #eb1919;
+  --destructive-foreground: #ffffff;
+
+  --border: rgba(168, 190, 235, 0.3);
+  --input: rgba(168, 190, 235, 0.55);
+  --ring: #0349fe;
+
+  --chart-1: #0349fe;
+  --chart-2: #14bd44;
+  --chart-3: #ffb300;
+  --chart-4: #eb1919;
+  --chart-5: #9747ff;
+
+  --sidebar: rgba(255, 255, 255, 0.4);
+  --sidebar-foreground: rgba(14, 22, 48, 0.66);
+  --sidebar-primary: #0349fe;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: rgba(3, 73, 254, 0.09);
+  --sidebar-accent-foreground: #0349fe;
+  --sidebar-border: rgba(168, 190, 235, 0.3);
+  --sidebar-ring: #0349fe;
+
+  /* Estados (variante oscura para texto sobre claro) */
+  --danger: #c21414;
+  --danger-soft: rgba(235, 25, 25, 0.1);
+  --warning: #9a6e00;
+  --warning-soft: rgba(255, 179, 0, 0.16);
+  --success: #0e8f34;
+  --success-soft: rgba(20, 189, 68, 0.12);
+  --info: #136ba8;
+  --info-soft: rgba(42, 147, 213, 0.12);
+  --neutral: rgba(14, 22, 48, 0.6);
+  --neutral-soft: rgba(14, 22, 48, 0.06);
+
+  --link: #0349fe;
+  --link-hover: #0236c0;
+  --inset: rgba(243, 246, 253, 0.9);
+  --inset-foreground: rgba(14, 22, 48, 0.92);
+  --brand: #0349fe;
+  --brand-bright: #36b3ed;
+
+  /* Materiales: cristal. El fondo vivo (malla WebGL en zyro-ui) se aproxima
+     aquí con degradados; el componente de malla es opcional. */
+  --ds-sidebar-backdrop: blur(28px) saturate(180%);
+  --ds-overlay-backdrop: blur(28px) saturate(180%);
+  --ds-field-backdrop: blur(12px) saturate(160%);
+  --ds-card-backdrop: none;
+  --ds-page-backdrop:
+    radial-gradient(60% 50% at 12% 8%, rgba(54, 179, 237, 0.4), transparent 70%),
+    radial-gradient(55% 45% at 88% 18%, rgba(3, 73, 254, 0.24), transparent 70%),
+    radial-gradient(50% 55% at 55% 100%, rgba(151, 71, 255, 0.2), transparent 70%);
+}
+
+/* ── PIEL OSCURA ────────────────────────────────────────────────────────── */
+.dark {
+  --background: #0e3148;
+  --foreground: rgba(255, 255, 255, 0.94);
+
+  --card: rgba(16, 24, 54, 0.94);
+  --card-foreground: rgba(255, 255, 255, 0.94);
+  --popover: rgba(22, 32, 68, 0.97);
+  --popover-foreground: rgba(255, 255, 255, 0.94);
+
+  --primary: #36b3ed;
+  --primary-foreground: #04121c;
+  --secondary: rgba(255, 255, 255, 0.05);
+  --secondary-foreground: rgba(255, 255, 255, 0.94);
+  --muted: rgba(255, 255, 255, 0.05);
+  --muted-foreground: rgba(255, 255, 255, 0.68);
+  --accent: rgba(54, 179, 237, 0.16);
+  --accent-foreground: #36b3ed;
+  --destructive: #eb1919;
+  --destructive-foreground: #ffffff;
+
+  --border: rgba(255, 255, 255, 0.07);
+  --input: rgba(255, 255, 255, 0.12);
+  --ring: #36b3ed;
+
+  --chart-1: #36b3ed;
+  --chart-2: #14bd44;
+  --chart-3: #ffb300;
+  --chart-4: #eb1919;
+  --chart-5: #9747ff;
+
+  --sidebar: rgba(255, 255, 255, 0.04);
+  --sidebar-foreground: rgba(255, 255, 255, 0.68);
+  --sidebar-primary: #36b3ed;
+  --sidebar-primary-foreground: #04121c;
+  --sidebar-accent: rgba(54, 179, 237, 0.16);
+  --sidebar-accent-foreground: #36b3ed;
+  --sidebar-border: rgba(255, 255, 255, 0.07);
+  --sidebar-ring: #36b3ed;
+
+  --danger: #ff6b6b;
+  --danger-soft: rgba(235, 25, 25, 0.2);
+  --warning: #ffb300;
+  --warning-soft: rgba(255, 179, 0, 0.18);
+  --success: #14bd44;
+  --success-soft: rgba(20, 189, 68, 0.18);
+  --info: #2a93d5;
+  --info-soft: rgba(42, 147, 213, 0.2);
+  --neutral: rgba(255, 255, 255, 0.6);
+  --neutral-soft: rgba(255, 255, 255, 0.08);
+
+  --link: #36b3ed;
+  --link-hover: #7fd0f5;
+  --inset: rgba(255, 255, 255, 0.05);
+  --inset-foreground: rgba(255, 255, 255, 0.94);
+  --brand: #36b3ed;
+  --brand-bright: #7fd0f5;
+
+  --ds-sidebar-backdrop: blur(24px) saturate(180%);
+  --ds-overlay-backdrop: blur(24px) saturate(180%);
+  --ds-field-backdrop: blur(12px) saturate(160%);
+  --ds-page-backdrop:
+    radial-gradient(60% 50% at 12% 8%, rgba(54, 179, 237, 0.3), transparent 70%),
+    radial-gradient(55% 45% at 88% 18%, rgba(3, 73, 254, 0.28), transparent 70%),
+    radial-gradient(50% 55% at 55% 100%, rgba(151, 71, 255, 0.22), transparent 70%);
+}

package/dist/ui/accordion.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { Accordion as Accordion$1 } from '@base-ui/react/accordion';
+
+declare function Accordion({ className, ...props }: Accordion$1.Root.Props): React.JSX.Element;
+declare function AccordionItem({ className, ...props }: Accordion$1.Item.Props): React.JSX.Element;
+declare function AccordionTrigger({ className, children, ...props }: Accordion$1.Trigger.Props): React.JSX.Element;
+declare function AccordionContent({ className, children, ...props }: Accordion$1.Panel.Props): React.JSX.Element;
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/dist/ui/accordion.js

@@ -0,0 +1,79 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
+import { cn } from "../lib/utils";
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+function Accordion({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    AccordionPrimitive.Root,
+    {
+      "data-slot": "accordion",
+      className: cn(
+        "flex w-full flex-col overflow-hidden rounded-2xl border",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AccordionItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    AccordionPrimitive.Item,
+    {
+      "data-slot": "accordion-item",
+      className: cn("not-last:border-b data-open:bg-muted/50", className),
+      ...props
+    }
+  );
+}
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
+    AccordionPrimitive.Trigger,
+    {
+      "data-slot": "accordion-trigger",
+      className: cn(
+        "group/accordion-trigger relative flex flex-1 items-start justify-between gap-6 border border-transparent p-4 text-left text-sm font-medium transition-all outline-none hover:underline aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(ChevronDownIcon, { "data-slot": "accordion-trigger-icon", className: "pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" }),
+        /* @__PURE__ */ jsx(ChevronUpIcon, { "data-slot": "accordion-trigger-icon", className: "pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" })
+      ]
+    }
+  ) });
+}
+function AccordionContent({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AccordionPrimitive.Panel,
+    {
+      "data-slot": "accordion-content",
+      className: "overflow-hidden px-4 text-sm data-open:animate-accordion-down data-closed:animate-accordion-up",
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "h-(--accordion-panel-height) pt-0 pb-4 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+            className
+          ),
+          children
+        }
+      )
+    }
+  );
+}
+export {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger
+};

package/dist/ui/alert-dialog.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { AlertDialog as AlertDialog$1 } from '@base-ui/react/alert-dialog';
+import { Button } from './button.js';
+import 'class-variance-authority/types';
+import '@base-ui/react/use-render';
+import 'class-variance-authority';
+
+declare function AlertDialog({ ...props }: AlertDialog$1.Root.Props): React.JSX.Element;
+declare function AlertDialogTrigger({ ...props }: AlertDialog$1.Trigger.Props): React.JSX.Element;
+declare function AlertDialogPortal({ ...props }: AlertDialog$1.Portal.Props): React.JSX.Element;
+declare function AlertDialogOverlay({ className, ...props }: AlertDialog$1.Backdrop.Props): React.JSX.Element;
+declare function AlertDialogContent({ className, size, ...props }: AlertDialog$1.Popup.Props & {
+    size?: "default" | "sm";
+}): React.JSX.Element;
+declare function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AlertDialogMedia({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialog$1.Title>): React.JSX.Element;
+declare function AlertDialogDescription({ className, ...props }: React.ComponentProps<typeof AlertDialog$1.Description>): React.JSX.Element;
+declare function AlertDialogAction({ className, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
+declare function AlertDialogCancel({ className, variant, size, ...props }: AlertDialog$1.Close.Props & Pick<React.ComponentProps<typeof Button>, "variant" | "size">): React.JSX.Element;
+
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger };