@veracity/vui 5.4.0-alpha.manual.2609080740 → 5.4.0

package/dist/checkbox/checkbox.js

@@ -1,35 +1,56 @@
 import { filterUndefined } from "../utils/object.js";
 import { cs } from "../utils/styles.js";
-import { checkboxColors, disabled } from "./consts.js";
+import { selectionControlColors, selectionControlDisabled } from "../selectionControl/consts.js";
 import { omitThemingProps, th, useStyleConfig } from "../core/theme.js";
 import styled from "../core/styled.js";
 import vui from "../core/vui.js";
+import { Box } from "../box/box.js";
 import { Icon } from "../icon/icon.js";
 import { T } from "../t/t.js";
+import { SelectionControlInput, useDeprecatedLgSize, useSelectionControlColors, useSelectionControlDescription } from "../selectionControl/selectionControl.js";
 import { useCheckboxGroupContext } from "./context.js";
 import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/checkbox/checkbox.tsx
+const controlGap = {
+	lg: "10px",
+	md: "10px",
+	sm: "8px",
+	xs: "6px"
+};
+const jsxChildrenMt = {
+	lg: "0px",
+	md: "0px",
+	sm: "2px",
+	xs: "3px"
+};
+const labelMt = {
+	lg: "0px",
+	md: "0px",
+	sm: "0.5px",
+	xs: "1px"
+};
+const markSize = {
+	lg: "16px",
+	md: "16px",
+	sm: "13px",
+	xs: "10px"
+};
+const markOffset = {
+	lg: "3px",
+	md: "3px",
+	sm: "2.5px",
+	xs: "2px"
+};
 const CheckboxControl = styled.spanBox`
-  border-radius: none;
+  border: 1px solid currentColor;
+  border-radius: 0;
   display: inline-flex;
   flex-shrink: 0;
   position: relative;
   transition-duration: fast;
 `;
-const CheckboxInput = styled.input`
-  cursor: inherit;
-  height: 100%;
-  left: 0;
-  margin: 0;
-  opacity: 0;
-  padding: 0;
-  position: absolute;
-  top: 0;
-  width: 100%;
-  z-index: 1;
-`;
 const CheckboxBase = styled.labelBox`
   cursor: pointer;
   display: inline-flex;
@@ -39,26 +60,28 @@ const CheckboxBase = styled.labelBox`
     color: ${(p) => th.color(p.controlHoverColor)};
   }
 
