@viraui/react 0.0.15 → 0.0.17

package/dist/catalog.json

@@ -56,6 +56,12 @@
       "summary": "Field-wrapped toggle control with regular or small track and optional field copy.",
       "guidePath": "./components/switch/switch.guide.json"
     },
+    {
+      "id": "checkbox",
+      "name": "Checkbox",
+      "summary": "Field-wrapped checkbox control with optional field copy.",
+      "guidePath": "./components/checkbox/checkbox.guide.json"
+    },
     {
       "id": "select",
       "name": "Select",

package/dist/components/avatar/avatar.css

@@ -1,55 +1 @@
-@scope (.Avatar) {
-  :scope {
-    --avatar-size: var(--space-2x-large);
-    --avatar-background: var(--global-contrast);
-    --avatar-foreground: var(--global-foreground);
-
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    inline-size: var(--avatar-size);
-    block-size: var(--avatar-size);
-    min-inline-size: var(--avatar-size);
-    min-block-size: var(--avatar-size);
-    overflow: hidden;
-    border-radius: var(--radius-infinite);
-    background: var(--avatar-background);
-    color: var(--avatar-foreground);
-    vertical-align: middle;
-    -webkit-user-select: none;
-    user-select: none;
-    container-name: viraui-avatar;
-    container-type: inline-size;
-
-    &[data-size='x-small'] {
-      --avatar-size: var(--space-large);
-    }
-
-    &[data-size='small'] {
-      --avatar-size: var(--space-2x-large);
-    }
-
-    &[data-size='regular'] {
-      --avatar-size: var(--space-wide);
-    }
-
-    &[data-size='big'] {
-      --avatar-size: var(--space-2x-wide);
-    }
-
-    > .Image,
-    > .SkeletonPlaceholder {
-      inline-size: 100%;
-      block-size: 100%;
-    }
-
-    > .Image {
-      display: block;
-      object-fit: cover;
-    }
-
-    > .Label {
-      font-size: 30cqw;
-    }
-  }
-}
+.avatar-module_Avatar_BRuS3{--avatar-size:var(--space-2x-large);--avatar-background:var(--global-contrast);--avatar-foreground:var(--global-foreground);display:inline-flex;align-items:center;justify-content:center;inline-size:var(--avatar-size);block-size:var(--avatar-size);min-inline-size:var(--avatar-size);min-block-size:var(--avatar-size);overflow:hidden;border-radius:var(--radius-infinite);background:var(--avatar-background);color:var(--avatar-foreground);vertical-align:middle;-webkit-user-select:none;user-select:none;container-name:viraui-avatar;container-type:inline-size;&[data-size=x-small]{--avatar-size:var(--space-large)}&[data-size=small]{--avatar-size:var(--space-2x-large)}&[data-size=regular]{--avatar-size:var(--space-wide)}&[data-size=big]{--avatar-size:var(--space-2x-wide)}}.avatar-module_Image_Q7bHi{inline-size:100%;block-size:100%;display:block;object-fit:cover}.avatar-module_Label_QASTF{font-size:30cqw}

package/dist/components/avatar/avatar.d.ts

@@ -1,6 +1,5 @@
-import type { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props.js';
+import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
 import type * as React from 'react';
-import './avatar.css';
 /**
  * Public Avatar props.
  *

package/dist/components/avatar/avatar.js

@@ -1,17 +1,52 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Avatar as PrimitiveAvatar } from '@base-ui/react/avatar';
-import { Skeleton, Text } from '../index.js';
-import { extractIntrinsicViraProps } from '../../core/props/intrinsic-vira-props.js';
-import { clsx } from 'clsx';
 import './avatar.css';
-const fallbackTextSizeByAvatarSize = {
-    'x-small': 'x-small',
-    small: 'x-small',
-    regular: 'small',
-    big: 'large',
+import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
+import avatar_module_default from "./avatar.module.js";
+import { Text } from "../text/text.js";
+import { Skeleton } from "../skeleton/skeleton.js";
+import { Avatar } from "@base-ui/react/avatar";
+import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/avatar/avatar.tsx
+var fallbackTextSizeByAvatarSize = {
+	"x-small": "x-small",
+	small: "x-small",
+	regular: "small",
+	big: "large"
 };
-export const Avatar = ({ alt = '', className, fallback, loading = false, ref, size = 'small', src, ...otherProps }) => {
-    const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
-    const hasImage = Boolean(src);
-    return (_jsx(PrimitiveAvatar.Root, { ...componentProps, ...intrinsicAttributes, ref: ref, "aria-busy": loading || undefined, className: clsx('Avatar', className), "data-has-image": hasImage ? 'true' : 'false', "data-loading": loading ? 'true' : 'false', "data-size": size, children: loading ? (_jsx(Skeleton, { minHeight: "100%", minWidth: "100%", radius: "infinite", width: "100%" })) : (_jsxs(_Fragment, { children: [hasImage ? (_jsx(PrimitiveAvatar.Image, { draggable: false, decoding: "async", loading: "eager", alt: alt, className: "Image", src: src })) : null, _jsx(PrimitiveAvatar.Fallback, { render: _jsx(Text, { className: "Label", whiteSpace: "nowrap", weight: "semibold", size: fallbackTextSizeByAvatarSize[size] }), children: fallback })] })) }));
+var Avatar$1 = ({ alt = "", className, fallback, loading = false, ref, size = "small", src, ...otherProps }) => {
+	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
+	const hasImage = Boolean(src);
+	return /* @__PURE__ */ jsx(Avatar.Root, {
+		...componentProps,
+		...intrinsicAttributes,
+		ref,
+		"aria-busy": loading || void 0,
+		className: clsx(avatar_module_default.Avatar, className),
+		"data-has-image": hasImage ? "true" : "false",
+		"data-loading": loading ? "true" : "false",
+		"data-size": size,
+		children: loading ? /* @__PURE__ */ jsx(Skeleton, {
+			minHeight: "100%",
+			minWidth: "100%",
+			radius: "infinite",
+			width: "100%"
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [hasImage ? /* @__PURE__ */ jsx(Avatar.Image, {
+			draggable: false,
+			decoding: "async",
+			loading: "eager",
+			alt,
+			className: avatar_module_default.Image,
+			src
+		}) : null, /* @__PURE__ */ jsx(Avatar.Fallback, {
+			render: /* @__PURE__ */ jsx(Text, {
+				className: avatar_module_default.Label,
+				whiteSpace: "nowrap",
+				weight: "semibold",
+				size: fallbackTextSizeByAvatarSize[size]
+			}),
+			children: fallback
+		})] })
+	});
 };
+//#endregion
+export { Avatar$1 as Avatar };

package/dist/components/avatar/avatar.module.js

@@ -0,0 +1,7 @@
+var avatar_module_default = {
+	Avatar: "avatar-module_Avatar_BRuS3",
+	Image: "avatar-module_Image_Q7bHi",
+	Label: "avatar-module_Label_QASTF"
+};
+//#endregion
+export { avatar_module_default as default };

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

@@ -1,2 +1,2 @@
-export { Avatar } from './avatar.js';
-export type { AvatarProps } from './avatar.js';
+export { Avatar } from './avatar';
+export type { AvatarProps } from './avatar';

package/dist/components/basic-input/basic-input.css

@@ -1,45 +1 @@
-@scope (.BasicInput) {
-  :scope {
-    --basic-input-background: var(--base-1);
-    --basic-input-color: var(--global-foreground);
-    --basic-input-placeholder-color: var(--global-disabled-foreground);
-    --basic-input-padding-inline: var(--space-small);
-    --basic-input-font-size: var(--font-scale-body-small);
-    --basic-input-border-radius: var(--radius-small);
-
-    box-sizing: border-box;
-    margin: 0;
-    inline-size: 100%;
-    min-inline-size: 0;
-    padding-inline: calc(var(--basic-input-padding-inline) + ((var(--basic-input-border-radius) + 0px) / 4));
-    font-family: inherit;
-    font-size: var(--basic-input-font-size);
-    font-variation-settings: 'wght' 400;
-    color: var(--basic-input-color);
-    background: var(--basic-input-background);
-    border: none;
-    border-radius: var(--basic-input-border-radius);
-    appearance: none;
-
-    /* Safari contacts autofill affordance: match input text color */
-    &::-webkit-contacts-auto-fill-button {
-      background-color: var(--basic-input-color);
-    }
-
-    &::placeholder {
-      color: var(--basic-input-placeholder-color);
-    }
-
-    &:disabled {
-      --basic-input-background: var(--global-disabled-background);
-      --basic-input-color: var(--global-disabled-foreground);
-      --basic-input-placeholder-color: var(--global-disabled-foreground);
-
-      cursor: not-allowed;
-    }
-
-    &[data-invalid] {
-      outline-color: oklab(from var(--highlight-red) l a b / 0.3);
-    }
-  }
-}
+.basic-input-module_BasicInput_5uE64{--basic-input-background:var(--base-1);--basic-input-color:var(--global-foreground);--basic-input-placeholder-color:var(--global-disabled-foreground);--basic-input-padding-inline:var(--space-small);--basic-input-font-size:var(--font-scale-body-small);--basic-input-border-radius:var(--radius-small);box-sizing:border-box;margin:0;inline-size:100%;min-inline-size:0;padding-inline:calc(var(--basic-input-padding-inline) + ((var(--basic-input-border-radius) + 0px) / 4));font-family:inherit;font-size:var(--basic-input-font-size);font-variation-settings:"wght" 400;color:var(--basic-input-color);background:var(--basic-input-background);border:none;border-radius:var(--basic-input-border-radius);appearance:none;&::-webkit-contacts-auto-fill-button{background-color:var(--basic-input-color)}&::placeholder{color:var(--basic-input-placeholder-color)}&:disabled{--basic-input-background:var(--global-disabled-background);--basic-input-color:var(--global-disabled-foreground);--basic-input-placeholder-color:var(--global-disabled-foreground);cursor:not-allowed}&[data-invalid]{outline-color:oklab(from var(--highlight-red) l a b/.3)}}

package/dist/components/basic-input/basic-input.d.ts

@@ -1,6 +1,5 @@
 import { Field } from '@base-ui/react/field';
 import * as React from 'react';
-import './basic-input.css';
 /**
  * Internal shared field control for Textfield and Textarea.
  *

package/dist/components/basic-input/basic-input.js

@@ -1,17 +1,28 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Field } from '@base-ui/react/field';
-import { Input as PrimitiveInput } from '@base-ui/react/input';
-import { clsx } from 'clsx';
-import * as React from 'react';
 import './basic-input.css';
+"use client";
+import basic_input_module_default from "./basic-input.module.js";
+import { clsx } from "clsx";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Field } from "@base-ui/react/field";
+import { Input } from "@base-ui/react/input";
+//#region src/components/basic-input/basic-input.tsx
 function usesInputPrimitiveRender(render) {
-    return React.isValidElement(render) && render.type === PrimitiveInput;
+	return React.isValidElement(render) && render.type === Input;
 }
-export const BasicInput = React.forwardRef(function BasicInput({ className, render, ...props }, ref) {
-    const mergedClassName = clsx('BasicInput', className);
-    if (usesInputPrimitiveRender(render)) {
-        return _jsx(PrimitiveInput, { ref: ref, className: mergedClassName, ...props });
-    }
-    return _jsx(Field.Control, { ref: ref, className: mergedClassName, render: render, ...props });
+var BasicInput = React.forwardRef(function BasicInput({ className, render, ...props }, ref) {
+	const mergedClassName = clsx(basic_input_module_default.BasicInput, className);
+	if (usesInputPrimitiveRender(render)) return /* @__PURE__ */ jsx(Input, {
+		ref,
+		className: mergedClassName,
+		...props
+	});
+	return /* @__PURE__ */ jsx(Field.Control, {
+		ref,
+		className: mergedClassName,
+		render,
+		...props
+	});
 });
