@astra-kit/ui 0.0.0 → 1.1.0

package/CHANGELOG.md

@@ -4,6 +4,15 @@ Todos los cambios relevantes de `@astra-kit/ui` se documentan en este archivo co
 
 ## [Unreleased]
 
+## [1.1.0] - 2026-10-19
+
+### Added
+
+- `ButtonLink`: un link con el aspecto de `Button` (`variant` y `size`) que rutea con el adaptador del provider y sigue siendo un enlace, para navegar sin estilos propios en cada app. También se exporta `buttonClassName({ variant, size, className })`, con las mismas clases para otros elementos, como un `<label>` que abre un selector de archivos.
+- `RadioGroup` acepta `hideLabel` (por defecto `false`), como `Select`: la leyenda sigue nombrando el grupo para lectores de pantalla pero no se ve ni ocupa espacio, para layouts que ya muestran su propio título. Ya no hace falta ocultarla con CSS propio.
+
+## [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 +21,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,16 @@ 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 `RadioGroup`, 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).
+
+`Button` es para acciones y no tiene `asChild`. Una navegación con aspecto de botón es un `ButtonLink`: el `Link` del provider (rutea con el adaptador configurado y sigue siendo un enlace, que se puede abrir en otra pestaña o copiar) con la receta de `Button` y sus `variant` y `size`. Para otro elemento con aspecto de botón, como un `<label>` que abre un selector de archivos, `buttonClassName({ variant, size, className })` devuelve las mismas clases. Ninguno de los dos incluye la presión ni el spinner de `Button`.
+
+```tsx
+import { ButtonLink, buttonClassName } from "@astra-kit/ui";
+
+<ButtonLink href="/" variant="secondary">Volver al inicio</ButtonLink>;
+<label className={buttonClassName({ variant: "ghost", size: "sm" })}>Adjuntar<input type="file" hidden /></label>;
+```
 
 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 +76,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 +276,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 +329,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/button-link.d.ts

@@ -0,0 +1,15 @@
+import { type ButtonSize, type ButtonVariant } from "./button-recipe.js";
+import { type LinkProps } from "./link.js";
+export type ButtonLinkProps = LinkProps & {
+    /** Visual weight, as in `Button`. Defaults to `primary`. */
+    variant?: ButtonVariant;
+    /** Height and padding, as in `Button`. Defaults to `md`. */
+    size?: ButtonSize;
+};
+/**
+ * A link styled as a button, such as "Volver al inicio" on an error page.
+ * @param props - Variant, size and every `Link` prop, including `href`, `prefetch` and `component`.
+ * @returns The link.
+ */
+declare function ButtonLink({ variant, size, className, ...props }: ButtonLinkProps): import("react").JSX.Element;
+export { ButtonLink };

package/dist/components/button-link.js

