@viraui/react 0.0.22 → 0.0.24

package/dist/catalog.json

@@ -20,6 +20,12 @@
       "summary": "Compact visual label primitive for short status, category, or metadata treatments.",
       "guidePath": "./components/chip/chip.guide.json"
     },
+    {
+      "id": "dialog",
+      "name": "Dialog",
+      "summary": "Compound drawer sheet with `Dialog.Trigger`, `Dialog.Sheet`, `Dialog.Close`, and Base UI pass-through `Dialog.Provider`, `Dialog.Indent`, and `Dialog.IndentBackground` for app-shell indent effects.",
+      "guidePath": "./components/dialog/dialog.guide.json"
+    },
     {
       "id": "clamp-text",
       "name": "ClampText",
@@ -35,7 +41,7 @@
     {
       "id": "button",
       "name": "Button",
-      "summary": "Primary action control with size, variant, optional icon, and loading state.",
+      "summary": "Primary action control with size, variant, optional addon, optional pill shape, and loading state.",
       "guidePath": "./components/button/button.guide.json"
     },
     {
@@ -83,9 +89,15 @@
     {
       "id": "checkbox",
       "name": "Checkbox",
-      "summary": "Field-wrapped checkbox control with optional field copy.",
+      "summary": "Field.Item checkbox option for standalone fields or CheckboxGroup children.",
       "guidePath": "./components/checkbox/checkbox.guide.json"
     },
+    {
+      "id": "fieldset",
+      "name": "Fieldset",
+      "summary": "Semantic field grouping with shared legend and optional group helper copy.",
+      "guidePath": "./components/fieldset/fieldset.guide.json"
+    },
     {
       "id": "radio",
       "name": "Radio",
@@ -98,6 +110,12 @@
       "summary": "Field-wrapped single-select dropdown with grouped options and field copy.",
       "guidePath": "./components/select/select.guide.json"
     },
+    {
+      "id": "separator",
+      "name": "Separator",
+      "summary": "Thematic or content divider with horizontal or vertical orientation, token padding, and preset line thickness.",
+      "guidePath": "./components/separator/separator.guide.json"
+    },
     {
       "id": "icon",
       "name": "Icon",
@@ -122,6 +140,12 @@
       "summary": "Presentational container with token background, optional border, radius, and padding; nested surfaces use radius=\"auto\" for concentric corners.",
       "guidePath": "./components/surface/surface.guide.json"
     },
+    {
+      "id": "tabs",
+      "name": "Tabs",
+      "summary": "Compound segmented tab control with Surface list chrome, moving indicator, and animated panels.",
+      "guidePath": "./components/tabs/tabs.guide.json"
+    },
     {
       "id": "spinner",
       "name": "Spinner",

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);--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}
+.viraui__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)}}.viraui__avatar-module__Image_Q7bHi{inline-size:100%;block-size:100%;display:block;object-fit:cover}.viraui__avatar-module__Label_QASTF{font-size:30cqw}

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

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

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

@@ -1 +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}
+.viraui__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)}}.viraui__avatar-group-module__AvatarWrapper_0opqY{position:relative;display:inline-flex;flex:0 0 auto;inline-size:var(--avatar-size);block-size:var(--avatar-size);.viraui__avatar-group-module__AvatarGroup_zOrR-[data-direction=horizontal] &:not(:first-child){margin-inline-start:calc(var(--avatar-overlap-distance) * -1)}.viraui__avatar-group-module__AvatarGroup_zOrR-[data-direction=vertical] &:not(:first-child){margin-block-start:calc(var(--avatar-overlap-distance) * -1)}.viraui__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)))}.viraui__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)))}.viraui__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)))}}.viraui__avatar-group-module__OverflowWrapper_bKv6I{inline-size:auto;min-inline-size:var(--avatar-size)}.viraui__avatar-group-module__AvatarGroupItem_Vvlyh{--avatar-radius:100%;corner-shape:unset}.viraui__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.module.js

