@viraui/react 0.0.18 → 0.0.20

package/dist/catalog.json

@@ -8,6 +8,18 @@
       "summary": "Circular identity image or fallback for users, entities, or profile chips.",
       "guidePath": "./components/avatar/avatar.guide.json"
     },
+    {
+      "id": "avatar-group",
+      "name": "AvatarGroup",
+      "summary": "Overlapping avatar stack with shared sizing, directional layout, and an optional overflow pill.",
+      "guidePath": "./components/avatar-group/avatar-group.guide.json"
+    },
+    {
+      "id": "chip",
+      "name": "Chip",
+      "summary": "Compact visual label primitive for short status, category, or metadata treatments.",
+      "guidePath": "./components/chip/chip.guide.json"
+    },
     {
       "id": "clamp-text",
       "name": "ClampText",
@@ -38,6 +50,12 @@
       "summary": "Shows determinate or indeterminate progress for a task in a compact horizontal track.",
       "guidePath": "./components/linear-progress/linear-progress.guide.json"
     },
+    {
+      "id": "masonry",
+      "name": "Masonry",
+      "summary": "Multi-column layout primitive for read-only mixed-height content walls.",
+      "guidePath": "./components/masonry/masonry.guide.json"
+    },
     {
       "id": "textfield",
       "name": "Textfield",

package/dist/components/avatar/avatar.css

@@ -1 +1 @@
-.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}
+.avatar-module_Avatar_BRuS3{--avatar-size:var(--space-2x-large);--avatar-background:var(--global-contrast);--avatar-foreground:var(--global-foreground);--avatar-radius:var(--radius-infinite);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(--avatar-radius);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

@@ -8,7 +8,7 @@ import type * as React from 'react';
  *
  * @default Native span pass-through props keep React defaults.
  */
-export type AvatarProps = React.ComponentPropsWithoutRef<'span'> & IntrinsicViraProps & {
+export type AvatarProps = React.ComponentPropsWithRef<'span'> & IntrinsicViraProps & {
     /**
      * Supplies the avatar image source URL.
      *

package/dist/components/avatar/avatar.js

@@ -25,6 +25,8 @@ var Avatar$1 = ({ alt = "", className, fallback, loading = false, ref, size = "s
 		"data-has-image": hasImage ? "true" : "false",
 		"data-loading": loading ? "true" : "false",
 		"data-size": size,
+		"data-grow": false,
+		"data-shrink": false,
 		children: loading ? /* @__PURE__ */ jsx(Skeleton, {
 			minHeight: "100%",
 			minWidth: "100%",

package/dist/components/avatar-group/avatar-group.css

@@ -0,0 +1 @@
+.avatar-group-module_AvatarGroup_zOrR-{--avatar-size:var(--space-2x-large);--avatar-overlap-distance:var(--space-medium);--avatar-group-gap-size:var(--space-x-small);--avatar-mask-anti-alias-size:0.5px;--avatar-mask-radius:calc((var(--avatar-size) / 2) + var(--avatar-group-gap-size));display:inline-flex;flex-wrap:nowrap;align-items:flex-start;min-inline-size:max-content;vertical-align:middle;&[data-direction=horizontal]{flex-direction:row}&[data-direction=vertical]{flex-direction:column}&[data-size=x-small]{--avatar-size:var(--space-large);--avatar-overlap-distance:var(--space-x-small)}&[data-size=small]{--avatar-size:var(--space-2x-large);--avatar-overlap-distance:var(--space-small)}&[data-size=regular]{--avatar-size:var(--space-wide);--avatar-overlap-distance:var(--space-medium)}&[data-size=big]{--avatar-size:var(--space-2x-wide);--avatar-overlap-distance:var(--space-large)}}.avatar-group-module_AvatarWrapper_0opqY{position:relative;display:inline-flex;flex:0 0 auto;inline-size:var(--avatar-size);block-size:var(--avatar-size);.avatar-group-module_AvatarGroup_zOrR-[data-direction=horizontal] &:not(:first-child){margin-inline-start:calc(var(--avatar-overlap-distance) * -1)}.avatar-group-module_AvatarGroup_zOrR-[data-direction=vertical] &:not(:first-child){margin-block-start:calc(var(--avatar-overlap-distance) * -1)}.avatar-group-module_AvatarGroup_zOrR-:dir(ltr)[data-direction=horizontal] &:not(:last-child){mask-image:radial-gradient(circle var(--avatar-mask-radius) at calc(100% + (var(--avatar-size) / 2) - var(--avatar-overlap-distance)) 50%,transparent calc(var(--avatar-mask-radius) - var(--avatar-mask-anti-alias-size)),#000 calc(var(--avatar-mask-radius) + var(--avatar-mask-anti-alias-size)))}.avatar-group-module_AvatarGroup_zOrR-:dir(rtl)[data-direction=horizontal] &:not(:last-child){mask-image:radial-gradient(circle var(--avatar-mask-radius) at calc((var(--avatar-size) / 2) - var(--avatar-overlap-distance)) 50%,transparent calc(var(--avatar-mask-radius) - var(--avatar-mask-anti-alias-size)),#000 calc(var(--avatar-mask-radius) + var(--avatar-mask-anti-alias-size)))}.avatar-group-module_AvatarGroup_zOrR-[data-direction=vertical] &:not(:last-child){mask-image:radial-gradient(circle var(--avatar-mask-radius) at 50% calc(100% + (var(--avatar-size) / 2) - var(--avatar-overlap-distance)),transparent calc(var(--avatar-mask-radius) - var(--avatar-mask-anti-alias-size)),#000 calc(var(--avatar-mask-radius) + var(--avatar-mask-anti-alias-size)))}}.avatar-group-module_OverflowWrapper_bKv6I{inline-size:auto;min-inline-size:var(--avatar-size)}.avatar-group-module_AvatarGroupItem_Vvlyh{--avatar-radius:100%;corner-shape:unset}.avatar-group-module_OverflowPill_nMmTD{display:inline-flex;align-items:center;justify-content:center;min-inline-size:var(--avatar-size);block-size:var(--avatar-size);min-block-size:var(--avatar-size);corner-shape:unset}

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

@@ -0,0 +1,55 @@
+import { AvatarProps } from '..';
+import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
+import { ThemeTypes } from '@viraui/foundation/vira/types';
+import type * as React from 'react';
+type AvatarGroupAvatarProps = Omit<AvatarProps, 'size' | 'ref'>;
+/**
+ * Public AvatarGroup props.
+ *
+ * Includes standard `div` attributes such as `id`, `role`, `title`, data attributes, and event handlers,
+ * plus Vira-owned avatar composition controls.
+ *
+ * @default Native div pass-through props keep React defaults.
+ */
+export type AvatarGroupProps = React.ComponentPropsWithRef<'div'> & IntrinsicViraProps & {
+    /**
+     * Supplies the avatar payloads rendered by the group in DOM order.
+     *
+     * @default No default; consumers must provide an array.
+     */
+    avatars: AvatarGroupAvatarProps[];
+    /**
+     * Selects the shared avatar footprint for every rendered avatar.
+     *
+     * @default 'small'
+     */
+    size?: AvatarProps['size'];
+    /**
+     * Chooses whether avatars overlap across the inline or block axis.
+     *
+     * @default 'horizontal'
+     */
+    direction?: 'horizontal' | 'vertical';
+    /**
+     * Sets the empty visual separation preserved inside the overlap cutout.
+     *
+     * @default 'x-small'
+     */
+    gap?: Extract<ThemeTypes['space'], '2x-small' | 'x-small' | 'small'>;
+    /**
+     * Limits how many real avatars render before the optional overflow pill is appended.
+     *
+     * Omitted, zero, and negative values are ignored.
+     *
+     * @default No truncation.
+     */
+    maxVisible?: number;
+    /**
+     * Supplies the content rendered inside the optional overflow pill when truncation is active.
+     *
+     * @default No overflow pill content.
+     */
+    overflowText?: React.ReactNode;
+};
+export declare const AvatarGroup: React.FC<AvatarGroupProps>;
+export {};

package/dist/components/avatar-group/avatar-group.guide.json

@@ -0,0 +1,22 @@
+{
+  "name": "AvatarGroup",
+  "summary": "Overlapping avatar stack with shared sizing, directional layout, and an optional overflow pill.",
+  "whenToUse": [
+    "Show a compact list of people or entities with consistent avatar sizing",
+    "Display overlapping circular identity clusters in horizontal or vertical layouts",
+    "Collapse long avatar lists into a final overflow pill such as +15 or +9938"
+  ],
+  "whenNotToUse": ["Interactive chip collections that need per-item actions", "Mixed avatar sizes inside one group"],
+  "accessibility": [
+    "Provide meaningful alt text on each avatar image when identity matters",
+    "Treat overflow content such as +3 or +9938 as summary text rather than an interactive affordance",
+    "Keep decorative avatars on empty alt text when the surrounding context already labels the group"
+  ],
+  "antiPatterns": [
+    "Passing per-avatar size values instead of using the group size prop",
+    "Expecting AvatarGroup to derive hidden-count labels instead of passing overflowText directly",
+    "Expecting grouped avatars to follow theme radius tokens instead of always rendering as circles",
+    "Using non-positive maxVisible values expecting truncation"
+  ],
+  "related": ["Avatar"]
+}

package/dist/components/avatar-group/avatar-group.js

@@ -0,0 +1,61 @@
+import './avatar-group.css';
+import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
+import { Avatar } from "../avatar/avatar.js";
+import { resolveThemeValue } from "../../core/theme/resolve-theme-value.js";
+import avatar_group_module_default from "./avatar-group.module.js";
+import { Stack } from "../stack/stack.js";
+import { Text } from "../text/text.js";
+import { Surface } from "../surface/surface.js";
+import { clsx } from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/avatar-group/avatar-group.tsx
+var getAvatarKey = (avatar, index) => `${avatar.src ?? "fallback"}-${typeof avatar.fallback === "string" ? avatar.fallback : "node"}-${index}`;
+var AvatarGroup = ({ avatars, className, direction = "horizontal", gap = "x-small", maxVisible, overflowText, size = "small", style, ...otherProps }) => {
+	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
+	const isOverflowing = typeof maxVisible === "number" && maxVisible > 0 && avatars.length > maxVisible;
+	const hasOverflow = isOverflowing && overflowText !== void 0 && overflowText !== null;
+	const truncatedAvatars = isOverflowing ? avatars.slice(0, maxVisible) : avatars;
+	const dynamicStyle = {
+		"--avatar-group-gap-size": resolveThemeValue(gap, "space", "var(--space-x-small)"),
+		...style
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		...componentProps,
+		...intrinsicAttributes,
+		className: clsx(avatar_group_module_default.AvatarGroup, className),
+		"data-direction": direction,
+		"data-gap": gap,
+		"data-has-overflow": hasOverflow ? "true" : "false",
+		"data-size": size,
+		style: dynamicStyle,
+		children: [truncatedAvatars.map((avatar, index) => /* @__PURE__ */ jsx("div", {
+			className: avatar_group_module_default.AvatarWrapper,
+			children: /* @__PURE__ */ jsx(Avatar, {
+				className: avatar_group_module_default.AvatarGroupItem,
+				...avatar,
+				size
+			})
+		}, getAvatarKey(avatar, index))), hasOverflow && /* @__PURE__ */ jsx("div", {
+			className: clsx(avatar_group_module_default.AvatarWrapper, avatar_group_module_default.OverflowWrapper),
+			children: /* @__PURE__ */ jsx(Surface, {
+				className: avatar_group_module_default.OverflowPill,
+				color: 3,
+				render: /* @__PURE__ */ jsx(Stack, {
+					inline: true,
+					direction: "row",
+					fillChildren: false,
+					hAlign: "center",
+					vAlign: "center",
+					hPadding: "medium"
+				}),
+				style: { "--surface-border-radius": "1e5px" },
+				children: /* @__PURE__ */ jsx(Text, {
+					whiteSpace: "nowrap",
+					children: overflowText
+				})
+			})
+		})]
+	});
+};
+//#endregion
+export { AvatarGroup };

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

@@ -0,0 +1,9 @@
+var avatar_group_module_default = {
+	AvatarGroup: "avatar-group-module_AvatarGroup_zOrR-",
+	AvatarWrapper: "avatar-group-module_AvatarWrapper_0opqY",
+	OverflowWrapper: "avatar-group-module_OverflowWrapper_bKv6I",
+	AvatarGroupItem: "avatar-group-module_AvatarGroupItem_Vvlyh",
+	OverflowPill: "avatar-group-module_OverflowPill_nMmTD"
+};
+//#endregion
+export { avatar_group_module_default as default };

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

@@ -0,0 +1,2 @@
+export { AvatarGroup } from './avatar-group';
+export type { AvatarGroupProps } from './avatar-group';

package/dist/components/checkbox/checkbox.css

@@ -1 +1 @@
-.checkbox-module_Checkbox_3oGip{--checkbox-size:var(--space-medium);--checkbox-radius:var(--radius-x-small);--checkbox-background:var(--global-contrast);--checkbox-border-color:transparent;--checkbox-indicator-color:contrast-color(var(--global-primary));&:has([required]) [data-field-label]:after{content:" ＊";color:var(--highlight-red)}}.checkbox-module_CheckboxRoot_PeyF5{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;appearance:none;border:0;box-shadow:inset 0 0 0 1px var(--checkbox-border-color);inline-size:var(--checkbox-size);block-size:var(--checkbox-size);background:var(--checkbox-background);border-radius:var(--checkbox-radius);&[data-size=regular]{--checkbox-size:var(--space-large);--checkbox-radius:var(--radius-small)}&[data-checked]:not([data-disabled]):not([data-invalid]),&[data-indeterminate]:not([data-disabled]):not([data-invalid]){--checkbox-background:var(--global-primary);--checkbox-border-color:var(--global-primary);box-shadow:none}&[data-invalid]:not([data-disabled]),.checkbox-module_Checkbox_3oGip[data-invalid]>&:not([data-disabled]){--checkbox-border-color:var(--highlight-red);--checkbox-indicator-color:var(--global-primary);box-shadow:inset 0 0 0 1px var(--highlight-red);outline-color:oklab(from var(--highlight-red) l a b/.5)}&[data-disabled],.checkbox-module_Checkbox_3oGip[data-disabled]>&{--checkbox-background:var(--global-disabled-background);--checkbox-border-color:transparent;--checkbox-indicator-color:var(--global-disabled-foreground);box-shadow:none}}.checkbox-module_Indicator_C-k-l{display:inline-flex;align-items:center;justify-content:center;color:var(--checkbox-indicator-color)}.checkbox-module_Icon_926Sa{stroke:currentColor}.checkbox-module_CheckboxRoot_PeyF5:not([data-indeterminate]) .checkbox-module_MinusIcon_Q57pY,.checkbox-module_CheckboxRoot_PeyF5[data-indeterminate] .checkbox-module_CheckIcon_XqUcs{display:none}.checkbox-module_CheckboxRoot_PeyF5[data-indeterminate] .checkbox-module_MinusIcon_Q57pY{display:inline-flex}
+.checkbox-module_Checkbox_3oGip{--checkbox-size:var(--space-medium);--checkbox-radius:var(--radius-x-small);--checkbox-background:var(--global-contrast);--checkbox-border-color:transparent;--checkbox-indicator-color:contrast-color(var(--global-primary));&:has([required]) [data-field-label]:after{content:" ＊";color:var(--highlight-red)}}.checkbox-module_CheckboxRoot_PeyF5{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;appearance:none;border:0;box-shadow:inset 0 0 0 1px var(--checkbox-border-color);inline-size:var(--checkbox-size);block-size:var(--checkbox-size);background:var(--checkbox-background);border-radius:var(--checkbox-radius);&[data-size=regular]{--checkbox-size:var(--space-large);--checkbox-radius:var(--radius-small)}&[data-checked]:not([data-disabled]):not([data-invalid]),&[data-indeterminate]:not([data-disabled]):not([data-invalid]){--checkbox-background:var(--global-primary);--checkbox-border-color:var(--global-primary);box-shadow:none}&[data-invalid]:not([data-disabled]),.checkbox-module_Checkbox_3oGip[data-invalid]>&:not([data-disabled]){--checkbox-border-color:var(--highlight-red);--checkbox-indicator-color:var(--global-primary);box-shadow:inset 0 0 0 1px var(--highlight-red);outline-color:oklab(from var(--highlight-red) l a b/.5)}&[data-disabled],.checkbox-module_Checkbox_3oGip[data-disabled]>&{--checkbox-background:var(--global-disabled-background);--checkbox-border-color:transparent;--checkbox-indicator-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.checkbox-module_Indicator_C-k-l{display:inline-flex;align-items:center;justify-content:center;color:var(--checkbox-indicator-color)}.checkbox-module_Icon_926Sa{stroke:currentColor}.checkbox-module_CheckboxRoot_PeyF5:not([data-indeterminate]) .checkbox-module_MinusIcon_Q57pY,.checkbox-module_CheckboxRoot_PeyF5[data-indeterminate] .checkbox-module_CheckIcon_XqUcs{display:none}.checkbox-module_CheckboxRoot_PeyF5[data-indeterminate] .checkbox-module_MinusIcon_Q57pY{display:inline-flex}

package/dist/components/checkbox/checkbox.js

@@ -1,9 +1,9 @@
 "use client";
 import './checkbox.css';
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
+import { Stack } from "../stack/stack.js";
 import { FieldHelperCopy } from "../basic-input/field-helper-copy.js";
 import { FieldLabel } from "../basic-input/field-label.js";
-import { Stack } from "../stack/stack.js";
 import checkbox_module_default from "./checkbox.module.js";
 import { Icon } from "../icon/icon.js";
 import { clsx } from "clsx";

package/dist/components/chip/chip.css

@@ -0,0 +1 @@
+.chip-module_Chip_2D18T{--chip-background:var(--global-primary);--chip-border-color:transparent;--chip-color:contrast-color(var(--global-primary));--chip-height:var(--space-large);--chip-icon-size:0.9em;--chip-color-bg-opacity:13%;--chip-color-border-opacity:0%;min-block-size:var(--chip-height);block-size:var(--chip-height);border:1px solid var(--chip-border-color);border-radius:var(--radius-infinite);background:var(--chip-background);color:var(--chip-color);font-size:var(--font-scale-body-small);font-variation-settings:"wght" 400;text-decoration:none;white-space:nowrap;overflow:hidden;&[data-variant=primary]{--chip-background:var(--global-primary);--chip-color:contrast-color(var(--global-primary))}&[data-variant=secondary]{--chip-background:var(--global-contrast);--chip-color:var(--base-6)}&[data-variant=outline]{--chip-background:transparent;--chip-border-color:oklab(from var(--global-contrast) l a b/0.2);--chip-color:var(--base-6)}&[data-variant=gray]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-gray)}&[data-variant=slate]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-slate)}&[data-variant=yellow]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-yellow)}&[data-variant=green]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-green)}&[data-variant=blue]{--chip-color:var(--highlight-blue)}&[data-variant=blue],&[data-variant=red]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity))}&[data-variant=red]{--chip-color:var(--highlight-red)}&[data-variant=cyan]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-cyan)}&[data-variant=purple]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-purple)}&[data-variant=indigo]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-indigo)}&[data-variant=acid]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-acid)}&[data-variant=salmon]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-salmon)}&[data-variant=magenta]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-magenta)}}.chip-module_Content_7mLuL{min-inline-size:0;min-block-size:100%}.chip-module_IconSlot_9N5vD{display:inline-grid;place-items:center;flex-shrink:0;>svg{inline-size:var(--chip-icon-size);block-size:var(--chip-icon-size)}}.chip-module_Label_Hdx7l{display:inline-block;min-inline-size:0;overflow:hidden;text-overflow:ellipsis}

