@trail-ui/react
Version:
42 lines (40 loc) • 1.99 kB
JavaScript
// src/switch/switch.tsx
import { clsx } from "@trail-ui/shared-utils";
import { toggle } from "@trail-ui/theme";
import { cloneElement, forwardRef, useMemo } from "react";
import { Switch as AriaSwitch } from "react-aria-components";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
function Switch(props, ref) {
const { children, classNames, className, color, size, thumbIcon, ...otherProps } = props;
const slots = useMemo(() => toggle({ color, size }), [color, size]);
const baseStyles = clsx(classNames == null ? void 0 : classNames.base, className);
return /* @__PURE__ */ jsx(AriaSwitch, { id: "switch", ref, className: slots.base({ class: baseStyles }), ...otherProps, children: (renderProps) => {
const thumbIconProps = {
"data-checked": String(renderProps.isSelected),
isSelected: renderProps.isSelected,
className: slots.thumbIcon({ class: classNames == null ? void 0 : classNames.thumbIcon }),
width: "1em",
height: "1em"
};
const clonedThumbIcon = typeof thumbIcon === "function" ? thumbIcon(thumbIconProps) : thumbIcon && cloneElement(thumbIcon, thumbIconProps);
return /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsxs(
"span",
{
"aria-labelledby": "switch-label",
className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }),
children: [
thumbIconProps.isSelected && clonedThumbIcon,
/* @__PURE__ */ jsx("span", { className: slots.thumb({ class: classNames == null ? void 0 : classNames.thumb }) }),
!thumbIconProps.isSelected && clonedThumbIcon
]
}
),
children && /* @__PURE__ */ jsx("span", { id: "switch-label", className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: typeof children === "function" ? children(renderProps) : children })
] });
} });
}
var _Switch = forwardRef(Switch);
export {
_Switch
};