@@ -1,9 +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"
+	AvatarGroup: "viraui__avatar-group-module__AvatarGroup_zOrR-",
+	AvatarWrapper: "viraui__avatar-group-module__AvatarWrapper_0opqY",
+	OverflowWrapper: "viraui__avatar-group-module__OverflowWrapper_bKv6I",
+	AvatarGroupItem: "viraui__avatar-group-module__AvatarGroupItem_Vvlyh",
+	OverflowPill: "viraui__avatar-group-module__OverflowPill_nMmTD"
 };
 //#endregion
 export { avatar_group_module_default as default };

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

@@ -1 +1 @@
-.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)}}
+.viraui__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-medium);box-sizing:border-box;margin:0;inline-size:100%;min-inline-size:0;padding-inline:var(--basic-input-padding-inline);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.js

@@ -1,4 +1,3 @@
-"use client";
 import './basic-input.css';
 import { clsx } from "../../core/clsx.js";
 import basic_input_module_default from "./basic-input.module.js";

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

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

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

@@ -1,6 +1,6 @@
 import type * as React from 'react';
 type FieldHelperCopyProps = {
-    className?: string | undefined;
+    className?: string;
     description?: React.ReactNode;
     error?: React.ReactNode;
 };

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

@@ -1,4 +1,3 @@
-"use client";
 import { Text } from "../text/text.js";
 import { jsx } from "react/jsx-runtime";
 import { Field } from "@base-ui/react/field";

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

@@ -1 +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)}
+.viraui__field-label-module__FieldLabel_R9SYf{display:inline;flex-direction:column;align-items:stretch;inline-size:100%;padding-inline:var(--field-label-padding-inline,0)}

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

@@ -1,4 +1,3 @@
-"use client";
 import './field-label.css';
 import { clsx } from "../../core/clsx.js";
 import { Text } from "../text/text.js";

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

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

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

@@ -1,4 +1,3 @@
-"use client";
 import { Stack } from "../stack/stack.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/basic-input/input-control-group.tsx

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}&[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}
+.viraui__button-module__Button_oPhrP{--button-background:var(--global-primary);--button-color:var(--base-1);--button-height:var(--space-x-large);--button-padding-inline:var(--space-small);--button-padding-block:var(--space-small);--button-spinner-color:currentColor;--button-icon-size:1.125em;--button-radius:var(--radius-medium);-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:fit-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(--button-radius);transition:translate var(--easing-elastic) var(--duration-instant);will-change:translate;&:not(:disabled){background-clip:padding-box}&:not(:disabled):active{translate:0 1px}&[data-pill=true]{border-radius:var(--radius-infinite);&[data-addon-position=end]{padding-inline-end:calc(var(--button-padding-inline) / 2)}&[data-addon-position=start]{padding-inline-start:calc(var(--button-padding-inline) / 2)}}&[data-size=big]{--button-height:var(--space-2x-large);--button-padding-inline:var(--space-medium);--button-padding-block:var(--space-small);--button-icon-size:1.125em;--button-radius:var(--radius-medium)}&[data-size=small]{--button-height:var(--space-large);--button-padding-inline:var(--space-small);--button-padding-block:var(--space-x-small);--button-icon-size:1em;--button-radius:var(--radius-small);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));&:hover{--button-background:oklab(from var(--global-primary) calc(l + 0.05) a b)}}&[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.03))}}&[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/12%);--button-color:var(--highlight-red);&:hover{--button-background:oklab(from var(--highlight-red) l a b/30%)}}&[data-addon-position=start]{flex-direction:row;padding-inline-end:calc(var(--button-padding-inline) * 1.2)}&[data-addon-position=end]{flex-direction:row-reverse;padding-inline-start:calc(var(--button-padding-inline) * 1.2)}&[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)}}.viraui__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}}.viraui__button-module__SpinnerOverlay_vKqw1{position:absolute;inset:0;display:grid;place-content:center;pointer-events:none}

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

