@viraui/react 0.0.28 → 0.0.29

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

@@ -0,0 +1,35 @@
+import { ReactNode } from 'react';
+import * as React from 'react';
+export type ButtonSize = 'big' | 'medium' | 'small';
+export type ButtonVariant = 'primary' | 'secondary' | 'flat' | 'destructive';
+export type ButtonAddonPosition = 'start' | 'end';
+export declare const spinnerDimensionsBySize: Record<ButtonSize, 'small' | 'regular'>;
+type ButtonChromeRootAttrsParams = {
+    addon?: ReactNode;
+    addonPosition: ButtonAddonPosition;
+    className?: string;
+    isIconOnly: boolean;
+    loading: boolean;
+    pill: boolean;
+    size: ButtonSize;
+    variant: ButtonVariant;
+};
+export declare function getButtonChromeRootAttrs({ addon, addonPosition, className, isIconOnly, loading, pill, size, variant, }: ButtonChromeRootAttrsParams): {
+    'aria-busy': true | undefined;
+    className: string;
+    'data-loading': string;
+    'data-pill': string | undefined;
+    'data-size': ButtonSize;
+    'data-icon-only': string | undefined;
+    'data-addon-position': ButtonAddonPosition | undefined;
+    'data-variant': ButtonVariant;
+};
+type ButtonChromeChildrenProps = {
+    addon?: ReactNode;
+    children?: ReactNode;
+    isIconOnly: boolean;
+    loading: boolean;
+    size: ButtonSize;
+};
+export declare const ButtonChromeChildren: React.FC<ButtonChromeChildrenProps>;
+export {};

package/dist/components/button/button-chrome.js

@@ -0,0 +1,44 @@
+import { clsx } from "../../core/clsx.js";
+import { Spinner } from "../spinner/spinner.js";
+import button_module_default from "./button.module.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import "react";
+//#region src/components/button/button-chrome.tsx
+var spinnerDimensionsBySize = {
+	small: "small",
+	medium: "small",
+	big: "regular"
+};
+function getButtonChromeRootAttrs({ addon, addonPosition, className, isIconOnly, loading, pill, size, variant }) {
+	return {
+		"aria-busy": loading || void 0,
+		className: clsx(button_module_default.Button, className),
+		"data-loading": loading ? "true" : "false",
+		"data-pill": pill ? "true" : void 0,
+		"data-size": size,
+		"data-icon-only": isIconOnly ? "true" : void 0,
+		"data-addon-position": addon && !isIconOnly ? addonPosition : void 0,
+		"data-variant": variant
+	};
+}
+var ButtonChromeChildren = ({ addon, children, isIconOnly, loading, size }) => /* @__PURE__ */ jsxs(Fragment, { children: [isIconOnly ? /* @__PURE__ */ jsx("span", {
+	"aria-hidden": "true",
+	className: button_module_default.Content,
+	"data-loading": loading ? "true" : "false",
+	children: addon
+}) : /* @__PURE__ */ jsxs(Fragment, { children: [addon && /* @__PURE__ */ jsx("span", {
+	"aria-hidden": "true",
+	className: button_module_default.Content,
+	"data-loading": loading ? "true" : "false",
+	children: addon
+}), /* @__PURE__ */ jsx("span", {
+	className: button_module_default.Content,
+	"data-loading": loading ? "true" : "false",
+	children
+})] }), loading && /* @__PURE__ */ jsx("span", {
+	"aria-hidden": "true",
+	className: button_module_default.SpinnerOverlay,
+	children: /* @__PURE__ */ jsx(Spinner, { size: spinnerDimensionsBySize[size] })
+})] });
+//#endregion
+export { ButtonChromeChildren, getButtonChromeRootAttrs, spinnerDimensionsBySize };

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