package/dist/components/chip/chip.d.ts

@@ -0,0 +1,46 @@
+import { useRender } from '@base-ui/react/use-render';
+import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
+import { ThemeTypes } from '@viraui/foundation/vira/types';
+import { ReactNode } from 'react';
+import * as React from 'react';
+/**
+ * Public Chip props.
+ *
+ * Includes standard `div` attributes such as `children`, `id`, `title`, and event handlers,
+ * plus Vira-owned visual variant, decorative addon, and Base UI `render` support for replacing the root element.
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type ChipProps = React.ComponentPropsWithRef<'div'> & IntrinsicViraProps & {
+    /**
+     * Replaces the default `div` root using Base UI render semantics.
+     *
+     * @default The chip renders a `div` root.
+     */
+    render?: useRender.RenderProp;
+    /**
+     * Ref forwarded to the rendered chip root element.
+     *
+     * @default No ref is attached.
+     */
+    ref?: React.Ref<HTMLElement>;
+    /**
+     * Selects the visual treatment for the chip.
+     *
+     * @default 'primary'
+     */
+    variant?: 'primary' | 'secondary' | 'outline' | ThemeTypes['highlight'];
+    /**
+     * Decorative addon rendered alongside the chip label.
+     *
+     * @default No default; omit when the chip has no addon.
+     */
+    addon?: ReactNode;
+    /**
+     * Controls whether the addon appears before or after the label.
+     *
+     * @default 'start'
+     */
+    addonPosition?: 'start' | 'end';
+};
+export declare const Chip: React.FC<ChipProps>;