@@ -1,6 +1,6 @@
 import { Button as PrimitiveButton } from '@base-ui/react/button';
-import { ReactNode } from 'react';
 import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
+import { ReactNode } from 'react';
 import * as React from 'react';
 /**
  * Public Button props.
@@ -24,23 +24,29 @@ export type ButtonProps = PrimitiveButton.Props & IntrinsicViraProps & {
      */
     variant?: 'primary' | 'secondary' | 'flat' | 'destructive';
     /**
-     * Decorative icon rendered alongside the button label.
-     * Pass any React icon element; use `<Icon name="..." />` for the Vira icon set.
+     * Decorative addon rendered alongside the button label.
+     * Pass any React element; use `<Icon name="..." />` for icons or `<Chip />` for status chips.
      *
-     * @default No default; omit when the button has no icon.
+     * @default No default; omit when the button has no addon.
      */
-    icon?: ReactNode;
+    addon?: ReactNode;
     /**
-     * Controls whether the icon appears before or after the label.
+     * Controls whether the addon appears before or after the label.
      *
      * @default 'start'
      */
-    iconPosition?: 'start' | 'end';
+    addonPosition?: 'start' | 'end';
     /**
      * Shows a centered spinner overlay while preserving the original content width.
      *
      * @default false
      */
     loading?: boolean;
+    /**
+     * Applies a fully rounded pill shape to the button.
+     *
+     * @default false
+     */
+    pill?: boolean;
 };
 export declare const Button: React.FC<ButtonProps>;

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

@@ -1,20 +1,22 @@
 {
   "name": "Button",
-  "summary": "Primary action control with size, variant, optional icon, and loading state.",
+  "summary": "Primary action control with size, variant, optional addon, optional pill shape, and loading state.",
   "whenToUse": [
-    "Labeled actions with text and optional leading or trailing icon",
+    "Labeled actions with text and optional leading or trailing addon",
     "Primary, secondary, flat, or destructive visual treatments",
+    "Capsule-shaped actions via pill when a fully rounded button fits the layout",
     "Async actions that need a stable width while loading"
   ],
   "whenNotToUse": ["Icon-only actions without a visible label — use IconButton", "Navigation or non-button semantics"],
   "accessibility": [
-    "Visible button text should name the action; avoid relying on icon alone",
+    "Visible button text should name the action; avoid relying on addon alone",
     "Loading sets aria-busy on the control while Spinner stays decorative",
     "Disabled and loading states should not remove the action from the tab order without clear context"
   ],
   "antiPatterns": [
     "Using Button without children as icon-only — prefer IconButton",
-    "Duplicating icon size on every icon slot — Button CSS sizes SVG descendants"
+    "Duplicating icon size on every addon slot — Button CSS sizes SVG descendants",
+    "Mixing pill with custom border-radius overrides that fight data-pill styling"
   ],
-  "related": ["IconButton", "Icon", "Spinner"]
+  "related": ["IconButton", "Icon", "Spinner", "Chip"]
 }

package/dist/components/button/button.js

@@ -1,4 +1,3 @@
-"use client";
 import './button.css';
 import { clsx } from "../../core/clsx.js";
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
@@ -37,7 +36,7 @@ var ButtonRenderRoot = ({ isDisabled, ref, render, rootProps }) => {
 		}
 	});
 };