+//#endregion
+export { BasicInput };

package/dist/components/basic-input/basic-input.module.js

@@ -0,0 +1,3 @@
+var basic_input_module_default = { BasicInput: "basic-input-module_BasicInput_5uE64" };
+//#endregion
+export { basic_input_module_default as default };

package/dist/components/basic-input/field-helper-copy.d.ts

@@ -1,5 +1,6 @@
 import type * as React from 'react';
 type FieldHelperCopyProps = {
+    className?: string | undefined;
     description?: React.ReactNode;
     error?: React.ReactNode;
 };
@@ -9,5 +10,5 @@ type FieldHelperCopyProps = {
  * `description` stays visible when invalid if `error` is omitted.
  * `validate` / native messages render through `Field.Error` when there is no `description`.
  */
-export declare function FieldHelperCopy({ description, error }: FieldHelperCopyProps): React.JSX.Element;
+export declare const FieldHelperCopy: React.FC<FieldHelperCopyProps>;
 export {};

package/dist/components/basic-input/field-helper-copy.js

@@ -1,25 +1,44 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Field } from '@base-ui/react/field';
-import { Text } from '../../components/text/index.js';
+"use client";
+import { Text } from "../text/text.js";
+import { jsx } from "react/jsx-runtime";
+import { Field } from "@base-ui/react/field";
+//#region src/components/basic-input/field-helper-copy.tsx
 /**
- * Renders field helper copy in the shared `Description` slot via `Field.Validity`.
- * Static `error` replaces `description` only while invalid and `error` is set.
- * `description` stays visible when invalid if `error` is omitted.
- * `validate` / native messages render through `Field.Error` when there is no `description`.
- */
-export function FieldHelperCopy({ description, error }) {
-    return (_jsx(Field.Validity, { children: (validity) => {
-            const isInvalid = validity.validity.valid === false;
-            if (isInvalid && error) {
-                return (_jsx(Field.Error, { className: "Description", match: true, render: _jsx(Text, { size: "x-small", tone: "danger" }), children: error }));
-            }
-            if (description) {
-                return (_jsx(Field.Description, { className: "Description", render: _jsx(Text, { size: "x-small", tone: "muted" }), children: description }));
-            }
-            if (isInvalid) {
-                return _jsx(Field.Error, { className: "Description", render: _jsx(Text, { size: "x-small", tone: "danger" }) });
-            }
-            return null;
-        } }));
-}
+* Renders field helper copy in the shared `Description` slot via `Field.Validity`.
+* Static `error` replaces `description` only while invalid and `error` is set.
+* `description` stays visible when invalid if `error` is omitted.
+* `validate` / native messages render through `Field.Error` when there is no `description`.
+*/
+var FieldHelperCopy = ({ className, description, error }) => /* @__PURE__ */ jsx(Field.Validity, { children: (validity) => {
+	const isInvalid = validity.validity.valid === false;
+	if (isInvalid && error) return /* @__PURE__ */ jsx(Field.Error, {
+		className,
+		match: true,
+		render: /* @__PURE__ */ jsx(Text, {
+			selection: false,
+			size: "x-small",
+			tone: "danger"
+		}),
+		children: error
+	});
+	if (description) return /* @__PURE__ */ jsx(Field.Description, {
+		className,
+		render: /* @__PURE__ */ jsx(Text, {
+			selection: false,
+			size: "x-small",
+			tone: "muted"
+		}),
+		children: description
+	});
+	if (isInvalid) return /* @__PURE__ */ jsx(Field.Error, {
+		className,
+		render: /* @__PURE__ */ jsx(Text, {
+			selection: false,
+			size: "x-small",
+			tone: "danger"
+		})
+	});
+	return null;
+} });
+//#endregion
+export { FieldHelperCopy };

