UNPKG

nextuiq

Version:

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

2 lines (1 loc) 1.79 kB
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index46.js"),r=require("react"),a=r.forwardRef((({label:a,defaultChecked:t=!1,disabled:o=!1,onChange:s,color:n="blue",id:l,name:d,required:i=!1,"aria-label":c,"aria-describedby":u,...m},h)=>{const[b,x]=r.useState(t),k=r.useId(),g=l||k,p="blue"===n?{background:b?"bg-[oklch(var(--theme-primary))]":"bg-[oklch(var(--theme-muted))]",knob:b?"translate-x-full bg-[oklch(var(--theme-primary-foreground))]":"translate-x-0 bg-[oklch(var(--theme-background))]"}:{background:b?"bg-[oklch(var(--theme-secondary))]":"bg-[oklch(var(--theme-muted))]",knob:b?"translate-x-full bg-[oklch(var(--theme-secondary-foreground))]":"translate-x-0 bg-[oklch(var(--theme-background))]"};return e.jsxRuntimeExports.jsxs("label",{htmlFor:g,className:"flex cursor-pointer select-none items-center gap-3 text-sm font-medium "+(o?"text-[oklch(var(--theme-muted-foreground))] cursor-not-allowed":"text-[oklch(var(--theme-foreground))]"),children:[e.jsxRuntimeExports.jsxs("div",{className:"relative",children:[e.jsxRuntimeExports.jsx("input",{ref:h,type:"checkbox",id:g,name:d,checked:b,onChange(){if(o)return;const e=!b;x(e),s?.(e)},disabled:o,required:i,"aria-label":c||a,"aria-describedby":u,"aria-checked":b,className:"sr-only",...m}),e.jsxRuntimeExports.jsx("div",{className:`block transition duration-150 ease-linear h-6 w-11 rounded-full ${o?"bg-[oklch(var(--theme-muted))] pointer-events-none":p.background}`,"aria-hidden":"true"}),e.jsxRuntimeExports.jsx("div",{className:`absolute left-0.5 top-0.5 h-5 w-5 rounded-full shadow-md duration-150 ease-linear transform ${p.knob}`,"aria-hidden":"true"})]}),e.jsxRuntimeExports.jsx("span",{className:"select-none",children:a})]})}));a.displayName="Switch",exports.Switch=a;