-var ButtonRoot = ({ children, className, intrinsicAttributes, isDisabled, isIconOnly, icon, iconPosition, loading, passThroughProps, ref, render, size, variant }) => {
+var ButtonRoot = ({ children, className, intrinsicAttributes, isDisabled, isIconOnly, addon, addonPosition, loading, passThroughProps, pill, ref, render, size, variant }) => {
 	const rootProps = {
 		...passThroughProps,
 		...intrinsicAttributes,
@@ -45,9 +44,10 @@ var ButtonRoot = ({ children, className, intrinsicAttributes, isDisabled, isIcon
 		children,
 		className: clsx(button_module_default.Button, className),
 		"data-loading": loading ? "true" : "false",
+		"data-pill": pill ? "true" : void 0,
 		"data-size": size,
 		"data-icon-only": isIconOnly ? "true" : void 0,
-		"data-icon-position": icon && !isIconOnly ? iconPosition : void 0,
+		"data-addon-position": addon && !isIconOnly ? addonPosition : void 0,
 		"data-variant": variant
 	};
 	if (usesButtonPrimitiveRender(render)) return /* @__PURE__ */ jsx(Button, {
@@ -64,9 +64,9 @@ var ButtonRoot = ({ children, className, intrinsicAttributes, isDisabled, isIcon
 		rootProps
 	});
 };
-var Button$1 = ({ children, className, disabled, icon, iconPosition = "start", loading = false, size = "medium", variant = "primary", ...otherProps }) => {
+var Button$1 = ({ children, className, disabled, addon, addonPosition = "start", loading = false, pill = false, size = "medium", variant = "primary", ...otherProps }) => {
 	const isDisabled = disabled || loading;
-	const isIconOnly = Boolean(icon) && (children == null || children === "");
+	const isIconOnly = Boolean(addon) && (children == null || children === "");
 	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
 	const { render, ref, ...passThroughProps } = componentProps;
 	return /* @__PURE__ */ jsxs(ButtonRoot, {
@@ -74,10 +74,11 @@ var Button$1 = ({ children, className, disabled, icon, iconPosition = "start", l
 		intrinsicAttributes,
 		isDisabled,
 		isIconOnly,
-		icon,
-		iconPosition,
+		addon,
+		addonPosition,
 		loading,
 		passThroughProps,
+		pill,
 		ref,
 		render,
 		size,
@@ -86,12 +87,12 @@ var Button$1 = ({ children, className, disabled, icon, iconPosition = "start", l
 			"aria-hidden": "true",
 			className: button_module_default.Content,
 			"data-loading": loading ? "true" : "false",
-			children: icon
-		}) : /* @__PURE__ */ jsxs(Fragment, { children: [icon && /* @__PURE__ */ jsx("span", {
+			children: addon
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [addon && /* @__PURE__ */ jsx("span", {
 			"aria-hidden": "true",
 			className: button_module_default.Content,
 			"data-loading": loading ? "true" : "false",
-			children: icon
+			children: addon
 		}), /* @__PURE__ */ jsx("span", {
 			className: button_module_default.Content,
 			"data-loading": loading ? "true" : "false",

package/dist/components/button/button.module.js

@@ -1,7 +1,7 @@
 var button_module_default = {
-	Button: "button-module_Button_oPhrP",
-	Content: "button-module_Content_w-pX-",
-	SpinnerOverlay: "button-module_SpinnerOverlay_vKqw1"
+	Button: "viraui__button-module__Button_oPhrP",
+	Content: "viraui__button-module__Content_w-pX-",
+	SpinnerOverlay: "viraui__button-module__SpinnerOverlay_vKqw1"
 };
 //#endregion
 export { button_module_default as default };

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

@@ -0,0 +1,12 @@
+import { CheckboxGroup as CheckboxGroupPrimitive } from '@base-ui/react';
+import type * as React from 'react';
+/**
+ * Public CheckboxGroup props.
+ *
+ * Thin wrapper around Base UI `CheckboxGroup` with default option spacing.
+ * Compose with `Field.Root` and `Fieldset` for group labels, validation, and copy.
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type CheckboxGroupProps = CheckboxGroupPrimitive.Props;
+export declare const CheckboxGroup: React.FC<CheckboxGroupProps>;

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

@@ -0,0 +1,15 @@
+import { Stack } from "../stack/stack.js";
+import { jsx } from "react/jsx-runtime";
+import { CheckboxGroup } from "@base-ui/react";
+//#region src/components/checkbox/checkbox-group.tsx
+var CheckboxGroup$1 = ({ children, className, ...props }) => /* @__PURE__ */ jsx(CheckboxGroup, {
+	...props,
+	className,
+	render: /* @__PURE__ */ jsx(Stack, {
+		fillChildren: false,
+		rowGap: "small"
+	}),
+	children
+});
+//#endregion
+export { CheckboxGroup$1 as CheckboxGroup };

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;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}
+.viraui__checkbox-module__Checkbox_3oGip{&:has([required]) .viraui__checkbox-module__Label_n9HL7:after{content:" ＊";color:var(--highlight-red)}}.viraui__checkbox-module__CheckboxRoot_PeyF5{--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));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]),[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],[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}}.viraui__checkbox-module__Indicator_C-k-l{display:inline-flex;align-items:center;justify-content:center;color:var(--checkbox-indicator-color)}.viraui__checkbox-module__Icon_926Sa{stroke:currentColor}.viraui__checkbox-module__CheckboxRoot_PeyF5:not([data-indeterminate]) .viraui__checkbox-module__MinusIcon_Q57pY,.viraui__checkbox-module__CheckboxRoot_PeyF5[data-indeterminate] .viraui__checkbox-module__CheckIcon_XqUcs{display:none}.viraui__checkbox-module__CheckboxRoot_PeyF5[data-indeterminate] .viraui__checkbox-module__MinusIcon_Q57pY{display:inline-flex}

package/dist/components/checkbox/checkbox.d.ts

@@ -1,29 +1,15 @@
-import { CheckboxRoot, FieldRoot } from '@base-ui/react';
+import { CheckboxRoot } from '@base-ui/react/checkbox';
 import { StackProps } from '..';
-import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
 import type * as React from 'react';
 /**
  * Public Checkbox props.
  *
- * Includes Base UI checkbox props such as `checked`, `defaultChecked`, `indeterminate`,
- * `disabled`, and change handlers, plus optional field copy rendered with the shared Vira
- * field label/helper pattern.
+ * Self-contained option row for standalone fields or `CheckboxGroup` children.
+ * Standalone usage requires an external `Field.Root` wrapper for validation and naming.
  *
  * @default Base UI pass-through props keep upstream defaults.
  */
-export type CheckboxProps = CheckboxRoot.Props & Omit<FieldRoot.Props, 'ref'> & {
-    /**
-     * Adds `data-grow="false"` to the field root when false.
-     *
-     * @default The field root does not render a grow attribute.
-     */
-    grow?: IntrinsicViraProps['grow'];
-    /**
-     * Adds `data-shrink="false"` to the field root when false.
-     *
-     * @default The field root does not render a shrink attribute.
-     */
-    shrink?: IntrinsicViraProps['shrink'];
+export type CheckboxProps = CheckboxRoot.Props & {
     /**
      * Visible label rendered with shared internal `FieldLabel`.
      *
@@ -31,14 +17,13 @@ export type CheckboxProps = CheckboxRoot.Props & Omit<FieldRoot.Props, 'ref'> &
      */
     label?: React.ReactNode;
     /**
-     * Helper copy rendered with `Field.Description` and `Text` while the field is valid.
+     * Helper copy rendered with `Field.Description` and `Text` for this option.
      *
      * @default No description is rendered.
      */
     description?: React.ReactNode;
     /**
-     * Error copy rendered with `Field.Error` and `Text` in the same slot as `description`.
-     * Replaces description while the field is invalid.
+     * Error copy rendered in the same slot as `description` while invalid.
      *
      * @default No static error copy is rendered.
      */

package/dist/components/checkbox/checkbox.guide.json

@@ -1,22 +1,27 @@
 {
   "name": "Checkbox",
-  "summary": "Field-wrapped checkbox control with optional field copy.",
+  "summary": "Field.Item checkbox option for standalone fields or CheckboxGroup children.",
   "whenToUse": [
-    "Single or multi-select boolean choices with optional label and helper text",
+    "Single boolean fields wrapped in Field.Root with optional label and helper text — no Fieldset required",
+    "CheckboxGroup alone inside Field.Root when each Checkbox has its own label and no shared group legend is needed",
+    "Multi-select sets with shared legend or group copy — Field.Root > Fieldset render={<CheckboxGroup />} with Checkbox children",
     "Invalid and disabled states with Switch-parity focus treatment"
   ],
   "whenNotToUse": [
     "Unlabeled checkbox without aria-label on the root",
-    "Mutually exclusive options in a set (use radio pattern instead)"
+    "Mutually exclusive options in a set (use Radio and RadioGroup instead)",
+    "Assuming Fieldset is mandatory for every CheckboxGroup — add Fieldset only for shared legend or group copy",
+    "Group legend, description, or validation on CheckboxGroup props — use Field.Root and Fieldset instead"
   ],
   "accessibility": [
     "Provide visible label or aria-label so the checkbox has an accessible name",
     "Checked and indeterminate states must map to native checkbox semantics exposed by the control",
-    "Surface invalid state and error copy through the shared field pattern"
+    "Surface standalone invalid state and error copy through Field.Root and FieldHelperCopy on Checkbox"
   ],
   "antiPatterns": [
     "Rendering a checkbox without label and without aria-label",
+    "Using Checkbox without Field.Root for standalone validated fields",
     "Expecting description to stay visible when invalid without an error message"
   ],
-  "related": ["Switch", "Stack", "Text"]
+  "related": ["Fieldset", "CheckboxGroup", "Switch", "Stack", "Text"]
 }

package/dist/components/checkbox/checkbox.js

@@ -1,75 +1,61 @@
-"use client";
 import './checkbox.css';
 import { clsx } from "../../core/clsx.js";
-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 checkbox_module_default from "./checkbox.module.js";
 import { Icon } from "../icon/icon.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Checkbox, Field } from "@base-ui/react";
+import { Field } from "@base-ui/react/field";
+import { Checkbox } from "@base-ui/react/checkbox";
 //#region src/components/checkbox/checkbox.tsx
-var Checkbox$1 = ({ className, description, dirty, disabled, error, invalid, label, name, ref, size = "small", vPadding, hPadding, touched, validate, validationDebounceTime, validationMode, ...checkboxRootProps }) => {
+var Checkbox$1 = ({ className, description, disabled, error, label, ref, size = "small", vPadding, hPadding, value, ...checkboxRootProps }) => {
 	const hasTextDescription = Boolean(description || error);
 	const iconSize = size === "small" ? 12 : 16;
-	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(checkboxRootProps);
-	return /* @__PURE__ */ jsx(Field.Root, {
-		...intrinsicAttributes,
+	return /* @__PURE__ */ jsx(Field.Item, {
 		className: checkbox_module_default.Checkbox,
-		dirty,
-		disabled,
-		invalid,
-		name,
-		touched,
-		validate,
-		validationDebounceTime,
-		validationMode,
-		render: /* @__PURE__ */ jsx(Stack, {
-			direction: "row",
-			columnGap: size === "small" ? "small" : "medium",
-			fillChildren: false,
-			vAlign: hasTextDescription ? "start" : "center"
-		}),
-		children: /* @__PURE__ */ jsx(Field.Label, { children: /* @__PURE__ */ jsxs(Stack, {
-			direction: "row",
-			columnGap: size === "small" ? "small" : "medium",
-			fillChildren: false,
-			vAlign: hasTextDescription ? "start" : "center",
-			...hPadding !== void 0 ? { hPadding } : {},
-			...vPadding !== void 0 ? { vPadding } : {},
-			children: [/* @__PURE__ */ jsx(Checkbox.Root, {
-				...componentProps,
-				className: clsx(checkbox_module_default.CheckboxRoot, className),
-				"data-size": size,
-				disabled,
-				name,
-				ref,
-				children: /* @__PURE__ */ jsxs(Checkbox.Indicator, {
-					className: checkbox_module_default.Indicator,
-					children: [/* @__PURE__ */ jsx(Icon, {
-						className: clsx(checkbox_module_default.Icon, checkbox_module_default.CheckIcon),
-						name: "Check",
-						size: iconSize
-					}), /* @__PURE__ */ jsx(Icon, {
-						className: clsx(checkbox_module_default.Icon, checkbox_module_default.MinusIcon),
-						name: "Minus",
-						size: iconSize
-					})]
-				})
-			}), label || description || error ? /* @__PURE__ */ jsxs(Stack, {
-				direction: "column",
+		children: /* @__PURE__ */ jsx(Field.Label, {
+			className: checkbox_module_default.Label,
+			children: /* @__PURE__ */ jsxs(Stack, {
+				direction: "row",
+				columnGap: size === "small" ? "small" : "medium",
 				fillChildren: false,
-				rowGap: size === "small" ? "2x-small" : "x-small",
-				children: [label && /* @__PURE__ */ jsx(FieldLabel, {
-					size: size === "small" ? "small" : "medium",
-					children: label
-				}), /* @__PURE__ */ jsx(FieldHelperCopy, {
-					description,
-					error
-				})]
-			}) : null]
-		}) })
+				vAlign: hasTextDescription ? "start" : "center",
+				hPadding,
+				vPadding,
+				children: [/* @__PURE__ */ jsx(Checkbox.Root, {
+					...checkboxRootProps,
+					className: clsx(checkbox_module_default.CheckboxRoot, className),
+					"data-size": size,
+					disabled,
+					ref,
+					value,
+					children: /* @__PURE__ */ jsxs(Checkbox.Indicator, {
+						className: checkbox_module_default.Indicator,
+						children: [/* @__PURE__ */ jsx(Icon, {
+							className: clsx(checkbox_module_default.Icon, checkbox_module_default.CheckIcon),
+							name: "Check",
+							size: iconSize
+						}), /* @__PURE__ */ jsx(Icon, {
+							className: clsx(checkbox_module_default.Icon, checkbox_module_default.MinusIcon),
+							name: "Minus",
+							size: iconSize
+						})]
+					})
+				}), label || description || error ? /* @__PURE__ */ jsxs(Stack, {
+					direction: "column",
+					fillChildren: false,
+					rowGap: "small",
+					children: [label ? /* @__PURE__ */ jsx(FieldLabel, {
+						size: size === "small" ? "small" : "medium",
+						children: label
+					}) : null, /* @__PURE__ */ jsx(FieldHelperCopy, {
+						description,
+						error
+					})]
+				}) : null]
+			})
+		})
 	});
 };
 //#endregion

package/dist/components/checkbox/checkbox.module.js

@@ -1,10 +1,11 @@
 var checkbox_module_default = {
-	Checkbox: "checkbox-module_Checkbox_3oGip",
-	CheckboxRoot: "checkbox-module_CheckboxRoot_PeyF5",
-	Indicator: "checkbox-module_Indicator_C-k-l",
-	Icon: "checkbox-module_Icon_926Sa",
-	MinusIcon: "checkbox-module_MinusIcon_Q57pY",
-	CheckIcon: "checkbox-module_CheckIcon_XqUcs"
+	Checkbox: "viraui__checkbox-module__Checkbox_3oGip",
+	Label: "viraui__checkbox-module__Label_n9HL7",
+	CheckboxRoot: "viraui__checkbox-module__CheckboxRoot_PeyF5",
+	Indicator: "viraui__checkbox-module__Indicator_C-k-l",
+	Icon: "viraui__checkbox-module__Icon_926Sa",
+	MinusIcon: "viraui__checkbox-module__MinusIcon_Q57pY",
+	CheckIcon: "viraui__checkbox-module__CheckIcon_XqUcs"
 };
 //#endregion
 export { checkbox_module_default as default };

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

@@ -1,2 +1,4 @@
 export { Checkbox } from './checkbox';
+export { CheckboxGroup } from './checkbox-group';
 export type { CheckboxProps } from './checkbox';
+export type { CheckboxGroupProps } from './checkbox-group';