@astra-kit/ui 0.0.0 → 1.0.0

package/CHANGELOG.md

@@ -4,6 +4,8 @@ Todos los cambios relevantes de `@astra-kit/ui` se documentan en este archivo co
 
 ## [Unreleased]
 
+## [1.0.0] - 2026-10-18
+
 ### Changed
 
 - El paquete pasa a llamarse `@astra-kit/ui` y reinicia la numeración: reemplazá la dependencia `beez-ui` por `@astra-kit/ui` y todos los imports, incluidos los subpaths y el CSS (`@astra-kit/ui/next`, `@astra-kit/ui/styles.css`, …). El repositorio ahora es `guidomodarelli/astra-ui`.
@@ -12,4 +14,8 @@ Todos los cambios relevantes de `@astra-kit/ui` se documentan en este archivo co
 
 ### Removed
 
-- No se aceptan los nombres anteriores (`BeezUIProvider`, `BeezLinkProps`, `BeezImageProps`, `useBeezUIComponents`, `Beez Inter`/`Geist`/`Mono`, `--beez-reaction-active-color`, `data-beez-theme-menu`): hay que migrar todo de una vez. El historial de `beez-ui` 0.8.1–4.0.1 queda en `docs/history/beez-ui-changelog.md`.
+- No se aceptan los nombres anteriores (`BeezUIProvider`, `BeezLinkProps`, `BeezImageProps`, `useBeezUIComponents`, `Beez Inter`/`Geist`/`Mono`, `--beez-reaction-active-color`, `data-beez-theme-menu`): hay que migrar todo de una vez. El historial de `beez-ui` 0.8.1–4.0.1 queda en [`docs/history/beez-ui-changelog.md`](https://github.com/guidomodarelli/astra-ui/blob/main/docs/history/beez-ui-changelog.md).
+
+### Fixed
+
+- `DropdownMenu` con un `trigger` propio no disponible ya no abre el menú: ni con click o toque cuando el botón está deshabilitado (por su `disabled`, por un `<fieldset disabled>` o por estado interno del componente), ni con Enter, Espacio o flecha abajo cuando tiene `aria-disabled="true"`, como un `Button` en `loading`. Antes se abría porque el navegador igual entrega el `pointerdown` al botón deshabilitado.

package/README.md

@@ -47,7 +47,7 @@ import { Avatar, Button, Calendar, DataTable } from "@astra-kit/ui";
 <Avatar name="Ana Núñez" src="/ana.jpg" />;
 ```
 
-Desde 3.0.0 los componentes adoptados de [Arc](https://uiarc.dev) usan la API pública de Arc: `Switch`, `Checkbox`, `RadioGroup`, `Badge`, `Avatar`, `AvatarGroup`, `Skeleton`, `Card`, `Alert`, `Tooltip`, `HoverCard`, `DropdownMenu`, `Select`, `Pagination`, `Calendar` y `Carousel` son componentes cerrados que se configuran por props (`items`, `options`, `members`, `content`, `title`); `Dialog` (`Dialog`, `DialogTrigger`, `DialogContent` con `title` y `description`, `DialogClose`), `Popover` y `Tabs` conservan las partes de Arc. Cada uno suma solo las extensiones que Arc no cubre, con copy en español por defecto, por ejemplo `getHref` en `Pagination`, `trigger` e ítems con `href` en `DropdownMenu`, `onOpenChange` en `HoverCard`, `footer` y el modo `alert` en `Dialog` (reemplaza a `AlertDialog`), `hideLabel` en `Select` y `onSettle` en `Carousel`. La tabla de migración desde 2.x está en [Migración a 3.0.0](#migración-a-300).
+Los componentes adoptados de [Arc](https://uiarc.dev) usan la API pública de Arc: `Switch`, `Checkbox`, `RadioGroup`, `Badge`, `Avatar`, `AvatarGroup`, `Skeleton`, `Card`, `Alert`, `Tooltip`, `HoverCard`, `DropdownMenu`, `Select`, `Pagination`, `Calendar` y `Carousel` son componentes cerrados que se configuran por props (`items`, `options`, `members`, `content`, `title`); `Dialog` (`Dialog`, `DialogTrigger`, `DialogContent` con `title` y `description`, `DialogClose`), `Popover` y `Tabs` conservan las partes de Arc. Cada uno suma solo las extensiones que Arc no cubre, con copy en español por defecto, por ejemplo `getHref` en `Pagination`, `trigger` e ítems con `href` en `DropdownMenu`, `onOpenChange` en `HoverCard`, `footer` y el modo `alert` en `Dialog` (reemplaza a `AlertDialog`), `hideLabel` en `Select` y `onSettle` en `Carousel`. La tabla de migración desde `beez-ui` 2.x está en [`docs/history/beez-ui-changelog.md`](https://github.com/guidomodarelli/astra-ui/blob/main/docs/history/beez-ui-changelog.md).
 
 Agrupar los imports de componentes desde la raíz. El paquete publica JavaScript ESM y declaraciones TypeScript en `dist`; el consumidor no necesita transpilar el código fuente de la librería. La gramática de filtros y los helpers de mes-año son independientes de React.
 
@@ -67,32 +67,6 @@ Los componentes usan por defecto los espaciados compactos de Agenda: `Select` mi
 
 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.
 
-## Migración a 3.0.0
-
-| Componente | 2.x | 3.0.0 |
-| --- | --- | --- |
-| `Switch` | `size="sm"` | Un solo tamaño, sin `size` |
-| `RadioGroup` | `RadioGroup` + `RadioGroupItem` | `<RadioGroup label options={[{ value, label, description }]} value onValueChange />` |
-| `Badge` | `variant` (`default`, `secondary`, `outline`, `ghost`, `link`, `destructive`) | `tone` (`neutral`, `success`, `info`, `warning`, `danger`); `destructive` pasa a `danger`, el resto a `neutral` |
-| `Avatar` | `Avatar` + `AvatarImage` + `AvatarFallback` (+ `AvatarBadge`) | `<Avatar name src size fallback badge />`; `size="default"` pasa a `md` |
-| `AvatarGroup` | `AvatarGroup` con `Avatar` hijos + `AvatarGroupCount` | `<AvatarGroup members={[{ name, src, status }]} max label />`; con una vista previa de los integrantes, `total` hace que el chip +N cuente contra el total |
-| `Skeleton` | `<Skeleton className="h-4 w-24" />` | `<Skeleton lines={1} className />`, `avatar`, `label`, o `loading` con hijos |
-| `Card` | `CardHeader`, `CardTitle`, `CardDescription`, `CardAction`, `CardContent`, `CardFooter`, `CardMedia` | `title`, `description`, `action`, `children`, `footer`, `media` |
-| `Alert` | `AlertTitle`, `AlertDescription`, `AlertAction`, `variant="destructive"` | `<Alert title tone="danger" action>detalle</Alert>` |
-| `Tooltip` | `TooltipProvider` + `Tooltip` + `TooltipTrigger asChild` + `TooltipContent` | `<Tooltip content side align>{trigger}</Tooltip>`, sin provider |
-| `Popover` | `PopoverAnchor`, `PopoverHeader`, `PopoverTitle`, `PopoverDescription`; `align` centrado por defecto | Solo `Popover`, `PopoverTrigger`, `PopoverContent`, `PopoverClose`; `align="start"` por defecto |
-| `HoverCard` | `HoverCard` + `HoverCardTrigger asChild` + `HoverCardContent` | `<HoverCard content onOpenChange className>{trigger}</HoverCard>` |
-| `DropdownMenu` | `DropdownMenuTrigger asChild`, `Content`, `Item`, `Separator`, `RadioGroup`, `RadioItem`, `CheckboxItem`, `Shortcut`, `Sub*` | `<DropdownMenu label trigger items={[{ label, icon, onSelect, href, destructive, separatorBefore, checked, trailing }]} selection />`; sin submenús. El click dentro del menú no sube por el árbol de React hasta los contenedores que lo envuelven |
-| `Select` | `SelectTrigger`, `SelectValue placeholder`, `SelectContent`, `SelectItem` | `<Select label hideLabel placeholder options={[{ value, label, disabled }]} value onValueChange triggerClassName />`; `aria-describedby` del trigger pasa a `Select` y `options` acepta listas `as const` |
-| `Tabs` | `TabsList variant="line"`, `tabsListVariants` | Solo la lista segmentada |
-| `Pagination` | `PaginationContent`, `PaginationItem`, `PaginationLink`, `PaginationPrevious`, `PaginationNext`, `PaginationEllipsis` | `<Pagination page pageCount onPageChange getHref label />`; sin `pageCount`, `hasNextPage` dibuja solo Anterior y Siguiente. `onPageChange(page, event)` recibe el click: con `getHref`, `event.preventDefault()` pagina en el lugar sin navegar |
-| `Dialog` | `DialogHeader`, `DialogTitle`, `DialogDescription`, `DialogFooter`, `DialogPortal`, `DialogOverlay` | `<DialogContent title description footer hideTitle>`; el cierre se llama "Cerrar diálogo". Lo que acompañaba al título dentro de `DialogHeader` (etiquetas, estado) pasa a `headerContent`, y el ref del cierre a `closeButtonRef` |
-| `AlertDialog` | `AlertDialog`, `AlertDialogContent`, `AlertDialogAction`, `AlertDialogCancel`… y `@astra-kit/ui/alert-dialog` | `<Dialog alert>` con `DialogContent` y `DialogClose asChild` para cancelar y confirmar |
-| `Calendar` | `mode`, `selected`, `onSelect`, `disabled`, `defaultMonth`, `components`, `classNames` | `<Calendar value onChange month onMonthChange minDate maxDate disabledDates locale showToday />`; solo selección simple |
-| `Carousel` | `CarouselContent`, `CarouselItem`, `CarouselPrevious`, `CarouselNext`, `CarouselIndicators`, `opts`, `setApi`, `CarouselApi` | `<Carousel label loop defaultIndex onIndexChange onSettle slideSize>{slides}</Carousel>`; `reInit` ya no hace falta. Las clases de `CarouselContent` y de su pista pasan a `viewportClassName` y `trackClassName` |
-| `AccountMenu` | `children` con `DropdownMenuItem` | `items` con los ítems de `DropdownMenu` |
-| `DataTable` | `columnVisibilityMenuExtraContent` | `columnVisibilityMenuExtraItems` |
-
 ## Movimiento
 
 El movimiento sigue a [Arc](https://uiarc.dev): explica causa y efecto (qué se abrió,
@@ -293,39 +267,11 @@ El compilador `tsc` es TypeScript 7. El paquete `typescript` apunta a la [API de
 
 ## Crear y publicar una versión
 
-### Desde GitHub Actions
-
-El workflow **Release** se ejecuta automáticamente con cada push o merge a `main`,
-incluidos los cambios de `package.json`. También se puede iniciar en GitHub desde
-**Actions → Release → Run workflow**, seleccionando `main`.
-El workflow usa `pnpm create-version --accept-suggested`: astra-rp calcula la versión
-y verifica que `[Unreleased]` tenga entradas escritas a mano, cierra esa sección con la versión, prepara y valida el tarball, crea y sube
-el commit y el tag y publica en npm con trusted publishing (OIDC).
-
-El disparador también incluye los pushes que cambian `package.json`, pero
-astra-rp no retoma una versión editada a mano en un commit común: necesita
-su commit de versión y tag de release. Para el flujo automático, dejar que
-astra-rp aumente la versión según los commits.
-
-No necesita secrets manuales: pasa `GITHUB_TOKEN` como `NPM_TOKEN`, con
-`contents: write` para subir el release y `packages: write` para publicar.
-El token se entrega solo al paso de release. El workflow conserva el historial
-completo de Git, instala Chromium y WebKit para las validaciones y serializa
-los releases sin cancelar uno que ya esté en curso. Solo permite ejecutarlos
-sobre `main`.
-
-Si el paquete ya existe, este repositorio debe tener acceso de escritura en
-**Package settings → Manage Actions access**. Si una regla de protección de
-`main` impide pushes del token del workflow, debe ajustarse para permitir el
-flujo de release antes de ejecutarlo. No ejecutar un release local mientras
-esté corriendo el de Actions. Los pushes hechos con `GITHUB_TOKEN` no disparan
-otros workflows, incluido **Release**, por lo que el commit de versión no crea un
-bucle de publicaciones. La preparación del release ejecuta las validaciones completas.
-Para retomar una publicación fallida después del push, volver a ejecutar **Release**.
+### Cómo se publica
 
-### Desde una terminal local
+`pnpm create-version` (alias `pnpm cv`) corre en tu máquina: diagnostica el repositorio, crea el commit `X.Y.Z` y el tag anotado `vX.Y.Z`, los pushea y despacha el workflow **Release** (`.github/workflows/release.yml`) con `version`, `tag` y `sha`. El workflow verifica que el tag apunte a ese commit y que esté en `main`, prepara y valida el tarball y lo publica en npm con [trusted publishing](https://docs.npmjs.com/trusted-publishers) (OIDC, `id-token: write`), sin tokens de npm ni secrets en el repositorio.
 
-Desde este repositorio, configurar `NPM_TOKEN` con un token personal de GitHub **clásico** con `write:packages` en el entorno o en `.env`, tomando `.env.example` como referencia. Si el valor existente es un token de npm, reemplazarlo localmente por el de GitHub. No pegarlo en el chat ni agregar credenciales al `.npmrc` del proyecto: astra-rp rechaza esas credenciales. El campo `repository` del manifest vincula el paquete con este repositorio.
+Como la publicación usa OIDC, solo puede correr en GitHub Actions: `--local` no publica este paquete. Si el workflow falla después del push, corré `pnpm cv --retry-ci vX.Y.Z` para reintentarlo sobre el mismo tag.
 
 ### Un solo comando: `pnpm create-version` (alias `pnpm cv`)
 
@@ -374,7 +320,7 @@ pnpm release:prepare
 
 El paquete excluye fuentes privadas, tests, scripts, `.env` y `.npmrc`; incluye JavaScript, declaraciones, CSS, fuentes tipográficas y licencias. Conserva releases anteriores.
 
-`prepack` ejecuta el build para los empaquetados manuales. `dist` y `releases` son generados e ignorados por Git. La CI verifica los checks, los tres providers y el catálogo de Storybook (`pnpm test:storybook`) en ambos motores de navegador en Linux y Windows. La publicación se ejecuta desde el workflow **Release**, que recibe la versión, el tag y el commit creados por `pnpm create-version`.
+`prepack` ejecuta el build para los empaquetados manuales. `dist` y `releases` son generados e ignorados por Git. La CI verifica los checks, los tres providers y el catálogo de Storybook (`pnpm test:storybook`) en ambos motores de navegador (Chromium y WebKit) en Linux. La publicación se ejecuta desde el workflow **Release**, que recibe la versión, el tag y el commit creados por `pnpm create-version`.
 
 Tras publicar, los consumidores pueden instalar `pnpm add @astra-kit/ui`. También pueden instalar directamente el `.tgz` validado antes de una publicación.
 

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

@@ -23,7 +23,8 @@ export type DropdownMenuProps = {
     icon?: ReactNode;
     /**
      * Your own trigger, rendered with `asChild` instead of Arc's labelled button, such as an icon button with its own
-     * `aria-label`. It must accept a ref and be focusable.
+     * `aria-label`. It must accept a ref and be focusable. While the rendered trigger is disabled (its own `disabled`, an
+     * ancestor `<fieldset disabled>`) or has `aria-disabled="true"`, the menu does not open.
      */
     trigger?: ReactElement;
     /** Single selection: rows with a `value` render as radio items checked against `selection.value`. */

package/dist/components/dropdown-menu.js

@@ -1,12 +1,38 @@
 "use client";
 import { c as _c } from "react/compiler-runtime";
 import { ChevronDownIcon } from "lucide-react";
+import { DROPDOWN_MENU_OPEN_KEYS, DROPDOWN_MENU_UNAVAILABLE_TRIGGER_SELECTOR } from "../constants/dropdown-menu.js";
 import { cn } from "../lib/utils.js";
 import { Button } from "./button.js";
 import { DropdownMenu as DropdownMenuRoot, DropdownMenuContent, DropdownMenuTrigger } from "./primitives/dropdown-menu.js";
 import { DropdownMenuItems } from "./primitives/dropdown-menu-items.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
+* Tells whether the rendered trigger is unavailable, however it got there: its own `disabled`, an ancestor
+* `<fieldset disabled>`, state derived inside a custom component, or `aria-disabled="true"`.
+* @param trigger - Element the event reached.
+* @returns Whether the menu must stay closed.
+*/
+function isUnavailableTrigger(trigger) {
+	return trigger.matches(DROPDOWN_MENU_UNAVAILABLE_TRIGGER_SELECTOR);
+}
+/**
+* Keeps an unavailable trigger from opening the menu on press. The engine still delivers `pointerdown` to a disabled
+* button, and Radix opens on it unless the event is already default-prevented.
+* @param event - Pointer event on the trigger.
+*/
+function preventPointerOpenWhileUnavailable(event) {
+	if (isUnavailableTrigger(event.currentTarget)) event.preventDefault();
+}
+/**
+* Keeps an `aria-disabled` trigger, which stays focusable, from opening the menu with Enter, Space or ArrowDown. Other
+* keys, such as Tab, keep their default so focus can leave it.
+* @param event - Keyboard event on the trigger.
+*/
+function preventKeyboardOpenWhileUnavailable(event) {
+	if (DROPDOWN_MENU_OPEN_KEYS.includes(event.key) && isUnavailableTrigger(event.currentTarget)) event.preventDefault();
+}
+/**
 * A focused list of actions anchored to a trigger.
 * @param props - The label, the items and optional trigger, selection, placement and open state.
 * @returns The trigger with its menu.
@@ -44,6 +70,8 @@ function DropdownMenu(t0) {
 	if ($[5] !== t1) {
 		t2 = /* @__PURE__ */ _jsx(DropdownMenuTrigger, {
 			asChild: true,
+			onPointerDown: preventPointerOpenWhileUnavailable,
+			onKeyDown: preventKeyboardOpenWhileUnavailable,
 			children: t1
 		});
 		$[5] = t1;

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

@@ -1,4 +1,11 @@
 import type { ArcFloatingMotion } from "../motion/arc-floating-slot.js";
+/**
+ * Rendered trigger states that must not open the menu: natively disabled (its own prop, an ancestor
+ * `<fieldset disabled>` or state derived inside a custom component) or marked unavailable with `aria-disabled`.
+ */
+export declare const DROPDOWN_MENU_UNAVAILABLE_TRIGGER_SELECTOR = ":disabled, [aria-disabled=\"true\"]";
+/** Keys that open the menu from its focused trigger, as Radix handles them; any other key keeps its default. */
+export declare const DROPDOWN_MENU_OPEN_KEYS: readonly string[];
 /** Gap, in pixels, between the trigger and the menu. */
 export declare const DROPDOWN_MENU_SIDE_OFFSET_PX = 6;
 /** Minimum distance, in pixels, a menu keeps from the viewport edges. */

package/dist/constants/dropdown-menu.js

@@ -1,4 +1,15 @@
 import { ARC_DURATION, ARC_EASE, ARC_SPRING_CSS } from "../motion/arc-tokens.js";
+/**
+* Rendered trigger states that must not open the menu: natively disabled (its own prop, an ancestor
+* `<fieldset disabled>` or state derived inside a custom component) or marked unavailable with `aria-disabled`.
+*/
+export const DROPDOWN_MENU_UNAVAILABLE_TRIGGER_SELECTOR = ":disabled, [aria-disabled=\"true\"]";
+/** Keys that open the menu from its focused trigger, as Radix handles them; any other key keeps its default. */
+export const DROPDOWN_MENU_OPEN_KEYS = [
+	"Enter",
+	" ",
+	"ArrowDown"
+];
 /** Gap, in pixels, between the trigger and the menu. */
 export const DROPDOWN_MENU_SIDE_OFFSET_PX = 6;
 /** Minimum distance, in pixels, a menu keeps from the viewport edges. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astra-kit/ui",
-  "version": "0.0.0",
+  "version": "1.0.0",
   "description": "Shared UI components with the customizations extracted from TuTribu.",
   "type": "module",
   "sideEffects": [