@trail-ui/react
Version:
138 lines (134 loc) • 6.15 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/switch/index.ts
var switch_exports = {};
__export(switch_exports, {
Switch: () => _Switch,
SwitchContext: () => import_react_aria_components2.SwitchContext
});
module.exports = __toCommonJS(switch_exports);
// src/switch/switch.tsx
var import_shared_utils = require("@trail-ui/shared-utils");
var import_react = require("react");
var import_react_aria_components = require("react-aria-components");
var import_icons = require("@trail-ui/icons");
var import_jsx_runtime = require("react/jsx-runtime");
function Switch(props, ref) {
const { children, className, size = "sm", label, icon, onValueChange, ...otherProps } = props;
const baseStyles = (0, import_shared_utils.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__ */ (0, import_jsx_runtime.jsx)(import_icons.CheckIcon, { height: props2.height, width: props2.width, className: "text-neutral-50" });
const renderCloseIcon = (props2) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.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__ */ (0, import_jsx_runtime.jsx)(import_react_aria_components.Switch, { 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 && (0, import_react.cloneElement)(checkIcon, iconProps);
const renderedCloseIcon = typeof closeIcon === "function" ? closeIcon(iconProps) : closeIcon && (0, import_react.cloneElement)(closeIcon, iconProps);
const wrapperStyles = (0, import_shared_utils.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 = (0, import_shared_utils.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 = (0, import_shared_utils.clsx)(
"absolute flex items-center justify-center z-0",
currentSize.checkIconPosition
);
const closeIconStyles = (0, import_shared_utils.clsx)(
"absolute flex items-center justify-center z-0",
currentSize.closeIconPosition
);
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: label }),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: wrapperStyles, children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: checkIconStyles, children: renderedCheckIcon }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: closeIconStyles, children: renderedCloseIcon }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: thumbStyles })
] }),
children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", className: "text-neutral-800", children: typeof children === "function" ? children(renderProps) : children })
] });
} });
}
var _Switch = (0, import_react.forwardRef)(Switch);
// src/switch/index.ts
var import_react_aria_components2 = require("react-aria-components");
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
Switch,
SwitchContext
});