package/dist/components/chip/chip.guide.json

@@ -0,0 +1,26 @@
+{
+  "name": "Chip",
+  "summary": "Compact visual label primitive for short status, category, or metadata treatments.",
+  "whenToUse": [
+    "Short, non-interactive labels that need a compact pill treatment",
+    "Metadata, category, status, or inline tag-like presentation",
+    "Color-coded badges using the semantic highlight palette",
+    "Polymorphic label content that should render as div by default or as another semantic tag through render"
+  ],
+  "whenNotToUse": [
+    "Interactive actions or dismiss controls — use Button or IconButton",
+    "Long-form text content that should wrap like body copy — use Text"
+  ],
+  "accessibility": [
+    "Chip renders a div by default, so choose render explicitly when a different semantic element is needed",
+    "Decorative addons are aria-hidden and should not carry the accessible name",
+    "Chip does not add button semantics, disabled state, or loading behavior in v1"
+  ],
+  "antiPatterns": [
+    "Using Chip as a button replacement for clickable actions",
+    "Expecting addonPosition to have any effect when addon is omitted",
+    "Introducing custom size variants instead of the fixed compact height",
+    "Re-adding a one-off destructive variant instead of using the red highlight color"
+  ],
+  "related": ["Button", "Icon", "IconButton", "Stack", "Text"]
+}

