beez-ui 0.9.1 → 0.10.0

package/CHANGELOG.md

@@ -4,6 +4,16 @@ Todos los cambios relevantes de beez-ui se documentan en este archivo con el for
 
 ## [Unreleased]
 
+## [0.10.0] - 2026-10-03
+
+- 6769ea7 agrega funcionalidad de persistencia y animación al sidebar
+- 3a84ef1 agrega actualización de la dependencia «beez-rp» a la versión 0.6.1
+- 2723ab1 Bump beez-rp to 0.6.0 (#4)
+- 811829a update «beez-rp» dependency to version 0.5.0
+- ab5c997 build: bump beez-rp to 0.4.0
+- d267b0b add checks configuration to prevent redundant validation before version bump
+- 041a0f8 Migrate linting from ESLint to oxlint (#3)
+
 ## [0.9.1] - 2026-09-27
 
 ### Added

package/README.md

@@ -80,7 +80,7 @@ siguen los tokens de [beui motion](https://beui.dev/components/motion):
 - `Dialog` y `AlertDialog` suben con spring; `Sheet` entra desde su borde con spring
   y sale con la curva de cajón (0.24 s), sin demorar la siguiente interacción.
 - `GlideSlot` desliza el indicador activo entre ítems como un `layoutId` compartido:
-  la pestaña activa de `Tabs` (fondo o subrayado), el ítem activo de `SidebarMenu`, la
+  la pestaña activa de `Tabs` (fondo o subrayado), la
   página actual de `PaginationContent`, y al navegar con teclado el ítem resaltado de
   `DropdownMenu` y `Select` y la sugerencia activa de `FilterQueryBar`. Con el puntero,
   esos resaltados lo siguen al instante: el propio puntero ya marca la posición.
@@ -91,6 +91,10 @@ siguen los tokens de [beui motion](https://beui.dev/components/motion):
   (grupos y columnas) giran en lugar de cambiar de ícono; CSS define el ángulo final.
 - Las opciones del `Select` entran escalonadas con blur (las primeras 10; el resto
   solo se desvanece) y los checks de ítems de `Select` y `DropdownMenu` aparecen con pop.
+- `Sidebar` sigue a [beui animated sidebar](https://beui.dev/components/motion/animated-sidebar):
+  el ancho cambia con un spring entre el panel y el riel de íconos, las etiquetas se
+  desvanecen al colapsar, una píldora compartida sigue al ítem activo y al hovereado, los
+  submenús se despliegan escalonados y en pantallas chicas se abre como hoja con foco atrapado.
 - El ícono de `AnimatedThemeToggler` cambia con blur y escala; el botón de cierre de
   `Dialog` aparece con un pop demorado.
 - El contenido de `Tabs` entra con un desplazamiento de 4 px y `Alert` entra con blur.
@@ -158,7 +162,7 @@ Next y TanStack Router son peers opcionales aislados en sus entrypoints. El prov
 
 - Tema: `AnimatedThemeToggler` y `ThemedToaster` consumen el contexto compartido. Sus props explícitas de tema siguen disponibles para usos controlados.
 - Navegación: `PaginationNext`, `PaginationPrevious` y `PaginationLink` usan anclas nativas. El prop opcional `component` admite el adaptador del router que elija la app. Sin proveedor usa el elemento nativo; con el proveedor de Next usa su navegación cliente.
-- Sidebar: `defaultOpen` y el modo controlado conservan la semántica de LaTribu. `storageKey` activa opcionalmente persistencia local segura tras hidratar, sin cambiar la cookie pública `sidebar_state` ni sus siete días de duración.
+- Sidebar: en `SidebarProvider`, `defaultOpen` y el modo controlado conservan la semántica de LaTribu. Los ítems con `href` navegan con el adaptador de router del proveedor. `storageKey` activa opcionalmente persistencia local segura tras hidratar, sin cambiar la cookie pública `sidebar_state` ni sus siete días de duración.
 - Formularios y tablas: el consumidor provee sus datos, validaciones y callbacks. No se importan servicios, modelos de negocio ni endpoints de agenda-mensual.
 
 ## Componentes incorporados desde agenda-mensual
@@ -222,11 +226,11 @@ pnpm build
 pnpm release:prepare
 ```
 
-`pnpm build` genera las declaraciones con TypeScript 7, JavaScript con Oxc/React Compiler y CSS con el CLI de Tailwind. `pnpm check` ejecuta ESLint 10, los typechecks separados de código y tests con TypeScript 7, y Vitest 5. `tests/tsconfig.json` incorpora los matchers de Testing Library y los tipos de Vite sin incluirlos en el código de producción. `test:browser` verifica una app React/Vite nativa y una app Next real en Chromium y WebKit, tanto en desktop como en móvil. Los tests unitarios importan los archivos compilados. Los consumidores de navegador no instalan plugins de Tailwind, y una prueba adicional sirve el tarball por HTTP sin procesadores CSS para verificar estilos computados y carga de fuentes. Una prueba adicional instala el tarball en un consumidor aislado sin Next y verifica render, filtrado y declaraciones públicas.
+`pnpm build` genera las declaraciones con TypeScript 7, JavaScript con Oxc/React Compiler y CSS con el CLI de Tailwind. `pnpm check` ejecuta oxlint (configurado en `.oxlintrc.json`), los typechecks separados de código y tests con TypeScript 7, y Vitest 5. `tests/tsconfig.json` incorpora los matchers de Testing Library y los tipos de Vite sin incluirlos en el código de producción. `test:browser` verifica una app React/Vite nativa y una app Next real en Chromium y WebKit, tanto en desktop como en móvil. Los tests unitarios importan los archivos compilados. Los consumidores de navegador no instalan plugins de Tailwind, y una prueba adicional sirve el tarball por HTTP sin procesadores CSS para verificar estilos computados y carga de fuentes. Una prueba adicional instala el tarball en un consumidor aislado sin Next y verifica render, filtrado y declaraciones públicas.
 
 Los tests resuelven `beez-ui`, `beez-ui/next`, `beez-ui/tanstack` y `beez-ui/hooks` mediante rutas explícitas a las declaraciones compiladas en `tests/tsconfig.json`. Ejecutar `pnpm build` después de clonar o si falta `dist`; los comandos de validación completos ya lo hacen. Si el editor conserva diagnósticos anteriores después del build, reiniciar su servidor de TypeScript.
 
-El compilador `tsc` es TypeScript 7. Para `typescript-eslint`, se mantiene la [API de compatibilidad oficial de TypeScript 6](https://devblogs.microsoft.com/typescript/announcing-typescript-7-0/#running-side-by-side-with-typescript-6.0) mediante un alias; no reemplaza el compilador de los typechecks.
+El compilador `tsc` es TypeScript 7. El paquete `typescript` apunta a la [API de compatibilidad oficial de TypeScript 6](https://devblogs.microsoft.com/typescript/announcing-typescript-7-0/#running-side-by-side-with-typescript-6.0) mediante un alias, porque el plugin de docgen de Storybook lo declara como dependencia peer; no reemplaza el compilador de los typechecks. El lint no depende de él: oxlint analiza TypeScript sin el compilador.
 
 ## Crear y publicar una versión
 

package/dist/components/presence-swap.d.ts

@@ -1,5 +1,5 @@
 /** Cross-fades between states of the same region, such as idle, loading and result. */
-import type { ReactNode } from "react";
+import { type ReactNode } from "react";
 declare const PRESENCE_SWAP_ELEMENTS: {
     readonly div: import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>;
     readonly span: import("motion/react").ForwardRefComponent<HTMLSpanElement, import("motion/react").HTMLMotionProps<"span">>;

package/dist/components/presence-swap.js

@@ -1,5 +1,7 @@
 "use client";
 import { c as _c } from "react/compiler-runtime";
+/** Cross-fades between states of the same region, such as idle, loading and result. */
+import { useState } from "react";
 import { AnimatePresence, motion, useIsPresent } from "motion/react";
 import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
 import { cn } from "../lib/utils.js";
@@ -20,8 +22,12 @@ function PresenceSwapItem(t0) {
 	const { as, className, children } = t0;
 	const MotionElement = PRESENCE_SWAP_ELEMENTS[as];
 	const isPresent = useIsPresent();
+	const [isMountedExiting] = useState(!isPresent);
 	const shouldReduceMotion = usePrefersReducedMotion();
 	const distance = shouldReduceMotion ? 0 : MOTION_CONTENT_DISTANCE;
+	if (isMountedExiting) {
+		return null;
+	}
 	const t1 = isPresent ? undefined : true;
 	const t2 = !isPresent || undefined;
 	let t3;
@@ -98,6 +104,47 @@ function PresenceSwapItem(t0) {
 	return t8;
 }
 /**
+* Gives every key change its own presence key. Motion keeps the exit bookkeeping of a key that
+* already left, so a reused key (loading → error → loading) mounted already exiting would have
+* its removal ignored and stall a `wait` swap forever.
+* @param presenceKey - Key identifying the current state.
+* @returns A key that is never reused within this swap.
+*/
+function usePresenceSwapKey(presenceKey) {
+	const $ = _c(5);
+	let t0;
+	if ($[0] !== presenceKey) {
+		t0 = {
+			presenceKey,
+			generation: 0
+		};
+		$[0] = presenceKey;
+		$[1] = t0;
+	} else {
+		t0 = $[1];
+	}
+	const [current, setCurrent] = useState(t0);
+	if (current.presenceKey !== presenceKey) {
+		const t1 = current.generation + 1;
+		let t2;
+		if ($[2] !== presenceKey || $[3] !== t1) {
+			t2 = {
+				presenceKey,
+				generation: t1
+			};
+			$[2] = presenceKey;
+			$[3] = t1;
+			$[4] = t2;
+		} else {
+			t2 = $[4];
+		}
+		const next = t2;
+		setCurrent(next);
+		return `${next.generation}:${presenceKey}`;
+	}
+	return `${current.generation}:${presenceKey}`;
+}
+/**
 * Swaps keyed content with a short lift-and-fade; the first render is not animated.
 * @param props - Key identifying the current state and its content.
 * @returns The animated content.
@@ -107,6 +154,7 @@ export function PresenceSwap(t0) {
 	const { presenceKey, children, as: t1, className, mode: t2 } = t0;
 	const as = t1 === undefined ? "div" : t1;
 	const mode = t2 === undefined ? "wait" : t2;
+	const itemKey = usePresenceSwapKey(presenceKey);
 	const t3 = as === "span" && "inline-flex items-center";
 	let t4;
 	if ($[0] !== className || $[1] !== t3) {
@@ -118,15 +166,15 @@ export function PresenceSwap(t0) {
 		t4 = $[2];
 	}
 	let t5;
-	if ($[3] !== as || $[4] !== children || $[5] !== presenceKey || $[6] !== t4) {
+	if ($[3] !== as || $[4] !== children || $[5] !== itemKey || $[6] !== t4) {
 		t5 = /* @__PURE__ */ _jsx(PresenceSwapItem, {
 			as,
 			className: t4,
 			children
-		}, presenceKey);
+		}, itemKey);
 		$[3] = as;
 		$[4] = children;
-		$[5] = presenceKey;
+		$[5] = itemKey;
 		$[6] = t4;
 		$[7] = t5;
 	} else {

package/dist/components/sidebar.d.ts

@@ -1,71 +1,158 @@
+/**
+ * Animated application sidebar adapted from beui.dev/components/motion/animated-sidebar: the rail
+ * morphs its width with a spring, labels fade out of the icon rail, a shared pill follows the
+ * hovered and active items, submenus unfold with a stagger, and small screens get a focus-trapped
+ * sheet. Links route through the `BeezUIProvider` adapter and the open state keeps the
+ * `sidebar_state` cookie contract read by server entrypoints.
+ */
 import * as React from "react";
-import { type VariantProps } from "class-variance-authority";
-import { Button } from "./button.js";
-import { Input } from "./input.js";
-import { Separator } from "./separator.js";
-import { TooltipContent } from "./tooltip.js";
-type SidebarContextProps = {
-    state: "expanded" | "collapsed";
+import { type HTMLMotionProps } from "motion/react";
+type SidebarState = "expanded" | "collapsed";
+type SidebarSide = "left" | "right";
+type SidebarVariant = "sidebar" | "floating" | "inset";
+type SidebarCollapsible = "offcanvas" | "icon" | "none";
+type SidebarLinkTarget = "_blank" | "_self" | "_parent" | "_top";
+type SidebarContextValue = {
+    isMobile: boolean;
+    layoutId: string;
+    /** Sheet width; the sheet is portaled outside the wrapper that declares the CSS variables. */
+    mobileWidth: string;
     open: boolean;
-    setOpen: (open: boolean) => void;
     openMobile: boolean;
+    reduce: boolean;
+    setOpen: (open: boolean) => void;
     setOpenMobile: (open: boolean) => void;
-    isMobile: boolean;
+    state: SidebarState;
     toggleSidebar: () => void;
+    triggerRef: React.RefObject<HTMLButtonElement | null>;
+};
+/**
+ * Reads the sidebar state shared by `SidebarProvider`.
+ * @returns Open state for desktop and mobile, viewport and motion flags, and state setters.
+ */
+declare function useSidebar(): SidebarContextValue;
+type SidebarProviderStyle = React.CSSProperties & {
+    "--sidebar-width"?: string;
+    "--sidebar-width-icon"?: string;
+    "--sidebar-width-mobile"?: string;
 };
-declare function useSidebar(): SidebarContextProps;
-declare function SidebarProvider({ defaultOpen, storageKey, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }: React.ComponentProps<"div"> & {
+export type SidebarProviderProps = React.ComponentProps<"div"> & {
+    /** Controlled desktop state. */
+    open?: boolean;
+    /** Desktop state before any interaction; server entrypoints pass the `sidebar_state` cookie here. */
     defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Controlled state of the small-screen sheet. */
+    openMobile?: boolean;
+    defaultOpenMobile?: boolean;
+    onOpenMobileChange?: (open: boolean) => void;
     /** Opts into local persistence without changing the shared SSR cookie contract. */
     storageKey?: string;
-    open?: boolean;
-    onOpenChange?: (open: boolean) => void;
-}): React.JSX.Element;
-declare function Sidebar({ side, variant, collapsible, className, children, dir, ...props }: React.ComponentProps<"div"> & {
-    side?: "left" | "right";
-    variant?: "sidebar" | "floating" | "inset";
-    collapsible?: "offcanvas" | "icon" | "none";
-}): React.JSX.Element;
-declare function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
-declare function SidebarRail({ className, ...props }: React.ComponentProps<"button">): React.JSX.Element;
-declare function SidebarInset({ className, ...props }: React.ComponentProps<"main">): React.JSX.Element;
-declare function SidebarInput({ className, ...props }: React.ComponentProps<typeof Input>): React.JSX.Element;
+    style?: SidebarProviderStyle;
+};
+/**
+ * Owns the open state of the sidebar, the ⌘B / Ctrl+B shortcut and the layout wrapper.
+ * @param props - Controlled or default state for both viewports, persistence key and wrapper attributes.
+ * @returns The wrapper that lays out the sidebar next to its inset.
+ */
+declare function SidebarProvider({ children, open: openProp, defaultOpen, onOpenChange, openMobile: openMobileProp, defaultOpenMobile, onOpenMobileChange, storageKey, className, style, ...props }: SidebarProviderProps): React.JSX.Element;
+export type SidebarProps = Omit<HTMLMotionProps<"aside">, "children"> & {
+    children?: React.ReactNode;
+    side?: SidebarSide;
+    variant?: SidebarVariant;
+    /** `icon` shrinks to an icon rail, `offcanvas` slides away, `none` stays expanded on every viewport. */
+    collapsible?: SidebarCollapsible;
+    ariaLabel?: string;
+    /** Classes of the inner panel that paints the sidebar surface. */
+    panelClassName?: string;
+};
+/**
+ * Renders the sidebar: a width-morphing rail on desktop and a sheet on small screens.
+ * @param props - Side, variant, collapse mode, accessible name and panel classes.
+ * @returns The desktop rail, the mobile sheet portal, or an always-expanded panel.
+ */
+declare function Sidebar({ side, variant, collapsible, ariaLabel, children, className, panelClassName, style, ...props }: SidebarProps): React.JSX.Element;
+/**
+ * Button that toggles the desktop rail or the mobile sheet; shows a panel icon unless given children.
+ * @param props - Native button attributes.
+ * @returns The toggle button.
+ */
+declare function SidebarTrigger({ children, className, onClick, ref, type, ...props }: React.ComponentProps<"button">): React.JSX.Element;
+/**
+ * Button that closes the sidebar on the current viewport.
+ * @param props - Native button attributes; the content is the consumer's icon or text.
+ * @returns The close button.
+ */
+declare function SidebarClose({ className, onClick, type, ...props }: React.ComponentProps<"button">): React.JSX.Element;
+/**
+ * Thin hit area on the sidebar edge that toggles it with the pointer.
+ * @param props - Native button attributes.
+ * @returns The rail button, outside the tab order.
+ */
+declare function SidebarRail({ className, onClick, type, ...props }: React.ComponentProps<"button">): React.JSX.Element;
+/**
+ * Main content area laid out next to the sidebar.
+ * @param props - Motion-enabled `main` attributes.
+ * @returns The content landmark.
+ */
+declare function SidebarInset({ className, ...props }: HTMLMotionProps<"main">): React.JSX.Element;
 declare function SidebarHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-declare function SidebarFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-declare function SidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): React.JSX.Element;
 declare function SidebarContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function SidebarFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function SidebarGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-declare function SidebarGroupLabel({ className, asChild, ...props }: React.ComponentProps<"div"> & {
-    asChild?: boolean;
-}): React.JSX.Element;
-declare function SidebarGroupAction({ className, asChild, ...props }: React.ComponentProps<"button"> & {
-    asChild?: boolean;
-}): React.JSX.Element;
+/** Section heading that fades out of the icon rail and is hidden from assistive technology there. */
+declare function SidebarGroupLabel({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function SidebarGroupContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+/** Menu list whose items share a hover pill that glides between them. */
 declare function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
-declare function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
-declare const sidebarMenuButtonVariants: (props?: ({
-    variant?: "default" | "outline" | null | undefined;
-    size?: "default" | "lg" | "sm" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare function SidebarMenuButton({ asChild, isActive, variant, size, tooltip, className, ...props }: React.ComponentProps<"button"> & {
-    asChild?: boolean;
-    isActive?: boolean;
-    tooltip?: string | React.ComponentProps<typeof TooltipContent>;
-} & VariantProps<typeof sidebarMenuButtonVariants>): React.JSX.Element;
-declare function SidebarMenuAction({ className, asChild, showOnHover, ...props }: React.ComponentProps<"button"> & {
-    asChild?: boolean;
-    showOnHover?: boolean;
-}): React.JSX.Element;
-declare function SidebarMenuBadge({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-declare function SidebarMenuSkeleton({ className, showIcon, ...props }: React.ComponentProps<"div"> & {
-    showIcon?: boolean;
-}): React.JSX.Element;
-declare function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
-declare function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
-declare function SidebarMenuSubButton({ asChild, size, isActive, className, ...props }: React.ComponentProps<"a"> & {
-    asChild?: boolean;
-    size?: "sm" | "md";
+declare function SidebarMenuItem({ className, ...props }: HTMLMotionProps<"li">): React.JSX.Element;
+export type SidebarMenuSubProps = Omit<HTMLMotionProps<"ul">, "children"> & {
+    /** Whether the submenu is unfolded; it never renders inside the icon rail. */
+    open: boolean;
+    children?: React.ReactNode;
+};
+/**
+ * Nested list that unfolds with a clip and staggered items.
+ * @param props - Open state and motion-enabled list attributes.
+ * @returns The submenu while open and the sidebar is expanded.
+ */
+declare function SidebarMenuSub({ open, children, className, ...props }: SidebarMenuSubProps): React.JSX.Element;
+declare function SidebarMenuSubItem({ className, ...props }: HTMLMotionProps<"li">): React.JSX.Element;
+type SidebarActionProps = {
+    children: React.ReactNode;
+    icon?: React.ReactNode;
+    /** Renders a link through the `BeezUIProvider` routing adapter instead of a button. */
+    href?: string;
     isActive?: boolean;
-}): React.JSX.Element;
-export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar, };
+    disabled?: boolean;
+    target?: SidebarLinkTarget;
+    rel?: string;
+    onSelect?: () => void;
+    className?: string;
+};
+export type SidebarMenuSubButtonProps = SidebarActionProps & {
+    /** Closes the mobile sheet after selecting; on by default. */
+    closeOnSelect?: boolean;
+};
+/**
+ * Submenu entry; shows a dot when no icon is given.
+ * @param props - Label, icon, link or select handler, active and disabled state.
+ * @returns The submenu link or button.
+ */
+declare function SidebarMenuSubButton({ children, icon, href, isActive, disabled, closeOnSelect, target, rel, onSelect, className, }: SidebarMenuSubButtonProps): React.JSX.Element;
+export type SidebarMenuButtonProps = SidebarActionProps & {
+    /** Trailing content such as a counter, hidden in the icon rail. */
+    badge?: React.ReactNode;
+    /** Marks the button as a submenu toggle and shows a rotating chevron. */
+    ariaExpanded?: boolean;
+    /** Closes the mobile sheet after selecting; defaults to on, except for submenu toggles. */
+    closeOnSelect?: boolean;
+};
+/**
+ * Top-level menu entry: the active one carries a pill that glides between entries, and the label
+ * fades out of the icon rail, leaving a string label as accessible name and native tooltip.
+ * @param props - Label, icon, badge, link or select handler, submenu and active state.
+ * @returns The menu link or button.
+ */
+declare function SidebarMenuButton({ children, icon, badge, href, isActive, ariaExpanded, disabled, closeOnSelect, target, rel, onSelect, className, }: SidebarMenuButtonProps): React.JSX.Element;
+export { Sidebar, SidebarClose, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarTrigger, useSidebar, };