orbital-ds 0.1.1 → 0.3.0

package/dist/themes/zyro.scoped.css

@@ -0,0 +1,343 @@
+/*
+ * TEMA zyro — «liquid glass» (traducido de faro-orbital-zyro-ui).
+ *
+ * Personalidad: lavanda claro / azul muy oscuro, acento azul profundo (claro) y
+ * cian (oscuro). El cristal vive en la capa de NAVEGACIÓN y CONTROLES (sidebar,
+ * campos, menús); el CONTENIDO (tarjetas) se mantiene casi opaco, como indican
+ * las guías de cristal. Sidebar a ras de borde, sin silueta flotante. Acción
+ * primaria = píldora con degradado de marca y brillo.
+ *
+ * Estructura del fichero:
+ *   1. Variables claras (:root) y oscuras (.dark) — el CONTRATO del tema.
+ *   2. Capa de PERSONALIDAD — reglas sobre los ganchos del DOM (`data-slot`,
+ *      `data-variant`…) escritas solo con variables. Va SIN capa para ganar a las
+ *      utilidades de los componentes, así que define también los estados
+ *      (hover, active). Es lo que da forma propia a los elementos.
+ *
+ * Variables `--zy-*`: privadas de este tema (no son contrato).
+ * Importar DESPUÉS de la estructura. Fuentes: `zyro.fonts.css`, lo primero del CSS.
+ */
+
+/* ── 1. VARIABLES · PIEL CLARA ───────────────────────────────────────────── */
+:root[data-theme='zyro'] {
+  --radius: 18px;
+
+  /* Tipografía: Montserrat (titulares) + Roboto (cuerpo) */
+  --ds-font-sans: 'Roboto', system-ui, -apple-system, sans-serif;
+  --ds-font-display: 'Montserrat', system-ui, -apple-system, sans-serif;
+  --ds-font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
+  --ds-heading-tracking: -0.01em;
+
+  /* Color */
+  --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.58);
+  --sidebar-foreground: rgba(14, 22, 48, 0.78);
+  --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.35);
+  --sidebar-ring: #0349fe;
+
+  --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;
+
+  /* Formas: la esquina crece con el tamaño del contenedor (7·10·14·18·22) */
+  --ds-radius-sm: 7px;
+  --ds-radius-md: 10px;
+  --ds-radius-lg: 14px;
+  --ds-radius-xl: 18px;
+  --ds-radius-2xl: 22px;
+  --ds-radius-control: 10px;
+  --ds-radius-overlay: 22px;
+
+  /* Sombras de cristal: capa tenue + brillo interior en el borde superior */
+  --ds-shadow-card: 0 2px 14px rgba(28, 48, 100, 0.07);
+  --ds-shadow-card-hover: 0 6px 26px rgba(28, 48, 100, 0.1);
+  --ds-shadow-raised: 0 4px 30px rgba(28, 48, 100, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.85);
+  --ds-shadow-overlay: 0 14px 52px rgba(28, 48, 100, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95);
+  --ds-shadow-popover: 0 14px 52px rgba(28, 48, 100, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95);
+
+  /* Medidas: controles algo más altos y holgados */
+  --ds-control-h-sm: 2.25rem;
+  --ds-control-h-md: 2.5rem;
+  --ds-control-h-lg: 2.75rem;
+  --ds-button-px-sm: 1rem;
+  --ds-button-px-md: 1.25rem;
+  --ds-button-px-lg: 1.5rem;
+  --ds-field-px: 1rem;
+
+  /* Materiales: cristal en navegación y controles; tarjetas sin desenfoque */
+  --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(55% 45% at 78% 6%, rgba(54, 179, 237, 0.3), transparent 70%),
+    radial-gradient(50% 45% at 96% 58%, rgba(3, 73, 254, 0.16), transparent 70%),
+    radial-gradient(55% 50% at 40% 106%, rgba(151, 71, 255, 0.14), transparent 70%);
+
+  /* Sidebar a ras de borde: sin separación, sin silueta; filo de 1px */
+  --ds-sidebar-pad: 0px;
+  --ds-sidebar-radius: 0px;
+  --ds-sidebar-shadow: 0 0 #0000;
+  --ds-sidebar-ring: 0px;
+  --ds-sidebar-edge: 1px solid var(--zy-glass-bs);
+  --ds-sidebar-item-radius: var(--ds-radius-lg);
+
+  /* Privadas de zyro */
+  --zy-accent-g: linear-gradient(135deg, #0349fe, #36b3ed);
+  --zy-accent-glow: rgba(3, 73, 254, 0.24);
+  --zy-glass-bt: rgba(255, 255, 255, 0.95);
+  --zy-glass-bs: rgba(168, 190, 235, 0.4);
+  --zy-card-bt: rgba(255, 255, 255, 1);
+  --zy-card-bs: rgba(168, 190, 235, 0.46);
+  --zy-field-bg: rgba(255, 255, 255, 0.72);
+  --zy-field-b: rgba(168, 190, 235, 0.55);
+  --zy-field-bt: rgba(255, 255, 255, 1);
+  --zy-pill: rgba(255, 255, 255, 0.55);
+  --zy-pill-on: rgba(255, 255, 255, 0.98);
+  --zy-conv-h: rgba(20, 40, 90, 0.04);
+  --zy-conv-a: rgba(3, 73, 254, 0.07);
+  --zy-conv-ab: rgba(3, 73, 254, 0.24);
+  --zy-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
+}
+
+/* ── 1b. VARIABLES · PIEL OSCURA ─────────────────────────────────────────── */
+:root[data-theme='zyro'].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.72);
+  --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-shadow-card: 0 2px 14px rgba(0, 0, 0, 0.3);
+  --ds-shadow-card-hover: 0 6px 26px rgba(0, 0, 0, 0.38);
+  --ds-shadow-raised: 0 8px 40px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  --ds-shadow-overlay: 0 22px 64px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.13);
+  --ds-shadow-popover: 0 22px 64px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.13);
+
+  --ds-sidebar-backdrop: blur(24px) saturate(180%);
+  --ds-overlay-backdrop: blur(24px) saturate(180%);
+  --ds-page-backdrop:
+    radial-gradient(55% 45% at 78% 6%, rgba(54, 179, 237, 0.26), transparent 70%),
+    radial-gradient(50% 45% at 96% 58%, rgba(3, 73, 254, 0.24), transparent 70%),
+    radial-gradient(55% 50% at 40% 106%, rgba(151, 71, 255, 0.2), transparent 70%);
+
+  --zy-accent-g: linear-gradient(135deg, #36b3ed, #0349fe);
+  --zy-accent-glow: rgba(54, 179, 237, 0.42);
+  --zy-glass-bt: rgba(255, 255, 255, 0.3);
+  --zy-glass-bs: rgba(255, 255, 255, 0.07);
+  --zy-card-bt: rgba(255, 255, 255, 0.11);
+  --zy-card-bs: rgba(255, 255, 255, 0.06);
+  --zy-field-bg: rgba(255, 255, 255, 0.06);
+  --zy-field-b: rgba(255, 255, 255, 0.12);
+  --zy-field-bt: rgba(255, 255, 255, 0.26);
+  --zy-pill: rgba(255, 255, 255, 0.05);
+  --zy-pill-on: rgba(255, 255, 255, 0.12);
+  --zy-conv-h: rgba(255, 255, 255, 0.05);
+  --zy-conv-a: rgba(54, 179, 237, 0.14);
+  --zy-conv-ab: rgba(54, 179, 237, 0.4);
+}
+
+/* ── 2. PERSONALIDAD ─────────────────────────────────────────────────────────
+ * Sin capa: gana a las utilidades de los componentes. Solo variables.
+ */
+:root[data-theme='zyro'] {
+  /* Botones: píldora. Acción primaria con degradado de marca y brillo. */
+  [data-slot='button'] {
+    border-radius: 9999px;
+    transition: all var(--ds-motion-base) var(--zy-ease);
+  }
+  [data-slot='button'][data-size^='icon'] {
+    border-radius: var(--ds-radius-xl);
+  }
+  [data-slot='button']:active:not(:disabled) {
+    transform: scale(0.98);
+  }
+  [data-slot='button'][data-variant='default'] {
+    background-color: transparent;
+    background-image: var(--zy-accent-g);
+    color: #ffffff;
+    border-color: transparent;
+    box-shadow: 0 4px 16px var(--zy-accent-glow);
+  }
+  [data-slot='button'][data-variant='default']:hover:not(:disabled) {
+    filter: brightness(1.1);
+    box-shadow: 0 6px 22px var(--zy-accent-glow);
+  }
+  [data-slot='button'][data-variant='destructive'] {
+    box-shadow: 0 4px 16px rgba(235, 25, 25, 0.3);
+  }
+  [data-slot='button'][data-variant='outline'],
+  [data-slot='button'][data-variant='secondary'] {
+    border: 1px solid var(--zy-field-b);
+    background: color-mix(in oklch, var(--foreground) 5%, var(--background));
+    color: var(--muted-foreground);
+  }
+  [data-slot='button'][data-variant='outline']:hover:not(:disabled),
+  [data-slot='button'][data-variant='secondary']:hover:not(:disabled) {
+    background: color-mix(in oklch, var(--foreground) 11%, var(--background));
+    color: var(--foreground);
+  }
+  [data-slot='button'][data-variant='ghost']:hover:not(:disabled) {
+    background: var(--zy-conv-h);
+    color: var(--foreground);
+  }
+
+  /* Tarjetas: contenido casi opaco con filo superior luminoso */
+  [data-slot='card'] {
+    border: 1px solid var(--zy-card-bs);
+    border-top-color: var(--zy-card-bt);
+  }
+
+  /* Campos: cristal claro con filo superior */
+  [data-slot='input'],
+  [data-slot='textarea'],
+  [data-slot='select-trigger'] {
+    background-color: var(--zy-field-bg);
+    border-color: var(--zy-field-b);
+    border-top-color: var(--zy-field-bt);
+  }
+
+  /* Capas flotantes: filo de cristal */
+  [data-slot='dialog-content'],
+  [data-slot='popover-content'],
+  [data-slot='dropdown-menu-content'],
+  [data-slot='select-content'] {
+    border: 1px solid var(--zy-glass-bs);
+    border-top-color: var(--zy-glass-bt);
+  }
+
+  /* Etiquetas en píldora */
+  [data-slot='badge'] {
+    border-radius: 9999px;
+  }
+
+  /* Pestañas: píldora de cristal con la activa elevada */
+  [data-slot='tabs-list'] {
+    background: var(--zy-pill);
+    border: 1px solid var(--zy-card-bs);
+    border-radius: 9999px;
+  }
+  [data-slot='tabs-trigger'] {
+    border-radius: 9999px;
+  }
+  [data-slot='tabs-trigger'][data-active] {
+    background: var(--zy-pill-on);
+    box-shadow: 0 1px 6px rgba(28, 48, 100, 0.12);
+  }
+
+  /* Interruptor y progreso: degradado de marca */
+  [data-slot='switch'][data-checked] {
+    background-image: var(--zy-accent-g);
+    background-color: transparent;
+  }
+  [data-slot='progress-indicator'] {
+    background-image: var(--zy-accent-g);
+    background-color: transparent;
+  }
+
+  /* Sidebar: destino activo con tinte y filo, como la conversación activa de zyro */
+  [data-sidebar='menu-button'][data-active='true'] {
+    background: var(--zy-conv-a);
+    box-shadow: inset 0 0 0 1px var(--zy-conv-ab);
+    color: var(--sidebar-accent-foreground);
+  }
+  [data-sidebar='menu-button']:hover:not([data-active='true']) {
+    background: var(--zy-conv-h);
+  }
+}

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 };