nextuiq/dist/index33.mjs

NextUIQ is a modern, lightweight, and developer-friendly UI component library for React and Next.js. Built with TypeScript and Tailwind CSS, it offers customizable, accessible, and performance-optimized components with built-in dark mode, theme customizat

import { j as jsxRuntimeExports } from './index46.mjs';
import { forwardRef, useState, useId } from 'react';

const SwitchComponent = forwardRef(({
  label,
  defaultChecked = false,
  disabled = false,
  onChange,
  color = "blue",
  id,
  name,
  required = false,
  "aria-label": ariaLabel,
  "aria-describedby": ariaDescribedby,
  ...props
}, ref) => {
  const [isChecked, setIsChecked] = useState(defaultChecked);
  const uniqueId = useId();
  const switchId = id || uniqueId;
  const handleToggle = () => {
    if (disabled) return;
    const newCheckedState = !isChecked;
    setIsChecked(newCheckedState);
    onChange?.(newCheckedState);
  };
  const switchColors = color === "blue" ? {
    background: isChecked ? "bg-[oklch(var(--theme-primary))]" : "bg-[oklch(var(--theme-muted))]",
    knob: isChecked ? "translate-x-full bg-[oklch(var(--theme-primary-foreground))]" : "translate-x-0 bg-[oklch(var(--theme-background))]"
  } : {
    background: isChecked ? "bg-[oklch(var(--theme-secondary))]" : "bg-[oklch(var(--theme-muted))]",
    knob: isChecked ? "translate-x-full bg-[oklch(var(--theme-secondary-foreground))]" : "translate-x-0 bg-[oklch(var(--theme-background))]"
  };
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
    "label",
    {
      htmlFor: switchId,
      className: `flex cursor-pointer select-none items-center gap-3 text-sm font-medium ${disabled ? "text-[oklch(var(--theme-muted-foreground))] cursor-not-allowed" : "text-[oklch(var(--theme-foreground))]"}`,
      children: [
        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
          /* @__PURE__ */ jsxRuntimeExports.jsx(
            "input",
            {
              ref,
              type: "checkbox",
              id: switchId,
              name,
              checked: isChecked,
              onChange: handleToggle,
              disabled,
              required,
              "aria-label": ariaLabel || label,
              "aria-describedby": ariaDescribedby,
              "aria-checked": isChecked,
              className: "sr-only",
              ...props
            }
          ),
          /* @__PURE__ */ jsxRuntimeExports.jsx(
            "div",
            {
              className: `block transition duration-150 ease-linear h-6 w-11 rounded-full ${disabled ? "bg-[oklch(var(--theme-muted))] pointer-events-none" : switchColors.background}`,
              "aria-hidden": "true"
            }
          ),
          /* @__PURE__ */ jsxRuntimeExports.jsx(
            "div",
            {
              className: `absolute left-0.5 top-0.5 h-5 w-5 rounded-full shadow-md duration-150 ease-linear transform ${switchColors.knob}`,
              "aria-hidden": "true"
            }
          )
        ] }),
        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "select-none", children: label })
      ]
    }
  );
});
SwitchComponent.displayName = "Switch";
const Switch = SwitchComponent;

export { Switch };