package/dist/components/chip/chip.js

@@ -0,0 +1,48 @@
+"use client";
+import './chip.css';
+import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
+import { Stack } from "../stack/stack.js";
+import chip_module_default from "./chip.module.js";
+import { clsx } from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+import "react";
+//#region src/components/chip/chip.tsx
+var Chip = ({ addon, addonPosition = "start", children, className, ref, render, variant = "primary", ...otherProps }) => {
+	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
+	const content = /* @__PURE__ */ jsxs(Stack, {
+		inline: true,
+		direction: addonPosition === "start" ? "row" : "row-reverse",
+		vAlign: "center",
+		fillChildren: false,
+		hPadding: "small",
+		columnGap: "x-small",
+		className: chip_module_default.Content,
+		children: [addon && /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: chip_module_default.IconSlot,
+			children: addon
+		}), /* @__PURE__ */ jsx("span", {
+			className: chip_module_default.Label,
+			children
+		})]
+	});
+	return useRender({
+		defaultTagName: "div",
+		render,
+		ref,
+		props: {
+			...componentProps,
+			...intrinsicAttributes,
+			"data-grow": false,
+			"data-shrink": false,
+			children: content,
+			className: clsx(chip_module_default.Chip, className),
+			"data-has-icon": addon ? "true" : void 0,
+			"data-icon-position": addon ? addonPosition : void 0,
+			"data-variant": variant
+		}
+	});
+};
+//#endregion
+export { Chip };

