@astra-kit/ui 1.0.0 → 1.1.0

package/CHANGELOG.md

@@ -4,6 +4,13 @@ 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

package/README.md

@@ -47,7 +47,16 @@ import { Avatar, Button, Calendar, DataTable } from "@astra-kit/ui";
 <Avatar name="Ana Núñez" src="/ana.jpg" />;
 ```
 
-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).
+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.
 

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/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/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": "1.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",