-  &[aria-readonly='true'] {
-    cursor: auto;
+  &:not([aria-disabled='true']):not([aria-readonly='true']):active .vui-checkboxControl {
+    color: ${(p) => th.color(p.controlPressedColor)};
   }
 
-  &:not([aria-disabled='true']):not([aria-readonly='true']) .vui-checkboxControl:focus-within {
-    color: ${checkboxColors.focus};
+  &[aria-readonly='true'] {
+    cursor: auto;
   }
 
   &[aria-disabled='true'] {
-    color: ${disabled.text};
+    color: ${selectionControlDisabled.text};
     cursor: not-allowed;
 
     .vui-checkboxControl {
-      color: ${disabled.icon};
+      background-color: ${selectionControlDisabled.bg};
+      color: ${selectionControlDisabled.icon};
     }
   }
 `;
 /**
 * Allows selection of one or more choices from a set of items. Handles controlled and uncontrolled modes.
-* Uses icons to display itself in different states. Can be indeterminate when selecting some nested items.
+* The box itself is plain CSS (border/background); only the checkmark/minus mark is an icon. Can be
+* indeterminate when selecting some nested items.
 */
 const Checkbox = vui((props, ref) => {
 	const { defaultValue: groupDefaultValue, ...checkboxGroupProps } = useCheckboxGroupContext() ?? {};
@@ -66,21 +89,28 @@ const Checkbox = vui((props, ref) => {
 		...checkboxGroupProps,
 		...props
 	};
-	const { checked, children, className, defaultChecked = groupDefaultValue !== void 0 ? groupDefaultValue.includes(props.value) : void 0, disabled, readOnly, icon: iconProp = "uiCheckboxUnselected", iconChecked = "uiCheckboxSelected", iconIndeterminate = "uiCheckboxIndeterminate", id, inputProps, inputRef, isIndeterminate, label, name, onChange: onChangeProp, required, value, ...rest } = omitThemingProps(mergedProps);
+	const { checked, children, className, defaultChecked = groupDefaultValue !== void 0 ? groupDefaultValue.includes(props.value) : void 0, disabled, errorText, readOnly, helpText, icon: iconProp, iconChecked = "uiCheck", iconIndeterminate = "uiMinus", id: idProp, inputProps, inputRef, isIndeterminate, label, name, onChange: onChangeProp, required, value, ...rest } = omitThemingProps(mergedProps);
 	const [isChecked, setIsChecked] = useState(defaultChecked);
 	const styles = useStyleConfig("Checkbox", mergedProps);
-	const { color: controlColor, hoverColor, ...controlStyles } = styles.control;
-	const icon = isIndeterminate ? iconIndeterminate : isChecked ? iconChecked : iconProp;
-	const controlMr = children || label ? 1 : 0;
-	const color = isChecked || isIndeterminate ? readOnly ? checkboxColors.readOnly : checkboxColors.checked : controlColor;
-	const controlHoverColor = hoverColor ? hoverColor : checkboxColors.hover;
-	const isLongLabel = label && label?.length >= 60;
+	const { color: controlColor, hoverColor, pressedColor, ...controlStyles } = styles.control;
+	const size = mergedProps.size ?? "md";
+	const isCheckedOrIndeterminate = isChecked || isIndeterminate;
+	const { description, descriptionId, errorText: effectiveErrorText, id } = useSelectionControlDescription(idProp, helpText, errorText, isCheckedOrIndeterminate);
+	const markIcon = isIndeterminate ? iconIndeterminate : isChecked ? iconChecked : iconProp;
+	const controlMr = children || label ? controlGap[size] ?? controlGap.md : 0;
+	const { color, controlHoverColor, controlPressedColor, descriptionColor, labelColor } = useSelectionControlColors({
+		controlColor,
+		differentiateUnchecked: true,
+		disabled,
+		errorText: effectiveErrorText,
+		hoverColor,
+		isActive: isCheckedOrIndeterminate,
+		pressedColor,
+		readOnly
+	});
+	const markColor = disabled ? selectionControlDisabled.mark : isCheckedOrIndeterminate ? selectionControlColors.mark : color;
 	const hasJsxChildren = !!children;
-	const jsxChildrenMt = {
-		sm: "3px",
-		md: "2px",
-		lg: "0px"
-	};
+	useDeprecatedLgSize(size, "Checkbox");
 	useEffect(() => {
 		checked !== void 0 && setIsChecked(checked);
 	}, [checked]);
@@ -94,23 +124,27 @@ const Checkbox = vui((props, ref) => {
 		"aria-readonly": readOnly
 	});
 	return /* @__PURE__ */ jsxs(CheckboxBase, {
-		alignItems: isLongLabel || hasJsxChildren ? "flex-start" : "center",
+		alignItems: label || hasJsxChildren ? "flex-start" : "center",
 		className: cs("vui-checkbox", className),
 		controlHoverColor,
+		controlPressedColor,
 		ref,
 		...styles.container,
 		...aliasedProps,
 		...rest,
 		children: [/* @__PURE__ */ jsxs(CheckboxControl, {
-			bg: "white",
+			bg: isCheckedOrIndeterminate ? "currentColor" : "white",
 			className: "vui-checkboxControl",
 			color,
 			focusWithinRing: 3,
+			focusWithinRingColor: selectionControlColors.focus,
 			mr: controlMr,
-			mt: hasJsxChildren ? jsxChildrenMt[mergedProps.size ?? "md"] ?? "2px" : void 0,
+			mt: hasJsxChildren ? jsxChildrenMt[size] ?? jsxChildrenMt.md : label ? labelMt[size] ?? labelMt.md : void 0,
 			role: "none",
 			...controlStyles,
-			children: [/* @__PURE__ */ jsx(CheckboxInput, {
+			children: [/* @__PURE__ */ jsx(SelectionControlInput, {
+				"aria-describedby": descriptionId,
+				"aria-invalid": !!effectiveErrorText || void 0,
 				className: "vui-checkboxInput",
 				onChange,
 				ref: inputRef,
@@ -123,17 +157,32 @@ const Checkbox = vui((props, ref) => {
 				required,
 				value,
 				...inputProps
-			}), /* @__PURE__ */ jsx(Icon, {
+			}), markIcon && /* @__PURE__ */ jsx(Icon, {
 				className: "vui-checkboxIcon",
-				h: "100%",
-				name: icon,
-				w: "100%"
+				color: markColor,
+				h: markSize[size] ?? markSize.md,
+				left: markOffset[size] ?? markOffset.md,
+				name: markIcon,
+				position: "absolute",
+				top: markOffset[size] ?? markOffset.md,
+				w: markSize[size] ?? markSize.md
+			})]
+		}), children ?? (label && /* @__PURE__ */ jsxs(Box, {
+			column: true,
+			children: [/* @__PURE__ */ jsx(T, {
+				className: "vui-checkboxLabel",
+				color: labelColor,
+				variant: "caption",
+				...styles.label,
+				children: label
+			}), description && /* @__PURE__ */ jsx(T, {
+				className: "vui-checkboxDescription",
+				color: descriptionColor,
+				id: descriptionId,
+				mt: "2px",
+				size: "sm",
+				children: description
 			})]
-		}), children ?? (label && /* @__PURE__ */ jsx(T, {
-			className: "vui-checkboxLabel",
-			lineHeight: isLongLabel ? "26px" : "normal",
-			...styles.label,
-			children: label
 		}))]
 	});
 });
@@ -141,5 +190,5 @@ Checkbox.displayName = "Checkbox";
 
 //#endregion
 export { Checkbox, Checkbox as default, CheckboxBase };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=checkbox.js.map

package/dist/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","names":[],"sources":["../../src/checkbox/checkbox.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nimport type { ChangeEvent } from '../utils'\nimport type { CheckboxProps, CheckboxStyleProps } from './checkbox.types'\n\nimport { omitThemingProps, styled, th, useStyleConfig, vui } from '../core'\nimport Icon from '../icon'\nimport T from '../t'\nimport { cs, filterUndefined } from '../utils'\nimport { checkboxColors, disabled } from './consts'\nimport { useCheckboxGroupContext } from './context'\n\nconst CheckboxControl = styled.spanBox`\n  border-radius: none;\n  display: inline-flex;\n  flex-shrink: 0;\n  position: relative;\n  transition-duration: fast;\n`\n\nconst CheckboxInput = styled.input`\n  cursor: inherit;\n  height: 100%;\n  left: 0;\n  margin: 0;\n  opacity: 0;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n  z-index: 1;\n`\n\nexport const CheckboxBase = styled.labelBox<CheckboxStyleProps>`\n  cursor: pointer;\n  display: inline-flex;\n  width: fit-content;\n\n  &:not([aria-disabled='true']):not([aria-readonly='true']):hover .vui-checkboxControl {\n    color: ${p => th.color(p.controlHoverColor)};\n  }\n\n  &[aria-readonly='true'] {\n    cursor: auto;\n  }\n\n  &:not([aria-disabled='true']):not([aria-readonly='true']) .vui-checkboxControl:focus-within {\n    color: ${checkboxColors.focus};\n  }\n\n  &[aria-disabled='true'] {\n    color: ${disabled.text};\n    cursor: not-allowed;\n\n    .vui-checkboxControl {\n      color: ${disabled.icon};\n    }\n  }\n`\n\n/**\n * Allows selection of one or more choices from a set of items. Handles controlled and uncontrolled modes.\n * Uses icons to display itself in different states. Can be indeterminate when selecting some nested items.\n */\nexport const Checkbox = vui<'span', CheckboxProps>((props, ref) => {\n  const { defaultValue: groupDefaultValue, ...checkboxGroupProps } = useCheckboxGroupContext() ?? {}\n\n  const mergedProps = { ...checkboxGroupProps, ...props }\n  const {\n    checked,\n    children,\n    className,\n    defaultChecked = groupDefaultValue !== undefined ? groupDefaultValue.includes(props.value) : undefined,\n    disabled,\n    readOnly,\n    icon: iconProp = 'uiCheckboxUnselected',\n    iconChecked = 'uiCheckboxSelected',\n    iconIndeterminate = 'uiCheckboxIndeterminate',\n    id,\n    inputProps,\n    inputRef,\n    isIndeterminate,\n    label,\n    name,\n    onChange: onChangeProp,\n    required,\n    value,\n    ...rest\n  } = omitThemingProps(mergedProps)\n  const [isChecked, setIsChecked] = useState(defaultChecked)\n  const styles = useStyleConfig('Checkbox', mergedProps)\n  const { color: controlColor, hoverColor, ...controlStyles } = styles.control\n\n  const icon = isIndeterminate ? iconIndeterminate : isChecked ? iconChecked : iconProp\n  const controlMr = children || label ? 1 : 0\n  const color =\n    isChecked || isIndeterminate ? (readOnly ? checkboxColors.readOnly : checkboxColors.checked) : controlColor\n  const controlHoverColor = hoverColor ? hoverColor : checkboxColors.hover\n  const isLongLabel = label && label?.length >= 60\n  const hasJsxChildren = !!children\n  // When JSX children are used, align control to top and offset it to visually center with the first text line.\n  // Offset decreases as control size grows (sm=16px needs more, lg=24px needs none).\n  const jsxChildrenMt: Record<string, string> = { sm: '3px', md: '2px', lg: '0px' }\n\n  useEffect(() => {\n    checked !== undefined && setIsChecked(checked)\n  }, [checked])\n\n  const onChange = (e: ChangeEvent) => {\n    if (readOnly) return\n    if (checked === undefined) setIsChecked(e.target.checked)\n    onChangeProp?.(e)\n  }\n\n  const aliasedProps = filterUndefined({\n    'aria-disabled': disabled,\n    'aria-readonly': readOnly,\n  })\n\n  return (\n    <CheckboxBase\n      alignItems={isLongLabel || hasJsxChildren ? 'flex-start' : 'center'}\n      className={cs('vui-checkbox', className)}\n      controlHoverColor={controlHoverColor}\n      ref={ref}\n      {...styles.container}\n      {...aliasedProps}\n      {...rest}\n    >\n      <CheckboxControl\n        bg=\"white\"\n        className=\"vui-checkboxControl\"\n        color={color}\n        focusWithinRing={3}\n        mr={controlMr}\n        mt={hasJsxChildren ? (jsxChildrenMt[mergedProps.size ?? 'md'] ?? '2px') : undefined}\n        role=\"none\"\n        {...controlStyles}\n      >\n        <CheckboxInput\n          className=\"vui-checkboxInput\"\n          onChange={onChange}\n          ref={inputRef}\n          type=\"checkbox\"\n          {...{ checked, defaultChecked, disabled, id, name, required, value }}\n          {...inputProps}\n        />\n        <Icon className=\"vui-checkboxIcon\" h=\"100%\" name={icon} w=\"100%\" />\n      </CheckboxControl>\n\n      {children ??\n        (label && (\n          <T className=\"vui-checkboxLabel\" lineHeight={isLongLabel ? '26px' : 'normal'} {...styles.label}>\n            {label}\n          </T>\n        ))}\n    </CheckboxBase>\n  )\n})\n\nCheckbox.displayName = 'Checkbox'\nexport default Checkbox\n"],"mappings":";;;;;;;;;;;;;AAYA,MAAM,kBAAkB,OAAO,OAAO;;;;;;;AAQtC,MAAM,gBAAgB,OAAO,KAAK;;;;;;;;;;;;AAalC,MAAa,eAAe,OAAO,QAA4B;;;;;;cAMlD,MAAK,GAAG,MAAM,EAAE,iBAAiB,EAAE;;;;;;;;aAQnC,eAAe,MAAM;;;;aAIrB,SAAS,KAAK;;;;eAIZ,SAAS,KAAK;;;;;;;;AAS7B,MAAa,WAAW,KAA4B,OAAO,QAAQ;CACjE,MAAM,EAAE,cAAc,mBAAmB,GAAG,uBAAuB,wBAAwB,KAAK,CAAC;CAEjG,MAAM,cAAc;EAAE,GAAG;EAAoB,GAAG;CAAM;CACtD,MAAM,EACJ,SACA,UACA,WACA,iBAAiB,sBAAsB,SAAY,kBAAkB,SAAS,MAAM,KAAK,IAAI,QAC7F,UACA,UACA,MAAM,WAAW,wBACjB,cAAc,sBACd,oBAAoB,2BACpB,IACA,YACA,UACA,iBACA,OACA,MACA,UAAU,cACV,UACA,OACA,GAAG,SACD,iBAAiB,WAAW;CAChC,MAAM,CAAC,WAAW,gBAAgB,SAAS,cAAc;CACzD,MAAM,SAAS,eAAe,YAAY,WAAW;CACrD,MAAM,EAAE,OAAO,cAAc,YAAY,GAAG,kBAAkB,OAAO;CAErE,MAAM,OAAO,kBAAkB,oBAAoB,YAAY,cAAc;CAC7E,MAAM,YAAY,YAAY,QAAQ,IAAI;CAC1C,MAAM,QACJ,aAAa,kBAAmB,WAAW,eAAe,WAAW,eAAe,UAAW;CACjG,MAAM,oBAAoB,aAAa,aAAa,eAAe;CACnE,MAAM,cAAc,SAAS,OAAO,UAAU;CAC9C,MAAM,iBAAiB,CAAC,CAAC;CAGzB,MAAM,gBAAwC;EAAE,IAAI;EAAO,IAAI;EAAO,IAAI;CAAM;CAEhF,gBAAgB;EACd,YAAY,UAAa,aAAa,OAAO;CAC/C,GAAG,CAAC,OAAO,CAAC;CAEZ,MAAM,YAAY,MAAmB;EACnC,IAAI,UAAU;EACd,IAAI,YAAY,QAAW,aAAa,EAAE,OAAO,OAAO;EACxD,eAAe,CAAC;CAClB;CAEA,MAAM,eAAe,gBAAgB;EACnC,iBAAiB;EACjB,iBAAiB;CACnB,CAAC;CAED,OACE,qBAAC,cAAD;EACE,YAAY,eAAe,iBAAiB,eAAe;EAC3D,WAAW,GAAG,gBAAgB,SAAS;EACpB;EACd;EACL,GAAI,OAAO;EACX,GAAI;EACJ,GAAI;YAPN,CASE,qBAAC,iBAAD;GACE,IAAG;GACH,WAAU;GACH;GACP,iBAAiB;GACjB,IAAI;GACJ,IAAI,iBAAkB,cAAc,YAAY,QAAQ,SAAS,QAAS;GAC1E,MAAK;GACL,GAAI;aARN,CAUE,oBAAC,eAAD;IACE,WAAU;IACA;IACV,KAAK;IACL,MAAK;IACC;IAAS;IAAgB;IAAU;IAAI;IAAM;IAAU;IAC7D,GAAI;GACL,IACD,oBAAC,MAAD;IAAM,WAAU;IAAmB,GAAE;IAAO,MAAM;IAAM,GAAE;GAAQ,EACnD;MAEhB,aACE,SACC,oBAAC,GAAD;GAAG,WAAU;GAAoB,YAAY,cAAc,SAAS;GAAU,GAAI,OAAO;aACtF;EACA,GAEK;;AAElB,CAAC;AAED,SAAS,cAAc"}
+{"version":3,"file":"checkbox.js","names":["disabledColors","checkboxColors"],"sources":["../../src/checkbox/checkbox.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nimport type { ChangeEvent } from '../utils'\nimport type { CheckboxProps, CheckboxStyleProps } from './checkbox.types'\n\nimport Box from '../box'\nimport { omitThemingProps, styled, th, useStyleConfig, vui } from '../core'\nimport Icon from '../icon'\nimport {\n  SelectionControlInput,\n  useDeprecatedLgSize,\n  useSelectionControlColors,\n  useSelectionControlDescription,\n} from '../selectionControl/selectionControl'\nimport T from '../t'\nimport { cs, filterUndefined } from '../utils'\nimport { checkboxColors, disabled as disabledColors } from './consts'\nimport { useCheckboxGroupContext } from './context'\n\n// Figma \"VUI v5 (modernized)\" Checkbox spec (node 2098:2155/2098:2164): gap between box and label scales with size.\nconst controlGap: Record<string, string> = { lg: '10px', md: '10px', sm: '8px', xs: '6px' }\n// Offset decreases as control size grows, so JSX children stay visually centered with the first text line.\nconst jsxChildrenMt: Record<string, string> = { lg: '0px', md: '0px', sm: '2px', xs: '3px' }\n// Centers the box on the label's first line: (caption line-height 150% of font-size - control box height) / 2.\nconst labelMt: Record<string, string> = { lg: '0px', md: '0px', sm: '0.5px', xs: '1px' }\n// Inner mark (checkmark/minus) size + inset from the box edge, per size (node 2098:2155/2439:576).\nconst markSize: Record<string, string> = { lg: '16px', md: '16px', sm: '13px', xs: '10px' }\nconst markOffset: Record<string, string> = { lg: '3px', md: '3px', sm: '2.5px', xs: '2px' }\n\nconst CheckboxControl = styled.spanBox`\n  border: 1px solid currentColor;\n  border-radius: 0;\n  display: inline-flex;\n  flex-shrink: 0;\n  position: relative;\n  transition-duration: fast;\n`\n\nexport const CheckboxBase = styled.labelBox<CheckboxStyleProps>`\n  cursor: pointer;\n  display: inline-flex;\n  width: fit-content;\n\n  &:not([aria-disabled='true']):not([aria-readonly='true']):hover .vui-checkboxControl {\n    color: ${p => th.color(p.controlHoverColor)};\n  }\n\n  &:not([aria-disabled='true']):not([aria-readonly='true']):active .vui-checkboxControl {\n    color: ${p => th.color(p.controlPressedColor)};\n  }\n\n  &[aria-readonly='true'] {\n    cursor: auto;\n  }\n\n  &[aria-disabled='true'] {\n    color: ${disabledColors.text};\n    cursor: not-allowed;\n\n    .vui-checkboxControl {\n      background-color: ${disabledColors.bg};\n      color: ${disabledColors.icon};\n    }\n  }\n`\n\n/**\n * Allows selection of one or more choices from a set of items. Handles controlled and uncontrolled modes.\n * The box itself is plain CSS (border/background); only the checkmark/minus mark is an icon. Can be\n * indeterminate when selecting some nested items.\n */\nexport const Checkbox = vui<'span', CheckboxProps>((props, ref) => {\n  const { defaultValue: groupDefaultValue, ...checkboxGroupProps } = useCheckboxGroupContext() ?? {}\n\n  const mergedProps = { ...checkboxGroupProps, ...props }\n  const {\n    checked,\n    children,\n    className,\n    defaultChecked = groupDefaultValue !== undefined ? groupDefaultValue.includes(props.value) : undefined,\n    disabled,\n    errorText,\n    readOnly,\n    helpText,\n    icon: iconProp,\n    iconChecked = 'uiCheck',\n    iconIndeterminate = 'uiMinus',\n    id: idProp,\n    inputProps,\n    inputRef,\n    isIndeterminate,\n    label,\n    name,\n    onChange: onChangeProp,\n    required,\n    value,\n    ...rest\n  } = omitThemingProps(mergedProps)\n  const [isChecked, setIsChecked] = useState(defaultChecked)\n  const styles = useStyleConfig('Checkbox', mergedProps)\n  const { color: controlColor, hoverColor, pressedColor, ...controlStyles } = styles.control\n  const size = mergedProps.size ?? 'md'\n  const isCheckedOrIndeterminate = isChecked || isIndeterminate\n  const {\n    description,\n    descriptionId,\n    errorText: effectiveErrorText,\n    id,\n  } = useSelectionControlDescription(idProp, helpText, errorText, isCheckedOrIndeterminate)\n\n  const markIcon = isIndeterminate ? iconIndeterminate : isChecked ? iconChecked : iconProp\n  const controlMr = children || label ? (controlGap[size] ?? controlGap.md) : 0\n  const { color, controlHoverColor, controlPressedColor, descriptionColor, labelColor } = useSelectionControlColors({\n    controlColor,\n    differentiateUnchecked: true,\n    disabled,\n    errorText: effectiveErrorText,\n    hoverColor,\n    isActive: isCheckedOrIndeterminate,\n    pressedColor,\n    readOnly,\n  })\n  // White/inverse mark on the filled checked/indeterminate box; the current border colour otherwise (custom `icon` overlay).\n  const markColor = disabled ? disabledColors.mark : isCheckedOrIndeterminate ? checkboxColors.mark : color\n  const hasJsxChildren = !!children\n\n  useDeprecatedLgSize(size, 'Checkbox')\n\n  useEffect(() => {\n    checked !== undefined && setIsChecked(checked)\n  }, [checked])\n\n  const onChange = (e: ChangeEvent) => {\n    if (readOnly) return\n    if (checked === undefined) setIsChecked(e.target.checked)\n    onChangeProp?.(e)\n  }\n\n  const aliasedProps = filterUndefined({\n    'aria-disabled': disabled,\n    'aria-readonly': readOnly,\n  })\n\n  return (\n    <CheckboxBase\n      alignItems={label || hasJsxChildren ? 'flex-start' : 'center'}\n      className={cs('vui-checkbox', className)}\n      controlHoverColor={controlHoverColor}\n      controlPressedColor={controlPressedColor}\n      ref={ref}\n      {...styles.container}\n      {...aliasedProps}\n      {...rest}\n    >\n      <CheckboxControl\n        bg={isCheckedOrIndeterminate ? 'currentColor' : 'white'}\n        className=\"vui-checkboxControl\"\n        color={color}\n        focusWithinRing={3}\n        focusWithinRingColor={checkboxColors.focus}\n        mr={controlMr}\n        mt={\n          hasJsxChildren ? (jsxChildrenMt[size] ?? jsxChildrenMt.md) : label ? (labelMt[size] ?? labelMt.md) : undefined\n        }\n        role=\"none\"\n        {...controlStyles}\n      >\n        <SelectionControlInput\n          aria-describedby={descriptionId}\n          aria-invalid={!!effectiveErrorText || undefined}\n          className=\"vui-checkboxInput\"\n          onChange={onChange}\n          ref={inputRef}\n          type=\"checkbox\"\n          {...{ checked, defaultChecked, disabled, id, name, required, value }}\n          {...inputProps}\n        />\n        {markIcon && (\n          <Icon\n            className=\"vui-checkboxIcon\"\n            color={markColor}\n            h={markSize[size] ?? markSize.md}\n            left={markOffset[size] ?? markOffset.md}\n            name={markIcon}\n            position=\"absolute\"\n            top={markOffset[size] ?? markOffset.md}\n            w={markSize[size] ?? markSize.md}\n          />\n        )}\n      </CheckboxControl>\n\n      {children ??\n        (label && (\n          <Box column>\n            <T className=\"vui-checkboxLabel\" color={labelColor} variant=\"caption\" {...styles.label}>\n              {label}\n            </T>\n            {description && (\n              <T className=\"vui-checkboxDescription\" color={descriptionColor} id={descriptionId} mt=\"2px\" size=\"sm\">\n                {description}\n              </T>\n            )}\n          </Box>\n        ))}\n    </CheckboxBase>\n  )\n})\n\nCheckbox.displayName = 'Checkbox'\nexport default Checkbox\n"],"mappings":"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"}

package/dist/checkbox/checkbox.types.d.ts

@@ -6,7 +6,7 @@ import { SystemProps } from "../system/system.js";
 import "../system/index.js";
 import { IconProp } from "../icon/icon.types.js";
 import "../icon/index.js";
-import { HTMLAttributes } from "react";
+import { HTMLAttributes, ReactNode } from "react";
 //#region src/checkbox/checkbox.types.d.ts
 type CheckboxProps = SystemProps & ThemingProps<'Checkbox'> & {
   /** Provides value to checkbox in controlled mode. */
@@ -15,13 +15,17 @@ type CheckboxProps = SystemProps & ThemingProps<'Checkbox'> & {
   colorScheme?: 'blue' | 'prussian';
   /** Disables checkbox and related elements with the right styling. */
   disabled?: boolean;
+  /** Socket displaying error text below the label. Overrides `helpText` and marks the input as invalid. */
+  errorText?: ReactNode;
   /** Makes the checkbox non-interactive while keeping normal styling. Value cannot be changed by the user. */
   readOnly?: boolean;
-  /** Icon used when not checked. @default cuiCheckboxUnselected */
+  /** Socket displaying help text below the label. */
+  helpText?: ReactNode;
+  /** Icon overlaid on the box when not checked. Unset by default — the box itself is plain CSS (border/background). */
   icon?: IconProp;
-  /** Icon used when checked. @default cuiCheckboxSelected */
+  /** Icon overlaid on the box when checked. @default uiCheck */
   iconChecked?: IconProp;
-  /** Icon used when in indeterminte state. @default cuiCheckboxIndeterminate */
+  /** Icon overlaid on the box when in indeterminate state. @default uiMinus */
   iconIndeterminate?: IconProp;
   /** Props object passed to the inner input element. */
   inputProps?: HTMLAttributes<HTMLInputElement>;
@@ -47,6 +51,8 @@ type CheckboxProps = SystemProps & ThemingProps<'Checkbox'> & {
 type CheckboxStyleProps = {
   /** Styles the icon when any part of the checkbox is hovered. */
   controlHoverColor: string;
+  /** Styles the icon when the checkbox is actively pressed. */
+  controlPressedColor: string;
 };
 //#endregion
 export { CheckboxProps, CheckboxStyleProps };

package/dist/checkbox/checkbox.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.types.d.ts","names":[],"sources":["../../src/checkbox/checkbox.types.ts"],"mappings":";;;;;;;;;;KAOY,gBAAgB,cAC1B;;EAEE;;EAEA;;EAEA;;EAEA;;EAEA,OAAO;;EAEP,cAAc;;EAEd,oBAAoB;;EAEpB,aAAa,eAAe;;EAE5B,WAAW,MAAM,iBAAiB;;EAElC;;EAEA;;EAEA;;EAEA,SAAS;;EAET,WAAW;;EAEX,UAAU;;EAEV;;EAEA;;KAGQ;;EAEV"}
+{"version":3,"file":"checkbox.types.d.ts","names":[],"sources":["../../src/checkbox/checkbox.types.ts"],"mappings":";;;;;;;;;;KAOY,gBAAgB,cAC1B;;EAEE;;EAEA;;EAEA;;EAEA,YAAY;;EAEZ;;EAEA,WAAW;;EAEX,OAAO;;EAEP,cAAc;;EAEd,oBAAoB;;EAEpB,aAAa,eAAe;;EAE5B,WAAW,MAAM,iBAAiB;;EAElC;;EAEA;;EAEA;;EAEA,SAAS;;EAET,WAAW;;EAEX,UAAU;;EAEV;;EAEA;;KAGQ;;EAEV;;EAEA"}

package/dist/checkbox/checkboxGroup.d.ts

@@ -6,7 +6,8 @@ import "../index.js";
 declare const CheckboxGroupBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, SystemProps, never>;
 /**
  * Organizes layout and display of multiple checkboxes as a row or column.
- * Exposes some props to the children via context.
+ * Exposes some props to the children via context. `label`/`helpText` render an optional group
+ * heading/description around the stack.
  */
 declare const CheckboxGroup: VuiComponent<"div", CheckboxGroupProps>;
 //#endregion

package/dist/checkbox/checkboxGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkboxGroup.d.ts","names":[],"sources":["../../src/checkbox/checkboxGroup.tsx"],"mappings":";;;;;cAQa,+CAAiB,mDAAA,cAAjB;;;;;cASA,eAAa,oBAAA"}
+{"version":3,"file":"checkboxGroup.d.ts","names":[],"sources":["../../src/checkbox/checkboxGroup.tsx"],"mappings":";;;;;cAgBa,+CAAiB,mDAAA,cAAjB;;;;;;cAUA,eAAa,oBAAA"}

package/dist/checkbox/checkboxGroup.js

@@ -1,10 +1,14 @@
 import { filterUndefined } from "../utils/object.js";
 import { cs } from "../utils/styles.js";
+import { selectionControlGroupGap, selectionControlLabelSize, selectionControlStackGap } from "../selectionControl/theme.js";
+import { selectionControlColors } from "../selectionControl/consts.js";
 import styled from "../core/styled.js";
 import vui from "../core/vui.js";
+import { Box } from "../box/box.js";
+import { T } from "../t/t.js";
 import { CheckboxGroupProvider } from "./context.js";
-import { useMemo } from "react";
-import { jsx } from "react/jsx-runtime";
+import { useId, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/checkbox/checkboxGroup.tsx
 const CheckboxGroupBase = styled.divBox`
@@ -13,10 +17,11 @@ const CheckboxGroupBase = styled.divBox`
 `;
 /**
 * Organizes layout and display of multiple checkboxes as a row or column.
-* Exposes some props to the children via context.
+* Exposes some props to the children via context. `label`/`helpText` render an optional group
+* heading/description around the stack.
 */
 const CheckboxGroup = vui((props, ref) => {
-	const { className, defaultValue, disabled, isRow, name, onBlur, onChange, onFocus, size, variant, ...rest } = props;
+	const { children, className, defaultValue, disabled, gap, groupGap: groupGapProp, helpText, isRow, label, name, onBlur, onChange, onFocus, size, variant, ...rest } = props;
 	const context = useMemo(() => filterUndefined({
 		defaultValue,
 		disabled,
@@ -36,14 +41,57 @@ const CheckboxGroup = vui((props, ref) => {
 		size,
 		variant
 	]);
-	const aliasedProps = filterUndefined({ flexDirection: isRow ? "row" : void 0 });
-	return /* @__PURE__ */ jsx(CheckboxGroupProvider, {
+	const groupSize = size ?? "md";
+	const aliasedProps = filterUndefined({
+		flexDirection: isRow ? "row" : void 0,
+		gap: gap ?? selectionControlStackGap[groupSize] ?? selectionControlStackGap.md
+	});
+	const generatedId = useId();
+	const labelId = label ? `${generatedId}-label` : void 0;
+	const helpTextId = helpText ? `${generatedId}-help-text` : void 0;
+	if (!label && !helpText) return /* @__PURE__ */ jsx(CheckboxGroupProvider, {
 		value: context,
 		children: /* @__PURE__ */ jsx(CheckboxGroupBase, {
 			className: cs("vui-checkboxGroup", className),
 			ref,
 			...aliasedProps,
-			...rest
+			...rest,
+			children
+		})
+	});
+	return /* @__PURE__ */ jsx(CheckboxGroupProvider, {
+		value: context,
+		children: /* @__PURE__ */ jsxs(Box, {
+			className: cs("vui-checkboxGroup", className),
+			column: true,
+			gap: groupGapProp ?? selectionControlGroupGap[groupSize] ?? selectionControlGroupGap.md,
+			ref,
+			...rest,
+			children: [
+				label && /* @__PURE__ */ jsx(T, {
+					className: "vui-checkboxGroupLabel",
+					color: selectionControlColors.label,
+					fontWeight: "demi",
+					id: labelId,
+					size: selectionControlLabelSize[groupSize] ?? selectionControlLabelSize.md,
+					children: label
+				}),
+				/* @__PURE__ */ jsx(CheckboxGroupBase, {
+					"aria-describedby": helpTextId,
+					"aria-labelledby": labelId,
+					className: "vui-checkboxGroupStack",
+					role: "group",
+					...aliasedProps,
+					children
+				}),
+				helpText && /* @__PURE__ */ jsx(T, {
+					className: "vui-checkboxGroupHelpText",
+					color: selectionControlColors.helper,
+					id: helpTextId,
+					size: "xs",
+					children: helpText
+				})
+			]
 		})
 	});
 });
@@ -51,5 +99,5 @@ CheckboxGroup.displayName = "CheckboxGroup";
 
 //#endregion
 export { CheckboxGroup, CheckboxGroup as default, CheckboxGroupBase };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=checkboxGroup.js.map

package/dist/checkbox/checkboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkboxGroup.js","names":[],"sources":["../../src/checkbox/checkboxGroup.tsx"],"sourcesContent":["import { useMemo } from 'react'\n\nimport type { CheckboxGroupProps } from './checkboxGroup.types'\n\nimport { styled, vui } from '../core'\nimport { cs, filterUndefined } from '../utils'\nimport { CheckboxGroupProvider } from './context'\n\nexport const CheckboxGroupBase = styled.divBox`\n  display: flex;\n  flex-direction: column;\n`\n\n/**\n * Organizes layout and display of multiple checkboxes as a row or column.\n * Exposes some props to the children via context.\n */\nexport const CheckboxGroup = vui<'div', CheckboxGroupProps>((props, ref) => {\n  const { className, defaultValue, disabled, isRow, name, onBlur, onChange, onFocus, size, variant, ...rest } = props\n\n  const context = useMemo(\n    () => filterUndefined({ defaultValue, disabled, name, onBlur, onChange, onFocus, size, variant }),\n    [defaultValue, disabled, name, onBlur, onChange, onFocus, size, variant],\n  )\n\n  const aliasedProps = filterUndefined({\n    flexDirection: isRow ? 'row' : undefined,\n  } as const)\n\n  return (\n    <CheckboxGroupProvider value={context}>\n      <CheckboxGroupBase className={cs('vui-checkboxGroup', className)} ref={ref} {...aliasedProps} {...rest} />\n    </CheckboxGroupProvider>\n  )\n})\n\nCheckboxGroup.displayName = 'CheckboxGroup'\n\nexport default CheckboxGroup\n"],"mappings":";;;;;;;;;AAQA,MAAa,oBAAoB,OAAO,MAAM;;;;;;;;AAS9C,MAAa,gBAAgB,KAAgC,OAAO,QAAQ;CAC1E,MAAM,EAAE,WAAW,cAAc,UAAU,OAAO,MAAM,QAAQ,UAAU,SAAS,MAAM,SAAS,GAAG,SAAS;CAE9G,MAAM,UAAU,cACR,gBAAgB;EAAE;EAAc;EAAU;EAAM;EAAQ;EAAU;EAAS;EAAM;CAAQ,CAAC,GAChG;EAAC;EAAc;EAAU;EAAM;EAAQ;EAAU;EAAS;EAAM;CAAO,CACzE;CAEA,MAAM,eAAe,gBAAgB,EACnC,eAAe,QAAQ,QAAQ,OACjC,CAAU;CAEV,OACE,oBAAC,uBAAD;EAAuB,OAAO;YAC5B,oBAAC,mBAAD;GAAmB,WAAW,GAAG,qBAAqB,SAAS;GAAQ;GAAK,GAAI;GAAc,GAAI;EAAO;CACpF;AAE3B,CAAC;AAED,cAAc,cAAc"}
+{"version":3,"file":"checkboxGroup.js","names":["checkboxColors"],"sources":["../../src/checkbox/checkboxGroup.tsx"],"sourcesContent":["import { useId, useMemo } from 'react'\n\nimport type { CheckboxGroupProps } from './checkboxGroup.types'\n\nimport Box from '../box'\nimport { styled, vui } from '../core'\nimport {\n  selectionControlGroupGap,\n  selectionControlLabelSize,\n  selectionControlStackGap,\n} from '../selectionControl/theme'\nimport T from '../t'\nimport { cs, filterUndefined } from '../utils'\nimport { checkboxColors } from './consts'\nimport { CheckboxGroupProvider } from './context'\n\nexport const CheckboxGroupBase = styled.divBox`\n  display: flex;\n  flex-direction: column;\n`\n\n/**\n * Organizes layout and display of multiple checkboxes as a row or column.\n * Exposes some props to the children via context. `label`/`helpText` render an optional group\n * heading/description around the stack.\n */\nexport const CheckboxGroup = vui<'div', CheckboxGroupProps>((props, ref) => {\n  const {\n    children,\n    className,\n    defaultValue,\n    disabled,\n    gap,\n    groupGap: groupGapProp,\n    helpText,\n    isRow,\n    label,\n    name,\n    onBlur,\n    onChange,\n    onFocus,\n    size,\n    variant,\n    ...rest\n  } = props\n\n  const context = useMemo(\n    () => filterUndefined({ defaultValue, disabled, name, onBlur, onChange, onFocus, size, variant }),\n    [defaultValue, disabled, name, onBlur, onChange, onFocus, size, variant],\n  )\n\n  const groupSize = size ?? 'md'\n  // `gap` (SystemProps) always controls checkbox-to-checkbox spacing; `groupGap` only applies to the\n  // label/help-text wrapper below, so the two can't collide when both are set.\n  const aliasedProps = filterUndefined({\n    flexDirection: isRow ? 'row' : undefined,\n    gap: gap ?? selectionControlStackGap[groupSize] ?? selectionControlStackGap.md,\n  } as const)\n\n  const generatedId = useId()\n  const labelId = label ? `${generatedId}-label` : undefined\n  const helpTextId = helpText ? `${generatedId}-help-text` : undefined\n\n  if (!label && !helpText) {\n    return (\n      <CheckboxGroupProvider value={context}>\n        <CheckboxGroupBase className={cs('vui-checkboxGroup', className)} ref={ref} {...aliasedProps} {...rest}>\n          {children}\n        </CheckboxGroupBase>\n      </CheckboxGroupProvider>\n    )\n  }\n\n  return (\n    <CheckboxGroupProvider value={context}>\n      <Box\n        className={cs('vui-checkboxGroup', className)}\n        column\n        gap={groupGapProp ?? selectionControlGroupGap[groupSize] ?? selectionControlGroupGap.md}\n        ref={ref}\n        {...rest}\n      >\n        {label && (\n          <T\n            className=\"vui-checkboxGroupLabel\"\n            color={checkboxColors.label}\n            fontWeight=\"demi\"\n            id={labelId}\n            size={selectionControlLabelSize[groupSize] ?? selectionControlLabelSize.md}\n          >\n            {label}\n          </T>\n        )}\n        <CheckboxGroupBase\n          aria-describedby={helpTextId}\n          aria-labelledby={labelId}\n          className=\"vui-checkboxGroupStack\"\n          role=\"group\"\n          {...aliasedProps}\n        >\n          {children}\n        </CheckboxGroupBase>\n        {helpText && (\n          <T className=\"vui-checkboxGroupHelpText\" color={checkboxColors.helper} id={helpTextId} size=\"xs\">\n            {helpText}\n          </T>\n        )}\n      </Box>\n    </CheckboxGroupProvider>\n  )\n})\n\nCheckboxGroup.displayName = 'CheckboxGroup'\n\nexport default CheckboxGroup\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAa,oBAAoB,OAAO,MAAM;;;;;;;;;AAU9C,MAAa,gBAAgB,KAAgC,OAAO,QAAQ;CAC1E,MAAM,EACJ,UACA,WACA,cACA,UACA,KACA,UAAU,cACV,UACA,OACA,OACA,MACA,QACA,UACA,SACA,MACA,SACA,GAAG,SACD;CAEJ,MAAM,UAAU,cACR,gBAAgB;EAAE;EAAc;EAAU;EAAM;EAAQ;EAAU;EAAS;EAAM;CAAQ,CAAC,GAChG;EAAC;EAAc;EAAU;EAAM;EAAQ;EAAU;EAAS;EAAM;CAAO,CACzE;CAEA,MAAM,YAAY,QAAQ;CAG1B,MAAM,eAAe,gBAAgB;EACnC,eAAe,QAAQ,QAAQ;EAC/B,KAAK,OAAO,yBAAyB,cAAc,yBAAyB;CAC9E,CAAU;CAEV,MAAM,cAAc,MAAM;CAC1B,MAAM,UAAU,QAAQ,GAAG,YAAY,UAAU;CACjD,MAAM,aAAa,WAAW,GAAG,YAAY,cAAc;CAE3D,IAAI,CAAC,SAAS,CAAC,UACb,OACE,oBAAC,uBAAD;EAAuB,OAAO;YAC5B,oBAAC,mBAAD;GAAmB,WAAW,GAAG,qBAAqB,SAAS;GAAQ;GAAK,GAAI;GAAc,GAAI;GAC/F;EACgB;CACE;CAI3B,OACE,oBAAC,uBAAD;EAAuB,OAAO;YAC5B,qBAAC,KAAD;GACE,WAAW,GAAG,qBAAqB,SAAS;GAC5C;GACA,KAAK,gBAAgB,yBAAyB,cAAc,yBAAyB;GAChF;GACL,GAAI;aALN;IAOG,SACC,oBAAC,GAAD;KACE,WAAU;KACV,OAAOA,uBAAe;KACtB,YAAW;KACX,IAAI;KACJ,MAAM,0BAA0B,cAAc,0BAA0B;eAEvE;IACA;IAEL,oBAAC,mBAAD;KACE,oBAAkB;KAClB,mBAAiB;KACjB,WAAU;KACV,MAAK;KACL,GAAI;KAEH;IACgB;IAClB,YACC,oBAAC,GAAD;KAAG,WAAU;KAA4B,OAAOA,uBAAe;KAAQ,IAAI;KAAY,MAAK;eACzF;IACA;GAEF;;CACgB;AAE3B,CAAC;AAED,cAAc,cAAc"}

package/dist/checkbox/checkboxGroup.types.d.ts

@@ -4,14 +4,25 @@ import { ThemingProps } from "../theme/types.js";
 import "../theme/index.js";
 import { SystemProps } from "../system/system.js";
 import "../system/index.js";
+import { ReactNode } from "react";
 //#region src/checkbox/checkboxGroup.types.d.ts
 type CheckboxGroupProps = SystemProps & ThemingProps<'Checkbox'> & {
   /** Deprecated. Please use variant instead. @deprecated  */
   colorScheme?: 'blue' | 'prussian';
   /** Passes the prop to each checkbox. */
   disabled?: boolean;
+  /**
+   * Overrides the gap between the group label/help text and the checkbox stack (defaults to a
+   * size-scaled value). Only takes effect when `label` or `helpText` is set. `gap` (from
+   * `SystemProps`) overrides the gap between individual checkboxes in either case.
+   */
+  groupGap?: SystemProps['gap'];
+  /** Help text rendered below the checkbox stack. */
+  helpText?: ReactNode;
   /** Displays checkboxes in a row. */
   isRow?: boolean;
+  /** Group heading rendered above the checkbox stack. */
+  label?: ReactNode;
   /** Passes the prop to each checkbox. */
   name?: string;
   /** Passes the prop to each checkbox. */

package/dist/checkbox/checkboxGroup.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkboxGroup.types.d.ts","names":[],"sources":["../../src/checkbox/checkboxGroup.types.ts"],"mappings":";;;;;;;KAIY,qBAAqB,cAC/B;;EAEE;;EAEA;;EAEA;;EAEA;;EAEA,SAAS;;EAET,WAAW;;EAEX,UAAU"}
+{"version":3,"file":"checkboxGroup.types.d.ts","names":[],"sources":["../../src/checkbox/checkboxGroup.types.ts"],"mappings":";;;;;;;;KAMY,qBAAqB,cAC/B;;EAEE;;EAEA;;;;;;EAMA,WAAW;;EAEX,WAAW;;EAEX;;EAEA,QAAQ;;EAER;;EAEA,SAAS;;EAET,WAAW;;EAEX,UAAU"}

package/dist/checkbox/context.js

@@ -5,5 +5,5 @@ const [CheckboxGroupProvider, useCheckboxGroupContext] = createContext({ isOptio
 
 //#endregion
 export { CheckboxGroupProvider, useCheckboxGroupContext };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=context.js.map

package/dist/checkbox/theme.js

@@ -1,12 +1,14 @@
-import { checkboxColors } from "./consts.js";
+import { selectionControlSizes } from "../selectionControl/theme.js";
+import { selectionControlColors } from "../selectionControl/consts.js";
 
 //#region src/checkbox/theme.ts
 const baseStyle = {
 	control: {
-		color: checkboxColors.unchecked,
-		hoverColor: checkboxColors.hover
+		color: selectionControlColors.unchecked,
+		hoverColor: selectionControlColors.hover,
+		pressedColor: selectionControlColors.pressed
 	},
-	container: { alignItems: "flext-start" }
+	container: {}
 };
 const defaultProps = { size: "md" };
 const parts = [
@@ -14,29 +16,7 @@ const parts = [
 	"control",
 	"label"
 ];
-const sizes = {
-	sm: {
-		control: {
-			h: 16,
-			w: 16
-		},
-		label: { size: "sm" }
-	},
-	md: {
-		control: {
-			h: 20,
-			w: 20
-		},
-		label: { size: "md" }
-	},
-	lg: {
-		control: {
-			h: 24,
-			w: 24
-		},
-		label: { size: "lg" }
-	}
-};
+const sizes = selectionControlSizes;
 const variants = {};
 var theme_default = {
 	baseStyle,
@@ -48,5 +28,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=theme.js.map

package/dist/checkbox/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","names":[],"sources":["../../src/checkbox/theme.ts"],"sourcesContent":["import { checkboxColors } from './consts'\n\nconst baseStyle = {\n  control: {\n    color: checkboxColors.unchecked,\n    hoverColor: checkboxColors.hover,\n  },\n  container: {\n    alignItems: 'flext-start',\n  },\n}\n\nconst defaultProps = {\n  size: 'md',\n}\n\nconst parts = ['container', 'control', 'label']\n\nconst sizes = {\n  sm: {\n    control: {\n      h: 16,\n      w: 16,\n    },\n    label: {\n      size: 'sm',\n    },\n  },\n  md: {\n    control: {\n      h: 20,\n      w: 20,\n    },\n    label: {\n      size: 'md',\n    },\n  },\n  lg: {\n    control: {\n      h: 24,\n      w: 24,\n    },\n    label: {\n      size: 'lg',\n    },\n  },\n}\n\nconst variants = {}\n\nexport default {\n  baseStyle,\n  defaultProps,\n  parts,\n  sizes,\n  variants,\n}\n"],"mappings":";;;AAEA,MAAM,YAAY;CAChB,SAAS;EACP,OAAO,eAAe;EACtB,YAAY,eAAe;CAC7B;CACA,WAAW,EACT,YAAY,cACd;AACF;AAEA,MAAM,eAAe,EACnB,MAAM,KACR;AAEA,MAAM,QAAQ;CAAC;CAAa;CAAW;AAAO;AAE9C,MAAM,QAAQ;CACZ,IAAI;EACF,SAAS;GACP,GAAG;GACH,GAAG;EACL;EACA,OAAO,EACL,MAAM,KACR;CACF;CACA,IAAI;EACF,SAAS;GACP,GAAG;GACH,GAAG;EACL;EACA,OAAO,EACL,MAAM,KACR;CACF;CACA,IAAI;EACF,SAAS;GACP,GAAG;GACH,GAAG;EACL;EACA,OAAO,EACL,MAAM,KACR;CACF;AACF;AAEA,MAAM,WAAW,CAAC;AAElB,oBAAe;CACb;CACA;CACA;CACA;CACA;AACF"}
+{"version":3,"file":"theme.js","names":["checkboxColors"],"sources":["../../src/checkbox/theme.ts"],"sourcesContent":["import { selectionControlSizes } from '../selectionControl/theme'\nimport { checkboxColors } from './consts'\n\nconst baseStyle = {\n  control: {\n    color: checkboxColors.unchecked,\n    hoverColor: checkboxColors.hover,\n    pressedColor: checkboxColors.pressed,\n  },\n  // `alignItems` is computed in checkbox.tsx (centered vs. top-aligned depending on content) — not set here,\n  // since a static value would silently override that logic when spread onto CheckboxBase.\n  container: {},\n}\n\nconst defaultProps = {\n  size: 'md',\n}\n\nconst parts = ['container', 'control', 'label']\n\n// Sizes/gaps shared with Radio — see `selectionControl/theme.ts`. `lg` kept as a deprecated alias\n// for `md` for backwards compatibility.\nconst sizes = selectionControlSizes\n\nconst variants = {}\n\nexport default {\n  baseStyle,\n  defaultProps,\n  parts,\n  sizes,\n  variants,\n}\n"],"mappings":";;;;AAGA,MAAM,YAAY;CAChB,SAAS;EACP,OAAOA,uBAAe;EACtB,YAAYA,uBAAe;EAC3B,cAAcA,uBAAe;CAC/B;CAGA,WAAW,CAAC;AACd;AAEA,MAAM,eAAe,EACnB,MAAM,KACR;AAEA,MAAM,QAAQ;CAAC;CAAa;CAAW;AAAO;AAI9C,MAAM,QAAQ;AAEd,MAAM,WAAW,CAAC;AAElB,oBAAe;CACb;CACA;CACA;CACA;CACA;AACF"}

package/dist/copyToClipboard/copyToClipboard.js

@@ -10,7 +10,7 @@ import { jsx } from "react/jsx-runtime";
 const defaultIcon = "uiCopy";
 const checkedIcon = "uiCheck";
 const getCopyValue = (props) => {
-	if (props.label !== void 0) return props.label;
+	if (props.value !== void 0) return props.value;
 	return props.copyText;
 };
 /**
@@ -23,7 +23,8 @@ const getCopyValue = (props) => {
 */
 const CopyToClipboard = vui((props, ref) => {
 	const value = getCopyValue(props);
-	const { disabled, copyText, label, className, icon = defaultIcon, size = "sm", variant = "tertiary", intent = "brand", showTooltip = true, ...rest } = props;
+	const { disabled, copyText, value: _value, label, className, icon = defaultIcon, size = "sm", variant = "tertiary", intent = "brand", showTooltip = true, ...rest } = props;
+	const actionLabel = label || value;
 	const [state, setState] = useState("idle");
 	const resetTimerRef = useRef(void 0);
 	useEffect(() => () => {
@@ -31,11 +32,11 @@ const CopyToClipboard = vui((props, ref) => {
 	}, []);
 	const texts = {
 		idle: {
-			label: `Copy ${value}`,
+			label: `Copy ${actionLabel}`,
 			icon
 		},
 		copied: {
-			label: `Copied ${value}`,
+			label: `Copied ${actionLabel}`,
 			icon: checkedIcon
 		}
 	};
@@ -65,9 +66,9 @@ const CopyToClipboard = vui((props, ref) => {
 		children: button
 	}) : button;
 });
-CopyToClipboard.displayName = "Copy To Clipboard";
+CopyToClipboard.displayName = "CopyToClipboard";
 
 //#endregion
 export { CopyToClipboard, CopyToClipboard as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=copyToClipboard.js.map

package/dist/copyToClipboard/copyToClipboard.js.map

@@ -1 +1 @@
-{"version":3,"file":"copyToClipboard.js","names":[],"sources":["../../src/copyToClipboard/copyToClipboard.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\n\nimport type { IconProp } from '../icon'\nimport type { CopyToClipboardProps } from './copyToClipboard.types'\n\nimport Button from '../button'\nimport { vui } from '../core'\nimport { Tooltip } from '../tooltip'\nimport { cs } from '../utils'\nimport { useCopyToClipboard } from './useCopyToClipboard'\n\nconst defaultIcon: IconProp = 'uiCopy'\nconst checkedIcon: IconProp = 'uiCheck'\n\nconst getCopyValue = (props: CopyToClipboardProps): string => {\n  if (props.label !== undefined) return props.label\n  return props.copyText\n}\n\n/**\n * A helper button component.\n *\n * Copies the provided text to clipboard.\n *\n * Copying is available only for a secure environment (https://), otherwise the button is disabled.\n *\n */\nexport const CopyToClipboard = vui<'button', CopyToClipboardProps>((props, ref) => {\n  const value = getCopyValue(props)\n  const {\n    disabled,\n    copyText,\n    label,\n    className,\n    icon = defaultIcon,\n    size = 'sm',\n    variant = 'tertiary',\n    intent = 'brand',\n    showTooltip = true,\n    ...rest\n  } = props\n  const [state, setState] = useState<'idle' | 'copied'>('idle')\n  const resetTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)\n\n  useEffect(\n    () => () => {\n      if (resetTimerRef.current !== undefined) clearTimeout(resetTimerRef.current)\n    },\n    [],\n  )\n\n  const texts: Record<'idle' | 'copied', { label: string; icon: IconProp }> = {\n    idle: {\n      label: `Copy ${value}`,\n      icon: icon,\n    },\n    copied: {\n      label: `Copied ${value}`,\n      icon: checkedIcon,\n    },\n  }\n\n  const { copy, isCopyDisabled } = useCopyToClipboard(value, { showToast: false })\n\n  const button = (\n    <Button\n      aria-label={texts[state].label}\n      className={cs('vui-copy-to-clipboard', className)}\n      disabled={disabled || isCopyDisabled}\n      icon={texts[state].icon}\n      intent={intent}\n      onClick={() => {\n        copy()\n        setState('copied')\n        if (resetTimerRef.current !== undefined) clearTimeout(resetTimerRef.current)\n        resetTimerRef.current = setTimeout(() => {\n          setState('idle')\n          resetTimerRef.current = undefined\n        }, 1_000)\n      }}\n      ref={ref}\n      size={size}\n      variant={variant}\n      {...rest}\n    />\n  )\n\n  return showTooltip ? <Tooltip text={texts[state].label}>{button}</Tooltip> : button\n})\n\nCopyToClipboard.displayName = 'Copy To Clipboard'\nexport default CopyToClipboard\n"],"mappings":";;;;;;;;;AAWA,MAAM,cAAwB;AAC9B,MAAM,cAAwB;AAE9B,MAAM,gBAAgB,UAAwC;CAC5D,IAAI,MAAM,UAAU,QAAW,OAAO,MAAM;CAC5C,OAAO,MAAM;AACf;;;;;;;;;AAUA,MAAa,kBAAkB,KAAqC,OAAO,QAAQ;CACjF,MAAM,QAAQ,aAAa,KAAK;CAChC,MAAM,EACJ,UACA,UACA,OACA,WACA,OAAO,aACP,OAAO,MACP,UAAU,YACV,SAAS,SACT,cAAc,MACd,GAAG,SACD;CACJ,MAAM,CAAC,OAAO,YAAY,SAA4B,MAAM;CAC5D,MAAM,gBAAgB,OAAkD,MAAS;CAEjF,sBACc;EACV,IAAI,cAAc,YAAY,QAAW,aAAa,cAAc,OAAO;CAC7E,GACA,CAAC,CACH;CAEA,MAAM,QAAsE;EAC1E,MAAM;GACJ,OAAO,QAAQ;GACT;EACR;EACA,QAAQ;GACN,OAAO,UAAU;GACjB,MAAM;EACR;CACF;CAEA,MAAM,EAAE,MAAM,mBAAmB,mBAAmB,OAAO,EAAE,WAAW,MAAM,CAAC;CAE/E,MAAM,SACJ,oBAAC,QAAD;EACE,cAAY,MAAM,MAAM,CAAC;EACzB,WAAW,GAAG,yBAAyB,SAAS;EAChD,UAAU,YAAY;EACtB,MAAM,MAAM,MAAM,CAAC;EACX;EACR,eAAe;GACb,KAAK;GACL,SAAS,QAAQ;GACjB,IAAI,cAAc,YAAY,QAAW,aAAa,cAAc,OAAO;GAC3E,cAAc,UAAU,iBAAiB;IACvC,SAAS,MAAM;IACf,cAAc,UAAU;GAC1B,GAAG,GAAK;EACV;EACK;EACC;EACG;EACT,GAAI;CACL;CAGH,OAAO,cAAc,oBAAC,SAAD;EAAS,MAAM,MAAM,MAAM,CAAC;YAAQ;CAAgB,KAAI;AAC/E,CAAC;AAED,gBAAgB,cAAc"}
+{"version":3,"file":"copyToClipboard.js","names":[],"sources":["../../src/copyToClipboard/copyToClipboard.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\n\nimport type { IconProp } from '../icon'\nimport type { CopyToClipboardProps } from './copyToClipboard.types'\n\nimport Button from '../button'\nimport { vui } from '../core'\nimport { Tooltip } from '../tooltip'\nimport { cs } from '../utils'\nimport { useCopyToClipboard } from './useCopyToClipboard'\n\nconst defaultIcon: IconProp = 'uiCopy'\nconst checkedIcon: IconProp = 'uiCheck'\n\nconst getCopyValue = (props: CopyToClipboardProps): string => {\n  if (props.value !== undefined) return props.value\n  return props.copyText\n}\n\n/**\n * A helper button component.\n *\n * Copies the provided text to clipboard.\n *\n * Copying is available only for a secure environment (https://), otherwise the button is disabled.\n *\n */\nexport const CopyToClipboard = vui<'button', CopyToClipboardProps>((props, ref) => {\n  const value = getCopyValue(props)\n  const {\n    disabled,\n    copyText,\n    value: _value,\n    label,\n    className,\n    icon = defaultIcon,\n    size = 'sm',\n    variant = 'tertiary',\n    intent = 'brand',\n    showTooltip = true,\n    ...rest\n  } = props\n  const actionLabel = label || value\n  const [state, setState] = useState<'idle' | 'copied'>('idle')\n  const resetTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)\n\n  useEffect(\n    () => () => {\n      if (resetTimerRef.current !== undefined) clearTimeout(resetTimerRef.current)\n    },\n    [],\n  )\n\n  const texts: Record<'idle' | 'copied', { label: string; icon: IconProp }> = {\n    idle: {\n      label: `Copy ${actionLabel}`,\n      icon: icon,\n    },\n    copied: {\n      label: `Copied ${actionLabel}`,\n      icon: checkedIcon,\n    },\n  }\n\n  const { copy, isCopyDisabled } = useCopyToClipboard(value, { showToast: false })\n\n  const button = (\n    <Button\n      aria-label={texts[state].label}\n      className={cs('vui-copy-to-clipboard', className)}\n      disabled={disabled || isCopyDisabled}\n      icon={texts[state].icon}\n      intent={intent}\n      onClick={() => {\n        copy()\n        setState('copied')\n        if (resetTimerRef.current !== undefined) clearTimeout(resetTimerRef.current)\n        resetTimerRef.current = setTimeout(() => {\n          setState('idle')\n          resetTimerRef.current = undefined\n        }, 1_000)\n      }}\n      ref={ref}\n      size={size}\n      variant={variant}\n      {...rest}\n    />\n  )\n\n  return showTooltip ? <Tooltip text={texts[state].label}>{button}</Tooltip> : button\n})\n\nCopyToClipboard.displayName = 'CopyToClipboard'\nexport default CopyToClipboard\n"],"mappings":";;;;;;;;;AAWA,MAAM,cAAwB;AAC9B,MAAM,cAAwB;AAE9B,MAAM,gBAAgB,UAAwC;CAC5D,IAAI,MAAM,UAAU,QAAW,OAAO,MAAM;CAC5C,OAAO,MAAM;AACf;;;;;;;;;AAUA,MAAa,kBAAkB,KAAqC,OAAO,QAAQ;CACjF,MAAM,QAAQ,aAAa,KAAK;CAChC,MAAM,EACJ,UACA,UACA,OAAO,QACP,OACA,WACA,OAAO,aACP,OAAO,MACP,UAAU,YACV,SAAS,SACT,cAAc,MACd,GAAG,SACD;CACJ,MAAM,cAAc,SAAS;CAC7B,MAAM,CAAC,OAAO,YAAY,SAA4B,MAAM;CAC5D,MAAM,gBAAgB,OAAkD,MAAS;CAEjF,sBACc;EACV,IAAI,cAAc,YAAY,QAAW,aAAa,cAAc,OAAO;CAC7E,GACA,CAAC,CACH;CAEA,MAAM,QAAsE;EAC1E,MAAM;GACJ,OAAO,QAAQ;GACT;EACR;EACA,QAAQ;GACN,OAAO,UAAU;GACjB,MAAM;EACR;CACF;CAEA,MAAM,EAAE,MAAM,mBAAmB,mBAAmB,OAAO,EAAE,WAAW,MAAM,CAAC;CAE/E,MAAM,SACJ,oBAAC,QAAD;EACE,cAAY,MAAM,MAAM,CAAC;EACzB,WAAW,GAAG,yBAAyB,SAAS;EAChD,UAAU,YAAY;EACtB,MAAM,MAAM,MAAM,CAAC;EACX;EACR,eAAe;GACb,KAAK;GACL,SAAS,QAAQ;GACjB,IAAI,cAAc,YAAY,QAAW,aAAa,cAAc,OAAO;GAC3E,cAAc,UAAU,iBAAiB;IACvC,SAAS,MAAM;IACf,cAAc,UAAU;GAC1B,GAAG,GAAK;EACV;EACK;EACC;EACG;EACT,GAAI;CACL;CAGH,OAAO,cAAc,oBAAC,SAAD;EAAS,MAAM,MAAM,MAAM,CAAC;YAAQ;CAAgB,KAAI;AAC/E,CAAC;AAED,gBAAgB,cAAc"}