@sreedev/my3dui 0.2.1 → 0.2.2

package/dist/index.cjs

@@ -1657,56 +1657,73 @@ function Tabs3D({
 var import_react18 = require("react");
 var import_framer_motion8 = require("framer-motion");
 var import_jsx_runtime20 = require("react/jsx-runtime");
-function Toggle3D({
-  checked: controlledChecked,
-  defaultChecked = false,
-  onChange,
-  disabled = false,
-  variant = "pill",
-  label
-}) {
-  const [internalChecked, setInternalChecked] = (0, import_react18.useState)(defaultChecked);
-  const isControlled = controlledChecked !== void 0;
-  const isChecked = isControlled ? controlledChecked : internalChecked;
-  const handleToggle = () => {
-    if (disabled) return;
-    const newChecked = !isChecked;
-    if (!isControlled) setInternalChecked(newChecked);
-    onChange?.(newChecked);
-  };
-  const getVariantStyles = () => {
-    switch (variant) {
-      case "neon":
-        return isChecked ? "bg-slate-900 border border-cyan-500/50 shadow-[0_0_15px_rgba(6,182,212,0.4)]" : "bg-slate-900 border border-slate-700";
-      case "glass":
-        return "bg-white/20 backdrop-blur-md border border-white/30 shadow-inner";
-      case "pill":
-      default:
-        return isChecked ? "bg-primary shadow-inner" : "bg-slate-200 dark:bg-slate-700 shadow-inner";
-    }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-      "button",
-      {
-        onClick: handleToggle,
-        className: cn(
-          "relative h-8 w-14 rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-          disabled && "opacity-50 cursor-not-allowed",
-          getVariantStyles()
-        ),
-        role: "switch",
-        "aria-checked": isChecked,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+var Toggle3D = (0, import_react18.forwardRef)(
+  ({
+    checked: controlledChecked,
+    defaultChecked = false,
+    onChange,
+    disabled = false,
+    variant = "pill",
+    label
+  }, ref) => {
+    const [internalChecked, setInternalChecked] = (0, import_react18.useState)(defaultChecked);
+    const isControlled = controlledChecked !== void 0;
+    const isChecked = isControlled ? controlledChecked : internalChecked;
+    const handleToggle = () => {
+      if (disabled) return;
+      const newChecked = !isChecked;
+      if (!isControlled) {
+        setInternalChecked(newChecked);
+      }
+      onChange?.(newChecked);
+    };
+    const getVariantStyles = () => {
+      switch (variant) {
+        case "neon":
+          return isChecked ? "bg-black border border-cyan-400 shadow-[0_0_15px_rgba(34,211,238,0.4)]" : "bg-black border border-slate-700";
+        case "glass":
+          return "bg-white/20 backdrop-blur-md border border-white/30";
+        case "pill":
+        default:
+          return isChecked ? "bg-primary" : "bg-muted";
+      }
+    };
+    const toggleWidth = 56;
+    const knobSize = 24;
+    const padding = 4;
+    const travel = toggleWidth - knobSize - padding * 2;
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        "button",
+        {
+          ref,
+          type: "button",
+          role: "switch",
+          "aria-checked": isChecked,
+          "aria-disabled": disabled,
+          disabled,
+          onClick: handleToggle,
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              handleToggle();
+            }
+          },
+          className: cn(
+            "relative h-8 w-14 rounded-full transition-colors",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            disabled && "opacity-50 cursor-not-allowed",
+            getVariantStyles()
+          ),
+          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             import_framer_motion8.motion.div,
             {
               className: cn(
-                "absolute top-1 left-1 h-6 w-6 rounded-full shadow-md z-10",
+                "absolute top-1 left-1 h-6 w-6 rounded-full shadow-md",
                 variant === "neon" && isChecked ? "bg-cyan-400 shadow-[0_0_10px_#22d3ee]" : "bg-white"
               ),
               animate: {
-                x: isChecked ? 24 : 0,
+                x: isChecked ? travel : 0,
                 scale: disabled ? 0.9 : 1
               },
               transition: {
@@ -1715,22 +1732,14 @@ function Toggle3D({
                 damping: 30
               }
             }
-          ),
-          variant !== "neon" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            "div",
-            {
-              className: cn(
-                "absolute inset-0 rounded-full border-b-[3px] border-black/5 pointer-events-none",
-                isChecked ? "border-black/10" : "border-black/5"
-              )
-            }
           )
-        ]
-      }
-    ),
-    label && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-sm font-medium", children: label })
-  ] });
-}
+        }
+      ),
+      label && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-sm font-medium", children: label })
+    ] });
+  }
+);
+Toggle3D.displayName = "Toggle3D";
 
 // src/components/ui/modal3d.tsx
 var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"), 1);