package/dist/components/chip/chip.module.js

@@ -0,0 +1,8 @@
+var chip_module_default = {
+	Chip: "chip-module_Chip_2D18T",
+	Content: "chip-module_Content_7mLuL",
+	IconSlot: "chip-module_IconSlot_9N5vD",
+	Label: "chip-module_Label_Hdx7l"
+};
+//#endregion
+export { chip_module_default as default };

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

@@ -0,0 +1,2 @@
+export { Chip } from './chip';
+export type { ChipProps } from './chip';

package/dist/components/icon/icon.css

@@ -1 +1 @@
-.icon-module_Icon_6DoBq{display:inline-flex;flex:none;vertical-align:middle;& [fill]{fill:currentcolor}& [fill=none][stroke]{fill:none;stroke:currentcolor}}
+.icon-module_Icon_6DoBq{display:inline-flex;flex:none;vertical-align:middle;& [fill]{fill:currentcolor}& [stroke]{stroke:currentcolor}& [fill=none][stroke]{fill:none;stroke:currentcolor}}

package/dist/components/index.d.ts

@@ -1,9 +1,12 @@
 export * from './avatar';
+export * from './avatar-group';
+export * from './chip';
 export * from './clamp-text';
 export * from './elevator';
 export * from './button';
 export * from './icon-button';
 export * from './linear-progress';
