beez-ui 0.5.1 → 0.5.2

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Cambios
 
+## 0.5.2 - 2026-09-09
+
+- 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.

package/README.md

@@ -19,6 +19,10 @@ Agrupar los imports de componentes desde la raíz. El paquete publica JavaScript
 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
 

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

@@ -6,25 +6,55 @@ declare function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof D
 /** 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

@@ -98,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) 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-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 {
@@ -146,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;
@@ -168,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 {
@@ -193,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;
@@ -217,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 {
@@ -278,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;
@@ -299,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 {
@@ -335,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;
@@ -353,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 {
@@ -471,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;
@@ -492,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 {
@@ -524,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;
@@ -539,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;

package/dist/components/select.js

@@ -87,6 +87,11 @@ function SelectValue(t0) {
 	}
 	return t1;
 }
+/**
+* Renders compact default and small selection controls.
+* @param props - Primitive properties and optional consumer overrides.
+* @returns The styled primitive with its original interaction contract.
+*/
 function SelectTrigger(t0) {
 	const $ = _c(13);
 	let children;
@@ -109,7 +114,7 @@ function SelectTrigger(t0) {
 	const size = t1 === undefined ? "default" : t1;
 	let t2;
 	if ($[5] !== className) {
-		t2 = cn("flex w-fit items-center justify-between gap-1.5 rounded-md border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className);
+		t2 = cn("flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className);
 		$[5] = className;
 		$[6] = t2;
 	} else {
@@ -144,6 +149,11 @@ function SelectTrigger(t0) {
 	}
 	return t4;
 }
+/**
+* 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.
+*/
 function SelectContent(t0) {
 	const $ = _c(24);
 	let children;
@@ -172,7 +182,7 @@ function SelectContent(t0) {
 	const t4 = position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1";
 	let t5;
 	if ($[6] !== className || $[7] !== t4) {
-		t5 = cn("z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none 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-foreground/10! **:data-[variant=destructive]:text-accent-foreground! **:data-[variant=destructive]:**:text-accent-foreground!", t4, className);
+		t5 = cn("z-50 max-h-(--radix-select-content-available-height) min-w-48 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none 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-foreground/10! **:data-[variant=destructive]:text-accent-foreground! **:data-[variant=destructive]:**:text-accent-foreground!", t4, className);
 		$[6] = className;
 		$[7] = t4;
 		$[8] = t5;
@@ -243,6 +253,11 @@ function SelectContent(t0) {
 	}
 	return t11;
 }
+/**
+* Renders compact option group labels.
+* @param props - Primitive properties and optional consumer overrides.
+* @returns The styled primitive with its original interaction contract.
+*/
 function SelectLabel(t0) {
 	const $ = _c(8);
 	let className;
@@ -258,7 +273,7 @@ function SelectLabel(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = cn("px-2 py-1.5 text-xs text-muted-foreground", className);
+		t1 = cn("px-1.5 py-1 text-xs text-muted-foreground", className);
 		$[3] = className;
 		$[4] = t1;
 	} else {
@@ -279,6 +294,11 @@ function SelectLabel(t0) {
 	}
 	return t2;
 }
+/**
+* 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.
+*/
 function SelectItem(t0) {
 	const $ = _c(13);
 	let children;
@@ -297,7 +317,7 @@ function SelectItem(t0) {
 	}
 	let t1;
 	if ($[4] !== className) {
-		t1 = cn("relative flex w-full 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 not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className);
+		t1 = cn("relative flex w-full 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 not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className);
 		$[4] = className;
 		$[5] = t1;
 	} else {