@versini/ui-toggle 6.2.2 → 6.3.0

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { JSX } from 'react/jsx-runtime';
 
-export declare const Toggle: ({ checked, onChange, label, labelHidden, name, mode, focusMode, labelMode, className, noBorder, narrow, noHaptic, labelPosition, subLabel, }: ToggleProps) => JSX.Element;
+export declare const Toggle: ({ checked, onChange, label, labelHidden, name, mode, focusMode, labelMode, className, noBorder, narrow, noHaptic, labelPosition, subLabel, splitBackground, }: ToggleProps) => JSX.Element;
 
 export declare const TOGGLE_CLASSNAME = "av-toggle";
 
@@ -70,6 +70,12 @@ declare type ToggleProps = {
      * @default "right"
      */
     labelPosition?: "left" | "right";
+    /**
+     * Whether or not to render the toggle track with a split background
+     * gradient overlay (aqua-style).
+     * @default false
+     */
+    splitBackground?: boolean;
 };
 
 export { }

package/dist/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-toggle v6.2.2
+  @versini/ui-toggle v6.3.0
   © 2026 gizmette.com
 */
 
@@ -29,12 +29,17 @@ const getToggleKnobFocusClasses = ({ focusMode })=>{
         "peer-focus:outline-focus-dark dark:peer-focus:outline-focus-light": focusMode === "system"
     });
 };
-const getToggleKnobOnClasses = ({ narrow })=>{
+// Aqua-style split background overlay for the toggle knob:
+// - Top half: flat white overlay (light, uniform)
+// - Bottom half: starts darker, gradually lightens toward the bottom edge
+const KNOB_SPLIT_OVERLAY = "after:bg-[linear-gradient(to_bottom,oklch(1_0_0/0.2)_50%,oklch(0_0_0/0.1)_50%,oklch(1_0_0/0.05)_100%)]";
+const getToggleKnobOnClasses = ({ narrow, splitBackground })=>{
     return clsx({
         "peer-checked:after:translate-x-full": !narrow,
         "peer-checked:after:translate-x-4": narrow
     }, // background color when checked
-    "peer-checked:bg-action-light", // knob circle and border color when checked
+    "peer-checked:bg-action-light", // split background overlay on the knob (both states)
+    splitBackground && KNOB_SPLIT_OVERLAY, // knob circle and border color when checked
     "peer-checked:after:bg-white", "peer-checked:after:border-white");
 };
 const getToggleKnobOffClasses = ({ narrow })=>{
@@ -79,7 +84,7 @@ const getWrapperClasses = ({ className })=>{
 const getToggleWrapperClasses = ()=>{
     return "relative inline-block";
 };
-const getToggleClasses = ({ mode, focusMode, labelHidden, className, noBorder, narrow, labelMode, labelPosition = "right", subLabel })=>{
+const getToggleClasses = ({ mode, focusMode, labelHidden, className, noBorder, narrow, labelMode, labelPosition = "right", subLabel, splitBackground })=>{
     return {
         toggle: clsx(getToggleBaseClasses({
             narrow
@@ -91,7 +96,8 @@ const getToggleClasses = ({ mode, focusMode, labelHidden, className, noBorder, n
         }), getToggleKnobOffClasses({
             narrow
         }), getToggleKnobOnClasses({
-            narrow
+            narrow,
+            splitBackground
         })),
         label: getLabelClasses({
             labelHidden,
@@ -117,7 +123,7 @@ const getToggleClasses = ({ mode, focusMode, labelHidden, className, noBorder, n
 
 
 
-const Toggle = ({ checked = false, onChange, label, labelHidden = false, name, mode = "system", focusMode = "system", labelMode, className, noBorder = false, narrow = false, noHaptic = false, labelPosition = "right", subLabel })=>{
+const Toggle = ({ checked = false, onChange, label, labelHidden = false, name, mode = "system", focusMode = "system", labelMode, className, noBorder = false, narrow = false, noHaptic = false, labelPosition = "right", subLabel, splitBackground = false })=>{
     const { haptic } = useHaptic();
     const toggleClasses = getToggleClasses({
         mode,
@@ -128,7 +134,8 @@ const Toggle = ({ checked = false, onChange, label, labelHidden = false, name, m
         narrow,
         labelMode,
         labelPosition,
-        subLabel: !!subLabel
+        subLabel: !!subLabel,
+        splitBackground
     });
     const handleChange = (e)=>{
         if (!noHaptic) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-toggle",
-	"version": "6.2.2",
+	"version": "6.3.0",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -37,7 +37,7 @@
 		"test": "vitest run"
 	},
 	"devDependencies": {
-		"@versini/ui-types": "8.3.0"
+		"@versini/ui-types": "8.4.0"
 	},
 	"dependencies": {
 		"@versini/ui-hooks": "6.1.1",
@@ -47,5 +47,5 @@
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "84d5ac4ea694792080c881a50b4fd5c4ce3750c0"
+	"gitHead": "af3ee18b6fc3d57977ec331df0ce151794e29342"
 }