+export * from './masonry';
 export * from './textfield';
 export * from './textarea';
 export * from './slider';

package/dist/components/linear-progress/linear-progress.js

@@ -1,9 +1,9 @@
 "use client";
 import './linear-progress.css';
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
+import { Stack } from "../stack/stack.js";
 import { Text } from "../text/text.js";
 import { FieldLabel } from "../basic-input/field-label.js";
-import { Stack } from "../stack/stack.js";
 import linear_progress_module_default from "./linear-progress.module.js";
 import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";

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

@@ -0,0 +1,2 @@
+export { Masonry } from './masonry';
+export type { MasonryItemProps, MasonryProps } from './masonry';

package/dist/components/masonry/masonry-item.d.ts

@@ -0,0 +1,32 @@
+import { useRender } from '@base-ui/react/use-render';
+import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
+import type * as React from 'react';
+/**
+ * Public Masonry.Item props.
+ *
+ * Includes standard `div` attributes such as `id`, `role`, `title`, data attributes, and event handlers,
+ * plus Base UI `render` support for replacing the default item root.
+ *
+ * @default Native div pass-through props keep React defaults.
+ */
+export type MasonryItemProps = React.ComponentPropsWithRef<'div'> & IntrinsicViraProps & {
+    /**
+     * Replaces the default `div` root using Base UI render semantics.
+     *
+     * @default The item renders a `div` root.
+     */
+    render?: useRender.RenderProp;
+    /**
+     * Makes the item span across all columns.
+     *
+     * @default false
+     */
+    spanAll?: boolean;
+    /**
+     * Ref forwarded to the rendered item root element.
+     *
+     * @default No ref is attached.
+     */
+    ref?: React.Ref<HTMLElement>;
+};
+export declare const MasonryItem: React.FC<MasonryItemProps>;

