@trail-ui/react/dist/switch/switch.js

"use strict";
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/switch.tsx
var switch_exports = {};
__export(switch_exports, {
  Switch: () => _Switch
});
module.exports = __toCommonJS(switch_exports);
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);
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Switch
});