beez-ui 0.5.0 → 0.5.2

package/CHANGELOG.md

@@ -1,9 +1,17 @@
 # Cambios
 
-## 0.5.0 - 2026-09-08
+## 0.5.2 - 2026-09-09
 
-- Actualiza el paquete a la versión 0.5.0.
+- Actualiza el paquete a la versión 0.5.2.
 
+## 0.5.1 - 2026-09-08
+
+- Actualiza el paquete a la versión 0.5.1.
+
+## 0.5.0 - 2026-09-08
+
+- Actualiza el paquete a la versión 0.5.0.
+
 ## 0.4.2 - 2026-09-08
 
 - Actualiza el paquete a la versión 0.4.2.

package/README.md

@@ -16,7 +16,13 @@ Agrupar los imports de componentes desde la raíz. El paquete publica JavaScript
 
 `beez-ui/styles.css` es CSS listo para el navegador: incluye reset, utilidades, tema claro/oscuro, radios y fuentes locales Geist, Poppins e IBM Plex Mono. No requiere Tailwind, plugins PostCSS ni declaraciones `@source` en el consumidor. Las clases se compilan en el build de la biblioteca y se publican en `dist/styles.css`; `styles.source.css` es la entrada de desarrollo y no se distribuye.
 
-Los consumidores pueden sobrescribir tokens mediante CSS normal. Poppins se reserva para títulos grandes mediante `--font-display`; las licencias se incluyen en `assets/fonts`. Si la aplicación usa Tailwind para sus propios estilos puede mantenerlo, pero ya no necesita escanear beez-ui.
+Los consumidores pueden sobrescribir tokens mediante CSS normal. Poppins se reserva para títulos grandes mediante `--font-display`; las licencias se incluyen en `assets/fonts`. Si la aplicación usa Tailwind para sus propios estilos puede mantenerlo, pero ya no necesita escanear beez-ui.
+
+`DropdownMenuContent` toma el ancho natural de sus opciones, con un mínimo de 12 rem y un máximo limitado por el espacio disponible. No hereda el ancho del botón disparador: los menús abiertos desde un icono deben mantener sus etiquetas legibles. Para un ancho específico, usar `className` y ajustar también el mínimo cuando se necesite un menú más pequeño.
+
+Los componentes usan por defecto los espaciados compactos de Agenda: `Select` mide 2 rem (1.75 rem en tamaño pequeño), `TabsList` horizontal mide 2 rem y `PopoverContent` usa 0.625 rem de padding. Los menús y submenús tienen un mínimo de 12 rem, con filas compactas. `Dialog` y `AlertDialog` usan 1 rem de padding y un footer con borde superior y fondo diferenciado; `Textarea` distingue el estado deshabilitado mediante su fondo. Estos valores conservan los colores y fuentes del tema compartido. Son cambios de los defaults, sin una prop adicional para activarlos; los consumidores pueden personalizarlos mediante `className`.
+
+Los `Sheet` superiores e inferiores limitan su altura al viewport dinámico (`100dvh`) y permiten desplazar el contenido para mantener accesibles las acciones de paneles largos.
 
 ## Providers de UI
 
@@ -122,11 +128,12 @@ El comando ejecuta el flujo completo:
 1. Actualiza `package.json` y agrega la entrada del changelog con fecha UTC, conservando el historial.
 2. Prepara la release: instalación congelada, tests sin React Compiler, build optimizado de JavaScript, tipos y CSS, lint, typechecks, tests unitarios y pruebas de navegador.
 3. Genera el tarball en `releases/<version>-<sha256>/beez-ui-<version>.tgz` y valida su contenido, exports e integridad.