package/dist/components/masonry/masonry-item.js

@@ -0,0 +1,22 @@
+"use client";
+import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
+import masonry_module_default from "./masonry.module.js";
+import { clsx } from "clsx";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/masonry/masonry-item.tsx
+var MasonryItem = ({ className, ref, render, spanAll = false, ...otherProps }) => {
+	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
+	return useRender({
+		defaultTagName: "div",
+		render,
+		ref,
+		props: {
+			...componentProps,
+			...intrinsicAttributes,
+			"data-masonry-item-span-all": spanAll ? "true" : "false",
+			className: clsx(masonry_module_default.Item, className)
+		}
+	});
+};
+//#endregion
+export { MasonryItem };

package/dist/components/masonry/masonry.css

@@ -0,0 +1 @@
+.masonry-module_Masonry_l7c8U{--masonry-gap:var(--space-large);--masonry-column-fill:balance;--masonry-column-rule-color:var(--global-contrast);display:block;column-gap:var(--masonry-gap);column-fill:var(--masonry-column-fill);column-rule-color:var(--masonry-column-rule-color);columns:var(--masonry-column-width,auto) var(--masonry-column-count,auto);max-inline-size:100%}.masonry-module_Item_ywXwo{display:block;break-inside:avoid;margin:0;padding-block-end:var(--masonry-gap);&[data-masonry-item-span-all=true]{column-span:all}}

package/dist/components/masonry/masonry.d.ts

@@ -0,0 +1,67 @@
+import { useRender } from '@base-ui/react/use-render';
+import { ThemeTypes } from '@viraui/foundation/vira/types';
+import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
+import { MasonryItemProps } from './masonry-item';
+import type * as React from 'react';
+type MasonryColumnRuleStyle = 'none' | 'hidden' | 'dotted' | 'dashed' | 'solid' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset';
+/**
+ * Public Masonry props.
+ *
+ * Includes standard `div` attributes such as `id`, `role`, `title`, data attributes, and event handlers,
+ * plus Vira-owned CSS multi-column layout controls.
+ *
+ * @default Native div pass-through props keep React defaults.
+ */
+export type MasonryProps = React.ComponentPropsWithRef<'div'> & IntrinsicViraProps & {
+    /**
+     * Replaces the default `div` root using Base UI render semantics.
+     *
+     * @default The masonry renders a `div` root.
+     */
+    render?: useRender.RenderProp;
+    /**
+     * Sets the gap between columns and the block-end spacing on each `Masonry.Item`.
+     *
+     * @default 'large'
+     */
+    gap?: ThemeTypes['space'];
+    /**
+     * Sets how the browser balances content across columns.
+     *
+     * @default 'balance'
+     */
+    columnFill?: 'balance' | 'auto';
+    /**
+     * Sets the CSS `column-width` value used for width-based multi-column layout.
+     *
+     * When provided, it overrides `columnCount`.
+     *
+     * @default No width override.
+     */
+    columnWidth?: string;
+    /**
+     * Sets the CSS `column-count` value used for count-based multi-column layout.
+     *
+     * Ignored when `columnWidth` is provided.
+     *
+     * @default 4
+     */
+    columnCount?: number;
+    /**
+     * Sets the CSS `column-rule-width` value for the separator between columns.
+     *
+     * @default No rule width override.
+     */
+    columnRuleWidth?: string;
+    /**
+     * Sets the CSS `column-rule-style` value for the separator between columns.
+     *
+     * @default No rule style override.
+     */
+    columnRuleStyle?: MasonryColumnRuleStyle;
+};
+export type { MasonryItemProps } from './masonry-item';
+type MasonryComponent = React.FC<MasonryProps> & {
+    Item: React.FC<MasonryItemProps>;
+};
+export declare const Masonry: MasonryComponent;

