@trail-ui/react
Version:
107 lines (105 loc) • 4.46 kB
JavaScript
// src/switch/switch.tsx
import { clsx } from "@trail-ui/shared-utils";
import { cloneElement, forwardRef } from "react";
import { Switch as AriaSwitch } from "react-aria-components";
import { CheckIcon, CloseIcon } from "@trail-ui/icons";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
function Switch(props, ref) {
const { children, className, size = "sm", label, icon, onValueChange, ...otherProps } = props;
const baseStyles = clsx(
"inline-flex items-center gap-2 cursor-pointer transition-all duration-200",
"data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none",
className
);
const sizeConfig = {
sm: {
wrapper: "w-9 h-5",
thumb: "w-4 h-4",
thumbOnPosition: "translate-x-[18px]",
thumbOffPosition: "translate-x-0.5",
iconSize: 16,
checkIconPosition: "left-0.5",
closeIconPosition: "right-0.5"
},
md: {
wrapper: "w-12 h-6",
thumb: "w-5 h-5",
thumbOnPosition: "translate-x-[26px]",
thumbOffPosition: "translate-x-0.5",
iconSize: 20,
checkIconPosition: "left-1",
closeIconPosition: "right-1"
},
lg: {
wrapper: "w-[60px] h-7",
thumb: "w-6 h-6",
thumbOnPosition: "translate-x-[34px]",
thumbOffPosition: "translate-x-0.5",
iconSize: 24,
checkIconPosition: "left-1",
closeIconPosition: "right-1"
}
};
const currentSize = sizeConfig[size];
const renderCheckIcon = (props2) => /* @__PURE__ */ jsx(CheckIcon, { height: props2.height, width: props2.width, className: "text-neutral-50" });
const renderCloseIcon = (props2) => /* @__PURE__ */ jsx(CloseIcon, { height: props2.height, width: props2.width, className: "text-neutral-50" });
const checkIcon = icon || renderCheckIcon;
const closeIcon = icon || renderCloseIcon;
const handleChange = (value) => {
if (otherProps.onChange) {
otherProps.onChange(value);
}
if (onValueChange) {
const iconProps = {
isSelected: value,
className: "",
width: `${currentSize.iconSize}px`,
height: `${currentSize.iconSize}px`
};
onValueChange(value, iconProps);
}
};
return /* @__PURE__ */ jsx(AriaSwitch, { ref, className: baseStyles, onChange: handleChange, ...otherProps, children: (renderProps) => {
const iconProps = {
isSelected: renderProps.isSelected,
className: "",
width: `${currentSize.iconSize}px`,
height: `${currentSize.iconSize}px`
};
const renderedCheckIcon = typeof checkIcon === "function" ? checkIcon(iconProps) : checkIcon && cloneElement(checkIcon, iconProps);
const renderedCloseIcon = typeof closeIcon === "function" ? closeIcon(iconProps) : closeIcon && cloneElement(closeIcon, iconProps);
const wrapperStyles = clsx(
"relative flex outline-none items-center justify-start rounded-full transition-all duration-300 ease-in-out",
renderProps.isFocusVisible ? "outline outline-2 outline-offset-2 outline-purple-600" : "",
renderProps.isReadOnly ? "pointer-events-none" : "",
renderProps.isSelected ? "bg-purple-600 hover:bg-purple-800" : "bg-neutral-600 hover:bg-neutral-800",
currentSize.wrapper
);
const thumbStyles = clsx(
"absolute rounded-full bg-white shadow-md transform transition-transform duration-300 ease-in-out",
renderProps.isSelected ? currentSize.thumbOnPosition : currentSize.thumbOffPosition,
currentSize.thumb
);
const checkIconStyles = clsx(
"absolute flex items-center justify-center z-0",
currentSize.checkIconPosition
);
const closeIconStyles = clsx(
"absolute flex items-center justify-center z-0",
currentSize.closeIconPosition
);
return /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx("span", { children: label }),
/* @__PURE__ */ jsxs("span", { className: wrapperStyles, children: [
/* @__PURE__ */ jsx("span", { className: checkIconStyles, children: renderedCheckIcon }),
/* @__PURE__ */ jsx("span", { className: closeIconStyles, children: renderedCloseIcon }),
/* @__PURE__ */ jsx("span", { className: thumbStyles })
] }),
children && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-neutral-800", children: typeof children === "function" ? children(renderProps) : children })
] });
} });
}
var _Switch = forwardRef(Switch);
export {
_Switch
};