@@ -0,0 +1,64 @@
+import { useRender } from '@base-ui/react/use-render';
+import { ButtonAddonPosition, ButtonSize, ButtonVariant } from './button-chrome';
+import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
+import { ReactNode } from 'react';
+import * as React from 'react';
+/**
+ * Public ButtonLink props.
+ *
+ * Native link root with Button visual chrome. Use for navigation; do not use
+ * `Button` with `render={<a />}` (Base UI enforces button semantics).
+ *
+ * @default Renders an `a` root; pass `render` for framework Link composition.
+ */
+export type ButtonLinkProps = Omit<React.ComponentPropsWithRef<'a'>, 'type'> & IntrinsicViraProps & {
+    /**
+     * Replaces the default `a` root using Base UI render semantics (e.g. Next.js `Link`).
+     *
+     * @default The link renders an `a` root.
+     */
+    render?: useRender.RenderProp;
+    /**
+     * Controls the visual button size.
+     *
+     * @default 'medium'
+     */
+    size?: ButtonSize;
+    /**
+     * Selects the visual treatment matching Button.
+     *
+     * @default 'primary'
+     */
+    variant?: ButtonVariant;
+    /**
+     * Decorative addon rendered alongside the link label.
+     *
+     * @default No default; omit when the link has no addon.
+     */
+    addon?: ReactNode;
+    /**
+     * Controls whether the addon appears before or after the label.
+     *
+     * @default 'start'
+     */
+    addonPosition?: ButtonAddonPosition;
+    /**
+     * Shows a centered spinner overlay while preserving the original content width.
+     *
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Applies a fully rounded pill shape.
+     *
+     * @default false
+     */
+    pill?: boolean;
+    /**
+     * Marks the link inert via `aria-disabled` and prevents activation.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+};
+export declare const ButtonLink: React.FC<ButtonLinkProps>;

package/dist/components/button/button-link.guide.json

@@ -0,0 +1,17 @@
+{
+  "name": "ButtonLink",
+  "summary": "Navigation link that shares Button visual chrome (--vui-button-* CSS) and default a root with optional render for framework Link.",
+  "whenToUse": [
+    "Actions that navigate (href or router Link) but should look like Button",
+    "Same size, variant, addon, pill, and loading chrome as Button without button semantics",
+    "Compose with Next.js Link or React Router Link via the render prop"
+  ],
+  "whenNotToUse": ["In-page actions that do not navigate — use Button", "Icon-only navigation — use IconButtonLink"],
+  "accessibility": [
+    "Renders a real link root so assistive tech get link role and keyboard behavior",
+    "disabled or loading sets aria-disabled and prevents activation; do not strip href solely for disable styling",
+    "Loading sets aria-busy; Spinner stays decorative"
+  ],
+  "antiPatterns": ["Using Button with render={<a />} instead of ButtonLink", "Forcing role=button on a link"],
+  "related": ["Button", "IconButtonLink", "Icon", "Spinner", "Chip"]
+}

package/dist/components/button/button-link.js

@@ -0,0 +1,47 @@
+import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
+import { ButtonChromeChildren, getButtonChromeRootAttrs } from "./button-chrome.js";
+import { jsx } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+import "react";
+//#region src/components/button/button-link.tsx
+var ButtonLink = ({ children, className, disabled = false, addon, addonPosition = "start", loading = false, pill = false, size = "medium", variant = "primary", render, ref, onClick, ...otherProps }) => {
+	const isDisabled = disabled || loading;
+	const isIconOnly = Boolean(addon) && (children == null || children === "");
+	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
+	return useRender({
+		defaultTagName: "a",
+		render,
+		ref,
+		props: {
+			...componentProps,
+			...intrinsicAttributes,
+			...getButtonChromeRootAttrs({
+				addon,
+				addonPosition,
+				className,
+				isIconOnly,
+				loading,
+				pill,
+				size,
+				variant
+			}),
+			children: /* @__PURE__ */ jsx(ButtonChromeChildren, {
+				addon,
+				isIconOnly,
+				loading,
+				size,
+				children
+			}),
+			onClick: (event) => {
+				if (isDisabled) {
+					event.preventDefault();
+					return;
+				}
+				onClick?.(event);
+			},
+			...isDisabled && { "aria-disabled": true }
+		}
+	});
+};
+//#endregion
+export { ButtonLink };

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

@@ -1,4 +1,5 @@
 import { Button as PrimitiveButton } from '@base-ui/react/button';
+import { ButtonAddonPosition, ButtonSize, ButtonVariant } from './button-chrome';
 import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
 import { ReactNode } from 'react';
 import * as React from 'react';