package/dist/components/basic-input/field-label.css

@@ -0,0 +1 @@
+.field-label-module_FieldLabel_R9SYf{display:flex;flex-direction:column;align-items:stretch;inline-size:100%;padding-inline:var(--field-label-padding-inline,0)}

package/dist/components/basic-input/field-label.d.ts

@@ -0,0 +1,10 @@
+import type * as React from 'react';
+export type FieldLabelProps = React.ComponentProps<'span'>;
+/**
+ * Shared visible field label typography for Vira field components.
+ *
+ * Renders consistent `Text` styling. Pair with `Field.Label` at the field root when the
+ * label must associate with a control; choice inputs wrap `Field.Label` around the
+ * control and render this component for the visible label copy.
+ */
+export declare const FieldLabel: React.FC<FieldLabelProps>;

package/dist/components/basic-input/field-label.js

@@ -0,0 +1,24 @@
+import './field-label.css';
+"use client";
+import { Text } from "../text/text.js";
+import field_label_module_default from "./field-label.module.js";
+import { clsx } from "clsx";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/basic-input/field-label.tsx
+/**
+* Shared visible field label typography for Vira field components.
+*
+* Renders consistent `Text` styling. Pair with `Field.Label` at the field root when the
+* label must associate with a control; choice inputs wrap `Field.Label` around the
+* control and render this component for the visible label copy.
+*/
+var FieldLabel = ({ children, className }) => /* @__PURE__ */ jsx(Text, {
+	className: clsx(field_label_module_default.FieldLabel, className),
+	lineHeight: "small",
+	selection: false,
+	size: "small",
+	weight: "semibold",
+	children
+});
+//#endregion
+export { FieldLabel };