package/dist/components/masonry/masonry.guide.json

@@ -0,0 +1,24 @@
+{
+  "name": "Masonry",
+  "summary": "Multi-column layout primitive for read-only mixed-height content walls.",
+  "whenToUse": [
+    "Card walls, gallery-like collections, and editorial layouts with uneven item heights",
+    "Presentational grids where visual packing matters more than row alignment",
+    "Read-only collections composed from Surface, Stack, Text, and similar content primitives"
+  ],
+  "whenNotToUse": [
+    "Interactive collections where keyboard tab order must match visual scan order",
+    "Layouts that need strict row alignment or item-to-item placement control",
+    "Cases where Stack or another linear layout already preserves the intended reading sequence"
+  ],
+  "accessibility": [
+    "Masonry is presentational and keeps DOM order, so tab order follows source order rather than the visual column flow",
+    "Avoid interactive descendants when the visual arrangement could mislead keyboard users",
+    "Choose semantic item roots with Masonry.Item render when list or article semantics matter"
+  ],
+  "antiPatterns": [
+    "Treating CSS columns as a true interactive grid with predictable left-to-right keyboard traversal",
+    "Using arbitrary child margins instead of the component gap contract for item spacing"
+  ],
+  "related": ["Stack", "Surface", "Text"]
+}

package/dist/components/masonry/masonry.js

@@ -0,0 +1,38 @@
+"use client";
+import './masonry.css';
+import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
+import { resolveThemeValue } from "../../core/theme/resolve-theme-value.js";
+import masonry_module_default from "./masonry.module.js";
+import { MasonryItem } from "./masonry-item.js";
+import { clsx } from "clsx";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/masonry/masonry.tsx
+var MasonryRoot = ({ children, className, columnCount = 4, columnFill = "balance", columnRuleStyle, columnRuleWidth, columnWidth, gap = "large", ref, render, style, ...otherProps }) => {
+	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
+	const usesColumnWidth = columnWidth !== void 0;
+	const dynamicStyle = {
+		"--masonry-gap": resolveThemeValue(gap, "space", "var(--space-large)"),
+		"--masonry-column-fill": columnFill,
+		...usesColumnWidth ? { "--masonry-column-width": columnWidth } : { "--masonry-column-count": `${columnCount}` },
+		...columnRuleWidth ? { columnRuleWidth } : {},
+		...columnRuleStyle ? { columnRuleStyle } : {},
+		...style
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		ref,
+		props: {
+			...componentProps,
+			...intrinsicAttributes,
+			"data-masonry-column-fill": columnFill,
+			"data-masonry-layout-mode": usesColumnWidth ? "width" : "count",
+			className: clsx(masonry_module_default.Masonry, className),
+			style: dynamicStyle,
+			children
+		}
+	});
+};
+var Masonry = Object.assign(MasonryRoot, { Item: MasonryItem });
+//#endregion
+export { Masonry };

package/dist/components/masonry/masonry.module.js

@@ -0,0 +1,6 @@
+var masonry_module_default = {
+	Masonry: "masonry-module_Masonry_l7c8U",
+	Item: "masonry-module_Item_ywXwo"
+};
+//#endregion
+export { masonry_module_default as default };

package/dist/components/radio/radio-group.js

@@ -1,8 +1,8 @@
 "use client";
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
+import { Stack } from "../stack/stack.js";
 import { FieldHelperCopy } from "../basic-input/field-helper-copy.js";
 import { FieldLabel } from "../basic-input/field-label.js";
-import { Stack } from "../stack/stack.js";
 import radio_module_default from "./radio.module.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Field, Fieldset, RadioGroup } from "@base-ui/react";