@veracity/vui/dist/checkbox/checkbox.js

Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.

import { filterUndefined } from "../utils/object.js";
import { cs } from "../utils/styles.js";
import { checkboxColors, disabled } from "./consts.js";
import { omitThemingProps, th, useStyleConfig } from "../core/theme.js";
import styled from "../core/styled.js";
import vui from "../core/vui.js";
import { Icon } from "../icon/icon.js";
import { T } from "../t/t.js";
import { useCheckboxGroupContext } from "./context.js";
import { useEffect, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/checkbox/checkbox.tsx
const CheckboxControl = styled.spanBox`
  border-radius: none;
  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;
  width: fit-content;

  &:not([aria-disabled='true']):not([aria-readonly='true']):hover .vui-checkboxControl {
    color: ${(p) => th.color(p.controlHoverColor)};
  }

  &[aria-readonly='true'] {
    cursor: auto;
  }

  &:not([aria-disabled='true']):not([aria-readonly='true']) .vui-checkboxControl:focus-within {
    color: ${checkboxColors.focus};
  }

  &[aria-disabled='true'] {
    color: ${disabled.text};
    cursor: not-allowed;

    .vui-checkboxControl {
      color: ${disabled.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.
*/
const Checkbox = vui((props, ref) => {
	const { defaultValue: groupDefaultValue, ...checkboxGroupProps } = useCheckboxGroupContext() ?? {};
	const mergedProps = {
		...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 [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 hasJsxChildren = !!children;
	const jsxChildrenMt = {
		sm: "3px",
		md: "2px",
		lg: "0px"
	};
	useEffect(() => {
		checked !== void 0 && setIsChecked(checked);
	}, [checked]);
	const onChange = (e) => {
		if (readOnly) return;
		if (checked === void 0) setIsChecked(e.target.checked);
		onChangeProp?.(e);
	};
	const aliasedProps = filterUndefined({
		"aria-disabled": disabled,
		"aria-readonly": readOnly
	});
	return /* @__PURE__ */ jsxs(CheckboxBase, {
		alignItems: isLongLabel || hasJsxChildren ? "flex-start" : "center",
		className: cs("vui-checkbox", className),
		controlHoverColor,
		ref,
		...styles.container,
		...aliasedProps,
		...rest,
		children: [/* @__PURE__ */ jsxs(CheckboxControl, {
			bg: "white",
			className: "vui-checkboxControl",
			color,
			focusWithinRing: 3,
			mr: controlMr,
			mt: hasJsxChildren ? jsxChildrenMt[mergedProps.size ?? "md"] ?? "2px" : void 0,
			role: "none",
			...controlStyles,
			children: [/* @__PURE__ */ jsx(CheckboxInput, {
				className: "vui-checkboxInput",
				onChange,
				ref: inputRef,
				type: "checkbox",
				checked,
				defaultChecked,
				disabled,
				id,
				name,
				required,
				value,
				...inputProps
			}), /* @__PURE__ */ jsx(Icon, {
				className: "vui-checkboxIcon",
				h: "100%",
				name: icon,
				w: "100%"
			})]
		}), children ?? (label && /* @__PURE__ */ jsx(T, {
			className: "vui-checkboxLabel",
			lineHeight: isLongLabel ? "26px" : "normal",
			...styles.label,
			children: label
		}))]
	});
});
Checkbox.displayName = "Checkbox";

//#endregion
export { Checkbox, Checkbox as default, CheckboxBase };
globalThis.__vuiVersion__ = "5.3.1"
//# sourceMappingURL=checkbox.js.map