-4. Publica ese mismo artefacto en npm con acceso público y etiqueta `latest`.
+4. Crea un commit con el contenido validado de `package.json` y `CHANGELOG.md`, conservando otros archivos staged, y pushea ese commit a la rama upstream configurada.
+5. Publica ese mismo artefacto en npm con acceso público y etiqueta `latest`.
 
 La publicación usa el cliente oficial de npm para admitir su flujo interactivo de verificación en el navegador/2FA. Instalación, build y checks siguen usando pnpm 12. Ejecutar desde una terminal interactiva cuando la cuenta requiera autenticación adicional. El token se carga sólo al publicar, no se imprime y se referencia mediante `${NPM_TOKEN}` en `.npmrc`.
 
-El comando no crea commits ni tags ni modifica ramas Git. Si falla una validación, no publica. Los metadatos de la nueva versión quedan disponibles: corregir el error, ejecutar `pnpm release:prepare` y publicar el artefacto resultante. Si falla la publicación, comprobar primero si npm recibió la versión y reintentar sólo la publicación del mismo tarball. No ejecutar nuevamente `create-version` para reintentar la misma release.
+El comando requiere una rama Git con upstream configurado. El commit se limita a los dos archivos de metadatos, incluidos sus cambios previos; revisar el código antes de ejecutar la release. No crea tags ni hace force push. Si cambian el checkout, el upstream o los metadatos durante las validaciones, se detiene. También comprueba que los hooks de Git no hayan agregado archivos ni alterado los metadatos validados antes de pushear. Si falla una validación, el commit o el push, no publica. Los metadatos de la nueva versión quedan disponibles: corregir el error, ejecutar `pnpm release:prepare`, commitear y pushear los metadatos y publicar el artefacto resultante. Si falla el push después del commit, resolver el problema y pushear ese commit antes de publicar el tarball preparado. Si falla la publicación, comprobar primero si npm recibió la versión y reintentar sólo la publicación del mismo tarball. No ejecutar nuevamente `create-version` para reintentar la misma release.
 
 Los pasos individuales siguen disponibles:
 

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

@@ -5,12 +5,37 @@ declare function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDial
 declare function AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>): React.JSX.Element;
 declare function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>): React.JSX.Element;
 declare function AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>): React.JSX.Element;
+/**
+ * Renders a compact confirmation while preserving the shared theme and viewport bound.
+ * @param props - Primitive properties and optional consumer overrides.
+ * @returns The styled primitive with its original interaction contract.
+ */
 declare function AlertDialogContent({ className, size, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
     size?: "default" | "sm";
 }): React.JSX.Element;