@@ -0,0 +1,70 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/**
+* Navigation that looks like Arc's Button (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): the
+* provider's `Link`, so it routes through the configured adapter, with the button recipe. A link stays a link for
+* assistive technology and the browser (it opens in a new tab, it can be copied), which a `Button` cannot.
+*/
+import { cn } from "../lib/utils.js";
+import { buttonClassName } from "./button-recipe.js";
+import { Link } from "./link.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+* A link styled as a button, such as "Volver al inicio" on an error page.
+* @param props - Variant, size and every `Link` prop, including `href`, `prefetch` and `component`.
+* @returns The link.
+*/
+function ButtonLink(t0) {
+	const $ = _c(14);
+	let className;
+	let props;
+	let t1;
+	let t2;
+	if ($[0] !== t0) {
+		({variant: t1, size: t2, className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = t1;
+		$[4] = t2;
+	} else {
+		className = $[1];
+		props = $[2];
+		t1 = $[3];
+		t2 = $[4];
+	}
+	const variant = t1 === undefined ? "primary" : t1;
+	const size = t2 === undefined ? "md" : t2;
+	let t3;
+	if ($[5] !== className || $[6] !== size || $[7] !== variant) {
+		t3 = cn(buttonClassName({
+			variant,
+			size
+		}), className);
+		$[5] = className;
+		$[6] = size;
+		$[7] = variant;
+		$[8] = t3;
+	} else {
+		t3 = $[8];
+	}
+	let t4;
+	if ($[9] !== props || $[10] !== size || $[11] !== t3 || $[12] !== variant) {
+		t4 = /* @__PURE__ */ _jsx(Link, {
+			"data-slot": "button-link",
+			"data-variant": variant,
+			"data-size": size,
+			...props,
+			className: t3
+		});
+		$[9] = props;
+		$[10] = size;
+		$[11] = t3;
+		$[12] = variant;
+		$[13] = t4;
+	} else {
+		t4 = $[13];
+	}
+	return t4;
+}
+export { ButtonLink };

package/dist/components/button-recipe.d.ts

@@ -0,0 +1,27 @@
+/** Visual weight, as in Arc: one primary action per surface. */
+export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger";
+/** Height and padding, from Arc's control heights. */
+export type ButtonSize = "sm" | "md" | "lg";
+/**
+ * Arc's button recipe on its tokens. Press scale is driven by Motion alone, so `transform` never gets a CSS
+ * transition, and anchors of floating layers never scale because Radix measures them on pointerdown. Keyboard focus
+ * uses the foundation's shared outline; pointer focus draws no ring.
+ */
+export declare const buttonVariants: (props?: ({
+    variant?: "danger" | "ghost" | "primary" | "secondary" | null | undefined;
+    size?: "lg" | "md" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Options of {@link buttonClassName}. */
+export type ButtonClassNameOptions = {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    /** Extra classes merged after the recipe, so they win on conflicts. */
+    className?: string;
+};
+/**
+ * Arc's button classes for an element that is not a `Button`, such as a `<label>` that opens a file picker. Links
+ * use {@link ButtonLink} instead. The press scale and the loading label are effects of `Button` and are not included.
+ * @param options - Variant, size and extra classes. Defaults to `primary` and `md`.
+ * @returns The class list.
+ */
+export declare function buttonClassName({ variant, size, className }?: ButtonClassNameOptions): string;

package/dist/components/button-recipe.js

@@ -0,0 +1,44 @@
+/**
+* Arc's Button recipe (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): variants, sizes and the helper
+* that applies them. It has no client directive, so `buttonClassName` also runs in React Server Components; the
+* `Button` and `ButtonLink` components import it from here.
+*/
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/utils.js";
+/**
+* Arc's button recipe on its tokens. Press scale is driven by Motion alone, so `transform` never gets a CSS
+* transition, and anchors of floating layers never scale because Radix measures them on pointerdown. Keyboard focus
+* uses the foundation's shared outline; pointer focus draws no ring.
+*/
+export const buttonVariants = cva("relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-(--radius-control) border border-transparent px-4 font-sans text-sm leading-(--leading-body) font-medium whitespace-nowrap select-none [-webkit-tap-highlight-color:transparent] transition-[color,background-color,border-color,opacity,box-shadow] duration-(--duration-fast) ease-(--ease-standard) disabled:cursor-not-allowed disabled:opacity-[.52] aria-busy:cursor-progress motion-reduce:transition-none [&:is([aria-haspopup]:not([aria-haspopup=false]),[data-state],[role=combobox])]:transform-none! [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+	variants: {
+		variant: {
+			primary: "border-foreground bg-foreground text-background hover-fine:not-disabled:opacity-[.91] hover-fine:not-disabled:shadow-(--shadow-resting) active:not-disabled:opacity-[.84]",
+			secondary: "border-border bg-surface text-foreground hover-fine:not-disabled:bg-surface-muted hover-fine:not-disabled:shadow-(--shadow-resting) active:not-disabled:bg-surface-muted disabled:bg-surface-muted disabled:text-text-muted disabled:opacity-100",
+			ghost: "bg-transparent text-text-secondary hover-fine:not-disabled:bg-surface-muted hover-fine:not-disabled:text-foreground active:not-disabled:bg-surface-muted active:not-disabled:text-foreground disabled:text-text-muted disabled:opacity-100",
+			danger: "border-border bg-surface text-danger hover-fine:not-disabled:border-danger hover-fine:not-disabled:bg-surface-muted active:not-disabled:border-danger active:not-disabled:bg-surface-muted disabled:bg-surface-muted disabled:text-[color-mix(in_oklab,var(--danger)_55%,var(--surface-muted))] disabled:opacity-100"
+		},
+		size: {
+			sm: "min-h-(--control-height-sm) px-3",
+			md: "min-h-(--control-height-md)",
+			lg: "min-h-(--control-height-lg) px-5"
+		}
+	},
+	defaultVariants: {
+		variant: "primary",
+		size: "md"
+	}
+});
+/**
+* Arc's button classes for an element that is not a `Button`, such as a `<label>` that opens a file picker. Links
+* use {@link ButtonLink} instead. The press scale and the loading label are effects of `Button` and are not included.
+* @param options - Variant, size and extra classes. Defaults to `primary` and `md`.
+* @returns The class list.
+*/
+export function buttonClassName({ variant = "primary", size = "md", className } = {}) {
+	return cn(buttonVariants({
+		variant,
+		size,
+		className
+	}));
+}

package/dist/components/button.d.ts

@@ -1,13 +1,10 @@
 /**
  * Arc's Button (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): its variants, sizes, tokens and motion,
  * with width-aware press feedback, a label that springs to its new width and a loading spinner. It renders a native
- * button; style links as links instead. Composite components that need icon sizes use the internal `ControlButton`.
+ * button: navigation that looks like a button is a `ButtonLink`, and other elements take `buttonClassName`. Composite components that need icon sizes use the internal `ControlButton`.
  */
 import type { ComponentProps } from "react";
-/** Visual weight, as in Arc: one primary action per surface. */
-export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger";
-/** Height and padding, from Arc's control heights. */
-export type ButtonSize = "sm" | "md" | "lg";
+import { type ButtonSize, type ButtonVariant } from "./button-recipe.js";
 export type ButtonProps = ComponentProps<"button"> & {
     variant?: ButtonVariant;
     size?: ButtonSize;
@@ -21,3 +18,4 @@ export type ButtonProps = ComponentProps<"button"> & {
  */
 declare function Button({ className, variant, size, loading, type, children, ref, ...props }: ButtonProps): import("react").JSX.Element;
 export { Button };
+export type { ButtonSize, ButtonVariant } from "./button-recipe.js";

package/dist/components/button.js

@@ -1,39 +1,15 @@
 "use client";
 import { c as _c } from "react/compiler-runtime";
-import { cva } from "class-variance-authority";
 import { useIsPresent } from "motion/react";
 import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
 import { cn } from "../lib/utils.js";
+import { buttonVariants } from "./button-recipe.js";
 import { useArcPress } from "../motion/arc-press.js";
 import { useAttachedElement } from "../motion/use-attached-element.js";
 import { ButtonLabel } from "./button-label.js";
 import { LEAVING_ATTRIBUTES, LOADING_INERT_HANDLERS } from "./button-interaction.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
-* Arc's button recipe on its tokens. Press scale is driven by Motion alone, so `transform` never gets a CSS
-* transition, and anchors of floating layers never scale because Radix measures them on pointerdown. Keyboard focus
-* uses the foundation's shared outline; pointer focus draws no ring.
-*/
-const buttonVariants = cva("relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-(--radius-control) border border-transparent px-4 font-sans text-sm leading-(--leading-body) font-medium whitespace-nowrap select-none [-webkit-tap-highlight-color:transparent] transition-[color,background-color,border-color,opacity,box-shadow] duration-(--duration-fast) ease-(--ease-standard) disabled:cursor-not-allowed disabled:opacity-[.52] aria-busy:cursor-progress motion-reduce:transition-none [&:is([aria-haspopup]:not([aria-haspopup=false]),[data-state],[role=combobox])]:transform-none! [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
-	variants: {
-		variant: {
-			primary: "border-foreground bg-foreground text-background hover-fine:not-disabled:opacity-[.91] hover-fine:not-disabled:shadow-(--shadow-resting) active:not-disabled:opacity-[.84]",
-			secondary: "border-border bg-surface text-foreground hover-fine:not-disabled:bg-surface-muted hover-fine:not-disabled:shadow-(--shadow-resting) active:not-disabled:bg-surface-muted disabled:bg-surface-muted disabled:text-text-muted disabled:opacity-100",
-			ghost: "bg-transparent text-text-secondary hover-fine:not-disabled:bg-surface-muted hover-fine:not-disabled:text-foreground active:not-disabled:bg-surface-muted active:not-disabled:text-foreground disabled:text-text-muted disabled:opacity-100",
-			danger: "border-border bg-surface text-danger hover-fine:not-disabled:border-danger hover-fine:not-disabled:bg-surface-muted active:not-disabled:border-danger active:not-disabled:bg-surface-muted disabled:bg-surface-muted disabled:text-[color-mix(in_oklab,var(--danger)_55%,var(--surface-muted))] disabled:opacity-100"
-		},
-		size: {
-			sm: "min-h-(--control-height-sm) px-3",
-			md: "min-h-(--control-height-md)",
-			lg: "min-h-(--control-height-lg) px-5"
-		}
-	},
-	defaultVariants: {
-		variant: "primary",
-		size: "md"
-	}
-});
-/**
 * A single action on a page, form or dialog. Defaults to `type="button"`, so it only submits a form when asked to.
 * @param props - Variant, size, loading state and native button attributes, including `ref`.
 * @returns The native button.

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/components/radio-group.d.ts

@@ -10,8 +10,10 @@ export type RadioGroupOption = {
     disabled?: boolean;
 };
 export type RadioGroupProps = {
-    /** Visible legend of the fieldset, which names the group. */
+    /** Legend of the fieldset, which names the group. */
     label: string;
+    /** Keeps `label` for assistive technology only, for layouts that already show their own label. */
+    hideLabel?: boolean;
     /** Rows in order. Values double as keys, so keep them unique. */
     options: RadioGroupOption[];
     /** Selected value when controlled. */
@@ -27,8 +29,8 @@ export type RadioGroupProps = {
 };
 /**
  * A choice of one option from a visible set, controlled with `value` or uncontrolled with `defaultValue`.
- * @param props - Legend, options, value, change handler, form name and classes.
+ * @param props - Legend, its visibility, options, value, change handler, form name and classes.
  * @returns The fieldset with its legend and option rows.
  */
-declare function RadioGroup({ label, options, value, defaultValue, onValueChange, name, className }: RadioGroupProps): import("react").JSX.Element;
+declare function RadioGroup({ label, hideLabel, options, value, defaultValue, onValueChange, name, className, }: RadioGroupProps): import("react").JSX.Element;
 export { RadioGroup };

package/dist/components/radio-group.js

@@ -208,12 +208,13 @@ function _temp(event) {
 }
 /**
 * A choice of one option from a visible set, controlled with `value` or uncontrolled with `defaultValue`.
-* @param props - Legend, options, value, change handler, form name and classes.
+* @param props - Legend, its visibility, options, value, change handler, form name and classes.
 * @returns The fieldset with its legend and option rows.
 */
 function RadioGroup(t0) {
-	const $ = _c(32);
-	const { label, options, value, defaultValue, onValueChange, name, className } = t0;
+	const $ = _c(33);
+	const { label, hideLabel: t1, options, value, defaultValue, onValueChange, name, className } = t0;
+	const hideLabel = t1 === undefined ? false : t1;
 	const reduceMotion = usePrefersReducedMotion();
 	const generatedId = useId();
 	const legendId = `${generatedId}-legend`;
@@ -224,36 +225,36 @@ function RadioGroup(t0) {
 	const highlightRef = useRef(null);
 	const shownValue = useRef(null);
 	const placedAt = useRef("");
-	let t1;
+	let t2;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = () => optionsRef.current?.querySelector(CHECKED_OPTION_SELECTOR) ?? null;
-		$[0] = t1;
+		t2 = () => optionsRef.current?.querySelector(CHECKED_OPTION_SELECTOR) ?? null;
+		$[0] = t2;
 	} else {
-		t1 = $[0];
+		t2 = $[0];
 	}
-	const findCheckedRow = t1;
-	let t2;
+	const findCheckedRow = t2;
 	let t3;
+	let t4;
 	if ($[1] !== reduceMotion || $[2] !== selectedValue) {
-		t2 = () => {
+		t3 = () => {
 			const hasChanged = shownValue.current !== null && shownValue.current !== selectedValue;
 			placeHighlight(highlightRef.current, findCheckedRow(), placedAt, hasChanged && !reduceMotion);
 			shownValue.current = selectedValue;
 			groupRef.current?.setAttribute(RADIO_GROUP_READY_ATTRIBUTE, "");
 		};
-		t3 = [selectedValue, reduceMotion];
+		t4 = [selectedValue, reduceMotion];
 		$[1] = reduceMotion;
 		$[2] = selectedValue;
-		$[3] = t2;
-		$[4] = t3;
+		$[3] = t3;
+		$[4] = t4;
 	} else {
-		t2 = $[3];
-		t3 = $[4];
+		t3 = $[3];
+		t4 = $[4];
 	}
-	useLayoutEffect(t2, t3);
-	let t4;
+	useLayoutEffect(t3, t4);
+	let t5;
 	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = () => {
+		t5 = () => {
 			const list = optionsRef.current;
 			if (!list || typeof ResizeObserver === "undefined") {
 				return;
@@ -263,15 +264,15 @@ function RadioGroup(t0) {
 			list.querySelectorAll(OPTION_SELECTOR).forEach((row) => observer.observe(row));
 			return () => observer.disconnect();
 		};
-		$[5] = t4;
+		$[5] = t5;
 	} else {
-		t4 = $[5];
+		t5 = $[5];
 	}
-	useEffect(t4);
-	const t5 = name ?? generatedId;
-	let t6;
+	useEffect(t5);
+	const t6 = name ?? generatedId;
+	let t7;
 	if ($[6] !== onValueChange || $[7] !== value) {
-		t6 = (nextValue) => {
+		t7 = (nextValue) => {
 			if (value === undefined) {
 				setUncontrolledValue(nextValue);
 			}
@@ -279,112 +280,114 @@ function RadioGroup(t0) {
 		};
 		$[6] = onValueChange;
 		$[7] = value;
-		$[8] = t6;
+		$[8] = t7;
 	} else {
-		t6 = $[8];
+		t7 = $[8];
 	}
-	let t7;
+	let t8;
 	if ($[9] !== className) {
-		t7 = cn("m-0 grid min-w-0 border-0 p-0", className);
+		t8 = cn("m-0 grid min-w-0 border-0 p-0", className);
 		$[9] = className;
-		$[10] = t7;
+		$[10] = t8;
 	} else {
-		t7 = $[10];
+		t8 = $[10];
 	}
-	let t8;
-	if ($[11] !== label || $[12] !== legendId) {
-		t8 = /* @__PURE__ */ _jsx("legend", {
+	const t9 = hideLabel ? "sr-only" : "mb-(--space-2) p-0 text-sm font-medium text-foreground";
+	let t10;
+	if ($[11] !== label || $[12] !== legendId || $[13] !== t9) {
+		t10 = /* @__PURE__ */ _jsx("legend", {
 			id: legendId,
 			"data-slot": "radio-group-label",
-			className: "mb-(--space-2) p-0 text-sm font-medium text-foreground",
+			className: t9,
 			children: label
 		});
 		$[11] = label;
 		$[12] = legendId;
-		$[13] = t8;
+		$[13] = t9;
+		$[14] = t10;
 	} else {
-		t8 = $[13];
+		t10 = $[14];
 	}
-	let t9;
-	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
-		t9 = /* @__PURE__ */ _jsx("span", {
+	let t11;
+	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = /* @__PURE__ */ _jsx("span", {
 			ref: highlightRef,
 			"data-slot": "radio-group-highlight",
 			"aria-hidden": "true",
 			className: "pointer-events-none absolute top-0 left-0 z-1 box-border rounded-(--radius-control) border border-(--control-on) bg-[color-mix(in_oklab,var(--control-on)_5%,transparent)] opacity-0"
 		});
-		$[14] = t9;
+		$[15] = t11;
 	} else {
-		t9 = $[14];
+		t11 = $[15];
 	}
-	let t10;
-	if ($[15] !== options) {
-		t10 = options.map(_temp2);
-		$[15] = options;
-		$[16] = t10;
+	let t12;
+	if ($[16] !== options) {
+		t12 = options.map(_temp2);
+		$[16] = options;
+		$[17] = t12;
 	} else {
-		t10 = $[16];
+		t12 = $[17];
 	}
-	let t11;
-	if ($[17] !== t10) {
-		t11 = /* @__PURE__ */ _jsxs("div", {
+	let t13;
+	if ($[18] !== t12) {
+		t13 = /* @__PURE__ */ _jsxs("div", {
 			ref: optionsRef,
 			"data-slot": "radio-group-options",
 			className: "relative grid w-full gap-(--space-2)",
-			children: [t9, t10]
+			children: [t11, t12]
 		});
-		$[17] = t10;
-		$[18] = t11;
+		$[18] = t12;
+		$[19] = t13;
 	} else {
-		t11 = $[18];
+		t13 = $[19];
 	}
-	let t12;
-	if ($[19] !== legendId || $[20] !== t11 || $[21] !== t7 || $[22] !== t8) {
-		t12 = /* @__PURE__ */ _jsxs("fieldset", {
+	let t14;
+	if ($[20] !== legendId || $[21] !== t10 || $[22] !== t13 || $[23] !== t8) {
+		t14 = /* @__PURE__ */ _jsxs("fieldset", {
 			ref: groupRef,
 			"data-slot": "radio-group",
 			"aria-labelledby": legendId,
-			className: t7,
-			children: [t8, t11]
+			className: t8,
+			children: [t10, t13]
 		});
-		$[19] = legendId;
-		$[20] = t11;
-		$[21] = t7;
-		$[22] = t8;
-		$[23] = t12;
+		$[20] = legendId;
+		$[21] = t10;
+		$[22] = t13;
+		$[23] = t8;
+		$[24] = t14;
 	} else {
-		t12 = $[23];
+		t14 = $[24];
 	}
-	let t13;
-	if ($[24] !== selectedValue || $[25] !== t12 || $[26] !== t5 || $[27] !== t6) {
-		t13 = /* @__PURE__ */ _jsx(RadioGroupPrimitive.Root, {
+	let t15;
+	if ($[25] !== selectedValue || $[26] !== t14 || $[27] !== t6 || $[28] !== t7) {
+		t15 = /* @__PURE__ */ _jsx(RadioGroupPrimitive.Root, {
 			asChild: true,
-			name: t5,
+			name: t6,
 			value: selectedValue,
-			onValueChange: t6,
-			children: t12
+			onValueChange: t7,
+			children: t14
 		});
-		$[24] = selectedValue;
-		$[25] = t12;
-		$[26] = t5;
+		$[25] = selectedValue;
+		$[26] = t14;
 		$[27] = t6;
-		$[28] = t13;
+		$[28] = t7;
+		$[29] = t15;
 	} else {
-		t13 = $[28];
+		t15 = $[29];
 	}
-	let t14;
-	if ($[29] !== selectedValue || $[30] !== t13) {
-		t14 = /* @__PURE__ */ _jsx(RadioGroupValueContext.Provider, {
+	let t16;
+	if ($[30] !== selectedValue || $[31] !== t15) {
+		t16 = /* @__PURE__ */ _jsx(RadioGroupValueContext.Provider, {
 			value: selectedValue,
-			children: t13
+			children: t15
 		});
-		$[29] = selectedValue;
-		$[30] = t13;
-		$[31] = t14;
+		$[30] = selectedValue;
+		$[31] = t15;
+		$[32] = t16;
 	} else {
-		t14 = $[31];
+		t16 = $[32];
 	}
-	return t14;
+	return t16;
 }
 function _temp2(option) {
 	return /* @__PURE__ */ _jsx(RadioGroupOptionRow, { ...option }, option.value);

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/dist/index.d.ts

@@ -7,6 +7,8 @@ export * from "./components/action-button.js";
 export * from "./components/avatar.js";
 export * from "./components/badge.js";
 export * from "./components/button.js";
+export { buttonClassName, type ButtonClassNameOptions } from "./components/button-recipe.js";
+export * from "./components/button-link.js";
 export * from "./components/card.js";
 export * from "./components/carousel.js";
 export * from "./components/checkbox.js";

package/dist/index.js

@@ -6,6 +6,9 @@ export * from "./components/action-button.js";
 export * from "./components/avatar.js";
 export * from "./components/badge.js";
 export * from "./components/button.js";
+// From the recipe module, which has no client directive, so it also runs in Server Components.
+export { buttonClassName } from "./components/button-recipe.js";
+export * from "./components/button-link.js";
 export * from "./components/card.js";
 export * from "./components/carousel.js";
 export * from "./components/checkbox.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astra-kit/ui",
-  "version": "0.0.0",
+  "version": "1.1.0",
   "description": "Shared UI components with the customizations extracted from TuTribu.",
   "type": "module",
   "sideEffects": [
@@ -38,6 +38,11 @@
       "import": "./dist/components/button.js",
       "default": "./dist/components/button.js"
     },
+    "./button-link": {
+      "types": "./dist/components/button-link.d.ts",
+      "import": "./dist/components/button-link.js",
+      "default": "./dist/components/button-link.js"
+    },
     "./card": {
       "types": "./dist/components/card.d.ts",
       "import": "./dist/components/card.js",