@veracity/vui/dist/switch/switchMain.js

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

import { isReactText } from "../utils/assertion.js";
import { filterUndefined } from "../utils/object.js";
import { cs } from "../utils/styles.js";
import { useStyleConfig } from "../core/theme.js";
import styled from "../core/styled.js";
import vui from "../core/vui.js";
import { SwitchProvider } from "./context.js";
import { SwitchButton } from "./switchButton.js";
import { SwitchLabel } from "./switchLabel.js";
import { useMemo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/switch/switchMain.tsx
const SwitchBase = styled.labelBox`
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  line-height: normal;
  width: fit-content;

  &[aria-disabled='true'] {
    cursor: not-allowed;

    .vui-switchLabel {
      color: disabled.color;
    }
  }
`;
/**
* Displays a toggle button with supporting text. Allows passing custom elements as side labels and inner labels.
* Forwards many relevant props to the innner input element. Exposes some props to the children via context.
*/
const Switch = vui((props, ref) => {
	const { button, checked, children, className, defaultChecked, disabled, id, innerLabelOff, innerLabelOn, inputProps, inputRef, labelLeft, labelRight, name, onBlur, onChange, onFocus, required, size, value, variant, ...rest } = props;
	const styles = useStyleConfig("Switch", props);
	const context = useMemo(() => filterUndefined({
		checked,
		defaultChecked,
		disabled,
		name,
		onBlur,
		onChange,
		onFocus,
		required,
		size,
		value,
		variant
	}), [
		checked,
		defaultChecked,
		disabled,
		name,
		onBlur,
		onChange,
		onFocus,
		required,
		size,
		value,
		variant
	]);
	const aliasedProps = filterUndefined({ "aria-disabled": disabled });
	return /* @__PURE__ */ jsx(SwitchProvider, {
		value: context,
		children: /* @__PURE__ */ jsxs(SwitchBase, {
			className: cs("vui-switch", className),
			ref,
			...styles.container,
			...aliasedProps,
			...rest,
			children: [
				isReactText(labelLeft) ? /* @__PURE__ */ jsx(SwitchLabel, {
					mr: 1,
					text: labelLeft
				}) : labelLeft,
				children ?? button ?? /* @__PURE__ */ jsx(SwitchButton, {
					id,
					innerLabelOff,
					innerLabelOn,
					inputProps,
					inputRef
				}),
				isReactText(labelRight) ? /* @__PURE__ */ jsx(SwitchLabel, {
					ml: 1,
					text: labelRight
				}) : labelRight
			]
		})
	});
});
Switch.Button = SwitchButton;
Switch.Label = SwitchLabel;
Switch.displayName = "Switch";

//#endregion
export { Switch, Switch as default, SwitchBase };
globalThis.__vuiVersion__ = "5.3.1"
//# sourceMappingURL=switchMain.js.map