package/dist/components/basic-input/field-label.module.js

@@ -0,0 +1,3 @@
+var field_label_module_default = { FieldLabel: "field-label-module_FieldLabel_R9SYf" };
+//#endregion
+export { field_label_module_default as default };

package/dist/components/basic-input/index.d.ts

@@ -1,2 +1,7 @@
-export { BasicInput } from './basic-input.js';
-export type { BasicInputProps } from './basic-input.js';
+export { BasicInput } from './basic-input';
+export { FieldHelperCopy } from './field-helper-copy';
+export { FieldLabel } from './field-label';
+export { InputControlGroup } from './input-control-group';
+export type { BasicInputProps } from './basic-input';
+export type { FieldLabelProps } from './field-label';
+export type { InputControlGroupProps } from './input-control-group';

package/dist/components/basic-input/input-control-group.d.ts

@@ -1,5 +1,6 @@
 import type * as React from 'react';
 export type InputControlGroupProps = {
+    addonClassName: string | undefined;
     /**
      * Optional content rendered before the control (for example a currency prefix).
      *
@@ -18,6 +19,7 @@ export type InputControlGroupProps = {
      * @required
      */
     children: React.ReactNode;
+    controlGroupClassName: string | undefined;
 };
 /**
  * Internal flex wrapper for a field control plus optional start/end addons.

package/dist/components/basic-input/input-control-group.js

@@ -1,8 +1,41 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Stack } from '../index.js';
+"use client";
+import { Stack } from "../stack/stack.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/basic-input/input-control-group.tsx
 /**
- * Internal flex wrapper for a field control plus optional start/end addons.
- * Not exported from the package public surface.
- */
-export const InputControlGroup = ({ children, endAddon, startAddon }) => (_jsxs(Stack, { className: "ControlGroup", direction: "row", fillChildren: false, vAlign: "stretch", children: [startAddon && (_jsx(Stack, { className: "Addon", "data-position": "start", fillChildren: false, hAlign: "center", hPadding: ['small', 'x-small'], inline: true, shrink: false, vAlign: "center", children: startAddon })), children, endAddon && (_jsx(Stack, { className: "Addon", "data-position": "end", fillChildren: false, hAlign: "center", hPadding: "x-small", inline: true, shrink: false, vAlign: "center", children: endAddon }))] }));
+* Internal flex wrapper for a field control plus optional start/end addons.
+* Not exported from the package public surface.
+*/
+var InputControlGroup = ({ addonClassName, children, controlGroupClassName, endAddon, startAddon }) => /* @__PURE__ */ jsxs(Stack, {
+	className: controlGroupClassName,
+	direction: "row",
+	fillChildren: false,
+	vAlign: "stretch",
+	children: [
+		startAddon && /* @__PURE__ */ jsx(Stack, {
+			className: addonClassName,
+			"data-position": "start",
+			fillChildren: false,
+			hAlign: "center",
+			hPadding: ["small", "x-small"],
+			inline: true,
+			shrink: false,
+			vAlign: "center",
+			children: startAddon
+		}),
+		children,
+		endAddon && /* @__PURE__ */ jsx(Stack, {
+			className: addonClassName,
+			"data-position": "end",
+			fillChildren: false,
+			hAlign: "center",
+			hPadding: "x-small",
+			inline: true,
+			shrink: false,
+			vAlign: "center",
+			children: endAddon
+		})
+	]
+});
+//#endregion
+export { InputControlGroup };

