@veracity/vui/dist/label/label.js

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

import { cs } from "../utils/styles.js";
import { omitThemingProps, 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 { Tooltip } from "../tooltip/tooltip.js";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";

//#region src/label/label.tsx
const LabelBase = styled.labelBox`
  display: block;
  color: sandstone.10;
  width: 100%;

  &[aria-disabled='true'] {
    cursor: not-allowed;
  }
`;
const LabelContent = ({ text, markAsOptional, optionalText = "(optional)", tooltipText, helperStyles }) => {
	const textProps = {
		variant: "label",
		fontSize: "inherit"
	};
	const helperProps = {
		...textProps,
		...helperStyles
	};
	return /* @__PURE__ */ jsxs(Fragment, { children: [
		/* @__PURE__ */ jsx(T, {
			...textProps,
			children: text
		}),
		!!text && markAsOptional && /* @__PURE__ */ jsx(T, {
			...helperProps,
			children: optionalText
		}),
		!!text && !!tooltipText && /* @__PURE__ */ jsx(T, {
			...helperStyles,
			children: /* @__PURE__ */ jsx(Tooltip, {
				text: tooltipText,
				children: /* @__PURE__ */ jsx(Icon, {
					color: "seaBlue.28",
					mb: "-3px",
					name: "uiInfoCircle",
					size: "xs",
					role: "button"
				})
			})
		})
	] });
};
/** Displays a label element, optionally with helper text, an optional indicator, and an info tooltip. */
const Label = vui((props, ref) => {
	const { children, className, markAsOptional, optionalText, tooltipText, text, ...rest } = omitThemingProps(props);
	const styles = useStyleConfig("Label", props);
	return /* @__PURE__ */ jsx(T, {
		as: LabelBase,
		className: cs("vui-label", className),
		ref,
		...rest,
		children: children ?? /* @__PURE__ */ jsx(LabelContent, {
			helperStyles: styles.helper,
			markAsOptional,
			optionalText,
			text,
			tooltipText
		})
	});
});
Label.displayName = "Label";

//#endregion
export { Label, Label as default, LabelBase };
globalThis.__vuiVersion__ = "5.3.1"
//# sourceMappingURL=label.js.map