@viraui/react 0.0.17 → 0.0.19

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",
@@ -32,6 +44,18 @@
       "summary": "Icon-only button that requires an accessible name through aria-label or aria-labelledby.",
       "guidePath": "./components/icon-button/icon-button.guide.json"
     },
+    {
+      "id": "linear-progress",
+      "name": "LinearProgress",
+      "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",
@@ -62,6 +86,12 @@
       "summary": "Field-wrapped checkbox control with optional field copy.",
       "guidePath": "./components/checkbox/checkbox.guide.json"
     },
+    {
+      "id": "radio",
+      "name": "Radio",
+      "summary": "Mutually exclusive choice within a RadioGroup, with optional per-option label and helper text.",
+      "guidePath": "./components/radio/radio.guide.json"
+    },
     {
       "id": "select",
       "name": "Select",

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/basic-input/basic-input.js

@@ -1,5 +1,5 @@
-import './basic-input.css';
 "use client";
+import './basic-input.css';
 import basic_input_module_default from "./basic-input.module.js";
 import { clsx } from "clsx";
 import { jsx } from "react/jsx-runtime";

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

@@ -16,7 +16,7 @@ var FieldHelperCopy = ({ className, description, error }) => /* @__PURE__ */ jsx
 		match: true,
 		render: /* @__PURE__ */ jsx(Text, {
 			selection: false,
-			size: "x-small",
+			size: "small",
 			tone: "danger"
 		}),
 		children: error
@@ -25,7 +25,7 @@ var FieldHelperCopy = ({ className, description, error }) => /* @__PURE__ */ jsx
 		className,
 		render: /* @__PURE__ */ jsx(Text, {
 			selection: false,
-			size: "x-small",
+			size: "small",
 			tone: "muted"
 		}),
 		children: description
@@ -34,7 +34,7 @@ var FieldHelperCopy = ({ className, description, error }) => /* @__PURE__ */ jsx
 		className,
 		render: /* @__PURE__ */ jsx(Text, {
 			selection: false,
-			size: "x-small",
+			size: "small",
 			tone: "danger"
 		})
 	});

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

@@ -1,5 +1,6 @@
+import { TextProps } from '../text';
 import type * as React from 'react';
-export type FieldLabelProps = React.ComponentProps<'span'>;
+export type FieldLabelProps = TextProps;
 /**
  * Shared visible field label typography for Vira field components.
  *

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

@@ -1,5 +1,5 @@
-import './field-label.css';
 "use client";
+import './field-label.css';
 import { Text } from "../text/text.js";
 import field_label_module_default from "./field-label.module.js";
 import { clsx } from "clsx";
@@ -12,12 +12,13 @@ import { jsx } from "react/jsx-runtime";
 * 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, {
+var FieldLabel = ({ children, className, size = "small", ...textProps }) => /* @__PURE__ */ jsx(Text, {
 	className: clsx(field_label_module_default.FieldLabel, className),
 	lineHeight: "small",
 	selection: false,
-	size: "small",
+	size,
 	weight: "semibold",
+	...textProps,
 	children
 });
 //#endregion

package/dist/components/button/button.css

@@ -1 +1 @@
-.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}
+.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}&[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(--global-contrast);--button-color:var(--base-7)}}&[data-variant=destructive]{--button-background:oklab(from var(--highlight-red) l a b/15%);--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.js

@@ -1,5 +1,5 @@
-import './button.css';
 "use client";
+import './button.css';
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import { Spinner } from "../spinner/spinner.js";
 import button_module_default from "./button.module.js";

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(--highlight-red);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 @@
-import './checkbox.css';
 "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";
@@ -61,7 +61,10 @@ var Checkbox$1 = ({ className, description, dirty, disabled, error, invalid, lab
 				direction: "column",
 				fillChildren: false,
 				rowGap: size === "small" ? "2x-small" : "x-small",
-				children: [label && /* @__PURE__ */ jsx(FieldLabel, { children: label }), /* @__PURE__ */ jsx(FieldHelperCopy, {
+				children: [label && /* @__PURE__ */ jsx(FieldLabel, {
+					size: size === "small" ? "small" : "medium",
+					children: label
+				}), /* @__PURE__ */ jsx(FieldHelperCopy, {
 					description,
 					error
 				})]

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/clamp-text/clamp-text.js

@@ -1,5 +1,5 @@
-import './clamp-text.css';
 "use client";
+import './clamp-text.css';
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import clamp_text_module_default from "./clamp-text.module.js";
 import { clsx } from "clsx";

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

@@ -1,2 +1,2 @@
 export { Icon } from './icon';
-export type { IconProps } from './icon';
+export type { IconName, IconProps, IconVariant } from './icon';

package/dist/components/index.d.ts

@@ -1,13 +1,18 @@
 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';
 export * from './switch';
 export * from './checkbox';
+export * from './radio';
 export * from './select';
 export * from './icon';
 export * from './skeleton';

package/dist/components/linear-progress/index.d.ts

@@ -0,0 +1,2 @@
+export { LinearProgress } from './linear-progress';
+export type { LinearProgressProps } from './linear-progress';

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

@@ -0,0 +1 @@
+.linear-progress-module_LinearProgress_-KN0j{--linear-progress-track-size:var(--space-x-small);--linear-progress-track-background:var(--global-contrast);--linear-progress-indicator-color:var(--global-primary);& .linear-progress-module_Track_qUz8P{position:relative;overflow:hidden;block-size:var(--linear-progress-track-size);background:var(--linear-progress-track-background);border-radius:var(--radius-infinite)}& .linear-progress-module_Indicator_maaZF{block-size:100%;background:var(--linear-progress-indicator-color);border-radius:inherit;&[data-indeterminate]{position:absolute;inset:0;inline-size:100%;background:transparent;&:before{position:absolute;inset-block:0;inline-size:40%;background:var(--linear-progress-indicator-color);border-radius:inherit;animation:linear-progress-module_linear-progress-indeterminate_g0cSO 1.4s var(--easing-standard) infinite;content:""}}}}@keyframes linear-progress-module_linear-progress-indeterminate_g0cSO{0%{transform:translateX(-120%)}to{transform:translateX(260%)}}

package/dist/components/linear-progress/linear-progress.d.ts

@@ -0,0 +1,44 @@
+import { ProgressRoot } from '@base-ui/react/progress';
+import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
+import type * as React from 'react';
+/**
+ * Public LinearProgress props.
+ *
+ * Includes Base UI progress root props such as `value`, `min`, `max`, `format`,
+ * and `getAriaValueText`, plus optional label, description, and value display.
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type LinearProgressProps = ProgressRoot.Props & {
+    /**
+     * Adds `data-grow="false"` to the progress root when false.
+     *
+     * @default The progress root does not render a grow attribute.
+     */
+    grow?: IntrinsicViraProps['grow'];
+    /**
+     * Adds `data-shrink="false"` to the progress root when false.
+     *
+     * @default The progress root does not render a shrink attribute.
+     */
+    shrink?: IntrinsicViraProps['shrink'];
+    /**
+     * Visible label rendered through `Progress.Label` with shared internal `FieldLabel`.
+     *
+     * @default No label is rendered.
+     */
+    label?: React.ReactNode;
+    /**
+     * Static helper copy rendered with `Text` below the progress track.
+     *
+     * @default No description is rendered.
+     */
+    description?: React.ReactNode;
+    /**
+     * Renders the formatted current value via `Progress.Value` and `Text`.
+     *
+     * @default false
+     */
+    showValue?: boolean;
+};
+export declare const LinearProgress: React.FC<LinearProgressProps>;