+/**
+ * Aligns confirmation headings and media with compact spacing.
+ * @param props - Primitive properties and optional consumer overrides.
+ * @returns The styled primitive with its original interaction contract.
+ */
 declare function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+/**
+ * Separates confirmation actions with an edge-to-edge muted footer.
+ * @param props - Primitive properties and optional consumer overrides.
+ * @returns The styled primitive with its original interaction contract.
+ */
 declare function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+/**
+ * Renders confirmation media at the compact default size.
+ * @param props - Primitive properties and optional consumer overrides.
+ * @returns The styled primitive with its original interaction contract.
+ */
 declare function AlertDialogMedia({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+/**
+ * Renders confirmation headings using the shared font and compact text size.
+ * @param props - Primitive properties and optional consumer overrides.
+ * @returns The styled primitive with its original interaction contract.
+ */
 declare function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>): React.JSX.Element;
 declare function AlertDialogDescription({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Description>): React.JSX.Element;
 declare function AlertDialogAction({ className, variant, size, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Action> & Pick<React.ComponentProps<typeof Button>, "variant" | "size">): React.JSX.Element;

package/dist/components/alert-dialog.js

@@ -110,6 +110,11 @@ function AlertDialogOverlay(t0) {
 	}
 	return t2;
 }
+/**
+* Renders a compact confirmation while preserving the shared theme and viewport bound.
+* @param props - Primitive properties and optional consumer overrides.
+* @returns The styled primitive with its original interaction contract.
+*/
 function AlertDialogContent(t0) {
 	const $ = _c(11);
 	let className;
@@ -136,7 +141,7 @@ function AlertDialogContent(t0) {
 	}
 	let t3;
 	if ($[5] !== className) {
-		t3 = cn("group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid max-h-[calc(100svh-2rem)] overflow-y-auto overscroll-contain w-full -translate-x-1/2 -translate-y-1/2 gap-6 rounded-xl bg-popover p-6 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg 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);
+		t3 = cn("group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid max-h-[calc(100svh-2rem)] overflow-y-auto overscroll-contain w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm 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);
 		$[5] = className;
 		$[6] = t3;
 	} else {
@@ -159,6 +164,11 @@ function AlertDialogContent(t0) {
 	}
 	return t4;
 }
+/**
+* Aligns confirmation headings and media with compact spacing.
+* @param props - Primitive properties and optional consumer overrides.
+* @returns The styled primitive with its original interaction contract.
+*/
 function AlertDialogHeader(t0) {
 	const $ = _c(8);
 	let className;
@@ -174,7 +184,7 @@ function AlertDialogHeader(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = 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);
+		t1 = 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-4 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);
 		$[3] = className;
 		$[4] = t1;
 	} else {
@@ -195,6 +205,11 @@ function AlertDialogHeader(t0) {
 	}
 	return t2;
 }
+/**
+* Separates confirmation actions with an edge-to-edge muted footer.
+* @param props - Primitive properties and optional consumer overrides.
+* @returns The styled primitive with its original interaction contract.
+*/
 function AlertDialogFooter(t0) {
 	const $ = _c(8);
 	let className;
@@ -210,7 +225,7 @@ function AlertDialogFooter(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = 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);
+		t1 = cn("-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 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);
 		$[3] = className;
 		$[4] = t1;
 	} else {
@@ -231,6 +246,11 @@ function AlertDialogFooter(t0) {
 	}
 	return t2;
 }
+/**
+* Renders confirmation media at the compact default size.
+* @param props - Primitive properties and optional consumer overrides.
+* @returns The styled primitive with its original interaction contract.
+*/
 function AlertDialogMedia(t0) {
 	const $ = _c(8);
 	let className;
@@ -246,7 +266,7 @@ function AlertDialogMedia(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = cn("mb-2 inline-flex size-16 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8", className);
+		t1 = cn("mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6", className);
 		$[3] = className;
 		$[4] = t1;
 	} else {
@@ -267,6 +287,11 @@ function AlertDialogMedia(t0) {
 	}
 	return t2;
 }
+/**
+* Renders confirmation headings using the shared font and compact text size.
+* @param props - Primitive properties and optional consumer overrides.
+* @returns The styled primitive with its original interaction contract.
+*/
 function AlertDialogTitle(t0) {
 	const $ = _c(8);
 	let className;
@@ -282,7 +307,7 @@ function AlertDialogTitle(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = cn("font-heading 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);
+		t1 = cn("font-heading text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2", className);
 		$[3] = className;
 		$[4] = t1;
 	} else {

package/dist/components/dialog.d.ts

@@ -5,13 +5,28 @@ declare function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogP
 declare function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): React.JSX.Element;
 declare function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): React.JSX.Element;
 declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): React.JSX.Element;
+/**
+ * Renders compact dialog content with viewport-safe scrolling.
+ * @param props - Primitive properties and optional consumer overrides.
+ * @returns The styled primitive with its original interaction contract.
+ */
 declare function DialogContent({ className, children, showCloseButton, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {
     showCloseButton?: boolean;
 }): React.JSX.Element;
 declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+/**
+ * Separates dialog actions with a bordered footer matching the content padding.
+ * @param props - Primitive properties and optional consumer overrides.
+ * @returns The styled primitive with its original interaction contract.
+ */
 declare function DialogFooter({ className, showCloseButton, children, ...props }: React.ComponentProps<"div"> & {
     showCloseButton?: boolean;
 }): React.JSX.Element;
+/**
+ * Renders dialog headings with the shared font at the compact default size.
+ * @param props - Primitive properties and optional consumer overrides.
+ * @returns The styled primitive with its original interaction contract.
+ */
 declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): React.JSX.Element;
 declare function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): React.JSX.Element;
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };

package/dist/components/dialog.js

@@ -134,6 +134,11 @@ function DialogOverlay(t0) {
 	}
 	return t2;
 }
+/**
+* Renders compact dialog content with viewport-safe scrolling.
+* @param props - Primitive properties and optional consumer overrides.
+* @returns The styled primitive with its original interaction contract.
+*/
 function DialogContent(t0) {
 	const $ = _c(15);
 	let children;
@@ -163,7 +168,7 @@ function DialogContent(t0) {
 	}
 	let t3;
 	if ($[6] !== className) {
-		t3 = cn("fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] max-h-[calc(100svh-2rem)] -translate-x-1/2 -translate-y-1/2 gap-6 overflow-y-auto rounded-xl bg-popover p-6 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none 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);
+		t3 = cn("fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] max-h-[calc(100svh-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 overflow-y-auto rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm 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);
 		$[6] = className;
 		$[7] = t3;
 	} else {
@@ -176,7 +181,7 @@ function DialogContent(t0) {
 			asChild: true,
 			children: /* @__PURE__ */ _jsxs(Button, {
 				variant: "ghost",
-				className: "absolute top-4 right-4",
+				className: "absolute top-2 right-2",
 				size: "icon-sm",
 				children: [/* @__PURE__ */ _jsx(XIcon, {}), /* @__PURE__ */ _jsx("span", {
 					className: "sr-only",
@@ -243,6 +248,11 @@ function DialogHeader(t0) {
 	}
 	return t2;
 }
+/**
+* Separates dialog actions with a bordered footer matching the content padding.
+* @param props - Primitive properties and optional consumer overrides.
+* @returns The styled primitive with its original interaction contract.
+*/
 function DialogFooter(t0) {
 	const $ = _c(14);
 	let children;
@@ -265,7 +275,7 @@ function DialogFooter(t0) {
 	const showCloseButton = t1 === undefined ? false : t1;
 	let t2;
 	if ($[5] !== className) {
-		t2 = cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className);
+		t2 = cn("-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end", className);
 		$[5] = className;
 		$[6] = t2;
 	} else {
@@ -303,6 +313,11 @@ function DialogFooter(t0) {
 	}
 	return t4;
 }
+/**
+* Renders dialog headings with the shared font at the compact default size.
+* @param props - Primitive properties and optional consumer overrides.
+* @returns The styled primitive with its original interaction contract.
+*/
 function DialogTitle(t0) {
 	const $ = _c(8);
 	let className;
@@ -318,7 +333,7 @@ function DialogTitle(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = cn("font-heading leading-none font-medium", className);
+		t1 = cn("font-heading text-base leading-none font-medium", className);
 		$[3] = className;
 		$[4] = t1;
 	} else {

package/dist/components/dropdown-menu.d.ts

@@ -3,27 +3,58 @@ import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
 declare function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>): React.JSX.Element;
 declare function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>): React.JSX.Element;
 declare function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): React.JSX.Element;
+/** Sizes action menus by their content instead of narrowing them to an icon trigger. */
 declare function DropdownMenuContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>): React.JSX.Element;
 declare function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>): React.JSX.Element;
+/**
+ * Renders an action with compact spacing and preserved disabled/destructive states.
+ * @param props - Primitive properties and optional consumer overrides.
+ * @returns The styled primitive with its original interaction contract.
+ */
 declare function DropdownMenuItem({ className, inset, variant, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
     inset?: boolean;
     variant?: "default" | "destructive";
 }): React.JSX.Element;
+/**
+ * Renders a compact selectable checkbox action.
+ * @param props - Primitive properties and optional consumer overrides.
+ * @returns The styled primitive with its original interaction contract.
+ */
 declare function DropdownMenuCheckboxItem({ className, children, checked, inset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {
     inset?: boolean;
 }): React.JSX.Element;
 declare function DropdownMenuRadioGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>): React.JSX.Element;
+/**
+ * Renders a compact mutually exclusive action.
+ * @param props - Primitive properties and optional consumer overrides.
+ * @returns The styled primitive with its original interaction contract.
+ */
 declare function DropdownMenuRadioItem({ className, children, inset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {
     inset?: boolean;
 }): React.JSX.Element;
+/**
+ * Renders a compact menu group label.
+ * @param props - Primitive properties and optional consumer overrides.
+ * @returns The styled primitive with its original interaction contract.
+ */
 declare function DropdownMenuLabel({ className, inset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
     inset?: boolean;
 }): React.JSX.Element;
 declare function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>): React.JSX.Element;
 declare function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
 declare function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>): React.JSX.Element;
+/**
+ * Renders a compact trigger for a nested menu.
+ * @param props - Primitive properties and optional consumer overrides.
+ * @returns The styled primitive with its original interaction contract.
+ */
 declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
     inset?: boolean;
 }): React.JSX.Element;
+/**
+ * Preserves readable submenu width with the shared translucent theme.
+ * @param props - Primitive properties and optional consumer overrides.
+ * @returns The styled primitive with its original interaction contract.
+ */
 declare function DropdownMenuSubContent({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>): React.JSX.Element;
 export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };

package/dist/components/dropdown-menu.js

@@ -74,6 +74,7 @@ function DropdownMenuTrigger(t0) {
 	}
 	return t1;
 }
+/** Sizes action menus by their content instead of narrowing them to an icon trigger. */
 function DropdownMenuContent(t0) {
 	const $ = _c(12);
 	let className;
@@ -97,7 +98,7 @@ function DropdownMenuContent(t0) {
 	const sideOffset = t2 === undefined ? 4 : t2;
 	let t3;
 	if ($[5] !== className) {
-		t3 = cn("z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden 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 animate-none! relative bg-popover/70 before:pointer-events-none before:absolute before:inset-0 before:-z-1 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150 **:data-[slot$=-item]:focus:bg-foreground/10 **:data-[slot$=-item]:data-highlighted:bg-foreground/10 **:data-[slot$=-separator]:bg-foreground/5 **:data-[slot$=-trigger]:focus:bg-foreground/10 **:data-[slot$=-trigger]:aria-expanded:bg-foreground/10! **:data-[variant=destructive]:focus:bg-destructive/10!", className);
+		t3 = cn("z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-48 max-w-(--radix-dropdown-menu-content-available-width) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden 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 animate-none! relative bg-popover/70 before:pointer-events-none before:absolute before:inset-0 before:-z-1 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150 **:data-[slot$=-item]:focus:bg-foreground/10 **:data-[slot$=-item]:data-highlighted:bg-foreground/10 **:data-[slot$=-separator]:bg-foreground/5 **:data-[slot$=-trigger]:focus:bg-foreground/10 **:data-[slot$=-trigger]:aria-expanded:bg-foreground/10! **:data-[variant=destructive]:focus:bg-destructive/10!", className);
 		$[5] = className;
 		$[6] = t3;
 	} else {
@@ -145,6 +146,11 @@ function DropdownMenuGroup(t0) {
 	}
 	return t1;
 }
+/**
+* Renders an action with compact spacing and preserved disabled/destructive states.
+* @param props - Primitive properties and optional consumer overrides.
+* @returns The styled primitive with its original interaction contract.
+*/
 function DropdownMenuItem(t0) {
 	const $ = _c(12);
 	let className;
@@ -167,7 +173,7 @@ function DropdownMenuItem(t0) {
 	const variant = t1 === undefined ? "default" : t1;
 	let t2;
 	if ($[5] !== className) {
-		t2 = cn("group/dropdown-menu-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive", className);
+		t2 = cn("group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive", className);
 		$[5] = className;
 		$[6] = t2;
 	} else {
@@ -192,6 +198,11 @@ function DropdownMenuItem(t0) {
 	}
 	return t3;
 }
+/**
+* Renders a compact selectable checkbox action.
+* @param props - Primitive properties and optional consumer overrides.
+* @returns The styled primitive with its original interaction contract.
+*/
 function DropdownMenuCheckboxItem(t0) {
 	const $ = _c(15);
 	let checked;
@@ -216,7 +227,7 @@ function DropdownMenuCheckboxItem(t0) {
 	}
 	let t1;
 	if ($[6] !== className) {
-		t1 = cn("relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className);
+		t1 = cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className);
 		$[6] = className;
 		$[7] = t1;
 	} else {
@@ -277,6 +288,11 @@ function DropdownMenuRadioGroup(t0) {
 	}
 	return t1;
 }
+/**
+* Renders a compact mutually exclusive action.
+* @param props - Primitive properties and optional consumer overrides.
+* @returns The styled primitive with its original interaction contract.
+*/
 function DropdownMenuRadioItem(t0) {
 	const $ = _c(13);
 	let children;
@@ -298,7 +314,7 @@ function DropdownMenuRadioItem(t0) {
 	}
 	let t1;
 	if ($[5] !== className) {
-		t1 = cn("relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className);
+		t1 = cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className);
 		$[5] = className;
 		$[6] = t1;
 	} else {
@@ -334,6 +350,11 @@ function DropdownMenuRadioItem(t0) {
 	}
 	return t3;
 }
+/**
+* Renders a compact menu group label.
+* @param props - Primitive properties and optional consumer overrides.
+* @returns The styled primitive with its original interaction contract.
+*/
 function DropdownMenuLabel(t0) {
 	const $ = _c(10);
 	let className;
@@ -352,7 +373,7 @@ function DropdownMenuLabel(t0) {
 	}
 	let t1;
 	if ($[4] !== className) {
-		t1 = cn("px-2 py-1.5 text-xs font-medium text-muted-foreground data-inset:pl-8", className);
+		t1 = cn("px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7", className);
 		$[4] = className;
 		$[5] = t1;
 	} else {
@@ -470,6 +491,11 @@ function DropdownMenuSub(t0) {
 	}
 	return t1;
 }
+/**
+* Renders a compact trigger for a nested menu.
+* @param props - Primitive properties and optional consumer overrides.
+* @returns The styled primitive with its original interaction contract.
+*/
 function DropdownMenuSubTrigger(t0) {
 	const $ = _c(13);
 	let children;
@@ -491,7 +517,7 @@ function DropdownMenuSubTrigger(t0) {
 	}
 	let t1;
 	if ($[5] !== className) {
-		t1 = cn("flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-8 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className);
+		t1 = cn("flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className);
 		$[5] = className;
 		$[6] = t1;
 	} else {
@@ -523,6 +549,11 @@ function DropdownMenuSubTrigger(t0) {
 	}
 	return t3;
 }
+/**
+* Preserves readable submenu width with the shared translucent theme.
+* @param props - Primitive properties and optional consumer overrides.
+* @returns The styled primitive with its original interaction contract.
+*/
 function DropdownMenuSubContent(t0) {
 	const $ = _c(8);
 	let className;
@@ -538,7 +569,7 @@ function DropdownMenuSubContent(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = cn("z-50 min-w-[96px] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 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 animate-none! relative bg-popover/70 before:pointer-events-none before:absolute before:inset-0 before:-z-1 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150 **:data-[slot$=-item]:focus:bg-foreground/10 **:data-[slot$=-item]:data-highlighted:bg-foreground/10 **:data-[slot$=-separator]:bg-foreground/5 **:data-[slot$=-trigger]:focus:bg-foreground/10 **:data-[slot$=-trigger]:aria-expanded:bg-foreground/10! **:data-[variant=destructive]:focus:bg-destructive/10!", className);
+		t1 = cn("z-50 min-w-48 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-lg p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 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 animate-none! relative bg-popover/70 before:pointer-events-none before:absolute before:inset-0 before:-z-1 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150 **:data-[slot$=-item]:focus:bg-foreground/10 **:data-[slot$=-item]:data-highlighted:bg-foreground/10 **:data-[slot$=-separator]:bg-foreground/5 **:data-[slot$=-trigger]:focus:bg-foreground/10 **:data-[slot$=-trigger]:aria-expanded:bg-foreground/10! **:data-[variant=destructive]:focus:bg-destructive/10!", className);
 		$[3] = className;
 		$[4] = t1;
 	} else {

package/dist/components/popover.d.ts

@@ -2,8 +2,18 @@ import * as React from "react";
 import { Popover as PopoverPrimitive } from "radix-ui";
 declare function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>): React.JSX.Element;
 declare function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>): React.JSX.Element;
+/**
+ * Renders floating details with compact padding and spacing.
+ * @param props - Primitive properties and optional consumer overrides.
+ * @returns The styled primitive with its original interaction contract.
+ */
 declare function PopoverContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>): React.JSX.Element;
 declare function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>): React.JSX.Element;
+/**
+ * Groups popover headings with compact spacing.
+ * @param props - Primitive properties and optional consumer overrides.
+ * @returns The styled primitive with its original interaction contract.
+ */
 declare function PopoverHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">): React.JSX.Element;
 declare function PopoverDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;

package/dist/components/popover.js

@@ -50,6 +50,11 @@ function PopoverTrigger(t0) {
 	}
 	return t1;
 }
+/**
+* Renders floating details with compact padding and spacing.
+* @param props - Primitive properties and optional consumer overrides.
+* @returns The styled primitive with its original interaction contract.
+*/
 function PopoverContent(t0) {
 	const $ = _c(12);
 	let className;
@@ -73,7 +78,7 @@ function PopoverContent(t0) {
 	const sideOffset = t2 === undefined ? 4 : t2;
 	let t3;
 	if ($[5] !== className) {
-		t3 = cn("z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-4 rounded-md bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 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);
+		t3 = cn("z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 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);
 		$[5] = className;
 		$[6] = t3;
 	} else {
@@ -121,6 +126,11 @@ function PopoverAnchor(t0) {
 	}
 	return t1;
 }
+/**
+* Groups popover headings with compact spacing.
+* @param props - Primitive properties and optional consumer overrides.
+* @returns The styled primitive with its original interaction contract.
+*/
 function PopoverHeader(t0) {
 	const $ = _c(8);
 	let className;
@@ -136,7 +146,7 @@ function PopoverHeader(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = cn("flex flex-col gap-1 text-sm", className);
+		t1 = cn("flex flex-col gap-0.5 text-sm", className);
 		$[3] = className;
 		$[4] = t1;
 	} else {

package/dist/components/select.d.ts

@@ -3,11 +3,31 @@ import { Select as SelectPrimitive } from "radix-ui";
 declare function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>): React.JSX.Element;
 declare function SelectGroup({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Group>): React.JSX.Element;
 declare function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>): React.JSX.Element;
+/**
+ * Renders compact default and small selection controls.
+ * @param props - Primitive properties and optional consumer overrides.
+ * @returns The styled primitive with its original interaction contract.
+ */
 declare function SelectTrigger({ className, size, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
     size?: "sm" | "default";
 }): React.JSX.Element;
+/**
+ * Keeps selection options readable with a twelve-rem minimum width.
+ * @param props - Primitive properties and optional consumer overrides.
+ * @returns The styled primitive with its original interaction contract.
+ */
 declare function SelectContent({ className, children, position, align, ...props }: React.ComponentProps<typeof SelectPrimitive.Content>): React.JSX.Element;
+/**
+ * Renders compact option group labels.
+ * @param props - Primitive properties and optional consumer overrides.
+ * @returns The styled primitive with its original interaction contract.
+ */
 declare function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>): React.JSX.Element;
+/**
+ * Renders compact options while retaining selection and disabled semantics.
+ * @param props - Primitive properties and optional consumer overrides.
+ * @returns The styled primitive with its original interaction contract.
+ */
 declare function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>): React.JSX.Element;
 declare function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>): React.JSX.Element;
 declare function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>): React.JSX.Element;