@@ -16,13 +17,13 @@ export type ButtonProps = PrimitiveButton.Props & IntrinsicViraProps & {
      *
      * @default 'medium'
      */
-    size?: 'big' | 'medium' | 'small';
+    size?: ButtonSize;
     /**
      * Selects the visual treatment for the button.
      *
      * @default 'primary'
      */
-    variant?: 'primary' | 'secondary' | 'flat' | 'destructive';
+    variant?: ButtonVariant;
     /**
      * Decorative addon rendered alongside the button label.
      * Pass any React element; use `<Icon name="..." />` for icons or `<Chip />` for status chips.
@@ -35,7 +36,7 @@ export type ButtonProps = PrimitiveButton.Props & IntrinsicViraProps & {
      *
      * @default 'start'
      */
-    addonPosition?: 'start' | 'end';
+    addonPosition?: ButtonAddonPosition;
     /**
      * Shows a centered spinner overlay while preserving the original content width.
      *

package/dist/components/button/button.guide.json

@@ -8,7 +8,10 @@
     "Async actions that need a stable width while loading",
     "Primary Chip addons inside a primary Button — set data-theme=\"inverted\" on the Chip so its background contrasts the button fill"
   ],
-  "whenNotToUse": ["Icon-only actions without a visible label — use IconButton", "Navigation or non-button semantics"],
+  "whenNotToUse": [
+    "Icon-only actions without a visible label — use IconButton",
+    "Navigation or non-button semantics — use ButtonLink"
+  ],
   "accessibility": [
     "Visible button text should name the action; avoid relying on addon alone",
     "Loading sets aria-busy on the control while Spinner stays decorative",
@@ -16,11 +19,12 @@
   ],
   "antiPatterns": [
     "Using Button without children as icon-only — prefer IconButton",
+    "Using Button with render={<a />} for links — Base UI enforces button semantics; use ButtonLink",
     "Duplicating icon size on every addon slot — Button CSS sizes SVG descendants",
     "Mixing pill with custom border-radius overrides that fight data-pill styling",
     "Primary Chip addon inside a primary Button without data-theme=\"inverted\" — chip background matches the button fill and disappears"
   ],
-  "related": ["IconButton", "Icon", "Spinner", "Chip"],
+  "related": ["ButtonLink", "IconButton", "IconButtonLink", "Icon", "Spinner", "Chip"],
   "properties": {
     "css": {
       "background": {

package/dist/components/button/button.js

@@ -1,18 +1,11 @@
 import './button.css';
-import { clsx } from "../../core/clsx.js";
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
-import { Spinner } from "../spinner/spinner.js";
-import button_module_default from "./button.module.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ButtonChromeChildren, getButtonChromeRootAttrs } from "./button-chrome.js";
+import { jsx } from "react/jsx-runtime";
 import { Button } from "@base-ui/react/button";
 import { useRender } from "@base-ui/react/use-render";
 import * as React from "react";
 //#region src/components/button/button.tsx
-var spinnerDimensionsBySize = {
-	small: "small",
-	medium: "small",
-	big: "regular"
-};
 function usesButtonPrimitiveRender(render) {
 	return render === void 0 || React.isValidElement(render) && render.type === "button";
 }
@@ -37,18 +30,22 @@ var ButtonRenderRoot = ({ isDisabled, ref, render, rootProps }) => {
 	});
 };
 var ButtonRoot = ({ children, className, intrinsicAttributes, isDisabled, isIconOnly, addon, addonPosition, loading, passThroughProps, pill, ref, render, size, variant }) => {
+	const chromeAttrs = getButtonChromeRootAttrs({
+		addon,
+		addonPosition,
+		className: typeof className === "string" ? className : void 0,
+		isIconOnly,
+		loading,
+		pill,
+		size,
+		variant
+	});
 	const rootProps = {
 		...passThroughProps,
 		...intrinsicAttributes,
-		"aria-busy": loading || void 0,
-		children,
-		className: clsx(button_module_default.Button, className),
-		"data-loading": loading ? "true" : "false",
-		"data-pill": pill ? "true" : void 0,
-		"data-size": size,
-		"data-icon-only": isIconOnly ? "true" : void 0,
-		"data-addon-position": addon && !isIconOnly ? addonPosition : void 0,
-		"data-variant": variant
+		...chromeAttrs,
+		className: typeof className === "function" ? className : chromeAttrs.className,
+		children
 	};
 	if (usesButtonPrimitiveRender(render)) return /* @__PURE__ */ jsx(Button, {
 		...rootProps,
@@ -69,7 +66,7 @@ var Button$1 = ({ children, className, disabled, addon, addonPosition = "start",
 	const isIconOnly = Boolean(addon) && (children == null || children === "");
 	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
 	const { render, ref, ...passThroughProps } = componentProps;
-	return /* @__PURE__ */ jsxs(ButtonRoot, {
+	return /* @__PURE__ */ jsx(ButtonRoot, {
 		className,
 		intrinsicAttributes,
 		isDisabled,
@@ -83,25 +80,13 @@ var Button$1 = ({ children, className, disabled, addon, addonPosition = "start",
 		render,
 		size,
 		variant,
-		children: [isIconOnly ? /* @__PURE__ */ jsx("span", {
-			"aria-hidden": "true",
-			className: button_module_default.Content,
-			"data-loading": loading ? "true" : "false",
-			children: addon
-		}) : /* @__PURE__ */ jsxs(Fragment, { children: [addon && /* @__PURE__ */ jsx("span", {
-			"aria-hidden": "true",
-			className: button_module_default.Content,
-			"data-loading": loading ? "true" : "false",
-			children: addon
-		}), /* @__PURE__ */ jsx("span", {
-			className: button_module_default.Content,
-			"data-loading": loading ? "true" : "false",
+		children: /* @__PURE__ */ jsx(ButtonChromeChildren, {
+			addon,
+			isIconOnly,
+			loading,
+			size,
 			children
-		})] }), loading ? /* @__PURE__ */ jsx("span", {
-			"aria-hidden": "true",
-			className: button_module_default.SpinnerOverlay,
-			children: /* @__PURE__ */ jsx(Spinner, { size: spinnerDimensionsBySize[size] })
-		}) : null]
+		})
 	});
 };
 //#endregion

package/dist/components/button/index.d.ts

@@ -1,2 +1,4 @@
 export { Button } from './button';
 export type { ButtonProps } from './button';
+export { ButtonLink } from './button-link';
+export type { ButtonLinkProps } from './button-link';

package/dist/components/icon-button/icon-button-link.d.ts

@@ -0,0 +1,32 @@
+import { ButtonLinkProps } from '../button/button-link';
+import { ReactNode } from 'react';
+import * as React from 'react';
+type AccessibleNameProps = {
+    'aria-label': string;
+    'aria-labelledby'?: never;
+} | {
+    'aria-labelledby': string;
+    'aria-label'?: never;
+};
+/**
+ * Public IconButtonLink props.
+ *
+ * Typed wrapper over `ButtonLink` for icon-only navigation. Requires an accessible name
+ * via `aria-label` or `aria-labelledby`.
+ */
+export type IconButtonLinkProps = Omit<ButtonLinkProps, 'children' | 'addon' | 'addonPosition' | 'size'> & AccessibleNameProps & {
+    /**
+     * Controls the visual button size.
+     *
+     * @default 'medium'
+     */
+    size?: ButtonLinkProps['size'];
+    /**
+     * Icon rendered as the sole visible control content.
+     *
+     * @default No default; required for every IconButtonLink.
+     */
+    icon: ReactNode;
+};
+export declare const IconButtonLink: React.FC<IconButtonLinkProps>;
+export {};

package/dist/components/icon-button/icon-button-link.guide.json

@@ -0,0 +1,24 @@
+{
+  "name": "IconButtonLink",
+  "summary": "Icon-only navigation link that requires an accessible name; wraps ButtonLink.",
+  "whenToUse": [
+    "Compact toolbar or chrome navigation identified only by icon",
+    "Same size, variant, and loading model as IconButton without button semantics",
+    "Compose with framework Link via ButtonLink render prop"
+  ],
+  "whenNotToUse": [
+    "In-page icon actions that do not navigate — use IconButton",
+    "Labeled navigation — use ButtonLink",
+    "Missing both aria-label and aria-labelledby"
+  ],
+  "accessibility": [
+    "Provide aria-label or aria-labelledby on every IconButtonLink — icon alone is not a name",
+    "Renders a real link root so assistive tech get link role",
+    "disabled or loading sets aria-disabled and prevents activation"
+  ],
+  "antiPatterns": [
+    "Passing children, addon, or addonPosition — not part of the public API",
+    "Using IconButton with render={<a />} instead of IconButtonLink"
+  ],
+  "related": ["IconButton", "ButtonLink", "Button", "Icon", "Spinner"]
+}

package/dist/components/icon-button/icon-button-link.js

@@ -0,0 +1,11 @@
+import { ButtonLink } from "../button/button-link.js";
+import { jsx } from "react/jsx-runtime";
+import "react";
+//#region src/components/icon-button/icon-button-link.tsx
+var IconButtonLink = ({ icon, size = "medium", ...otherProps }) => /* @__PURE__ */ jsx(ButtonLink, {
+	addon: icon,
+	size,
+	...otherProps
+});
+//#endregion
+export { IconButtonLink };

package/dist/components/icon-button/icon-button.guide.json

@@ -6,7 +6,11 @@
     "Same size, variant, and loading model as Button without visible label",
     "Decorative glyph with explicit accessible naming on the root button"
   ],
-  "whenNotToUse": ["Actions that need visible text — use Button", "Missing both aria-label and aria-labelledby"],
+  "whenNotToUse": [
+    "Actions that need visible text — use Button",
+    "Missing both aria-label and aria-labelledby",
+    "Navigation or non-button semantics — use IconButtonLink"
+  ],
   "accessibility": [
     "Provide aria-label or aria-labelledby on every IconButton — icon alone is not a name",
     "Loading sets aria-busy on the control; Spinner is decorative",
@@ -14,7 +18,8 @@
   ],
   "antiPatterns": [
     "Passing children or addonPosition — not part of the public API",
-    "Using icon-only Button instead of IconButton"
+    "Using icon-only Button instead of IconButton",
+    "Using IconButton with render={<a />} for links — use IconButtonLink"
   ],
-  "related": ["Button", "Icon", "Spinner"]
+  "related": ["Button", "ButtonLink", "IconButtonLink", "Icon", "Spinner"]
 }

package/dist/components/icon-button/index.d.ts

@@ -1,2 +1,4 @@
 export { IconButton } from './icon-button';
 export type { IconButtonProps } from './icon-button';
+export { IconButtonLink } from './icon-button-link';
+export type { IconButtonLinkProps } from './icon-button-link';

package/dist/index.js

@@ -4,6 +4,7 @@ import { AvatarGroup } from "./components/avatar-group/avatar-group.js";
 import { Bleed } from "./components/bleed/bleed.js";
 import { Spinner } from "./components/spinner/spinner.js";
 import { Button } from "./components/button/button.js";
+import { ButtonLink } from "./components/button/button-link.js";
 import { Text } from "./components/text/text.js";
 import { Checkbox } from "./components/checkbox/checkbox.js";
 import { CheckboxGroup } from "./components/checkbox/checkbox-group.js";
@@ -22,6 +23,7 @@ import { Elevator } from "./components/elevator/elevator.js";
 import { Fieldset } from "./components/fieldset/fieldset.js";
 import { Icon } from "./components/icon/icon.js";
 import { IconButton } from "./components/icon-button/icon-button.js";
+import { IconButtonLink } from "./components/icon-button/icon-button-link.js";
 import { LinearProgress } from "./components/linear-progress/linear-progress.js";
 import { Masonry } from "./components/masonry/masonry.js";
 import { Meter } from "./components/meter/meter.js";
@@ -48,4 +50,4 @@ import { ToggleGroup } from "./components/toggle-group/toggle-group.js";
 import { Typewriter } from "./components/typewriter/typewriter.js";
 import { TooltipContent } from "./components/tooltip/tooltip-content.js";
 import { Tooltip, TooltipProvider, TooltipTrigger } from "./components/tooltip/tooltip.js";
-export { Accordion, Avatar, AvatarGroup, Bleed, Button, Checkbox, CheckboxGroup, Chip, ClampText, Dialog, DialogClose, DialogIndent, DialogIndentBackground, DialogSheet, DialogTrigger, ELEVATION_DEFAULTS, Elevator, Fieldset, Icon, IconButton, LinearProgress, Masonry, Meter, Popover, PopoverClose, PopoverDescription, PopoverSheet, PopoverTitle, PopoverTrigger, ProgressiveBlur, Radio, RadioGroup, Select, Separator, Shimmer, Skeleton, Slider, Spinner, Stack, StaticNoise, Surface, Switch, Tabs, Text, Textarea, Textfield, Title, Toast, ToggleButton, ToggleGroup, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typewriter, getElevationProps };
+export { Accordion, Avatar, AvatarGroup, Bleed, Button, ButtonLink, Checkbox, CheckboxGroup, Chip, ClampText, Dialog, DialogClose, DialogIndent, DialogIndentBackground, DialogSheet, DialogTrigger, ELEVATION_DEFAULTS, Elevator, Fieldset, Icon, IconButton, IconButtonLink, LinearProgress, Masonry, Meter, Popover, PopoverClose, PopoverDescription, PopoverSheet, PopoverTitle, PopoverTrigger, ProgressiveBlur, Radio, RadioGroup, Select, Separator, Shimmer, Skeleton, Slider, Spinner, Stack, StaticNoise, Surface, Switch, Tabs, Text, Textarea, Textfield, Title, Toast, ToggleButton, ToggleGroup, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typewriter, getElevationProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viraui/react",
-  "version": "0.0.28",
+  "version": "0.0.29",
   "private": false,
   "files": [
     "dist"
@@ -42,10 +42,10 @@
     "unplugin-dts": "1.0.3",
     "vite": "8.1.4",
     "vite-plugin-static-copy": "4.1.1",
+    "@viraui/foundation": "0.0.29",
     "@viraui/icons": "0.0.15",
-    "@viraui/foundation": "0.0.28",
-    "@viraui/tsconfig": "0.0.17",
-    "@viraui/postcss-config": "0.0.17"
+    "@viraui/postcss-config": "0.0.17",
+    "@viraui/tsconfig": "0.0.17"
   },
   "peerDependencies": {
     "@base-ui/react": ">=1.6.0",