package/dist/components/button/button.css

@@ -1,156 +1 @@
-@scope (.Button) {
-  :scope {
-    --button-background: var(--global-primary);
-    --button-color: var(--base-1);
-    --button-height: var(--space-2x-large);
-    --button-padding-inline: var(--space-medium);
-    --button-padding-block: var(--space-small);
-    --button-spinner-color: currentColor;
-    --button-icon-size: 1em;
-
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    user-select: none;
-    margin: 0;
-    cursor: pointer;
-    font-family: inherit;
-    display: inline-flex;
-    align-items: center;
-    min-inline-size: min-content;
-    max-block-size: var(--button-height);
-    block-size: var(--button-height);
-    justify-content: center;
-    text-decoration: none;
-    white-space: nowrap;
-    appearance: button;
-    overflow: hidden;
-    position: relative;
-    padding: var(--button-padding-block) var(--button-padding-inline);
-    font-variation-settings: 'wght' 500;
-    gap: var(--space-small);
-    border: 1px solid transparent;
-    background: var(--button-background);
-    color: var(--button-color);
-    font-size: var(--font-scale-body-medium);
-    border-radius: var(--radius-small);
-    transition: translate var(--easing-elastic) var(--duration-instant);
-    background-clip: padding-box;
-    will-change: translate;
-
-    /* Pressed: nudge label/icon down when enabled */
-    &:not(:disabled):active {
-      translate: 0 1px;
-    }
-
-    &[data-size='medium'] {
-      --button-height: var(--space-x-large);
-      --button-padding-inline: var(--space-small);
-      --button-padding-block: var(--space-small);
-      --button-icon-size: 0.9em;
-      gap: var(--space-x-small);
-    }
-
-    &[data-size='small'] {
-      --button-height: var(--space-large);
-      --button-padding-inline: var(--space-small);
-      --button-padding-block: var(--space-x-small);
-      --button-icon-size: 0.9em;
-      gap: var(--space-x-small);
-      font-size: var(--font-scale-body-small);
-    }
-
-    &[data-variant='primary'] {
-      --button-background: var(--global-primary);
-      --button-color: contrast-color(var(--global-primary));
-    }
-
-    &[data-variant='secondary'] {
-      --button-background: var(--global-contrast);
-      --button-color: var(--base-6);
-      background-clip: unset;
-
-      &:hover {
-        --button-background: oklab(from var(--global-contrast) l a b / calc(alpha + 0.05));
-      }
-    }
-
-    &[data-variant='flat'] {
-      --button-background: transparent;
-      --button-color: var(--base-5);
-
-      &:hover {
-        --button-background: var(--base-1);
-        --button-color: var(--base-7);
-      }
-    }
-
-    &[data-variant='destructive'] {
-      --button-background: oklab(from var(--highlight-red) l a b / 20%);
-      --button-color: var(--highlight-red);
-
-      &:hover {
-        --button-background: oklab(from var(--highlight-red) l a b / 30%);
-      }
-    }
-
-    &[data-icon-position='start'] {
-      flex-direction: row;
-    }
-
-    &[data-icon-position='end'] {
-      flex-direction: row-reverse;
-    }
-
-    &[data-icon-only='true'] {
-      gap: 0;
-      padding-block: var(--button-padding-block);
-      padding-inline: var(--button-padding-block);
-      inline-size: var(--button-height);
-      min-inline-size: var(--button-height);
-      max-inline-size: var(--button-height);
-      aspect-ratio: 1 / 1;
-    }
-
-    /* Disabled: override variant/hover tokens; aria-disabled for non-native disabled buttons */
-    &:disabled,
-    &:disabled:hover,
-    &[aria-disabled='true'] {
-      --button-background: var(--global-disabled-background);
-      --button-color: var(--global-disabled-foreground);
-
-      cursor: not-allowed;
-      box-shadow: none;
-    }
-
-    &[data-loading='true'][data-disabled] {
-      pointer-events: none;
-      border: 0;
-      box-shadow: none;
-      --button-color: var(--base-7);
-    }
-
-    > .Content {
-      display: inline-grid;
-      place-items: center;
-
-      /* Loading: hide label/icon in Content while SpinnerOverlay stays visible */
-      &[data-loading='true'] {
-        opacity: 0;
-      }
-
-      &:first-child > svg {
-        block-size: var(--button-icon-size);
-        inline-size: var(--button-icon-size);
-        flex-shrink: 0;
-      }
-    }
-
-    > .SpinnerOverlay {
-      position: absolute;
-      inset: 0;
-      display: grid;
-      place-content: center;
-      pointer-events: none;
-    }
-  }
-}
+.button-module_Button_oPhrP{--button-background:var(--global-primary);--button-color:var(--base-1);--button-height:var(--space-2x-large);--button-padding-inline:var(--space-medium);--button-padding-block:var(--space-small);--button-spinner-color:currentColor;--button-icon-size:1.125em;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;margin:0;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;min-inline-size:min-content;max-block-size:var(--button-height);block-size:var(--button-height);justify-content:center;text-decoration:none;white-space:nowrap;appearance:button;overflow:hidden;position:relative;padding:var(--button-padding-block) var(--button-padding-inline);font-weight:400;font-variation-settings:"wght" 400;gap:var(--space-small);border:1px solid transparent;background:var(--button-background);color:var(--button-color);font-size:var(--font-scale-body-medium);border-radius:var(--radius-small);transition:translate var(--easing-elastic) var(--duration-instant);background-clip:padding-box;will-change:translate;&:not(:disabled):active{translate:0 1px}&[data-size=medium]{--button-height:var(--space-x-large);--button-padding-inline:var(--space-small);--button-padding-block:var(--space-small);--button-icon-size:1.125em;gap:var(--space-x-small)}&[data-size=small]{--button-height:var(--space-large);--button-padding-inline:var(--space-small);--button-padding-block:var(--space-x-small);--button-icon-size:0.9em;gap:var(--space-x-small);font-size:var(--font-scale-body-small)}&[data-variant=primary]{--button-background:var(--global-primary);--button-color:contrast-color(var(--global-primary))}&[data-variant=secondary]{--button-background:var(--global-contrast);--button-color:var(--base-6);background-clip:unset;&:hover{--button-background:oklab(from var(--global-contrast) l a b/calc(alpha + 0.05))}}&[data-variant=flat]{--button-background:transparent;--button-color:var(--base-5);&:hover{--button-background:var(--base-1);--button-color:var(--base-7)}}&[data-variant=destructive]{--button-background:oklab(from var(--highlight-red) l a b/20%);--button-color:var(--highlight-red);&:hover{--button-background:oklab(from var(--highlight-red) l a b/30%)}}&[data-icon-position=start]{flex-direction:row}&[data-icon-position=end]{flex-direction:row-reverse}&[data-icon-only=true]{gap:0;padding-block:var(--button-padding-block);padding-inline:var(--button-padding-block);inline-size:var(--button-height);min-inline-size:var(--button-height);max-inline-size:var(--button-height);aspect-ratio:1/1}&:disabled,&:disabled:hover,&[aria-disabled=true]{--button-background:var(--global-disabled-background);--button-color:var(--global-disabled-foreground);cursor:not-allowed;box-shadow:none}&[data-loading=true][data-disabled]{pointer-events:none;border:0;box-shadow:none;--button-color:var(--base-7)}}.button-module_Content_w-pX-{display:inline-grid;place-items:center;&[data-loading=true]{opacity:0}&:first-child>svg{block-size:var(--button-icon-size);inline-size:var(--button-icon-size);flex-shrink:0}}.button-module_SpinnerOverlay_vKqw1{position:absolute;inset:0;display:grid;place-content:center;pointer-events:none}

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

@@ -1,7 +1,7 @@
 import { Button as PrimitiveButton } from '@base-ui/react/button';
-import './button.css';
-import type { ReactNode } from 'react';
-import type { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props.js';
+import { ReactNode } from 'react';
+import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
+import * as React from 'react';
 /**
  * Public Button props.
  *