"use client";
import * as React from 'react';
import { LayoutGroup, motion } from 'framer-motion';
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
import { jsx, jsxs } from 'react/jsx-runtime';

function cn(...inputs) {
  return twMerge(clsx(inputs));
}
var springTransition = {
  type: "spring",
  duration: 0.35,
  bounce: 0
};
function ToggleSwitch({
  value: controlledValue,
  defaultValue,
  onValueChange,
  options,
  size = "default",
  disabled = false,
  className,
  "aria-label": ariaLabel
}) {
  const [internalValue, setInternalValue] = React.useState(
    defaultValue != null ? defaultValue : options[0].value
  );
  const isControlled = controlledValue !== void 0;
  const activeValue = isControlled ? controlledValue : internalValue;
  const layoutId = React.useId();
  const handleSelect = (optionValue) => {
    if (disabled || optionValue === activeValue) return;
    if (!isControlled) {
      setInternalValue(optionValue);
    }
    onValueChange == null ? void 0 : onValueChange(optionValue);
  };
  const handleKeyDown = (event, optionValue) => {
    if (event.key === "Enter" || event.key === " ") {
      event.preventDefault();
      handleSelect(optionValue);
    }
    if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
      event.preventDefault();
      const otherOption = optionValue === options[0].value ? options[1] : options[0];
      handleSelect(otherOption.value);
      const container = event.currentTarget.parentElement;
      const otherButton = container == null ? void 0 : container.querySelector(
        `[data-value="${otherOption.value}"]`
      );
      otherButton == null ? void 0 : otherButton.focus();
    }
  };
  const isSmall = size === "sm";
  const isLarge = size === "lg";
  return /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsx(
    "div",
    {
      "data-slot": "toggle-switch",
      role: "radiogroup",
      "aria-label": ariaLabel,
      "aria-disabled": disabled || void 0,
      className: cn(
        "inline-flex items-center gap-0.5 rounded-[var(--radius-sm)] p-0.5",
        isSmall ? "h-7" : isLarge ? "h-11" : "h-9",
        disabled && "cursor-not-allowed opacity-50",
        className,
        // Track fill: apply after `className` so callers cannot accidentally override with a darker `bg-*` (e.g. sidebar chrome).
        "bg-neutral-200"
      ),
      children: options.map((option) => {
        var _a;
        const isActive = activeValue === option.value;
        return /* @__PURE__ */ jsxs(
          "button",
          {
            type: "button",
            role: "radio",
            "aria-checked": isActive,
            "aria-label": (_a = option.label) != null ? _a : option.value,
            "data-value": option.value,
            "data-active": isActive || void 0,
            disabled,
            tabIndex: isActive ? 0 : -1,
            onClick: () => handleSelect(option.value),
            onKeyDown: (e) => handleKeyDown(e, option.value),
            className: cn(
              "relative z-[1] inline-flex shrink-0 items-center justify-center rounded-[var(--radius-sm)] outline-none",
              "focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-1 focus-visible:ring-offset-background",
              "transition-colors duration-150",
              "active:scale-[0.97] active:transition-transform active:duration-75",
              "motion-reduce:active:scale-100",
              isSmall ? "min-w-7 h-6 px-1.5" : isLarge ? "min-w-11 h-10 px-3" : "min-w-9 h-8 px-2",
              isActive ? "text-primary" : "text-[var(--theme-icon-secondary)] hover:text-[var(--theme-icon-primary)]",
              disabled ? "pointer-events-none" : "cursor-pointer"
            ),
            children: [
              isActive && /* @__PURE__ */ jsx(
                motion.span,
                {
                  layoutId: `toggle-indicator-${layoutId}`,
                  className: "pointer-events-none absolute inset-0 z-0 rounded-[var(--radius-sm)] bg-[var(--theme-background-page)] shadow-[0px_1px_3px_0px_rgba(0,0,0,0.08),0px_1px_2px_-1px_rgba(0,0,0,0.08)]",
                  transition: springTransition,
                  style: { willChange: "transform" }
                }
              ),
              option.icon != null && /* @__PURE__ */ jsx(
                "span",
                {
                  className: cn(
                    "relative z-[1] [&>svg]:shrink-0",
                    isSmall ? "[&>svg]:size-3.5" : isLarge ? "[&>svg]:size-5" : "[&>svg]:size-[18px]"
                  ),
                  "aria-hidden": true,
                  children: option.icon
                }
              ),
              option.label != null && option.icon == null && /* @__PURE__ */ jsx(
                "span",
                {
                  className: cn(
                    "relative z-[1] font-medium select-none",
                    isSmall ? "text-xs" : isLarge ? "text-base" : "text-sm"
                  ),
                  children: option.label
                }
              )
            ]
          },
          option.value
        );
      })
    }
  ) });
}

export { ToggleSwitch };
//# sourceMappingURL=toggle-switch.js.map
//# sourceMappingURL=toggle-switch.js.map