orbital-ds 0.1.1 → 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.
@@ -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/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 };

package/dist/ui/alert-dialog.js

@@ -0,0 +1,173 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
+import { cn } from "../lib/utils";
+import { Button } from "./button";
+function AlertDialog({ ...props }) {
+  return /* @__PURE__ */ jsx(AlertDialogPrimitive.Root, { "data-slot": "alert-dialog", ...props });
+}
+function AlertDialogTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx(AlertDialogPrimitive.Trigger, { "data-slot": "alert-dialog-trigger", ...props });
+}
+function AlertDialogPortal({ ...props }) {
+  return /* @__PURE__ */ jsx(AlertDialogPrimitive.Portal, { "data-slot": "alert-dialog-portal", ...props });
+}
+function AlertDialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AlertDialogPrimitive.Backdrop,
+    {
+      "data-slot": "alert-dialog-overlay",
+      className: cn(
+        "fixed inset-0 isolate z-(--ds-z-overlay) bg-scrim duration-(--ds-motion-fast) supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AlertDialogContent({
+  className,
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
+    /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
+    /* @__PURE__ */ jsx(
+      AlertDialogPrimitive.Popup,
+      {
+        "data-slot": "alert-dialog-content",
+        "data-size": size,
+        className: cn(
+          "group/alert-dialog-content fixed top-1/2 left-1/2 z-(--ds-z-overlay) grid w-full -translate-x-1/2 -translate-y-1/2 gap-6 rounded-control bg-popover p-6 text-popover-foreground ring-1 ring-foreground/5 duration-(--ds-motion-fast) outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-md data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        ),
+        ...props
+      }
+    )
+  ] });
+}
+function AlertDialogHeader({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "alert-dialog-header",
+      className: cn(
+        "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AlertDialogFooter({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "alert-dialog-footer",
+      className: cn(
+        "flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AlertDialogMedia({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "alert-dialog-media",
+      className: cn(
+        "mb-2 inline-flex size-16 items-center justify-center rounded-full bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AlertDialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AlertDialogPrimitive.Title,
+    {
+      "data-slot": "alert-dialog-title",
+      className: cn(
+        "text-lg font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AlertDialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AlertDialogPrimitive.Description,
+    {
+      "data-slot": "alert-dialog-description",
+      className: cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AlertDialogAction({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      "data-slot": "alert-dialog-action",
+      className: cn(className),
+      ...props
+    }
+  );
+}
+function AlertDialogCancel({
+  className,
+  variant = "outline",
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AlertDialogPrimitive.Close,
+    {
+      "data-slot": "alert-dialog-cancel",
+      className: cn(className),
+      render: /* @__PURE__ */ jsx(Button, { variant, size }),
+      ...props
+    }
+  );
+}
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger
+};

package/dist/ui/alert.d.ts

@@ -0,0 +1,13 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+declare const alertVariants: (props?: ({
+    variant?: "default" | "destructive" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Alert({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>): React.JSX.Element;
+declare function AlertTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AlertDescription({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AlertAction({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+
+export { Alert, AlertAction, AlertDescription, AlertTitle };